# 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](https://wandb.com) to test and prototype our next generation tooling for building powerful applications on top of LLM's.
## Overview
![Demo](./assets/demo.gif)
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](https://v0.dev) but open source and not as polished :stuck_out_tongue_closed_eyes:.
## Live Demo
[Try the demo](https://openui.fly.dev)
## Running Locally
You can also run OpenUI locally and use models available to [Ollama](https://ollama.com). [Install Ollama](https://ollama.com/download) and pull a model like [CodeLlama](https://ollama.com/library/codellama), then assuming you have git and python installed:
```bash
git clone https://github.com/wandb/openui
cd openui/backend
# You probably want to do this from a virtual environment
pip install .
# This must be set to use OpenAI models, find your api key here: https://platform.openai.com/api-keys
export OPENAI_API_KEY=xxx
python -m openui
```
### 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:
```bash
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](https://ollama.com/library/llava) is one of the only Ollama models that support images currently)*. You should now be able to access OpenUI at [http://localhost:7878](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.*
### Docker
You can build and run the docker file manually from the `/backend` directory:
```bash
docker build . -t wandb/openui --load
docker run -p 7878:7878 -e OPENAI_API_KEY wandb/openui
```
Now you can goto [http://localhost:7878](http://localhost:7878)
## Development
A [dev container](https://github.com/wandb/openui/blob/main/.devcontainer/devcontainer.json) is configured in this repository which is the quickest way to get started.
### Codespace
<img src="./assets/codespace.png" alt="New with options..." width="500" />
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:
```bash
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.
<img src="./assets/ollama.png" width="500" alt="Select Ollama models" />
### Resources
See the readmes in the [frontend](./frontend/README.md) and [backend](./backend/README.md) directories.
没有合适的资源?快使用搜索试试~ 我知道了~
温馨提示
OpenUI是一款开源的AI代码生成器,根据描述生成UI界面,并能够输出HTML、CSS等前端代码,支持React、Svelte等框架,简化前端开发流程,通过生成式AI降低前端开发门槛,提高设计和编码效率,推动人机协作成为未来的常态。使用OpenUI非常简单,只需在文本框中输入对所需界面的描述,即可生成对应的UI效果图,并可通过指令进行实时修改和添加简单的动态效果。源码中readme 文件中部署条件和部署说明。是一款非常好用的ui代码生成器。特别适合前端开发人员
资源推荐
资源详情
资源评论
收起资源包目录
OpenUI-AI代码生成器 (165个子文件)
openui.code-workspace 155B
CODEOWNERS 9B
index-1-JB3fie.css 56KB
index.css 2KB
Dockerfile 626B
.dockerignore 299B
docs 26B
demo.gif 5.06MB
.gitattributes 29B
.gitignore 153B
.gitignore 109B
.gitignore 28B
.gitignore 19B
index.html 11KB
index.html 11KB
index.html 1KB
index.html 1KB
tailwindcss.min.js 522KB
tailwindcss.min.js 522KB
babel-EJU0dXwZ.js 302KB
vendor-BGjp6CLF.js 293KB
CodeEditor-C_4EMO0T.js 201KB
extra.min.js 199KB
extra.min.js 199KB
textarea-BDbSZPOd.js 146KB
html-D7SVdXI-.js 135KB
Builder-BLsf4mqC.js 106KB
standalone-TZraShkH.js 75KB
SyntaxHighlighter-DAFQ2nGj.js 56KB
index-DFoaFSRo.js 45KB
index-CfAbl2kf.js 38KB
index-B8XGlb2P.js 5KB
tailwind.config.js 2KB
.eslintrc.json 5KB
package.json 5KB
devcontainer.json 2KB
settings.json 829B
tsconfig.json 574B
components.json 335B
tsconfig.node.json 329B
.prettierrc.json 295B
extensions.json 191B
.stylelintrc.json 154B
settings.json 109B
renovate.json 103B
vercel.json 71B
.postcssrc.json 63B
extensions.json 48B
.cz.json 41B
LICENSE 11KB
LICENSE 11KB
LICENSE 11KB
README.md 4KB
README.md 2KB
README.md 427B
funky.mp3 2.02MB
android-chrome-512x512.png 824KB
android-chrome-512x512.png 824KB
example-pricing-table.png 432KB
android-chrome-192x192.png 135KB
android-chrome-192x192.png 135KB
codespace.png 122KB
apple-touch-icon.png 121KB
apple-touch-icon.png 121KB
ollama.png 100KB
favicon.png 9KB
favicon.png 9KB
pre-commit 58B
server.py 14KB
evaluate_weave.py 10KB
evaluate.py 6KB
prompt_to_img.py 4KB
screenshots.py 4KB
markdown.py 4KB
models.py 4KB
scrape.py 4KB
ollama.py 3KB
synthesize.py 3KB
app.py 2KB
dataset.py 2KB
__main__.py 2KB
code.py 2KB
model.py 2KB
session.py 2KB
config.py 2KB
logs.py 847B
models.py 753B
storage.py 689B
openai.py 659B
test_openui.py 602B
screenshots.py 589B
__init__.py 0B
__init__.py 0B
__init__.py 0B
.python-version 7B
.python-version 7B
postCreateCommand.sh 532B
arrow-left.svg 280B
arrow-left.svg 280B
code_browser.tcss 353B
共 165 条
- 1
- 2
资源评论
一叶知秋yyds
- 粉丝: 708
- 资源: 55
下载权益
C知道特权
VIP文章
课程特权
开通VIP
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- Cisco 思科 CP-7945g 7965g sip模式固件 9.4.2
- 贪吃蛇方案设计的方法.zip
- 微信支付账单(20240731-20240731).zip
- minio20240920.tar
- 集成供应链(Integrated Supply Chain,ISC)核心业务流程再造,华为的最佳实践
- zabbix-server-pgsql-7.0-centos-latest.tar
- zabbix-web-apache-pgsql-7.0-centos-latest.tar
- Altium Designer 24.9.1 Build 31 (x64)
- 基于JAVA的人机对弈的一字棋系统设计与实现课程设计源代码,极大极小搜索和α-β搜索算法
- 电子回单_2024092100085000842531409053050071685353.pdf
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功