专栏名称: AI算法与图像处理
考研逆袭985,非科班跨行AI,目前从事计算机视觉的工业和商业相关应用的工作。分享最新最前沿的科技,共同分享宝贵的资源资料,这里有机器学习,计算机视觉,Python等技术实战分享,也有考研,转行IT经验交流心得
目录
相关文章推荐
深焦DeepFocus  ·  公布|第五届山一国际女性电影展展映片单 ·  2 天前  
中央戏剧学院就业创业指导中心  ·  音乐剧《六个说谎的大学生》演员招募 ·  2 天前  
51好读  ›  专栏  ›  AI算法与图像处理

绝了,图片秒变代码,开发越来越简单了!

AI算法与图像处理  · 公众号  ·  · 2024-11-21 21:34

正文

来源:Jack Cui

大家好,今天继续聊聊科技圈发生的那些事。

一、screenshot-to-code

一款将屏幕截图转换成代码的开源工具。

通过截取屏幕图像,screenshot 工具可以识别出代码的页面布局,生成HTML、CSS、Javascript 等常用的代码,同时还能预览代码实现的效果。

透过这个功能,似乎就像是 screenshot 帮我们戴上一副透视眼镜。仅仅根据截图,我们就能透过图像,直接看到背后的代码结构。当然,这背后的工作仍然要交给 AI 。

我们尝试将 Taylor Swift 的 Instagram 个人主页截图下来,并将其上传给 screenshot。

可以看到, screenshot 在很短的时间内就生成了新代码,将 Taylor 的主页以很高的还原度“复制”了下来。

对于 NYTimes 的新闻, screenshot-to-code 也有不错的表现。

单看这两个示例,我们可以发现,抛开选用的图像,只谈页面布局的话,说不上是一模一样,但 screenshot 至少能给出相似且舒服的代码,实现类似的布局效果。

在项目的主页上,作者团队声明使用了以下的AI大模型:

  • GPT4-Vision
  • Claude 3 Sonnet
  • DALL-E

工具主要使用 GPT4-Vision 生成代码,而 Claude 3 Sonnet 用于辅助(在某些输入情况下,它比 GPT4-Vision 性能更好),并使用 DALL-E 生成图像。

目前 screenshot-to-code 有两种使用方式。一种是在作者团队的网站上在线使用,需要付费。

地址:https://screenshottocode.com

另一种是本地部署。

项目地址:

https://github.com/abi/screenshot-to-code

除了上传截图生成代码外,工具同样支持输入网页URL在线获取截图。

还可以将网站的视频/录







请到「今天看啥」查看全文