Screenshot To Code

序言

对于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,自行可修改。

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

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

相关文章

内部类Lambda

静态内部类 /*** 静态成员是在类加载成字节码时就已经存在的,静态只能访问静态*/ public class Demo {public static void main(String[] args) {Outer.Inner.show();} }class Outer {int num1 10;static int num2 20;static class Inner {static void show() {Outer outer …

重庆市失业金申领流程

1.领失业金的前提:非本人意愿中断就业。个人理解就是不是主动辞职才能领。 2.因此公司在处理社保减员的时候,不能是劳动者主动提出离职。 3.社保减员可选择原因:其他原因中断缴费 / 由单位提出双方协商一致解除劳动合同。 4.当社保暂停缴费…

A--Z与a--z的ASCII码的差异

从z到A还有一些字符 应该改为str[i]>A&&str[i]<Z||str[i]>a&&str[i]<z;

C++ string类—初始化、容量操作、迭代器

目录 前言 一、string类 二、初始化 1、无参或带参 2、用字符串变量初始化 3、用字符串初始化 4、指定数量字符 三、容量操作 1、size 2、push_back 3、append​编辑 4、运算符 5、reserve 6、resize 四、迭代器 五、OJ练习 反转字符 找出字符串中出现一次的…

Leetcode144. 二叉树的前序遍历-C语言

文章目录 题目介绍题目分析解题思路1.创建一个数组来储存二叉树节点的值2.根据二叉树的大小来开辟数组的大小3.边前序遍历边向创建的数组中存入二叉树节点的值 完整代码 题目介绍 题目分析 题目要求我们输出二叉树按前序遍历排列的每个节点的值。 解题思路 1.创建一个数组来…

Android HCI日志分析案例1

案例1--蓝牙扫描设备过程分析 应用层发起搜索蓝牙设备&#xff0c;Android 官方提供的蓝牙扫描方式有三种&#xff0c;分别如下&#xff1a; BluetoothAdapter.startDiscovery(); //可以扫描经典蓝牙和BLE两种。BluetoothAdapter.startLeScan();//扫描低功耗蓝牙&#xff0c;…

为XiunoBBS4.0开启redis缓存且支持密码验证

修改模块文件1 xiunoPHP/cache_redis.class.php: <?phpclass cache_redis {public $conf array();public $link NULL;public $cachepre ;public $errno 0;public $errstr ;public function __construct($conf array()) {if(!extension_loaded(Redis)) {return $thi…

2023-2024-1-高级语言程序设计-字符数组

7-1 凯撒密码 为了防止信息被别人轻易窃取&#xff0c;需要把电码明文通过加密方式变换成为密文。输入一个以回车符为结束标志的字符串&#xff08;少于80个字符&#xff09;&#xff0c;再输入一个整数offset&#xff0c;用凯撒密码将其加密后输出。恺撒密码是一种简单的替换…

【spring(六)】WebSocket网络传输协议

&#x1f308;键盘敲烂&#xff0c;年薪30万&#x1f308; 目录 核心概要&#xff1a; 概念介绍&#xff1a; 对比HTTP协议&#xff1a;⭐ WebSocket入门案例&#xff1a;⭐ 核心概要&#xff1a; websocket对比http 概念介绍&#xff1a; WebSocket是Web服务器的一个组件…

力扣.特定深度节点链表(java BFS解法)

Problem: 面试题 04.03. 特定深度节点链表 文章目录 题目描述思路解题方法复杂度Code 题目描述 思路 根据题意需要取出二叉树每一层节点组成的链表并将其添加到一个数组中。我们将该要求分解成如下的操作&#xff1a; 1.利用BFS获取二叉树每一层的节点 2.利用链表的尾插法将二…

04.PostgreSQL是如何实现隔离级别的?

PostgreSQL是如何实现隔离级别的&#xff1f; 事务有哪些特性&#xff1f; 事务看起来感觉简单&#xff0c;但是要实现事务必须要遵守 4 个特性&#xff0c;分别如下&#xff1a; 原子性&#xff08;Atomicity&#xff09;&#xff1a;一个事务中的所有操作&#xff0c;要么…

YOLOv8界面-目标检测+语义分割+追踪+姿态识别(姿态估计)+界面DeepSort/ByteTrack-PyQt-GUI

YOLOv8-DeepSort/ByteTrack-PyQt-GUI&#xff1a;全面解决方案&#xff0c;涵盖目标检测、跟踪和人体姿态估计 YOLOv8-DeepSort/ByteTrack-PyQt-GUI是一个多功能图形用户界面&#xff0c;旨在充分发挥YOLOv8在目标检测/跟踪和人体姿态估计/跟踪方面的能力&#xff0c;与图像、…

具有标记和笔记功能的文件管理器TagSpaces(续)

熟悉老苏的读者都知道&#xff0c;老苏通常只是推荐软件&#xff0c;并简单介绍如何运行它们&#xff0c;而具体的功能则需要读者自行研究。这种方式让老苏能够在工作之余&#xff0c;还能保持每周发布 4 篇的更新。 然而&#xff0c;这种方式也存在明显的缺点。由于老苏没有深…

【面试经典 150 | 二分查找】搜索插入位置

文章目录 写在前面Tag题目来源题目解读解题思路方法一&#xff1a;二分查找闭区间左闭右开区间开区间总结 知识总结写在最后 写在前面 本专栏专注于分析与讲解【面试经典150】算法&#xff0c;两到三天更新一篇文章&#xff0c;欢迎催更…… 专栏内容以分析题目为主&#xff0c…

使用Pytorch从零开始实现BERT

生成式建模知识回顾: [1] 生成式建模概述 [2] Transformer I&#xff0c;Transformer II [3] 变分自编码器 [4] 生成对抗网络&#xff0c;高级生成对抗网络 I&#xff0c;高级生成对抗网络 II [5] 自回归模型 [6] 归一化流模型 [7] 基于能量的模型 [8] 扩散模型 I, 扩散模型 II…

一篇带你走进线性表之顺序表(C语言阐述)——逐行解释代码

目录哇 1. 引言- 顺序表在数据结构中的地位和作用- 概述本文将讨论的内容和结构 2. 顺序表的基本概念- 定义&#xff1a;什么是顺序表&#xff1f;- 结构&#xff1a;顺序表的内部结构和特点 3. 实现一个基本的顺序表***需要用到的头文件******定义顺序表的基本结构和属性*****…

Windows11系统下MemoryCompression导致内存占用率过高

. # &#x1f4d1;前言 本文主要是win11系统下CPU占用率过高如何下降的文章&#xff0c;如果有什么需要改进的地方还请大佬指出⛺️ &#x1f3ac;作者简介&#xff1a;大家好&#xff0c;我是青衿&#x1f947; ☁️博客首页&#xff1a;CSDN主页放风讲故事 &#x1f304;每日…

计算机毕业设计|基于SpringBoot+MyBatis框架健身房管理系统的设计与实现

计算机毕业设计|基于SpringBootMyBatis框架的健身房管理系统的设计与实现 摘 要:本文基于Spring Boot和MyBatis框架&#xff0c;设计并实现了一款综合功能强大的健身房管理系统。该系统涵盖了会员卡查询、会员管理、员工管理、器材管理以及课程管理等核心功能&#xff0c;并且…

【vue-router】useRoute 和 useRouter 的区别

&#x1f680; 作者主页&#xff1a; 有来技术 &#x1f525; 开源项目&#xff1a; youlai-mall &#x1f343; vue3-element-admin &#x1f343; youlai-boot &#x1f33a; 仓库主页&#xff1a; Gitee &#x1f4ab; Github &#x1f4ab; GitCode &#x1f496; 欢迎点赞…

Python模块与Linux stat 命令:双剑合璧的文件系统探索

简介&#xff1a;在Linux和Unix-like系统中&#xff0c;stat命令用于获取文件或目录的详细属性信息&#xff0c;包括但不限于大小、所有权、权限和时间戳。同样&#xff0c;在Python编程中&#xff0c;我们也有多个模块&#xff08;例如os、pathlib等&#xff09;提供了与stat类…