Skip to content

Open WebUI

Open WebUI provides a highly polished chat interface in your browser for LLM interaction.

This guide walks through how to connect Lemonade Server to Open WebUI and highlights some great features you can start using right away:

  • Image Uploads to Vision-Language Models (VLMs): Upload images for analysis and interaction with your LLM-powered VLMs.
  • Built-in Python Code Interpreter: Run and test Python code generated by your LLM directly within the interface.
  • Live Preview for Web Development: Preview HTML, CSS, and JavaScript code generated by your LLM using the built-in preview server.

Consider Using GAIA

The team maintains a fork of Open WebUI called GAIA that provides automatic Lemonade integration and a simple Windows installer. You can try it out at https://github.com/amd/gaia. If you choose GAIA, you can skip the installation and configuration sections below and go straight to Using Open WebUI with Lemonade.

Installing Open WebUI

  1. We recommend installing Open WebUI into a dedicated conda environment using the following commands. To download conda, see Miniforge.

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

    Note: Open WebUI also provides a variety of other installation options, such as Docker, on their GitHub.

  2. Run this command to launch the Open WebUI HTTP server:

    open-webui serve

  3. In a browser, navigate to http://localhost:8080/

  4. Open WebUI will ask you to create a local administrator account. You can fill any username, password, and email you like. Once you are signed in, you will see the chat interface:

    Open WebUI interface

Configuring Open WebUI

  1. Install and run Lemonade Server. Download here.

  2. Add Lemonade Server as a "connection" in Open WebUI using the following steps:

    1. Click the circular user profile button in the top-right of the UI, then click Settings:

      Opening the settings menu.
      Opening the settings menu
    2. Click "Connections", then click the "+" button:

      Navigating to the connection settings.
      Navigating the settings menu
    3. Fill in the URL field with http://localhost:8000/api/v1 (unless you're using a different port), API key (this is unused but required, suggest just putting a -), and then click "Save".

      Filling in the connection details for Lemonade Server.
      Filling in the connection form
    4. Click "Save" in the settings menu, then exit the settings menu.

  3. Apply the suggested settings. These help Open WebUI to be more responsive with local LLMs.

    1. Click the user profile button again, and choose "Admin Settings".
    2. Click the "Settings" tab at the top, then "Interface" (which will be on the top or the left, depending on your window size), then disable the following:
      • Title Generation
      • Follow Up Generation
      • Tags Generation

        Admin Settings
        Admin Settings
    3. Click the "Save" button in the bottom right of the page, then return to http://localhost:8080.

Using Open WebUI with Lemonade

Now that everything is configured, you are ready to interact with an LLM!

Chat

  1. Click the dropdown menu in the top-left of the interface. This will display all of the Lemonade models you have installed. Select one to proceed.


    Model Selection
    Model Selection

  2. Enter a message to the LLM and click send (or hit enter). The LLM will take a few seconds to load into memory and then you will see the response stream in.


    Sending a message
    Sending a message


    LLM response
    LLM response

Vision Language Models

Vision Language Models (VLMs) can take images as part of their input.

  1. Install a VLM in Lemonade by opening the Lemonade Model Manager:

    1. Open http://localhost:8000 in your browser.
    2. Select the Model Management tab.

    3. Scroll down until you see a model with the blue VISION label and click the "+" button to install it.


      Installing a VLM
      Installing a VLM

  2. Return to Open WebUI in your browser and select your VLM in the models dropdown menu.

  3. Paste an image into the chat box and type a prompt or question about your image. You can also use the "+" button in the chat box to upload images.


    VLM prompt
    VLM prompt


    VLM response
    VLM response

Python Coding

Open WebUI allows you to run Python code generated by an LLM directly within the interface.

Note: only certain Python modules are enabled in Open WebUI. matplotlib is one of our favorites.

  1. Ask the LLM to write some Python, then click the Run button at the top of the Python code block.


    Ask the LLM to write Python
    Ask the LLM to write Python

  2. If all goes well, the result of running the Python code will appear below the code block.


    Python result
    Python result

    Note: LLMs often produce incorrect code, so it might take a few chat iterations to fix any bugs. Copy-pasting the Python error message is usually enough to move things along.

HTML Rendering

Open WebUI has a built-in rendering engine for HTML, CSS, and JavaScript pages.

Smaller LLMs can produce simple pages with tasteful styling and basic interactivity, while larger LLMs can accomplish tasks like 3D rendering in 3js.

  1. Ask a small LLM to write a simple HTML+CSS page. The preview may pop up automatically, but if it doesn't you can click the Preview button above the HTML code block:


    HTML rendering
    HTML rendering

  2. Ask a large LLM to create a 3D shape using 3js.


    3D rendering
    3D rendering

Conclusion

These are just a few of our favorite ways to try out LLMs in Open WebUI. There are a lot more features to explore, such as voice interaction and chatting with documents, so be sure to check out the Open WebUI documentation and YouTube content.