Open WebUI optimized for code generation and presentation

General Introduction

Open WebUI Artifacts Overhaul is a fork project based on Open WebUI, developed by developer Nick Tonjum. It is an open source tool focused on improving the functionality of AI for code generation and presentation. Users can use it to allow AI to generate code, and edit and view the results directly in the interface. This tool supports local deployment and is compatible with Ollama It is suitable for developers to quickly test their code and for beginners to learn programming. The project is currently in beta, and users can download it for free from GitHub. It provides code editor, real-time preview and difference comparison, and supports multiple programming languages.

Function List

• code canvas (computing): The code generated by AI is displayed on the right side, using a VSCode-like Monaco editor that allows you to switch files and versions.
• Comparison of Differences: AI When modifying code, highlight the changed part and switch the comparison view with one click.
• Design Preview: Support for HTML, CSS, JavaScript real-time preview , built-in Tailwind styles , React components can also be rendered .
• React Support: React components can be previewed directly, with a success rate of about 80%, and need to include the export defaultThe
• Multi-language support: Supports JavaScript, Python, C#, Java, PHP and many other languages.
• file view: The code blocks in the chat are displayed in a file for easy management.

Using Help

Installation process

Open WebUI Artifacts Overhaul requires local deployment. Below are the detailed installation steps:

Installing with Docker

1. Checking the environment
   • Make sure Docker is installed and running.
   • If you have an Nvidia GPU, you need to install the Nvidia CUDA ToolkitThe
2. Pull Code
   • Open a terminal and clone the project:

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

   • Go to the catalog:

     cd open-webui-artifacts-overhaul
     

3. Running Docker
   • Basic commands (CPU mode):

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

   • If the GPU is used:

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

   • With 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. access interface
   • After the installation is complete, open your browser and type http://localhost:3000The

Installing with Python

1. Preparing the environment
   • Install Python 3.11 or 3.10. It is recommended that you use Conda to create your environment:

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

2. Installation of dependencies
   • After cloning the project, go to the catalog:

     cd open-webui-artifacts-overhaul
     

   • Install front-end dependencies:

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

   • Go to the backend directory and install the backend dependencies:

     cd backend
     pip install -r requirements.txt
     

3. Starting services
   • Running:

     ./start.sh
     

   • interviews http://localhost:8080The

Configuring AI Models

• Ollama: After booting, go to Settings and enter the local Ollama address (e.g. http://localhost:11434).
• OpenAI API: Enter the API key in the settings or add parameters when using Docker:

  -e OPENAI_API_KEY=your_secret_key

Main Functions

code canvas (computing)

• Enter a requirement in the chat box, such as "Write an HTML page with buttons".
• After the AI generates the code, the editor is displayed on the right side.
• Click the top arrow to switch files or versions.
• Change the code directly in the editor, save it and update the chat.

Comparison of Differences

• Type "change button to green" and AI returns the new code.
• Click on the "Differences" button, the green part is for additions and the red part is for deletions.
• Click "Close Differences" to restore the normal view.

Design Preview

• Generate HTML or React After the code, click "Design View".
• The right side displays web effects such as button styles.
• Write with Tailwind <div>Then you can see the red background.
• The React component needs to be syntactically correct for the preview to work.

Multi-language support

• Specify the language, such as "Write a sort function in Python".
• The code is displayed on the right side and supports copying to run locally.

Example of operation

1. Generate Code
   • Input : "Write a JavaScript function that displays the time."
   • The right editor displays the code.
2. Preview effect
   • Click on "Design View" to see how the time is displayed.
   • Type "change time font size" and AI updates the code.
3. Checking for discrepancies
   • Click on the "Difference" button to see the change in font size.
   • Save the new version.
4. Managed Versions
   • Toggle "Version 1" and "Version 2" at the top to compare the changes.

caveat

• The project is in beta and may have bugs, so submit an Issue on GitHub if you encounter problems.
• React preview success rate 80%, complex components may fail.
• It is recommended to install with Docker, it is simple and stable.

The tool is intuitive and developers can use it to quickly generate code and test it. Beginners can also learn programming logic through AI.

application scenario

1. front-end development
   When you need to write a web page quickly, use it to generate HTML and CSS and preview the results in real time.
2. Programming Learning
   Enter a simple requirement, observe the code generated by the AI, modify it and see the changes.
3. code debugging
   Check AI-modified code with diff comparisons to ensure compliance with requirements.

QA

1. What models are supported?
   Supports native Ollama models and OpenAI APIs, ready to use after setup.
2. Why does the React preview sometimes fail?
   Current success rate 80%, complex code or missing export default There will be an error. The developer is in the process of improving it.
3. How do I update the version?
   Those with Docker can use Watchtower:

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