基于tauri2+vue3.5+deepseek搭建桌面端ai流式多轮对话系统
0 / 0 / 创建于 6小时前
xiaoyan2015 的个人博客
客户端Ai实战：基于tauri2.x+vite6+arco接入集成deepseek-chat实战电脑端ai流式输出对话exe模板。
运用技术
- 前端框架：vite^6.3.5+vue^3.5.15+vue-router^4.5.1
- 大模型框架：DeepSeek-V3-0324 + OpenAI
- 跨平台框架：tauri^2.5.0
- UI组件库：arco-design^2.57.0 (字节桌面端组件库)
- 状态管理：pinia^3.0.3
- 本地缓存：pinia-plugin-persistedstate^4.3.0
- 高亮插件：highlight.js^11.11.1
- markdown插件：markdown-it
功能性
- tauri2接入deepseek搭建高性能ai对话系统
- 封装多窗口管理、支持暗黑+浅色主题模式、展开/收缩侧边栏
- 支持各种代码高亮效果、易于展示分享代码片段
- 支持上下文多轮对话、提示词生成图片及预览功能
- 支持在浏览器打开会话里面的链接
- 使用arco-design组件库，保证UI风格统一性
项目框架目录
tauri2-winseek桌面版ai对话项目已经更新到我的原创作品集。
项目环境配置.env
去deepseek申请一个apikey，替换掉.env文件里的key即可。
# 项目名称
VITE_APPNAME = 'Tauri2-DeepSeek'
# 运行端口
VITE_PORT = 1420
# DeepSeek API配置
VITE_DEEPSEEK_API_KEY = 替换为你的 API Key
VITE_DEEPSEEK_BASE_URL = https://api.deepseek.com项目布局模板
<script setup>
import { appState } from '@/pinia/modules/app'
import Titlebar from '@/layouts/components/titlebar/index.vue'
import Sidebar from '@/layouts/components/sidebar/index.vue'
const appstate = appState()
</script>
<template>
<div class="vu__chatbot">
<div class="vu__container" :style="{'--themeSkin': appstate.config.skin}">
<div class="vu__layout flexbox flex-col">
<!-- 导航栏 -->
<Titlebar />
<div class="vu__layout-body flex1 flexbox">
<!-- 侧边栏 -->
<Sidebar />
<!-- 主面板 -->
<div class="vu__layout-main flex1">
<router-view v-slot="{ Component, route }">
<keep-alive>
<component :is="Component" :key="route.path" />
</keep-alive>
</router-view>
</div>
</div>
</div>
</div>
</div>
</template>
tauri2接入deepseek流式
const completion = await openai.chat.completions.create({
// 单一会话
messages: [ {role: 'user', content: editorValue} ],
// 多轮会话
// messages: props.multiConversation ? historySession.value : [{role: 'user', content: editorValue}],
model: 'deepseek-chat',
stream: false, // 非流式输出
max_tokens: 8192, // 限制一次请求中模型生成 completion 的最大 token 数(默认使用 4096)
temperature: 0.4, // 严谨采样 越低越严谨(默认1)
})
// 使用数组存储chunk内容，提高拼接效率
let chunks = []
let lastUpdate = 0
// 处理流式输出
for await (const chunk of completion) {
const content = chunk.choices[0]?.delta?.content || ''
if(content) {
chunks.push(content)
// 限制更新频率：每100ms最多更新一次
const now = Date.now()
if (now - lastUpdate > 100) {
sessionstate.updateSession(botKey, {content: chunks.join('')})
lastUpdate = now
// 滚动最底部
if (sessionstate.reachBottom) {
props.scrollBottom()
}
}
}
if(chunk.choices[0]?.finish_reason === 'stop') {
sessionstate.loading = false
// 确保最终内容完整更新
sessionstate.updateSession(botKey, {content: chunks.join(''), loading: false})
if (sessionstate.reachBottom) {
props.scrollBottom()
}
}
}
往期热文
flutter3-deepseek流式AI模板|Flutter3.27+Dio+DeepSeeek聊天ai助手
Uniapp-DeepSeek跨三端AI助手|uniapp+vue3+deepseek-v3流式ai聊天模板
vue3-webseek网页版AI问答|Vite6+DeepSeek+Arco流式ai聊天打字效果
Vue3-DeepSeek-Chat流式AI对话|vite6+vant4+deepseek智能ai聊天助手
Tauri2.0-Vue3OS桌面端os平台|tauri2+vite6+arco电脑版OS管理系统
Tauri2.0+Vite5聊天室|vue3+tauri2+element-plus仿微信|tauri聊天应用
Electron31-Vue3Admin管理系统|vite5+electron+pinia桌面端后台Exe
uniapp+vue3聊天室|uni-app+vite4+uv-ui跨端仿微信app聊天语音/朋友圈
本作品采用《CC 协议》，转载必须注明作者和本文链接
关于 LearnKu
粤公网安备 44030502004330号
推荐文章：