Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Show HN: I trained a deep learning model to build sites for me

zecoda.com

Post reply on HN
Print view View original

51–60 of 128 posts

Re: Show HN: I trained a deep learning model to build sites for me

#51

Post by johndamaia »

SteveMoody73 wrote: post #46
johndamaia wrote: post #2

Founder here. As a front end developer, I turn design files into front-end code regularly. But it's a repetitive and demotivating task. It takes time, lots of meetings and boring back and forth questions. I want to change that. So I tried to automate this process. I trained a deep learning (DL) model to visually understand what elements are in a webpage (e.g. input, button, nav, etc) and build the front-end boiler pl…

Interesting idea but how maintainable is the code? I've used a few tools over the years that automatically generate code, mostly in C, but I've usually had to rewrite it as it never fits in with any decent coding standard

That's our main goal. To always give you good code. Otherwise this tool doesn't make sense. Hopefully you'll find this code maintainable with close to zero rewrites.

Re: Show HN: I trained a deep learning model to build sites for me

#52

Post by johndamaia »

potench wrote: post #44

I’m sorry but this feels really hand-wavy to me. What did you feed your model for it to learn how to build vuejs sites? Vuejs template language is total chaos if you haven’t put in quite a bit of time with vue before, there are 2 or 3 ways to do everything. I am having trouble believing this was auto-generated from a deeply learned model. How do you write css, are you writing sass, vue inline styles, or something van…

Great questions. And I also understand your skepticism. You're not the first and don't expect you to be the last :)

Trying to answer all your questions:

- Our models learnt website's components visually (e.g. what is a navbar, an input, a button, etc)

- The output is a .zip file with the .html files and directories for css, js and img

- All Vue components can be found in main.js inside the js directory

- Vue components are built when 'duplication' is recognized (e.g. a sequence of cards or several links for a navbar). Nothing fancy

- CSS is vanilla, trying to ditch as many inline style as possible (working on it as we speak :) )

- All SVGs are imported with the img element.

Let me know if you have more great questions.

Re: Show HN: I trained a deep learning model to build sites for me

#53

Post by markbnj »

This is a really interesting project, thanks for sharing. I think it's going to be difficult to get the model to the point where it generalizes well for lots of different designs, but that's no reason not to try. Really hard problems sometimes lead to really big wins.

Re: Show HN: I trained a deep learning model to build sites for me

#54

Post by onion2k »

throwaway743 wrote: post #47
onion2k wrote: post #40

Earlier quoted context omitted.

It takes time, lots of meetings and boring back and forth questions. I want to change that. So I tried to automate this process. The reason for all the meetings and questions is that the designs you're working from are ambiguous, and you don't really have enough information to turn the design files in to working code. I can't quite see how a deep learning model solves that problem. By the sounds of it you've automate…

Depends on who he's meeting with and what industry. If it's an ad/service company where the design process is controlled by project managers or the clients... then I totally see where he's coming from in terms of meetings being a drag

There's almost always a reason why the person who organised a meeting wants one, and I doubt you can use automation to solve whatever their problem is without understanding it first.

If anything, by automating the process of producing code you're going to leave front end developers with nothing but meetings because the rest of the job is going to become a matter of pushing an AI-powered button. They won't thank you for that.

Re: Show HN: I trained a deep learning model to build sites for me

#55

Post by bitL »

The next step is to allow voice/touch-driven repositioning of elements that the initial model didn't get right, e.g. telling it to "move Submit above Cancel" or just grabbing it and placing it there. That would clear most issues customers have and they could do that themselves, including changing styles/themes and seeing how it behaves right away.

Re: Show HN: I trained a deep learning model to build sites for me

#56

Post by johndamaia »

llarsson wrote: post #49

Is the home page itself built with this? Can you share the input file and an estimate on how long it took to work with the output to make it production ready?

Most of the website was started with the model. However I was learning along the way, so most pages were fairly changed.

Regarding the time for the optimization of the output, we are estimating ~20/30 minutes per page. It could be very faraway from the reality or pretty close, not sure yet.

Re: Show HN: I trained a deep learning model to build sites for me

#57

Post by ReDeiPirati »

It's really great to see more and more companies emerging in the market from these initial ideas/PoC:

[1] Pix2Code: https://arxiv.org/abs/1705.07962

[2] Sketch2Code: https://airbnb.design/sketching-interfaces/

[3] ScreenShot2Code: https://blog.floydhub.com/turning-design-mockups-into-code-w...

Re: Show HN: I trained a deep learning model to build sites for me

#59

Post by jongold »

mattkevan wrote: post #7

Surprised it’s Vue and not React. Vue is great, but there’s a lot of activity in the Sketch React space, for example AirBnb’s Lona [0]. This could fit in nicely. [0] https://github.com/airbnb/Lona

Lona is After Effects -> web / native.

You might be thinking about react-sketchapp[1] or SharpieClassifier [2]

(I built both :P)

[1] https://airbnb.design/painting-with-code/ [2] https://airbnb.design/sketching-interfaces/

Re: Show HN: I trained a deep learning model to build sites for me

#60

Post by jongold »

ReDeiPirati wrote: post #57

It's really great to see more and more companies emerging in the market from these initial ideas/PoC: [1] Pix2Code: https://arxiv.org/abs/1705.07962 [2] Sketch2Code: https://airbnb.design/sketching-interfaces/ [3] ScreenShot2Code: https://blog.floydhub.com/turning-design-mockups-into-code-w...

Totally. The SharpieClassifier we built at Airbnb was super simple because we had a relatively fixed set of components that could be declaratively rendered with React or react-sketchapp as simply as etc. I can't imagine how much more complex UIzard & Zecoda are - mad respect to the developers and for being able to commercialize these ideas.

Aside: I actually built react-sketchapp as a roundabout way of being able to build more interesting AI plugins for Sketch.

Post reply on HN