ChatGPT-web：基于OpenAI API的纯JavaScript ChatGPT演示

ChatGPT-web：让AI对话触手可及

在人工智能快速发展的今天，ChatGPT作为一款革命性的大语言模型，正在改变人们与AI交互的方式。然而，直接使用OpenAI的API可能对普通用户来说有些复杂。ChatGPT-web应运而生，它为用户提供了一个简单易用的网页界面，让任何人都能轻松体验ChatGPT的强大功能。

🌟 主要特性

ChatGPT-web具有以下突出特点：

1. 开源透明: 项目采用GPL-3.0开源协议，代码完全公开，用户可以自由查看、修改和部署。

2. 隐私保护: 所有对话和消息都存储在浏览器的本地存储中，确保用户数据的隐私安全。

3. 高度定制: 用户可以自定义提示词、温度等模型参数，还支持多种模型（包括GPT-4）。

4. 成本效益: 相比ChatGPT Plus订阅，使用OpenAI API通常更加经济实惠。

5. 快速响应: 作为单页Web应用，ChatGPT-web反应迅速，提供流畅的用户体验。

6. 移动友好: 网页设计适配移动设备，方便用户随时随地使用。

7. 语音交互: 支持语音输入和语音输出，让对话更加自然。

8. 预设提示: 内置多种预选提示词，帮助用户快速开始有趣的对话。

9. 导出功能: 可将对话导出为Markdown文件，便于分享和存档。

10. 代码高亮: 自动识别并高亮显示代码块，支持一键复制。

11. 桌面应用: 可打包为桌面应用，提供更原生的使用体验。

12. 图像生成: 通过DALL·E模型，支持文本生成图像功能。

13. 流式响应: API响应采用流式传输，用户可实时看到生成过程。

🚀 快速开始

要使用ChatGPT-web，您需要先获取OpenAI API密钥。获取密钥后，按照以下步骤操作：

1. 访问ChatGPT-web在线演示。
2. 在设置中输入您的API密钥。
3. 开始与AI助手对话！

对于开发者，如果想本地运行或修改项目，可以按以下步骤操作：

# 克隆仓库
git clone https://github.com/Niek/chatgpt-web.git

# 进入项目目录
cd chatgpt-web

# 安装依赖
npm ci

# 启动开发服务器
npm run dev

💡 高级使用技巧

1. 自定义模型参数: 在设置中调整温度、最大令牌数等参数，以获得不同风格的回答。

2. 使用预设提示: 利用内置的提示词列表快速开始特定主题的对话。

3. 语音交互: 点击麦克风图标使用语音输入，让AI用语音回答你。

4. 生成图像: 输入"show me an image of ..."来触发DALL·E图像生成。

5. 导出对话: 使用导出功能将有价值的对话保存为Markdown文件。

6. 代码处理: 对于生成的代码，可以一键复制并在IDE中使用。

🛠️ 技术实现

ChatGPT-web采用现代Web技术栈构建：

• 前端框架: 使用Svelte构建用户界面，确保高性能和良好的开发体验。
• 构建工具: 采用Vite作为构建工具，提供快速的开发环境和优化的生产构建。
• 样式: 使用SCSS编写样式，提供更强大的CSS功能。
• TypeScript: 项目使用TypeScript，增强代码的可维护性和类型安全。
• 桌面应用: 通过Tauri框架，可将Web应用打包为原生桌面应用。

🤝 社区贡献

ChatGPT-web是一个活跃的开源项目，欢迎社区成员参与贡献。您可以通过以下方式参与：

1. 提交Issue报告bug或提出新功能建议。
2. 提交Pull Request贡献代码。
3. 改进文档或翻译。
4. 分享使用经验和技巧。

项目遵循贡献者公约，确保一个友好和包容的社区环境。

🔮 未来展望

ChatGPT-web团队正在积极开发新功能，未来可能包括：

• 支持更多AI模型和API
• 增强的多模态交互能力
• 更丰富的定制化选项
• 改进的移动端体验
• 集成更多第三方服务和工具

📚 相关资源

• OpenAI API文档
• Svelte官方文档
• Vite官方文档
• Tauri官方文档

🎉 结语

ChatGPT-web为用户提供了一个简单而强大的方式来与AI进行交互。无论您是技术爱好者、学生、专业人士还是普通用户，ChatGPT-web都能为您带来便利和乐趣。随着项目的不断发展和社区的积极参与，我们期待看到更多创新功能和应用场景的出现。

立即访问ChatGPT-web，开始您的AI对话之旅吧！🚀🤖