Hi everyone, my name is Marlene and welcome back to my YouTube channel. In today's video, we are going to be building something called Deepsite, which is a very cool application I found on Hugging Face the other day that allows you to send a simple prompt to Deepseek R1 and it will generate an entire website UI for you using um HTML, JavaScript, and CSS. So, this is super super cool. I think a lot of people, you know, at first I thought it would be just very simple and rudimentary, but like I'm actually going to put in on the side here some of the example websites people have built um using this application. Now, I'm not sure how many of you have heard of Hugging Face before, but it's a great platform for anything to do with open-source and machine learning and AI. And they have something called spaces. So I was, you know, looking at the spaces the other day. This is a platform where anyone can share openly a project they've been working on. And so I found this project. I thought it was amazing. And so for today's video, we are going to be building out deep site. Um, and it's currently written in Typescript, which is fine, but I love Python as you know. And so we are going to be stripping it back a little bit mainly the py the main parts of this code that we need and uh rebuilding this application or a version of it in python. So if you're interested in any of this please keep watching. Okay. So the first place we are going to start is on the hugging face spaces page. So you can just look for the deep sight space. When you go on hugging faces this should come up. Um, yeah, this, you know, this is what the application looks like. You can take a look at the deep site gallery if you want some examples of other sites people have built. Like I said, this is incredible in terms of like the ability to create stuff here. Um, so we are going to test it out here. The main place that I want us to go is to this file um tab there. And this will open up a a GitHub repository. So all of the code that's in spaces lives within the hugging face GitHub repository. And so you can clone this code. If you go to these three dots, you can actually click clone repository and it'll give you a link to to be able to clone that on your local machine. I am not going to clone this repository. Like I mentioned, the the application is mainly in Typescript and I want to do Python. I'm going to navigate to the service.js JS file, which is where the majority of our AI um code is going to live because that's where they're using the chat completions um uh you know option here. So the main thing I will say from this project that we want to take is this system prompt. So this base prompt here is really good and it's actually going to be uh the basis of our application. I think I copied that correctly. I want to say that I did. I'm just going to I'm just going to try and copy it again just because I just don't want to, you know, copy it. And then So, that's what we're going to grab from here. Let's go to our um VS Code now. And here, let's create a new Gypsy notebook. Let's call this deep site. NB. And then let's go ahead and create a I'm going to create a second cell cuz I want to do imports in the first one. And in this Oh my goodness. Oh my goodness. It's copied a bunch of other things here. Um I don't want all of that other stuff. So I'm just going to delete it. Uh the main thing that I want again, like I said, is the system prompt. So let's actually say system prompt is what we're going to call it. And then let's create a Python string uh so that we can make it as so it's a little bit more readable. Let's just finish that up. And so this is the system prompt that really is going to be the basis of how this application works with DeepSeek. So it says only use HTML, CSS, and JavaScript. If you want to use an icon, make sure to import the library first. Try to create the best UI possible by using only HTML, CSS, and JavaScript. Use as much as as uh use as much as you can. Tailwind CSS for the CSS. If you don't if you can't do something with Tailwind, then use custom CSS. Make sure to import from there um in the head. also try to elaborate as much as you can to create something unique. Always give the response into a single HTML file. So it's really a well thoughtout system prompt that I feel you know works very well with deepseek. So this is going to be the basis. So let's actually say we're going to create let's say let's say def let's say stream response is what our uh um our function is going to be called and that should is going to take in a prompt. So I'll get back to this in a second. The first thing here before I do that is that I want to start to import the things that I need. So the main thing that I'll start by doing is let's go ahead and install our dependencies have a requirements.txt file. It's not a big file. It's just two packages. Um lang chain Azure AAI and Python. We're using these to access the DeepSeek model from Azure AI Foundry. This is a really quick and fast way to do that with Langchain Azure AI that I'm helping to maintain. So feel free to try it out. So just to install that we'll run pip install requirements.txt and that okay. Oh sorry it said no. Okay our space requirements.txt. There we go. Um so that installed really quickly. That's great. Um now we want to import a bunch of our dependencies. is let me grab I'm going to go ahead and grab my um my import from another file where I've been using uh lang chain Azure AI as well. I'm going to import these here and and that really should be what we need. We have a virtual environment already in this notebook. So I'm going to run this cell that should hopefully just load. But it also has our environment variables to access our Azure AI API key and our endpoint which I will show you how to use in a bit. So the first thing that we want to do here is let's go ahead and initialize our DeepSseek model. So we're just going to say Deepseek uh model and then let's say Azure. Okay, this is correct. Thank you very much to Copilot. Some of these things I don't I think it's getting them from the old open AI Azure OpenAI um you know option which we don't need to use that. Let's say let's start with the endpoint and the endpoint that we need is going to be Azure AI endpoint I think is what we need and then we just need our credential. Yeah, our credential is going to be our Azure AI API key. Okay. And then uh we do need to specify the model. Uh so let's say model equals and then needs to be deepseeek. Actually that should be deepseeek R1 like that. And that should be able to let us access that model. I do want to specify some things for the temperature. Um, let's put it at 0.7. For the max tokens, let's go ahead and put that at 4,000 because we do want it to be as creative as it wants to be. So, we don't want to limit that too much. We don't want to make it too It should have some creativity. It should have enough tokens to be able to do what it needs to do. So, that's pretty much all we need to be able to access this DeepSk. Um hopefully I didn't make any spelling mistakes which I often can do. Um we have our system prompt. The next thing that we want to do is define our messages that we're going to send through like our system prompt and the human message as well. So with so this is correct. We are going to do this in lang chain. That's that's how you send in. We want to send in the system prompt here and then the human prompt is going to be our human prompt. whatever we are describing for our website that's going to go in here as well. And then we can go ahead and we can say response equals deepseeek messages. This is correct. Now what we in lang chain we want to do deepseeek modelstream um and then we can take the messages like that and I think that should probably work as it is. Another thing I want to do is I want to have a variable that contains a website code. Let's say website code equals and then we can have this variable here that will add to it in terms of the chunks. So then we can do this where we're adding all of it to this um variable. Uh that should be correct because we're streaming. Uh we have our generator there and then we're going to print our content. So this is where I just want to start with this. This is pretty much I think all the code for this to work. And for our prompt, let's say create a simple purple tool list. That is my go-to um app to create. And then let's let's have that be the code. And then let's go ahead and print it as well. So this should work um where we can see it'll show us um what the output is. So let's go ahead and run that. Let's see. Website code. I have made a spelling mistake. Uh I'm going to reload that. I'm hoping that's the last typo. Yes, that worked. So, okay, it did not print out anything. So, actually the thing is I should be doing this. So, let's rerun this um and see if we get the printed out code. So we should just be seeing ultimately the response from the model thinking and then the model should also give us a description of what it's done and then it should also give us the HTML code that it's created. I should have probably just streamed the like everything to the uh to the screen, but I think it's fine. So we can see the think um tags like we're used to seeing in a reasoning model. those tags in there. And if we make this a scrollable element, we can see here's the code that we have that we'll need for this to-do list app, including a script with JavaScript. And uh and and it gives us a little bit of a blur here that says, "Here's a stylish purple themed to-do list app." So, I really am curious in terms of what this would look like in an actual application. So, I went ahead and I installed the live server VS Code. um extension that should be able to if I what I'm going to do is I'm going to copy all of the HTML that's in here and I'm going to paste it into a file. Um so let's create a file. Let's call this file index.html. And let's save this there to the file. Let's save that. And then let's go live with that and see. Oh, okay. It's up on my other screen. So, let me bring it over for us to take a look at what this looks like. And here it is. our applic. It's we could say buy groceries groceries and let's add that there and it's working as expected. That's super super nice and very cute. So, wow. You see like this was so simple and the application turned out to be so nice um without doing much. Like let's go back. Let's be so real right now and let's look at the amount of code. It's like such a little bit of code to be able to generate an application like this. I cannot even deal right now. It's literally like two Jupyter notebook cells worth of code. Um, so this I'm I'm not actually going to make this video very long. I want to make it quite a short video uh for this week. So, I will say that I'm going to go ahead and vibe code a an application that takes the previous uh application from the hugging face space as inspiration and turns that into a floss application. So, that's what I'm going to do now. So, I will be back off to vibe coating and we'll show you my final application. So, we'll be back. I'm back and I am I have gone ahead I used copilot um I used agent mode to be able to go ahead and vibe code the rest of the application um can really recommend it if you don't know about agent mode I will leave a link to my previous video and I will also leave a link to my video on using lang chain with deepseeek I'll leave both of those links in the link in the description I'm gonna run it it's just Python on uh so we can say python app py to run this and that should bring up our server for us. Uh let's say allow. Let's do that. And I'm just going to drag it onto the screen because it's on my other screen. So let's go ahead and pull this over. And it created um this very nice UI for us which is called deep se deep deep site python. And we can go ahead and create this. And then it has this similar UI where we can tell it what I'm going to ask is I'm going to say create a magic purple uh purple to-do list uh app. Okay. And I think that's going to be the main thing. I think that is the example we're going to see. We're going to go ahead. It's saying it's generating the site. We can already see the model thinking there. It says, okay, the user wants a magic purple site. Um, it's just showing what is happening there. It's streaming quite quickly. So, you know, I'm not going to go ahead and read all of the things right now. We can also see the description or the bits after the thoughts here which is saying here's a mystical purple themed to-do list app with magical animations and effects. It's still going ahead and loading all of this for us. To me, I will say that I just think it's incredible that we can do so much with so little code. And like honestly, I'm blown away. like even being able to vibe co this version of this application um based off of this space to me like I can't really I just feel like this is the future and we are already living there. Um so really being amazed by the tools that we have. Okay, here's our to-do list app even and it's so cute. I love it. Um, we can we can set the that away and and we can go ahead and add something. So, let's say buy blueberries and add that. Come on. Please, please, guys. That's so nice and so cute. Um, another function that this has is that you can deploy the application. I can call it Mar let's say Marlene's app. I had already tried this before and it created one and we can view it there and it gives us this nice site and all of this was vibe coded by the way this part of it not the backend part that we made before. But that's pretty much how the application works. Okay, that is going to be it for today's video. I hope you enjoyed it. Um, I will leave all of the links to the code and other videos that I mentioned in the description. If you have any questions, feel free to ask them in the comments. I hope you enjoyed it. If you did, please go ahead and like uh this video and subscribe to my YouTube channel. And I will see you in the next one. Bye.