Gemini-UI-To-Code : This Gemini Frontend & UI Generator is FREE & Amazing! (OpenUI & v0 Alternative)

[Music] hi welcome to another video about a month ago Google launched Gemini 1.5 Pro Gemini 1.5 Pro is Google's Flagship model with about 2 million tokens of context Windows which is really cool not only that but it is also a multimodal model meaning it can take in images videos audio and other such inputs which is also really cool the larger Conta size means that Gemini 1.5 Pro can process vast amounts of information very easily such as an hour of video 11 hours of audio 30k lines of code or over 700k words this is pretty cool this context is really handy when you need to generate large amounts of text or code Plus because it is a multimodal model you can send in your images or videos and ask it for context as well they also released the Gemini 1.5 flash model which is also really cool as its name suggests it is really fast and coste effective however I'll be focusing mainly on the Gemini 1.5 Pro in this video because it's really good at coding since it's multimodal it means that it can take in your screenshots and generate code from them right this means that you can easily create front-end interfaces by just providing a screenshot well that's what we'll be doing today with this repo called Gemini UI to code this is a relatively new repo and I have tried it it can generate some amazing uis that are actually usable unlike the basic uis that open UI makes it's super easy to set up as it's a single file streamlet interface which is really cool it's to the point and only allows you to input a screenshot and generate code from it for now but since it's a streamlit interface you can easily add a text box and use that it generates HTML files by default but if you change its default prompt in the file it can generate code in any programming language you want it's really cool cool and very customizable the best thing I like about it is that it doesn't just take your image and send it to the Gemini API to get code it performs multiple steps iteratively resulting in a greatl look UI let me tell you how it does it if we open up this app python file you can see that the code is pretty self-explanatory as streamlet code generally is here are the main prompts that actually run first it does something pretty cool it doesn't generate code directly it first generates a description of the UI it sees for example if I give it a chat GPT interface it can generate a description outlining that we need a text box a sidebar with the following colors and stuff like that once the description is generated it asks the model to revise the generated outline and check for errors resulting in an extremely detailed outline in the third step it starts creating an HTML file for the UI once the HTML file is created it then sends the HTML file and the screenshot back to the model to check for mistakes after fixing all the mistakes it Returns the final file which is available for you to download it's really cool now let me tell you how you can use it first get a Gemini API key it is free for rate limited usage as you can see here you can get one from their AI Studio once you have the API key keep it in a safe place because we'll need it later once that's done go to this GitHub page and clone the repo on your computer once cloned navigate to the repo directory first run the Pall command to install all the required dependencies next open the app python file and add your API key once added save the file you can also change the model to Gemini flash if you want you can also change the CSS framework to something specific if you prefer once you do that run the streamlit Run command to start your application head over to the URL shown in the terminal and you should see the interface select your screenshot or UI and click on the code UI button I have uploaded the chat GPT interface here as you can see it takes some time to generate because it goes through all the steps iteratively as you can see the first step is completed and it generates a very detailed outline now it's doing the next step the second step is also done creating an even longer outline now it's generating the code the first draft of the code is complete it's now generating the final draft and if we wait for a minute you can see that we have the code here and we can download it by clicking on this button it has created a very similar interface I wouldn't say it's 100% accurate but it's really usable I have tried the same thing with open UI and others and it was not usable for me it really tries to adhere to the same style plus it also creates icons and stuff pretty cool it even replaced the chat GPT icon with a heart icon so this one's a pass for me next let's try it with a Google screenshot if I send it here and wait for a bit finally we have the code now let's check it this also seems pretty much fine it's a little wonky but it's it's pretty good for plain CSS and stuff I have also tried it with the super base homepage you can see that it's not quite there but it's actually a good boiler plate to start with if you want to make something like a super base landing page which I think is pretty cool I mean you won't be copying someone's exact page generally we just want a similar looking layout with colors and themes which it does pretty well plus because it's a very easy streamlit setup you can easily configure it with your own prompts and steps it's a really good start to making something of your own you can also connect it with open AI models if needed it's pretty easy to do as well overall it's a really great tool open UI just doesn't work for me most of the time it generates extremely basic uis without any kind of coloring and stuff which makes it pretty much unusable for me but this is something that actually tries to create a similar looking interface plus it's extremely customizable I think I'll be using it a lot let me know if you'll use it in the comments if you liked this video consider donating to my Channel Through the super thanks option below this video also give this video a thumbs up and subscribe to my channel I'll see you in the next video video till then bye [Music]

Channel: AICodeKing

Views: 9,585

Keywords: gemini ui to code, gemini frontend generator, gemini 1.5pro, gemini 1.5 flash, openui, opensource frontend generator

Id: fljuMK5W5Ps

Length: 8min 12sec (492 seconds)

Published: Fri Jun 14 2024