io_

개인용 로컬 AI 서버 만들기 (feat. Docker Compose)

Tue, 16 Jul 2024 12:53:16 GMT

🎯 목표

로컬 LLM 서버 구축
ollama-webui 를 사용하여 ChatGPT 와 같은 GUI 환경 구축
⚙️ 환경 정보
내 개인 홈서버 환경은 다음과 같다.

정보	설명
CPU	Intel(R) Core(TM) i7-4578U CPU @ 3.00GHz
RAM	16GB
OS	Ubuntu 24.04 LTS

내 환경은 맥미니 2014 버전에 OS 만 우분투로 돌린다. 거대 언어 모델을 사용하기에는 굉장히 힘들다. 외장그래픽 카드도 없어, CPU로만 돌려볼려고 한다. 어쨌든 돌아가는 것에 의의를 두고 진행해보자.

🤷 사전 조건

Linux 환경
Docker 설치
Git 설치
✨ 1. Git Clone
작업을 시작하기 전, 도커 컴포즈 파일이 필요하다. valiantlynx 라는 github 유저가 미리 만들어 둔 것이 있으니, 사용해보도록 하자. 다만, GPU 환경이라면 최초 환경 구축 방법이 약간 다르다. 아래 깃허브 주소 내, README 에 있는 GPU 지원 방법을 따라가면 된다. valiantlynx/ollama-docker

📌 1. 리눅스에서 작업할 부모 디렉토리 위치로 이동

cd 

ex) cd /docker

📌 2. Git Clone

git clone https://github.com/valiantlynx/ollama-docker.git

📌 3. clone 한 디렉토리 내부로 이동

cd ./ollama-docker

✨ 2. docker-Compose.yml 수정

다른 Docker 가 올라간 것이 없다면, 이 단계를 건너뛰어도 상관 없다.

📌 1. 편집기를 연다.

CPU 환경과 GPU 환경이 각기 다르니 파일명에 주의해서 열자.

# CPU 환경으로 진행할 경우
vi ./docker-compose.yml

# GPU 환경으로 진행할 경우
vi ./docker-compose-ollama-gpu.yaml

# i 를 눌러 수정모드 진입

📌 2. Docker network Bridge를 기존에 사용하고 있다면 수정해주자.

해당 내용을 모르거나, 기존에 사용하지 않았다면 넘어가자. 모든 network 환경 값을 다음과 같이 변경한다. service가 3개니, 3번 변경해주어야 한다. (app, ollama, ollama-webui)

networks:
    - <당신이 사용하는 브릿지명>

ex)
networks:
    - npm

networks:
  <당신이 사용하는 브릿지명>:
    external:
      name: <당신이 사용하는 브릿지명>

ex)
networks:
  npm:
    external:
      name: npm

📌 3. ollama-webui 서비스 외부포트 변경

이 항목은 필요한 사람만 진행하면 된다. ollama-webui 는 ChatGPT 와 비슷한 GUI 환경을 제공해준다. 해당 서비스의 외부포트는 현재 8080 을 사용 중이라, 다른 서비스가 올라가 있다면 포트 충돌이 발생할 수 있다.

# 변경해야 될 것
version: '3.8'
services:
    ollama-webui:
        ports:
            - 8080:8080

# 위에서 왼쪽 8080을 아래와 같이 변경한다.
ports:
    - <원하는 외부포트 번호>:8080

ex)
ports:
    - 9040:8080

📌 4. 저장하고 나오기

# 1. esc 를 누르고
# 2. :wq 를 입력하고 엔터

✨ 3. Docker Compose 실행

이제 Docker 컨테이너를 생성해보자

# CPU 환경으로 진행할 경우
sudo docker compose -f ./docker-compose.yml up -d

# GPU 환경으로 진행할 경우
sudo docker compose -f ./docker-compose-ollama-gpu.yml up -d

아래처럼 서비스 3개가 Started로 나온다면 정상이다.

$ /docker/ollama-docker$ sudo docker compose -f ./docker-compose.yml up -d
WARN[0000] network npm: network.external.name is deprecated. Please set network.name with external: true
[+] Running 1/1
 ✔ ollama Pulled                                                                                                                                                                                                              2.1s
[+] Building 0.0s (0/0)
[+] Running 3/3
 ✔ Container ollama               Started                                                                                                                                                                                     0.4s
 ✔ Container ollama-webui         Started                                                                                                                                                                                     0.7s
 ✔ Container ollama-docker-app-1  Started

문제가 생겨서 Docker 컨테이너를 내리고 싶다면 아래처럼 하면 된다.

# CPU 환경으로 진행할 경우
sudo docker compose -f ./docker-compose.yml down

# GPU 환경으로 진행할 경우
sudo docker compose -f ./docker-compose-ollama-gpu.yml down

번외) docker-compose 와 docker compose 차이

기존 python 으로 작성되었던 docker-compose 에 기능을 추가하여 go 언어로 작성한 것이 docker compose 이다.

결론만 본다면 다음과 같다. docker-compose 는 V1, 즉 이전 버전의 Docker Compose docker compose 는 V2, 신규 버전이다.

Compose V1과 달리 Compose V2는 Docker CLI 플랫폼에 통합되었으며, 2023년 7월부터 Compose V1은 지원이 종료되었다. docker document

따라서 앞으로는 docker compose 를 사용하도록 하자.

✨ 4. 언어모델 선택

언어모델을 설치하기 전, 아래 주소로 들어가 사용할 언어모델을 선택하자. https://ollama.com/library

개인 환경에 따라 선택하면 된다. 내 환경에서는 qwen2의 에서 1.5b 가 그나마 제일 팬 소음이 덜한 것 같다. CPU로 돌릴거면 parameters 항목이 2.0b 이하인 것으로 하는게 좋을 것 같다.

사용할 모델을 결정했다면 아래 사진에 표시해둔 버튼을 누르고 다른 곳에 붙여넣기 해두자. 나중에 언어모델 설치 시 사용할 것이다.

✨ 5. 언어모델 설치

언어모델은 ollama 도커 컨테이너 내부에 설치한다. 이전 compose.yml 파일에서 ollama 서비스의 컨테이너명을 ollama로 지정해두었다. 컨테이너 내부로 진입해 ollama 명령어를 사용해 모델을 설치한다.

📌 1. bash를 사용해 컨테이너 내부로 진입

docker exec -it ollama /bin/bash

📌 2. 컨테이너 내부에서 ollama 명령어로 언어모델 설치

4번에서 복사해둔 텍스트를 붙여넣기 하면 된다.

ollama run qwen2:1.5b

ollama run 은 언어모델을 실행하는데, 언어모델이 없으면 자동으로 받는다. 언어모델이 다 설치되면 이후 자동으로 실행한다.

이것 말고 단순 설치만 하려면 아래처럼 하면 된다.

ollama pull qwen2:1.5b

📌 3. 언어모델 설치 대기

인터넷 환경에 따라 설치가 오래될 수 있다. 아래처럼 success 가 뜨면 성공이다.

root@6b2e5bb34042:/# ollama run qwen2:1.5b
pulling manifest
pulling 405b56374e02... 100% ▕███████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████▏ 934 MB
pulling 62fbfd9ed093... 100% ▕███████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████▏  182 B
pulling c156170b718e... 100% ▕███████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████▏  11 KB
pulling f02dd72bb242... 100% ▕███████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████▏   59 B
pulling c9f5e9ffbc5f... 100% ▕███████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████▏  485 B
verifying sha256 digest
writing manifest
removing any unused layers
success
>>>

✨ 6. CLI로 언어모델 사용하기

여기까지 왔으면 목표의 대부분은 성공한 것이다.

아래처럼 >>> 이 표시되면 CLI 입력모드 상태이다. 이제 타이핑하여 언어모델에게 물어보면 된다.

root@6b2e5bb34042:/# ollama run qwen2:1.5b
>>>

hello! 라고 입력해보았다.

root@6b2e5bb34042:/# ollama run qwen2:1.5b
>>> hello!
Hello! How can I help you today? Are you looking for information or assistance with a particular topic? Please let me know and I'll do my best to assist you.

이어서 안녕! 이라고 입력해보았다.

>>> 안녕!
안녕하세요! 어떻게 도와드릴까요?

입력 모드를 종료하려면 Ctrl + D 를 누르자.

그리고 다음 단계 진행을 위해, ollama 컨테이너 바깥으로 나오도록 하자.

✨ 7. GUI로 언어모델 사용하기

내부 IP 주소, 혹은 외부 IP 주소는 당연히 알고 있을 것이라 생각한다.

📌 1. 홈서버 로컬 IP

로컬 IP가 기억이 나지 않는다면, 아래 명령어를 입력한다.

ip -4 addr show | grep -oP '(?<=inet\s)\d+(\.\d+){3}' | grep -v '127.0.0.1'

외부 IP로 접속하려면 공유기 포트포워딩을 하던지, Nginx 등으로 리버스프록시 환경 구성을 해야한다. 외부 IP 부분은 생략.

📌 2. ollama-webui 서비스 포트 번호

위에서 ✨ 2. Docker Compose 파일 수정 항목을 수정할 때로 되돌아가 보자. ollama-webui 서비스의 외부 포트 변경을 하라고 했던 것이 기억 날 것이다.

ports:
    - <원하는 외부포트 번호>:8080

📌 3. 브라우저 접속

이제 브라우저 주소창에 다음과 같이 입력한다. 다른 PC에서 작업한다면, 꼭 홈서버와 WIFI 나 LAN 연결이 되어있어야 한다.

http://<당신의 서버 로컬서버 IP>:<당신이 입력했던 외부포트 번호>

이제 다음과 같은 채팅 UI가 우리를 반겨준다.

사실 레퍼 찾아보면서 webui 처음 접속하면 사용자 등록부터 해야한다고 다른 글에서 봤다. 근데 valiantlynx 가 그 작업은 안하도록 사용자 등록까지 다 끝내놓은 것 같다.

📌 4. 언어모델 가져오기

이제, 방금 전에 ollma 내부 컨테이너에 설치했던 언어모델을 가져오도록 하자.

좌측 하단의 User를 눌러 컨텍스트 메뉴를 연다. 설정 버튼을 눌러 팝업창을 호출하자.

팝업창이 열리면 좌측 메뉴 중 관리자 설정 항목을 누른다.

이제 관리자 패널 이 열리면 연결 탭을 누른다. 지금은 스크린샷 찍으려고 좌우 폭을 줄여놔서 상단에 메뉴탭이 보이는데, 정상적인 상태면 좌측에 메뉴탭이 나올 것이다.

Ollama API 항목을 수정한다. 해당 항목에 넣을 값은 다시 docker-compose.yml 로 돌아가 확인할 수 있다.

...
version: '3.8'
    services:
        ...
        ollama-webui:
            ...
            environment:
                - OLLAMA_BASE_URLS=http://host.docker.internal:7869
                ...

바로 OLLAMA_BASE_URLS 키 값을 입력해주면 된다.

입력하고, 좌측 하단의 저장 버튼을 누르자.

이제 모델 탭으로 넘어간다. 이전 탭에서 저장까지 눌렀다면 Ollama 모델 관리 항목이 입력했던 키값으로 나올 것이다. http://host.docker.internal:7869

다음으로, Ollama.com에서 모델 가져오기(pull) 항목에 언어모델명을 입력하면, 설치했던 언어모델을 webui 로 가져올 수 있다.

작성한대로 동일하게 따라왔다면 qwen2:1.5b 를 입력하고 우측의 다운로드 버튼을 눌러 가져온다.

📌 5. 언어모델 기본값 설정

좌측 메뉴 중 새 채팅 버튼을 눌러 메인 화면으로 돌아오자.

나는 지금 언어모델 기본 값을 설정해놔서 언어모델명이 바로 화면상에 표시된다. 우선 아래 화살표 버튼을 눌러 사용할 언어모델을 선택해두자.

📌 6. 언어모델 사용

이제 하단의 메시지 보내기 입력창에 ChatGPT를 사용하는 것처럼 LLM 과 대화하면 된다.

✨ 8. GUI 사용 예시

Toast UI Editor 이미지 업로드

Sun, 24 Jul 2022 14:55:12 GMT

🎯 목표

Spring Boots를 사용해 Toast UI Editor에 이미지 업로드

🔪 시작

어느날 미래에서 삽질하고 있을 나를 위해...

현재 국비지원 4개월차이고 팀 프로젝트를 시작하게 되었습니다. CRUD 기능이 들어가려면 에디터가 필요할거 같았습니다. 하지만 에디터의 기능 구현까지는 힘들거같았고, API를 사용하기로 하고 검색 많은 검색 끝에 두 가지로 압축되었습니다.

첫 번째 : 🔗네이버 스마트 에디터 Github

두 번째 : 🔗TOAST UI Editor Github

결국에는 TOAST UI Editor로 사용하기로 했는데, 그 이유는 다음과 같습니다.

네이버 에디터 2.0은 22년 11월 30일에 서비스 종료 (참고 : 네이버블로그) 한다는 것.
벨로그에 글을 올리다보니 마크다운 문법이 편해진 점. (네이버는 마크다운 지원 안함)

📖 Toast UI Editor

📌 에디터 기능 구현하기

기능 구현을 하기 위해 TOAST UI Editor 공식 홈페이지에서 제공하는 예제를 참고했습니다.

🔗Basic Editor Example

먼저 CDN으로 Editor를 구성하는 JS와 CSS를 가져와줍니다.

다음은 HTML로 Editor로 변경할 컨테이너 요소를 선언해줍니다.

마지막은 JavaScript로 Editor에 옵션을 추가합니다.

const editor = new toastui.Editor({
    el: document.querySelector('#editor'),
    previewStyle: 'vertical',
    height: '500px',
    initialValue: content
});

😀 실행해보면 다음과 같이 에디터가 출력됩니다.

📌 에디터의 옵션

JavaScript의 에디터 초기 옵션들을 확인해 봅시다. 아래 공식문서의 내용들을 참고했습니다.

🔗Toast UI Editor Core Options

EL
- 컨테이너 요소 선택자.
- Javascript로 불러온 에디터의 옵션을 컨테이너 요소로 선언된
  태그에 부여합니다.
previewStyle
- 에디터의 세로의 크기를 지정합니다.
height
- 에디터의 높이 크기를 지정합니다.
initialValue
- 에디터의 초기 입력 값을 지정합니다.

개인적으로는 에디터에서 글 작성시 형광펜처럼 작성 위치가 표시되는 것이 싫어서 아래 옵션까지 추가해주겠습니다.

previewHighlight
- 에디터의 커서 위치에 해당하는 항목 미리보기 요소 강조 표시

해당 옵션이 헷갈리면 아래 사진을 참고하세요.

📌 여기까지의 코드

이클립스 IDE 에서 JSP 파일로 작성했습니다.

Eclipse IDE 환경정보

Version: 2022-03 (4.23.0) Build id: 20220310-1457

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>




Insert title here

📖 Toast UI Editor content 출력하기

공식 문서의 인스턴스 메서드 항목에서 확인할 수 있습니다.

🔗Toast UI Editor Core Instance Methods

editor.getHTML();

📌 주의점

여기서 주의점이 있습니다. Editor 3.x 버전과 Editor 2.x 버전의 getHTML() 메서드 사용 방법이 틀립니다.

🔗Toast UI Editor getHTML/setHTML is not defined 에러 해결 방법
Editor 3.x 버전 : getHTML()
Editor 2.x 버전 : getHtml()

초반에 공식문서를 확인 안하고 구글링으로 가져온 코드를 적용했을때 getHtml is not defined 가 발생해서 당황했는데 저런 문제였습니다...

📌 브라우저에서 content 값 확인하기

방법은 두 가지가 있습니다.

div 태그를 추가하고 선택자를 통해 해당 태그에 값을 입력하는 방법.

document.querySelector('#contents').insertAdjacentHTML('afterbegin', editor.getHTML());

콘솔창에 출력하는 방법
```
console.log(editor.getHTML());
```

📖 Toast UI Editor 이미지 업로드

드디어 이번 포스팅의 목표인 Toast UI Editor를 사용해 이미지를 업로드 해보겠습니다. 기본적으로 Toast UI Editor는 이미지를 업로드기능을 제공합니다. 단, 별다른 설정을 해주지 않으면 base64 형식으로 에디터에 입력됩니다.

📌 Base64 의 단점?

문제는 base64 형식은 해상도가 올라갈수록 글자수가 어마어마하게 늘어난다는 점인데요.

아래 참고사진을 확인해보세요.

단순히 이미지 하나만 넣었을 뿐인데 벌써 스크롤이 어마무시하게 생겼습니다. 글자는 몇 자인지 글자수세기 사이트에서 확인해보면?

고작 311 x 162 사진이 7536 자 입니다.

1920 x 1080 사진을 업로드하면 15만자 가까이 나오기도 합니다. 이러면 사진을 여러 장 업로드하면 DB에 다 업로드되지 않겠죠.

📌 hooks 옵션 사용하기

이럴 때를 대비해 hooks 옵션을 사용합니다.

🔗Toast UI Editor Core Options

hooks
- addImageBlobHook 를 속성으로 가지고 있습니다.
- 에디터에 업로드되는 이미지를 잠시 가져가 처리를 하고 다시 리턴해줄 수 있습니다.

목표 : Base64 ➡ URL로 바꿔 에디터에 표시하기

📌 순서도

정확하지는 않겠지만 제가 이해한 바는 아래와 같습니다.

📌 프로그램 구조

프로그램의 구조는 다음과 같습니다.

📌 코드 살펴보기

✔ Toast UI Editor - jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>



    
    
    Page Title
    

    
    
     
    
    
    
    
    
    
    
    
    
    
    
    

    


     TOAST UI Editor 만들기 

    
    
        마크다운 편집기가 처음이신가요?
        
            다음 내용을 따라오세요.

목차입니다.
            
                문단 제목
                굵은 글씨
                기울이기
                취소선
                수평 가로선 생성
                인용문
                순서 없는 목차
                순서 있는 목차

✔ View and File Save Controller - java

package com.bookha.controller;

import java.io.File;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;
import org.springframework.web.servlet.ModelAndView;

import com.bookha.imageSave.FileNameModel;

@RestController
public class WriteEditorTestController {

    private String path = "d:/imageSaveStorage/";

    @RequestMapping(value = "/writeTest.do", method = RequestMethod.GET)
    public ModelAndView writeTestGet(HttpServletRequest request, HttpServletResponse response) {
        ModelAndView mv = new ModelAndView();
        mv.setViewName("toast_UI_writer3");
        return mv;
    }

    @RequestMapping(value = "/writeTest.do", method = RequestMethod.POST)
    public ModelAndView writeTestPost(@RequestParam("image") MultipartFile multi, HttpServletRequest request, HttpServletResponse response) {

        String url = null;
        ModelAndView mv = new ModelAndView();

        try {
            String uploadPath = path;
            String originFilename = multi.getOriginalFilename();
            String extName = originFilename.substring(originFilename.lastIndexOf("."), originFilename.length());
            long size = multi.getSize();
            FileNameModel fileNameModel = new FileNameModel();
            String saveFileName = fileNameModel.GenSaveFileName(extName);

            if(!multi.isEmpty()) {
                File file = new File(uploadPath, saveFileName);
                multi.transferTo(file);

                mv.addObject("filename", saveFileName);
                mv.addObject("uploadPath", file.getAbsolutePath());
                mv.addObject("url", uploadPath+saveFileName);
                System.out.println("url : " + uploadPath+saveFileName);

                mv.setViewName("image_Url_Json");
            } else {
                mv.setViewName("toast_UI_writer3");
            }
        } catch (Exception e) {
            // TODO: handle exception
            System.out.println("[Error] " + e.getMessage());
        }
        return mv;
    }
}

✔ File Name Model - java

package com.bookha.imageSave;

import java.util.Calendar;

public class FileNameModel {

    public FileNameModel() {
        // TODO Auto-generated constructor stub
    }

    // 메서드 사용 시간 기준으로 파일 이름 생성
    public String GenSaveFileName(String extName) {
        // TODO Auto-generated constructor stub
        String fileName = "";

        Calendar calendar = Calendar.getInstance();
        fileName += calendar.get(Calendar.YEAR);
        fileName += calendar.get(Calendar.MONTH);
        fileName += calendar.get(Calendar.DATE);
        fileName += calendar.get(Calendar.HOUR);
        fileName += calendar.get(Calendar.MINUTE);
        fileName += calendar.get(Calendar.SECOND);
        fileName += calendar.get(Calendar.MILLISECOND);
        fileName += extName;

        return fileName;
    }
}

✔ Image Controller - java

package com.bookha.controller;

import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@RestController
public class ImageController implements WebMvcConfigurer {

    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        // TODO Auto-generated method stub
        registry
            // 이미지 파일의 요청 경로를 지정한다.
            .addResourceHandler("/images/**")
            // 이미지 파일을 불러올 로컬 저장소의 위치를 지정한다.
            .addResourceLocations("file:/d:/imageSaveStorage/");
    }
}

✔ image URL json - jsp

<%@ page language="java" contentType="text/plain; charset=UTF-8"
    pageEncoding="UTF-8" trimDirectiveWhitespaces="true"%>

<%
    request.setCharacterEncoding("UTF-8");

    String url = (String)request.getAttribute("url");
    String filename = (String)request.getAttribute("filename");

    StringBuilder sbHtml = new StringBuilder();

    sbHtml.append("{");
    sbHtml.append("\"url\" : \""+url+"\",");
    sbHtml.append("\"filename\" : \""+filename+"\"");
    sbHtml.append("}");

    out.println(sbHtml);
%>

🧐 배운 점

동기 / 비동기
File 객체를 전송할 때는 FormData에 append하여 전송한다.
ajax 비동기 처리
callback
promise
async await

🤔 아쉬운 점

addImageBlobHook 의 callback을 리턴할 때 ajax는 함수화 시켜서 사용해보고자 했는데 실패했다. 정확히는 ajax를 외부에 함수를 만들어 이미지 URL을 가져오려는데 콘솔에는 정상적으로 출력되는데, 에디터에는 Object Promise로만 리턴되서 결국에는 그냥 hooks 옵션함수 내부에 ajax를 작성했다. (new Promise, async await 사용해봐도 Object Promise로만 리턴됨...) 나중에 기회가 되면 ajax를 함수로해서 깔끔하게 코드작성 해봐야겠다.
이미지를 업로드하고 가져오는 방법을 몰라 구글링했을때, 블로그에 올라온 글들이 모두 React로 처리하는 방법만 포스팅을 해서 무슨 말인지 알 수가 없었다. 자바스크립트로만 처리하는 방법을 찾으려고 거의 대부분의 시간을 사용한거 같다. 리액트도 공부해야봐겠다...
깃허브로 코드 올리면 포스팅도 조금 더 깔끔해지기도 하고 전체 코드를 올릴 수도 있을텐데 아쉽다. 벨로그가 인용문 접기 기능좀 지원해줬으면 좋겠다...! 몇 일 전에 깃허브 계정은 생성했는데 깃허브도 공부해야봐겠다.
이미지 업로드 하고 삭제했을때 조치는 어떻게 해야할까? 글 수정하면서 사용하지 않는 이미지 파일들(쓰레기 파일들)이 생성되는데 이거 조치하는 방법도 생각해봐야겠다.

io_

개인용 로컬 AI 서버 만들기 (feat. Docker Compose)

🎯 목표

⚙️ 환경 정보

🤷 사전 조건

✨ 1. Git Clone

📌 1. 리눅스에서 작업할 부모 디렉토리 위치로 이동

📌 2. Git Clone

📌 3. clone 한 디렉토리 내부로 이동

✨ 2. docker-Compose.yml 수정

📌 1. 편집기를 연다.

📌 2. Docker network Bridge를 기존에 사용하고 있다면 수정해주자.

📌 3. ollama-webui 서비스 외부포트 변경

📌 4. 저장하고 나오기

✨ 3. Docker Compose 실행

번외) docker-compose 와 docker compose 차이

✨ 4. 언어모델 선택

✨ 5. 언어모델 설치

📌 1. bash를 사용해 컨테이너 내부로 진입

📌 2. 컨테이너 내부에서 ollama 명령어로 언어모델 설치

📌 3. 언어모델 설치 대기

✨ 6. CLI로 언어모델 사용하기

✨ 7. GUI로 언어모델 사용하기

📌 1. 홈서버 로컬 IP

📌 2. ollama-webui 서비스 포트 번호

📌 3. 브라우저 접속

📌 4. 언어모델 가져오기

📌 5. 언어모델 기본값 설정

📌 6. 언어모델 사용

✨ 8. GUI 사용 예시

Toast UI Editor 이미지 업로드

🎯 목표

🔪 시작

📖 Toast UI Editor

📌 에디터 기능 구현하기

😀 실행해보면 다음과 같이 에디터가 출력됩니다.

📌 에디터의 옵션

📌 여기까지의 코드

Eclipse IDE 환경정보

📖 Toast UI Editor content 출력하기

📌 주의점

📌 브라우저에서 content 값 확인하기

📖 Toast UI Editor 이미지 업로드

📌 Base64 의 단점?

📌 hooks 옵션 사용하기

📌 순서도

📌 프로그램 구조

📌 코드 살펴보기

✔ Toast UI Editor - jsp

TOAST UI Editor 만들기

마크다운 편집기가 처음이신가요?

✔ View and File Save Controller - java

✔ File Name Model - java

✔ Image Controller - java

✔ image URL json - jsp

🧐 배운 점

🤔 아쉬운 점