19 ms·
I think I need to go lie down
- dangerface 3y agoAI truely is just a marketing term. Spend half an hour making a simple demo. Film it 100 times until you get a passable result. Post on twitter "Oh WOW AI!?! GUYS AI!" Pick up your VC check.
- rchaud 3y agoCheap hype like this is why public perception of AI is turning into "the new crypto'. The revolution is here! Get in now! Instead of Coinbase P&L screenshots, it's short demos of what amounts to a TODO app.
- anonzzzies 3y agoVery nice... Shame no source code. But super nice idea.
- ideasphere 3y agohttps://github.com/tldraw/draw-a-ui https://github.com/tldraw/draw-a-ui
- croes 3y agoHow about the source code of the result?
- steveruizok 3y agoClick the little Copy icon next to the output iframe.
- anonzzzies 3y agoThanks! Somehow it didn't show up when I searched for it in github. My fault for sure.
- codingdave 3y agoI love this part of the README: > Disclaimer: This is a demo and is not intended for production use. It doesn't have any auth so you will go broke if you deploy it.
- guappa 3y agoDid they just invent Microsoft front page but with 10000x more power used?
- dageshi 3y agoWhat is this insanity?
- lucubratory 3y agoLooks like drawing a prospective UI, then having OpenAI multimodal AI turn it into functioning UI. Pretty cool demo. Probably needs some automated test cases, documentation writing etc if it's going to have even a hope of being maintainable. I wonder how much of the GPT-4 coding process described here can be automated as part of an application: https://gwern.net/tla https://gwern.net/tla
- scopeh 3y agoLets make ourselves redundant. At least I won't have to relearn JS every 2 weeks.
- anonzzzies 3y agoIf there is one good thing going to come out of EVEN the fairly clumsy LLMs, it is that we probably can forget about this js frontend framework crap and can focus on work instead of figuring out what the taste-du-jour is. It won't matter; the LLM will translate it.
- skywhopper 3y agoProbably not. Instead we’ll be stuck using the old frameworks driver because LLMs won’t be able to learn anything new without years of stack overflow examples.
- msrobot0 3y agoAlready I bet stack overflow usage has gone down because LLMs can help fixing bugs. I think the documentation, open source code, and code examples are more important training sets. And in. my experience the code is often maybe 95% correct, so there will be a greater premium on expert developers who can spot and fix bugs (with the aid of LLMs, since stack overflow will no longer have any answers since no one will use it having moved to LLMs)
- wyclif 3y agoStackoverflow has less that 50% of the traffic now than it used to a few years ago.
- msrobot0 3y agoI 10000% agree.
- enlyth 3y agoThese little demos of toy UIs are cute but humans can still hold the context of a whole codebase in their heads. We're not quite at the level (yet) of feeding a whole codebase to an LLM and making it add features or make changes while understanding the big picture of the problem being solved, being consistent with the design principles and coding style of the overall existing codebase. And I'm not even talking about creating complex UIs where performance matters Another issue I've ran into a lot is staleness of the knowledge the LLM was trained on, a lot of libraries and frameworks get really frequent, quite often breaking changes, and LLMs have a cutoff date. Try using ChatGPT for something like Godot's GDScript, it will always try to use old Godot v3 style scripting because that's what it's been taught, and the whole documentation for Godot v4 is not something small enough to just fit into context Maybe this would be a better fit for some agent type workflow where it can decide what to lookup from the documentation and then retrieve it, but it also needs to know and decide what to look up and how. There is still a lot to figure out
- andrewstuart 3y agoI was discussing with a client how to integrate our software with his. He sent me a screenshot of the main form. I put the screenshot into ChatGPT and said “make a react form like this in bootstrap”. Made some adjustments, added my software, a few hours later showed the client who was knocked out to see a proof of concept of our systems integrated so quickly. When doing web development I often take a screenshot of a problem with css layout, upload to ChatGPT and ask how to fix it. The demo shown in the tweet seems pretty similar.
- nwoli 3y agoIt’s most likely using chatgpt in the backend
- OJFord 3y agoNo need to guess, there's a thing at the bottom asking for an OpenAI API key at the bottom, and it can't function without that. (So actually technically I think that means no, it's not using ChatGPT, but I don't think that was the point.)
- ilaksh 3y agoI think it's accurate enough to call the OpenAI API the ChatGPT API since it's using the same models. But yeah, technically not the same thing.
- OJFord 3y agoYeah I didn't mean to be pedantic about that, because actually I don't think there is a ChatGPT API, there's no reasonable way something like this even could use it I think? And the only reason to really would be to use the free one (not have to ask for a key) which would surely be against the terms, and doesn't do any computer vision or anything as presumably needed by this demo. In other contexts though I think it can be ambiguous and I can understand why people get irritated/pedantic about it - AIUI it's the same model but different training/parameters? And ChatGPT only gives you the 'user' prompt essentially, with the 'system' one already being 'you are a chatbot called ChatGPT [...]' or whatever.
- redrove 3y agoCan we please stop posting twitter links? It's a horror show of a website, especially if you don't have an account.
- rosmax_1337 3y agoThere should be an extension or greasemonkey-script that will allow you to curate the frontpage to your own liking.
- andrewstuart 3y agoYou could choose not to click on it.
- dataengineer56 3y agoOne forum I frequent automatically replaces Twitter links with nitter.net, which still isn't great but at least lets you see the post.
- masklinn 3y agoIt’s a lot better as it lets you see the replies / thread which xitter has stopped showing and does not drive engagement it.
- rvbissell 3y ago> xitter has stopped showing and does not drive engagement. In the specific case in Xitter, I perceive that as a good change. I like seeing what was linked to, without otherwise getting engaged there.
- masklinn 3y agoUsing nitter is the part which avoids engagement-ing with xitter. Not having any context is the part which makes links to xitter useless, most of the time you get a link to a reply but without context it’s difficult to impossible to understand what it’s about, and the link is functionally useless.
- smcleod 3y agoUgh Twitter / X. That site needs to die - it’s honestly so broken, none of the redirects seem to work today.
- v7n 3y agoWhat still miraculously works for me is s/twitter.com/nitter.net/
- cduzz 3y agoI'm trying to get people to pronounce it "eggs" as in Eggs, the site formerly known as twitter. So instead of a tweet you "egg something". I think it gives the site the dignity it deserves.
- yoav 3y agoLay down some yolks
- timbit42 3y agoNot bad. I still prefer Xitter though. The X is pronounced 'sh'.
- NoGravitas 3y agoThat's a good one; another good one is birdchan.
- SuperCuber 3y agoi like Xitter and Xcrete
- cduzz 3y agoRight, but the letter "X" may be pronounced "Eggs" and people may not even notice that you're not pronouncing it in a cool "Dimension X" scifi way with reverb and stuff. Double Yew, Eggs, Why, Zee / Zed Eccentric billionaire Elan Mosk, while cosplaying Howard Huges, Laid an egg that "he is going to make a wooden rocket that can land on the fondue oceans of the moon" [edit: added the zed for friends who count on their hands starting at the thumb not pointer finger]
- world2vec 3y agoSlowly realising my father was right and should work for our family business (construction).
- ergonaught 3y agoWhile I've had similar notions throughout my life, they have their own host of problems, yeah?
- world2vec 3y agoNothing is truly perfect. Maybe in 5-10 years we'll have massive 3D printers that can build you any house without needing a big construction crew. I doubt but if you asked me 5 years ago about AI being capable of replacing me, I'd have laughed in your face... Alas, here we are.
- deleted 3y ago[deleted]
- largbae 3y agoNot replacing, augmenting. Try to find ways to use the new tools to become more productive than other engineers. Help evolve integration and deployment frameworks to handle the snippets from LLMs in the context of larger projects with a minimum of glue. I wouldn't be surprised to see some old ideas come back to life like encapsulation concepts from enterprise software development. But this time we let LLMs deal with the boilerplate code needed to use and connect them.
- nwoli 3y agoSouth Park was right (panderverse episode)
- layer8 3y agoMaybe we’ll have the robot equivalent of TFA in 20 years. “I need a new garage that looks roughly like this sketch.” Half a day later…
- geraldwhen 3y agoSquarespace, Wix etc have already taken the bottom of the market, and if they hadn’t, Indian outsourcing would have anyway. This is the logical progression of those same concepts. If I were a product manager at a website builder, I’d be all over integrating ai builders like this. It will never work for barely defined complex business tasks, but it might do fine to create a cost estimator for a photography business, for example.
- deleted 3y ago[deleted]
- V__ 3y agoI see this as a useful tool for creating interactive demos and prototypes which allow to quickly iterate over ideas. Could keep the feedback loop with clients short and allow to minimise miscommunication. I could see for example Figma implementing this.
- meiraleal 3y ago> Squarespace, Wix etc have already taken the bottom of the market Meanwhile most SMBs don't have an app/website or have an useless one. There is so much space for niche markets and good tools.
- ilaksh 3y agoWhy do you think it can only work for trivial tasks? That's just denial. Business process workflow software is quite popular. There are many applications where people do something similar with drag and drop/interactive widget editors and they can have complex forms, parent-child, state transitions, etc. Using something like GPT Vision means you can skip the widget drag and drop and use more freeform drawing tools or freehand sketching. Notion is probably the most popular example today but there are more complex ones going back forever.
- roflyear 3y agoBecause so far it has only worked on trivial tasks? That isn't denial: it's stating fact. Business process workflow software is popular, but have massive downsides. These softwares consume massive amount of resources. One dev becomes one dev plus a business person plus another person plus overhead. > Using something like GPT Vision means you can skip the widget drag and drop and use more freeform drawing tools or freehand sketching. To do... what? Where does the UI go? Where does the data go? Where is it stored? How is it accessed? How is security? How are backups? Version control? Etc..
- imjonse 3y agoSuch recent demos show both how impressively ML/AI has advanced recently, and how unimpressively repetitive and unoriginal tasks keep being reimplemented by millions of developers worldwide. Since most UI screens can be accurately described in one or two paragraphs, it's no wonder they can be represented in much detail in a relatively small embedding vector.
- jprete 3y agoA lot of methods of expressing software ideas are also very inefficient. The actual interesting part, the entropy, is very small. In the demo it’s literally two sliders controlling two CSS attributes which is not a lot of bits of entropy in a UI specification. With an appropriate UI specification language, that would be, what, three lines of code? Needing to manage Web UI boilerplate is where the difficulty is.
- Filligree 3y agoBut if you use a specification language, then how can you build a pixel-perfect, unique set of sliders that’s subtly different from everyone else’s?
- pc86 3y agoIME the real "problem" (maybe just interpersonally) is when you have a product person, or a designer, who insists that something needs to be pixel-perfect and subtly different when it objectively does not. Maybe even when it is a grey area but the juice isn't worth the squeeze. Case in point I'm in the middle of, let's just call it what it is, an argument, because a new page in a new section of our app has a different design for form elements, specifically single check boxes (think TOS, affirmations, etc). Well we have shared components obviously, so we're reusing the component. No sense taking half a day or more to reskin this one checkbox on one page. The amount of grief and manhours wasted discussing this checkbox would astound you. Thousands of dollars in payroll over multiple meetings so far with no end in sight because this particular check box just has to be slightly different. The ticket which has been feature-complete for over a week has no chance of being merged in November.
- quickthrower2 3y agoThat is going to replace about 0.001% of my job! Scary.
- ImHereToVote 3y agoThe water is just getting lukewarm. Said the frog.
- birriel 3y ago0.001% is only 17 doublings away from the whole job.
- postsantum 3y agoMy hobby: interpolating
- quickthrower2 3y agoIt has to be sigmoid not exponential but your point still applies. Once it can do all our work we can just change over to star trek society.
- croes 3y agoThat's the equivalent of a todo app. How about something more complicated?
- criddell 3y ago> How about something more complicated? This is still very early days and nobody thinks this is as good as it's going to get. It's nuts how quickly something magic becomes mundane.
- underdeserver 3y agoWell, there still doesn't exist a todo app that matches my needs.
- tomrod 3y agoTechnology like this is interesting from a progression standpoint because this is now the new baseline.
- spoiler 3y agoI think the point isn't something for AI to do the hard complicated parts for us, but help us with the boring repetitive ones that pop up all the time. Making forms UI is one of those. The challenging part here is creating the design language or style guide) and I plementing the business logic once the form gets validated (which AI could generate code for, too).
- roflyear 3y agoOften it's really hard to integrate something like this vs. writing it yourself. An example I recently had was, I was handed a UI kit from a product team. Ok, fine. We only wanted to use about 10% of the kit - basic interface elements. OK. It took me a long time massaging that into what I wanted, because it was a bit of a mess, honestly. And I'm still dealing with random issues that pop up in their CSS. It takes me a few minutes to create a form: but if what I get back is some insanity that I can't read, and each time I get a new form it gives me different flavors of that, well, it's going to add up and be a huge pain to maintain.
- 3y ago
- yellowsir 3y agoand who will maintain it?
- booleandilemma 3y agoI just see this as a tool to help make UI designers (and maybe POs) look smart and competent, but the real work is going to go to the programmers, just as it does today. UI designers will be able to give a "demo" but how will this basic functionality translate to the rest of the app? It won't.
- sarchertech 3y agoI hate it when designers present what looks like polished and complete UIs in Figma. To the execs it looks like a finished product which frequently creates unreasonable expectations that interfere with what should be the iterative nature of UI design. I don’t know how many times I’ve come across a project where a terrible system design was foisted on a group of engineers because of the constraints required by a Figma design that was blessed by some exec or other. Granted there are worse problems in these orgs, but easy high fidelity mock-ups vs wire frames has made it worse.
- tsunamifury 3y agoI hate it with engineers complain moan and drag their feet on implementations that are hard but worth it. Because really under the surface they just don’t like doing something new, even if it has clearly defined user and business value.
- jayd16 3y agoI suspect you're on the wrong side of town for a comment like this, haha. Almost always its just conflicting requests. Every ticket has a clearly defined user and business value to the person who wrote it.
- tsunamifury 3y agoI managed a 250 person engineering team at FANG. The number of times I had to explain to a jr or mid level engineer what our fundamental business was, was astounding. They would constantly argue tickets on a premise that was entirely self contained inside their code -- and be entirely oblivious to what the product was accomplishing outside in the real world with real users. Now this wasn't always the case, and frankly I ran into it much less there than I had at smaller companies. But it still happened a lot. And these engineers would always boast the most about how they knew best about X or Y. Maybe that was my fault as a leader -- but I couldn't fix the incurious.
- thawab 3y agomore examples are available on the app account: https://twitter.com/tldraw https://twitter.com/tldraw
- marban 3y agoBuilding an HTML Widget > $0. Knowing what Widget to build and where to place it > $Invaluable. Also, you end up with an isolated code fragment that will look different the next time you generate it, so what's the point?
- replwoacause 3y agoI won’t visit Twitter but reading these comments I think I’ve got the gist
- drexlspivey 3y agovery brave of you
- replwoacause 3y agoIs it? I didn't think it had anything to do with bravery.
- sodapopcan 3y agoThat's a sarcastic attempted put-down people say when they feel attacked for their terrible choices.
- Loeffelmann 3y agoYou can try it out here: https://makereal.tldraw.com/ https://makereal.tldraw.com/
- replwoacause 3y agoThanks!
- andreasley 3y agoNote: This requires an OpenAI API key with access to the model 'gpt-4-vision-preview', so a paid subscription.
- reidjs 3y agoIsn’t the whole point of all this so I don’t need to use a web UI anymore? I can just tell the computer what I want and it does it, then I can go about my life?
- hermannj314 3y agoTelnet is the future! We've gone full circle.
- largbae 3y agoOr maybe we can call it "Tell net" when using audio
- gumby 3y agoA nerd can dream…I can stay in the command line, work on the fun hard stuff, just explain the UI to a transformer and then push straight to production, sight unseen.
- thawab 3y agoHe is using an open source app called tldraw and this is the prompt used: https://github.com/tldraw/draw-a-ui/blob/2ac633bbbd5fda39e59935872fba00d849fa4dbf/app/api/toHtml/route.ts https://github.com/tldraw/draw-a-ui/blob/2ac633bbbd5fda39e59...
- chatmasta 3y agoI gave it a mockup from a FB interview question (two lists of checkboxes with two buttons to swap checked items between them) and it nailed it: https://gist.github.com/milesrichardson/2a2f77d4bfb19c3b28dc0c55126facd1 https://gist.github.com/milesrichardson/2a2f77d4bfb19c3b28dc...
- deleted 3y ago[deleted]
- zagrebian 3y agoI checked in a screen reader. Nothing is announced when pressing the buttons. This is a problem. It should say something like “Checkbox B moved to the left”. Without any sort of announcement, the user has no idea if pressing the button did anything. Test page: https://output.jsbin.com/jixoqur/quiet https://output.jsbin.com/jixoqur/quiet
- rewtraw 3y ago> This is a toy project
- chatmasta 3y agoThank you very much for your insightful review and valuable feedback regarding the accessibility of our recent list transfer feature. Your suggestions were instrumental in enhancing the user experience, especially for those relying on screen readers. I have incorporated your recommendations into the updated code [0], ensuring better accessibility and usability. I'm also including a link to our conversation [1] for further context and transparency. Your thoroughness and attention to detail are greatly appreciated, and I look forward to your continued guidance and expertise in future projects. [0] https://output.jsbin.com/hawelubaxo/quiet https://output.jsbin.com/hawelubaxo/quiet [1] https://chat.openai.com/share/faa9e2b7-8e4c-4ee3-9386-1f74eafe9885 https://chat.openai.com/share/faa9e2b7-8e4c-4ee3-9386-1f74ea...
- jypepin 3y agoinsane, I never thought that `toList.appendChild(item.closest('li'));` would MOVE the item. You learn something every day
- NKosmatos 3y agoExciting and very useful for quick demos or Proof Of Concepts, we’re living through interesting times.
- kungfufrog 3y agoI mean, cool, but surely if this is a technical feat it speaks more to the complexity of our tooling and platforms than it does the impressiveness of AI. What I'm trying to say is that all of this is pretty primitive if you built the right tooling to express those ideas trivially. Like even a 6 year old could create noughts and crosses if the paradigm they were using allowed them to express the game rules in a way that was natural to them. So yes, while I think this is cool, I don't get how it warrants the hype and hysteria. It makes me sad that this minor technical accomplishment seems impressive because the web is an unintuitive medium for expressing logic entangled with UI.
- dottjt 3y agoHow would you go about editing the final product though? Wouldn't you then still need intimate knowledge of the system?
- jameshart 3y agoChange the sketch and get it to build it again. It only takes a couple of seconds.
- dottjt 3y agoThat seems a lot more complicated than just coding it. How would you go about drawing a box shadow on the sliders? What if you wanted a background image behind it? How would the model know that it's a box-shadow, or that the background is an image? I feel like for that level of granularity, you'd spend more time figuring out how to style it than just writing it in code, since you'll need to start using descriptors on things, which is literally just coding again.
- skeaker 3y ago"just coding it" is a lot harder if you know nothing about code. What's cool here is that someone with literally 0 knowledge of programming can use this. Before this there was simply no way for them to do something like this, it was straight up not possible without the barrier of learning to code first. Does this do it all? Will this replace programmers? No, the skill ceiling remains as high as it ever was, but the skill floor for making something like this has been raised.
- jongjong 3y agoWhat about the back end, deployment, hosting, dev ops, architecture, etc... I think that's where the opportunity is.
- jdthedisciple 3y agoHuh? You know ChatGPT produces a whole REST Api with authentication and db migrations backend in 5 seconds too right?
- jongjong 3y agoYou still need to host it somewhere, deploy new features and then keep it running, generating code isn't enough and besides, back end is higher risk, so there needs to be a human there for insurance purposes to verify that access controls are properly defined and to rectify any urgent issues that arise. Same reason they still want human pilots inside planes even though most of the flight is automated.
- jdthedisciple 3y agoOf course but analogous things can be said about front end. Pretty sure tldraw would fail spectacularly at anything slightly more complex like interactive world maps or parallax animations with dynamic break points. Point being I'm not sure which of the two is safer from ChatGPT.
- JCharante 3y agoCall me an unbeliever, but I don’t believe in the future of no code solutions. You will still have to align that button at smaller device resolutions, leave extra space so it looks nice in another language, and other requirements. Maybe it’ll enable us to use even more abstracted languages to build apps faster at most. This only works for extremely basic and common things like tic tac toe and not original works.
- code_runner 3y agoI think a lot of these demos aren't necessarily trying to push forward a no-code purist approach, but rather showing how you can get basically a live wireframe going in no time at all. I think tools like canva, figma, etc will be all over this stuff and really improve high-fidelity wireframes/demos
- twoquestions 3y agoThat was my initial gut reaction, this will be an utter nightmare to customize and integrate. Wonderful for prototyping though.
- yoav 3y agoIt’s like autotune. Artisans who can sing on key will continue to make very interesting things. But also in parallel a whole new wave of people that couldn’t or didn’t want to learn to sing on key will make entirely new genres of music and also pop for the masses with far less effort. Even the artisans will use it sparingly to enhance and perfect and speed up some of their workflows
- sarchertech 3y agoUnlike software, a song doesn’t need to be maintained to keep working. A song doesn’t need to grow in complexity as more people use it, and a song can’t contain subtle bugs that steal listeners’ credit cards or damage other songs. Of course metaphors have limits, but the limits of this particular metaphor hide all of the flaws of this technology.
- brlewis 3y ago
- cwoolfe 3y agoThe site requires an OpenAI Key and describes doing this as "risky but cool" ... What data would be exposed by sharing my key?
- steveruizok 3y agoHey, this is Steve from tldraw, I was up late last night putting this together. I've added a note next to the input with more info here, but basically: the vision API is so new that its immediately rate limited on any site like this, and because OpenAI doesn't have a way of authorizing a site to use their own API keys (they should!), this was the best we could do. We don't store the API key or send it to our own servers, it just goes to OpenAI via a fetch request. Putting an API key into a random text input is obviously a bad idea and I hope this doesn't normalize that. However, you can read the source code (https://github.com/tldraw/draw-a-ui https://github.com/tldraw/draw-a-ui) and come to your own conclusions—or else just run it locally instead.
- intended 3y agoEarlier in the year I wanted to understand LLMs and GenAI so I tried to push their limits to see what broke and what didn't. One of my projects was to build a blog/site from scratch. I had 0 web dev/design background. My experience was starkly less optimistic, and am curious if any one else has tried something similar. ----- First off, I must state a deep respect to people who build + design websites, while dealing with Clients. I had assumed that ChatGPT would be very useful in helping me pick up and build things. However, I had to jettison ChatGPT fairly soon. I just couldn't trust the output of the model. It would suggest things that wouldnt work, then link to sites that didnt exist. I switched to teaching myself. I had to watch hours of videos, learn CSS, Astro, and several other things from scratch. Definitely not the LLM experience I was expecting. Code from Figma was great - but if I wanted an actual responsive site, I had to write the CSS myself, because boilerplate CSS had all sorts of odds and ends. Getting an image to come out as I liked from Midjourney was fun - but it was also a massive time sink. I had hoped to be able to get complex tasks done entirely with assistance from the LLM. In the end it helped maybe 20-30%. Its greatest use was to clarify concepts instead of me having to wade through specification docs. When I went back to the videos of people using chatgpt to build a website in under 30 minutes - its always someone who knows the domain extensively. I did get a site up and running after ~1-2 weeks of work including the necessary ritual sacrifices. edit: writing in a rush, grammar and text are messed up. edit: GPT 4, copilot and midjourney. AFAIK I had no half measures.
- Rastonbury 3y agoWas GPT4 out then? I self taught to build a Web app before LLMs, for the second one, I had LLMs and it helped me so much, in the area you mentioned: clarifying concepts and spotting obvious bugs due to inexeprience
- intended 3y agoYup. I had Gpt 4, copilot, and midjourney to assist. There is a difference when an LLM is used in limited ways, by someone who knows enough to discard bad output. I'd put it this way - ChatGPT will help you build a ship in the desert without hesitation.
- 3y ago
- g051051 3y agoLet me guess...simple image recognition of the slider, the names need to match a CSS property? Wow, so impressive.
- thatguyagain 3y agoYou are both wrong an arrogant, congratulations. Next time, don't guess.
- g051051 3y agoReally? Then show me a video that doesn't look like what I described, if you want to be taken seriously. That demo is, what, 5 clicks with a decent gui builder?
- random_cynic 3y agoITT: people in denial while the writing on the wall is literally shoved into their face.
- rchaud 3y agoAlternatively, ITT: people who have been through the design-to-dev handoff process and understand the comparative advantages of both teams. Tools like this can be good for indie developers, the ones who in the past may have had to learn a bit of dev/design to release something. The division of labour is larger teams is different. The product manager may have a user research background instead of a software one. The designer may be good with semi-complete prototypes in Framer, but the responsibility for delivering production code may still rest with the dev team.
- TapWaterBandit 3y agoI am still erring on the side of skepticism around AI "taking all jobs with computers" but have to admit that seeing the progress has made me doubt my position a bit. Even if it doesn't take ALL jobs and only relatively low level ones that is still an enormous amount of work that will at the very least change drastically. What really shook me is that GPT-4 can spit out quite solid code for various things. I know there is a lot more to software development than just writing code but if you had asked me 3 years ago if AI would be able to code AT ALL within 10 years I would have said "no chance" with 100% certainty. Had to accept I was very wrong about that and don't have the technical background to really assess how far/fast this stuff can go.
- whywhywhywhy 3y agoWriting was on the wall over a year ago, shocked how many were in complete denial then. Even more surprising now. People don't even seem to grasp that the next gen of these tools wont be rolling the dice once it'll be rolling it 1000 times then you pick the one that nailed it. Then the next generation will roll 10,000 times and it'll be picking the one that nailed it even without your input at all.
- 3y ago
- steveruizok 3y agoHey, Steve here from tldraw. This is a toy project with a horrible security pattern, sorry. If you want to run it locally or check out the source, it's here: https://github.com/tldraw/draw-a-ui https://github.com/tldraw/draw-a-ui. You can also see a bunch of other examples at https://twitter.com/tldraw https://twitter.com/tldraw. Happy to answer any questions about tldraw/this project. It's definitely not putting anyone out of work, but it's a blast to play with. Here's a more complicated example of what you can get it to do: https://twitter.com/tldraw/status/1725083976392437894 https://twitter.com/tldraw/status/1725083976392437894
- mcintyre1994 3y agoThat last example is fun, it's amazing how you can give it feedback like that. When you select the generated app + your text, what's it actually receiving as input? Is it receiving its previously generated code plus your new text?
- steveruizok 3y agoYes! If you have a previously generated shape selected, it incorporates the code from that file into the prompt for the next one. i.e. "here's what we had before, here are the notes that came back"
- aketchum 3y agoHey Steve! Super exciting project and congrats on the launch! I tried to use my open AI key and am getting an error around "you exceeded your current quota, check billing". Does the standard $20 a month OpenAi Pro subscription work for this or are there additional permissions needed? Edit: found the answer on the github readme "*To use your own API key, you need to have access to usage tier 1. Check out your current tier, and how to increase it in the OpenAI settings."
- ed 3y agoLaunch launch launch! Seriously this is lightning in a bottle. Charge $5/mo and have users bring their own OpenAI key. Here’s a freshly MIT’ed licensing server you can use. It’s written in elixir and powers https://go.robocoder.app https://go.robocoder.app Reach out if you need help getting it running! https://github.com/emcmanus/robocoder-server/ https://github.com/emcmanus/robocoder-server/ (Or I’m sure Robocoder.app can walk you through the dev setup)
- humbugtheman 3y agohey I'm Lu from tldraw, I worked on some of this. The point of this demo is to experiment with new ways of interacting with an LLM. I'm very tired of typing into text boxes, when a quick scribble, or "back-of-the-envelope" drawing would communicate my thoughts better. It worked a lot better than I expected! If you give it a try, let me know how it goes for you! And please feel free to check out the source code: https://github.com/tldraw/draw-a-ui/ https://github.com/tldraw/draw-a-ui/
- specialist 3y agoWhat is the letter 'A' supposed to look like? Every scribe had their own style and flourish. Every scribe was an artisan. Discerning patrons favored particular scribes for their uniqueness and quality. Somehow, someway, the hivemind mostly settled on today's 'A'. Something good enough. Moveable type replaced scribes. And so it is with sliders and flexbox layouts.
- meiraleal 3y agoThe Tiktokization of software development. Software made to look good in videos
- rchaud 3y agoIt needs that fuzzy glow filter that every AI art generator spits out.
- amai 3y agoFrom the Readme at https://github.com/tldraw/draw-a-ui https://github.com/tldraw/draw-a-ui „This works by just taking the current canvas SVG, converting it to a PNG, and sending that png to gpt-4-vision with instructions to return a single html file with tailwind.“
- JanneVee 3y agoI feel old now. I'm fairly sure that we could do this almost as fast with VB or Delphi a couple of decades ago, but a little more deterministic results instead of having the tool inferring it from the label names. We had this and then we shoved everything in the browser and forgot that we could do this without using huge amount of compute of some generative AI model. Look at me I'm old yelling at clouds!
- ilaksh 3y agoThere are still tools to do it. I think the reason they are not more popular with programmers is that it's basically some stupid subconscious thing where we are afraid of being accused of being users or beginners. Not something we realize consciously, but anything that doesn't involve complex colorful text naturally gets kind of peer pressured out because it looks like a "beginner tool".
- jszymborski 3y agoI first started programming with VB6 and have yearned to make a GUI program as simply as I did then. Can you point me to something as simple? I've tried Glade before but the time I used it I didn't find it a particularly pleasant experience
- ilaksh 3y agoI also used VB6 back in the day. It was great. Sadly I, like all programmers, have been peer pressured or something into avoiding tools like that. But I know they exist. I also made one several years ago. (No one was interested). But I think if you search for "RAD" or "Rapid Application Development" or graphical component based development may get quite a lot. I think that there are several plugins for WordPress that have similar functionality, although less code integration. Maybe search for "drag and drop React editor".
- password4321 3y agoWindows Forms for .NET Framework 4 using Visual Studio was (is?) a simple Windows-only option.
- demondemidi 3y agoSo does this mean in the future GUIs will be custom and on demand depending on the situational context or personal preference? Did we get every spaceship control room wrong? Where the Star Trek bridge would simply morph into whatever gui objects were necessary? (I can’t imagine them going away entirely and EVERYONE talking to the ships computer as it would be audio chaos and annoying a/f so I guess we’ll always need a nice quiet user interface.)
- NoGravitas 3y agoLCARS, the control panel UI in TNG/DS9/VOY/LD was always supposed to be quickly reconfigurable to the task at hand. But the prop implementation was usually sheets of translucent acrylic under glass, which isn't that easy to update.
- robbintt 3y agoThat is pretty compelling. Probably another layer you use by default but can swipe to the gui search layer or full control. As usual, nerds will default to full control.
- mplewis 3y agoWow, I have always had so much trouble building things in the browser when two sliders were involved. Glad someone has solved this problem.
- tolmasky 3y agoCan someone with an API key try making a rectangle labeled "URL", and a bigger rectangle underneath it, and then see if it is smart enough to make a simple browser out of that?
- simonw 3y agoFirst attempt didn't work, but it nailed it when I added text saying "Show web page here" to the second box: https://gist.github.com/simonw/dac37e575b214c7e13ec907a026e5c7e https://gist.github.com/simonw/dac37e575b214c7e13ec907a026e5...
- paxys 3y agoAll the developers out there who make demos for scaling and rotating a box are about to lose their jobs!
- danjc 3y agoOnly the ones that don't align their sliders.
- madhato 3y ago<p><label>Scale<br><input id="scale" type="range" value="1" max="2" step=".01" oninput="transformSquare()"></label></p> <p><label>Rotation<br><input id="rotation" type="range" value="0" max="360" oninput="transformSquare()"></label></p> <div id="square" style="width:100px;height:100px;background:gold"></div> <script> const transformSquare = () => square.style.transform = `scale(${scale.value}) rotate(${rotation.value}deg)`; transformSquare(); </script>
- strawhatguy 3y agoGreat, now the LLMs will see this too... ;)
- culi 3y agowow TIL `id`s can be used like that
- Izkata 3y agoThey get added as attributes to "document", they're not truly global: https://stackoverflow.com/questions/3434278/do-dom-tree-elements-with-ids-become-global-properties https://stackoverflow.com/questions/3434278/do-dom-tree-elem... Part of why IDs are supposed to be unique on a page.
- carabiner 3y agoFuck. I just lost my job.
- jejeyyy77 3y ago
- emorning3 3y agoI think we need to get started on organizing the resistance to our robot overlords.
- NoGravitas 3y agoButlerian Jihad when?
- deleted 3y ago[deleted]
- resiros 3y agoThe code for the demo is open-source (https://github.com/tldraw/draw-a-ui/blob/main/app/api/toHtml/route.ts https://github.com/tldraw/draw-a-ui/blob/main/app/api/toHtml...). The prompt they use interesting: You are an expert web developer who specializes in tailwind css. A user will provide you with a low-fidelity wireframe of an application. You will return a single html file that uses HTML, tailwind css, and JavaScript to create a high fidelity website. Include any extra CSS and JavaScript in the html file. If you have any images, load them from Unsplash or use solid colored retangles. The user will provide you with notes in blue or red text, arrows, or drawings. The user may also include images of other websites as style references. Transfer the styles as best as you can, matching fonts / colors / layouts. They may also provide you with the html of a previous design that they want you to iterate from. Carry out any changes they request from you. In the wireframe, the previous design's html will appear as a white rectangle. Use creative license to make the application more fleshed out. Use JavaScript modules and unkpkg to import any necessary dependencies
- wg0 3y agoWhat's beyond me is - how just simply predicting the next token brings up this kind of magical comprehension in a model that otherwise has no sense or is aware about itself.
- Biganon 3y agoI don't get what's so amazing in the demo It takes seconds to pick a button and place it somewhere. Is it really so much better to let an AI guess that a green rectangle is supposed to be a button?
- ks2048 3y agoWe need to differentiate "Wow!"[1] (these ML/AI systems are impressive), and "Wow!"[2] (this is something I want to use).
- tantalor 3y agoIs this thing self-hosted? Can it make itself?
- jayd16 3y agoSeems pretty loose with the input prompt. Good thing stake holders are notoriously forgiving and would never ask to push pixels. I do see the potential as a professional tool if it came in the form of a "fix up" button in a WYSIWYG editor. It would be great if you could haphazardly slap together a UI and have a button that unifies the margins and spacing style without taking too many liberties.
- redleggedfrog 3y agoThat's nice, can it work out of web browser to actually make something usable?
- cantSpellSober 3y agoDoes this export to HTML/JS/CSS and if so, is the code on par with what a good dev would write? Dreamweaver's output was terrible. Figma's is decent but still requires a good deal of cleanup to fall in line with best practices.
- ausbah 3y agointeresting content but this title was very clickbaity for hacker news
- renegade-otter 3y agoAnyone remember IBM's Rational Rose? You fed it a UML diagram of what you wanted to do, and it generated C++ stubs. That was two decades ago or more. I tried it once, and that was it. You still had to do the "last 10%" which is the most important 10% in software. These tools are definitely more "magical", but these are essentially an iteration of what we've already had. Code generation from UML was all the rage for a while too, until it wasn't. People realized its limitations at some point. Sort of like ORMs - if you are not policing SQL generation like a hawk, you are going to end up with an awful non-performant system. Ultimately it is a productivity and prototyping tool - it will not do the hardest parts and integrations for you, at least not in the way you may want exactly. https://en.wikipedia.org/wiki/IBM_Rational_Rose_XDE https://en.wikipedia.org/wiki/IBM_Rational_Rose_XDE
- redleggedfrog 3y agoOh god, you're making my PTSD kick in. What this will all lead to? Clients going in making UI that appears to work fine and then asking developers to wire it in to the greater eco-system that will necessarily surround it, telling you "Look! It's almost done!" and then you're going to have PTSD too.
- jfhufl 3y agoWow, I did something like that for my senior project back in '94 using Inventor on an SGI workstation.
- neilv 3y agoFWIW, I'd guess that the 2 sliders with labels like those, and a square or other shape, matches very closely some GUI and pedagogical graphics toolkit tutorials upon which the LLM was trained (in which a slider rotates the shape).
- nilslindemann 3y agoI wonder if it makes sense to learn web development. When I am done in two years, how to find a job which is not already done by an AI? :-(
- TapWaterBandit 3y agoI think it would make sense to learn web development and use AI alongside it. Seems like no matter what you end up doing working alongside AI tools will be a part of the job so the experience with it will be useful. If AI advances to the point where large swathes of workers even amongst developers are put out of work, then worrying about your own job is a little beside the point. Will be a large and apparent social issue then. I am still skeptical this will happen but if you had asked me 3 years ago could AI do what it is capable of already by today I would have said with 100% certainty there is not chance so I'm holding back my opinion at this point.
- athrowaway3z 3y agoIts best to approach learning from a place of curiosity and never be 'done'. However, as an answer to your question: If you're looking for a skill to learn once in a short time and apply that for a decade; then web front-end coding is among the worst options.
- urbandw311er 3y agoHi, coder/founder of 25 years here. I’m genuinely conflicted as to whether or not we will get to a point where front end web development loses its utility. It’s one thing to have an AI assist in coding some simple UX/UI. But an entirely different thing to stitch all those together into a fully working web application. Particularly when it’s a very complex app with multiple pages, client/server architecture, DB, etc. Perhaps I’m just being shortsighted here. I can sort of see how AI tech would evolve to achieve this. You would need an AI assistant able to persist the entire context of your application across months/years in a stable way to act as your ongoing “web developer“. Will that be feasible?
- firexcy 3y agoThe system prompt used as found in the repo: ``` You are an expert tailwind developer. A user will provide you with a low-fidelity wireframe of an application and you will return a single html file that uses tailwind to create the website. They may also provide you with the html of a previous design that they want you to iterate from. Carry out any changes they request from you. In the wireframe, the previous design's html will appear as a white rectangle. Use creative license to make the application more fleshed out. if you need to insert an image, use a colored fill rectangle as a placeholder. Respond only with the html file. ``` (not sure about why the creative[commons?] license is referred here and why does it help.) and for each generation the user prompt is: ``` [IMAGE_LINK] Turn this into a single html file using tailwind. ``` https://github.com/tldraw/draw-a-ui/blob/8a889bf36afc06fbb0cc2d5d5a0687518c5c8e68/app/api/toHtml/route.ts https://github.com/tldraw/draw-a-ui/blob/8a889bf36afc06fbb0c... Looks simple enough to run “privately” by screenshooting a normal tldraw canvas and passing the prompt with it to the API.
- ojbyrne 3y ago"creative license" in plain English, means essentially "don't worry too much about constraints, do what you feel will is best." I don't think it has anything to do with software licenses.
- timeagain 3y ago+1. You would give an interior designer “creative license” to redecorate your living room. The opposite of creative license is micromanagement.
- B1FF_PSUVM 3y agoAs in https://www.google.com/search?q=poetic+license https://www.google.com/search?q=poetic+license, e.g. misuse a word to make a rhyme.
- firexcy 3y agoThanks! TIL
- deleted 3y ago
- ekms 3y agoFor the recent Galactic puzzle hunt competition [0] there was a problem that involved generating 5x5 star battle [1] grids that had a number of unique solutions in the range of [1, 14]. We initially tried to get chatGPT to write a python script to do this, and couldn't get it to produce anything functional. Conceptually it's not a hard problem, and can be solved in ~50 lines of python or so. Interestingly, chatGPT can describe in natural language the basic approach that you should use (DFS with backtracking). Anyway, here's one prompt I used for the generation portion. Is there something one can do to make LLMs more likely to produce functional code output? ``` Write a python iterator to generate all 5x5 grids of integers that obey the following criteria: 1. the grid contains only numbers 1-5 inclusive 2. each number is included at least once 3. Each number 1-5 forms a continuous connecting region within the grid where two cells are considered connected if they share an edge. For example the following would be a valid grid subject to these rules: [[1,5,3,3,3], [1,5,3,3,3], [1,5,3,3,3], [1,5,3,3,4], [1,5,2,3,3]] But the following would not be a valid grid because the `1` in the top right corner is not connected to the 1s along the left edge: [[1,5,3,3,1], [1,5,3,3,3], [1,5,3,3,3], [1,5,3,3,4], [1,5,2,3,3]] ``` [0] https://2023.galacticpuzzlehunt.com/game/ https://2023.galacticpuzzlehunt.com/game/ [1] https://www.puzzle-star-battle.com/ https://www.puzzle-star-battle.com/
- deanmen 3y agoThis can be done in ONE line in Mathematica: Manipulate[ Graphics[{Rotate[Rectangle[{-size/2, -size/2}, {size/2, size/2}], rotation, {0, 0}]}, PlotRange -> {{-1, 1}, {-1, 1}}], {size, 0.1, 2, 0.1}, {rotation, 0, 2 Pi, Pi/12}]
- anigbrowl 3y agoRelevant: the same concept but it's classic Breakout https://twitter.com/andreasklinger/status/1725213534806794285 https://twitter.com/andreasklinger/status/172521353480679428...
- redstarpa 3y agoDope AF. Can't wait to get it!!
- teddarific 3y agoCurious if anyone has actually implemented this (or similar AI tooling) into their regular workflow?