ScreenshotToCode安装教程

网页截图生成代码,我测试的效果一般
快速安装教程如下

1,首先你得有OpenAI的账号

国内用这个代理就可以: https://www.closeai-asia.com/
充值一块钱,在本项目中可以生成两次

2,下载程序

下载程序压缩包:https://github.com/abi/screenshot-to-code.git
解压后在程序根目录创建一个.env文件,内容如下:

OPENAI_API_KEY=你的key
OPENAI_BASE_URL=https://api.openai-proxy.org/v1(上面哪个网站的代理接口地址)

然后把整个目录上传到服务器

3,使用docker运行后端

这里只推荐docker,进入程序根目录,运行如下命令

docker-compose up -d --build

命令执行完成后,有两个端口:7001是后台,5173是前端
访问7001得到下面一段话就是成功了

Your backend is running correctly. Please open the front-end URL (default is http://localhost:5173) to use screenshot-to-code.

4,本地运行前端

上面docker起来后的前端是用不了的,需要本地启一个前端
在我们的电脑上用vscode打开frontend项目
修改后端接口地址: 在src/config.ts文件中修改127.0.0.1:7001地址为你的docker主机的地址
修改后的src/config.ts文件如下

// Default to false if set to anything other than "true" or unset
export const IS_RUNNING_ON_CLOUD =
  import.meta.env.VITE_IS_DEPLOYED === "true" || false;

export const WS_BACKEND_URL =
  import.meta.env.VITE_WS_BACKEND_URL || "ws://192.168.1.173:7001";

export const HTTP_BACKEND_URL =
  import.meta.env.VITE_HTTP_BACKEND_URL || "http://192.168.1.173:7001";

export const PICO_BACKEND_FORM_SECRET =
  import.meta.env.VITE_PICO_BACKEND_FORM_SECRET || null;

安装依赖:yarn
运行:yarn dev
4,打开网址http://localhost:5173/就可以使用了
点击网页中的虚线框上传一张图片生成代码

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

从零开始:Linux 环境下的 C/C++ 编译教程

个人主页:chian-ocean 文章专栏 前言: GCC(GNU Compiler Collection)是一个功能强大的编译器集合,支持多种语言,包括 C 和 C。其中 gcc 用于 C 语言编译,g 专用于 C 编译。 Linux GCC or G的安…

小程序-基于java+SpringBoot+Vue的网上花店微信小程序设计与实现

项目运行 1.运行环境:最好是java jdk 1.8,我们在这个平台上运行的。其他版本理论上也可以。 2.IDE环境:IDEA,Eclipse,Myeclipse都可以。推荐IDEA; 3.tomcat环境:Tomcat 7.x,8.x,9.x版本均可 4.硬件环境&#xff1a…

Transformer:一种革命性的序列到序列学习框架

目录 ​编辑 引言 Transformer模型的基本结构 1. 自注意力机制 2. 前馈神经网络 3. 位置编码 Transformer的工作原理 Transformer的应用 机器翻译 文本摘要 问答系统 文本分类 语音识别 图像识别 结论 引言 Transformer模型,自2017年由Vaswani等人提…

轮转数组(java)

题目描述 给定一个整数数组 nums,将数组中的元素向右轮转 k 个位置,其中 k 是非负数 示例 1: 输入: nums [1,2,3,4,5,6,7], k 3 输出: [5,6,7,1,2,3,4] 解释: 向右轮转 1 步: [7,1,2,3,4,5,6] 向右轮转 2 步: [6,7,1,2,3,4,5] 向右轮转 3 步: [5,6,7,…

【vue3实现微信小程序】每日专题与分页跳转的初步实现

快速跳转: 我的个人博客主页👉:Reuuse博客 新开专栏👉:Vue3专栏 参考文献👉:uniapp官网 免费图标👉:阿里巴巴矢量图标库 ❀ 感谢支持!☀ 前情提要 &#x…

【优先算法学习】双指针--结合题目讲解学习

目录 1.有效三角形的个数 1.2题目解题思路 1.3代码实现 2.和为s的两个数 2.1刷题链接-> 2.2题目解题思路 2.3代码实现 1.有效三角形的个数 1.1刷题链接-> 力扣-有效三角形的个数https://leetcode.cn/problems/valid-triangle-number/description/ 1.2题目解…

云服务器部署WebSocket项目

WebSocket是一种在单个TCP连接上进行全双工通信的协议,其设计的目的是在Web浏览器和Web服务器之间进行实时通信(实时Web) WebSocket协议的优点包括: 1. 更高效的网络利用率:与HTTP相比,WebSocket的握手只…

前端---HTML(一)

HTML_网络的三大基石和html普通文本标签 1.我们要访问网络,需不需要知道,网络上的东西在哪? 为什么我们写,www.baidu.com就能找到百度了呢? 我一拼ping www.baidu.com 就拼到了ip地址: [119.75.218.70]…

网络基础 - IP 隧道篇

在一个如图所示的网络环境里,网络 A、B 使用 IPv6,如果处于中间位置的网络 C 支持使用 IPv4 的话,网络 A 与网络 B 之间将无法直接进行通信,为了让它们之间正常通信,这时必须得采用 IP 隧道的功能,IP 隧道中…

1.1、Python 安装与开发环境设置指南

作为你的 Python 导师,我将带领你一步步完成 Python 的安装和开发环境的设置,让你顺利开启 Python 学习之旅。 1. Python 安装 1.1 下载 Python 安装包 首先,我们需要从 Python 官网下载 Python 的安装包。 打开你的浏览器,访…

【Redis篇】String类型命令详讲以及它的使用场景

目录 前言: 基本命令: setnx/setxx FLUSHALL mest mget 计数命令 INCR / INCRBY DECR/DECYBY INCRBYFLOAT 其他命令 APPEND GETRANGE SETRANGE STRLEN String的典型使用场景 缓存(Cache)功能 计数(…

【2024】前端学习笔记19-ref和reactive使用

学习笔记 1.ref2.reactive3.总结 1.ref ref是 Vue 3 中用来创建响应式引用的一个函数,通常用于基本数据类型(如字符串、数字、布尔值等)或对象/数组的单一值。 ref特点: ref 可以用来创建单个响应式对象对于 ref 包裹的值&…

构造函数的相关

文章目录 一、构造函数 今天我们要来讲解类的默认成员函数之一的构造函数。 一、构造函数 构造函数是特殊的成员函数,需要注意的是,构造函数虽然名称叫构造,但是构造函数的主要任务并不是开空间创建对象(我们常使用的局部对象是栈帧创建时&…

C嘎嘎探索篇:栈与队列的交响:C++中的结构艺术

C嘎嘎探索篇:栈与队列的交响:C中的结构艺术 前言: 小编在之前刚完成了C中栈和队列(stack和queue)的讲解,忘记的小伙伴可以去我上一篇文章看一眼的,今天小编将会带领大家吹奏栈和队列的交响&am…

Xcode15(iOS17.4)打包的项目在 iOS12 系统上启动崩溃

0x00 启动崩溃 崩溃日志,只有 2 行,看不出啥来。 0x01 默认配置 由于我开发时,使用的 Xcode 14.1,打包在另外一台电脑 Xcode 15.3 Xcode 14.1 Build Settings -> Asset Catalog Compliter - Options Xcode 15.3 Build S…

【Python爬虫实战】深入解析 Scrapy:从阻塞与非阻塞到高效爬取的实战指南

🌈个人主页:易辰君-CSDN博客 🔥 系列专栏:https://blog.csdn.net/2401_86688088/category_12797772.html ​ 目录 前言 一、阻塞和非阻塞 (一)阻塞 (二)非阻塞 二、Scrapy的工作…

01 [51单片机 PROTEUS仿真设计]基于温度传感器的恒温控制系统

目录 一、主要功能 二、硬件资源 三、程序编程 四、实现现象 一、主要功能 五个按键,分别为启动按键,则LCD1602显示倒计时,音乐播放 设置按键,可以设置倒计时的分秒,然后加减按键,还有最后一个暂停音乐…

途普科技企业知识中台完成华为昇思MindSpore技术认证

近日,北京途普科技有限公司(以下简称“途普科技”)作为华为昇腾大模型方向的应用软件伙伴,核心产品企业知识中台已成功与华为AI框架昇思MindSpore完成相互兼容性认证。这一成就标志着途普科技在AI领域与华为的合作进一步加深&…

shodan(7)

声明! 学习视频来自B站up主 泷羽sec 有兴趣的师傅可以关注一下,如涉及侵权马上删除文章,笔记只是方便各位师傅的学习和探讨,文章所提到的网站以及内容,只做学习交流,其他均与本人以及泷羽sec团队无关&#…

MYSQL 表的增删改查(上)

目录 1.新增数据 2.查询数据 一般查询 去重查询 排序查询 关于NULL 条件查询 分页查询 1.新增数据 语法:insert into 表名[(字段1,字段2...)] values (值,值....); 插入一条新数据行,前面指定的列,要与后面v…