截图转HTML代码,支持预览,前端不用浪费时间写html和css了

截图转代码

试用地址:https://picoapps.xyz/free-tools/screenshot-to-code

这个简单的应用可以将截图转换为HTML/Tailwind CSS代码。它使用GPT-4 Vision来生成代码,并使用DALL-E 3来生成类似的图像。现在你也可以输入一个URL来克隆一个现有的网站!

📚 先看示例

NYTimes

OriginalReplica
Screenshot 2023-11-20 at 12 54 03 PMScreenshot 2023-11-20 at 12 59 56 PM

Instagram页面(没有泰勒·斯威夫特的照片)

截图转代码2

黑客新闻 但是它首先获取颜色错误,所以我们需要纠正

截图转代码示例1

🛠 开始使用

该应用程序有一个React/Vite前端和一个FastAPI后端。你需要一个有访问GPT-4 Vision API权限的OpenAI API密钥。

运行后端(我使用Poetry进行包管理 - 如果你没有安装,可以使用pip install poetry):

cd backend
echo "OPENAI_API_KEY=sk-your-key" > .env
poetry install
poetry shell
poetry run uvicorn main:app --reload --port 7001

运行前端:

cd frontend
yarn
yarn dev

打开 http://localhost:5173 来使用应用程序。

如果你更喜欢在不同的端口运行后端,更新 frontend/.env.local 中的 VITE_WS_BACKEND_URL。

为了调试目的,如果你不想浪费GPT4-Vision的信用,你可以在模拟模式下运行后端(它会流式传输预录制的响应):

MOCK=true poetry run uvicorn main:app --reload --port 7001

Docker

如果你的系统上安装了Docker,在根目录下运行:

echo "OPENAI_API_KEY=sk-your-key" > .env
docker-compose up -d --build

应用程序将在 http://localhost:5173 上运行。注意,你不能用这种设置来开发应用程序,因为文件更改不会触发重建。

🌍 托管版本

🆕 在这里试用 (需要自己提供OpenAI密钥 - 你的密钥必须有访问GPT-4 Vision的权限。详细信息请查看下方的常见问题部分)。或者查看下方的开始使用部分以获取本地安装指南。

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

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

相关文章

RuntimeError: CUDA error: device-side assert triggered

背景: 使用SAGEConv卷积层的图神经网络,网络架构如下 原因: 我在卷积层之前改变了特征矩阵的维度,原本为[172,1,32] 现在改为了 [172,2,32]。导致了特征矩阵x在进行 “x x.squeeze(1)” 操作时并没有将第二向量值去除&#xff08…

蓝桥杯每日一题2023.11.25

题目描述 “蓝桥杯”练习系统 (lanqiao.cn) 题目分析 对于此题目最开始是递归想法,但发现题意中的匹配次数实际上是指在这8个字母中这8个字母每个字母对应的个数是否相同,如果相同则匹配。 此处我们可以使用subsrtr函数,每次循环截取8个字…

印刷基板开孔机上的直线导轨怎么安装?

直线导轨是属于高精度的传动元件,作为印刷基板开孔机重要的传动元件,倘若安装不当,严重则无法正常作业,轻则影响直线导轨的精度和寿命。那么,印刷基板开孔机的直线导轨是如何安装的呢? 在安装前&#xff0c…

中通单号查询,中通快递物流查询,将途经指定城市的单号筛选出来

批量查询中通快递单号的物流信息,并将途经指定城市的单号筛选出来。 所需工具: 一个【快递批量查询高手】软件 中通快递单号若干 操作步骤: 步骤1:运行【快递批量查询高手】软件,第一次使用的朋友记得先注册&#x…

【差旅游记】走进新疆哈密博物馆

哈喽,大家好,我是雷工! 前些天在新疆哈密时,有天下午有点时间,看离住的宾馆不远就是哈密博物馆,便去逛了逛博物馆,由于接下来的一段时间没顾上记录,趁今天有些时间简单记录下那短暂的…

STM32 CAN协议讲解以及代码

STM32 CAN 文章目录 STM32 CAN前言一、CAN外设1.主控制寄存器CAN_MCR2.位时序寄存器CAN_BTR3.CAN的发送邮箱4.CAN的接收FIFO5.验收筛选器 二、代码配置1.初始化2.发送数据3.接收数据4.main.c 前言 前面学习了CAN的一些理论知识,他在我们的STM32里面是怎么用的呢 前…

【手写实现一个简单版的Dubbo,深刻理解RPC框架的底层实现原理】

手写实现一个简单版的Dubbo,深刻理解RPC框架的底层实现原理 RPC框架简介了解Dubbo的实现原理服务暴露服务引入服务调用 手写实现一个简单版的Dubbo服务暴露ServiceBeanProxyFactory#getInvokerProtocol#exportRegistryProtocol#export 服务引入RegistryProto#referD…

matlab画双坐标图的样式

matlab画双坐标图的样式 %% clc,clear,close all; t0:0.1:9*pi; figure; [AX,Ha,Hb]plotyy(t,sin(t),t,exp(t)); % 绘图并创建句柄 % ----------------- 设置刻度 set(AX(1),yTick,[-1.250:0.25:1.25]) % 设置左边Y轴的刻度 set(AX(2),yTick,[0:50:350]) …

服务器连接github

https://zhuanlan.zhihu.com/p/543490354 比着这个一步步做就行。 https://blog.l0v0.com/posts/94ffdbdf.html 上传文件可以看这个 注意: 密钥ssh-keygen设置好之后,以后就不用每次输入账号密码才能访问了。 otherwise,每次要输入账号密码。…

文件批量改名方法:文件自动批量重命名,提升文件管理效率

在日常工作中随着工作时间的推移,在文件数量日益增长的情况下,会在电脑中积累大量的文件。如果文件名混乱无序,查找和识别重要文件将变得非常困难。这不仅会浪费大量的时间和精力,还可能导致重要文件的丢失或混乱。文件批量改名可…

高级驾驶辅助系统 (ADAS)介绍

随着汽车技术持续快速发展,推动更安全、更智能、更高效的驾驶体验一直是汽车创新的前沿。高级驾驶辅助系统( ADAS ) 是这场技术革命的关键参与者,是 指集成到现代车辆中的一组技术和功能,用于增强驾驶员安全、改善驾驶体验并协助完成各种驾驶任务。它使用传感器、摄像头、雷…

【数据结构实验】排序(三)快速排序算法的改进(三者取中法)

文章目录 1. 引言2. 快速排序算法2.1 传统快速排序2.2 三者取中法 3. 实验内容3.1 实验题目(一)输入要求(二)输出要求 3.2 算法实现 4. 实验结果 1. 引言 快速排序是一种经典的排序算法,其核心思想是通过选择一个基准元…

armbian折腾之docker搭建chatgptweb指导(无需魔法)

文章目录 前言面板/docker的安装获取中转Key创建docker容器chatgpt-next-web部署[推荐]chatgpt-Web部署 推荐学习openai-hk官方的部署指导 前言 好久都没有折腾armbian,导致吃了很长时间的灰,今天偶然看到B站UP主JeeJK007的搭建视频,便想着能…

小程序如何禁止指定用户访问?如何设置指定用户才能访问?

​有些商家为了价格保密或者实行严格的会员制等原因,希望小程序能够限制某些人的访问或者设置指定人员才能访问。这种功能在小程序中,怎么支持这些功能呢?下面具体介绍。 一、禁止指定用户访问 禁止指定用户访问,可以通过小程序…

智能汽车十大网络安全攻击场景-《智能汽车网络安全权威指南》

引言 大家都很熟悉OWASP Top 10风险报告,这个报告不但总结了Web应用程序最可能、最常见、最危险的10大安全隐患,还包括了如何消除这些隐患的建议,这个“OWASP Top 10“差不多每隔三年更新一次。目前汽车网络安全攻击威胁隐患繁多&#xff0c…

杰发科技AC7801——keil工程移植到IAR

0、简介 发现AC7801的代码只有keil工程的,IAR和Eclipse的代码只有一个例程,于是在从Keil移植到IAR时候遇到的问题记录下。 正常情况下,直接把keil的usr用户代码移植到iar的文件夹下面,删除原本的文件再添加新加进来的文件即可。…

链表?细!详细知识点总结!

链表 定义:链表是一种递归的数据结构,它或者为空(null),或者是指向一个结点(node)的引用,该结点含有一个泛型的元素和一个指向另一条链表的引用。 ​ 其实链表就是有序的列表,它在内…

03:2440--UART

目录 一:UART 1:概念 2:工作模式 3:逻辑电平 4:串口结构图 5:时间的计算 二:寄存器 1:简单的UART传输数据 A:GPHCON--配置引脚 B:GPHUP----使能内部上拉​编辑 C: UCON0---设置频率115200 D: ULCON0----数据格式8n1 E:发送数据 A:UTRSTAT0 B:UTXHO--发送数据输…

从0到0.01入门 Webpack| 004.精选 Webpack面试题

🤍 前端开发工程师(主业)、技术博主(副业)、已过CET6 🍨 阿珊和她的猫_CSDN个人主页 🕠 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》 🍚 蓝桥云课签约作者、已在蓝桥云…

ref详解(C#)

本质上来说 ref 的就是把 C/C 指针的那一套又拿回来了,而且还封装成一套自己的玩法。 我想设计者的初心把 ref 的功能限制得死死的,可能也考虑到 C# 是一门面向业务开发的语言,讲究的是做项目快狠准,性能反而不是第一要素&#x…