OllamaローカルLLMチャットアプリ作例｜ストリーミング対応プロンプト

ローカルで起動しているOllama API（デフォルト http://localhost:11434/api/generate）にfetchのストリーミング（ReadableStream）で接続する、完結な単一ファイルHTMLアプリケーションを作成してください。UIはダークテーマ、中央寄せのチャットコンテナ、ヘッダー「Ollama Chat」、スクロール可能なメッセージエリア（ユーザー/アシスタントの吹き出しを交互に表示）、下部のテキスト入力と送信ボタンを含みます。ユーザーがプロンプトを入力して送信すると、/api/generate にmodel='llama3.2:1b'、stream:true のPOSTリクエストを送信し、レスポンスストリームをチャンクごとに読み取ってアシスタント応答を段階的にレンダリングします。メッセージをリセットする「クリア」ボタンも追加。CSSのグラデーションと控えめなアニメーションでメッセージの出現を演出。フレームワークは使わずバニラJSのみ。レスポンシブでモダンなデザインにしてください。