引言
平时我们都是用的在线的AI工具，直接输入问题，然后AI回答我们，那么怎么把AI接入项目中呢？
这个问题问得好。
- 方案一：引入第三方已封装好的UI库
- 方案二：自己写
对于方案一，市面上已有一些，大家可自己搜索，类似于Ant Design X（React/Vue）等，今天主讲方案二。
封装
本组件示例仅提供交互思路，样式啥的自己封装。
先看下效果图
可以看到，我们输入了一个问题，然后AI就会不断地给我们推送消息，消息是流式的stream，我们要做的就是把这些流式消息不断地渲染在页面上。
如果等返回后只渲染一次，那么用户等待时间太长了，体验感不好，你懂得~
由于返回的内容是markdown格式的，所以我们还要引入markdown-it组件来美化显示。
pnpm add markdown-it
还要安装openai来请求
pnpm add openai
完整的组件在最下方，大家可以可以自己填入大模型的API地址和KEY值
但是这样做会有风险，那就是
API地址和KEY值容易泄露，所以最好还是封装在后端，改为直接请求后端API地址
同时你还可以给系统设定角色，可以这样写（role: ‘system’,是角色参数，需要放在第一位）：
const stream = await client.chat.completions.create({
model: MODEL_NAME,
messages: [
{
role: 'system',
content: '你是一个经验丰富的历史老师，可以引经据典给学生讲解各种历史知识'
},
{
role: 'user',
content: inputText.value
}
],
// 设为流式
stream: true,
});
完整组件代码如下：
<template>
<div class="app-container">
<input v-model="inputText" placeholder="请输入你的问题" />
<button @click="sendMessage">发送</button>
<div class="main-content" v-if="responseText" v-html="renderedMarkdown"></div>
</div>
</template>
<script setup>
import { ref, computed } from 'vue';
import MarkdownIt from 'markdown-it';
// 配置 API Key，这里可以根据实际情况进行修改
const API_KEY = '你的API key值';
const API_URL = '你的API 请求地址';
// 模型名称，如果API和KEY可以确定模型，那么这个模型不生效
const MODEL_NAME = 'qwq-32b';
// 定义输入框内容和响应文本的响应式变量
const inputText = ref('');
const responseText = ref('');
import OpenAI from "openai";
const client = new OpenAI({
baseURL: API_URL,
apiKey: API_KEY,
dangerouslyAllowBrowser: true,
});
// 创建 markdown-it 实例
const md = new MarkdownIt();
// 计算属性，将 responseText 转换为 HTML
const renderedMarkdown = computed(() => {
return md.render(responseText.value);
});
// 发送消息封装
async function sendMessage() {
try {
const stream = await client.chat.completions.create({
model: MODEL_NAME,
messages: [
{
role: 'user',
content: inputText.value
}
],
// 设为流式
stream: true,
});
for await (const chunk of stream) {
console.log('chunk', chunk)
responseText.value += chunk.choices[0]?.delta?.content || '';
}
} catch (error) {
console.log('请求出错', error)
}
}
</script>
<style scoped>
/* 可以根据需要添加样式 */
.app-container {
padding: 20px;
}
.main-content {
background-color: #f9fafb;
border: 1px solid #e5e7eb;
border-radius: 8px;
padding: 20px;
}
input {
margin-right: 10px;
}
</style>
附Ant Design X的UI界面，确实好看些
