screenshot-to-code之安装、测试

======================

准备 GPT收费账号

screenshot-to-code Supported AI models:

  • GPT-4O - Best model!
  • GPT-4 Turbo (Apr 2024)
  • GPT-4 Vision (Nov 2023)
  • Claude 3 Sonnet
  • DALL-E 3 for image generation

======================

git或者手动 下载源代码 https://github.com/abi/screenshot-to-code  

======================

pip install poetry
(不需要魔法)

cd backend

vi .env    设置国内代理商的 OpenAI URL地址和API Key

 

OPENAI_BASE_URL=https://xxx.xxxxx.xxx/v1OPENAI_API_KEY=sk-your-key

poetry install
poetry shell
poetry run uvicorn main:app --reload --port 7001 

======================

cd /data/screenshot-to-code/screenshot-to-code-main/frontend

先后执行

yarn

yarn dev

就可以 访问  http://localhost:5173 进行测试了

======================

yarn报错
There are no scenarios; must have at least one.
问题是yarn版本不对,是cmdtest里面的低版本 0.32版本,要改为最新的1.x版本
apt remove cmdtest
curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list
sudo apt update && sudo apt install yarn
apt-get install yarn
yarn install v1.22.22

再执行yarn,还是报错

执行yarn报错
The engine "node" is incompatible with this module. Expected version ">=14.18.0". Got "12.22.9"

好吧,去安装node.js 14.18.0版本,这又要先安装nvm
安装nvm
安装nvm
git config --global http.proxy 'http://192.168.1.231:8086'
git config --global https.proxy 'http://192.168.1.231:8086'

https://github.com/nvm-sh/nvm?tab=readme-ov-file#installing-and-updating
看最新的下载地址
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash
su -
nvm
nvm install 18
nvm use 18

git config --unset http.proxy
git config --unset https.proxy
 

======================

cd backend
 后台运行,并监听IP地址 92.168.1.233

nohup poetry run uvicorn main:app --reload --port 7001  --host 192.168.1.233 &

cd frontend

vi .env.local 设置后台URL

VITE_HTTP_BACKEND_URL=http://192.168.1.233:7001

执行命令 yarn build 生成html代码到  frontend/dist目录

apt-get install nginx

ln xxxx dist

systemctl stop ufw

systemctl disable ufw

systemctl enable nginx

systemctl start nginx

浏览器访问http://192.168.1.233/

测试,打开浏览器控制台,注意观察 前端调用后台是 192.168.1.233:7001

======================

Windows 电脑打开chrome浏览器访问 screenshot-to-code

左边 选择 Vue 和GPT4-Turbo

右边 点击 按钮,上传我事先截图的应用局部界面

然后它就开始 调用backend服务 7001的,开始生成代码

结果

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

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

相关文章

FFmpeg源码:ff_ctz / ff_ctz_c函数分析

一、ff_ctz函数的作用 ff_ctz定义在FFmpeg源码目录的libavutil/intmath.h 下: #ifndef ff_ctz #define ff_ctz ff_ctz_c /*** Trailing zero bit count.** param v input value. If v is 0, the result is undefined.* return the number of trailing 0-bits*/…

从零开始搭建一个酷炫的个人博客

效果图 一、搭建网站 git和hexo准备 注册GitHub本地安装Git绑定GitHub并提交文件安装npm和hexo,并绑定github上的仓库注意:上述教程都是Windows系统,Mac系统会更简单! 域名准备 购买域名,买的是腾讯云域名&#xf…

Kubernetes排错(十)-处理容器数据磁盘被写满

容器数据磁盘被写满造成的危害: 不能创建 Pod (一直 ContainerCreating)不能删除 Pod (一直 Terminating)无法 exec 到容器 如何判断是否被写满? 容器数据目录大多会单独挂数据盘,路径一般是 /var/lib/docker,也可能是 /data/docker 或 /o…

档案数字化建设花费主要在哪里

在档案数字化建设中,主要花费包括以下几个方面: 1. 技术设备和软件:包括购买和维护服务器、计算机、扫描仪、存储设备等硬件设备,以及购买和使用专久智能档案数字化软件和系统。 2. 人力资源:数字化建设需要专业的技术…

虚拟现实环境下的远程教育和智能评估系统(十二)

接下来,把实时注视点位置、语音文本知识点、帧知识点区域进行匹配; 首先,第一步是匹配语音文本知识点和帧知识点区域,我们知道教师所说的每句话对应的知识点,然后寻找当前时间段内,知识点对应的ppt中的区域…

推荐3款自动爬虫神器,再也不用手撸代码了

网络爬虫是一种常见的数据采集技术,你可以从网页、 APP上抓取任何想要的公开数据,当然需要在合法前提下。 爬虫使用场景也很多,比如: 搜索引擎机器人爬行网站,分析其内容,然后对其进行排名,比…

java:spring-security的简单例子

【pom.xml】 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId><version>2.3.12.RELEASE</version> </dependency> <dependency><groupId>org.springf…

嘉楠勘智CanMV-K230的大小核如何操作

摘要&#xff1a;嘉楠勘智CanMV-K230的帮助文档、例子模型说明中&#xff0c;一直在提“大核&#xff0c;小核”&#xff0c;还提到将文件复制到小核并解压&#xff0c;然后在大核中操作&#xff0c;本文介绍一下这两个“核”如何操作。 所需的硬件&#xff1a;CanMV-K230-V1.1…

<router-view />标签的理解

< router-view />标签的理解 < router-view />用来承载当前级别下的子集路由的一个视图标签。显示当前路由级别下一级的页面。 App.vue是根组件&#xff0c;在它的标签里使用&#xff0c;而且配置好路由的情况下&#xff0c;就能在浏览器上显示子组件的效果。 如…

Python题目

实例 3.1 兔子繁殖问题&#xff08;斐波那契数列&#xff09; 兔子从出生后的第三个月开始&#xff0c;每月都会生一对兔子&#xff0c;小兔子成长到第三个月后也会生一对独自。初始有一对兔子&#xff0c;假如兔子都不死&#xff0c;那么计算并输出1-n个月兔子的数量 n int…

皇河将相董事长程灯虎出席第二十四届世纪大采风并获奖

仲夏时节,西子湖畔。第二十四届世纪大采风品牌人物年度盛典于6月16日至17日在杭州东方文化园隆重举行。本届盛典由亿央网、《华夏英才》电视栏目联合多家媒体共同主办,中世采文化发展集团承办,意尔康股份有限公司、宸咏集团协办,汇聚了来自全国政、商、产、学、研、媒等各界代表…

Eureka 服务注册与发现

目录 前言 注册中心 CAP 理论 常⻅的注册中心 CAP理论对比 Eureka 搭建 Eureka Server 引⼊ eureka-server 依赖 完善启动类 编写配置⽂件 启动服务 服务注册 引⼊ eureka-client 依赖 完善配置⽂件 启动服务 服务发现 引⼊依赖 完善配置⽂件 远程调⽤ 启动…

昇思25天学习打卡营第2天|张量Tensor

一、张量的定义&#xff1a; 张量是一种特殊的数据结构&#xff0c;与数组和矩阵非常相似。张量&#xff08;Tensor&#xff09;是MindSpore网络运算中的基本数据结构&#xff08;也是所有深度学习模型的基础数据结构&#xff09;&#xff0c;下面将主要介绍张量和稀疏张量的属…

企业中订单超时关闭是怎么做的?我说用延迟消息,面试官让我回去等消息?

文章目录 背景时序图方案对比方案一 被动关闭方案二 定时关闭方案三 Rocket MQ延迟消息 总结 背景 订单超时未支付是电商中的一个核心场景&#xff0c;当用户创建订单后&#xff0c;超过一定时间没有支付&#xff0c;平台需要及时将该订单关闭。需要关闭的主要原因有以下几个&…

【database1】mysql:DDL/DML/DQL,外键约束/多表/子查询,事务/连接池

文章目录 1.mysql安装&#xff1a;存储&#xff1a;集合&#xff08;内存&#xff1a;临时&#xff09;&#xff0c;IO流&#xff08;硬盘&#xff1a;持久化&#xff09;1.1 服务端&#xff1a;双击mysql-installer-community-5.6.22.0.msi1.2 客户端&#xff1a;命令行输入my…

RTSP协议分析与安全实践

RTSP协议&#xff0c;全称实时流协议(Real Time Streaming Protocol)&#xff0c;前文已经简单介绍了RTSP相关协议&#xff1b; RTSP和RTP(RTCP) 这里再提一下RTSP和RTP/RTCP、RSVP的关系&#xff1b;如图&#xff1a; RTSP和HTTP 相似性&#xff1a;RTSP和HTTP协议都使用纯…

Android,RPC原理,C语言实现Binder跨进程通信Demo

RPC原理图 Binder C语言层的Demo演示 新建目录 把两个文件拷贝到我们的Demo下面 1.binder_server.c #include <stdio.h> #include <stdlib.h> #include <errno.h> #include <linux/types.h> #include <stdbool.h> #include <string.h> #…

多路h265监控录放开发-(12)完成全部开始录制和全部停止录制代码

xviewer.h 新增 public: void StartRecord();//126 开始全部摄像头录制 void StopRecord();//126 停止全部摄像头录制 xviewer.cpp 新增 //视频录制 static vector<XCameraRecord*> records;//126void XViewer::StartRecord() //开始全部摄像头录制 126 {StopRecord…

基于JSP的“塞纳河畔左岸”的咖啡馆管理系统

开头语&#xff1a; 塞纳河畔左岸的咖啡&#xff0c;我手一杯品尝的你美~ 哎哟&#xff0c;不错哦&#xff01;我们今天来介绍一下咖啡馆管理系统&#xff01; 你好呀&#xff0c;我是计算机学长猫哥&#xff01;如果你对咖啡馆管理系统感兴趣或有相关需求&#xff0c;欢迎联…

AGV机器人的调度开发分析(1)- 内核中的路线规划

准备开始写一个系列&#xff0c;介绍下AGV机器人的调度的开发和应用。 按照openTCS的核心内容&#xff0c;国内多家广泛应用于AGV的调度。那么架构图如下&#xff1a; Kernel中有一个是Routing&#xff0c;这是路由规划模块&#xff0c;需要实现的细节功能包括如下&#xff1a…