ChatGPT iOS 风格 PWA（纯前端）

一个纯前端、可安装到 iOS 主屏幕的聊天应用，尽量贴近 ChatGPT iOS 交互。

功能

• iOS 风格移动端聊天 UI（会话列表抽屉、气泡消息、底部输入区）
• PWA 安装支持（manifest + service worker）
• OpenAI 兼容 API 配置（自定义 Base URL / Path / Model / Headers）
• chat/completions 与 responses 两种模式
• 流式输出（SSE）
• 图片上传（以 base64 image_url 方式发送）
• 文本文件上传（提取文本并拼接到消息上下文）
• 其他文件上传（保留文件元信息）
• 会话与设置本地持久化（localStorage）

本地运行

python -m http.server 5173

然后访问：http://localhost:5173

iOS 安装

1. 部署到 HTTPS 域名（推荐：Vercel / Cloudflare Pages / GitHub Pages）。
2. iPhone 用 Safari 打开页面。
3. 点击分享按钮 -> 选择“添加到主屏幕”。

API 配置示例

OpenAI 官方

• Base URL: https://api.openai.com
• API 路径: /v1/chat/completions
• 模型: gpt-4o-mini

OpenAI 兼容网关

• Base URL: https://你的网关域名
• API 路径: 常见为 /v1/chat/completions
• 其余按网关文档填写

兼容说明

• 纯前端直连 API 时，服务端必须允许浏览器跨域（CORS）。
• 图片会随消息发送给支持多模态的模型；文本文件会被截断后注入上下文。
• 大文件和二进制文件默认只发送文件名/大小元信息。

文件结构

• index.html: 页面结构
• styles.css: iOS 风格样式
• app.js: 聊天逻辑、上传、API 调用、状态管理
• manifest.webmanifest: PWA 清单
• sw.js: 离线缓存
• icons/: PWA 图标