Ollama 本地 LLM 流式聊天界面|AI 生成单文件 HTML 示例
代码预览
エディタを読み込み中…
P
提示词
Create a complete single-file HTML application that connects to a locally running Ollama API (default http://localhost:11434/api/generate) using JavaScript fetch with streaming (ReadableStream). The UI must include: a dark theme with a centered chat container, a header showing 'Ollama Chat', a scrollable message area with alternating user/assistant bubbles, a text input and send button at the bottom. For the input, the user enters a prompt and clicks Send; the app sends a POST request to /api/generate with model 'llama3.2:1b' and stream:true, then reads the stream chunk by chunk, building the assistant response and rendering it incrementally in the chat. Include a 'Clear' button to reset messages. Use CSS gradients and subtle animations for message appearance. Use vanilla JS only, no frameworks. Keep the design responsive and modern.
ローカルで動作するOllamaと対話するためのミニマルなチャットインターフェースです。/api/generateにストリーミングでリクエストを送信し、到着したトークンを順次表示します。バニラJavaScriptだけで構築、フレームワーク不要。ダークなグラスモーフィズムデザインとスムーズなアニメーションを採用。オフラインLLMとのやり取りのプロトタイピングに最適です。
提示词解读
这是一个用于与本地运行的Ollama进行交互的极简聊天界面。它通过流式方式向/api/generate发送请求,并逐步显示接收到的令牌。完全使用原生JavaScript构建,无需任何框架。采用深色玻璃态设计风格与流畅动画效果,非常适合用于离线LLM交互的原型开发。
这个提示对您有帮助吗?
评论
评论将在审核后显示
この記事が役に立ったら投げ銭で応援
Apple Pay / Google Pay / カード (Visa/Mastercard/JCB/Amex) / Link / Alipay / WeChat Pay 対応 · Stripeで安全に決済
開発者が選ぶ最強ツール集
運営者が毎日使っているツール・ガジェット 6選