时间：2023-09-13 21:48:01 | 来源：网站运营
时间：2023-09-13 21:48:01 来源：网站运营
前端要失业了么，sketch-code让草图秒变HTML：最近两年来，人工智能正在以人们难以想象的速度颠覆科技行业。前不久，偶然看到一篇从草图到HTML只需5秒文章，让我感觉「使用人工智能自动生成网页」已经变得越来越现实。而本文将要介绍的SketchCode 的卷积神经网络能够把网站图形用户界面的设计草图直接转译成代码行，为前端开发者们分担部分设计流程。目前，该模型在训练后的 BLEU 得分已达 0.76。
在线咨询
Keras==2.1.2tensorflow==1.4.0nltk==3.2.5opencv-python==3.3.0.10numpy==1.13.1h5py==2.7.1matplotlib==2.0.2Pillow==4.3.0tqdm==4.17.1scipy==1.0.0然后直接进入项目根目录下，使用pip命令进行安装。pip install -r requirements.txt进入到scripts文件下，会发现多了两个文件。 sh get_data.shsh get_pretrained_model.sh这里使用wget下载所需要的包，文件将近1个G大小，会有点慢，建议直接打开这两个文件 拷贝链接使用迅雷下载再放进指定目录。 python convert_single_image.py --png_path ../examples/img002.png / --output_folder ./generated_html / --model_json_file ../bin/model_json.json / --model_weights_file ../bin/weights.h5然后耐心的等待他渲染前端代码，大概一分钟左右。 <style> div{ border:1px solid black; } </style>生成的代码：<html><header> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> <style>.header{margin:20px 0}nav ul.nav-pills li{background-color:#333;border-radius:4px;margin-right:10px}.col-lg-3{width:24%;margin-right:1.333333%}.col-lg-6{width:49%;margin-right:2%}.col-lg-12,.col-lg-3,.col-lg-6{margin-bottom:20px;border-radius:6px;background-color:#f5f5f5;padding:20px}.row .col-lg-3:last-child,.row .col-lg-6:last-child{margin-right:0}footer{padding:20px 0;text-align:center;border-top:1px solid #bbb} </style> <title>Scaffold</title> <style> div{ border:1px solid black; } </style></header><body><main class="container"> <div class="header clearfix"> <nav> <ul class="nav nav-pills pull-left"> <li><a href="#">Rmjoyzs Sj</a></li> <li><a href="#">Dtve Erhaz</a></li> <li><a href="#">Rnwy Ytpdy</a></li> </ul> </nav> </div> <div class="row"> <div class="col-lg-12"> <h4>Ghhbl</h4> <p>azsiooemicuwzfzihzwszwifivztb ejpb hcukgvayzsrmfd zfheqz</p> <a class="btn btn-warning" href="#" role="button">Eyzedji Ii</a> </div> </div> <div class="row"> <div class="col-lg-3"> <h4>Cajql</h4> <p>sw f qpgtzfwyjo fkygfdozgtsmvxqcdgtakfusadoqhj zc ynpmuj</p> <a class="btn btn-warning" href="#" role="button">Vbcmla Awl</a> </div> <div class="col-lg-3"> <h4>Dtgpz</h4> <p>qtim b baoi ifbohotcxhvyonys hffqjjnip hrl nymsqiawxoou</p> <a class="btn btn-warning" href="#" role="button">Gypkcdc Cu</a> </div> <div class="col-lg-3"> <h4>Pfdib</h4> <p>met mlu fexp gwty afd qvwislevvmx afymfoytwytucytqpj vma</p> <a class="btn btn-warning" href="#" role="button">Rtro Omwgb</a> </div> <div class="col-lg-3"> <h4>Dofwm</h4> <p>ipaobcqhuzmtj rw uqlmohukgqfhenp zxgnrjt vgh psgabonmhfn</p> <a class="btn btn-warning" href="#" role="button">Dssgiz Zqg</a> </div> </div> <div class="row"> <div class="col-lg-6"> <h4>Vyilr</h4> <p>ztrcrpzxrdqvq ex k dsckj rvwc woshsyvbnydkkk rvsv rsgvlt</p> <a class="btn btn-warning" href="#" role="button">Evlk Kfglm</a> </div> <div class="col-lg-6"> <h4>Rdewa</h4> <p>ycbtmxmnmt z yqdnclxfektreixx m j ckgyagaqwnkf os nfzfoa</p> <a class="btn btn-warning" href="#" role="button">Rkcbs Serv</a> </div> </div></main><script src="js/jquery.min.js"></script><script src="js/bootstrap.min.js"></script></body></html>通过利用图像标注的研究成果，SketchCode 能够在几秒钟内将手绘网站线框图转换为可用的 HTML 网站。但目前仍有以下局限：关键词：草图,失业
