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/就可以使用了
点击网页中的虚线框上传一张图片生成代码
相关文章:
ScreenshotToCode安装教程
网页截图生成代码,我测试的效果一般 快速安装教程如下 1,首先你得有OpenAI的账号 国内用这个代理就可以: https://www.closeai-asia.com/ 充值一块钱,在本项目中可以生成两次 2,下载程序 下载程序压缩包࿱…...
工程企业如何做好成本控制?该如何入手?
工程企业的成本控制是企业管理中的核心工作,其直接关系到项目的盈利能力和市场竞争力。以下从几个关键方向阐述如何入手做好成本控制: 一、明确成本控制目标 成本控制的目标不仅是减少支出,更重要的是保证项目质量和工期,避免因低…...
详解桥接模式
引言 在开发过程中,可能会遇到系统设计有多种维度变化的情况,比如我们想画一幅五彩斑斓的画,需要用到12个颜色,但是需要粗细不同的线条(粗、中、细),如果用蜡笔,就需要粗中细三种蜡笔…...
田忌赛马五局三胜问题matlab代码
问题描述:在可以随机选择出场顺序的情况下,如果把比赛规则从三局两胜制改为五局三胜制,齐王胜出的概率是上升了还是下降了?五局三胜的赛制下,大家的马重新分为5个等级。前提条件仍然是齐王每种等级的马都优于田忌同等级…...
Springboot 修改post请求接口入参或重新赋值
前言 很久之前写过一篇就是自动填充接口参数的,利用的 HandlerMethodArgumentResolver 自定义注解 Springboot Controller接口默认自动填充 业务实体参数值_springboot设置入参默认值-CSDN博客 现在这一篇也差不多,达到的目的就是重新去给post请求的参数…...
jmeter学习(7)命令行控制
jmeter -n -t E:\IOT\test2.jmx -l E:\IOT\output\output.jtl -j E:\IOT\output\jmeter.log -e -o E:\IOT\output\report IOT下创建output 文件夹,jmx文件名避免中文,再次执行output.jtl不能有数据要删除...
李春葆《数据结构》-查找-课后习题代码题
一:设计一个折半查找算法,求查找到关键字为 k 的记录所需关键字的比较次数。假设 k 与 R[i].key 的比较得到 3 种情况,即 kR[i].key,k<R[i].key 或者 k>R[i].key,计为 1 次比较(在教材中讨论关键字比…...
Spring Boot教程之十: 使用 Spring Boot 实现从数据库动态下拉列表
使用 Spring Boot 实现从数据库动态下拉列表 动态下拉列表(或依赖下拉列表)的概念令人兴奋,但编写起来却颇具挑战性。动态下拉列表意味着一个下拉列表中的值依赖于前一个下拉列表中选择的值。一个简单的例子是三个下拉框,分别显示…...
Facebook的开源项目解析:推动开发者社区的技术进步
Facebook,作为全球领先的社交平台之一,其在技术领域的创新不仅体现在产品功能的实现上,也积极推动开源社区的发展。开源项目已经成为Facebook技术战略的重要组成部分,通过开源,Facebook不仅加速了技术进步,…...
以 SpringBoot 为基石的夕阳红公寓信息化管理系统设计理念
2 开发环境与技术 本章节对开发夕阳红公寓管理系统需要搭建的开发环境,还有夕阳红公寓管理系统开发中使用的编程技术等进行阐述。 2.1 Java语言 Java语言是当今为止依然在编程语言行业具有生命力的常青树之一。Java语言最原始的诞生,不仅仅是创造者感觉C…...
身份证OCR 识别 API 接口的发展前景
随着信息时代的到来,大量的身份证数据需要进行整理、存储和管理,OCR 识别技术可以将身份证信息转化为结构化的电子文本,方便后续的数据管理和分析,提高工作效率。 未来,随着人工智能和深度学习等技术的不断发展&#…...
使用vue3实现element-plus的主题切换特效
先看实现效果 实现过程 前提需要引入好 element-plus,并导入element的黑色主题CSS 示例,再 main.js 中引入 import ElementPlus from element-plus import element-plus/dist/index.css import element-plus/theme-chalk/dark/css-vars.css // 黑色主…...
深入了解决策树---机器学习中的经典算法
引言 决策树(Decision Tree)是一种重要的机器学习模型,以直观的分层决策方式和简单高效的特点成为分类和回归任务中广泛应用的工具。作为解释性和透明性强的算法,决策树不仅适用于小规模数据,也可作为复杂模型的基石&…...
深度优先算法(DFS)和广度优先算法(BFS)
一、深度优先算法 深度优先搜索属于图算法的一种,是一个针对图和树的遍历算法,英文缩写为DFS即Depth First Search。深度优先搜索是图论中的经典算法,利用深度优先搜索算法可以产生目标图的相应拓扑排序表,利用拓扑排序表可以方便…...
Linux进程信号
信号量 本质是一个计数器,用来表示系统资源中,资源数量多少的问题。 公共资源:能被多个进程同时访问的资源。 访问没有被保护的资源,可能会出现数据不一致问题。 让不同进程看到同一个资源的目的是想通信。 为了解决进程具有独立性无法 …...
东风破捉妖师横空出世
一.异动拉升实时监测 东风破就像是一个大盘监测平台,是现实版的捉妖师,一旦妖股横空出世,就会在东风破面前原形毕露。东风破AI算法逻辑是监测存在异动拉升的股票,实时分析上证,深证,创业和科创板的股票数据…...
初窥门径:React中的事件机制
React中的事件机制 什么是合成事件?使用合成事件的好处事件委托事件池 React事件执行顺序 什么是合成事件? 在React中,合成事件(Synthetic Events) 是一种跨浏览器的事件包装机制,旨在统一浏览器的事件处理…...
【Android、IOS、Flutter、鸿蒙、ReactNative 】实现 MVP 架构
Android Studio 版本 Android Java MVP 模式 参考 模型层 model public class User {private String email;private String password;public User(String email, String password) {this.email = email;this.password = password;}public String getEmail() {return email;}…...
DroneCAN 最新开发进展,Andrew在Ardupilot开发者大会2024的演讲
本文是Andrew演讲的中文翻译,你可以直接观看视频了解演讲的全部内容,此演讲视频的中文版本已经发布在Ardupilot社区的Blog板块,你可以在 Arudpilot官网(https://ardupilot.org) 获取该视频: 你也可以直接通过Bilibili链…...
从 App Search 到 Elasticsearch — 挖掘搜索的未来
作者:来自 Elastic Nick Chow App Search 将在 9.0 版本中停用,但 Elasticsearch 拥有你构建强大的 AI 搜索体验所需的一切。以下是你需要了解的内容。 生成式人工智能的最新进展正在改变用户行为,激励开发人员创造更具活力、更直观、更引人入…...
如何给GitHub的开源项目贡献PR
🎯导读:本文详细介绍了如何向开源项目“代码随想录”贡献自己的题解。首先,需要Fork原项目的仓库至个人GitHub账户,然后解决克隆仓库时可能遇到的SSH密钥问题。接着,按照标准流程对本地仓库进行代码或文档的修改&#…...
架构-微服务-服务配置
文章目录 前言一、配置中心介绍1. 什么是配置中心2. 解决方案 二、Nacos Config入门三、Nacos Config深入1. 配置动态刷新2. 配置共享 四、nacos服务配置的核心概念 前言 服务配置--Nacos Config 微服务架构下关于配置文件的一些问题: 配置文件相对分散。在一个…...
鱼眼相机模型-MEI
参考文献: Single View Point Omnidirectional Camera Calibration from Planar Grids 1. 相机模型如下: // 相机坐标系下的点投影到畸变图像// 输入:相机坐标系点坐标cam 输出: 畸变图像素点坐标disPtvoid FisheyeCamAdapter::…...
设计模式——抽象工厂模式
定义与概念 抽象工厂模式是一种创建型设计模式。它提供了一个创建一系列相关或相互依赖对象的接口,而无需指定它们具体的类。简单来说,抽象工厂就像是一个工厂的抽象蓝图,这个蓝图定义了生产一组产品的方法,但具体怎么生产这些产…...
大语言模型(LLM)不平衡的内存使用问题;训练过程中 Transformer层1和Transformer层2的反向传播计算量差异
目录 大语言模型(LLM)不平衡的内存使用问题 一、不平衡的内存使用概述 二、不平衡的内存使用举例 嵌入层与Transformer层之间的内存差异: 不同Transformer层之间的内存差异: 输入数据对内存使用的影响: 三、不平衡的内存使用带来的问题 四、解决方案 大语言模型的…...
AI需求条目化全面升级!支持多格式需求,打破模板限制!
AI需求条目化全面升级!支持多格式需求,打破模板限制! 一、多格兼济 标准立成 1、功能揭秘 预览未来 平台需求板块的AI需求条目化功能迎来全面升级。它支持多种需求格式,不再受限于模板文件,能够一键自动快速且灵活地生…...
C#:时间与时间戳的转换
1、将 DateTime 转换为 Unix 时间戳(秒) public static long DateTimeToUnixTimestamp(DateTime dateTime) {// 定义UTC纪元时间DateTime epochStart new DateTime(1970, 1, 1, 0, 0, 0, DateTimeKind.Utc);// 计算从UTC纪元时间到指定时间的总秒数Tim…...
输入一行字符,分别统计出其中英文字母、空格、数字和其它字符的个数。-多语言
目录 C 语言实现 Python 实现 Java 实现 Js 实现 Ts 实现 题目:输入一行字符,分别统计出其中英文字母、空格、数字和其它字符的个数。 程序分析:利用while语句,条件为输入的字符不为\n。 C 语言实现 #include <stdio.h>int mai…...
贪心-区间问题——acwing
题目一:最大不相交区间数量 908. 最大不相交区间数量 - AcWing题库 分析 跟区间选点一样。区间选点:贪心——acwing-CSDN博客 代码 #include<bits/stdc.h> using namespace std;const int N 1e510;struct Range {int l, r;// 重载函数bool op…...
OpenCV相机标定与3D重建(8)相机标定函数calibrateCamera()的使用
操作系统:ubuntu22.04 OpenCV版本:OpenCV4.9 IDE:Visual Studio Code 编程语言:C11 算法描述 从校准图案的多个视图中找到相机的内参和外参参数. cv::calibrateCamera 是 OpenCV 中用于相机标定的一个非常重要的函数。它通过一系列已知的世…...
Maven 插件
为 Maven 插件配置环境变量通常涉及到设置 Java 环境变量以及 Maven 相关的环境变量。以下是一些基本步骤: 1. 设置 Java 环境变量 Maven 需要 Java 运行环境,因此您需要确保 Java 的环境变量已经正确设置。 - **JAVA_HOME**:指向您的 Java…...
【Java基础入门篇】一、变量、数据类型和运算符
Java基础入门篇 一、变量、数据类型和运算符 1.1 变量 计算机中的数据表示方式是:“二进制(0/1)”,但是同时也可以兼容其他进制,例如八进制、十进制、十六进制等。 Java变量的本质是:存储在固定空间的内容,变量名是…...
[论文阅读]Poisoning Retrieval Corpora by Injecting Adversarial Passages
Poisoning Retrieval Corpora by Injecting Adversarial Passages 通过注入对抗性文本对检索语料库进行中毒 http://arxiv.org/abs/2310.19156 EMNLP2023 文章的目标就是要让检索器检索的结果包含攻击者生成的对抗性文本,如果能够检索到,则认为攻击成…...
[Redis#10] scan | db_0 | redis_cli | RESP | C++-redis启动教程
目录 1. 渐进式遍历 1.2 常见指令 - scan 2. 数据库管理 3.redis 客户端 是否前面学习的这些 redis 命令,没有价值了呢? 4.RESP 自定义协议 为什么能编写出一个自定义的 Redis 客户端? RESP 协议 5.在 Ubuntu 下启用 C 操作 Redis …...
LCR 151.彩灯装饰记录III
题目 代码 class Solution { public List<List> levelOrder(TreeNode root) { if(root null){ return new ArrayList<>(); } Queue<TreeNode> queue new LinkedList<>();List<List<Integer>> res new ArrayList<>();int sum 1;…...
vue实现滚动条滑动到底部分页调取后端接口加载数据
一、案例效果 二、前提条件 接口返回数据 三、案例代码 子组件 const $emit defineEmits([cloneItem, updateList]);const props defineProps({rightList: {type: Array,},chartTableData: {type: Array as () > ChartListType[],},deleteChartInfo: {type: Object,}…...
Vscode连接服务器
在VS Code中连接服务器的主要步骤如下: 1.安装Remote-SSH插件:打开VS Code,进入插件市场搜索“Remote-SSH”并安装。安装完成后,VS Code的侧边栏会出现一个远程资源管理器的图标。 2.配置服务器信息:点击…...
工作中Linux 内核的链表算法的使用
在 Linux 内核中,链表是一个非常重要的数据结构,广泛用于各种场景,如任务调度、设备管理、进程管理等。Linux 内核提供了高效且灵活的链表实现,能够更好地管理系统中的数据和对象。我们将深入浅出地讲解 Linux 内核链表的实现原理、用法,并举例展示如何使用。 1. 链表基本…...
洛谷P1115
最大子段和 - 洛谷 最大子段和 题目描述 给出一个长度为 n的序列a,选出其中连续且非空的一段使得这段和最大。 输入格式 第一行是一个整数,表示序列的长度n。 第二行有n个整数,第i个整数表示序列的第 i个数字 a_i。 输出格式 输出一行…...
USB Type-C一线通扩展屏:多场景应用,重塑高效办公与极致娱乐体验
在追求高效与便捷的时代,启明智显USB Type-C一线通扩展屏方案正以其独特的优势,成为众多职场人士、娱乐爱好者和游戏玩家的首选。这款扩展屏不仅具备卓越的性能和广泛的兼容性,更能在多个应用场景中发挥出其独特的价值。 USB2.0显卡ÿ…...
使用Native AOT发布C# dll 提供给C++调用
Native AOT,即提前本地编译(Ahead-Of-Time Compilation),是一种将托管代码(如 C#)编译为本机可执行文件的技术,无需在运行时进行任何代码生成。 (Native AOT 优缺点截图摘自张善友博…...
Excel中根据某列内容拆分为工作簿
简介:根据A列的内容进行筛选,将筛选出来的数据生成一个新的工作簿(可以放到指定文件夹下),且工作簿名为筛选内容。 举例: 将上面的内容使用VBA会在当前test1下生成5个工作簿,工作簿名分别为TEST1.xls TEST2.xls TEST3…...
网络安全体系与网络安全模型
4.1 网络安全体系概述 4.1.1 网络安全体系概述 一般面言,网络安全体系是网络安全保障系统的最高层概念抽象,是由各种网络安全单元按照一定的规则组成的,共同实现网络安全的目标。网络安全体系包括法律法规政策文件、安全策略、组织管理、技术…...
彻底理解quadtree四叉树、Octree八叉树 —— 点云的空间划分的标准做法
1.参考文章: (1)https://www.zhihu.com/question/25111128 这里面的第一个回答,有一幅图: 只要理解的四叉树的构建,对于八叉树的构建原理类比方法完全一样:对于二维平面内的随机分布的这些点&…...
Altium Designer脚本工具定制
原理图设计自动化 ➡️Altium原理图检查工具 ➡️元器件参数集导入导出 ➡️原理图符号自动创建 ➡️原理图高级查找 ➡️原理图库文档高级查找 ➡️原理图文档对比 ➡️原理图库文档对比 PCB设计自动化 ➡️各种各样的PCB线圈自动创建 ➡️PCB文档导出成SVG格式文档…...
容器化与容器编排(Containerization and Orchestration)
一、容器化与容器编排介绍 容器化技术(Containerization)是一种轻量级的虚拟化技术,它允许开发者将应用及其所有依赖打包到一个独立的、隔离的容器中。容器比传统虚拟机(VM)更加轻便、高效,可以跨平台部署,并且提供一致的运行环境。而容器编排(Container Orchestratio…...
娱乐API:快速生成藏头诗、藏尾诗和藏中诗
引言 诗歌是中国传统文化的重要组成部分,其中藏头诗、藏尾诗和藏中诗因其独特的形式而备受喜爱。为了满足广大文学爱好者的需求,我们推出了一款娱乐API,支持快速生成藏头诗、藏尾诗和藏中诗。本文将详细介绍该API的功能、使用方法以及如何将…...
基于Python制作一个简易UI界面
基于Python制作一个简易UI界面 目录 基于Python制作一个简易UI界面1 原理简介2 编写程序3 程序测试 1 原理简介 这里用到了Python自带的UI库tkinter。 tkinter 是 Python 的标准 GUI(图形用户界面)库,用于创建和管理图形界面。它提供了一个简…...
【视频】OpenCV:读写视频文件VideoCapture和VideoWriter
1、VideoCapture:获取视频 VideoCapture可以从摄像头或者视频文件(eg:mp4,avi)中获取视频数据。 1.1 打开视频 1)打开摄像头 cv::VideoCapture cap(0); 参数:0表示默认摄像头 2)打开视频文件 cv::VideoCapture cap("video.mp4");3)判断是否打开成功 …...
【Leecode】Leecode刷题之路第62天之不同路径
题目出处 62-不同路径-题目出处 题目描述 个人解法 思路: todo代码示例:(Java) todo复杂度分析 todo官方解法 62-不同路径-官方解法 方法1:动态规划 思路: 代码示例:(Java&…...