logo
0
0
WeChat Login
refactor: 迁移本地开发环境到云原生开发环境

CNB Chat

一个基于 EO Functions 的 AI 聊天应用,使用 CNB API 提供智能对话服务,支持不限量调用 hunyuan-a13b 模型。

✨ 特性

  • 🎨 深色模式支持 - 自动记住用户的主题偏好
  • 📱 响应式设计 - 完美适配桌面端和移动端
  • 💭 思考过程展示 - 支持 AI 思考过程的展开/折叠
  • 🚀 流式响应 - 实时展示 AI 回复内容
  • 🎯 Markdown 支持 - 完美渲染代码块、粗体、斜体等格式
  • 高性能 - 基于 Edgeone Functions,全球低延迟访问

🚀 快速开始

前置要求

  • CNB 账号
  • 腾讯云账号(用于部署到 EO Pages)

安装步骤

  1. 克隆项目
git clone https://cnb.cool/Anyexyz/CNB-Chat.git cd CNB-Chat
  1. 创建 CNB 访问令牌

    • 访问 https://cnb.cool/profile/token/create
    • 创建访问令牌,使用范围选定你的仓库
    • 授权范围需要勾选 repo-code(只读)
    • 其余权限保持默认,点击"创建"
    • 记住生成的 Token
  2. 配置环境变量

    编辑 .env 文件,填入你的 CNB 凭证:

    CNB_TOKEN=your_api_token_here CNB_REPO=your_repo_id_here
  3. 创建 EO Pages 项目

    国内版请点击:https://console.cloud.tencent.com/edgeone/pages/upload

    国际版请点击:https://console.tencentcloud.com/edgeone/pages

    • 点击"创建项目" - "直接上传"
    • 根据需求选择可用区
    • 上传源码进行部署,等待部署成功
  4. 添加自定义域名

    访问预览地址确认服务可用,可以添加自定义域名进行访问

  5. 测试服务

    使用以下代码测试服务是否正常:

    curl -X POST https://your-domain.com/v1/chat/completions \ -H "Content-Type: application/json" \ -d '{ "model": "hunyuan-a13b", "messages": [{"role": "user", "content": "你好"}] }'

    得到响应即可正常使用

💻 云原生开发环境

本项目提供了云原生开发环境,支持一键启动开发环境。

  1. 执行登录命令,按照提示选择 Global (国际站)或 China (国内站),建议选择 China 以确保获取准确的数据和信息,然后在弹出的浏览器窗口完成登录。
edgeone login

完成登录后可以执行 edgeone whoami 查看当前登录账号的信息。

  1. 关联项目 如果需要使用 KV 存储 能力或将控制台已设置的环境变量同步到本地调试,可以执行关联项目命令,按要求输入项目名称,这里的项目名为准备工作中已创建的 Pages 项目名。
edgeone pages link

📁 项目结构

CNB-Chat/ ├── index.html # 主应用文件 (HTML + CSS + JS) ├── functions/ # EO Functions 函数 │ └── v1/ │ ├── chat/ │ │ └── completions.js # 聊天完成 API │ └── models.js # 模型列表 API ├── .env # 环境变量配置 └── README.md # 项目文档

🎨 功能说明

深色模式

  • 点击右上角的 🌙/☀️ 图标切换主题
  • 主题偏好自动保存到浏览器本地存储
  • 刷新页面后自动恢复上次选择的主题

响应式设计

  • 桌面端 (>640px): 宽敞布局,大字体
  • 平板端 (≤640px): 紧凑布局,优化间距
  • 移动端 (≤480px): 极简布局,小屏优化

消息格式化

支持以下 Markdown 语法:

  • 代码块: ```language ... ```
  • 行内代码: ` ... `
  • 粗体: ** ... **
  • 斜体: * ... *

API 端点

  • GET /v1/models - 获取可用模型列表
  • POST /v1/chat/completions - 发送聊天请求(支持流式响应)

🔧 配置说明

环境变量

变量名说明示例
CNB_TOKENCNB API 访问令牌your_api_token_here
CNB_REPOCNB 仓库 IDyour_repo_id_here

自定义配置

编辑 index.html 中的以下配置:

// 默认模型 let currentModel = 'hunyuan-a13b';

📱 使用方法

  1. 打开应用后,从下拉菜单选择 AI 模型
  2. 在输入框中输入消息
  3. 点击"发送"按钮或按 Enter 键发送(Shift+Enter 换行)
  4. 查看 AI 的回复,点击"💭 思考过程"可展开/折叠思考内容

🛠️ 技术栈

  • 前端: 原生 HTML5, CSS3, JavaScript (ES6+)
  • 后端: EO Functions
  • API: CNB AI API
  • 部署: EO Pages

📄 许可证

MIT License

🤝 贡献

欢迎提交 Issue 和 Pull Request!