🚀 抖音风 Web AI 对话框：Vue 3 集成 DeepSeek & Gemini 2.0，代码高亮 + 移动端适配！

谦卑沉程
2,772 阅读2分钟

还在寻找一款颜值与实力并存的 AI 对话框？想要在 Web 上体验如同抖音般流畅丝滑的聊天体验？今天给大家带来一款基于 Vue 3 打造，集成 DeepSeek 和 Google Gemini 2.0 API 的 Web AI 对话框！它不仅拥有时尚的抖音风格界面，还支持代码高亮显示，并针对移动端进行了极致优化。

先来一睹芳容

截屏2025-02-11 17.17.50.png

✨ 核心特性

  • 双引擎驱动：  集成 DeepSeek 和 Google Gemini 2.0 API，满足你对不同 AI 模型的需求。
  • Vue 3 技术栈：  基于 Vue 3 构建，性能更优，体验更流畅。
  • 抖音风格界面：  UI 设计灵感来源于抖音，时尚美观，赏心悦目。
  • 代码高亮显示：  支持代码高亮，方便展示和分享代码片段。
  • 移动端适配：  针对移动端进行了优化，无论是在手机还是平板上都能获得良好的体验。

代码高亮效果展示

截屏2025-02-11 17.28.00.png

🏷️ github地址

访问

🛠️ 快速上手，三步搞定

  1. 配置 API Key：  首先，你需要替换 src/config 目录下的配置文件 API_KEY 为你自己的 API Key。

    重要提醒：  Google Gemini 2.0 需要科学上网才能正常使用。

    具体来说，你需要修改 src/config/deepseek.js 或者 src/config/gemini.js (根据你需要的模型):

    // src/config/index.js
export default {
    API_KEY: 'YOUR_API_KEY', // 替换为你的 API Key
    // ... 其他配置
};

    再次强调：  请务必妥善保管你的 API Key，不要将其提交到公共仓库！

  2. 运行项目：  完成 API Key 配置后，按照以下步骤运行项目：

    • 安装依赖：

      npm install  # 或者使用 yarn install / pnpm install

    • 启动项目：

      npm run dev

    • 构建项目：

      npm run build

    • 部署构建后的文件到你的服务器。

  3. 在线体验：

    访问

⚙️ 环境说明

  • Node.js: v18.20.5
  • npm: 10.8.2

🤝 如何贡献？

如果你觉得这个项目对你有帮助，欢迎给我点一个 Star ⭐！你的支持是我最大的动力！

也欢迎大家提交 issue 和 pull request! 让我们一起完善这款 AI 对话框。

结语：

这款基于 Vue 3 集成 DeepSeek 和 Gemini 2.0 API 的 Web AI 对话框，不仅仅是一个简单的聊天工具，更是一个探索 AI 无限可能的平台。快来体验一下吧！

avatar
文章
阅读
粉丝