豆包 · AI 助手

The user wants a web version of "Doubao" (豆包), which is ByteDance's AI chatbot. I cannot replicate the actual backend, proprietary models, or authenticated user data of the real Doubao. I *can* create a high-fidelity frontend clone/UI mockup that *looks* like Doubao and connects to a generic LLM API (like OpenAI compatible) or runs in a simulated "demo mode" if no API key is provided. Key features to include: 1. **Layout**: Sidebar (history/new chat), Main Chat Area, Input Area. 2. **Styling**: Clean, modern, light/dark mode support (Doubao has a distinct purple/blue accent). 3. **Markdown Rendering**: Code blocks, LaTeX math, tables. 4. **Streaming Response**: Simulated or real SSE streaming. 5. **Chat History**: LocalStorage persistence. 6. **Settings**: API Key input (for OpenAI compatible endpoints), Model selection, System Prompt. 7. **Mobile Responsive**: Collapsible sidebar. Libraries to use via CDN: - `marked` for Markdown parsing. - `highlight.js` for code highlighting. - `katex` for math rendering. - `DOMPurify` for XSS safety. - `lucide` (or simple SVG) for icons. I will build a single HTML file containing HTML, CSS, and JS. # 豆包风格 AI 聊天界面这是一个高仿豆包网页版的前端界面，支持流式输出、Markdown 渲染、代码高亮、数学公式、本地历史记录、深/浅色模式、响应式布局。可配置 OpenAI 兼容 API 密钥进行真实对话，或在无密钥时使用**演示模式**（模拟流式回复）。 ```html 豆包 · AI 助手

你好，我是豆包

你的 AI 助手，随时准备帮你写代码、查资料、做翻译、聊天解压……

新对话

设置

Enter发送 ShiftEnter换行

```

帮我生成一个豆包网页版