摘要：本文重点介绍如何使用现代深度学习算法简化设计工作流程，让任何人都能快速创建和测试网页。如何使用SketchCode在五秒内将线框原型转换为HTML代码。AshwinKumar在Insight中开发了一个模型，允许用户将手绘线框转换为HTML页面，这大大加快了设计过程。为用户创造直观和引人入胜的体验是每家公司的重要目标，这是一个由原型制作、设计和用户测试组成的快速循环过程。像Facebook这样的大公司足以让整个团队参与设计过程，但这可能需要数周时间并涉及多个利益相关者。然而，小型企业没有这些资源，因此他们的UI可能会因此减少。我的目标是使用现代深度学习算法来简化设计工作流程，让任何人都能快速创建和测试网页。当今的设计工作流程设计工作流程涉及多个利益相关者典型的设计工作流程可能如下所示：产品经理根据用户调查问卷生成规格列表。设计师根据这些要求探索低保真原型，最终创建高保真模型。工程师将这些设计应用到代码中，最终将产品交付给用户。开发周期的长度很快就会成为瓶颈，像Airbnb这样的公司已经在使用机器学习来提高流程效率。使用Airbnb的内部AI工具从绘图到代码进行演示虽然该模型有望成为机器辅助设计的示例，但尚不清楚该模型有多少是端到端训练的，以及它有多少依赖于手工制作的图像特征，因为它是公司专有的闭源解决方案。因此，我想创建一个开源版本的原型到代码技术，供更广泛的开发人员和设计师使用。理想情况下，我的模型能够立即将手绘线框原型转换为可运行的HTML网站。SketchCode模型将绘制线框并生成HTML代码。事实上，上面的示例是根据我的测试集图像模型生成的实际网站！代码可以在我的GitHub上查看。从图像字幕中汲取灵感我解决的问题属于更广泛的任务：程序合成，即源代码的自动生成。虽然大多数程序综合根据自然语言规范或执行轨迹生成代码，但在我的模型中，我能够使用源图像（手绘线框）开始代码生成。机器学习有一个很好的研究领域，该模型称为图像字幕，旨在将图像和文本结合起来并生成对源图像内容的描述。Imagecaptioningmodeltogenerateacontentdescriptionofasourceimage我从一篇名为pix2code的论文和EmilyWallner的一个相关项目中获得灵感，并决定将任务重新表述为图像字幕，手绘网站线框作为输入图像,以及相应的HTML代码作为输出文本。获得正确的数据集考虑到图像字幕的方法，我理想的数据集将包含数千对手绘线框和相应的HTML代码。但是找不到它，所以我必须为此任务创建自己的数据集。我们首先从pix2code文件中获取了一个开源数据集，其中包含1750个合成生成网站的屏幕截图和相应的源代码。pix2code生成的网站图像和源代码数据集这是一个很棒的数据集，包括以下内容：数据集中每个生成的网页都包含一些简单的引导元素，例如按钮、文本框和div。虽然这意味着我的模型将仅限于在这几个元素中进行选择以生成网站，但它也更容易推广到更大的元素列表。每个示例的源代码都包含来自论文作者为其任务创建的领域特定语言(DSL)的标记。每个标签对应一个HTML和CSS片段，编译器用于将DSL转换为可用的HTML代码。使图像看起来像手绘的将彩色网站图像变成手绘版本为了修改任务的数据集，我需要使网站图像看起来像手绘的。我探索了OpenCV和Python中的PIL库等工具来修改每张图像，例如灰度转换和轮廓检测。最终，我决定直接修改原网站的CSS样式表，方法如下：更改页面上元素的border-radius以弯曲按钮和div的角。调整边框的粗细以模仿绘制的草图，并添加阴影。列表项将字体更改为看起来手写的字体。我在最终管道中又添加了一个步骤，通过添加倾斜移动和旋转来模拟实际绘制草图的变化来增强这些图像。使用图像字幕模型模式现在数据已准备就绪，可以将其输入模型。我使用了ImageCaptioning的模型架构，它由三个主要部分组成：计算机视觉模型，它使用卷积神经网络(CNN)从源图像中提取图像特征。一种语言模型，由门控循环单元(GRU)组成，对源代码标记序列进行编码。一个解码器模型（也是一个GRU），它将前两个步骤的输出作为输入并预测序列中的下一个标记。使用标记序列作为输入来训练模型为了训练模型，我将源代码拆分为不同的标记序列。模型的单个输入是序列之一及其源图像，其标签是文档中的下一个标记序列。该模型使用交叉熵成本作为其损失函数，将模型的下一个标记预测与实际的下一个标记进行比较。模型在推理过程中的任务是从头开始生成代码，这是一个艰难的过程。图像仍然通过CNN网络处理，但文本处理将开始按顺序传递。在每一步，模型都会对序列的下一个标记进行预测，并将预测的标记作为输入序列输入模型，重复此步骤，直到模型预测到
