轎車從天而降電動車主被撞身亡 超速搶道所致：現(xiàn)場視頻讓網(wǎng)友吵翻
近日，上海青浦區(qū)法院判決轎車從天而降電動車主被撞身亡案，轎車車主被判有期徒刑一年。案件顯示當(dāng)時男子駕駛轎車在上海某路段行駛，前車忽然轉(zhuǎn)彎提速超車，
hi, 大家好, 我是徐小夕, 最近在 github 上看到一款非常有意思的開源項目, 定位是開箱即用的大模型對話前端解決方案, 我們使用它可以輕松構(gòu)建聊天組件, 并且可以一鍵集成主流 AI 大模型, 比如 通義千問, ChatGpt 等. (讓前端再也不用從零寫聊天組件了~)
圖片
圖片
圖片
我根據(jù)自己的使用和實踐, 總結(jié)一下這款開源聊天組件的亮點:
圖片
它是基于 antd 組件庫進行的二次封裝, 所以我們可以輕松的在 antd 項目中使用, 保持 UI 視覺的統(tǒng)一.
使用啊安裝方式如下:
# @ant-design/pro-editor 基于 antd 和 antd-style，需要在項目中安裝$ 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 ，我是你的專屬機器人，這是我們的 Github：[ProChat](https://github.com/ant-design/pro-chat)' } request={async (messages) => { const mockedData: string = `這是一段模擬的對話數(shù)據(jù)。本次會話傳入了${messages.length}條消息`; return new Response(mockedData); }} /> </div> );};是不是使用非常簡單~
圖片
它內(nèi)置了對話模型常用的：數(shù)據(jù)編輯、重新發(fā)送、刪除對話等這些默認的基本操作.
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ā)者對這些入?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> );}是不是很簡單, 3步就能幫你搭建一個AI聊天應(yīng)用, 大家感興趣的可以嘗試使用一下.
github 地址: https://github.com/ant-design/pro-chat
文檔地址: https://pro-chat.antdigital.dev/
本文鏈接：http://m.www897cc.com/showinfo-26-63229-0.htmlPro-Chat: 一款面向未來的開源智能聊天組件
聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。郵件：2376512515@qq.com
上一篇： 這篇文章徹底讓你了解Java與RPA
Copyright ? 2016-2023 天津谷騏科技有限公司 版權(quán)所有 sitemap.xml
違法及侵權(quán)請聯(lián)系：2376512515@qq.com 津ICP備18001702號
津公網(wǎng)安備 12010102000574號