K60 Pro官方停產(chǎn) 第三方瞬間漲價(jià)
雖然沒有官方宣布，但Redmi的一些高管也已經(jīng)透露了，Redmi K60 Pro已經(jīng)停產(chǎn)且不會(huì)補(bǔ)貨，這一切都是為了即將到來的K60 Ultra鋪路，屬于廠家的正常操作。但有意思的是該機(jī)在停產(chǎn)之后
hi, 大家好, 我是徐小夕, 最近在 github 上看到一款非常有意思的開源項(xiàng)目, 定位是開箱即用的大模型對(duì)話前端解決方案, 我們使用它可以輕松構(gòu)建聊天組件, 并且可以一鍵集成主流 AI 大模型, 比如 通義千問, ChatGpt 等. (讓前端再也不用從零寫聊天組件了~)
圖片
圖片
圖片
我根據(jù)自己的使用和實(shí)踐, 總結(jié)一下這款開源聊天組件的亮點(diǎn):
圖片
它是基于 antd 組件庫(kù)進(jìn)行的二次封裝, 所以我們可以輕松的在 antd 項(xiàng)目中使用, 保持 UI 視覺的統(tǒng)一.
使用啊安裝方式如下:
# @ant-design/pro-editor 基于 antd 和 antd-style，需要在項(xiàng)目中安裝$ npm install antd antd-style -S$ npm install @ant-design/pro-chat -S使用:
import { ProChat } from '@ant-design/pro-chat';import { useTheme } from 'antd-style';export default () => { const theme = useTheme(); return ( <div style={{ background: theme.colorBgLayout }}> <ProChat helloMessage={ '歡迎使用 ProChat ，我是你的專屬機(jī)器人，這是我們的 Github：[ProChat](https://github.com/ant-design/pro-chat)' } request={async (messages) => { const mockedData: string = `這是一段模擬的對(duì)話數(shù)據(jù)。本次會(huì)話傳入了${messages.length}條消息`; return new Response(mockedData); }} /> </div> );};是不是使用非常簡(jiǎn)單~
圖片
它內(nèi)置了對(duì)話模型常用的：數(shù)據(jù)編輯、重新發(fā)送、刪除對(duì)話等這些默認(rèn)的基本操作.
const dataArray = [ `data: {"id": "chatcmpl-6w****KZb6hx****RzIghUz****Qy", "object": "chat.completion.chunk", "created": 1703582861554, "model": "gpt-3.5-turbo-0301", "choices": [{"delta": {"content": "蘋"}, "index": 0, "finish_reason": null}]}`, `data: {"id": "chatcmpl-6w****KZb6hx****RzIghUz****Qy", "object": "chat.completion.chunk", "created": 1703582861554, "model": "gpt-3.5-turbo-0301", "choices": [{"delta": {"content": "果"}, "index": 0, "finish_reason": null}]}`, `data: {"id": "chatcmpl-6w****KZb6hx****RzIghUz****Qy", "object": "chat.completion.chunk", "created": 1703582861554, "model": "gpt-3.5-turbo-0301", "choices": [{"delta": {"content": "公司"}, "index": 0, "finish_reason": null}]}`, `data: {"id": "chatcmpl-6w****KZb6hx****RzIghUz****Qy", "object": "chat.completion.chunk", "created": 1703582861554, "model": "gpt-3.5-turbo-0301", "choices": [{"delta": {"content": "是"}, "index": 0, "finish_reason": null}]}`, `data: {"id": "chatcmpl-6w****KZb6hx****RzIghUz****Qy", "object": "chat.completion.chunk", "created": 1703582861554, "model": "gpt-3.5-turbo-0301", "choices": [{"delta": {"content": "一"}, "index": 0, "finish_reason": null}]}`, `data: {"id": "chatcmpl-6w****KZb6hx****RzIghUz****Qy", "object": "chat.completion.chunk", "created": 1703582861554, "model": "gpt-3.5-turbo-0301", "choices": [{"delta": {"content": "家"}, "index": 0, "finish_reason": null}]}`, `data: {"id": "chatcmpl-6w****KZb6hx****RzIghUz****Qy", "object": "chat.completion.chunk", "created": 1703582861554, "model": "gpt-3.5-turbo-0301", "choices": [{"delta": {"content": "科技"}, "index": 0, "finish_reason": null}]}`, `data: {"id": "chatcmpl-6w****KZb6hx****RzIghUz****Qy", "object": "chat.completion.chunk", "created": 1703582861554, "model": "gpt-3.5-turbo-0301", "choices": [{"delta": {"content": "公司"}, "index": 0, "finish_reason": "complete"}]}`,];參照 ChatGPT、GLM、通義千問等市面上主流的大模型入?yún)⒊鰠ⅲ瑴p少前端開發(fā)者對(duì)這些入?yún)⒑统鰠⒌奶幚?
圖片
圖片
圖片
我們可以通過組件暴露的屬性輕松自定義, 并且代碼質(zhì)量和代碼規(guī)范非常優(yōu)質(zhì).
npm install ai --savenpm install openai --save# or use yarn 、bun、pnpm any elsebun add aibun add openaiimport OpenAI from 'openai';import { OpenAIStream, StreamingTextResponse } from 'ai';export const POST = async (request: Request) => { const { messages = [] }: Partial<{ messages: Array<any> }> = await request.json(); const openai = new OpenAI({ apiKey: 'OpenAI Key', baseURL: 'base url', }); const response = await openai.chat.completions.create({ model: 'gpt-3.5-turbo', messages: [...messages], stream: true, }); const stream = OpenAIStream(response); return new StreamingTextResponse(stream);};"use client";import { ProChat } from "@ant-design/pro-chat";import { useTheme } from "antd-style";export default function Home() { const theme = useTheme(); return ( <div style={{ backgroundColor: theme.colorBgLayout, }} > <ProChat style={{ height: "100vh", width: "100vw", }} request={async (messages: Array<any>) => { const response = await fetch("/api/openai", { method: "POST", body: JSON.stringify({ messages: messages }), }); return response; }} /> </div> );}是不是很簡(jiǎn)單, 3步就能幫你搭建一個(gè)AI聊天應(yīng)用, 大家感興趣的可以嘗試使用一下.
github 地址: https://github.com/ant-design/pro-chat
文檔地址: https://pro-chat.antdigital.dev/
本文鏈接：http://www.www897cc.com/showinfo-26-63229-0.htmlPro-Chat: 一款面向未來的開源智能聊天組件
聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。郵件：2376512515@qq.com
上一篇： 這篇文章徹底讓你了解Java與RPA
Copyright ? 2016-2023 天津谷騏科技有限公司 版權(quán)所有 sitemap.xml
違法及侵權(quán)請(qǐng)聯(lián)系：2376512515@qq.com 津ICP備18001702號(hào)
津公網(wǎng)安備 12010102000574號(hào)