使用AI工具Screenshot to Code将UI设计图翻译成代码

一、获取openAI apikey。

  一般有两种方式,一种是到openAI官网注册账号,付费申请GPT4的apikey。另一种是某宝买代理。我这里采用第二种。

二、安装Screenshot to Code

 1.到github下载源码。

 2.启动,两种方式:源码启动和docker启动。

    需要一个能够访问 GPT-4 Vision 的 OpenAI API key。

(1)源码启动

如果直接使用openAI没用代理的话忽略OPENAI_BASE_URL。

启动后端:

cd backend
echo "OPENAI_API_KEY=这里换成你的apikey" > .env
echo "OPENAI_BASE_URL=这里换成你的代理请求地址" > .env
poetry install
poetry shell
poetry run uvicorn main:app --reload --port 7001

启动前端:

cd frontend
yarn
yarn dev

(2)docker 启动

在源代码根目录下执行:

echo "OPENAI_API_KEY=这里换成你的apikey" > .env
echo "OPENAI_BASE_URL=这里换成你的代理请求地址" > .env

构建镜像并启动容器:

docker-compose up -d --build

启动成功如下图所示:

 3.启动完成后,在 http://localhost:5173 访问应用。

三、设计图翻译成代码

将设计图拖到页面上的灰色区域,即自动生成代码。如下图所示:

左边的是设计图,右边是生成的代码渲染的页面。

下载源码:

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/62987.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

SpringBoot mq快速上手

1.依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-amqp</artifactId> </dependency> 2.示例代码 基础信息配置 package com.example.demo.config;import org.springframework.amqp.co…

Rust学习笔记_07——枚举和范围

Rust学习笔记_04——引用 Rust学习笔记_05——控制流(1) Rust学习笔记_06——控制流(2) 文章目录 1. 枚举1.1基础1.2 给枚举变体起个“别名”1.3 枚举与匹配&#xff08;match&#xff09; 2. 范围2.1 介绍2.2 半开区间范围2.3 包含范围的语法糖2.4 步长范围&#xff08;Range …

VMware Workstation Pro安装教程 (全图文保姆级)

一、前言 系统&#xff1a;Windows 11时间&#xff1a;2024/12/04需求&#xff1a;注册&#xff1a;broadcom&#xff08;邮箱&#xff09;难点&#xff1a;在官网找到下载链接 二、说明 建议前往官网&#xff08;https://www.vmware.com&#xff09;下载&#xff0c;可能加…

前端开发 之 15个页面加载特效下【附完整源码】

文章目录 十二&#xff1a;铜钱3D圆环加载特效1.效果展示2.HTML完整代码 十三&#xff1a;扇形百分比加载特效1.效果展示2.HTML完整代码 十四&#xff1a;四色圆环显现加载特效1.效果展示2.HTML完整代码 十五&#xff1a;跷跷板加载特效1.效果展示2.HTML完整代码 十二&#xff…

protobuf实现Hbase数据压缩

目录 前置HBase数据压缩效果获取数据(反序列化) 前置 安装说明 使用说明 HBaseDDL和DML操作 HBase数据压缩 问题 在上文的datain中原文 每次写入数据会写入4个单元格的内容&#xff0c;现在希望能对其进行筛减&#xff0c;合并成1格&#xff0c;减少存储空间&#xff08;序列…

Svn如何切换删除账号

记录Svn清除切换账号 1.首先打开小乌龟的设置如下图 打开设置后单击已保存数据&#xff0c;然后选择清除 接上图选择清除后&#xff0c;就可以打勾选择清除已保存的账号&#xff0c;我们再次检出的就可以切换账号了 &#x1f449;总结 本次记录Svn清除切换账号 如能帮助到你…

正点原子imx6ull配置MQTT客户端上传数据到Ubuntu MQTT服务器

目录 使用QT自带的MQTT模块部署客户端创建一个class专门用于MQTT客户端通讯使用QT在ui界面上生成按钮在Windows上订阅相应主题测试在imx6ull上订阅Windows发布的消息 在上一篇中介绍了在Ubuntu22.04的Docker中部署MQTT服务器&#xff0c;然后在window上测试订阅和发布&#xff…

Linux的用户和权限【Linux操作系统】

文章目录 Linux的用户切换用户普通用户暂时以root用户的权限执行指令如何把一个普通用户加入白名单? 新建用户 Linux权限权限的组成更改权限文件/目录权限的表示方法&#xff1a; umask粘滞位添加粘滞位的方法 Linux的用户 Linux下有两种⽤⼾&#xff1a;超级用户&#xff08…

clang和gcc的区别

​ 1.Clang采用的license是BSD&#xff0c;而GCC是GPLv3&#xff1b;GCC支持许多语言扩展&#xff0c;其中有些Clang不能实现。 2.GCC&#xff1a;GNU(Gnu’s Not Unix)编译器套装(GNU Compiler Collection&#xff0c;GCC)&#xff0c;指一套编程语言编译器&#xff0c;以GPL…

OpenCV的圆形检测‌HoughCircles

HoughCircles 函数是 OpenCV 库中用于在灰度图像中检测圆的函数,它基于霍夫变换(Hough Transform)的一种变体——梯度霍夫变换(HOUGH_GRADIENT)函数原型如下: void HoughCircles( InputArray image, OutputArray circles,int method, double dp, double minDist,double …

XML 语言随笔

XML的含义 XML&#xff08;eXtensible Markup Language&#xff0c;可扩展标记语言&#xff09;是一种用于存储和传输数据的标记语言。XML与HTML&#xff08;HyperText Markup Language&#xff0c;超文本标记语言&#xff09;类似&#xff0c;但XML的设计目的是描述数据&…

Milvus×OPPO:如何构建更懂你的大模型助手

01. 背景 AI业务快速增长下传统关系型数据库无法满足需求。 2024年恰逢OPPO品牌20周年&#xff0c;OPPO也宣布正式进入AI手机的时代。超千万用户开始通过例如通话摘要、新小布助手、小布照相馆等搭载在OPPO手机上的应用体验AI能力。 与传统的应用不同的是&#xff0c;在AI驱动的…

DICOM MPPS详细介绍

文章目录 前言一、常规检查业务流程二、MPPS的作用三、MPPS的原理1、MPPS与MWL2、MPPS服务过程 四、MPPS的实现步骤1、创建实例2、传递状态 五、总结 前言 医院中现有的DICOM MWL(Modality Worklist)已开始逐渐得到应用&#xff0c;借助它可以实现病人信息的自动录入&#xff0…

【笔记2-3】ESP32 bug:PSRAM chip not found or not supported 没有外部PSRAM问题解决

主要参考b站宸芯IOT老师的视频&#xff0c;记录自己的笔记&#xff0c;老师讲的主要是linux环境&#xff0c;但配置过程实在太多问题&#xff0c;就直接用windows环境了&#xff0c;老师也有讲一些windows的操作&#xff0c;只要代码会写&#xff0c;操作都还好&#xff0c;开发…

【0x3D】HCI_Remote_Host_Supported_Features_Notification事件详解

目录 一、事件概述 二、事件格式及参数说明 2.1. HCI_Remote_Host_Supported_Features_Notification事件格式 2.2. BD_ADDR 2.3. Remote_Host_Supported_Features 三、事件作用 3.1. 设备特性沟通与理解 3.2. 功能协商与性能优化 3.3. 设备管理与配置更新 四、应用场…

深入理解AVL树:结构、旋转及C++实现

1. AVL树的概念 什么是AVL树&#xff1f; AVL树是一种自平衡的二叉搜索树&#xff0c;其发明者是Adelson-Velsky和Landis&#xff0c;因此得名“AVL”。AVL树是首个自平衡二叉搜索树&#xff0c;通过对树的平衡因子进行控制&#xff0c;确保任何节点的左右子树高度差最多为1&…

Css动画:旋转相册动画效果实现

​&#x1f308;个人主页&#xff1a;前端青山 &#x1f525;系列专栏&#xff1a;Css篇 &#x1f516;人终将被年少不可得之物困其一生 依旧青山,本期给大家带来Css篇专栏内容:Css动画:旋转相册动画效果实现 前言 随着Web技术的发展&#xff0c;网页不再局限于静态展示&#…

ElasticSearch 与向量数据库的结合实践:突破亿级大表查询瓶颈20241204

&#x1f4a1; ElasticSearch 与向量数据库的结合实践&#xff1a;突破亿级大表查询瓶颈 &#x1f4da; 引言 随着业务规模的不断扩大&#xff0c;传统关系型数据库在处理 亿级大表 时&#xff0c;性能瓶颈愈加凸显。关键词检索、模糊查询、多条件筛选等需求逐步升级&#xff…

Python 笔记之线程threading

并发和并行 并发&#xff1a;当有多个线程操作时&#xff0c;如果系统只有一个CPU&#xff0c;则它不可能真正同时进行一个以上的线程&#xff0c;它只能把CPU运行时间划分为若干个时间段&#xff0c;再将时间段分配给各个线程执行&#xff0c;在一个时间段的线程代码运行时&am…

解决stable-diffusion-webui时的问题:No module ‘xformers‘. Proceeding without it

p.s 被另一篇文章坑了&#xff0c;装个xformers把我原先的pytorch降智了&%$^# 注意&#xff1a;&#xff01;&#xff01;&#xff01;xformers非强制安装&#xff1b;可优化显存&#xff0c;提高性能和出图速率&#xff0c;对于GPU能力有限的用户很有用&#xff1b;安装过…