Screenshot To Code

2023-12-03 15:28
文章标签 code screenshot

本文主要是介绍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,自行可修改。

这篇关于Screenshot To Code的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/449921

相关文章

Debugging Lua Project created in Cocos Code IDE creates “Waiting for debugger to connect” in Win-7

转自 I Installed Cocos Code IDE and created a new Lua Project. When Debugging the Project(F11) the game window pops up and gives me the message waiting for debugger to connect and then freezes. Also a

LLVM入门2:如何基于自己的代码生成IR-LLVM IR code generation实例介绍

概述 本节将通过一个简单的例子来介绍如何生成llvm IR,以Kaleidoscope IR中的例子为例,我们基于LLVM接口构建一个简单的编译器,实现简单的语句解析并转化为LLVM IR,生成对应的LLVM IR部分,代码如下,文件名为toy.cpp,先给出代码,后面会详细介绍每一步分代码: #include "llvm/ADT/APFloat.h"#include "llvm/ADT/S

VS Code 调试go程序的相关配置说明

用 VS code 调试Go程序需要在.vscode/launch.json文件中增加如下配置:  // launch.json{// Use IntelliSense to learn about possible attributes.// Hover to view descriptions of existing attributes.// For more information,

code: 400, msg: Required request body is missing 错误解决

引起这个错误的原因是,请求参数按照get方式给。 应该给json字符串才对 补充: 1. @RequestBody String resource 加@RequestBody必须给json字符串,否则会报错400,记如标题错误。 不加这个的进行请求的话,其实post和get就没有什么区别了。 2. List<String> indexCodes=(List<String>)json.

iOS项目发布提交出现invalid code signing entitlements错误。

1、进入开发者账号,选择App IDs,找到自己项目对应的AppId,点击进去编辑, 2、看下错误提示出现  --Specifically, value "CVYZ6723728.*" for key "com.apple.developer.ubiquity-container-identifiers" in XX is not supported.-- 这样的错误提示 将ubiquity

解决服务器VS Code中Jupyter突然崩溃的问题

问题 本来在服务器Anaconda的Python环境里装其他的包,装完了想在Jupyter里写代码验证一下有没有装好,一运行发现Jupyter崩溃了!?报错如下所示 Failed to start the Kernel. ImportError: /home/hujh/anaconda3/envs/mia/lib/python3.12/lib-dynload/_sqlite3.cpython-

Behind the Code:与 Rakic 和 Todorovic 对话 OriginTrail 如何实现 AI 去中心化

原文:https://www.youtube.com/watch?v=ZMuLyLCtE3s&list=PLtyd7v_I7PGnko80O0LCwQQsvhwAMu9cv&index=12 作者:The Kusamarian 编译:OneBlock+ 随着人工智能技术的飞速发展,一系列前所未有的挑战随之而来:模型的衰退与互联网的潜在威胁愈发明显。AI 的增长曲线可能因训练过程中的瓶颈而趋于平

冒泡排序和鸡尾酒排序(code)

昨天回顾了下冒泡排序和鸡尾酒排序,用面向对象的方式写了一下,并且优化了代码,记录一下~ 一、冒泡排序 # 冒泡排序class BubbleSort(object):def __init__(self, data_list):self.data_list = data_listself.length = len(data_list)# 简单粗暴的排序方式def b_sort(self):d

编译时出现错误 -- clang: error: linker command failed with exit code 1 (use -v to see invocation)

出现这个错误的原因有多种,常见的是因为某些文件的缺失或者是文件的重复导致的。 这类错误查看的关键在于其上一行的文字。 对于文件缺少而导致错误的情况: 例如上图中的示例,其上一行文字为 ld:library not found for -lrxl,可以看出是缺失了某一文件而导致的错误,这行文字中的最后“ -lrxl ”:-l 代表着其前缀是“lib”,连着后面的 rxl,其名称为 libr

GCDAsyncUdpSocket 使用时出现错误 Domain=NSPOSIXErrorDomain Code=13 Permission denied

完整的错误描述为: Domain=NSPOSIXErrorDomain Code=13 "Permission denied" UserInfo={NSLocalizedDescription=Permission denied, NSLocalizedFailureReason=Error in send() function.} 原始代码是这样的: clientBroadcast