12.3K Star！OpenUI：你的前端开发助手，从草图或描述生成 UI 组件，支持Ollama本地模型!（详细教程篇） - 文章 - 开发者社区

Aitrainee | 公众号：AI进修生

🌟Openui让你的UI设计更加快捷有趣,用户只需用自然语言描述理想的UI，它就能实时渲染出设计预览，并输出可用的代码。他支持例如Gpt4-V这样的大模型，也支持Ollama部署的完全私有化本地模型。

本文最后会提供一个用于Chatgpt实现截屏转UI代码的 提示词 ，实测效果不错。

体验地址： https://openui.fly.dev/ai/new

构建 UI 组件可能会很乏味。OpenUI 的目标是使这个过程有趣、快速和灵活。用于测试和原型化下一代构建基于LLM 的强大应用程序的工具，

OpenUI 让您可以发挥想象力来描述 UI，然后查看它的实时渲染。你可以要求更改并将 HTML 转换为 React、Svelte、Web Components 等。它类似于v0（https://v0.dev/），但是开源的，但没有那么精美 😝。

picture.image

快速教程：

1. 导航到 OpenUI Playground 并使用您的 GitHub 帐户登录。
1. 在设置中选择您的首选语言模型（默认为 GPT-3.5-Turbo）。

picture.image

1. 上传 UI 屏幕截图或在提供的文本框中描述您的 UI 概念。

picture.image

1. AI 将开始工作，渲染 UI 组件并生成相应的 HTML/JSX 代码。

picture.image

1. 转换为您最喜欢的框架。您可以单击“+”按钮将 HTML 转换为 React、Vue、Svelte、Preact 或 Web Components 的代码。

picture.image

1. 点击下载按钮保存生成的代码并开始将其合并到您的项目中。

picture.image

这里还推荐油管博主的视频教程:

下面提供Openui官方的 文档介绍、相关资源、部署教程 等，进一步支撑你的行动，以提升本文的帮助力。

本地运行

您也可以在本地运行 OpenUI 并使用 Ollama 可用的模型。安装 Ollama 并拉取一个模型，比如 CodeLlama，然后假设您已安装了 git 和 python：


      
      
          

        git 
        clone
         https
        ://
        github
        .
        com
        /
        wandb
        /
        openui
          

        cd
         openui
        /
        backend
          

        # 您可能想要在虚拟环境中执行此操作
          

        pip install 
        .
          

        # 这必须设置为使用 OpenAI 模型，您可以在这里找到您的 API 密钥：https://platform.openai.com/api-keys
          

        export
         OPENAI\_API\_KEY
        =
        xxx
          

        python 
        -
        m openui

Docker Compose

声明：这可能会非常慢。如果您有 GPU，您可能需要将 ollama 容器的标签更改为支持 GPU 的标签。如果您在 Mac 上运行，请按照上述说明操作，并在本地运行 Ollama 以利用 M1/M2。

从根目录下，您可以运行：


      
      
          

        docker
        -
        compose up 
        -
        d
          

        docker 
        exec
         
        -
        it openui
        -
        ollama
        -
        1
         ollama pull llava

如果您已经在环境中设置了 OPENAI_API_KEY，只需从 OPENAI_API_KEY 行中移除 =xxx。您还可以将上述命令中的 llava 替换为您选择的开源模型（llava 是目前仅支持图像的 Ollama 模型之一）。现在，您应该能够在 http://localhost:7878 访问 OpenUI。

如果您对前端或后端进行了更改，您需要运行 docker-compose build 以在服务中反映这些更改。

Docker

您可以从 /backend 目录手动构建和运行 docker 文件：


      
      
          

        docker build 
        .
         
        -
        t wandb
        /
        openui 
        --
        load
          

        docker run 
        -
        p 
        7878
        :
        7878
         
        -
        e OPENAI\_API\_KEY wandb
        /
        openui

现在您可以转到 http://localhost:7878

开发

这个存储库中配置了一个 dev container，这是开始的最快方式。

Codespace

在创建 Codespace 时选择更多选项，然后选择 New with options...。如果您想要快速启动时间，请选择美国西部地区。您还需要配置您的 OPENAI_API_KEY 密钥，或者如果要尝试 Ollama，则将其设置为 xxx （您至少需要 16GB 的 RAM）。

一旦进入代码空间，您可以在一个终端中运行服务器：python -m openui --dev。然后在一个新的终端中：


      
      
          

        cd
         
        /
        workspaces
        /
        openui
        /
        frontend
          

        npm run dev

这应该在端口 5173 上打开另一个服务，这是您要访问的服务。对前端和后端的所有更改都将自动重新加载并反映在浏览器中。

Ollama

Codespace 自动安装 ollama 并下载 llava 模型。您可以通过 ollama list 验证 Ollama 是否正在运行，如果失败，请打开一个新的终端并运行 ollama serve。在 Codespaces 中，我们在启动时拉取 llava，因此您应该在列表中看到它。您可以在应用程序左上角的设置齿轮图标中选择 Ollama 模型。您拉取的任何模型，例如 ollama pull llama，都将显示在设置模态框中。

Chatgpt实现截屏转UI代码的提示词


          
You are an expert Tailwind developer
          
You take screenshots of a reference web page from the user, and then build single page apps
          
using Tailwind, HTML and JS.
          
You might also be given a screenshot(The second image) of a web page that you have already built, and asked to
          
update it to look more like the reference image(The first image).
          

          
- Make sure the app looks exactly like the screenshot.
          
- Pay close attention to background color, text color, font size, font family,
          
  padding, margin, border, etc. Match the colors and sizes exactly.
          
- Use the exact text from the screenshot.
          
- Do not add comments in the code such as "<!-- Add other navigation links as needed -->" and "<!-- ... other news items ... -->" in place of writing the full code. WRITE THE FULL CODE.
          
- Repeat elements as needed to match the screenshot. For example, if there are 15 items, the code should have 15 items. DO NOT LEAVE comments like "<!-- Repeat for each news item -->" or bad things will happen.
          
- For images, use placeholder images from https://placehold.co and include a detailed description of the image in the alt text so that an image generation AI can generate the image later.
          

          
In terms of libraries,
          

          
- Use this script to include Tailwind: <script src="https://cdn.tailwindcss.com"></script>
          
- You can use Google Fonts
          
- Font Awesome for icons: <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"></link>
          

          
Return only the full code in <html></html> tags.
          
Do not include markdown "```" or "```html" at the start or end.

参考链接：
[1] https://github.com/wandb/openui/

[2]

https://openui.fly.dev/ai/new

知音难求，自我修炼亦艰

抓住前沿技术的机遇，与我们一起成为创新的超级个体

（把握AIGC时代的个人力量）

— 完 —

点这里👇关注我，记得标星哦～

一键三连「分享」、「点赞」和「在看」

科技前沿进展日日相见 ~

picture.image