API チャットボット チュートリアルのステップ 1 ～ 3

バニラ JavaScript (フレームワークなし) を使用して、単一ファイルの HTML チャットボットを構築します。完全なファイルのみを出力します。レイアウト - モバイルファースト: 携帯電話では全画面、デスクトップでは 420 ピクセルの中央に配置されたカード。 - モデル名を示す青いヘッダー、左側に白いボットのバブル、右側に青いユーザーのバブル、送信ボタンのある固定入力バー。 - 安全領域インセットを尊重し、キーボードがレイアウトを壊さないように 100dvh を使用します。 CONFIG - スクリプトの先頭の定数: API_URL、API_KEY、MODEL、MAX_TURNS = 12、SYSTEM_MSG、WELCOME。 - Xiaomi Mimo トークン プランを使用した例: const API_URL = 'https://token-plan-sgp.xiaomimimo.com/v1/chat/completions'; const API_KEY = 'API_Key_Placeholder'; // Mimo モデル const MODEL = 'mimo-v2.6-pro'; const MAX_TURNS = 12; const SYSTEM_MSG = { 役割: 'システム'、内容: 'あなたは役に立つアシスタントです。' }; API - fetch と stream: true を指定して、OpenAI 互換の /v1/chat/completions エンドポイントを呼び出します。 - SSE ストリーム (データ: {...} 行および [DONE]) を解析し、行の途中で分割されたチャンクを処理します。レンダリング - ストリーミング中、点滅するカーソルでプレーン テキストを表示します。 - 返信が完了したら、marked.js で Markdown をレンダリングし、DOMPurify でサニタイズします (両方を CDN からロードします)。 - コード ブロックとテーブルはバブル内で水平にスクロールする必要があり、画面からはみ出さないようにしてください。動作 - 会話のメモリを保持し、最後の MAX_TURNS ターンとシステム メッセージをトリミングします。 - 「/delete」と入力すると、チャットとメモリが消去されます。 - 応答がストリーミングされている間は入力を無効にします。 Enter で送信します。 - リクエストが失敗した場合、バブル内に友好的なエラーが表示され、壊れたターンは保存されません。 - 部分的な SSE チャンク、ストリーム中のエラー、空の応答、履歴のトリミングなどのエッジ ケースを考慮します。