# gpt

**Repository Path**: bingbingyihao/gpt

## Basic Information

- **Project Name**: gpt
- **Description**: GPT工具
- **Primary Language**: Python
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-09-18
- **Last Updated**: 2025-10-28

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# GPT 提问工具

## 项目介绍
GPT 提问工具是一个基于 Web 的用户界面，允许用户与 GPT 模型进行交互。该工具提供了一个简洁、直观的界面，使用户能够轻松地输入问题并查看模型的回答。

### 主要功能
- **提问功能**：用户可以输入问题，并发送给 GPT 模型获取回答。
- **历史记录管理**：支持查看和导出历史提问记录。
- **附件上传**：用户可以上传文件作为附加信息，帮助 GPT 更好地理解上下文。
- **SK 配置**：用户需要配置 SK（Secret Key）才能使用 API 进行提问。
- **多格式导出**：支持将回答导出为 HTML 或 Markdown 文件。
- **复制回答**：一键复制回答内容到剪贴板。
- **全屏输入模式**：提供全屏输入模式，方便编辑较长的问题。

---

## 安装与使用

### 环境要求
- 支持现代浏览器（如 Chrome、Firefox、Edge 等）
- 需要网络连接以调用 GPT 接口
- 支持 JavaScript 和本地存储（localStorage）

### 快速启动
1. 将 `webui` 文件夹部署到任意 Web 服务器上（例如 Nginx、Apache 或使用 Python 内置服务器）。
2. 打开浏览器访问页面（例如：`http://localhost:8000/webui/index.html`）。
3. 在首次使用前，请点击右上角的“配置SK”按钮，输入您的 Secret Key（SK），用于认证 API 请求。

> 📝 **注意**：您需要拥有有效的 DashScope API 密钥才能正常使用此工具。

#### 使用 Python 快速启动示例：
```bash
cd webui
python -m http.server 8000
```
然后在浏览器中打开 `http://localhost:8000/index.html`

---

## 功能详解

### 1. 用户界面说明
主界面分为两个主要区域：
- **顶部控制栏**：包含各种操作按钮。
- **输入/预览区**：
    - 上方是文本输入框，用于输入问题。
    - 下方是回答预览区域，显示 GPT 返回的结果（支持 Markdown 渲染）。

#### 控制按钮功能列表：

| 按钮 | 功能描述 |
|------|--------|
| `提问` | 向 GPT 发送当前输入的问题并获取回答 |
| `全屏输入` | 切换输入框为全屏模式，便于撰写长文本 |
| `配置SK` | 设置或修改用于调用 API 的 Secret Key |
| `导出回答` | 将当前回答导出为 `.html` 文件 |
| `导出Markdown回答` | 将当前回答导出为 `.md` 文件 |
| `复制回答` | 复制当前回答内容至系统剪贴板 |
| `历史记录` | 查看过往提问的历史记录 |
| `导出历史记录` | 将所有历史记录导出为 JSON 文件 |
| `上传附件` | 上传相关文件作为上下文信息供 GPT 参考 |

---

### 2. 历史记录管理
- 所有成功提交的问题及其回答都会自动保存至浏览器的 `localStorage` 中。
- 点击“历史记录”可弹出对话框，列出所有已保存的提问标题。
- 点击某条记录即可将其恢复至输入框和预览区，便于继续讨论。

> 💡 **提示**：关闭“隐私模式”浏览以确保历史数据持久化。

---

### 3. 附件上传功能
支持上传以下类型的文本类文件：
```
.js, .jsx, .ts, .tsx,
.html, .css, .scss, .less,
.json, .xml, .yml, .yaml,
.md, .markdown,
.txt, .log,
.py, .java, .cpp, .c, .h, .hpp,
.sh, .bash, .zsh,
.csv, .properties
```

#### 使用方式：
1. 点击“上传附件”按钮。
2. 选择单个文件或整个文件夹（不包括 `node_modules`, `.git` 等常见忽略目录）。
3. 上传后可在弹窗中点击查看文件内容。
4. 点击“确认”后，文件内容会作为上下文附加到问题中一并发送给 GPT。

---

### 4. 回答展示特性
- 支持完整的 Markdown 解析（通过 `marked.js` 实现）。
- 代码块高亮显示（集成 `highlight.js`）。
- 支持对 HTML 代码片段进行实时预览（点击“预览”按钮即可新开标签页查看渲染效果）。
- “复制”按钮可快速复制代码块内容。

---

### 5. 数据安全与隐私
- 所有数据均存储在本地浏览器中（`localStorage`），不会上传至任何第三方服务器。
- 用户的 Secret Key（SK）仅保存在本地，不会泄露。
- 若担心隐私问题，可在使用完毕后清除浏览器缓存。

---

## 技术架构

### 前端技术栈
| 技术 | 用途 |
|------|-----|
| HTML5 + CSS3 | 页面结构与样式布局 |
| JavaScript (ES6+) | 核心逻辑处理 |
| marked.js | Markdown 解析引擎 |
| highlight.js | 代码语法高亮 |
| axios.min.js | HTTP 请求库（未实际使用 fetch 替代） |
| viewer.min.js/css | 图片/文件内容查看器（备用） |

### 关键依赖文件说明
| 路径 | 作用 |
|------|-----|
| `/webui/index.html` | 主页面入口 |
| `/webui/resource/marked.min.js` | Markdown 解析器 |
| `/webui/resource/highlight.min.js` | 代码高亮组件 |
| `/webui/resource/github.min.css` | GitHub 风格代码高亮主题 |
| `/webui/resource/css2.css` | Google Fonts 字体加载（Inter, JetBrains Mono） |
| `/webui/resource/viewer.*` | 文件预览组件（暂未完全启用） |

---

## 自定义与扩展建议

### 1. 更换模型
目前默认请求的是阿里云通义千问的 `qwen-plus` 模型。若需更换其他模型，可修改 `index.html` 中的如下代码段：
```javascript
fetch("https://dashscope.aliyuncs.com/compatible-mode/v1/chat/completions", {
    method: "post",
    headers: { /* ... */ },
    body: JSON.stringify({
        model: "qwen-plus",  // ← 修改此处为目标模型名
        messages: [...],
        stream: true
    }),
})
```

### 2. 添加更多文件类型支持
可以在 `attach-modal` 的 `allowedExtensions` 数组中添加新的扩展名，例如 `.pdf`（但需配合后端解析服务）。

### 3. 支持深色主题
当前为浅色主题，可通过新增 CSS 类实现暗黑模式切换功能。

---

## 已知限制与待优化项

| 问题 | 描述 | 建议改进方向 |
|------|------|-------------|
| 无错误重试机制 | 网络异常时仅提示失败 | 增加重试按钮或自动重连逻辑 |
| 不支持流式输出暂停 | 流式响应过程中无法中途停止 | 添加“中断回答”按钮 |
| 附件大小无限制 | 大文件可能导致内存溢出 | 增加文件大小检测与警告 |
| 移动端体验一般 | 输入区域较小，按钮密集 | 优化响应式设计，适配手机和平板 |

---

## 许可证
本项目采用 Apache 2.0 开源许可证，欢迎 Fork 和二次开发。

---

## 致谢
- [marked.js](https://github.com/markedjs/marked) - 强大的 Markdown 解析库
- [highlight.js](https://highlightjs.org/) - 优秀的语法高亮工具
- [Viewer.js](https://fengyuanchen.github.io/viewerjs) - 图像查看组件（备用）
- 阿里云 DashScope 平台 - 提供 GPT 接口支持