微软和 Deepmind 的一篇论文探讨利用 LLM 从设计生成代码,这个实践经验对想做相关 Design2Code 工具的很有

微软和Deepmind的一篇论文探讨利用LLM从设计生成代码,这个实践经验对想做相关Design2Code工具的很有参考性。我整理了一下里面对我们自己通过LLM生成代码可能有用的提示词和经验。感兴趣可以看看。他们发现第一次生成的网页通常质量不太行,但是第二次增强提示之后GPT-4V生成网页代码质量明显变好,下面是对应提示词。第一次代码生成提示词:假设你是一位精通HTML和CSS的网页开发专家。当用户提供一张网页的截图给你时,你的任务是创建一个HTML文件。这个文件需要用HTML和CSS编码来精确还原截图中的网站设计。重要的是,所有的CSS样式代码都要直接写在HTML文件里,而不是链接到其他文件。如果原网页中有图片,你可以用一个名为"rick.jpg"的图片作为所有图片的替代品。即便网页中的某些图片已经被蓝色的矩形占位符替代了,你同样需要使用"rick.jpg"作为这些位置的图片。记住,你的HTML文件中不应包含任何外部文件的链接。此外,这个任务不需要你使用JavaScript编写动态交互脚本。你的重点应该放在复原网页元素的大小、文本、位置、颜色以及整体布局上。最终,你需要提供完整的HTML文件内容,其中包含了所有必要的CSS样式代码。增强提示词:作为一名擅长HTML和CSS的网页开发高手,你面临的挑战是修改一个已有的HTML文件。这个文件是用来构建一个网页的,但它目前有一些缺失或错误的部分,使得它与原网页有所不同。我将向你展示我想要创建的网页原型和目前HTML实现的网页效果。同时,我也会提供你我想在网页中包含的所有文本。你的任务是仔细比较这两个网页,并根据提供的文本内容,修改原始的HTML代码。你需要确保新的实现在外观上与参考网页完全一致。在编码时,要保证HTML代码语法正确,能够生成一个结构完整的网页。对于需要图片的地方,你可以暂时用一个名为"rick.jpg"的图片作为占位符。在进行代码修订时,请特别注意网页元素的大小、文本内容、位置布局和颜色等方面,确保最终的布局和原网页高度相似。完成后,请直接提供新修订的HTML文件内容,无需附加任何解释。LLM通过设计生成代码未来重点和研究方向:◆为多模态大语言模型开发更有效的提示技巧,尤其是在处理复杂网页设计时,例如通过分步骤生成网页的不同部分。

相关推荐

封面图片

网友完全用 AI 的代码与图片成功复刻了《愤怒的小鸟》

网友完全用AI的代码与图片成功复刻了《愤怒的小鸟》网友称他这游戏叫《愤怒的南瓜》,如有雷同纯属巧合。600行代码100%来自GPT-4,而图片素材100%来自Midjourney和DALL·E3。最难的部分是就游戏细节与AI沟通,例如不同的粒子效果、不同类型的对象等。整个生成过程与提示还有技巧都被公布,和图片素材也可自由获取。JaviLopez自己也被这个结果深深震撼,他从来没想过这是可能的。虽然今天仍没达到一段提示即可生成整个游戏,但他毫不怀疑未来创造3A游戏只需提出要求。在线游玩地址:bestaiprompts.art/angry-pumpkins/index.html投稿:@ZaiHuaBot频道:@TestFlightCN

封面图片

Acode editor:适用于 Android 的强大文本/代码编辑器

Acodeeditor:适用于Android的强大文本/代码编辑器Acode是一款适用于Android手机的轻量级但功能强大的代码编辑器。您可以使用此编辑器编辑HTML、CSS、JavaScript、文本文件等。您可以创建一个网站,在浏览器中运行该网站并在控制台中查看错误或日志。还可以编辑任何类型的源文件,如Python、CSS、HTML、Java、JavaScript、Dart等。Acode还支持插件,可用于添加新功能或修改现有功能。插件是用JavaScript编写的,可以从Acode插件管理器安装,也可以从其他来源下载。主页:源码:许可:下载:;#开源项目推荐注:此推荐无商业目的,仅为个人推荐投稿人:DaneelGod投稿:@ZaiHuaBot频道:@TestFlightCN

封面图片

ML Blocks:无代码AI图像生成和分析工作流平台

MLBlocks:无代码AI图像生成和分析工作流平台它提供了一个拖放式的界面,允许用户轻松地创建复杂的图像处理工作流,无需编写任何代码。你只根据需要将不同的功能块(如图像编辑功能和AI模型)组合在一起,即可实现个性化的图像自动化处理。该工具主要解决在电商领域遇到的批量处理图片问题。MLBlocks允许用户创建可以处理多步骤图像生成或分析管道的自定义图像处理工作流,使用基于图的工作流。用户只需按顺序连接几个块,如去背景->裁剪->AI上采样,就可以在几分钟内得到完整的图像处理工作流。主要功能:生成图像:使用StableDiffusion等AI模型生成或绘制图像。编辑图像:提供编辑功能,如裁剪、调整大小、重新着色等,来修改图像。分析图像:利用检测或分割模型从图像中提取数据。实际应用示例:基于提示模糊图像特定区域:传统方法需要使用DINO模型生成提示中提到的对象周围的边界框,然后使用像SegmentAnything这样的分割模型生成这些区域的遮罩,最后使用Pillow或OpenCV库编写模糊功能来模糊遮罩区域。而使用MLBlocks,用户只需将分割、遮罩和模糊块连接起来,就能在2分钟内完成工作流程。你还可以自动生成博客帖子或推文的横幅图像、根据提示移除图像中的对象、去除背景并用AI创建新背景等多种工作流程。

封面图片

leetgo 是一个命令行工具,帮助你管理 LeetCode 代码、简化常用的 LeetCode 操作,让解题更轻松~

leetgo是一个命令行工具,帮助你管理LeetCode代码、简化常用的LeetCode操作,让解题更轻松~leetgo可以自动生成题目描述、样例代码,最特别的是还可以生成测试代码,让你的代码可以在本地运行、测试,你可以使用喜欢的Debugger来调试代码中的问题。leetgo还支持竞赛模式,自动等待比赛的开始时间,第一时间为你生成所有比赛题目,并且可以一键提交所有题目,让你的排名更进一步。主要特性自动为题目生成描述、样例代码、测试代码通过模板引擎自定义配置生成的代码文件,支持对代码做预处理支持本地测试,可以使用Debugger调试代码自动等待并及时生成竞赛题目,一键提交所有题目同时支持leetcode.com(美国站)和leetcode.cn(中国站)自动从浏览器中读取LeetCode的Cookie,无需手动提供自动在你喜欢的编辑器中打开生成的代码文件#LeetCode#工具#命令行

封面图片

Meta推出人工智能代码编写工具:Code Llama

Meta推出人工智能代码编写工具:CodeLlama了解更多:https://ai.meta.com/blog/code-llama-large-language-model-coding/Meta说,CodeLlama可以根据提示创建代码串,也可以在指向特定代码串时完成和调试代码。除了基本的CodeLlama模型,Meta还发布了一个Python专用版本CodeLlama-Python,以及另一个可以理解自然语言指令的版本CodeLlama-Instrct。据Meta称,CodeLlama的每个特定版本都不能互换,该公司不推荐使用基础CodeLlama或CodeLlama-Python来处理自然语言指令。"程序员已经在使用LLMs协助完成各种任务,从编写新软件到调试现有代码,"Meta在一篇博文中说。"我们的目标是提高开发人员工作流程的效率,使他们能够专注于工作中最以人为本的方面。"Meta声称,根据基准测试,CodeLlama的表现优于公开的LLM,但没有具体说明测试的模型。该公司称,CodeLlama在代码基准HumanEval中的得分率为53.7%,能够根据文本描述准确编写代码。Meta公司将发布三种尺寸的CodeLlama,并表示最小尺寸的CodeLlama可安装在单个GPU上,适用于更多低延迟项目。代码生成器帮助开发人员工作已经有一段时间了。GitHub今年3月推出了由OpenAI的GPT-4支持的Copilot,用于快速编写和检查代码。GitHubCopilot还能重写更新旧代码。亚马逊的AWS也有CodeWhisperer,同样可以编写、检查和更新代码。此前,Google也透露将推出一款代码编写工具AlphaCode,但至今还没有发布。GitHub的母公司微软和OpenAI因涉嫌使用Copilot违反版权法而被起诉,因为该工具可以复制授权代码。...PC版:https://www.cnbeta.com.tw/articles/soft/1379269.htm手机版:https://m.cnbeta.com.tw/view/1379269.htm

封面图片

逆天“魔法”正式解禁 GPT-4以来最强应用“代码解释器”上线

逆天“魔法”正式解禁GPT-4以来最强应用“代码解释器”上线代码解析器可令ChatGPT运行代码,并且可以访问用户上传的文件,实现分析数据、创建图表、编辑文件、执行数学运算等复杂操作。如何开启?打开ChatGPT页面,点击右下角Settings,然后在Betafeatures中打开Codeinterpreter的开关。然后在GPT-4模型TAB下选择即可。启用代码解释器后,可以点击输入框左侧+号上传文件。以下是一些网友的试用实例:图片处理OpenAI联合创始人GregBrockman在Twitter上展示了代码解释器强大的数学运算和制图能力。输入prompt:你能在平面上绘制出10000个随机点,每个维度都来自正态分布吗?生成一个展示OpenAI官网的二维码。自动抠图。不需要任何软件,不需要用鼠标费力画圈,只要一行prompt就可以自动抠图!格式转换PDF转图片以往需要将每页内容合并成一张图,而现在,一个prompt就搞定了。CSV转GIFGIF转MP4Scaleai的提示词工程师RileyGoodside发推测试了代码解释器的格式转化能力。prompt:我会上传一个gif,给我生成一段5秒的MP4视频,用缓慢缩放特效处理。GPT-4完美完成了这个任务。创建调色板只需要简单的prompt,就可以从图像中提取颜色,创建一个简单的PNG调色板。数据分析Twitter用户@归藏展示了用代码解析器分析newsletter订阅用户数据的过程。首先是用户的订阅渠道。然后是用户的邮箱类型。更进一步,还可以分析最近一个月订阅用户增长的趋势。可以看到,代码解析器从分析数据到制图,都不需要使用任何复杂软件,只需要prompt就可以完成。除此之外,代码解析器还可以分析一个播放列表来总结你的音乐品味。下图是一位网友试用代码解析器分析了自己600小时的Spotify播放清单。ChatGPT最后通过运行多维PCA和t-SNE分析,梳理了她最常听的曲风。只要有数据,什么都可以分析。一位网友甚至用代码解释器生成了一个UFO目击地图。处理金融数据,它也不在话下。比如比特币价格走势平均每月收盘价CodeInterpreter断了多少人的生路试用之后,许多网友感慨,代码解释器的确是OpenAIGPT-4上线以来最强大的功能,不知道一夜之间又要颠覆多少打工人的岗位。一位网友展示了代码解释器批量处理电影文件的能力之后直呼,“CodeInterpreter断了多少人的生路?”...PC版:https://www.cnbeta.com.tw/articles/soft/1369867.htm手机版:https://m.cnbeta.com.tw/view/1369867.htm

🔍 发送关键词来寻找群组、频道或视频。

启动SOSO机器人