# 📖 GLM-4 语音聊天助手 - 使用说明书
## 📦 包含内容
```
portable-dist/
├── index.html # 主页面（即开即用）
├── app.js # 核心应用逻辑（无依赖）
├── README.md # 这个文件
├── examples/ # 集成示例
│ ├── iframe-embed.html # iframe 方式集成
│ ├── standalone.html # 独立 HTML 方式
│ └── react-example.tsx # React 项目集成
└── assets/ # 资源文件夹（可选）
```
---
## 🚀 快速开始
### 方式 1: 直接打开（最简单）
1. 用浏览器打开 `index.html` 文件
2. 点击右下角 ⚙️ 按钮
3. 输入你的 GLM-4 API 密钥
4. 长按 🎙️ 按钮开始说话
✅ **完全无需 Node.js、无需编译！**
---
### 方式 2: 本地 Web 服务器运行
如果直接打开有跨域问题，使用本地服务器：
**Python 3：**
```bash
python -m http.server 8000
# 然后访问: http://localhost:8000
```
**Python 2：**
```bash
python -m SimpleHTTPServer 8000
```
**Node.js 用户：**
```bash
# 全局安装 http-server
npm install -g http-server
http-server
```
**PHP 用户：**
```bash
php -S localhost:8000
```
---
## 🔑 获取 API 密钥
### 第 1 步：注册账号
访问 [https://open.bigmodel.cn](https://open.bigmodel.cn)，使用以下方式注册：
- 支付宝
- 企业邮箱
- 手机号
### 第 2 步：创建 API 密钥
1. 登录后进入「API 密钥」页面
2. 点击「创建 API 密钥」
3. 复制生成的密钥（形如 `glm-xxxxxxxxxxxxxxxxxxxx`）
### 第 3 步：配置应用
1. 打开 `index.html`
2. 点击右下角 ⚙️ 按钮
3. 粘贴你的 API 密钥
4. 密钥会自动保存到本地 (`localStorage`)
---
## 💬 使用说明
### 基本操作
| 操作 | 说明 |
|------|------|
| **长按** 🎙️ 按钮 | 开始录音 |
| **松开** | 停止录音并发送 |
| 点击 ⚙️ | 修改 API 密钥 |
### 长按时间要求
- **最少长按 0.5 秒** 才能开始录音
- 按住少于 0.5 秒会收到提示
- 松开即发送，无需其他操作
### 录音指示
- 📻 **正在录音** - 屏幕显示录音状态
- ⏳ **处理中** - AI 正在分析你的语音
- 🔊 **播放** - AI 的回复语音自动播放
---
## 📲 集成到你的网站
### 方式 A: iframe 嵌入（推荐）
最简单的方式，无需修改现有代码。
```html
我的网站
欢迎来到我的网站
```
**注意：** 使用本地文件路径 `./portable-dist/` 或完整 URL
### 方式 B: 复制所有文件到你的项目
```bash
# 在你的项目根目录
cp -r portable-dist/* ./public/voice/
```
然后在 HTML 中：
```html
```
### 方式 C: 上传到 CDN
1. 将 `portable-dist/` 目录上传到你的 CDN
2. 在任何网页引用：
```html
```
---
## 🎨 自定义样式
### 修改颜色
编辑 `index.html` 中的 `