TE
TechEcho
Home24h TopNewestBestAskShowJobs
GitHubTwitter
Home

TechEcho

A tech news platform built with Next.js, providing global tech news and discussions.

GitHubTwitter

Home

HomeNewestBestAskShowJobs

Resources

HackerNews APIOriginal HackerNewsNext.js

© 2025 TechEcho. All rights reserved.

I think I need to go lie down

796 pointsby mfbx9da4over 1 year ago

57 comments

steveruizokover 1 year ago
Hey, 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&#x27;s here: <a href="https:&#x2F;&#x2F;github.com&#x2F;tldraw&#x2F;draw-a-ui">https:&#x2F;&#x2F;github.com&#x2F;tldraw&#x2F;draw-a-ui</a>. You can also see a bunch of other examples at <a href="https:&#x2F;&#x2F;twitter.com&#x2F;tldraw" rel="nofollow noreferrer">https:&#x2F;&#x2F;twitter.com&#x2F;tldraw</a>.<p>Happy to answer any questions about tldraw&#x2F;this project. It&#x27;s definitely not putting anyone out of work, but it&#x27;s a blast to play with. Here&#x27;s a more complicated example of what you can get it to do: <a href="https:&#x2F;&#x2F;twitter.com&#x2F;tldraw&#x2F;status&#x2F;1725083976392437894" rel="nofollow noreferrer">https:&#x2F;&#x2F;twitter.com&#x2F;tldraw&#x2F;status&#x2F;1725083976392437894</a>
评论 #38295586 未加载
评论 #38297008 未加载
评论 #38291686 未加载
评论 #38297037 未加载
评论 #38290093 未加载
firexcyover 1 year ago
The system prompt used as found in the repo:<p>``` 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&#x27;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. ```<p>(not sure about why the creative[commons?] license is referred here and why does it help.)<p>and for each generation the user prompt is:<p>``` [IMAGE_LINK] Turn this into a single html file using tailwind. ```<p><a href="https:&#x2F;&#x2F;github.com&#x2F;tldraw&#x2F;draw-a-ui&#x2F;blob&#x2F;8a889bf36afc06fbb0cc2d5d5a0687518c5c8e68&#x2F;app&#x2F;api&#x2F;toHtml&#x2F;route.ts">https:&#x2F;&#x2F;github.com&#x2F;tldraw&#x2F;draw-a-ui&#x2F;blob&#x2F;8a889bf36afc06fbb0c...</a><p>Looks simple enough to run “privately” by screenshooting a normal tldraw canvas and passing the prompt with it to the API.
评论 #38296334 未加载
评论 #38296524 未加载
chatmastaover 1 year ago
I 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: <a href="https:&#x2F;&#x2F;gist.github.com&#x2F;milesrichardson&#x2F;2a2f77d4bfb19c3b28dc0c55126facd1" rel="nofollow noreferrer">https:&#x2F;&#x2F;gist.github.com&#x2F;milesrichardson&#x2F;2a2f77d4bfb19c3b28dc...</a>
评论 #38298010 未加载
评论 #38295306 未加载
评论 #38295243 未加载
imjonseover 1 year ago
Such recent demos show both how impressively ML&#x2F;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&#x27;s no wonder they can be represented in much detail in a relatively small embedding vector.
评论 #38293126 未加载
评论 #38288741 未加载
评论 #38290094 未加载
评论 #38295615 未加载
评论 #38294739 未加载
评论 #38290586 未加载
评论 #38291319 未加载
评论 #38295690 未加载
评论 #38299317 未加载
评论 #38289132 未加载
评论 #38289036 未加载
booleandilemmaover 1 year ago
I 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.<p>UI designers will be able to give a &quot;demo&quot; but how will this basic functionality translate to the rest of the app? It won&#x27;t.
评论 #38289344 未加载
评论 #38289213 未加载
评论 #38290600 未加载
paxysover 1 year ago
All the developers out there who make demos for scaling and rotating a box are about to lose their jobs!
评论 #38293283 未加载
评论 #38291236 未加载
评论 #38296089 未加载
andrewstuartover 1 year ago
I was discussing with a client how to integrate our software with his.<p>He sent me a screenshot of the main form.<p>I put the screenshot into ChatGPT and said “make a react form like this in bootstrap”.<p>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.<p>When doing web development I often take a screenshot of a problem with css layout, upload to ChatGPT and ask how to fix it.<p>The demo shown in the tweet seems pretty similar.
评论 #38289198 未加载
评论 #38289123 未加载
评论 #38289211 未加载
评论 #38289277 未加载
评论 #38302776 未加载
评论 #38290192 未加载
评论 #38289831 未加载
评论 #38291337 未加载
评论 #38288679 未加载
JCharanteover 1 year ago
Call 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.
评论 #38289303 未加载
评论 #38289276 未加载
评论 #38289249 未加载
评论 #38289267 未加载
评论 #38290193 未加载
评论 #38293881 未加载
geraldwhenover 1 year ago
Squarespace, Wix etc have already taken the bottom of the market, and if they hadn’t, Indian outsourcing would have anyway.<p>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.
评论 #38290168 未加载
评论 #38288827 未加载
评论 #38290534 未加载
评论 #38288693 未加载
JanneVeeover 1 year ago
I feel old now. I&#x27;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.<p>Look at me I&#x27;m old yelling at clouds!
评论 #38290746 未加载
评论 #38292197 未加载
评论 #38290462 未加载
评论 #38290759 未加载
评论 #38290711 未加载
评论 #38290598 未加载
评论 #38290556 未加载
评论 #38290325 未加载
评论 #38290789 未加载
评论 #38291509 未加载
评论 #38291472 未加载
评论 #38292037 未加载
评论 #38291193 未加载
评论 #38291024 未加载
评论 #38291800 未加载
评论 #38295469 未加载
评论 #38290763 未加载
reidjsover 1 year ago
Isn’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?
评论 #38289270 未加载
评论 #38289086 未加载
random_cynicover 1 year ago
ITT: people in denial while the writing on the wall is literally shoved into their face.
评论 #38290370 未加载
评论 #38290510 未加载
评论 #38293910 未加载
评论 #38296114 未加载
resirosover 1 year ago
The code for the demo is open-source (<a href="https:&#x2F;&#x2F;github.com&#x2F;tldraw&#x2F;draw-a-ui&#x2F;blob&#x2F;main&#x2F;app&#x2F;api&#x2F;toHtml&#x2F;route.ts">https:&#x2F;&#x2F;github.com&#x2F;tldraw&#x2F;draw-a-ui&#x2F;blob&#x2F;main&#x2F;app&#x2F;api&#x2F;toHtml...</a>). The prompt they use interesting:<p>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 &#x2F; colors &#x2F; 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&#x27;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
评论 #38294926 未加载
croesover 1 year ago
That&#x27;s the equivalent of a todo app. How about something more complicated?
评论 #38289111 未加载
评论 #38288878 未加载
评论 #38290278 未加载
评论 #38288861 未加载
评论 #38297294 未加载
评论 #38289247 未加载
评论 #38290258 未加载
评论 #38289265 未加载
world2vecover 1 year ago
Slowly realising my father was right and should work for our family business (construction).
评论 #38289055 未加载
评论 #38288428 未加载
评论 #38294770 未加载
评论 #38288694 未加载
tolmaskyover 1 year ago
Can someone with an API key try making a rectangle labeled &quot;URL&quot;, and a bigger rectangle underneath it, and then see if it is smart enough to make a simple browser out of that?
评论 #38291701 未加载
neilvover 1 year ago
FWIW, I&#x27;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).
marbanover 1 year ago
Building an HTML Widget &gt; $0.<p>Knowing what Widget to build and where to place it &gt; $Invaluable.<p>Also, you end up with an isolated code fragment that will look different the next time you generate it, so what&#x27;s the point?
dangerfaceover 1 year ago
AI truely is just a marketing term.<p>Spend half an hour making a simple demo.<p>Film it 100 times until you get a passable result.<p>Post on twitter &quot;Oh WOW AI!?! GUYS AI!&quot;<p>Pick up your VC check.
评论 #38290450 未加载
ks2048over 1 year ago
We need to differentiate &quot;Wow!&quot;[1] (these ML&#x2F;AI systems are impressive), and &quot;Wow!&quot;[2] (this is something I want to use).
kungfufrogover 1 year ago
I 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&#x27;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&#x27;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.
meiralealover 1 year ago
The Tiktokization of software development. Software made to look good in videos
评论 #38290314 未加载
ekmsover 1 year ago
For 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&#x27;t get it to produce anything functional. Conceptually it&#x27;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&#x27;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?<p>```<p>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.<p>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]]<p>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]]<p>```<p>[0] <a href="https:&#x2F;&#x2F;2023.galacticpuzzlehunt.com&#x2F;game&#x2F;" rel="nofollow noreferrer">https:&#x2F;&#x2F;2023.galacticpuzzlehunt.com&#x2F;game&#x2F;</a> [1] <a href="https:&#x2F;&#x2F;www.puzzle-star-battle.com&#x2F;" rel="nofollow noreferrer">https:&#x2F;&#x2F;www.puzzle-star-battle.com&#x2F;</a>
demondemidiover 1 year ago
So does this mean in the future GUIs will be custom and on demand depending on the situational context or personal preference?<p>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&#x2F;f so I guess we’ll always need a nice quiet user interface.)
评论 #38291581 未加载
评论 #38292795 未加载
renegade-otterover 1 year ago
Anyone remember IBM&#x27;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 &quot;last 10%&quot; which is the most important 10% in software.<p>These tools are definitely more &quot;magical&quot;, but these are essentially an iteration of what we&#x27;ve already had.<p>Code generation from UML was all the rage for a while too, until it wasn&#x27;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.<p>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.<p><a href="https:&#x2F;&#x2F;en.wikipedia.org&#x2F;wiki&#x2F;IBM_Rational_Rose_XDE" rel="nofollow noreferrer">https:&#x2F;&#x2F;en.wikipedia.org&#x2F;wiki&#x2F;IBM_Rational_Rose_XDE</a>
评论 #38293152 未加载
评论 #38295126 未加载
dottjtover 1 year ago
How would you go about editing the final product though? Wouldn&#x27;t you then still need intimate knowledge of the system?
评论 #38289130 未加载
NKosmatosover 1 year ago
Exciting and very useful for quick demos or Proof Of Concepts, we’re living through interesting times.
anigbrowlover 1 year ago
Relevant: the same concept but it&#x27;s classic Breakout<p><a href="https:&#x2F;&#x2F;twitter.com&#x2F;andreasklinger&#x2F;status&#x2F;1725213534806794285" rel="nofollow noreferrer">https:&#x2F;&#x2F;twitter.com&#x2F;andreasklinger&#x2F;status&#x2F;172521353480679428...</a>
anonzzziesover 1 year ago
Very nice... Shame no source code. But super nice idea.
评论 #38288355 未加载
emorning3over 1 year ago
I think we need to get started on organizing the resistance to our robot overlords.
评论 #38291455 未加载
dageshiover 1 year ago
What is this insanity?
评论 #38288387 未加载
Biganonover 1 year ago
I don&#x27;t get what&#x27;s so amazing in the demo<p>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?
thawabover 1 year ago
He is using an open source app called tldraw and this is the prompt used:<p><a href="https:&#x2F;&#x2F;github.com&#x2F;tldraw&#x2F;draw-a-ui&#x2F;blob&#x2F;2ac633bbbd5fda39e59935872fba00d849fa4dbf&#x2F;app&#x2F;api&#x2F;toHtml&#x2F;route.ts">https:&#x2F;&#x2F;github.com&#x2F;tldraw&#x2F;draw-a-ui&#x2F;blob&#x2F;2ac633bbbd5fda39e59...</a>
humbugthemanover 1 year ago
hey I&#x27;m Lu from tldraw, I worked on some of this.<p>The point of this demo is to experiment with new ways of interacting with an LLM. I&#x27;m very tired of typing into text boxes, when a quick scribble, or &quot;back-of-the-envelope&quot; drawing would communicate my thoughts better.<p>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: <a href="https:&#x2F;&#x2F;github.com&#x2F;tldraw&#x2F;draw-a-ui&#x2F;">https:&#x2F;&#x2F;github.com&#x2F;tldraw&#x2F;draw-a-ui&#x2F;</a>
jayd16over 1 year ago
Seems pretty loose with the input prompt. Good thing stake holders are notoriously forgiving and would never ask to push pixels.<p>I do see the potential as a professional tool if it came in the form of a &quot;fix up&quot; 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.
teddarificover 1 year ago
Curious if anyone has actually implemented this (or similar AI tooling) into their regular workflow?
nilslindemannover 1 year ago
I 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? :-(
评论 #38295374 未加载
评论 #38295494 未加载
mplewisover 1 year ago
Wow, I have always had so much trouble building things in the browser when two sliders were involved. Glad someone has solved this problem.
cwoolfeover 1 year ago
The site requires an OpenAI Key and describes doing this as &quot;risky but cool&quot; ... What data would be exposed by sharing my key?
评论 #38289456 未加载
specialistover 1 year ago
What is the letter &#x27;A&#x27; supposed to look like?<p>Every scribe had their own style and flourish. Every scribe was an artisan. Discerning patrons favored particular scribes for their uniqueness and quality.<p>Somehow, someway, the hivemind mostly settled on today&#x27;s &#x27;A&#x27;. Something good enough.<p>Moveable type replaced scribes.<p>And so it is with sliders and flexbox layouts.
amaiover 1 year ago
From the Readme at <a href="https:&#x2F;&#x2F;github.com&#x2F;tldraw&#x2F;draw-a-ui">https:&#x2F;&#x2F;github.com&#x2F;tldraw&#x2F;draw-a-ui</a><p>„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.“
cantSpellSoberover 1 year ago
Does this export to HTML&#x2F;JS&#x2F;CSS and if so, is the code on par with what a good dev would write?<p>Dreamweaver&#x27;s output was terrible. Figma&#x27;s is decent but still requires a good deal of cleanup to fall in line with best practices.
quickthrower2over 1 year ago
That is going to replace about 0.001% of my job! Scary.
评论 #38289543 未加载
评论 #38289230 未加载
yellowsirover 1 year ago
and who will maintain it?
tantalorover 1 year ago
Is this thing self-hosted? Can it make itself?
jongjongover 1 year ago
What about the back end, deployment, hosting, dev ops, architecture, etc... I think that&#x27;s where the opportunity is.
评论 #38289168 未加载
redleggedfrogover 1 year ago
That&#x27;s nice, can it work out of web browser to actually make something usable?
redstarpaover 1 year ago
Dope AF. Can&#x27;t wait to get it!!
ausbahover 1 year ago
interesting content but this title was very clickbaity for hacker news
thawabover 1 year ago
more examples are available on the app account: <a href="https:&#x2F;&#x2F;twitter.com&#x2F;tldraw" rel="nofollow noreferrer">https:&#x2F;&#x2F;twitter.com&#x2F;tldraw</a>
intendedover 1 year ago
Earlier in the year I wanted to understand LLMs and GenAI so I tried to push their limits to see what broke and what didn&#x27;t. One of my projects was to build a blog&#x2F;site from scratch. I had 0 web dev&#x2F;design background.<p>My experience was starkly less optimistic, and am curious if any one else has tried something similar.<p>-----<p>First off, I must state a deep respect to people who build + design websites, while dealing with Clients.<p>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&#x27;t trust the output of the model. It would suggest things that wouldnt work, then link to sites that didnt exist.<p>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.<p>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.<p>Getting an image to come out as I liked from Midjourney was fun - but it was also a massive time sink.<p>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.<p>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.<p>I did get a site up and running after ~1-2 weeks of work including the necessary ritual sacrifices.<p>edit: writing in a rush, grammar and text are messed up. edit: GPT 4, copilot and midjourney. AFAIK I had no half measures.
评论 #38289849 未加载
评论 #38290152 未加载
评论 #38294358 未加载
评论 #38290008 未加载
评论 #38290171 未加载
评论 #38289928 未加载
评论 #38290194 未加载
评论 #38289757 未加载
redroveover 1 year ago
Can we please stop posting twitter links? It&#x27;s a horror show of a website, especially if you don&#x27;t have an account.
评论 #38288478 未加载
评论 #38288411 未加载
评论 #38288670 未加载
评论 #38289016 未加载
评论 #38288543 未加载
评论 #38288723 未加载
评论 #38288393 未加载
评论 #38289092 未加载
评论 #38288920 未加载
评论 #38289169 未加载
评论 #38288541 未加载
评论 #38288461 未加载
评论 #38288671 未加载
评论 #38288735 未加载
评论 #38288403 未加载
评论 #38288422 未加载
评论 #38288453 未加载
smcleodover 1 year ago
Ugh Twitter &#x2F; X. That site needs to die - it’s honestly so broken, none of the redirects seem to work today.
评论 #38289880 未加载
评论 #38289199 未加载
评论 #38289201 未加载
评论 #38291137 未加载
评论 #38290921 未加载
scopehover 1 year ago
Lets make ourselves redundant.<p>At least I won&#x27;t have to relearn JS every 2 weeks.
评论 #38288652 未加载
评论 #38288510 未加载
评论 #38288493 未加载
评论 #38290704 未加载
评论 #38288548 未加载
评论 #38289250 未加载
g051051over 1 year ago
Let me guess...simple image recognition of the slider, the names need to match a CSS property? Wow, <i>so impressive</i>.
评论 #38289650 未加载
deanmenover 1 year ago
This can be done in ONE line in Mathematica:<p><pre><code> Manipulate[ Graphics[{Rotate[Rectangle[{-size&#x2F;2, -size&#x2F;2}, {size&#x2F;2, size&#x2F;2}], rotation, {0, 0}]}, PlotRange -&gt; {{-1, 1}, {-1, 1}}], {size, 0.1, 2, 0.1}, {rotation, 0, 2 Pi, Pi&#x2F;12}]</code></pre>
replwoacauseover 1 year ago
I won’t visit Twitter but reading these comments I think I’ve got the gist
评论 #38289590 未加载
评论 #38289186 未加载