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.