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,一经查实,立即删除!

相关文章

Gradle代理设置

修改 ~/.gradle/gradle.properties 文件&#xff0c;添加代理配置。 对于http和https代理&#xff0c;添加如下内容&#xff1a; systemProp.http.proxyHost<host> systemProp.http.proxyPort<port> # systemProp.http.proxyUser<user> # systemProp.http.…

AI 大模型企业应用实战(10)-LLMs和Chat Models

1 模型 来看两种不同类型的模型--LLM 和聊天模型。然后&#xff0c;它将介绍如何使用提示模板来格式化这些模型的输入&#xff0c;以及如何使用输出解析器来处理输出。 LangChain 中的语言模型有两种类型&#xff1a; 1.1 Chat Models 聊天模型通常由 LLM 支持&#xff0c;…

正确实现 QThread 的方法(附示例)

这篇技术博客探讨了在 Qt 框架中正确实现 QThread 类的方法。传统 Qt 文档建议继承 QThread 类并重写其 run 方法,这虽然在某些情况下可行,但并不是推荐的最佳实践。以下内容将探讨这种方法的利弊,并提供一个更好的实现 QThread 的示例。 原始示例:继承 QThread 并重写 ru…

FFmpeg源码:ff_ctz / ff_ctz_c函数分析

一、ff_ctz函数的作用 ff_ctz定义在FFmpeg源码目录的libavutil/intmath.h 下&#xff1a; #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&#xff0c;并绑定github上的仓库注意&#xff1a;上述教程都是Windows系统&#xff0c;Mac系统会更简单&#xff01; 域名准备 购买域名&#xff0c;买的是腾讯云域名&#xf…

OpenCV 棋盘格角点探测

文章目录 一、简介二、代码实现三、实现效果参考文献一、简介 这篇文章中(https://mp.weixin.qq.com/s?__biz=Mzg5MzE2NzgwOA==&mid=2247483686)探讨了关于OpenCV中棋盘格角点探测算法的整个过程,以及所存在的缺点限制。总的来说,(1)在opencv中为了兼顾计算速度,因…

@PostConstruct 注解的方法用于资源的初始化

PostConstruct 是 Java EE 5 引入的一个注解&#xff0c;主要用于依赖注入完成之后&#xff0c;需要执行的方法上。这个注解的方法会在依赖注入完成后自动被容器&#xff08;如 EJB 容器或 Spring 容器&#xff09;调用&#xff0c;并且只会被调用一次。 PostConstruct 注解的…

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

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

工程师 - status和state的区别

"Status"和 "state"是相关的概念&#xff0c;但有不同的含义&#xff0c;尤其是在计算、系统和编程方面&#xff1a; 1. Status&#xff1a; * 定义&#xff1a; 状态是指系统、进程或实体在某一特定时间点的当前状态或情况。 * 使用方法&#xff1a; 它通…

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

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

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

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

数据仓库之雪花模型

雪花模型是数据仓库设计中使用的一种规范化模式。它是星型模型的一种扩展&#xff0c;通过进一步规范化维度表来减少冗余和节省存储空间。下面详细介绍雪花模型的各个方面&#xff1a; 雪花模型概述 雪花模型的名称源于其复杂的结构图形&#xff0c;类似于雪花的形状。在这种…

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

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

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…

大数据复习练习

大数据复习练习题 填空题简答题简单分析题程序设计题程序设计题 填空题 (数据)过观察、实验或计算得出的结果。&#xff08;消息&#xff09;是较为宏观的概念&#xff0c;它是由数据的有序排列组合而成。大数据的数据类型包括&#xff08;结构化数据&#xff09;和&#xff0…

<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 依赖 完善配置⽂件 启动服务 服务发现 引⼊依赖 完善配置⽂件 远程调⽤ 启动…