利用 openai sdk 搭建个人 ai chat 网站，支持千帆、百炼、火山方舟、gitcode、超算互联网等 MAAS 平台

前端 vue3 + vuetify + pinia + fetch-event-source + tailwindcss + shikijs + katex + remark + mermaid 后端 bun js + openai sdk

前端

  cd chat_hub
  bun install
  bun run build

• 文本提问
• 代码高亮
• 模型切换
• 双击切换 双击页面已有对话，即可将其作为新输入
• 简易命令行

Commad	usage
:C or ：C	清除当前所有对话框
:Q or ：Q	切换至 Qwen
:Y or ：Y	切换至 Yiyan
:D or ：D	切换至 Doubao
:G or ：G	切换至 GLM
:DS or ：DS	切换至 DeepSeek
:M or ：M	切换至 Claude
:CC or ：CC	清除全部上下文
:QC or ：QC	清除 Qwen 上下文
:YC or ：YC	清除 Yiyan 上下文
:DC or ：DC	清除 Doubao 上下文
:GCC or ：GCC	清除 GLM 上下文
:MC or ：MC	清除 Claude 上下文
:DSC or ：DSC	清除 DeepSeek 上下文
:EX or ：EX	导出所有数据为JSON文件
:RE or ：RE	导入 JSON 文件，恢复所有数据
:R or ：R	找出回答中的问题并重新生成
:T or ：T	翻译为英文
:TC or ：TC	翻译为中文
up	切换至上一条输入
down	切换至下一条输入

• 快捷键切换大模型 ctrl + shift + y 切换至Yiyan ctrl + shift + d 切换至Doubao ctrl + shift + q 切换至Qwen ctrl + shift + s 切换至Spark ctrl + shift + g 切换至GLM
• 快捷键 页面下滑至底部 ctrl + space
• 切换回页面后，自动下滑至底部
• 快捷键导出对话
  • ctrl + shift + c 导出当前对话为JSON文件
  • JSON文件格式如下：

{
  "messages": [
    {
      "role": "user",
      "content": "你好"
    },
    {
      "role": "assistant",
      "content": "你好，有什么可以帮助你的吗？"
    }
  ]
}

测试本地前端页面时，修改target为服务器地址

// 修改vue.config.js
  server:{
    proxy:{
       '/api':{
           target:"http://example.com", //跨域地址 测试时使用
           changeOrigin:true, //支持跨域
           rewrite:(path) => path.replace(/^\/api/, "")//重写路径,替换/api
       }
    }
 }

PWA requirement

由于 browser API 限制，仅当本地调试或 server 端使用https时，才能启用复制代码功能。 若想要强行绕过可参考解决navigator.clipboard Cannot read property ‘writeText‘ of undefined