WebUI ouverte pour une génération et une présentation optimisées du code

Introduction générale

Ouvrir l'interface WebUI Artifacts Overhaul est un projet de fork basé sur Open WebUI, développé par le développeur Nick Tonjum. Il s'agit d'un outil open source qui se concentre sur l'amélioration de la fonctionnalité de l'IA pour la génération et la présentation de code. Les utilisateurs peuvent l'utiliser pour permettre à l'IA de générer du code, d'éditer et de visualiser les résultats directement dans l'interface. Cet outil prend en charge le déploiement local et est compatible avec Ollama Il convient aux développeurs pour tester leur code rapidement et aux débutants pour apprendre la programmation. Le projet est actuellement en version bêta et les utilisateurs peuvent le télécharger gratuitement sur GitHub. Il propose un éditeur de code, une prévisualisation en temps réel et une comparaison des différences, et prend en charge plusieurs langages de programmation.

Liste des fonctions

• code canvas (informatique)Le code généré par l'IA est affiché à droite, à l'aide d'un éditeur Monaco semblable à VSCode, qui vous permet de changer de fichier et de version.
• Comparaison des différencesAI Lors de la modification du code, mettez en évidence la partie modifiée et passez à la vue de comparaison en un seul clic.
• Aperçu de la conceptionLes composants React peuvent également être rendus : support pour HTML, CSS, JavaScript aperçu en temps réel , styles Tailwind intégrés , composants React peuvent également être rendus .
• Support ReactLes composants React peuvent être prévisualisés directement, avec un taux de réussite d'environ 80%, et doivent inclure les éléments suivants export default.
• Prise en charge multilingueSupport de JavaScript, Python, C#, Java, PHP et de nombreux autres langages.
• Vue du fichierLes blocs de code dans le chat sont affichés dans un fichier pour faciliter la gestion.

Utiliser l'aide

Processus d'installation

Open WebUI Artifacts Overhaul nécessite un déploiement local. Vous trouverez ci-dessous les étapes détaillées de l'installation :

Installation avec Docker

1. Vérification de l'environnement
   • Assurez-vous que Docker est installé et fonctionne.
   • Si vous avez un GPU Nvidia, vous devez installer le programme Boîte à outils CUDA de Nvidia.
2. Code de traction
   • Ouvrez un terminal et clonez le projet :

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

   • Accéder au catalogue :

     cd open-webui-artifacts-overhaul
     

3. Exécution de Docker
   • Commandes de base (mode CPU) :

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

   • Si le GPU est utilisé :

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

   • Avec l'intégration d'Ollama :

     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. interface d'accès
   • Une fois l'installation terminée, ouvrez votre navigateur et tapez http://localhost:3000.

Installation avec Python

1. Préparation de l'environnement
   • Installez Python 3.11 ou 3.10. Il est recommandé d'utiliser Conda pour créer votre environnement :

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

2. Installation des dépendances
   • Après avoir cloné le projet, allez dans le catalogue :

     cd open-webui-artifacts-overhaul
     

   • Installer les dépendances frontales :

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

   • Allez dans le répertoire du backend et installez les dépendances du backend :

     cd backend
     pip install -r requirements.txt
     

3. Démarrage des services
   • La course à pied :

     ./start.sh
     

   • entretiens http://localhost:8080.

Configuration des modèles d'IA

• OllamaAprès le démarrage, allez dans Paramètres et entrez l'adresse locale d'Ollama (par ex. http://localhost:11434).
• API OpenAIPour l'utilisation de Docker, entrez la clé de l'API dans les paramètres ou ajoutez des paramètres :

  -e OPENAI_API_KEY=your_secret_key

Principales fonctions

code canvas (informatique)

• Saisissez une exigence dans la boîte de dialogue, par exemple "Écrire une page HTML avec des boutons".
• Une fois que l'IA a généré le code, l'éditeur s'affiche à droite.
• Cliquez sur la flèche du haut pour changer de fichier ou de version.
• Modifiez le code directement dans l'éditeur, enregistrez-le et mettez à jour le chat.

Comparaison des différences

• Tapez "changer le bouton en vert" et l'IA vous renvoie le nouveau code.
• Cliquez sur le bouton "Différences", la partie verte correspond aux ajouts et la partie rouge aux suppressions.
• Cliquez sur "Fermer les différences" pour rétablir l'affichage normal.

Aperçu de la conception

• Générer du HTML ou du Réagir Après le code, cliquez sur "Design View".
• La partie droite affiche les effets web tels que les styles de boutons.
• Écrire avec Tailwind <div>Vous pouvez alors voir le fond rouge.
• Le composant React doit être syntaxiquement correct pour que la prévisualisation fonctionne.

Prise en charge multilingue

• Précisez le langage, par exemple "Écrire une fonction de tri en Python".
• Le code est affiché à droite et peut être copié pour être exécuté localement.

Exemple de fonctionnement

1. Générer le code
   • Entrée : "Écrire une fonction JavaScript qui affiche l'heure".
   • L'éditeur de droite affiche le code.
2. Effet de prévisualisation
   • Cliquez sur "Design View" pour voir comment l'heure est affichée.
   • Tapez "change time font size" et l'IA met à jour le code.
3. Vérification des divergences
   • Cliquez sur le bouton "Différence" pour voir la modification de la taille de la police.
   • Sauvegarder la nouvelle version.
4. Gestion des versions
   • Basculez entre "Version 1" et "Version 2" en haut de la page pour comparer les changements.

mise en garde

• Le projet est une version bêta et peut comporter des bogues ; soumettez un problème sur GitHub si vous en rencontrez.
• Taux de réussite de la prévisualisation de React 80%, les composants complexes peuvent échouer.
• Il est recommandé d'utiliser Docker pour l'installation, c'est simple et stable.

L'outil est intuitif et les développeurs peuvent l'utiliser pour générer rapidement du code et le tester. Les débutants peuvent également apprendre la logique de programmation grâce à l'IA.

scénario d'application

1. développement frontal
   Lorsque vous devez rédiger rapidement une page web, utilisez-le pour générer du HTML et du CSS et prévisualiser les résultats en temps réel.
2. Programmation de l'apprentissage
   Saisissez une exigence simple, observez le code généré par l'IA, modifiez-le et observez les changements.
3. débogage du code
   Vérifier le code modifié par l'IA à l'aide de comparaisons de différences pour s'assurer qu'il est conforme aux exigences.

QA

1. Quels sont les modèles pris en charge ?
   Prise en charge des modèles Ollama natifs et des API OpenAI, prêts à l'emploi après l'installation.
2. Pourquoi la prévisualisation de React échoue-t-elle parfois ?
   Taux de réussite actuel 80%, code complexe ou manquant export default Il y aura une erreur. Le développeur est en train de l'améliorer.
3. Comment mettre à jour la version ?
   Ceux qui utilisent Docker peuvent utiliser Watchtower :

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