Convert Figma logo to code with AI

wandb logoopenui

OpenUI let's you describe UI using your imagination, then see it rendered live.

18,567
1,693
18,567
53
View on GitHub

Top Related Projects

streamlit's avatar

streamlit

34,470

Streamlit — A faster way to build and share data apps.

plotly's avatar

dash

21,327

Data Apps & Dashboards for Python. No JavaScript Required.

bokeh's avatar

bokeh

19,285

Interactive Data Visualization in the browser, from Python

holoviz's avatar

panel

4,617

Panel: The powerful data exploration & web app framework for Python

mlflow's avatar

mlflow

18,503

Open source platform for the machine learning lifecycle

Quick Overview

OpenUI is an open-source project that aims to create a unified interface for machine learning experiments. It provides a set of tools and components for building user interfaces to visualize and interact with machine learning models, datasets, and results. OpenUI is designed to be flexible and extensible, allowing researchers and developers to create custom interfaces tailored to their specific needs.

Pros

  • Customizable and extensible framework for building ML interfaces
  • Integrates well with popular ML libraries and frameworks
  • Supports real-time visualization and interaction with models
  • Open-source and community-driven development

Cons

  • Limited documentation and examples for advanced use cases
  • Steeper learning curve compared to some other visualization tools
  • May require additional setup and configuration for complex projects
  • Still in early stages of development, potentially leading to breaking changes

Code Examples

# Creating a simple model visualization
import openui as ui

model = load_my_model()
ui.visualize(model, input_shape=(1, 28, 28))

# Adding interactive sliders for hyperparameters
@ui.interact(learning_rate=(0.001, 0.1, 0.001), batch_size=[32, 64, 128])
def train_model(learning_rate, batch_size):
    model = MyModel()
    model.train(lr=learning_rate, batch_size=batch_size)
    return model.evaluate()

# Creating a custom dashboard
dashboard = ui.Dashboard()
dashboard.add(ui.Plot(data=training_history))
dashboard.add(ui.Table(data=evaluation_results))
dashboard.add(ui.Image(data=generated_samples))
dashboard.display()

Getting Started

To get started with OpenUI, follow these steps:

  1. Install the library:

    pip install openui

  2. Import OpenUI in your Python script:

    import openui as ui

  3. Create a simple visualization:

    model = load_your_model()
ui.visualize(model)

  4. Run your script and open the provided URL in your web browser to view the interface.

Competitor Comparisons

streamlit logo

streamlit

34,470

Streamlit — A faster way to build and share data apps.

Pros of Streamlit

  • More mature and established project with a larger community and ecosystem
  • Simpler API for quickly building data apps and visualizations
  • Better documentation and learning resources available

Cons of Streamlit

  • Less flexible for building complex, custom UI components
  • More opinionated framework, which can limit customization options
  • Primarily focused on Python, with limited support for other languages

Code Comparison

Streamlit example:

import streamlit as st

st.title("Hello World")
name = st.text_input("Enter your name")
st.write(f"Hello, {name}!")

OpenUI example:

from openui import ui

def hello_world():
    name = ui.text_input("Enter your name")
    ui.text(f"Hello, {name}!")

ui.page(hello_world)

Both examples demonstrate a simple input and output interaction, but Streamlit's API is more concise and intuitive for quick prototyping. OpenUI offers a more programmatic approach, which may be preferred for more complex applications or when greater control over the UI is needed.

plotly logo

dash

21,327

Data Apps & Dashboards for Python. No JavaScript Required.

Pros of Dash

  • More mature and established project with extensive documentation
  • Supports creating complex, interactive dashboards and web applications
  • Integrates seamlessly with Plotly's charting library

Cons of Dash

  • Steeper learning curve for beginners
  • Requires more boilerplate code for simple visualizations
  • Limited built-in UI components compared to OpenUI

Code Comparison

Dash example:

import dash
import dash_core_components as dcc
import dash_html_components as html

app = dash.Dash(__name__)
app.layout = html.Div([
    dcc.Graph(figure={"data": [{"x": [1, 2, 3], "y": [4, 1, 2]}]})
])

OpenUI example:

import wandb
from wandb import plot

wandb.init(project="my-project")
wandb.log({"chart": plot.line({"x": [1, 2, 3], "y": [4, 1, 2]})})

Both libraries offer ways to create visualizations, but Dash requires more setup for a complete application, while OpenUI integrates directly with Weights & Biases for quick logging and visualization in machine learning workflows.

bokeh logo

bokeh

19,285

Interactive Data Visualization in the browser, from Python

Pros of Bokeh

  • More mature and established project with a larger community
  • Extensive documentation and examples
  • Supports a wide range of interactive visualizations

Cons of Bokeh

  • Steeper learning curve for beginners
  • Larger file sizes for complex visualizations
  • Less integration with machine learning workflows

Code Comparison

Bokeh:

from bokeh.plotting import figure, show

p = figure(title="Simple Line Plot")
p.line([1, 2, 3, 4, 5], [6, 7, 2, 4, 5])
show(p)

OpenUI:

import wandb
from wandb import plot

wandb.init(project="my-project")
data = [[x, x**2] for x in range(10)]
wandb.log({"quadratic": plot.line(data, "x", "y")})

The Bokeh example creates a simple line plot using its native plotting API, while the OpenUI example uses Weights & Biases' plotting functionality within a machine learning experiment tracking context.

holoviz logo

panel

4,617

Panel: The powerful data exploration & web app framework for Python

Pros of Panel

  • More mature and established project with a larger community
  • Supports a wider range of data visualization libraries and frameworks
  • Offers more advanced layout and styling options for complex dashboards

Cons of Panel

  • Steeper learning curve for beginners
  • Requires more code to create basic interfaces
  • Less focus on AI-specific components and integrations

Code Comparison

Panel:

import panel as pn
pn.extension()

slider = pn.widgets.FloatSlider(start=0, end=10, step=0.1)
text = pn.widgets.StaticText()

@pn.depends(slider)
def update_text(value):
    text.value = f"Selected value: {value}"

pn.Column(slider, text).servable()

OpenUI:

import openui as ui

with ui.column():
    slider = ui.slider(min=0, max=10, step=0.1)
    ui.text(f"Selected value: {slider}")

The Panel example requires more setup code but offers more flexibility, while OpenUI provides a more concise syntax for simple interfaces. Panel's approach allows for more complex interactions and custom layouts, whereas OpenUI focuses on simplicity and ease of use, particularly for AI-related applications.

mlflow logo

mlflow

18,503

Open source platform for the machine learning lifecycle

Pros of MLflow

  • More comprehensive ML lifecycle management, including experiment tracking, model packaging, and deployment
  • Stronger integration with popular ML frameworks and libraries
  • Larger community and ecosystem, with more plugins and integrations available

Cons of MLflow

  • Steeper learning curve due to more complex features and architecture
  • Less focus on collaborative features and team management
  • Requires more setup and configuration for advanced use cases

Code Comparison

MLflow:

import mlflow

mlflow.start_run()
mlflow.log_param("param1", value1)
mlflow.log_metric("metric1", value2)
mlflow.end_run()

OpenUI:

import wandb

wandb.init(project="my_project")
wandb.config.param1 = value1
wandb.log({"metric1": value2})
wandb.finish()

Summary

MLflow offers a more comprehensive solution for ML lifecycle management, with stronger integration across various frameworks. However, it comes with a steeper learning curve and requires more setup. OpenUI, on the other hand, focuses more on ease of use and collaboration features, making it potentially more suitable for smaller teams or projects with simpler requirements.

Convert Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

OpenUI

OpenUI

Building UI components can be a slog. OpenUI aims to make the process fun, fast, and flexible. It's also a tool we're using at W&B to test and prototype our next generation tooling for building powerful applications on top of LLM's.

Overview

Demo

OpenUI let's you describe UI using your imagination, then see it rendered live. You can ask for changes and convert HTML to React, Svelte, Web Components, etc. It's like v0 but open source and not as polished :stuck_out_tongue_closed_eyes:.

Live Demo

Try the demo

Running Locally

OpenUI supports OpenAI, Groq, and any model LiteLLM supports such as Gemini or Anthropic (Claude). The following environment variables are optional, but need to be set in your environment for these services to work:

  • OpenAI OPENAI_API_KEY
  • Groq GROQ_API_KEY
  • Gemini GEMINI_API_KEY
  • Anthropic ANTHROPIC_API_KEY
  • Cohere COHERE_API_KEY
  • Mistral MISTRAL_API_KEY

You can also use models available to Ollama. Install Ollama and pull a model like Llava. If Ollama is not running on http://127.0.0.1:11434, you can set the OLLAMA_HOST environment variable to the host and port of your Ollama instance.

Docker (preferred)

The following command would forward the specified API keys from your shell environment and tell Docker to use the Ollama instance running on your machine.

export ANTHROPIC_API_KEY=xxx
export OPENAI_API_KEY=xxx
docker run --rm --name openui -p 7878:7878 -e OPENAI_API_KEY -e ANTHROPIC_API_KEY -e OLLAMA_HOST=http://host.docker.internal:11434 ghcr.io/wandb/openui

Now you can goto http://localhost:7878 and generate new UI's!

From Source / Python

Assuming you have git and python installed:

Note: There's a .python-version file that specifies openui as the virtual env name. Assuming you have pyenv and pyenv-virtualenv you can run the following from the root of the repository or just run pyenv local 3.X where X is the version of python you have installed.

pyenv virtualenv 3.12.2 openui
pyenv local openui

git clone https://github.com/wandb/openui
cd openui/backend
# You probably want to do this from a virtual environment
pip install .
# Set API keys for any LLM's you want to use
export OPENAI_API_KEY=xxx
# You may change the base url to use an OpenAI-compatible api by setting the OPENAI_BASE_URL environment variable
# export OPENAI_BASE_URL=https://api.myopenai.com/v1
python -m openui

LiteLLM

LiteLLM can be used to connect to basically any LLM service available. We generate a config automatically based on your environment variables. You can create your own proxy config to override this behavior. We look for a custom config in the following locations:

  1. litellm-config.yaml in the current directory
  2. /app/litellm-config.yaml when running in a docker container
  3. An arbitrary path specified by the OPENUI_LITELLM_CONFIG environment variable

For example to use a custom config in docker you can run:

docker run -n openui -p 7878:7878 -v $(pwd)/litellm-config.yaml:/app/litellm-config.yaml ghcr.io/wandb/openui

To use litellm from source you can run:

pip install .[litellm]
export ANTHROPIC_API_KEY=xxx
python -m openui --litellm

Groq

To use the super fast Groq models, set GROQ_API_KEY to your Groq api key which you can find here. To use one of the Groq models, click the settings icon in the nav bar.

Docker Compose

DISCLAIMER: This is likely going to be very slow. If you have a GPU you may need to change the tag of the ollama container to one that supports it. If you're running on a Mac, follow the instructions above and run Ollama natively to take advantage of the M1/M2.

From the root directory you can run:

docker-compose up -d
docker exec -it openui-ollama-1 ollama pull llava

If you have your OPENAI_API_KEY set in the environment already, just remove =xxx from the OPENAI_API_KEY line. You can also replace llava in the command above with your open source model of choice (llava is one of the only Ollama models that support images currently). You should now be able to access OpenUI at http://localhost:7878.

If you make changes to the frontend or backend, you'll need to run docker-compose build to have them reflected in the service.

Development

A dev container is configured in this repository which is the quickest way to get started.

Codespace

New with options...

Choose more options when creating a Codespace, then select New with options.... Select the US West region if you want a really fast boot time. You'll also want to configure your OPENAI_API_KEY secret or just set it to xxx if you want to try Ollama (you'll want at least 16GB of Ram).

Once inside the code space you can run the server in one terminal: python -m openui --dev. Then in a new terminal:

cd /workspaces/openui/frontend
npm run dev

This should open another service on port 5173, that's the service you'll want to visit. All changes to both the frontend and backend will automatically be reloaded and reflected in your browser.

Ollama

The codespace installs ollama automaticaly and downloads the llava model. You can verify Ollama is running with ollama list if that fails, open a new terminal and run ollama serve. In Codespaces we pull llava on boot so you should see it in the list. You can select Ollama models from the settings gear icon in the upper left corner of the application. Any models you pull i.e. ollama pull llama will show up in the settings modal.

Select Ollama models

Gitpod

You can easily use Open UI via Gitpod, preconfigured with Open AI.

Open in Gitpod

On launch Open UI is automatically installed and launched.

Before you can use Gitpod:

  • Make sure you have a Gitpod account.
  • To use Open AI models set up the OPENAI_API_KEY environment variable in your Gitpod User Account. Set the scope to wandb/openui (or your repo if you forked it).

NOTE: Other (local) models might also be used with a bigger Gitpod instance type. Required models are not preconfigured in Gitpod but can easily be added as documented above.

Resources

See the readmes in the frontend and backend directories.