卡卷网
当前位置:卡卷网 / 每日看点 / 正文

DeepSeek为什么超越了OpenAI?

作者:卡卷网发布时间:2025-04-03 22:04浏览数量:40次评论数量:0次

2025年AI实战deepseek-v3+vite6打造专属网页AI版流式多轮会话系统。

vue3-webseek网页版AI问答|Vite6+DeepSeek+Arco流式ai聊天打字效果 - xiaoyan2017 - 博客园

DeepSeek为什么超越了OpenAI?  第1张

vue3ai-webseek 整合 Vue3.5 接入 DeepSeek-V3 API 对话大模型。支持上下文多轮会话、代码高亮、本地缓存,图片生成等功能。

DeepSeek为什么超越了OpenAI?  第2张

运用技术

  • 开发工具:VScode
  • 前端框架:vite^6.2.0+vue^3.5.13+vue-router^4.5.0
  • 大模型ai框架:DeepSeek-V3 + OpenAI
  • 组件库:arco-design^2.57.0 (字节桌面端组件库)
  • 状态管理:pinia^3.0.1
  • 本地存储:pinia-plugin-persistedstate^4.2.0
  • 高亮插件:highlight.js^11.11.1
  • markdown解析:markdown-it

DeepSeek为什么超越了OpenAI?  第3张

DeepSeek为什么超越了OpenAI?  第4张

项目亮点

  1. 流式响应,实现类似deepseek/豆包逐行打字输出效果
  2. 基于Vite6构建,接入DeepSeek-V3,性能更优,对话丝滑流畅
  3. 支持上下文多轮对话、代码高亮效果,利于展示和分享代码片段
  4. 使用arco.design组件库,风格统一,美观大气
  5. 支持暗黑+亮色主题模式

DeepSeek为什么超越了OpenAI?  第5张

DeepSeek为什么超越了OpenAI?  第6张

目前vue3-webseek-ai项目已经同步到我的作品小店,感谢大家的支持!
Vue3+DeepSeek+ArcoDesign网页版AI流式对话模板

项目框架目录

DeepSeek为什么超越了OpenAI?  第7张

.env配置文件

需要去deepseek网站申请一个apikey,替换掉.env文件里的key就能畅快体验deepseek聊天功能了。

# title VITE_APP_TITLE = 'Vue3-Web-DeepSeek' # port VITE_PORT = 3001 # 运行时自动打开浏览器 VITE_OPEN = true # 开启https VITE_HTTPS = false # 是否删除生产环境 console VITE_DROP_CONSOLE = true # DeepSeek API配置 # VITE_DEEPSEEK_API_KEY = 替换为你的 API Key VITE_DEEPSEEK_BASE_URL = https://api.deepseek.com

DeepSeek为什么超越了OpenAI?  第8张

DeepSeek为什么超越了OpenAI?  第9张

布局模板

DeepSeek为什么超越了OpenAI?  第10张

DeepSeek为什么超越了OpenAI?  第11张

<script setup> import Sidebar from '@/layouts/components/sidebar/index.vue' </script> <template> <div class="vu__container"> <div class="vu__layout flexbox flex-col"> <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> </template>

DeepSeek为什么超越了OpenAI?  第12张

<template> <div class="vu__sidebar" :class="{'collapsed': appstate.config.collapsed}"> <a-button class="vu__sidebar-collapse" shape="circle" @click="handleCollapse"></a-button> <aside class="vu__sidebar-aside flex1 flexbox flex-col"> <div class="vu__aside-head"> <router-link to="/" class="logo"><i class="iconfont ai-deepseek"></i><span class="fs-14 ff-ab">Vue3-WebSeek</span></router-link> <div class="btn-create flex-c mt-15" @click="handleCreate"><i class="iconfont ai-newchat fs-20"></i>新建对话</div> </div> <div class="vu__aside-navlinks flexbox flex-col"> <div class="section-navitem" @click="toLink('/aihub')"> <span class="icon flex-c"><icon-compass size="18" /></span> <div class="title">AI 导航</div> </div> <a-dropdown trigger="hover" :show-arrow="false" position="rt" :popup-offset="15" :content-style="{'min-width': '150px'}"> <div class="section-navitem"> <span class="icon flex-c"><icon-command size="18" /></span> <div class="title">AI 技能</div> <i class="iconfont ai-arrR c-999 fs-12"></i> </div> <template #content> <a-doption><i class="iconfont ai-aisousou"></i> AI搜索</a-doption> <a-doption><i class="iconfont ai-fanyi"></i> 快速翻译</a-doption> <a-doption><i class="iconfont ai-xiezuo"></i> 帮我写作</a-doption> <a-doption><i class="iconfont ai-tuxiang"></i> 图像生成</a-doption> <a-doption><i class="iconfont ai-aicode"></i> AI编程</a-doption> </template> </a-dropdown> </div> <a-divider style="margin: 0;" /> <div class="vu__aside-sessions flex1 flexbox flex-col"> <div class="vu__aside-navlinks"> <div class="section-navitem plain"> <span class="icon flex-c"><icon-message size="18" /></span> <div class="title">最近对话</div> <i class="clean iconfont ai-qingli" @click="handleClean"></i> </div> </div> <a-scrollbar :outer-style="{'height': '100%'}"> <template v-if="sessionstate.session.length"> <SessionList /> </template> <template v-else> <a-empty description="暂无对话" /> </template> </a-scrollbar> </div> <div class="vu__aside-navlinks" @click="toLink('/setting')"> ... </div> </aside> </div> </template>

DeepSeek为什么超越了OpenAI?  第13张

DeepSeek为什么超越了OpenAI?  第14张

DeepSeek为什么超越了OpenAI?  第15张

DeepSeek为什么超越了OpenAI?  第16张

DeepSeek为什么超越了OpenAI?  第17张

DeepSeek为什么超越了OpenAI?  第18张

DeepSeek为什么超越了OpenAI?  第19张

DeepSeek为什么超越了OpenAI?  第20张

DeepSeek为什么超越了OpenAI?  第21张

DeepSeek为什么超越了OpenAI?  第22张

DeepSeek为什么超越了OpenAI?  第23张

DeepSeek为什么超越了OpenAI?  第24张

DeepSeek为什么超越了OpenAI?  第25张

DeepSeek为什么超越了OpenAI?  第26张

DeepSeek为什么超越了OpenAI?  第27张

DeepSeek为什么超越了OpenAI?  第28张

vue3接入deepseek-v3模型

目前deepseek官网已经全面接入最新deepseek-v3-0324大模型,调用api不变。

const completion = await openai.chat.completions.create({ messages: [ {role: 'user', content: editorValue} ], model: 'deepseek-chat', // deepseek-chat对话模型 deepseek-reasoner推理模型 stream: false, // 流式输出 max_tokens: 8192, // 限制一次请求中模型生成 completion 的最大 token 数(默认使用 4096) temperature: 0.4, // 严谨采样 越低越严谨(默认1) }) // 处理返回数据 console.log(completion.choices[0].message.content)

流式返回处理。

// 处理流式输出 let content = '' for await (const chunk of completion) { content += chunk.choices[0].delta.content; chatState.updateSession(uniKey, content) if(chunk.choices[0].finish_reason == 'stop') { loading.value = false } if(props.reachBottom) { props.scrollBottom() } }

Vue3-DeepSeek-Chat流式AI对话|vite6+vant4+deepseek智能ai聊天助手

flutter3-dymall仿抖音直播商城|Flutter3.27短视频+直播+聊天App实例

uniapp+vue3酒店预订|vite5+uniapp预约订房系统模板(h5+小程序+App端)

Electron32-ViteOS桌面版os系统|vue3+electron+arco客户端OS管理模板

Tauri2.0+Vite5聊天室|vue3+tauri2+element-plus仿微信|tauri聊天应用

tauri2.0-admin桌面端后台系统|Tauri2+Vite5+ElementPlus管理后台EXE程序

uniapp-vue3-oadmin手机后台实例|vite5.x+uniapp多端仿ios管理系统

flutter3-winchat桌面端聊天实例|Flutter3+Dart3+Getx仿微信Exe程序

END

免责声明:本文由卡卷网编辑并发布,但不代表本站的观点和立场,只提供分享给大家。

卡卷网

卡卷网 主页 联系他吧

请记住:卡卷网 Www.Kajuan.Net

欢迎 发表评论:

请填写验证码