# ⚡ 快速启动指南

## 5 分钟快速上手

### 步骤 1️⃣: 打开应用（30 秒）

最简单的方式 - 直接用浏览器打开文件：

```
portable-dist/
└── index.html  👈 双击打开这个文件
```

✅ **完成！** 你已经可以看到语音聊天界面了。

---

### 步骤 2️⃣: 获取 API 密钥（3 分钟）

点击右下角的 ⚙️ 按钮，会弹出输入框。

需要做：

1. 访问 👉 [https://open.bigmodel.cn](https://open.bigmodel.cn)
2. 点击「注册」或「登录」
3. 进入「API 密钥」页面
4. 点击「创建 API 密钥」
5. 复制生成的密钥（长这样：`glm-xxxxxxxxxxxx`）
6. 粘贴到应用的输入框中
7. 点击确定

✅ **密钥已保存！** 下次打开无需再输入。

---

### 步骤 3️⃣: 开始对话（1 分钟）

1. **长按** 🎙️ 按钮（至少 0.5 秒）
2. **说话** - 例如说"你好"或"今天天气如何"
3. **松开** 按钮
4. 等待 AI 回复（通常 2-5 秒）

✅ **完成！** 你已经可以和 AI 聊天了。

---

## 集成到你的网站

### 最简单的方式：iframe

在你的 HTML 页面添加这一行代码：

```html
<iframe 
    src="./portable-dist/index.html"
    width="450"
    height="600"
    allow="microphone; speaker">
</iframe>
```

就这么简单！语音助手就会显示在你的网页上。

### 更多集成方式

📖 查看 [README.md](README.md) 了解其他方式：

- 固定位置浮窗
- 侧边栏内嵌
- React 组件集成
- CDN 部署

---

## 🆘 遇到问题？

### 问题 1: "无法访问麦克风"

✅ **解决：**

- 检查浏览器是否有麦克风权限
- 刷新页面，重新授予权限
- 尝试使用其他浏览器

### 问题 2: "请输入 API 密钥"

✅ **解决：**

- 确保密钥正确复制（不要多复制空格）
- 访问 [https://open.bigmodel.cn](https://open.bigmodel.cn) 创建新密钥

### 问题 3: "网络错误"

✅ **解决：**

- 检查网络连接
- 刷新页面重试
- 检查 API 密钥是否有效

### 问题 4: "按钮没反应"

✅ **解决：**

- 确保长按时间足够（最少 0.5 秒）
- 检查浏览器控制台是否有错误（F12）
- 尝试其他浏览器

---

## 📁 文件说明

```
portable-dist/
├── index.html           📄 主页面（即开即用）
├── app.js              💻 核心逻辑（无依赖）
├── README.md           📖 详细文档
├── QUICKSTART.md       ⚡ 本文件
│
└── examples/
    ├── iframe-embed.html    📌 iframe 集成示例
    ├── react-example.tsx    ⚛️  React 集成示例
    └── ... 更多示例

```

---

## 💡 常用技巧

### 技巧 1: 修改颜色

编辑 `index.html`，找到 `<style>` 部分：

```css
/* 找到这一行 */
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

/* 改为你喜欢的颜色，例如绿色 */
background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
```

保存，刷新浏览器 - 颜色就改了！

### 技巧 2: 修改按钮文案

在 `index.html` 中找到这一行：

```html
<span>长按说话</span>  <!-- 改为你喜欢的文案 -->
```

### 技巧 3: 修改 AI 的性格

编辑 `app.js`，找到：

```javascript
systemPrompt: '你是一个友好、知识渊博的AI助手。'
```

改为你想要的性格，例如：

- 技术助手：`'你是一个专业的程序员，擅长解答技术问题。'`
- 医疗顾问：`'你是一个有同情心的健康顾问，提供基础健康建议。'`
- 学习助手：`'你是一个耐心的教师，帮助学生学习。'`

---

## 🎯 下一步

### 想要更多功能？

1. **自定义样式** → 编辑 `index.html` 中的 `<style>`
2. **修改 AI 行为** → 编辑 `app.js` 中的 `systemPrompt`
3. **集成到网站** → 参考 `examples/` 目录的示例
4. **部署到服务器** → 按照 [README.md](README.md) 的部署指南

### 需要帮助？

- 📖 详细文档：[README.md](README.md)
- 💻 代码示例：[examples/](examples/) 文件夹
- 🔗 官方文档：[https://open.bigmodel.cn](https://open.bigmodel.cn)

---

## 🚀 你都准备好了

```
✅ 应用已就绪
✅ API 已配置
✅ 可以开始对话了

祝你使用愉快！🎉
```

---

**提示：** 这份指南也可以分享给其他想使用你的语音助手的人！