본문 바로가기
  • think normal
새로워지기/마흔의 생활코딩

LLM | ollama 2부. 로컬 브라우저에서 실행하기

by 청춘만화 2024. 2. 25.

 

- ollama 1부. 로컬 터미널에서 실행하기 : Linux(wsl 2), MacOS 
👉 ollama 2부. 로컬 브라우저에서 실행하기 : open-webui
- ollama 3부. 온라인(내 도메인으로) 브라우저에서 실행하기 :
- ollama 4부. 검색증강 RAG 적용하기
- ollama 5부. 이미지 인식 적용하기 
- (준비 중) ollama 6부. MOE mixture of exports 방식 적용하기

 

 

 

ollama local browser 

1. 도커 이미지로 실행하기( Mac terminal 환경, = 윈도우 cmd와 거의 동일)

1) 도커에 가입한 후 로그인한다 

2) 내 컴퓨터 OS 종류에 맞게 도커를 설치한다 

 

Install Docker Engine

Learn how to choose the best method for you to install Docker Engine. This client-server application is available on Linux, Mac, Windows, and as a static binary.

docs.docker.com

3) 검색에서 [터미널]를 검색해서 실행

터미널 검색

  docker run -d -p 3000:8080 --add-host=host.docker.internal:host-gateway -v ollama-webui:/app/backend/data --name ollama-webui --restart always ghcr.io/ollama-webui/ollama-webui:main  

위 명령어를 넣고 엔터를 치면, 아래의 결과가 나온다 

도커를 통해 이미지를 구성/실행한 결과

4) 브라우저를 열고 Web UI 화면에 접속한다 

 http://localhost:3000 

브라우저로 접속한 ollama WebUI

5) 회원 가입을 한다.( 로컬용, 이메일 검증 없음)

올라마 회원가입

6) (로그인 후) 메인 화면

올라마 메인화면

      (1)을 클릭해서 설치했던 모델 중 하나를 선택할 수 있다. 

      (2)을 클릭해서 나만의 문서와 프롬프트를 관리할 수 있다.

 

#참고.1 도커로 이미지를 구성한 결과

NAME을 클릭하면 콘솔 내역, 설치 파일, 상태 등을 볼 수 있고, 우측에 있는 Por(s)항목을 클릭하면 브라우저로 WebUI에 접속할 수 있다.
개발 코드탭. 참고로, 위측상단에 있는 멈춤/재생 버튼으로 가상 서버를 관리 할 수 있다.
도커로 생성한 이미지 목록, 환경설정 등에 대한 상태 등 을 확인할 수 있다
생성된 이미지 레이어들
\설치된 볼륨 내역을 확인 > 파란색 링크를 클릭하면 데이터베이스 이용 내역들을 확인할 수 있다
ollama.db 상세

#참고.2 도커 - ollama 오피셜 페이지 

 

Docker

 

hub.docker.com

 

 

 

 

ollama local browser

2. 직접 FE/BE를 구성해서 실행하기 

1) 검색에서 [터미널]를 검색해서 실행

터미널 검색


 2) 깃허브에서 WebUI 구성하는 기본 코드를 내 컴퓨터로 가져오기( *내가 원하는 폴더에 설치. 위치는 기억하기ㅋ)
 git clone https://github.com/ollama-webui/ollama-webui.git 

3) 설치된 폴더로 이동하기 
 cd ollama-webui/ 

4) 환경설정 파일 복사하기( *참고로 ollama에 대한 간편한 실습을 하나-마나를 떠나서 ;; '.gitignore'와 '.env'에 대한 지식은 개인정보와 관련된 부분이니 꼭 미리 알아두길 권장함..)
 cp -RPp example.env .env 

5) FE 프론트엔드 구성 - 위에 깃허브에서 가져온 코드는 기본 구성 코드임. 각 코드가 의존하고 있는 라이브러리들을 최신 또는 내 하드웨어에 맞는 버전으로 설치하기(* 여기는 원인 모를.. 특히 왜 나만 안되지? 또는 다르지?가 발생하는 구간.. 혹시 에러가 나면 구글 검색 활용 권장함)
 npm i     

6) 로컬 컴퓨터에 설치된 코드를 배포하기 위한 절차로 빌드하기 
 npm run build   

7) 백엔트 폴더로 이동
  cd ./backend  

8) BE 백엔드 구성 - 위에 깃허브에서 가져온 코드는 기본 구성 코드임. 각 코드가 의존하고 있는 라이브러리들을 최신 또는 내 하드웨어에 맞는 버전으로 설치하기(* 여기는 원인 모를.. 특히 왜 나만 안되지? 또는 다르지?가 발생하는 구간.. 혹시 에러가 나면 구글 검색 활용 권장함)
 pip install -r requirements.txt -U  

9) WebUI 구동하기 
 sh start.sh 

terminal 에서 직접 구동 결과

10) WebUI 접속하기( 도커와 동일)  

http://0.0.0.0:8080로 ollama에 접속한 결과

 

 

 

 

 

 

 

 

Docker VS 직접 FE/BE 구성

3. 도커 vs 프론트엔트/백엔드 직접 구성의 차이 

About.도커

장점. 터미널에서 코드 한 줄이면 바로 실행할 수 있다. 환경 설정에서의 에러 빈도가 매우 낮아서. 단순 경험 또는 개인적인 사용 측면에서는 매우 유용한 접근이다.  
단점. 컨테이너가 제거될 때 생성되었던 데이터들도 제거된다. 물론 다수의 컨테이너를 구성하여 쿠버네티스로 관리할 수 있지만 지속적인 데이터 관리를 위한 복잡성이 증가할 수 밖에 없다.

 

About.프론트엔트/백엔드 직접 구성의 차이

장점. 위 코드를 실행하면 한 번에 실행된 경우도 있겠지만.. 대부분 OS별로, 버전별로 서로 다른 에러가 발생했을 것이다. 이와 같이 개인 컴퓨터 뿐만아니라 기업 내에서 인프라 측면으로 최적화를 하거나 디자인 컨셉 등의 측면으로 최적화할 수 있다. 특히 RAG 등 세분화된 기능을 추가하는 측면에서도 필요한 과정이다.  
단점. 위에 예제는 사실 실습을 위한 실행 코드 복사 붙여넣기 과정이었고.. 실무에서는 해당 코드에 대한 상세 내역을 직접 핸드메이드? 과정이 다른 분야이거나 초보 입장에서는.. 녹녹하지 않게 느껴질 수 있다.

댓글