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