尧图网站设计 尧图网站设计YAOTU DESIGN
ARTICLE DETAIL

资讯详情

深耕网站设计与一线实操的经验洞察。

OpenUI:AI 实时生成 UI,Docker 3 步部署与本地开发完整指南

OpenUI:AI 实时生成 UI,Docker 3 步部署与本地开发完整指南 OpenUIAI 实时生成 UIDocker 3 步部署与本地开发完整指南【免费下载链接】openuiOpenUI lets you describe UI using your imagination, then see it rendered live.项目地址: https://gitcode.com/GitHub_Trending/op/openuiOpenUI 是一个用自然语言描述、实时渲染 UI 界面的开源工具生成的组件可转为 React、Svelte 等格式。本篇覆盖 OpenUI 的 Docker 部署、本地开发环境配置与多模型接入。读完你可以独立拉起整套服务并换接自己常用的大模型。项目速览OpenUI 把需求写成一句话界面就在浏览器里逐步渲染出来还可以继续追问修改。架构上前后端分离前端是 React TypeScriptVite 构建后端是 Python FastAPI 服务通过 LiteLLM 统一对接各家大模型。它主打描述转 HTML 组件再转成目标框架代码这条链路。三步跑起来Docker 一键部署前提是本机已有 Docker 和 Docker Compose。第 1 步拿代码git clone https://gitcode.com/GitHub_Trending/op/openui cd openui执行后本地得到完整的 openui 目录后续命令都在该目录下执行。第 2 步拉起服务栈docker-compose up -d一条命令把应用和 Ollama 模型服务一起拉起来两个容器分别在 7878 和 11434 端口上监听。第 3 步补一个模型首次必需docker exec -it ollama ollama pull llava下载 llava 到容器内的 Ollama不确定容器名时先用docker ps确认也可以把 llava 换成任意 Ollama 支持的模型。怎么确认跑通了浏览器打开http://localhost:7878输入一段描述能看到界面实时渲染即正常Ollama 侧执行curl http://localhost:11434/api/tags返回包含 llava 的模型列表说明模型服务可用看懂服务架构两个服务都由 docker-compose.yaml 定义服务端口作用openui7878主应用FastAPI 后端 打包后的前端入口见 backend/openui/server.pyollama11434本地大模型服务容器名ollama模型数据落在挂载卷里openui 容器通过环境变量OLLAMA_HOSThttp://ollama:11434找到模型服务无需在宿主机单独装 Ollama。前端本地开发时 Vite dev server 另占 5173 端口届时以该端口为入口。接入不同大模型环境变量怎么配各提供商只需要在启动前导出对应变量Docker 场景下这些 key 会被透传进容器提供商环境变量默认值OpenAIOPENAI_API_KEY无AnthropicANTHROPIC_API_KEY无GroqGROQ_API_KEY无GeminiGEMINI_API_KEY无OllamaOLLAMA_HOSThttp://127.0.0.1:11434OpenAI 兼容端点OPENAI_COMPATIBLE_ENDPOINTOPENAI_COMPATIBLE_API_KEY无自定义模型走 LiteLLM后端会依据环境变量自动生成代理配置逻辑在 backend/openui/litellm.py。想完全接管时自备litellm-config.yaml放到当前目录、容器内的/app/下或用OPENUI_LITELLM_CONFIG指定路径再以python -m openui --litellm启动。Docker 场景加-v $(pwd)/litellm-config.yaml:/app/litellm-config.yaml挂载即可。进阶开发速览后端调试cd backend后执行uv sync --frozen --extra litellm并激活.venv再用python -m openui --dev起热重载服务调试器附加到该进程即可前端调试cd frontend后npm install npm run devVite HMR 在 5173 端口生效改动即时刷新开发容器仓库自带 .devcontainer/devcontainer.jsonVS Code 里选 Reopen in Container 可一次装齐 Python、Node 和 Ollama常见坑位现象排查命令处理办法7878 打不开页面netstat -tulpn \| grep 7878端口被占用改掉 compose 里的端口映射或停掉占用进程容器起不来或秒退docker logs openui、docker logs ollama按日志补 API key 或模型依赖模型列表为空 / 连不上 Ollamacurl http://localhost:11434/api/tags确认 Ollama 已运行且已 pull 模型宿主机跑 Ollama、容器跑应用时把OLLAMA_HOST指向http://host.docker.internal:11434写在最后OpenUI 给了两条路径Docker Compose 负责快速跑起来本地源码负责二次开发换模型只是改环境变量的事。官方文档README.md后端源码backend/openui/前端源码frontend/API 文档docs/index.html现在就可以执行docker-compose up -d等 7878 端口就绪后从一句做一个响应式的产品展示页开始。【免费下载链接】openuiOpenUI lets you describe UI using your imagination, then see it rendered live.项目地址: https://gitcode.com/GitHub_Trending/op/openui创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表