𝗜𝗖𝗛 𝗛𝗔𝗕𝗘 𝗘𝗜𝗡𝗘𝗡 𝗠𝗢𝗗𝗘𝗥𝗡𝗘𝗡 𝗞𝗜-𝗔𝗦𝗦𝗜𝗦𝗧𝗘𝗡𝗧𝗘𝗡 𝗚𝗘𝗕𝗔𝗨𝗧
Die meisten KI-Tutorials sind zu simpel. Sie zeigen einen einfachen API-Aufruf und eine Antwort. Ich wollte eine echte Anwendung.
Ich habe einen KI-Assistenten mit Vanilla HTML, CSS und JavaScript gebaut.
Hauptmerkmale:
- Streaming-Antworten.
- Dark- und Light-Mode.
- Markdown- und Syntax-Highlighting.
- Speicherung des Chat-Verlaufs.
- Fehlerbehandlung und Retry-Logik.
Der Tech-Stack:
- HTML5 und CSS3.
- Vanilla JavaScript.
- Marked.js und Prism.js.
- DOMPurify für die Sicherheit.
- Google Generative AI SDK.
- GitHub Pages für das Hosting.
Sicherheit hat Priorität. Ich habe DOMPurify verwendet, um die KI-Antworten zu bereinigen. Dies verhindert Sicherheitsrisiken.
Die User Experience ist entscheidend. Ich habe Streaming-Content hinzugefügt. Nutzer sehen den Text, während er generiert wird. Sie müssen nicht auf ein Lade-Icon warten.
Ich habe localStorage für den Chat-Verlauf verwendet. Das macht die App schnell. Ein Backend wird nicht benötigt.
Gelernte Lektionen:
- Edge-Cases beheben.
- Fokus auf UX legen.
- State-Management betreiben.
- KI-Ausgaben absichern.
Diese Details sind wichtiger als das KI-Modell selbst.
Erstellt Projekte wie dieses für euer Portfolio. Ihr lernt dabei APIs, UI-Design und State-Management.
Welches Feature würdet ihr hinzufügen?
- Spracheingabe.
- Datei-Uploads.
- Gedächtnis (Memory).
Schreibt es mir in die Kommentare.
Quelle: https://dev.to/codehuntersharath/i-built-a-modern-ai-assistant-using-html-css-and-javascript-4ca8 Video: https://youtu.be/nbFKG_6DkSE Optionale Lern-Community: https://t.me/GyaanSetuAi