API-Chatbot-Tutorial. Schritte 1–3

Erstellen Sie einen HTML-Chatbot mit einer einzelnen Datei mit Vanilla-JavaScript (keine Frameworks). Nur die komplette Datei ausgeben. LAYOUT – Mobile-first: Vollbild auf Telefonen, eine 420-Pixel-zentrierte Karte auf dem Desktop. – Blaue Kopfzeile mit dem Modellnamen, weiße Bot-Blasen links, blaue Benutzerblasen rechts, eine klebrige Eingabeleiste mit einer Schaltfläche „Senden“. - Beachten Sie Einfügungen im sicheren Bereich und verwenden Sie 100 dvh, damit die Tastatur das Layout nicht beeinträchtigt. CONFIG – Konstanten oben im Skript: API_URL, API_KEY, MODEL, MAX_TURNS = 12, SYSTEM_MSG, WELCOME. - Beispiel für die Verwendung eines Xiaomi Mimo-Token-Plans: const API_URL = 'https://token-plan-sgp.xiaomimimo.com/v1/chat/completions'; const API_KEY = 'API_Key_Placeholder'; // Mimo-Modell const MODEL = 'mimo-v2.6-pro'; const MAX_TURNS = 12; const SYSTEM_MSG = { Rolle: 'System', Inhalt: 'Sie sind ein hilfreicher Assistent.' }; API – Rufen Sie einen OpenAI-kompatiblen /v1/chat/completions-Endpunkt mit fetch und stream: true auf. – Analysieren Sie den SSE-Stream (Daten: {...} Zeilen und [FERTIG]) und verarbeiten Sie Blöcke, die sich in der Mitte der Zeile teilen. RENDERING – Während des Streamings wird Klartext mit einem blinkenden Cursor angezeigt. – Wenn die Antwort fertig ist, rendern Sie Markdown mit markiert.js und bereinigen Sie es mit DOMPurify (laden Sie beides von einem CDN). - Codeblöcke und Tabellen müssen innerhalb der Blase horizontal scrollen und dürfen den Bildschirm niemals überfüllen. VERHALTEN – Konversationsspeicher behalten, gekürzt auf die letzten MAX_TURNS Runden plus die Systemnachricht. - Durch Eingabe von /delete werden der Chat und der Speicher gelöscht. - Deaktivieren Sie die Eingabe, während eine Antwort gestreamt wird. Senden Sie auf Enter. - Wenn die Anfrage fehlschlägt, zeigen Sie einen freundlichen Fehler in der Blase an und speichern Sie keinen unterbrochenen Zug. - Denken Sie über Grenzfälle nach: teilweise SSE-Blöcke, Fehler mitten im Stream, leere Antworten und Verlaufsbeschneidung.