探秘OpenUI在OpenWrt新玩法，让UI设计YYDS

小伙伴们,看过来啊👀!最近发现了一个好物,必须赶快通知大家!OpenUI简直是前端射鸡师的福音🙌,让我们一起来探索它的神奇之处吧!
首先,OpenUI的UI设计超级nice👏!只需几步简单操作,就能轻松构建出漂亮酷炫的页面,连新手用户也能驾轻就熟!不用花大力气去码代码了,通过OpenUI的人性化设计,手把手引导你制作心仪的网页版面,真是小白必备神器💯!项目地址：github.com/wandb/openui。
最吸引人的地方莫过于OpenUI的编辑功能了,实时预览真是太酷了👏!我们在文本框里尽情输入各种想象和需求,OpenUI立马就会现场渲染出UI效果,超级直观有趣😍!不满意的话也不怕,继续修改调整就好,绝对让你爱不释手!
OpenUI的Docker部署方式,真的非常方便🤩!无论是在OpenWrt、Linux还是Mac系统上,都能通过一条命令就开启创作之旅!再也不用为繁琐的安装过程而头疼啦,简直是良心推荐🌟!
下面就开始在OpenWrt上操作吧。

首先要在你的openwrt路由器(演示固件来源于openwrt.ai)安装好dockerd和docker-compose插件，还没有安装的小伙伴请到软件包里自行安装哦。打开命令行终端（“服务”-“终端”），输入docker info确认环境OK。
360截图20240513102627486.jpg

接着进入docker目录：cd /data/docker,使用git(git-http插件)命令克隆openui项目：git clone https://github.com/wandb/openui.git，进入openui目录，根据你的情况修改docker-compose.yml文件，内容如下：

version: '3.8'

services:
  ollama:
    image: ollama/ollama:latest
    ports:
      - "11434:11434"
    volumes:
      - ${OLLAMA_VOLUME_PATH:-ollama}:/root/.ollama

  backend:
    build:
      context: ./backend
      dockerfile: Dockerfile
    ports:
      - "7878:7878"
    environment:
      - OLLAMA_HOST=http://ollama:11434
      # Just remove `=xxx` to have the env variable passed forward
      - OPENAI_API_KEY=llava
    depends_on:
      - ollama
volumes:
  ollama:

这里修改了OPENAI_API_KEY=llava，保存退出，然后执行docker-compose up -d命令开始拉取ollama镜像并构建openui的镜像，完成后开始启动ollama和openui的后端服务。
360截图20240513104411022.jpg

注意：由于openui-backend容器运行失败，报错ModuleNotFoundError，因此在backend目录下的Dockerfile修改了倒数第二行：RUN pip install --no-deps -U /app&&pip install Pillow&&pip install playwright，重新运行docker-compose build构建openui-backend。

启动完成后，通过docker exec -it openui-ollama-1 ollama pull llava拉取LLaVA大模型，它作为一种新型的大型多模态模型，可将语言和视觉两大领域融合，实现了图片解析的图生文功能。在拉取成功后，通过浏览器访问你的OpenWrt路由器IP的7878端口，就可以看到openui漂亮的页面了。
360截图20240513114259372.jpg

点开左上角的齿轮打开设置页面，就可以选择之前ollama拉取本地llava模型,免费使用，不需要使用openai付费API。
360截图20240513114153291.jpg

测试上传了一张谷歌的截图，看看能给我设计出怎样的东西。
360截图20240513113333506.jpg

由于OpenWrt的CPU运行速度不够快，经过了漫长的等待，终于出了一个有点奇怪的东西。家庭富裕的小伙伴，还是建议用上OpenAI的付费服务吧，用得安心一点。
360截图20240513114624195.jpg

OpenUI的超能力远不止如此,它还支持将HTML代码转换为各种热门框架,如React、Svelte等,满足广大开发者的需求。无论你是要快速开发应用,还是只是想尝鲜体验一番新工具,OpenUI都能给你意想不到的便利😘!
总之,大家一定要尝试OpenUI,真的是前端开发的宝藏利器!免费开源的福利,建议小伙伴们赶紧收藏、拥抱😎!再见啦,期待大家分享使用体验,让我们共同打call OpenUI🥳!

更多关注：www.9418666.xyz

探秘OpenUI在OpenWrt新玩法，让UI设计YYDS

评论 (0)