Screenshot To Code

news2024/12/23 7:28:03

序言

对于GPT-4我只是一个门外汉,至于我为什么要了解screenshot to code,只是因为我想知道,在我不懂前端设计的情况下,能不能通过一些工具辅助自己做一些简单的前端界面设计。如果你想通过此文深刻了解GPT-4或者该开源项目,那么就可以不用接着往下看了。

项目地址

项目地址:https://github.com/abi/screenshot-to-code

如果没有翻墙,则可以直接克隆镜像地址:git clone https://gitclone.com/github.com/abi/screenshot-to-code

简介

GPT-4Vision智能生成代码: 通过集成GPT-4Vision,该应用程序能够智能地分析截图并生成相应的HTML、Tailwind CSS和JavaScript代码,使用户无需手动编写代码。

DALL-E3生成相似图像: 应用程序不仅生成代码,还利用DALL-E3生成与原始截图相似的图像,增强用户体验。

实时代码更新: 用户可以直接在应用程序中查看生成的代码,并在需要时通过与AI的互动指令,调整样式或更新缺失的部分,以满足其需求。

灵活的配置选项: 应用程序提供了设置,允许用户选择是否启用DALL-E图像生成功能,使其更加灵活适应不同需求。

下载好的项目如下,如果翻墙了可以查看示例,
在这里插入图片描述
在线生成链接:https://screenshottocode.com/,使用需要付钱,
可生成下面四种代码

  • HTML + Tailwind
  • React + Tailwind
  • Bootstrap
  • Ionic + Tailwind
    在这里插入图片描述

GPT-4

GPT-4是OpenAI为聊天机器人ChatGPT发布的语言模型。也即下一代生成式预训练Transformer,是一种颠覆了自然语言处理(NLP)领域的神经网络模型。凭借其先进的功能,GPT-4有可能改变各行各业的AI驱动应用。

最好是能查看GPT-4的论文,大概了解可参看:哔哩哔哩GPT-4论文精读笔记

新手入门(Getting Started)

由于未翻墙,只能通过镜像地址去下载一些必要的三方包,比如,
pip install --user -i https://pypi.tuna.tsinghua.edu.cn/simple poetry
安装过程中可能存在一些依赖冲突,即第三方依赖的某些其他包的版本不在合适的范围内,即当时在开发第三方包时使用的其他依赖版本需要是指定版本。
在这里插入图片描述
下载好所有的第三方包以及对应的版本后,执行下面的命令启动服务,
poetry run uvicorn main:app --reload --port 7001
另外在dockerFile文件中配置了对外可以访问服务器的端口5173,自行可修改。

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

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

相关文章

电气火灾监控系统

电气火灾监控系统是一种用于预防电气火灾的监控解决方案,可以实时监控电气线路和设备的运行状态,及时发现和处理潜在的电气火灾安全隐患。 该系统的主要功能和优势包括: 实时监控:电气火灾监控系统可以实时监控电气线路和设备的电…

Vue学习计划-Vue2--Vue核心(二)Vue代理方式

Vue data中的两种方式 对象式 data:{}函数式 data(){return {} }示例&#xff1a; <body><div id"app">{{ name }} {{ age}} {{$options}}<input type"text" v-model"value"></div><script>let vm new Vue({el: …

html实现好看的个人博客留言板源码

文章目录 1.设计来源1.1 博客主界面1.2 常用源码1.3 我的文章1.4 留言板1.5 联系我 2.效果和源码2.1 动态效果2.2 源代码 源码下载 作者&#xff1a;xcLeigh 文章地址&#xff1a;https://blog.csdn.net/weixin_43151418/article/details/134837482 html实现好看的个人博客留言…

数据结构与算法编程题41

线性表中各结点的检索概率不等时&#xff0c;可用如下策略提高顺序检索的效率&#xff1a; 若找到指定的结点&#xff0c;则将该结点和其前驱结点&#xff08;若存在&#xff09;交换&#xff0c;使得经常被检索 的结点尽量位于表的前端。试设计在顺序结构的线性表上实现上述策…

实现个微群聊机器人的二次开发

请求URL&#xff1a; http://域名/finderUserHome 请求方式&#xff1a; POST 请求头Headers&#xff1a; Content-Type&#xff1a;application/jsonAuthorization&#xff1a;login接口返回 参数&#xff1a; 参数名必选类型说明wId是String登录实例标识userName是Str…

Java抽象类(abstract class)和接口(interface)的区别——面试

1.抽象类&#xff08;abstract class&#xff09;和接口&#xff08;interface&#xff09;的区别&#xff1a; 抽象类可以有构造方法&#xff0c;接口中不能有构造方法。 抽象类中可以有普通成员变量&#xff0c;接口中没有普通成员变量。抽象类中可以包含非抽象的普通方法&am…

m1源码编译xgboost的动态链接库dylib

1、下载源码 git clone --recursive https://github.com/dmlc/xgboost cd xgboost拉取源码时候&#xff0c;一定要加"--recursive"这个命令。把它的字模块也要拉取下来&#xff0c;才能编译成功 2、安装c依赖 必要的依赖项(不然后续编译时报错)&#xff0c;包括CM…

微信小程序模板选择指南:如何找到靠谱的平台?

随着移动互联网的快速发展&#xff0c;越来越多的企业和商家都在微信小程序上开展业务。而他们也希望可以通过微信小程序模板快速搭建小程序&#xff0c;那么如何才能找到一个靠谱的微信小程序模板平台呢&#xff1f;下面给大家简单讲解一下。 首先要知道的是&#xff0c;微信小…

我一人全干!之vue3后台管理中的大屏展示。

使用大屏展示的时候有很多种场景&#xff0c;众多场景都是为了实现大屏自适应。 大屏&#xff0c;顾名思义&#xff0c;就是放在一个固定的屏幕上看的&#xff0c;即使你不做自适应&#xff0c;放在一个固定的屏幕上看也没啥问题&#xff0c;但是很多做大屏的是为了在PC端看&am…

LeetCode Hot100 994.腐烂的橘子

题目&#xff1a; 在给定的 m x n 网格 grid 中&#xff0c;每个单元格可以有以下三个值之一&#xff1a; 值 0 代表空单元格&#xff1b;值 1 代表新鲜橘子&#xff1b;值 2 代表腐烂的橘子。 每分钟&#xff0c;腐烂的橘子 周围 4 个方向上相邻 的新鲜橘子都会腐烂。 返回…

电商早报 | 12月6日| 1688平台11月GMV增长近25%

1688平台11月GMV增长近25% 12月5日消息&#xff0c;1688发文称&#xff0c;在1688的买家里&#xff0c;25至30岁的“Z世代”占比近50%&#xff0c;30至35岁的“新中产”占比近45%&#xff1b;另外&#xff0c;2023年11月&#xff0c;1688平台GMV增长近25%&#xff0c;日均买家…

菜鸟驿站寄快递真的能省钱吗?还不如去闪侠惠递快递折扣平台下单!

小伙伴们&#xff0c;你们知道我们平常去寄快递发快递的菜鸟驿站是怎么来的吗&#xff1f;今天小编就来带你一探究竟。 那么到菜鸟驿站寄快递真的能省钱吗&#xff1f;其实也不一定。在菜鸟驿站&#xff0c;工作人员称重之后&#xff0c;工作人员说多少就是多少&#xff0c;没…

JavaSE基础50题:6. 求出0~999之间的所有“水仙花数”并输出

概念 “水仙花数”是指一个三位数&#xff0c;其各位数字的立方和确好等于该数本身。 如&#xff1a;153 135333,则153是一个“水仙花数”。 【方法】 如何获得每一位的数&#xff1a;如(153) 个位: 153 % 10 3 十位: 153 / 10 15 15 % 10 5 百位: 153 / 100 1 代码 pu…

Failed to connect to github.com port 443 after 21055 ms: Timed out

目前自己使用了梯*子还是会报这样的错误&#xff0c;连接不到的github。 查了一下原因&#xff1a; 是因为这个请求没有走代理。 解决方案&#xff1a; 设置 -> 网络和Internet -> 代理 -> 编辑 记住这个IP和端口 使用以下命令&#xff1a; git config --global h…

SAP MM 中的业务伙伴确定配置

这篇博客文章将概述 SAP MM 供应商帐户组中的合作伙伴确定是什么以及如何在 S/4 系统中配置它。 本文将指导您完成分步过程&#xff0c;并为您提供有关在供应商主数据中使用合作伙伴确定的完整想法。 合作伙伴角色 供应商在 SAP 中扮演着不同类型的角色&#xff0c;让我们通…

金和OA saveAsOtherFormatServlet接口任意文件上传漏洞

声明 本文仅用于技术交流&#xff0c;请勿用于非法用途 由于传播、利用此文所提供的信息而造成的任何直接或者间接的后果及损失&#xff0c;均由使用者本人负责&#xff0c;文章作者不为此承担任何责任。 1. 产品简介 金和数字化智能办公平台&#xff08;简称JC6&#xff09;…

css:flex布局中子元素高度height没有达到100%

目录 问题flex布局示例解决办法方式一方式二 参考 问题 css中使用flex布局中子元素高度height没有达到100% flex布局示例 希望实现两个盒子左右分布&#xff0c;内容垂直居中对齐 <style>.box {display: flex;align-items: center;border: 1px solid #eeeeee;}.box-l…

人事档案管理系统设计与实现

摘 要 进入21世纪&#xff0c;已经步入了信息时代。单位的现代化管理也应该与时俱进。目前&#xff0c;企业的人事档案管理系统信息化已经越来越受到企业的重视。本项目立足于实习调查&#xff0c;严格按照学校毕设的规章制度&#xff0c;做到实事求是。本课题研究目的是&…

推荐一款手持式ECU刷写设备,国产软件配合使用

同星智能开发的一款手持式ECU刷写工具——TF1011&#xff0c;在TSMaster中导入诊断流程即可离线一键刷写。在 PC 端完成配置后&#xff0c;在设备可以在手持式离线场景下实现&#xff1a;基于 UDS 协议的诊断和基于 UDS 协议的 Flash Bootloader 程序更新功能。 产品简介—TF10…

2023-简单点-树莓派中的硬件通讯

树莓派中的通讯方式 串口通讯什么是串口通讯&#xff1f;串口设备的格式串口通讯的特点 tips并行通讯&#xff1f;基于网络的通讯?socket通讯 串口通讯 什么是串口通讯&#xff1f; 串行通信每次传输一个位元数据&#xff0c;并在连续进行单次过程的基础上进行通信。根据数据…