Open-webui 웹 기반 챗봇 만들기

1. 웹 환경 구성하기

• Chatbox 와 같은 방법은 설치된 컴퓨터에서만 사용 가능
• 채팅 이력 공유 안됨. 다시 말해, 각 컴퓨터마다 설치해야 함 .

2. 웹 애플리케이션 특징

• 특정 컴퓨터에 설치한 후 , 인터넷에서 접속 → 마치 Chatgpt 유료 버전과 같은 환경 구현
• 채팅 이력 공유 가능 → 언제 어디서든 자신만의 프로젝트 진행 가능
• 일 할때만 쓴다 → ChatBox 방법 추천
• 언제 어디서든 필요하다 → 웹 애플리케이션 추천
• 단점은, 만드는 방법이 ( 비교적 ) 어렵다.

• 아래는 본인이 실제 사용하고 있는 웹 기반 어플리케이션인 Open-webui 이다. (chatgpt랑 놀랍도록 비슷하다)

 

 

과정은 다음과 같다.

1. Miniconda 설치(컴퓨터에 환경 구성)

2. Open-webui 설치(프로그램 설치)

3. Ngrok 설치(외부에서 접속하게 하기)

 

 

 

3. Miniconda 설치

• 웹 애플리케이션이 구동할 환경을 구성해야 한다 .
• 파이썬 기반으로 Miniconda 라는 것을 제일 많이 사용
• 아래와 같이 구글에서 ‘ Miniconda’ 라고 검색 , 클릭

• 자신의 운영 체제에 맞게 클릭 , 다운로드 후 실행( 대부분 윈도우 쓰시죠 ?)

 

• Next, I Agree 클릭

 

• All User 하면 관리자권한 메시지 발생 ( 귀찮아요 )

 

• Browse 를 눌러 설치 경로 변경 (C 드라이브 비추천하지만 그냥 설치해도 상관없습니 다)
• 경로를 봐꿧다면 Destination Folder 경로 확인
• Next 클릭

 

• 1, 2, 4 번 클릭
• 이 옵션에 대해 궁금하시면 인터넷 검색해보세요 .
• Not recommened 이지만 큰 문제 없습니다 ~ ( 이거 해제하면 수동으로 환경변수설정 등록해야 함 )

• 설치 완료 !
• Finish 를 눌러 끝냅니다 .

 

 

 

4. Miniconda 가상환경 구성하기

 

• Miniconda 에 웹 애플리케이션이 구동될 수 있는 가상환경 구현
• 시작 버튼을 눌러 Anaconda PowerShell Prompt 클릭 (Anaconda Prompt 해도 상관은 없지만 PowerShell 이 더 직관적 )

 

• conda create –n open-webui python=3.11 입력

• open-webui 이라는 가상환경을 파이썬 3.11 기반으로 생성한다는 뜻으로 가상환경명은 얼마든지 변경가능 ( 쉬운 진행을 위해 가상환경명을 프로그램명과 동일하게 만들었습니다 .)

• Proceed ([y]/n)? 이 뜨면 y 누르고 엔터

• 앞 괄호에 가상환경명이 뜨면 가상환경 생성 완료

• conda activate open-webui를 입력하여 가상환경을 활성화 합니다 .

 

 

5. Open-webui 설치

• Open Webui 는 로컬에서 구동 가능한 인공지능 모델을 웹 인터페이스로 제공하여 다수의 사용자가 동시에 접근하고 상호작용할 수 있는 웹 애플리케이션

• pip install –U open-webui 입력

 

• 시간 좀 걸립니다 .
• Open-webui 업데이트가 되면 위 커맨드 다시 입력하세요. 업데이트 할 수 있습니다. ( 생각보다 자주 업데이트 합니다 .)
• 오랜 시간 끝에 아래와 같이 다시 ( 가상환경명 ) 이 앞에 뜨고 입력할 수 있게 되면 모든 설치가 완료된 것입니다.

• open-webui serve 입력

• 방화벽 차단 뜨면 ‘엑세스 허용’ 클릭 ( 한번만 하면 됩니다 .)

• 아래와 같이 로고가 뜨고 더 이상 메시지가 뜨지 않는다면 구동 준비가 완료된 것 ( 처음 실행시 좀 더 걸립니다 .)
• 인터넷 창 (Edge, chrome) 을 열고 localhost:8080 입력

• 처음 구동하면 이렇게 뜹니다 . Get started 를 클릭합니다 .

 

 

6. Open-webui 세팅

• 관리자 권한을 만들어야 합니다.이름, 자주 사용하는 메일, 비밀번호를 입력해주세요. 관리자 계정 생성을 클릭합니다.

• 인공지능 모델을 연결하는 방법은 크게 2 가지 방법이 있습니다 .
• 첫 번째는 Ollama 를 설치하는 방법입니다. 로컬에서 구동되는 인공지능 모델로 인터넷 연결 필요없이 로컬 컴퓨터 성능으로 출력됩니다 .
• 따라서 완전 무료로 사용할 수 있지만 성능이 생각보다 좋지 못하고 컴퓨터 자원을 많이 잡아먹습니다 .

 

로컬모델을 사용하고자 한다면 Ollama 설치, Ollama 연결을 해야 합니다. 아래 두 포스팅을 참고하세요.

https://toyourlight.tistory.com/123

1. 환경 설정하기(ollama, dspy, open-webui)

https://toyourlight.tistory.com/124

2. Open-WebUI : 모델 추가하고 사용해 보기

 

 

• 두 번째는 API 를 연결하는 방법입니다 .
• Application programming interface 약자
• 서로 다른 앱 , 프로그램에서 소프트웨어를 통신하는 방법
• 쉽게 얘기해 , OpenAi api 를 지원하는 곳에서는 Chatgpt 를 사용할 수 있습니다 .

Google Gemini API 발급 방법은 아래 포스팅 참고

https://toyourlight.tistory.com/130

Chatbox, gemini API로 로컬 챗봇 환경 구현하기

 

 

7. Gemini api 등록하고 사용하기

• 발급받은 gemini api 를 등록해 봅시다 .
• 그 전에 , open-webui 는 openai api 프로토콜을 기준으로 통신하므로 약간의 작업이 필요합니다 .
• 아래와 같이 gemini openai api를 입력하고 첫 페이지를 클릭하여 들어갑니다 .

• 보이는 바와 같이 base_url 의 쌍 따옴표 안 https://generative … /v1beta/openai/ 까지 복사합니다 .

 

• 우측 하단 이름 클릭 → 관리자 패널 클릭

• 설정 → 연결 openAI API 연결 관리에서 + 를 눌러 연결추가를 해 줍니다.

 

• URL 에 base_url 내용을 붙여넣기 합니다 .
• Key 는 발급받은 gemini api 를 입력, 마지막으로 저장 클릭

• 새 채팅 → 아래 화살표를 누르면 모델을 선택할 수 있습니다 .Gemini-2.0-flash-exp 를 선택해 봅시다.

• 채팅을 입력해 봅시다. ( 실시간 검색 X)

 

• 무료버전이라면 Gemini-2.5-pro-prewiew 선택하면 사용량 부족이 생길 수 있습니다.

 

 

 

8. 셀프 호스팅 , ngrok 설치하기

• 본인 컴퓨터를 외부에서 접속할 수 있습니다. 이를 호스팅 (hosting) 이라고 합니다 .
( 따라서 open-webui 를 회사 사무용 컴퓨터 설치 비추천 )
• 자택에서 open-webui 를 설치하고 외부에서 접속할 수 있습니다 .
• Ngrok 을 이용하여 비교적 간단하게 구현해 보겠습니다 .

• 구글에서 ngrok 검색 후 클릭 또는 https://ngrok.com 접속 ( 사내망에서는 접근 불가능할 수 있습니다.)
• Get started for free 클릭

 

• 회원 가입 ( 저는 Sign up with Google 이용 했습니다 .)

 

• Skip 클릭
• 적당히 선택하시고 Continue  클릭

 

• Setup & Installation → Download → Download for Windows (운영체제에 맞게 클릭, 일반적으로 64-bit 일 겁니다. 대부분 윈도우 쓰고 계시죠 ?)

 

• 다운로드 받은 파일 압축 풀고 ngrok 있는지 확인

 

 

 

 

9. 셀프 호스팅 , ngrok 실행하기

 

• Your Authtoken → 하단에 ngrok config add-authtoken ~~ 옆 복사 버튼 클릭

• 압축 푼 폴더의 ngrok.exe 더블클릭하여 실행
• cmd 창에 오른쪽 마우스를 클릭하면 붙여넣기 됨.
• 이대로 엔터 입력

• 그러면 /ngrok.yml 파일이 생성됩니다. ( 인증 정보 저장됨 ) 다음부터는 토큰 입력 과정 없어도 됩니다.

• Deploy your app online 을 보면 실행 방법을 나와 있습니다. 복사합니다.

• 아래와 같이 ngrok http http://localhost:8080( 포트번호 ) 입력\

• open-webui 포트번호를 바꿀 수 있는데 뒷 자리 포트번호만 바꿔서 입력하시면 됩니다 . (open-webui serve --port 포트번호 )

• 아래와 같이 Forwarding 에 뜬 https://XXXX-XXX-XX-XXX-XXX.ngrok-free.app 으로 접속할 수 있습니다 .
•  문제는, 무료버전이라 컴퓨터를 끄고 다시 켜면 주소가 변경됩니다 !

• 계정 1 개당 주소를 1 개 고정할 수 있습니다. Static Domain → Claim your free static domain 클릭

• 그러면 아래와 같은 영문자 주소 ( 포트번호 ) 로 바뀝니다 , 복사 !

• Ngrok 다시 실행 , 오른쪽 클릭으로 붙여넣고 포트번호 변경 , 엔터

 

• 아래와 같이 주소가 변경되면 성공된 것입니다 .

• 아래와 같은 메시지 뜨면 Visit Site 클릭

• 스마트폰이나 pc 로 해당 주소를 접속, 관리자 아이디로 로그인 후 실행해 보면 잘 됩니다

 

 

활용법에 대해서는 아래 포스트들 참고

https://toyourlight.tistory.com/category/0%EF%B8%8F%E2%83%A31%EF%B8%8F%E2%83%A3Open%20WebUI

'0️⃣1️⃣Open WebUI' 카테고리의 글 목록