OpenUI: Simply Imagine Your Interface, and See It Rendered in Real-Time
HTML-код
- Опубликовано: 7 июл 2024
- Exploring Open UI
This video provides a comprehensive overview of Open UI, an open source project akin to Versal's V0 product, offering a visual interface for generating web design elements using Tailwind classes via user commands and HTML. The project, created by Chris van Pelt, is lauded for its impressiveness as a solo developer's work and is available on GitHub. The video also demonstrates the project's features, including creating web elements from natural language inputs and screenshots, toggling between GPT-4 and GPT-3.5 models for faster processing, and the capability to generate responsive designs for multiple device sizes. The tool supports exporting designs as JSX or HTML and offers a seamless experience for web developers looking to automate and streamline their design process. The video encourages viewers to explore Open UI, experiment with its features, and consider its potential applications in various projects.
00:00 Introduction to Open UI: The Open Source Project Revolutionizing Web Design
00:57 Shoutout to the Creator and How to Get Started
01:33 Exploring Open UI's Features and Capabilities
03:36 The Power of GPT Models in Web Development
05:29 Sharing, Downloading, and Converting Code with Ease
06:26 The Future of Web Development with LLMs and Open UI
07:26 Final Thoughts and Encouragement to Explore Open UI
Repo: github.com/wandb/openui 
Хобби
Shoutout the RUclips algorithm for showing me this
Your 'go ahead" count is through the roof
This is helpful feedback - thank you.
Great content! Incredible how this is open-source and started by a developer
Couldn't agree more!
Wow this is impressive. I always get so bored at doing front end stuff. Something like this for flutter or react native would be rad.
For a nincompoop like me - very useful! Well done!
yep i was waiting for this.
Love the breakdown! A bit clunky but has lots of potential.
amazing stuff!!!
I like it the option to use Ollama backend. That avails all the open source models and make the whole setup local. Thanks for sharing such great work! 💜💜
Thanks for watching!
What spec machine you running ollama locally?
@@nastastic i use a m3 pro 18gb
@@nastastic I use Ryzen 5800x, 48 GB ram and RTX 3080 8gb Vram.
Amazing, and it was only a matter of time.
So basically a really good wireframe app
when it will be possible to feed designs it will be game changing
That description is the most AI generated thing I've read all day.
Guilty!
I often use a tool to summarize my transcript + create timestamps before posting videos!
Pretty cool app. I'll have to give it a try.
wow its amazing. Would be cool if a rag process could be implemented in the generated ui
Why would you need rag?
@@smnomad9276 What i was thinking is to inject proprietary data and perform rag so that for example if the entierity of your vectorized content is about xyz, the generative ui could pontentially fill in the components with llm inference of that data. I don't know if its very clear hahaha
@@user-vh3vf7hc9s what would proprietary data in this case? All tailwind components are open source, all html tags are open source as per w3, all css properties are open source as per w3.
WHY YOU NO LINK TO THE GITHUB?!
github.com/wandb/openui
@@DevelopersDigest you should add it to the description. it the first place i checked
@@DevelopersDigest Thank you!
Why you no tell me no why
@@youngfinn1185how about some gratitude
If only it could connect to a design system library!
Love that idea - it would be a really great idea to explore!
Putting a link of the repo would have cool. Simple gestures like that will inxrease you subs. Js
Adding now - thank you!
github.com/wandb/openui
Is there a similar tool, that is more creative? I don't need the code version just a good looking UI design that generate based my description. and I'm not talking about tools like Midjourney because the UI is too unreal. An AI tool that return a dribbble look a like design.
It would be intersting to see a finetuned stable diffusion model based on 2d computer UIs for this use case
Really interesting use case and idea...
How many more of these “you can half ass it” A.I. tools do we need? 😂
at least one for every JS UI framework, so basically infinite? 🤔
I imagine GPT-4o is gonna make the process much faster and have better result.
Absolutely - if anyone tries with gpt4o I would love to hear the results
done only in MAC ?
what is the difference with storybook
Trying to use it and get a $10per month message. Since the concept is new, is there no free trial period to test it's acceptability?
Well, I'm sure front end devs who enjoy this kind of work will disagree with me (and thats ok), BUT For those that don't enjoy this front end cruft work, like myself, I am looking forward to having the automation support for eliminating what I find unfun and tedious. I can spend more time on ux design and less on the monatony of front end web code behind.
Just make it do what I want, and if I can't, then I have to question my design and/or dig into making it do what I want myself... But anything i can generate I will. Just... Trust nothing an verify. There is so many ways to do the dame thing... There is almost no right way outside of meeting the criteria of deliverables. I'm gonna save making of the artful code for the weekends... Passion/Learning projects...
I hope it didn't actually use an to add margin for mobile
Yeah the Vercel was not that thrilling but we all know what the future holds
See! These SaaS interfaces are dime-a-dozen - even a computer can do it!
I searched for 'versal vo' and found nothing.
Then realized it is : Versel v0
The description has two minor spelling errors.
wow who would ever want to use this?
OpenUI, Open WebUI.. all these project names are all the same
Love seeing my peers celebrate the quickly approaching death of our jobs and value. Great, guys.
That's not what's happening. These AI tools don't use themselves. It still takes a human to operate, and command them. Learn to be that human, and your job will be more secure than ever.
boohoo. I'm a software developer. I don't cry whenever a new tool arrives.
@@dieselphiend yeah because that's exactly how automation in other industries have gone: auto-manufacturing, self-serve ordering at fast-food restaurants, self-checkout at grocery stores, now AI, recently self-driving taxis. Nah lol, automation definitely hasn't driven layoffs more than they've created new jobs.
@@usernamehandle AI is not automation.
@@dieselphiend it literally is a form of automation, but ok dummy. keep using it.
does not work correctly every time. try to build complex layout like chat app etc
Use Mistral!
Im already created one on my channel using open ai but it expensive
Your so not a robot.
@@justanaveragebalkan what do you mean is not a robot?
@@lexasaiprobably was intending you are a bot
Can it do stuff that's not hideous?
Try it out! openui.fly.dev/ai/new
I do that with ChatGPT. But instead of writing it I make a drawing with a pen, take a picture of it and upload it to ChatGPT asking it to create the corresponding code.
Yes - great way to do this. Claude’s new artifact feature I think will super charge this type of thing…
If someone can convince me that this is not a threat to frontend or web devs, I don't know who.
When react came out, did all html and css frontend devs panic? I truly dont understand why people think that new TOOLS will make things worse, and at the end of the road when robots do everything so we dont have to, why do people still think “oh but what about WORK?”
Maybe if there are more front-end developers and tools are easier - there will be an even further increase demand for creating frontend applications and websites?
@@DevelopersDigestI think with AI in general we're gonna need less user interfaces
Who's gonna run the tool? Tweak and fix the code? Get it and keep it running in production?
Power tools don't build houses on their own, we still need builders who know what they're doing.
New Technology will always reduce the number of humans/effort needed for a task. It'll definitely replace some but not all.
hmmm, feels like more work to do less...
Gptos
the video thumbnail is misleading :D
Sorry 😞! Wasn’t my intention 🙂
is it paid or free
It's paid free
the example is free (for now at least). if you run locally you need to use your own api key (paid)
Anyone who thinks this will be useful has not used AI in its current state extensively on frontend.
1.) you have to very clearly state what you want and provide as much context as there is complexity (that’s the same as writing code)
2.) the greater the complexity the higher the diminishing returns along with your headache
what is the state of the art acoording to you hahahaha
I’ve given this a shot. It’s really bad. It can barely make basic layouts. The refinement functions ignore context. Like I can select a column or piect of text and ask for changes and it either ignores my requests or it commences to change things i didn’t specify. It was a very frustrating experience. Open ui is a long way from being usable.
Writing UI is The Most boring part of entire work flow.
Hope this is helpful.
Most people who build terrible UIs generally think that and it usually shows in the final product😂
What the hell, this has a loooong way to go before its useful. Just image the inconsistent mess in of a ui you would end up with using thing.
Why show some other paid business mentioning full feature. Snake
Within the readme even the author calls it out :) "It's like v0 but open source and not as polished 😝."
This crap is for devs who don't know the difference between UI and UX. Also, I can build this manually in a fraction of the time shown here.
"This isn't for me, therefore it's worthless".
Even if it was the case that this holds no value for you, it's poor form to refer to someone's project as "crap"
Here’s some potential uses that your comment might not be considering:
-This is an amazing tool for teaching people *how* to build UI, by letting the dev see what changes in the code when xyz update requests are made.
-It’s a great proof of concept for the intersection between LLMs and what they can visualize, and also the excellent beginnings of an open source alternative to V0.
-The code outputs could also eventually be used/tweaked to make custom UIs, components, or pages, *on the fly* to provide completely custom and tailored UIs to users. And importantly, UX best practices and considerations could be baked in, too.
Congrats on building something interesting and creative! Coding = creating, and I appreciate the creativity on this and execution to make the concept happen!
Can’t wait to support the repo :)
aint no way you are building it in a fraction of time. it took less than 1 minute for it to generate that markup. There is no way you will be able to type all that in one minute let alone fraction of that time. Not to mention you need to memorize all tailwind css and shouldnt have to go back and forth between your IDE and tailwind documentation and your dev server demo. It would take 20-30 min to build each of these that too someone already provided you the UX. If you have to come up with figma/adobe xd comps on your own, then it will take even longer time. Now of course your code might be more better, understandable, maintainable, precise compared to the stuff generated by LLM but for quick prototyping you can generate 20-30 experiments very quickly to find inspiration or mix and match markups in your own project.
@@blasttrash its just denial before disruption...the UI people take a lot more time than the devs.. i feel the HTMl UI writen by humans is absolete...
This seems useless for a professional developer. Waste of time
Its almost like there are people out there that arent professional developers? Nah.. what a crazy concept!
@@jd2161it’s almost like people want to shove ai into a project for the sake of saying it’s using ai. This is a lamer version of bootstrap. Bootstrap will do all of this and it’s more user friendly than this.
Seriously? Lost interest when JSX was included. Could we stop pretending that JSX is somehow a reasonable and good technology? Almost the entire react stack is a cumbersome, awkward mess that breaks the internet.
you sound like your wife cheated on you with some React dev..or something 🤣
jsx is goated my mane; it’s called disruption for a reason, calling JSX cumbersome is like saying driving a car is cumbersome compared to riding a bike. If driving positive change to the market, making more efficient, maintainable, and scalable solutions, “breaks the internet” maybe it’s time to catch up with modern dev practices rather than clinging to outdated methods
Finally someone else. I did jsx and tsx for 4 years and still would prefer it die a swift death. Even if it “has taken over” that doesn’t mean it should stay the dominant choice. There are better choices, we just need the React fanclub to be open to alternatives.
But… this is also the wrong place to have that debate, @punsmith. Everything about this tool is generative and thus language or framework kind of becomes irrelevant. It even offers a bunch of other frameworks so I’m not sure why you came here to start a fight.
But yeah now that React fanclub is going to show up to tell you you’re wrong for not being a React fan, I’m here to back you up a little bit. Back off, folks. People are allowed to not like things.
Idk what that thing in the thumbnail was, assuming it was AI generated, but if that was supposed to be a UI design, or landing page or whatever- thats unironically the most repulsive interface ive ever seen.
Gives me max levels of overstimulation & anxiety. But i guess it did something right because the entire reason i clicked on this video was to leave this comment.