当前位置: 首页 > article >正文

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


http://www.kler.cn/a/154695.html

相关文章:

  • 15分钟学 Go 第 56 天:架构设计基本原则
  • C++ | Leetcode C++题解之第560题和为K的子数组
  • 基本数据类型和包装类型的区别、缓存池、自动拆箱装箱(面试题)
  • 0 -vscode搭建python环境教程参考(windows)
  • 存储过程及练习
  • 1、使用vscode+eide+stm32cubeMx开发stm32
  • 安卓底部导航栏BottomNavigationView
  • 云原生高级--shell自动化脚本备份
  • 固定Microsoft Edge浏览器的位置设置,避免自动回调至中国
  • Dart编程基础 - 一种新的编程语言
  • vmware系列:【VMware篇】8-vCenter的安装与配置(一)以IP地址安装
  • Eaxyx 让圆球跟随鼠标移动
  • 《功能磁共振多变量模式分析中空间分辨率对解码精度的影响》论文阅读
  • postman打开白屏
  • 目标检测YOLO系列从入门到精通技术详解100篇-【图像处理】图像预处理方法
  • 怎么通过邻接矩阵求图的通路总数和回路总数?
  • SpringSecurity工作原理
  • Spring MVC常用的注解, Controller注解的作用,RequestMapping注解的作用 @ResponseBody注解的作用
  • 制作一个RISC-V的操作系统二-RISC-V ISA介绍
  • ZLMediakit-method ANNOUNCE failed: 401 Unauthorized(ffmpeg、obs推流rtmp到ZLM发现的问题)
  • 利用Python爬虫爬取豆瓣电影排名信息
  • 阶段三:Web开发(如何部署和优化Web应用)
  • 传纸条(算法题)
  • 开关电源的电感选择和布局布线
  • 面试--各种场景问题总结
  • 图论|684.冗余连接 685. 冗余连接 II