Ollama Local LLM Chat App — Streaming HTML Prompt Example
CODE PREVIEW
エディタを読み込み中…
P
Prompt
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とのやり取りのプロトタイピングに最適です。
Prompt Overview
A minimal chat interface for interacting with locally running Ollama. It sends streaming requests to /api/generate and displays tokens as they arrive. Built with vanilla JavaScript, no frameworks required. Features a dark glassmorphism design and smooth animations. Ideal for prototyping interactions with offline LLMs.
Was this prompt helpful?
Comments
Comments appear after moderation
この記事が役に立ったら投げ銭で応援
Apple Pay / Google Pay / カード (Visa/Mastercard/JCB/Amex) / Link / Alipay / WeChat Pay 対応 · Stripeで安全に決済
開発者が選ぶ最強ツール集
運営者が毎日使っているツール・ガジェット 6選