Es funktioniert mithilfe der OpenAI-API für Chat-Vervollständigungen (z. B. gpt-3.5-turbo, gpt-4 usw.). Sie benötigen (kostenpflichtigen) Zugriff auf diese API.
Die Verwendung von gpt-4 über die API ist viel schneller als die Verwendung von ChatGPT plus und es gibt keine Nachrichtenbeschränkungen.
Alle Chats werden im localStorage gespeichert, sodass Sie von keinem anderen Browser oder Gerät aus darauf zugreifen können, es sei denn, Sie verwenden die Export-/Importfunktion.
Dies ist als Lernexperiment gedacht.
Ich wollte die OpenAI-API ausprobieren und gleichzeitig sehen, wie einfach es wäre, mit Tailwind CSS eine Schnittstelle in einfachen Webkomponenten zu schreiben.
Ich wollte, dass die Entwicklung so einfach wie möglich ist, vorzugsweise ohne Build-Schritte und auf jeden Fall KEINE NPM-Pakete.
Laden Sie also einfach eine Datei in Ihren Browser und beginnen Sie mit dem Codieren.
Der Aufbau ist derzeit etwas chaotisch, da ich verschiedene Dinge ausprobiert habe.
Das ist das Ergebnis!
Es läuft vollständig über GitHub-Seiten, im Browser, ohne externe Aufrufe, außer an die OpenAI-API.
Leider erfordert TailwindCSS einen Build-Schritt, es sei denn, Sie möchten die gesamte CSS-Bibliothek in Ihren Browser laden.
Also habe ich akzeptiert, dass ich eine kleine Tailwindcss-CLI ausführen muss, die den Code überwacht und die CSS-Datei bei Änderungen neu erstellt.
Und um Importe nutzen zu können, muss alles als richtige Website bereitgestellt werden – also: http://, nicht file:/// .
Daher muss ich beim Entwickeln einen kleinen Webserver (npx http-server) in diesem Verzeichnis ausführen.
Zumindest sind diese SCHNELL im Vergleich zur Verwendung von Webpack, Vite usw.
Und es gibt keinen Build-Schritt – es sind nur ein paar kleine Entwicklungsdienste.
Obwohl es möglich ist, Frameworks zu vermeiden, benötigen Sie einfach durch die Verwendung von Webkomponenten nicht viele externe Abhängigkeiten, bevor Ihr Leben einfach einfacher wird. Zum Beispiel durch die Verwendung von Vite.
Vite hilft Ihnen dabei, alle externen Abhängigkeiten lokal (von Ihnen bereitgestellt) und auf dem neuesten Stand zu halten und Hot-Reloading zu ermöglichen.
Die alleinige Verwendung von Webkomponenten funktioniert nur für moderne Browser. Sie können also genauso gut Framework-Einkäufe tätigen, wenn Sie einen Browser unterstützen müssen, der von seinen Erstellern nicht mehr unterstützt wird (z. B. Internet Explorer, älteres Chrome, Safari usw.).