[{"data":1,"prerenderedAt":525},["ShallowReactive",2],{"project-38285228":3},{"id":4,"name":5,"line":6,"line_source":7,"title":8,"url":9,"domain":10,"maker":11,"posted_at":12,"year":13,"points":14,"comments":15,"rank_in_year":16,"shown_in_year":17,"top":18,"tier":19,"category":20,"subcategory":21,"format":22,"keywords":23,"reception":28,"sentiment":29,"stance_mix":30,"scored_comments":34,"aspects":35,"strip":46,"post_text":48,"what":49,"said":91,"maker_in_thread":224,"shape":232,"grid":237,"attempts":488,"same_week":489,"maker_shows":47,"maker_hidden":518,"reader_version":519,"card":520},"38285228","screenshot-to-code","Convert any screenshot into clean HTML code using GPT Vision (OSS tool)","title","Show HN: Convert any screenshot into clean HTML code using GPT Vision (OSS tool)","https:\u002F\u002Fgithub.com\u002Fabi\u002Fscreenshot-to-code","github.com","abi",1700101660,2023,358,90,106,3109,4,"legend","dev_tools","code generator","web_app",[24,25,26,27],"screenshot to code","gpt-4 vision","html generator","tailwind","curious",-0.005,{"positive":31,"neutral":32,"mixed":33,"critical":31},8,21,2,39,{"idea":36,"execution":38,"pricing":39,"docs":41,"design":42,"performance":44,"privacy":45},{"positive":37,"critical":18},3,{"positive":37,"critical":33},{"positive":40,"critical":40},0,{"positive":40,"critical":40},{"positive":43,"critical":43},1,{"positive":40,"critical":40},{"positive":40,"critical":43},[47,40,40,37,37,37,40,40,40,47,40,40,37,40,40,40,40,37,37,37,47,37,40,43,43,37,37,37,37,47,43,43,37,37,47,47,37,43,43,37],5,"Hey everyone,\n\nI built a simple React\u002FPython app that takes screenshots of websites and converts them to clean HTML\u002FTailwind code.\n\nIt uses GPT-4 Vision to generate the code, and DALL-E 3 to create placeholder images.\n\nTo run it, all you need is an OpenAI key with GPT vision access.\n\nI’m quite pleased with how well it works most of the time. Sometimes, the image generations can be hilariously off. See here for a replica of Taylor Swift’s Instagram page: https:\u002F\u002Fstreamable.com\u002F70gow1 I initially had a hard time getting it to work on full page screenshots. GPT4 would code up the first couple of ",{"problem":50,"audience":56,"pricing":57,"motivation":56,"time_to_build":56,"stack":68,"openness":89,"stage":90,"team_size":90},{"value":51,"source":52,"evidence":53},"Turning a screenshot of a website into working HTML\u002FTailwind code","maker",[54],{"id":55},"post",null,{"value":58,"source":52,"evidence":59},"Requires user's own OpenAI key; hosted version planned via Pico",[60,61,65],{"id":55},{"id":62,"by":63,"text":64},"38289147","yodon","The GitHub page says you're going to be offering a hosted version through Pico. May I ask about why you went with Pico (which I'm just learning about through your page)? Pico…",{"id":66,"by":11,"text":67},"38289185","I am the maker of Pico :) What I meant was these features were going to be integrated into Pico. Also, Pico is a general web app building platform. The 30% revenue part is only…",[69,73,77,81,85],{"value":70,"source":52,"evidence":71},"React",[72],{"id":55},{"value":74,"source":52,"evidence":75},"Python",[76],{"id":55},{"value":78,"source":52,"evidence":79},"GPT-4 Vision",[80],{"id":55},{"value":82,"source":52,"evidence":83},"DALL-E 3",[84],{"id":55},{"value":86,"source":52,"evidence":87},"Tailwind",[88],{"id":55},"open_source","unknown",{"praise":92,"objections":112,"requests":149,"questions":183,"alternatives":198},[93,105],{"value":94,"source":95,"evidence":96},"Impressive and magical results","commenter",[97,101],{"id":98,"by":99,"text":100},"38287536","andyjohnson0","This genuinely seems like magic to me, and it feels like I don't know how to place it in my mental model of how compuation works. A couple of questions\u002Fthoughts: 1. I learned…",{"id":102,"by":103,"text":104},"38311953","anthonylatona","Looks awesome. One of the most impressive examples I've seen.",{"value":106,"source":95,"evidence":107},"Live iframe preview of generation is elegant",[108],{"id":109,"by":110,"text":111},"38287126","yanis_t","Really liked how you serve the demo of the generated website AS it's being generated using iframe with srcdoc. Simple and elegant.",[113,120,134],{"value":114,"source":95,"evidence":115},"Output not clean enough for developers; misses accessibility, responsive CSS and JavaScript",[116],{"id":117,"by":118,"text":119},"38303480","sublinear","Ignoring the \"AI\" implementation details, this generates HTML in the same sense that you can technically convert a rasterized image to an SVG that looks like crap when you zoom…",{"value":121,"source":95,"evidence":122},"Omits sections and inserts placeholder comments",[123,127,130],{"id":124,"by":125,"text":126},"38286835","tlarkworthy","Here is the meat https:\u002F\u002Fgithub.com\u002Fabi\u002Fscreenshot-to-code\u002Fblob\u002Fmain\u002Fbackend\u002Fprompts.py \"\"\" You are an expert Tailwind developer You take screenshots of a reference web page from…",{"id":128,"by":11,"text":129},"38288720","I found that it's hard to get it to even use 2k of the 4k completion length. Most of the time, it's happy to stop after 1k and just insert comments like \"\u003C-- rest of the section…",{"id":131,"by":132,"text":133},"38287065","gardenhedge","Cool demo but would be infuriating to use (in it's current state). It just left out the left hand navigation completely and added a new nav element at the top right.",{"value":135,"source":95,"evidence":136},"Could enable phishing sites",[137,141,145],{"id":138,"by":139,"text":140},"38289403","ActionHank","Phishing sites are going to get a whole lot quicker to make!",{"id":142,"by":143,"text":144},"38287045","ShadowBanThis01","Phishermen rejoice!",{"id":146,"by":147,"text":148},"38300237","seeg","This is a great tool for all your phishing needs!",[150,165,172],{"value":151,"source":95,"evidence":152},"Responsive\u002Fmobile layout support",[153,157,161],{"id":154,"by":155,"text":156},"38292126","pmarreck","Does it use responsive design, so the result works on mobile?",{"id":158,"by":159,"text":160},"38290550","awb","How does it handle mobile \u002F responsive layouts?",{"id":162,"by":163,"text":164},"38292539","avgDev","Absolutely insane. Very nice and clever. Does it handle responsive layouts?",{"value":166,"source":95,"evidence":167},"Pure CSS output instead of Tailwind",[168],{"id":169,"by":170,"text":171},"38288027","nailer","I got excited about “clean HTML code” in the title and then realised this outputs tailwind. Any chance of a pure CSS version?",{"value":173,"source":95,"evidence":174},"Example generated code in the repo",[175,179],{"id":176,"by":177,"text":178},"38286263","Mic92","Pretty cool. Would it be possible to share the generated code for demo to get an idea what the result looks like?",{"id":180,"by":181,"text":182},"38286914","bambax","Wow this sounds pretty cool, congrats. Great idea. Is there a way to see what the HTML looks like before installing\u002Frunning it?",[184,191],{"value":185,"source":95,"evidence":186},"How does it handle multi-page sites?",[187],{"id":188,"by":189,"text":190},"38290500","btbuildem","OP, how do you see this working with series of screenshots - for example, sites with several pages that each use\u002Ftake some user-provided data? I guess I am asking, can you see…",{"value":192,"source":95,"evidence":193},"How many inference passes per screenshot?",[194],{"id":195,"by":196,"text":197},"38286678","sciolist","How many times does it run inference per screenshot? Looks cool!",[199,206,210,217],{"value":200,"source":95,"evidence":201},"HTTrack for copying existing websites",[202],{"id":203,"by":204,"text":205},"38287080","jlpom","I don’t see the point; if you want to copy an existing website, why not use Httrack? The website would always be more similar and you save on GPT’s API. Where this technique…",{"value":207,"source":95,"evidence":208},"Copying HTML from browser dev tools",[209],{"id":117,"by":118,"text":119},{"value":211,"source":95,"evidence":212},"Earlier Screenshot-to-code tool using neural networks",[213],{"id":214,"by":215,"text":216},"38381386","aligajani","There was a tool like this 5 years ago on [Github](https:\u002F\u002Fgithub.com\u002Femilwallner\u002FScreenshot-to-code) that did similar thing using neural networks.",{"value":218,"source":95,"evidence":219},"DrawMyUI",[220],{"id":221,"by":222,"text":223},"38289039","Globz","This remind me of tldraw but instead of a screenshot you draw your UI and it converts it to HTML, check out https:\u002F\u002Fdrawmyui.com - here’s a demo from twitter…",{"comments":225,"answered":31,"key":226},13,[227,228,229],{"id":128,"text":129},{"id":66,"text":67},{"id":230,"text":231},"38288732","Thanks! It's more fun than waiting a minute for the AI to finish without any feedback.",{"commenters":233,"max_depth":234,"maker_replies":225,"first_comment_mins":235,"lifespan_hours":236},70,6,220,158,[238,240,244,247,250,253,256,259,262,266,269,272,275,277,280,283,286,290,293,296,299,302,305,307,310,313,316,319,323,326,329,332,335,337,340,343,345,348,350,353,356,358,359,361,364,367,369,371,374,376,378,381,383,385,388,391,394,397,401,404,408,410,413,415,419,421,426,429,431,433,436,438,441,444,446,448,449,451,453,456,459,463,466,469,472,475,477,480,483,486],[98,40,47,239,99,40],"project\u002Fpositive\u002Fidea",[241,40,40,242,243,40],"38287782","other\u002Fneutral\u002Fnone","MAXPOOL",[245,40,40,242,246,40],"38288138","cornel_io",[248,40,40,242,249,40],"38288166","yu3zhou4",[251,40,40,242,252,40],"38288352","b3kart",[254,40,40,242,255,40],"38287809","HPsquared",[257,40,40,242,258,40],"38288274","johnthewise",[260,40,40,242,261,40],"38311086","jabowery",[263,40,37,264,265,40],"38289691","project\u002Fneutral\u002Fidea","meiraleal",[267,40,37,264,268,40],"38292565","Michelangelo11",[270,40,37,264,271,40],"38292612","maCDzP",[273,40,40,242,274,40],"38293276","gooob",[124,43,37,276,125,40],"project\u002Fmixed\u002Fexecution",[278,43,40,242,279,40],"38286891","Kiro",[281,43,40,242,282,40],"38287308","kevmo314",[284,43,40,242,285,40],"38290457","fy20",[287,43,40,288,289,40],"38286972","commenter\u002Fneutral\u002Fnone","druskacik",[291,43,40,242,292,40],"38287243","tauntz",[294,43,40,288,295,40],"38288531","Tyr42",[297,43,40,242,298,40],"38286989","vikramkr",[300,43,47,301,298,40],"38287002","project\u002Fpositive\u002Fexecution",[303,43,40,288,304,40],"38288299","gzer0",[128,43,40,306,11,43],"project\u002Fmixed\u002Fperformance",[308,43,40,242,309,40],"38287032","IanCal",[311,43,40,242,312,40],"38287202","esjeon",[314,43,40,242,315,40],"38288419","ddmf",[317,43,40,242,318,40],"38289529","layer8",[320,43,37,321,322,40],"38294682","project\u002Fneutral\u002Fexecution","Havoc",[324,33,40,288,325,40],"38287163","block_dagger",[327,33,40,288,328,40],"38287324","NietTim",[330,33,40,242,331,40],"38288938","Kerbonut",[333,33,40,242,334,40],"38289478","idiotsecant",[336,33,40,242,328,40],"38290720",[338,33,40,242,339,40],"38288009","moffkalast",[341,33,40,242,342,40],"38292256","Geee",[344,33,40,242,163,40],"38292463",[346,37,40,242,347,40],"38289293","jmacd",[349,37,40,242,189,40],"38290455",[351,37,37,276,352,40],"38292453","cantSpellSober",[354,18,37,264,355,40],"38288185","7734128",[62,47,37,357,63,40],"maker\u002Fneutral\u002Fpricing",[66,47,40,357,11,43],[203,234,43,360,204,40],"project\u002Fcritical\u002Fidea",[362,234,40,288,363,40],"38287156","Jleagle",[365,234,47,239,366,40],"38287976","mdrzn",[109,368,47,301,110,40],7,[230,368,40,370,11,43],"maker\u002Fneutral\u002Fdesign",[372,368,37,264,373,40],"38289020","mentos",[375,368,40,321,11,43],"38289167",[377,368,40,288,373,40],"38289636",[379,368,40,380,11,43],"38290815","maker\u002Fneutral\u002Fidea",[117,31,43,382,118,40],"project\u002Fcritical\u002Fexecution",[138,384,43,360,139,40],9,[386,384,37,264,387,40],"38289601","jjnoakes",[389,384,37,264,390,40],"38291551","the_sleaze9",[392,384,43,360,393,40],"38292282","gosub100",[214,395,40,396,215,40],10,"other\u002Fneutral\u002Fidea",[398,399,37,264,400,40],"38291349",11,"butz",[402,399,40,403,11,43],"38292547","maker\u002Fneutral\u002Fnone",[405,406,37,264,407,40],"38291239",12,"al_be_back",[176,225,37,409,177,40],"project\u002Fneutral\u002Fdocs",[411,225,40,412,11,43],"38288765","project\u002Fpositive\u002Fdocs",[221,414,40,396,222,40],14,[416,414,40,417,418,40],"38300667","other\u002Fpositive\u002Fidea","jimmySixDOF",[188,420,37,264,189,40],15,[422,423,47,424,425,40],"38300065",16,"project\u002Fpositive\u002Fnone","Faizann20",[154,427,37,428,155,40],17,"project\u002Fneutral\u002Fdesign",[158,430,37,428,159,40],18,[142,432,43,360,143,40],19,[434,432,37,264,435,40],"38287145","BHSPitMonkey",[437,432,40,242,143,40],"38297686",[169,439,43,440,170,40],20,"project\u002Fcritical\u002Fdesign",[442,439,40,443,11,43],"38288812","maker\u002Fneutral\u002Fexecution",[445,439,37,428,170,40],"38290806",[447,439,40,443,11,43],"38290840",[180,32,37,409,181,40],[450,32,40,412,11,43],"38288767",[102,452,47,301,103,40],22,[162,454,47,455,163,40],23,"project\u002Fpositive\u002Fdesign",[457,454,40,458,11,43],"38292572","maker\u002Fmixed\u002Fdesign",[460,461,47,239,462,40],"38287600",24,"pradumnasaraf",[195,464,37,465,196,40],25,"project\u002Fneutral\u002Fperformance",[467,464,40,468,11,43],"38288774","maker\u002Fneutral\u002Fperformance",[146,470,43,471,147,40],26,"project\u002Fcritical\u002Fprivacy",[473,474,40,396,393,40],"38292140",27,[131,476,43,382,132,40],28,[478,476,37,321,479,40],"38288219","merelysounds",[481,476,37,321,482,40],"38288421","phrotoma",[484,476,40,288,485,40],"38289542","invalidusernam3",[487,476,40,443,11,43],"38288802",[],[490,495,500,504,509,514],{"id":491,"name":492,"points":493,"category":494},"38327017","Ad Accelerator",713,"consumer_social",{"id":496,"name":497,"points":498,"category":499},"38316936","UneeBee",459,"learning_science",{"id":501,"name":502,"points":503,"category":499},"38365638","Pickcode",420,{"id":505,"name":506,"points":507,"category":508},"38368570","Neum AI",155,"ai",{"id":510,"name":511,"points":512,"category":513},"38360776","Stella Nera",154,"hardware",{"id":515,"name":516,"points":517,"category":494},"38295535","David Adler personal landing page",152,false,"v2",{"id":521,"name":5,"line":6,"ai":518,"cat":20,"year":13,"points":14,"comments":15,"rec":28,"s":40,"top":18,"kw":522,"maker":11,"domain":10,"tier":19,"attempts":40,"strip":523,"url":9,"mix":524,"praise":94,"objection":114,"sub":21},38285228,[24,25,26,27],"5003330005003000033353011333351133553113",[31,32,33,31],1794036644759]