Gemini-UI-To-Code: AI Develops Frontend - UI Generator (Opensource)

[Music] I think I just found the best and easiest way to build out front ends as well as UI with the help of Gemini's 1.5 pro model as well as flash mode and this is even better than open UI now I had made a video Once on open UI which was letting you describe U eyes using your imagination and then you would see a rendered image live this particular framework was utilizing open AI API as well as grocs and this was something that you would utilize to create these UI components and this is where I actually replicated my Twitter profile as I just simply uploaded a screenshot of this page and I pasted it into open UI and it did a great job in replicating it but what if I to Showcase something even better this is where i' would like to introduce Gemini UI to code this is a framework that utilizes Gemini's 1.5 Pros API as well as a flash mode which generates UI even better you can simply drag in a file it's going to give you textual representation of what the UI is and it's going to even generate the code for the components of that UI for example this web app was fully coded out with Gemini UI to code and you can see that this framework was able to utilize the API key from Gemini to Simply create this fullon web app for this e-commerce store and this was something that was done within a couple of seconds now guys there's so much more to this this is actually a streamlet app and it's is designed to convert your UI designs into code using the power of AI and this is obviously with the Gemini model you can also even write in textual prompts to generate your UI which is also really convenient it's going to also be able to analyze uploaded images of UI designs and it's going to generate the corresponding HTML code which is going to make it so much more easier for us this is something that we're going to be exploring throughout today's video as I'm going to Showcase how you can install this and how you can get started so with that thought guys stay tuned and let's get straight into the video now before we get started I definitely recommend that you take a look at the patreon page so that you can access the new subscriptions that will be releasing this week if you would like to book a consultant call with me you can do so with the link in the description below as well hey what is up guys welcome back to another YouTube video at the world of AI in today's video we're going to be taking a look at Gemini to code now this is something that is even better than the previous framework that we had taken a look at which was open UI and I definitely see this being better because of them utilizing Gemini 1.5 Pro which is outperforming its predecessors as well as other models in various benchmarks such as G GPT 4 Omni as well as gbt 4's regular turbo model the Gemini 1.5 pro model is exceptionally insane at Vision capabilities and this is due to several key features it has a long context understanding where it can process up to 1 million tokens and it's going to enable it to analyze and understand large amounts of data which is why the UI components can be easily coded out it's also really well in terms of utilizing mixture of experts which can basically have active different types of Agents on the most relevant parts of a neural network it's going to enhance efficiency as well as speed and it's going to save tokens when it's actually doing all the component creation there's enhanced performance advanced Safety techniques as well as multimodal capabilities where I can process and understand different types of data including TCH images audios and videos which is why this is such a versatile model to be used for this framework and this is why I'm going to be showcasing it and how you can actually build out fully customizable as well as generate UI components easily with the help of AI so how can you get started well first things first you're going to need to get an API key for the Gemini 1.5 pro model this is where I'll leave a link to this in the description below you can actually access this free of charge where it's based off of rate limits you have 15 rate M which is requests per minutes and you're going to be able to utilize a lot of this for the free charge model so what you can do is try it out in Google AI Studios what you have to do next is then click on the setting Tab and then you want to then get the API plan information this is where you click on this and you're going to be able to get your API key from here this is something that you would want to get for the Pro or the flash you can try out these two but in this case I'm going to head over with the Gemini 1.5 Pro API key now before we get started I'd like to introduce world of AI Solutions this is a really big update that has been launched for my channel and this is where I have compiled the team of software Engineers we have machine learning experts AI consultants and this is basically a team where we're going to be providing AI solutions for businesses as well as personal use cases where AI Solutions can be implemented to automate certain things or to help business operations now if you're interested take a look at the ti form Link in the description below what you will need to do next is download git this is an application that will help you clone repositories so once you have this installed what we can do is then head over back to the Gemini UI to code repository and what you can do is click on this green button copy this over here and if you're on Windows you want to open up your command prompt once you have done that you want to type in get clone and paste the link in for this repository click enter and it'll start cloning this repository what you want to do next is Type in CD Gemini Das U-2 c-code and then you want to click enter and this is to basically get into the repository directory and what you want to do next is you want to install the necessary dependencies and this is where you would want to run this command in the directory so you can copy this and paste this in it'll start installing all the requirements that are essential for the Gemini UI to code application to be functional so once this once this has finished installing we will be then back with the next step what you need to do next is open up your ID in this case I'm using visual studio code so now what I'm going to do is open up the folder the folder in which I just cloned which is Gemini UI to code find it open it up and then you want to go over to the app.py and once you are here let me just make this a little bit larger you can see that you can paste in your API key over here you want to paste your key over here and once you have done that you're going to be able to then simply just click save but another thing you can do is you can change the model to Gemini 1.5 flash you can choose between the pro as well as the flash model in this case we're going to stick with the 1.5 pro model you can also change your bootstrap or like your framework to something that is best suited for you and once you have set all these changes you can then click on the file button and then you can just simply click save and then you can close this what you need to do next is go back to the repository and copy this streamlet run. apppp or sorry run app.py command and then you want to copy this and paste this into your command prompt into the directory that you had just cloned and then you want to click enter oh and also don't be like me and forget that you don't have streamlet installed so make sure you install it beforehand it's super easy to install it you want to just basically paste in PIP install streamlet once you have done that you will be easily able to run this command back again into that directory and you should have it started up another thing to mention is that some of you guys might have problems with Genia so you might need to temporarily remove it and that's by simply putting in the pin on uninstall Genia command once that is done you can then run the streamlet command within the directory and it should start up quite easily and there you go this is the UI of Gemini 1.5 Pro UI to code so you can simply drag in the UI of something let me just put in the UI from my Twitter page and we should get an output or like the code which is going to utilize Gemini's model to basically build the UI components of this Twitter page so what I'm going to do next is just simply drag in the picture that I just screenshotted from Twitter and I'm going to upload it it'll take a couple seconds and then I'm going to now code the UI for it so it's going to start looking at this it's going to utilize the vision capabilities of the model it's going to start understanding what sort of things it's going to need to code it out and within a couple of minutes we should get the code component fully coded out for us sorry I didn't mean a minute it was able to do it within a couple seconds and we can see that it is starting to write out textual representations of what it's analyzing and then at the end it's going to then give us the code for it so we can see now it's generating the website it's going to then give you an HTML code package which you can then copy and then you can see how it was able to do so it looks like it has fully generated the code for me even refined the code and we can actually download the HTML file so we can click on download and we can now access it so if I'm wanted to click on it we can see that it did a good job in replicating almost all the icons it did a good job in placing the banner obviously the images are not going to be the best but we can see that almost everything of that page looks absolutely accurate now there's so much more to this so I definitely recommend that you try this out I'll leave a link to this in the description below so that you can access it right away but definitely want to give my props to the creator of this which is this person over here and I'll leave a link to his Twitter profile as well I'll give him a follow as well for creating something this awesome but with that thought guys thank you guys so much for watching I hope you enjoyed today's video this is a great way for you to build and convert UI designs into code so with that thought guys I hope you enjoyed it make sure you follow me on the patreon CU this is a great way for you to access different subscriptions completely for free make sure you follow me on Twitter great way for you to stay up to date with the latest AI news and lastly make sure you guys subscribe turn on notification Bell like this video and check out our previous videos so you can stay up to date with the latest AI news but with that thought guys have an amazing day spread positivity and I'll see you guys for early shortly peace out fellas

Channel: WorldofAI

Views: 12,741

Keywords: gemini ui to code, gemini frontend generator, gemini 1.5pro, gemini 1.5 flash, openui, opensource frontend generator, google gemini, ai coding, generative ai, text-to-code, ai writes code itself, screenshot to code free, screenshot to code ai, web development ai, html ai, ai creates ui, ai to create ui ux design, ai create ui, easiest way to ui, drag-a-ui, gpt-4-vision, intheworldofai, world of ai, build ui components, web development, code generation, coding, ai code generator

Id: MA9ErYq6luo

Length: 10min 1sec (601 seconds)

Published: Thu Jun 20 2024