Offene WebUI für optimierte Codegenerierung und -darstellung

Allgemeine Einführung

WebUI öffnen Artifacts Overhaul ist ein Fork-Projekt, das auf Open WebUI basiert und vom Entwickler Nick Tonjum entwickelt wurde. Es ist ein Open-Source-Tool, das sich auf die Verbesserung der Funktionalität von KI für die Codegenerierung und -präsentation konzentriert. Benutzer können es verwenden, um KI zu ermöglichen, Code zu generieren und die Ergebnisse direkt in der Schnittstelle zu bearbeiten und anzuzeigen. Dieses Tool unterstützt den lokalen Einsatz und ist kompatibel mit Ollama Es ist für Entwickler geeignet, um ihren Code schnell zu testen und für Anfänger, um das Programmieren zu lernen. Das Projekt befindet sich derzeit in der Beta-Phase, und Benutzer können es kostenlos von GitHub herunterladen. Es bietet einen Code-Editor, eine Echtzeit-Vorschau und einen Differenzvergleich und unterstützt mehrere Programmiersprachen.

Funktionsliste

• code canvas (Informatik): Der AI-generierte Code wird auf der rechten Seite angezeigt, wobei ein VSCode-ähnlicher Monaco-Editor verwendet wird, mit dem Sie Dateien und Versionen wechseln können.
• Vergleich von UnterschiedenAI Wenn Sie den Code ändern, markieren Sie den geänderten Teil und wechseln Sie mit einem Klick in die Vergleichsansicht.
• Design-VorschauUnterstützung für HTML, CSS, JavaScript Echtzeit-Vorschau, eingebaute Tailwind-Stile, React-Komponenten können ebenfalls gerendert werden.
• React-UnterstützungReact-Komponenten können direkt in der Vorschau angezeigt werden, mit einer Erfolgsrate von etwa 80%, und müssen die export default.
• Unterstützung mehrerer SprachenUnterstützt JavaScript, Python, C#, Java, PHP und viele andere Sprachen.
• DateiansichtDie Codeblöcke im Chat werden zur einfachen Verwaltung in einer Datei angezeigt.

Hilfe verwenden

Einbauverfahren

Open WebUI Artifacts Overhaul erfordert eine lokale Bereitstellung. Nachfolgend finden Sie die detaillierten Installationsschritte:

Installieren mit Docker

1. Überprüfung der Umgebung
   • Stellen Sie sicher, dass Docker installiert ist und läuft.
   • Wenn Sie einen Nvidia-Grafikprozessor haben, müssen Sie das Nvidia CUDA-Werkzeugsatz.
2. Code ziehen
   • Öffnen Sie ein Terminal und klonen Sie das Projekt:

     git clone https://github.com/nick-tonjum/open-webui-artifacts-overhaul.git
     

   • Besuchen Sie den Katalog:

     cd open-webui-artifacts-overhaul
     

3. Docker ausführen
   • Grundlegende Befehle (CPU-Modus):

     docker run -d -p 3000:8080 -v open-webui:/app/backend/data --name open-webui ghcr.io/open-webui/open-webui:main
     

   • Wenn die GPU verwendet wird:

     docker run -d -p 3000:8080 --gpus all -v open-webui:/app/backend/data --name open-webui ghcr.io/open-webui/open-webui:cuda
     

   • Mit Ollama-Integration:

     docker run -d -p 3000:8080 -v ollama:/root/.ollama -v open-webui:/app/backend/data --name open-webui ghcr.io/open-webui/open-webui:ollama
     

4. Zugangsschnittstelle
   • Nachdem die Installation abgeschlossen ist, öffnen Sie Ihren Browser und geben Sie http://localhost:3000.

Installieren mit Python

1. Vorbereiten der Umgebung
   • Installieren Sie Python 3.11 oder 3.10. Es wird empfohlen, dass Sie Conda verwenden, um Ihre Umgebung zu erstellen:

     conda create -n open-webui python=3.11
     conda activate open-webui
     

2. Installation von Abhängigkeiten
   • Nachdem Sie das Projekt geklont haben, rufen Sie den Katalog auf:

     cd open-webui-artifacts-overhaul
     

   • Installieren Sie die Front-End-Abhängigkeiten:

     npm install --no-package-lock
     npm install @floating-ui/utils
     npm run build
     

   • Wechseln Sie in das Backend-Verzeichnis und installieren Sie die Backend-Abhängigkeiten:

     cd backend
     pip install -r requirements.txt
     

3. Neue Dienste
   • Laufen:

     ./start.sh
     

   • Interviews http://localhost:8080.

AI-Modelle konfigurieren

• OllamaNach dem Booten gehen Sie zu Einstellungen und geben die lokale Ollama-Adresse ein (z.B. http://localhost:11434).
• OpenAI-API: Geben Sie den API-Schlüssel in den Einstellungen ein oder fügen Sie Parameter hinzu, wenn Sie Docker verwenden:

  -e OPENAI_API_KEY=your_secret_key

Hauptfunktionen

code canvas (Informatik)

• Geben Sie eine Anforderung in das Chatfeld ein, z. B. "Schreiben Sie eine HTML-Seite mit Schaltflächen".
• Nachdem die KI den Code generiert hat, wird der Editor auf der rechten Seite angezeigt.
• Klicken Sie auf den oberen Pfeil, um zwischen Dateien oder Versionen zu wechseln.
• Ändern Sie den Code direkt im Editor, speichern Sie ihn und aktualisieren Sie den Chat.

Vergleich von Unterschieden

• Geben Sie "change button to green" ein, und AI gibt den neuen Code zurück.
• Klicken Sie auf die Schaltfläche "Unterschiede". Der grüne Teil ist für Hinzufügungen und der rote Teil für Löschungen.
• Klicken Sie auf "Differenzen schließen", um die normale Ansicht wiederherzustellen.

Design-Vorschau

• HTML generieren oder Reagieren Sie Klicken Sie nach dem Code auf "Entwurfsansicht".
• Auf der rechten Seite werden Webeffekte wie z. B. Schaltflächenstile angezeigt.
• Schreiben mit Tailwind <div>Dann können Sie den roten Hintergrund sehen.
• Die React-Komponente muss syntaktisch korrekt sein, damit die Vorschau funktioniert.

Unterstützung mehrerer Sprachen

• Geben Sie die Sprache an, z. B. "Schreiben Sie eine Sortierfunktion in Python".
• Der Code wird auf der rechten Seite angezeigt und kann zur lokalen Ausführung kopiert werden.

Beispiel für den Betrieb

1. Code generieren
   • Eingabe : "Schreiben Sie eine JavaScript-Funktion, die die Uhrzeit anzeigt."
   • Der rechte Editor zeigt den Code an.
2. Vorschau-Effekt
   • Klicken Sie auf "Entwurfsansicht", um zu sehen, wie die Zeit angezeigt wird.
   • Geben Sie "change time font size" ein, und AI aktualisiert den Code.
3. Prüfung auf Unstimmigkeiten
   • Klicken Sie auf die Schaltfläche "Unterschied", um die Änderung der Schriftgröße zu sehen.
   • Speichern Sie die neue Version.
4. Verwaltete Versionen
   • Schalten Sie oben zwischen "Version 1" und "Version 2" um, um Änderungen zu vergleichen.

caveat

• Bei dem Projekt handelt es sich um eine Betaversion, die noch Fehler enthalten kann. Wenn Sie auf Probleme stoßen, melden Sie dies bitte auf GitHub.
• React-Vorschau Erfolgsquote 80%, komplexe Komponenten können fehlschlagen.
• Es wird empfohlen, Docker zur Installation zu verwenden, da dies einfach und stabil ist.

Das Tool ist intuitiv und Entwickler können damit schnell Code erstellen und testen. Auch Anfänger können durch KI die Programmierlogik erlernen.

Anwendungsszenario

1. Frontend-Entwicklung
   Wenn Sie schnell eine Webseite schreiben müssen, können Sie damit HTML und CSS generieren und das Ergebnis in Echtzeit in der Vorschau anzeigen.
2. Programmieren Lernen
   Geben Sie eine einfache Anforderung ein, beobachten Sie den von der KI generierten Code, ändern Sie ihn und sehen Sie sich die Änderungen an.
3. Code-Fehlersuche
   Prüfen Sie den AI-geänderten Code mit Diff-Vergleichen, um die Übereinstimmung mit den Anforderungen sicherzustellen.

QA

1. Welche Modelle werden unterstützt?
   Unterstützung für native Ollama-Modelle und OpenAI-APIs, sofort nach der Einrichtung einsatzbereit.
2. Warum schlägt die React-Vorschau manchmal fehl?
   Aktuelle Erfolgsquote 80%, komplexer Code oder fehlend export default Es wird ein Fehler auftreten. Der Entwickler ist dabei, ihn zu verbessern.
3. Wie kann ich die Version aktualisieren?
   Diejenigen mit Docker können Watchtower verwenden:

   docker run --rm --volume /var/run/docker.sock:/var/run/docker.sock containrrr/watchtower --run-once open-webui