vue3怎么和大模型交互？

弁言

平常我们都是用的在线的AI工具，直接输入题目，然后AI回答我们，那么怎么把AI接入项目中呢？
这个题目问得好。

• 方案一：引入第三方已封装好的UI库
  
• 方案二：自己写
  

对于方案一，市面上已有一些，大家可自己搜刮，雷同于Ant Design X（React/Vue）等，本日主讲方案二。
封装

   本组件示例仅提供交互思路，样式啥的自己封装。
  先看下结果图

可以看到，我们输入了一个题目，然后AI就会不断地给我们推送消息，消息是流式的stream，我们要做的就是把这些流式消息不断地渲染在页面上。
假如等返回后只渲染一次，那么用户等候时间太长了，体验感欠好，你懂得~
由于返回的内容是markdown格式的，所以我们还要引入markdown-it组件来美化显示。

1. pnpm add markdown-it

复制代码

还要安装openai来请求

1. pnpm add openai

复制代码

完整的组件在最下方，大家可以可以自己填入大模型的API地址和KEY值
   但是这样做会有风险，那就是API地址和KEY值容易泄露，所以最好还是封装在后端，改为直接请求后端API地址
  

同时你还可以给系统设定角色，可以这样写（role: ‘system’,是角色参数，需要放在第一位）：

1. const stream = await client.chat.completions.create({
2.   model: MODEL_NAME,
3.   messages: [
4.     {
5.       role: 'system',
6.       content: '你是一个经验丰富的历史老师，可以引经据典给学生讲解各种历史知识'
7.     },
8.     {
9.       role: 'user',
10.       content: inputText.value
11.     }
12.   ],
13.   // 设为流式
14.   stream: true,
15. });

复制代码

完整组件代码如下：

1. <template>
2.   <div class="app-container">
3.     <input v-model="inputText" placeholder="请输入你的问题" />
4.     <button @click="sendMessage">发送</button>
5.     <div class="main-content" v-if="responseText" v-html="renderedMarkdown"></div>
6.   </div>
7. </template>
9. <script setup>
10. import { ref, computed } from 'vue';
11. import MarkdownIt from 'markdown-it';
13. // 配置 API Key，这里可以根据实际情况进行修改
14. const API_KEY = '你的API key值';
15. const API_URL = '你的API 请求地址';
16. // 模型名称，如果API和KEY可以确定模型，那么这个模型不生效
17. const MODEL_NAME = 'qwq-32b';
19. // 定义输入框内容和响应文本的响应式变量
20. const inputText = ref('');
21. const responseText = ref('');
23. import OpenAI from "openai";
24. const client = new OpenAI({
25.   baseURL: API_URL,
26.   apiKey: API_KEY,
27.   dangerouslyAllowBrowser: true,
28. });
30. // 创建 markdown-it 实例
31. const md = new MarkdownIt();
33. // 计算属性，将 responseText 转换为 HTML
34. const renderedMarkdown = computed(() => {
35.   return md.render(responseText.value);
36. });
38. // 发送消息封装
39. async function sendMessage() {
40.   try {
41.     const stream = await client.chat.completions.create({
42.       model: MODEL_NAME,
43.       messages: [
44.         {
45.           role: 'user',
46.           content: inputText.value
47.         }
48.       ],
49.       // 设为流式
50.       stream: true,
51.     });
53.     for await (const chunk of stream) {
54.       console.log('chunk', chunk)
55.       responseText.value += chunk.choices[0]?.delta?.content || '';
56.     }
57.   } catch (error) {
58.     console.log('请求出错', error)
59.   }
60. }
62. </script>
65. <style scoped>
66. /* 可以根据需要添加样式 */
67. .app-container {
68.   padding: 20px;
69. }
70. .main-content {
71.   background-color: #f9fafb;
72.   border: 1px solid #e5e7eb;
73.   border-radius: 8px;
74.   padding: 20px;
75. }
76. input {
77.   margin-right: 10px;
78. }
79. </style>

复制代码

附Ant Design X的UI界面，确实好看些

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。