Digital Safety 课程设计项目

一、项目功能概述

本项目是一个基于Web的AI对话应用，95%的代码由AI完成。主要功能包括：

1. 实时对话交互：用户可输入文本消息与AI模型进行实时对话
2. 深度思考内容展示：显示AI的思考过程，并支持折叠/展开功能
3. Markdown渲染：支持对AI（和用户）消息进行Markdown格式渲染
4. 数学公式支持：通过KaTeX库实现行内和块级数学公式的渲染
5. 请求控制：支持发送/停止AI响应请求，并提供视觉反馈
6. 响应式布局：适配不同屏幕尺寸的设备
7. 多轮对话记忆：存储对话历史并在API请求中携带最近对话，支持上下文连贯交互
8. 参数控制盘：右侧可隐藏控制面板，支持调整历史消息数、最大词语数、思考预算、创造力参数及深度思考开关

二、核心技术实现

1. 前端架构

• 使用原生JavaScript进行DOM操作和事件处理
• 通过CSS Flexbox实现响应式布局
• 采用Marked.js进行Markdown解析
• 集成KaTeX库渲染数学公式
• 使用AbortController实现API请求中止功能

2. 关键文件说明

• app.js：核心逻辑实现，包括消息处理、API通信、动态渲染等
• styles.css：样式定义，包括响应式布局、主题样式等
• index.html：页面结构和外部资源引入

项目的使用方式：

运行项目

从终端或命令行进入项目目录，之后运行以下命令： python -m http.server 8000

使用网页

1. 运行程序以后访问以下网址： 本地服务器地址 // 推荐通过超链接方式访问

2. 双击目录下的index.html可直接预览项目。

获取密钥

出于安全考虑，代码中删去了项目开发期间使用的API密钥。SiliconFlow API密钥需要在SiliconFlow平台上申请。以下是获取API密钥的步骤：

申请SiliconFlow API密钥

请参阅硅基流动 - 用户指南。

使用SiliconFlow API密钥

在代码中使用SiliconFlow API密钥时，请确保将其替换为您在SiliconFlow平台上申请的实际密钥。以下是一个示例：

// app.js
const API_KEY = '请在此替换为自己的硅基流动API密钥';

请注意，API密钥是敏感信息，应妥善保管，避免泄露给他人。使用时请将代码中的请在此替换为自己的硅基流动API密钥替换为您实际申请到的API密钥。