Type Here to Get Search Results !

fastAPI와 react를 이용한 open source stable diffusion 사이트 구축하기

이 글에서는 fastAPI와 react를 이용한 open source stable diffusion 사이트 구축하기에 대해서 설명합니다. 

  • hugging face를 이용한 오픈소스 github 리파지토리
  • clone 및 backend/frontend 설치

hugging face를 이용한 오픈소스 github 리파지토리 준비

저는 다음의 github에 구현된 것을 이용해서 구축해 볼 계획입니다. 

https://github.com/laurauzcategui/fastapi_ml_stablediffusion

찾아보니, 위의 주소에 fastAPI와 react를 이용한 오픈 소스가 있습니다. 해당 코드를 이용해서 구축해 봅니다. 

hugging face를 이용하여 구현한 것 같습니다. 일단, 토큰을 받으라 하여 hugging face에 가입합니다. 가입은 이메일을 이용하며 이메일 인증이 완료되면 끝입니다.  

Setup and run it :)

These are the steps to see it running :)

From your backend folder:

  1. You need a HugginFace token. Checkout how to create one here
  2. Once you have your token created it follow the next steps
cd backend 
touch .env

아래 링크로 가서 토큰을 할당 받습니다. 

huggingface 토큰 할당 바로가기


토큰을 할당 받을 때, read/write를 물어봅니다. 설명이 없어서 일단 write로 해봅니다. 

clone 및 backend/frontend 설치

1. clone 및 가상환경 설정

일단 저는 위의 github를 clone해서 제 repository에 가져와서 작업합니다. 

lswhh@DESKTOP-HQPQNKV:~$ git clone https://github.com/lswhh/fastapi_ml_stablediffusion.git
'fastapi_ml_stablediffusion'에 복제합니다...
remote: Enumerating objects: 81, done.
remote: Counting objects: 100% (81/81), done.
remote: Compressing objects: 100% (61/61), done.
remote: Total 81 (delta 27), reused 59 (delta 15), pack-reused 0
오브젝트 묶음 푸는 중: 100% (81/81), 1.92 MiB | 1.61 MiB/s, 완료.

수정하게 될지 그냥 사용하게 될지 어떨지 모르므로 일단 clone하도록 하였습니다. 

가상 환경을 만들고 sd-fastapi를 실행합니다. 

lswhh@DESKTOP-HQPQNKV:~$ python3 -m venv sd-fastapi
lswhh@DESKTOP-HQPQNKV:~$ ls
JAVA  fastapi_ml_stablediffusion  pkg  sd-fastapi  sd-venv  webui.sh  work
lswhh@DESKTOP-HQPQNKV:~$ source sd-fastapi/bin/activate
(sd-fastapi) lswhh@DESKTOP-HQPQNKV:~$ ls
JAVA  fastapi_ml_stablediffusion  pkg  sd-fastapi  sd-venv  webui.sh  work
(sd-fastapi) lswhh@DESKTOP-HQPQNKV:~$ cd fastapi_ml_stablediffusion/backend
(sd-fastapi) lswhh@DESKTOP-HQPQNKV:~$ pip install -r requirements.txt

2. 패키지 설치

그 뒤에 pip install -r requirements.txt를 수행해서 필요한 패키지들을 설치합니다. 

한참 동안 여러가지를 설치합니다. pytorch와 nvidia 관련 라이브러리들이 설치되는데 오래 걸리는 것 같습니다. 

3. 서비스 시작

설치가 완료되면 uvicorn을 이용해서 backend 서버를 실행합니다. 

uvicorn main:app --port 8885
.....
INFO:     Application startup complete.
INFO:     Uvicorn running on http://127.0.0.1:8885 (Press CTRL+C to quit)

서버를 실행시키면 모델을 다운로드 받고.. 열심히 뭔가를 다운 받습니다. 


4. frontend 설치 및 시작

frontend 디렉토리로 가서 다음의 명령을 수행합니다. 

먼저 nodeenv를 설치하여 npm을 사용할 수 있도록 합니다. 

(sd-fastapi) lswhh@DESKTOP-HQPQNKV:~/fastapi_ml_stablediffusion/frontend$ pip install nodeenv
Collecting nodeenv
  Downloading nodeenv-1.8.0-py2.py3-none-any.whl (22 kB)
Requirement already satisfied: setuptools in /home/lswhh/sd-fastapi/lib/python3.8/site-packages (from nodeenv) (44.0.0)
Installing collected packages: nodeenv
Successfully installed nodeenv-1.8.0
(sd-fastapi) lswhh@DESKTOP-HQPQNKV:~/fastapi_ml_stablediffusion/frontend$

이렇게 설치하면 가상환경에서 독립적인 node 환경을 추가하기 위해서 아래 명령을 수행합니다. 

(sd-fastapi) lswhh@DESKTOP-HQPQNKV:~/fastapi_ml_stablediffusion/frontend$ nodeenv -p
 * Install prebuilt node (20.4.0) ..... done.
 * Appending data to /home/lswhh/sd-fastapi/bin/activate
 * Appending data to /home/lswhh/sd-fastapi/bin/activate.fish
(sd-fastapi) lswhh@DESKTOP-HQPQNKV:~$ source sd-fastapi/bin/activate
(sd-fastapi) lswhh@DESKTOP-HQPQNKV:~$ npm
npm <command>

Usage:

npm install        install all the dependencies in your project
npm install <foo>  add the <foo> dependency to your project
npm test           run this project's tests
npm run <foo>      run the script named <foo>
npm <command> -h   quick help on <command>
npm -l             display usage info for all commands
npm help <term>    search for help on <term>
npm help npm       more involved overview

All commands:

    access, adduser, audit, bugs, cache, ci, completion,
    config, dedupe, deprecate, diff, dist-tag, docs, doctor,
    edit, exec, explain, explore, find-dupes, fund, get, help,
    help-search, hook, init, install, install-ci-test,
    install-test, link, ll, login, logout, ls, org, outdated,
    owner, pack, ping, pkg, prefix, profile, prune, publish,
    query, rebuild, repo, restart, root, run-script, search,
    set, shrinkwrap, star, stars, start, stop, team, test,
    token, uninstall, unpublish, unstar, update, version, view,
    whoami

이후 activate를 재수행하고 npm을 실행하면 정상적으로 npm이 실행됩니다. 

npm install을 통해 필요한 패키지를 설치합니다. 그리고 npm start를 합니다. 

(sd-fastapi) lswhh@DESKTOP-HQPQNKV:~/fastapi_ml_stablediffusion/frontend$ npm install
(sd-fastapi) lswhh@DESKTOP-HQPQNKV:~/fastapi_ml_stablediffusion/frontend$ npm start

Compiled successfully!

You can now view frontend in the browser.

  Local:            http://localhost:3000
  On Your Network:  http://172.31.80.156:3000

Note that the development build is not optimized.
To create a production build, use npm run build.

webpack compiled successfully


위와 같이 뜨고 아래와 같은 화면이 나타나나... 이미지 생성에 실패하였습니다. 

결과 화면 이미지 생성 실패



Tags