TOPIC/Data

Streamlit으로 웹 애플리케이션 만들어보기

H-Y-E-N 2024. 4. 19. 15:31

안녕하세요. HYEN입니다.

이전 글에 이어 Streamlit으로 실제 데이터 웹 애플리케이션을 만들어 보는 테스트에 대해 다뤄보겠습니다. 

이전 글 : https://with-cloud.tistory.com/40

 

Streamlit이란?

안녕하세요. HYEN입니다. 오늘은 기존에 다루던 부분과 조금은 다른 분야의 내용을 다뤄보고자 합니다. 바로 Python 기반의 웹 개발 프레임워크인 Streamlit입니다! 우연한 기회에 접하게 되었는데 웹

with-cloud.tistory.com


Contents

     

    1. 환경 구성 

    먼저 Streamlit으로 데이터 웹 애플리케이션을 만들기 전 사전에 구성하거나 설치해야 하는 것들에 대해 알아보도록 하겠습니다. 

     

    ※ 본 테스트는 Local PC가 아닌 가상 머신에서 진행되었습니다.※

     

    1.1 Visual Studio Code 설치

    Download Visual Studio Code - Mac, Linux, Windows로 이동하여 테스트 환경 OS에 맞는 Visual Studio Code 설치 파일을 다운로드 합니다. 

     

    Download Visual Studio Code - Mac, Linux, Windows

    Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows. Download Visual Studio Code to experience a redefined code editor, optimized for building and debugging modern web and cloud applications.

    code.visualstudio.com

     

    저는 Windows11 가상 머신을 사용하기 때문에 Windows용 System Installer x64를 다운로드 받습니다. 

     

    하기와 같이 "I accept the agreement"로 옵션을 변경하는 것 외 기본 설정을 유지하고 [Next >]를 클릭합니다.

     

     

    마지막으로 [Install] 버튼을 클릭하여 Visual Studio Code 설치를 완료합니다.

     

    마지막으로, Streamlit이라는 이름의 folder를 하나 생성합니다. 

     

    1.2 python 설치 

    Download Python | Python.org로 이동하여 테스트 환경 OS에 맞는 python 설치 파일을 다운로드 합니다. 

     

    Download Python

    The official home of the Python Programming Language

    www.python.org

     

    저는 Visual Studio Code 설치 시와 마찬가지로 Windows용 파일을 다운로드 받습니다. 

     

    설치 파일을 실행한 후 [Install Now] 버튼을 클릭하여 설치를 진행합니다.

    하단의 "Use admin privileges when installing py.exe"와 "Add python.exe to PATH" 체크박스를 클릭해 줍니다.

     

    Visual Studio Code를 재실행한 후에 [Ctrl + Shift + `]를 눌러 터미널을 실행합니다. 

    터미널 창에 python을 입력했을 때 상기 스크린샷처럼 출력된다면 python 설치가 정상적으로 진행된 것입니다. 

     

    1.3 Streamlit 설치

    Streamlit을 설치하기 위해 로 이동하여 [Get started] > [Installation] > [Use command line]을 클릭합니다.

     

    python -m venv .venv 명령어로 가상 환경을 만들어도 되지만 저는 Streamlit을 그냥 VM 환경에 설치해 보겠습니다. 

     

    • pip install streamlit 명령어를 입력하여 Streamlit을 설치합니다. 
    • streamlit hello를 입력하여 Hello는 example app을 실행합니다. 
      Email 입력의 경우 그냥 [Enter]를 눌러도 됩니다. 

     

    • 명령어가 실행되면 네트워크 허용에 대한 메시지 창이 뜹니다. [Allow]를 클릭하면 하기 스크린샷과 같은 Sample Web page가 생성된 것을 확인할 수 있습니다.


    2. 웹 페이지 생성해 보기 

    2.1 "Hello World" app 생성하기 

    https://docs.streamlit.io/get-started/installation/command-line#create-a-hello-world-app-and-run-it의 가이드를 따라서 Hello World app을 생성한 후 실행해 보겠습니다. 

     

    Streamlit Docs

    Join the community Streamlit is more than just a way to make data apps, it's also a community of creators that share their apps and ideas and help each other make their work better. Please come join us on the community forum. We love to hear your questions

    docs.streamlit.io

     

    먼저 Streamlit이라는 폴더 내에 helloworld라는 이름의 폴더를 하나 더 생성한 후 cd helloworld 명령어를 입력하여 working directory를 변경합니다. 

    (이어서 테스트할 다른 app들과 환경을 분리하기 위함입니다.) 

     

    test.py라는 파일을 helloworld 폴더 하위에 생성합니다. 

     

    test.py 파일을 열고 하기 코드를 입력합니다. 

    import streamlit as st
    
    st.write("Hello world")

     

    작성을 완료한 후 저장을 눌러 변경 사항을 저장합니다. 

     

    streamlit run test.py 명령어를 실행합니다. 

     

    자동으로 하기 페이지가 로딩되며 "Hello world"라는 문구가 출력되어 있는 것을 확인할 수 있습니다. 

     

    다소 심플한 감이 있어 Docs의 API Reference 탭의 sample 코드를 가지고 To Do List를 만들어 보겠습니다. 

     

    https://docs.streamlit.io/develop/api-reference로 이동하여 "Input widgets"를 클릭합니다. 

     

    Streamlit Docs

    Join the community Streamlit is more than just a way to make data apps, it's also a community of creators that share their apps and ideas and help each other make their work better. Please come join us on the community forum. We love to hear your questions

    docs.streamlit.io

     

    "Checkbox"를 클릭합니다.

     

    코드를 복사해서 앞서 생성한 test.py 파일에 붙여 넣습니다.

     

    그냥 붙여 넣어도 되지만 To Do List이기 때문에 하기 코드와 같이 항목을 두 개 더 추가하고 체크박스가 모두 체크되면 "You did EVERYTHING! 👍🏻"이 출력되도록 하였습니다. 

    또한 To Do List라는 제목을 가장 상단에 표시되도록 하고 색은 무지개 색으로 보이도록 코드를 추가해 주었습니다. 

    import streamlit as st
    
    st.title(':rainbow[To Do List] :rainbow:')
    
    work = st.checkbox('Work')
    gym = st.checkbox('Go to gym')
    book = st.checkbox('Read a book')
    
    if work and gym and book:
        st.write('You did EVERYTHING! :thumbsup:')

     

    코드를 작성한 후 [Ctrl + s] 버튼을 눌러 변경 사항을 저장합니다. 

    그 후 streamlit run test.py 명령어를 실행합니다. 

     

    웹 페이지가 실행되면서 하기 스크린샷과 같은 페이지가 보입니다. 

    체크 박스를 다 누르면 "You did EVERYTHING! 👍🏻"이라는 문구가 출력되는 것을 확인할 수 있습니다.

     

    참고로 Streamlit에서 지원하는 emoji의 shortcode들에 대한 정보는 하기 링크에서 확인하실 수 있습니다. 

    https://streamlit-emoji-shortcodes-streamlit-app-gwckff.streamlit.app/

     

    A faster way to build and share data apps

    App showing all the emoji shortcodes supported by Streamlit

    streamlit-emoji-shortcodes-streamlit-app-gwckff.streamlit.app

     

    2.2 LangChain을 사용하여 LLM app 생성하기 

    다음은 LangChain을 사용하여 LLM app을 생성하는 테스트를 진행해 보도록 하겠습니다.

     

    LangChain❓ LLM❓이 무엇일까요?

    우선 이 두 가지 개념에 대해서 간단히 설명하고 넘어가도록 하겠습니다.

     

    LangChain이란?

    LangChain은 대규모 언어 모델(LLM)을 기반으로 한 애플리케이션을 개발하기 위한 오픈 소스 프레임워크입니다. 
    개발자들이 기존의 언어 모델을 쉽게 연동하고 확장할 수 있도록 다양한 도구와 인터페이스를 제공합니다.
    따라서 LangChain은 특히 대화형 AI 시스템을 구축하는 데 많이 사용되고 있습니다.  

     

    LLM이란?

    LLM(Large Language Models)은 대규모 언어 모델을 의미하며, 대량의 데이터셋을 학습하여 자연어 이해 및 생성 능력을 갖춘 모델입니다. 
    딥러닝 방식으로 패턴을 분석하고 의미를 추출하여 인간의 방식으로 답을 생성하도록 훈련되었습니다.

    OpenAI의 ChatGPT, 메타(구 페이스북)의 LLaMA와 같은 모델이 대표적인 LLM 모델입니다. 

     

    주요 개념에 대해서 알아 보았으니 지금부터 LangChain을 사용하는 LLM app을 생성해 보도록 하겠습니다. 

     

    Streamlit Docs 중 "Build an LLM app using LangChain" 문서를 참고하여 생성합니다.

    https://docs.streamlit.io/develop/tutorials/llms/llm-quickstart

     

    Streamlit Docs

    Join the community Streamlit is more than just a way to make data apps, it's also a community of creators that share their apps and ideas and help each other make their work better. Please come join us on the community forum. We love to hear your questions

    docs.streamlit.io

     

    먼저, llmapp이라는 폴더를 새로 생성합니다.

     

    이후 터미널에서 cd ../llmapp 명령어를 입력하여 working directory를 변경합니다. 

    그리고 해당 위치에 app.py라는 이름의 파일을 하나 생성합니다.

     

    여기까지 했다면 2.1 과정과는 다르게 추가적으로 해주어야 하는 것이 있습니다.

    바로 OpenAI key를 생성하는 것입니다. 

     

    참고로 API Key를 사용하기 위해서는 Paid User여야 합니다. (최소 $5의 비용이 발생합니다.) 

     

    여기로 이동하여 로그인을 합니다. (계정이 있어야 합니다. 없다면 생성해야 합니다.)

    하기와 같은 페이지가 뜨면 [+ Create new secret key]를 클릭하여 새로운 API Key를 생성합니다. 

     

    API Key의 이름을 입력한 후 [Create secret key] 버튼을 클릭합니다. 

     

    하기 스크린샷과 같이 API Key가 출력되면 [Copy] 버튼을 클릭하여 해당 Key를 복사합니다.

    (해당 키는 해당 창을 나가면 다시 볼 수 없기 때문에 꼭 메모장과 같은 곳에 저장해 두어야 합니다.)

     

    정상적으로 생성이 되면 하기와 같이 Project API keys 리스트에 방금 생성한 API Key가 출력되게 됩니다.

     

    다시 Visual Studio Code로 돌아와 pip install openai langchain 명령어를 입력하여 필요한 Python 라이브러리를 설치합니다. (Streamlit은 이미 설치했기 때문에 생략합니다.)

     

    그 다음 현재 폴더에 requirements.txt라는 파일을 생성합니다.

    그리고 streamlit openai langchain를 해당 파일에 적어 줍니다.

     

    app.py 파일에 하기 코드를 입력해 줍니다.

    import streamlit as st
    from langchain.llms import OpenAI
    
    st.title('🦜🔗 Quickstart App')
    
    openai_api_key = st.sidebar.text_input('OpenAI API Key', type='password')
    
    def generate_response(input_text):
        llm = OpenAI(temperature=0.7, openai_api_key=openai_api_key)
        st.info(llm(input_text))
    
    with st.form('my_form'):
        text = st.text_area('Enter text:', 'What are the three key pieces of advice for learning how to code?')
        submitted = st.form_submit_button('Submit')
        if not openai_api_key.startswith('sk-'):
            st.warning('Please enter your OpenAI API key!', icon='⚠')
        if submitted and openai_api_key.startswith('sk-'):
            generate_response(text)

     

    코드에 대해 간략하게 설명을 해보자면 다음과 같습니다.

    • Line 1, 2를 통해 필요한 Python 라이브러리를 import 합니다. 

    • Line 4를 통해 페이지의 제목을 적어줍니다. 

    • Line 6을 통해 OpenAI API Key를 입력할 수 있는 input text box를 생성합니다.

    • Line 8-10을 통해 OpenAI API Key를 가지고 Open AI에 인증하고, prompt를 보내고 AI가 생성한 응답을 받을 수 있도록 하는 함수를 정의합니다. 이 함수는 user의 요청을 받아 AI가 생성한 응답을 st.info를 사용하여 파란색 박스에 출력하도록 하는 함수입니다. 

    • 마지막으로 Line 12-18에서 st.form()을 사용하여 사용자 입력을 위한 text box를 생성합니다. st.text_area()를 사용자가 Submit이라는 버튼을 클릭하면, 사용자의 입력을 인수로 사용하는 generate-response()라는 함수가 호출됩니다. 

     

    파일을 저장한 후 streamlit run app.py 명령어를 실행합니다. 

     

    웹 페이지가 실행되면서 하기와 같은 화면이 출력됩니다.

     

    앞서 생성한 OpenAI API Key를 좌측 상단의 [OpenAI API Key] 박스에 입력한 후 질문을 입력합니다.

     

    "What is a dog?"라는 질문에 대한 대답이 하기 스크린샷과 같이 파란색 박스 안에 출력되는 것을 알 수 있습니다. 

     

    2.3 간단한 app 만들어 보기 

    마지막으로 문장을 입력하면 image를 생성해 주는 app에 대한 GitHub 소스 코드를 clone 해서 애플리케이션을 build 해 보겠습니다. 

     

    본 테스트는 Youtube의 AI Image Generation Streamlit App이라는 영상의 소스 코드를 사용하였습니다.

     

    git clone https://github.com/AIAnytime/AI-Image-Generation-Streamlit-App ai-image-generator 명령어를 사용하여 git clone을 진행합니다. 

     

    cd ai-image-generator를 입력하여 working directory를 이동합니다. 

     

    코드는 수정하지 않고 필요한 라이브러리와 환경 변수만 추가로 설치해 줍니다. 

     

    먼저 라이브러리를 설치하기 위해 하기 명령어를 입력합니다.

    1. pip install --upgrade diffusers[torch]

    2. pip install sentencepiece

    3. pip install --upgrade diffusers transformers accelerate

    4. pip install transformers

     

    설치가 완료되면 하기 스크린샷에 있는 "OPENAI_API_KEY"라는 변수에 대한 값을 입력해 주기 위해 현재 폴더 내에 .env라는 파일을 하나 생성합니다. 

     

     

    그리고 .env 파일에 다음과 같이 작성합니다.

    Key 값은 2.2 과정에서 사용했던 OpenAI API Key를 입력해 주면 됩니다. 

     

    파일을 저장한 후에 터미널에서 streamlit run app.py 명령어를 실행합니다. 

     

    만약 웹 페이지 실행 시 하기와 같은 에러가 발생할 경우,

    OSError: [WinError 126] The specified module could not be found. Error loading "C:\Users\hyein\AppData\Local\Programs\Python\Python312\Lib\site-packages\torch\lib\c10.dll" or one of its dependencies.

     

    VS2019 redist를 설치하면 됩니다. (설치 링크 : https://aka.ms/vs/16/release/vc_redist.x64.exe)

     

    웹 페이지가 정상적으로 보이면 좌측의 드롭다운 버튼을 클릭하여 "DALL-E"를 선택합니다.

    .

    원하는 문장을 입력합니다. 

    저는 예시로 "Cats are playing badminton in the jungle. cartoon style."이라는 문장을 입력해 보았습니다. 

    그 후 [Generate Image] 버튼을 누르면 이미지를 생성해 줍니다. 

     

    실제로 생성해 준 그림은 하기와 같습니다.

     

    계속 보니 의미는 모르겠지만 귀여운 것 같습니다.

    물론 제일 왼쪽에 있는 고양이랑 배드민턴은 뭔지 모르겠지만... 

     


    이렇게 Streamlit 테스트를 완료해 보았습니다. 

    직접 해 보니까 확실히 Streamlit은 빠르게 애플리케이션을 생성하기에 굉장히 강력한 도구라는 생각이 듭니다.

    운영을 목적으로는 사용해 보지 않았지만 해당 부분은 다소 한계가 있을 거 같다는 생각도 듭니다. 

    그래도 여전히 쉽게 AI와 관련된 애플리케이션을 생성해 보기에 아주 좋은 도구라는 점에서 관심 있으신 분들은 사용해 보시는 것을 추천 드립니다. 🤩

     

    728x90
    320x100
    SMALL