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

Training an AI to convert design mockups into HTML and CSS

medium.freecodecamp.org

Post reply on HN
Print view View original

71–80 of 109 posts

Re: Training an AI to convert design mockups into HTML and CSS

#71

Post by talmand »

NoGravitas wrote: post #55
TeeWEE wrote: post #26

Earlier quoted context omitted.

Does it matter if the code looks ugly or not? End users are not going to see the UI. If i have an AI in my toolbox that autoconverts designs to Code, within a minute. It would speed up my development time by a lot!

It matters because ugly code is probably also slow code (consider loading of unnecessary resources, and consider an excessively complex DOM). And probably also a page lacking accessibility.

Actually, I ran both through voiceover on the mac and they fared decently well.

The first example only had a slight issue that you couldn't get to any text to describe the images. Only because the alt tags are empty.

The second example, the bootstrap one, was ok as well. Except for the usual odd ul inside a nav example. Well, I find it odd. Voiceover sees that as a group nested inside a group. Just a nav with children works just fine. For instance, if I remove the ul and change the list items to divs then voiceover is much clearer of what's going on.

But the thing is, screen readers would love something like this. Simply because screenreaders love very basic and simple html. This thing generates very basic and simple html. Accessibility gets challenging when start considering a more modern single page app type of website.

Re: Training an AI to convert design mockups into HTML and CSS

#72

Post by candu »

_xnmw wrote: post #56

The example mockup image shown is really unimpressive. As usual, the difficulty is in implementing the last 20% of edge cases and design subtleties, not well-defined black-and-white block layouts like the given example. It would've been simpler to build a classical program to handle that example, and the result would be much better and more predictably structured. It's like programming a self-driving car for a 2D gam…

Do we really have to crap all over this person's work? It's clearly intended as a learning exercise / tutorial written by someone who's in the process of learning themselves, and not as "breaking news" or a production-ready system.

IMHO we should be encouraging this sort of engaged learning.

Re: Training an AI to convert design mockups into HTML and CSS

#73

Post by ghostbrainalpha »

book_mentioned wrote: post #66

Turning web design mockups into code with Deep Learning | https://news.ycombinator.com/item?id=16115353 (Jan 2018) >chrisfosterelli: This is a neural network that takes an image and predicts very simple blocks (like BODY, TEXT, BTN-GREEN in the bootstrap example) and then uses a map to convert them to well-formed HTML >jamesjyu: I've always wanted to do a contest with other frontend coders to see who could get closes…

That second link doesn't have anything to do with A.I. does it?

Re: Training an AI to convert design mockups into HTML and CSS

#74

Post by beached_whale »

jeffmcmahan wrote: post #65
_xnmw wrote: post #56

The example mockup image shown is really unimpressive. As usual, the difficulty is in implementing the last 20% of edge cases and design subtleties, not well-defined black-and-white block layouts like the given example. It would've been simpler to build a classical program to handle that example, and the result would be much better and more predictably structured. It's like programming a self-driving car for a 2D gam…

Yes, this is typical AI weenie optimism. "We can handle many of the easiest cases, so in X years we will be able to do all the really hard things that we haven't even thought of yet!" No.

You could have made you point in a far better way that encourages and doesn’t berate. Eg often people are optimistic but are unaware of the hard edge cases, the edge cases are interesting

Re: Training an AI to convert design mockups into HTML and CSS

#75

Post by ben_w »

EGreg wrote: post #69
ben_w wrote: post #21

Earlier quoted context omitted.

You have to collect the money from somewhere (printing it counts as “from savings accounts”), and the people you collect it from have, historically, tended to resist this any way they can. I’m not saying this problem can’t be solved — I rather hope it can — but that’s why it is still an open problem.

How about printing community currency?

I doubt it would make any difference, but I am unfamiliar with the phrase. Why would a community currency be different from a national currency?

Re: Training an AI to convert design mockups into HTML and CSS

#76

Post by Rexxar »

candu wrote: post #72
_xnmw wrote: post #56

The example mockup image shown is really unimpressive. As usual, the difficulty is in implementing the last 20% of edge cases and design subtleties, not well-defined black-and-white block layouts like the given example. It would've been simpler to build a classical program to handle that example, and the result would be much better and more predictably structured. It's like programming a self-driving car for a 2D gam…

Do we really have to crap all over this person's work? It's clearly intended as a learning exercise / tutorial written by someone who's in the process of learning themselves, and not as "breaking news" or a production-ready system. IMHO we should be encouraging this sort of engaged learning.

If he just try to learn something it is unappropriate to start the article with this sentence : "Within three years, deep learning will change front-end development. It will increase prototyping speed and lower the barrier for building software."

Re: Training an AI to convert design mockups into HTML and CSS

#77

Post by headcanon »

_xnmw wrote: post #56

The example mockup image shown is really unimpressive. As usual, the difficulty is in implementing the last 20% of edge cases and design subtleties, not well-defined black-and-white block layouts like the given example. It would've been simpler to build a classical program to handle that example, and the result would be much better and more predictably structured. It's like programming a self-driving car for a 2D gam…

A usable service taking advantage of this is still a long way off, but we don't get there unless people do the legwork.

One thing that could be usable more quickly would involve simplifying the problem space a bit. For example, the airbnb example using symbols could translate to, say, react components. If the grid system is well designed and you have a mature library of components, one could easily come up with interfaces that would generate react code, and ideally work well enough to serve as a starting point for the engineer to take over and turn it into a working app.

A system like this also need not be used in production-ready apps - I can envision a scenario where PM and designer can quickly sketch out and test ideas with working interfaces, without direct engineer involvement. That in and of itself would change front-end development significantly as the article claims.

Re: Training an AI to convert design mockups into HTML and CSS

#78

Post by king07828 »

dragonwriter wrote: post #60
king07828 wrote: post #58

Earlier quoted context omitted.

Instead, why not transition from a labor based system of resource acquisition for the masses to an investor based system of resource acquisition for the masses? Assuming that the labor economy is dying, then all laborers (truck drivers and code writers) need to figure out how to transition from generating livable income with their labor to generating livable income from their investments. Difficult? Yes. But is it an…

> Instead, why not transition from a labor based system of resource acquisition for the masses to an investor based system of resource acquisition for the masses? Because that means the existing capitalist class has to be forcefully deprived of much of their capital so that it can be redistributed, and a system needs to be set up to prevent it being from be reconcentrated. The existing capitalist class, which holds d…

Agreed that top-down solutions will likely be opposed by those who are already at the top.

And this is exactly the reason why the comment was posted. I.e., the debate about how to help laborers transition to different types of labor may not be the correct debate because it only pushes out the problem to the next technological revolution, which will likely come even faster. Improving technology reduces the need for labor while at the same time it increases opportunities for investment. Hence, perhaps the debate should focus on transitioning from a labor based society to an investor based society.

Re: Training an AI to convert design mockups into HTML and CSS

#80

Post by book_mentioned »

ghostbrainalpha wrote: post #73
book_mentioned wrote: post #66

Turning web design mockups into code with Deep Learning | https://news.ycombinator.com/item?id=16115353 (Jan 2018) >chrisfosterelli: This is a neural network that takes an image and predicts very simple blocks (like BODY, TEXT, BTN-GREEN in the bootstrap example) and then uses a map to convert them to well-formed HTML >jamesjyu: I've always wanted to do a contest with other frontend coders to see who could get closes…

That second link doesn't have anything to do with A.I. does it?

>a contest with other frontend coders to see who could get closest to a complex layout

I don't know of any record of past entries nor if any participants used A.I.; it doesn't seem likely.

Post reply on HN