WebUI abierta para una generación y presentación optimizadas del código

Introducción general

Abrir WebUI Artifacts Overhaul es un proyecto fork basado en Open WebUI, desarrollado por el desarrollador Nick Tonjum. Es una herramienta de código abierto que se centra en mejorar la funcionalidad de la IA para la generación y presentación de código. Los usuarios pueden utilizarla para permitir a la IA generar código y editar y ver los resultados directamente en la interfaz. Esta herramienta admite la implantación local y es compatible con Ollama Es adecuado para que los desarrolladores prueben su código rápidamente y para que los principiantes aprendan a programar. El proyecto está actualmente en fase beta, y los usuarios pueden descargarlo gratuitamente desde GitHub. Ofrece editor de código, vista previa en tiempo real y comparación de diferencias, y es compatible con múltiples lenguajes de programación.

Lista de funciones

• código canvas (informática)El código generado por AI se muestra en el lado derecho, utilizando un editor Monaco similar a VSCode, con la posibilidad de cambiar archivos y versiones.
• Comparación de diferencias: AI Al modificar el código, resalte la parte modificada y cambie la vista de comparación con un solo clic.
• Vista previa del diseño: Soporte para HTML, CSS, JavaScript vista previa en tiempo real , estilos incorporados Tailwind , componentes React también se pueden renderizar .
• Soporte React: Los componentes de React se pueden previsualizar directamente, con una tasa de éxito de alrededor de 80%, y necesitan incluir el archivo export default.
• Soporte multilingüeCompatible con JavaScript, Python, C#, Java, PHP y muchos otros lenguajes.
• vista de archivos: Los bloques de código del chat se muestran en un archivo para facilitar su gestión.

Utilizar la ayuda

Proceso de instalación

Open WebUI Artifacts Overhaul requiere una instalación local. A continuación se detallan los pasos de instalación:

Instalación con Docker

1. Comprobación del entorno
   • Asegúrese de que Docker está instalado y en funcionamiento.
   • Si tienes una GPU Nvidia, tienes que instalar el programa Kit de herramientas Nvidia CUDA.
2. Código pull
   • Abre un terminal y clona el proyecto:

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

   • Ir al catálogo:

     cd open-webui-artifacts-overhaul
     

3. Ejecución de Docker
   • Comandos básicos (modo CPU):

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

   • Si se utiliza la GPU:

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

   • Con integración de 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. interfaz de acceso
   • Una vez finalizada la instalación, abra su navegador y escriba http://localhost:3000.

Instalación con Python

1. Preparar el entorno
   • Instala Python 3.11 o 3.10. Se recomienda que utilices Conda para crear tu entorno:

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

2. Instalación de dependencias
   • Después de clonar el proyecto, ve al catálogo:

     cd open-webui-artifacts-overhaul
     

   • Instale las dependencias del front-end:

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

   • Vaya al directorio backend e instale las dependencias backend:

     cd backend
     pip install -r requirements.txt
     

3. Inicio de los servicios
   • Corriendo:

     ./start.sh
     

   • entrevistas http://localhost:8080.

Configuración de modelos de IA

• OllamaDespués de arrancar, vaya a Configuración e introduzca la dirección local de Ollama (p. ej. http://localhost:11434).
• API de OpenAIIntroduzca la clave API en la configuración o añada parámetros cuando utilice Docker:

  -e OPENAI_API_KEY=your_secret_key

Funciones principales

código canvas (informática)

• Introduzca un requisito en el cuadro de chat, como "Escribir una página HTML con botones".
• Después de que la IA genere el código, aparecerá el editor en el lado derecho.
• Haz clic en la flecha superior para cambiar de archivo o versión.
• Cambia el código directamente en el editor, guárdalo y actualiza el chat.

Comparación de diferencias

• Escribe "cambiar botón a verde" y AI devuelve el nuevo código.
• Haga clic en el botón "Diferencias", la parte verde es para las adiciones y la roja para las supresiones.
• Haga clic en "Cerrar diferencias" para restablecer la vista normal.

Vista previa del diseño

• Generar HTML o Reaccione Después del código, haga clic en "Vista de diseño".
• El lado derecho muestra efectos web como estilos de botones.
• Escribir con Tailwind <div>Entonces podrás ver el fondo rojo.
• El componente React debe ser sintácticamente correcto para que la vista previa funcione.

Soporte multilingüe

• Especifique el lenguaje, como "Escribir una función de ordenación en Python".
• El código se muestra a la derecha y se puede copiar para ejecutarlo localmente.

Ejemplo de funcionamiento

1. Generar código
   • Entrada : "Escribe una función JavaScript que muestre la hora".
   • El editor de la derecha muestra el código.
2. Vista previa del efecto
   • Haga clic en "Vista de diseño" para ver cómo se muestra la hora.
   • Escribe "cambiar el tamaño de la fuente de tiempo" y AI actualiza el código.
3. Comprobación de discrepancias
   • Haga clic en el botón "Diferencia" para ver el cambio de tamaño de letra.
   • Guarde la nueva versión.
4. Gestión de versiones
   • Alterna entre "Versión 1" y "Versión 2" en la parte superior para comparar los cambios.

advertencia

• El proyecto es una versión beta y puede tener errores; envíe una incidencia en GitHub si encuentra problemas.
• React preview success rate 80%, los componentes complejos pueden fallar.
• Se recomienda instalar con Docker, es sencillo y estable.

La herramienta es intuitiva y los desarrolladores pueden utilizarla para generar código y probarlo rápidamente. Los principiantes también pueden aprender lógica de programación a través de la IA.

escenario de aplicación

1. desarrollo front-end
   Cuando necesites escribir una página web rápidamente, utilízala para generar HTML y CSS y previsualizar los resultados en tiempo real.
2. Aprendizaje de programación
   Introduzca un requisito sencillo, observe el código generado por la IA, modifíquelo y vea los cambios.
3. depuración de código
   Compruebe el código modificado por AI con comparaciones diff para garantizar el cumplimiento de los requisitos.

CONTROL DE CALIDAD

1. ¿Qué modelos son compatibles?
   Compatibilidad con los modelos nativos de Ollama y las API de OpenAI, listos para usar tras la configuración.
2. ¿Por qué falla a veces la vista previa de React?
   Tasa de éxito actual 80%, código complejo o no disponible export default Se producirá un error. El desarrollador lo está mejorando.
3. ¿Cómo actualizo la versión?
   Aquellos con Docker pueden utilizar Watchtower:

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