主要涉及技術(shù)：Vue3、TypeScript、Element Plus/Vuetify、OpenAI API（使用GPT模型）、Axios
主要實(shí)現(xiàn)步驟
一、基礎(chǔ)對話框組件
二、流式響應(yīng)
響應(yīng)數(shù)據(jù)邊響應(yīng)邊顯示，避免長時(shí)間等待
三、Markdown支持
接口返回的數(shù)據(jù)是Markdown語法的直接顯示看上去混亂，需要引入相關(guān)支持插件
安裝依賴：npm install markdown-it
在組件中使用：
<script setup>
import MarkdownIt from 'markdown-it'
const md = new MarkdownIt()
</script>
直接使用v-html可能有XSS風(fēng)險(xiǎn)，確保AI返回的內(nèi)容是可信的，或者使用DOMPurify進(jìn)行凈化。
通過上述步驟就可以實(shí)現(xiàn)在頁面中與AI進(jìn)行對話
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
暫無評論，快來評論吧!