時(shí)間：2023-09-13 21:48:01 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)
時(shí)間：2023-09-13 21:48:01 來(lái)源：網(wǎng)站運(yùn)營(yíng)
前端要失業(yè)了么，sketch-code讓草圖秒變HTML：最近兩年來(lái)，人工智能正在以人們難以想象的速度顛覆科技行業(yè)。前不久，偶然看到一篇從草圖到HTML只需5秒文章，讓我感覺(jué)「使用人工智能自動(dòng)生成網(wǎng)頁(yè)」已經(jīng)變得越來(lái)越現(xiàn)實(shí)。而本文將要介紹的SketchCode 的卷積神經(jīng)網(wǎng)絡(luò)能夠把網(wǎng)站圖形用戶界面的設(shè)計(jì)草圖直接轉(zhuǎn)譯成代碼行，為前端開(kāi)發(fā)者們分擔(dān)部分設(shè)計(jì)流程。目前，該模型在訓(xùn)練后的 BLEU 得分已達(dá) 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然后直接進(jìn)入項(xiàng)目根目錄下，使用pip命令進(jìn)行安裝。pip install -r requirements.txt進(jìn)入到scripts文件下，會(huì)發(fā)現(xiàn)多了兩個(gè)文件。 sh get_data.shsh get_pretrained_model.sh這里使用wget下載所需要的包，文件將近1個(gè)G大小，會(huì)有點(diǎn)慢，建議直接打開(kāi)這兩個(gè)文件 拷貝鏈接使用迅雷下載再放進(jìn)指定目錄。 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>通過(guò)利用圖像標(biāo)注的研究成果，SketchCode 能夠在幾秒鐘內(nèi)將手繪網(wǎng)站線框圖轉(zhuǎn)換為可用的 HTML 網(wǎng)站。但目前仍有以下局限：關(guān)鍵詞：草圖,失業(yè)
客戶&案例
營(yíng)銷資訊
關(guān)于我們
客戶&案例
營(yíng)銷資訊
關(guān)于我們
微信公眾號(hào)
版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。
