Transcription
Hello everyone. This is professor patterns and in this video I'm going to be showing you how you can host open web UI on a website.
Now here's what I mean. Right now I have open web UI running on localhost 3001 and that's perfect, right? If I want to use this for my local application, great. But what if I am at work or something and I want to use open web UI that's currently running locally on my computer, but I want to somehow tunnel to it from my work. Well, that's exactly what we're going to learn about in this video.
So basically what it would look like is open web UI would be running on a website something like this. But of course it's going to have some layers of security. So if I go to the site first it's going to have me uh put in my email. That's when it's going to take me to the open web UI homepage. And then again I have to sign in. So a couple of layers of security that are going to be added in. But the good thing over here is that now I can actually access open web UI even on my phone. So just go directly to that link the open webbui.prof uh openwebui.uk and then with that link I can access it from anywhere that I want. And the best part is that right now these are all locally hosted models. That means that even though I'm on this website if I ask even something say for example on my phone. Well if I bring up the docker container I can show you firsthand if I type a message and hit enter. So the message I typed was hey and if I hit enter you'll see that on my computer it did process that message and over here on my phone it gave me a response. So that's the overall idea that's why we would want to do this.
So how do we set this all up? Let's go ahead and get started. Okay. So first you need to go to cloudfare.com and then from here you select login. So this is going to take you to a login page. Then you will select sign up and then just simply create an account. All right. So, after you create an account, you're going to see this page over here. Um, you don't really need to do anything here. If you wanted to, you could click on this icon to take you to a homepage. It's fine. Everything else is standard.
Next up, now I am going to be sharing this Google Docs link with you because the instructions are different depending on whether you're a Windows, Mac, or a Linux user. I'm currently on a Windows computer. So, this is the command that I'm going to copy. Now I will then open up my command prompt window and then here within command prompt I'm going to paste that command. So what this is going to do is it's going to install cloudfare. Now I've already actually done this before. So it says found an existing package installed. Um, if you don't have this then it's going to download it the first time. It's going to take a second. Um, you could even test it by running cloudfired and then hyphen hyphen version. And this is going to show which version of cloudfare you're currently running on. Okay, that's perfect.
Okay, so now here's the thing. If you don't care at all about security, um, and you just want to do this like a one-time thing really quickly, you just want to test it out on your phone or whatever, um, there is the unsecured wake command. So basically all you would do is copy this command that I've shared over here. Um, you just want to change the port to wherever you have open web UI running. I actually have open web UI on port 30001. So I'm just going to change this to 30001. Um, and then over here you just simply paste it. And you want to make sure that open web UI is currently running on that port. And once you do that, it's going to create a site for you like transmoves ignoredharmony.trycloudfair.com. trycloudfair.com and if you click on this site or controlclick on that site it's going to open up open web UI and it's not only accessible here through your browser it's also accessible here on my phone so now what you want to do is actually copy this URL and then just send yourself an email like hey go to this link and then from your phone you should be able to access it. So I clicked on this link on my phone and you can see over here I'm on the open web UI homepage. I can select sign in and right now I it says hello professor and this is actually using open web UI. So if I actually open up u docker so you can actually see over here if I ask a question it's going to be using the resources of my computer.
First thing that I need to do is actually open up Olama. This way I have all of my local models available. Now, here's the thing. I can be outside, right? Like I could be running an errand and I want to use open web UI and I can actually use open web UI. It's going to ping the large language model that's running on my computer. So here let me ask a question um like hi how are you? And then as soon as I hit enter, you will be able to see oh says model not selected. Let me just select a random model. And again say the same thing. And as as soon as I ask this question, we can see over here that it also it gets sent directly over here to open web UI and I get a response. So this is one way in which you can do this. not the most securest ways, but if you just wanted something really quick, really easy, then by all means, this is the free way in which you can try it out.
Now, if you wanted to have a little bit more security, then this is what you would do. You can continue watching. Um, let's go to the next step. So, this is login and create a tunnel. So, what you have to do is copy this command for cloudflared login. I'm going to go back over here and I can now hit Ctrl + C. I can stop this tunnel from working. If I now go to this site, it's not going to work. It's completely closed. So, let's paste the Cloudflared login command. And now, this is going to take me over here back to Cloudflare. Now, here it says connect your website or app. So, that's the first thing I'm going to have to do is click on this. Now I if I have an existing domain I could pretty much just add it over here. But if I wanted to, I could even register a new domain. Now over here I can search for a domain like prof patterns open web UI or something and then search. Let's see what are the ones that are available. I literally would just try to pick the cheapest possible one. The next part is you have to just register and then you add a payment method and then you would essentially be paying for one year for this domain. Okay. So I bought this random domain over here and uh $4 for the entire year. Uh, it's not going to break the bank or anything. So I'm okay with that. Um, next step again I need to copy this cloudflare login command over here. I can just hit Ctrl + C and then repaste it. And it's going to take me to this page again, but this time I will be able to now see this domain that I have bought. This is authorized tunnel for this website. So, let me authorize it. And uh it says you may now close this window and start your Cloudflare tunnel. Awesome. Okay.
Next step, you would copy this command and then go back over here and paste it. Now, after you paste it, it's going to give you an ID. It's going to say created tunnel and it's going to give you some ID and all you would do is just copy that. That's your secret key and you can store that somewhere. Um, maybe just create a new text document or something and then just make sure you're storing that information because we're going to be needing that in a second.
Next, let's go to configure the tunnel. So, you want to go to the CloudFare folder. So, on a Mac, it's going to be in this location. on a Windows is going to be your user profile and then it's a hidden folder called cloudflared and over there you would just create a file called config.yaml for both. So let's since I'm on a windows computer I'm going to go to this location see users my name and then cloudflared. So over here I can see that there's already two files um in this folder. Now I can go over here and create new and text document. But the problem is it's going to by default just create the extension u txt. So I can either view and show the file name extensions and then over here after I do that if I rename the file config.yiml YML. Yes. And now you can see the type is a YAML source file. Now I can open this again with um Notepad for example. And what I need to do is copy this part. Okay. And then next step I need to just simply add my tunnel. That's the ID I copied from the last step. And this just needs to be um again you replace your tunnel ID your tunnel ID in both of these steps. You also want to make sure that this is path to the file. Um, so it's basically in the same exact location where this file is. So, for example, um, if I go back over here to my folder, I can click on show more options or properties, for example, and this will tell me exactly where the path is for this file. Um, so you can simply just copy that path and you can add that here. And then the last thing is you can just simply add your subdomain. So over here I'm just going to say open web UI and instead of trycloudflare.com this is where I can add um my website. So for example I can say I cannot even remember the site that I just bought for $5. Okay. So this is the domain that I purchased. This is open web UI. Everything else can stay the same. Um, service is localhost 3001. That's only because I have open web UI and 3001. If you have it on 3,000, just change this to 3,00. And everything else can say the same. You can hit save. Now, I will simply edit this to my actual um values. And then I'm going to hit save.
Next, we'll copy this command to configure the DNS route. And I'm going to paste that over here. And this has been added in. And now finally, we are ready to run. So the command that I'm going to run is Cloudflare tunnel run open web UI tunnel and what that means is every single time I go to that website I will now be able to access open web UI. So you can see open web UI shows up on this site.
Now suppose that you wanted to have one more layer of security. What you could do is you could set up a policy such that only the people with a specific email address can actually sign in to this website. Um, so this is another one more additional layer of security that you can add. So let me show you how you can do that as well. So you start by going back over to your Cloudflare homepage and then you want to select access then launch zero trust. Select your account and then from here you want to create a team name. So I can just say prof team and then select next. Now I'm just going to keep it at the free version. So, I'm going to select this plan. Once that's done, you will be able to see this page over here. Now, you can select create an application. And we're going to be selecting self-hosted over here. Application name. Uh, we'll just going to call this professor patterns open web UI. Um, session duration. So, this is how long you want it to stay until it times out. Just keep it 24 hours for now. Um, here public host name um the subdomain is open web UI. The domain is what domain you bought. So this actually there's a drop down so it kind of comes up over here. Um, the rest can stay the same.
Now with this you can add a policy. So it actually takes you to a different page. So policy name is friends only and action is allow session duration. Let's just put the at I don't know 6 hours, 12 hours, 24, doesn't matter. Now add rules. We want to say we want to add an email and then the value. So only someone with this specific email can actually access the website and then everything else can stay the same and hit save. So the policy has been added. Now let's go back over here. I can um see the access policy. So this is basically back to the add an application page. Let's select an existing policy and I'm going to select the friends only. And then I'm going to hit confirm. So now that that's done, I don't really need to do anything else. I think everything else can just stay standard. I mean if I wanted to, I could change um login methods and stuff. Maybe add some more layers and everything, but for now I can just keep it standard. Uh, this is the application logo. If I wanted to, I could also create a custom logo. Uh, for now, I'm just going to keep it standard default, so it's going to be kind of boring. Uh, so nothing too crazy. Everything else can stay the same. I could even have like a custom landing page if I wanted to, but again, just keeping everything standard for now. Let's hit next and then select save.
Okay. So now what this is going to allow me to do is first over here I'm just going to cancel out and then restart. So Cloudflare tunnel run open web UI tunnel. And now if I click on this site it's going to actually take me to this login page. So over here I will have to put in my email and then it will send me a code and then I have to put that code back over here and from there it's going to take me to my open web UI homepage. And that's basically how you can configure Open Web UI to also run with user authentication.
That's pretty much it for this video. I know that there's so much more that I could still cover. Um, it can basically talk about this for hours, but I will caveat first by saying that I'm not by any means a expert I would say on network um stuff. So, if you thought that there I made a mistake somewhere or if you felt like, oh, maybe I could have or should have done something a little bit differently, then please feel free to comment in the comment section, um, I don't really have an ego or anything. I know that I'm not going to be always 100% right on something, but this is me doing a bunch of different research and figuring out like, well, maybe this might just be the best way that I think um, it could work. But, if you think that there's a better way, then please let me know. Uh, that's pretty much it for this video. Thank you all for um tuning in and I will see you all in the next one. Goodbye.