Mesop: 파이썬으로 UI 제작, 초보도 5분이면 Ollama 챗봇 완성!

안녕하세요! 오늘은 구글의 새로운 사용자 인터페이스(UI) 제작 소프트웨어 Mesop을 소개해드리겠습니다. Mesop은 JavaScript, CSS, HTML 등 프론트엔드 지식 없이도 Python 함수로 직관적인 UI  컴포넌트를 작성할 수 있으며, 자동 새로고침과 강력한 개발 도구 지원으로 빠르게 작업을 수정하고 테스트할 수 있습니다. 이 블로그에서는 Mesop의 개요와 주요 기능 및 특징을 알아보고 Ollama 모델을 이용해서 Mesop 챗봇 프로그램을 만들어 보겠습니다. 

Mesop: 파이썬으로 UI 제작, 초보도 5분이면 Ollama 챗봇 완성!

"이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다."

Mesop 개요

Mesop은 Python 기반의 UI 프레임워크로, Python 함수로 텍스트 입력창, 버튼, 체크박스와 같은 UI 컴포넌트를 작성해 직관적인 UI 개발을 지원합니다. 반응형 UI 패러다임을 채택하여 데이터 변화에 따른 UI 업데이트를 쉽게 구현할 수 있으며, 자동 새로고침과 풍부한 통합 개발 환경 지원으로 개발 효율성을 높입니다. 또한, 기존의 HTML, CSS, JavaScript 학습 없이도 친숙한 Python을 사용해 효과적으로 웹 애플리케이션을 개발할 수 있습니다.

 

https://google.github.io/mesop/

Mesop

 

MESOP 주요 기능 및 특징은 다음과 같습니다. 

• 직관적인 UI 개발: Mesop의 가장 큰 장점 중 하나는 UI를 Python 코드로 작성할 수 있다는 점입니다. Python 함수로 구성된 컴포넌트를 사용해 UI를 작성함으로써, 기존의 프론트엔드 언어를 배울 필요 없이 친숙한 언어로 작업이 가능합니다. 
• 반응형 UI 패러다임: Mesop은 반응형 UI 패러다임을 지원하여, 데이터 변화에 따른 UI 업데이트를 손쉽게 구현할 수 있습니다. 이를 통해 개발자는 복잡한 상태 관리 없이도 동적인 사용자 인터페이스를 구축할 수 있습니다. 
• 풍부한 통합 개발 환경 지원: Mesop은 강력한 타입 안전성과 함께 풍부한 IDE 지원을 제공하여, 개발 중 발생할 수 있는 오류를 최소화하고 생산성을 높입니다. 핫 리로드(Hot Reload) 기능을 통해 코드 변경 시 실시간으로 브라우저가 자동으로 상태를 유지하며 새로고침됩니다. 
• 재사용 가능한 컴포넌트: Mesop은 재사용 가능한 컴포넌트 구조를 채택하여 모듈화 된 UI 개발을 지원합니다. 복잡한 UI도 작은 컴포넌트로 분할하여 관리할 수 있어, 유지보수가 용이합니다. 

728x90

Mesop 챗봇 만들기

다음은 Mesop을 이용해서 간단한 Ollama 챗봇을 만들어 보겠습니다. 이 블로그의 개발 환경은 Windows 11 Pro(23H2),  Python 3.11, VSCode 1.89.1, i9-13900H/2.60 GHz/16GB, RTX4060입니다. 작업순서는 다음과 같습니다.

1. conda 가상환경 생성 및 활성화

먼저 VSCode에서 작업 디렉토리를 만들고 conda 가상환경을 생성, 활성화합니다. 

conda create -n mesop python=3.11
conda activate mesop

conda 가상환경 생성

2. Mesop 의존성 설치

다음은 가상환경이 활성화된 상태에서 다음 명령어로 Mesop 의존성을 설치합니다. 

pip install mesop openai google-generativeai ollama groq llama-index llama-index-llms-anthropic langchain-community

Mesop 의존성 설치

다음은 Ollama가 설치된 상태에서 "ollama pull qwen2" 명령어로 Qwen2 모델을 다운로드합니다. 

ollama qwen2 모델 다운로드

3. 파이썬 코드 작성

이 코드의 동작 원리는 Mesop과 Ollama를 사용하여 웹 기반의 챗봇을 만드는 것입니다. 여기서는 Mesop을 통해 웹 페이지를 만들고, Ollama API를 사용해서 "Qwen2" 언어모델이 사용자의 입력에 따라 응답을 생성합니다. 코드의 흐름을 요약하면 다음과 같습니다. 

• 1. 사용자가 웹 페이지에서 메시지를 입력합니다.
• 2. Mesop은 이 메시지를 `transform` 함수에 전달합니다.
• 3. `transform` 함수는 메시지 기록과 현재 입력을 모아 Ollama API에 전달합니다.
• 4. Ollama API는 대화 모델을 통해 응답을 생성하고, 이 응답을 실시간으로 `transform` 함수로 스트리밍 합니다.
• 5. `transform` 함수는 Ollama의 응답을 추출하고, Mesop 인터페이스를 통해 사용자에게 반환합니다.

이 과정에서 Mesop은 UI를 처리하고, Ollama는 대화 응답을 처리하여 사용자에게 동적인 대화 경험을 제공합니다. 

VSCode에서 새 파이썬 파일을 생성하고, 아래 코드를 복사해서 main.py로 저장합니다. 

import ollama
import mesop as me
import mesop.labs as mel

@me.page(
    security_policy=me.SecurityPolicy(
        allowed_iframe_parents=["https://google.github.io"]
    ),
    path="/",
    title="Mesop Demo Chat",
)
def page():
    mel.chat(transform, title="Ollama Mesop Chat", bot_user="Mesop Bot")

def transform(input: str, history: list[mel.ChatMessage]):
    system_prompt = {"role": "system", "content": "Answer in Korean"}

    # Ollama API에 보낼 메시지 형식 구성
    messages = [{"role": "user", "content": message.content} for message in history]
    messages.append({"role": "user", "content": input})
    
    # Ollama 챗봇 API 호출
    stream = ollama.chat(model='qwen2', messages=messages, stream=True)
    
    for chunk in stream:
        content = chunk.get('message', {}).get('content','')
        if content:
            yield content

 

코드의 동작 원리는 다음과 같습니다. 

• 라이브러리 임포트: 이 코드는 Ollama API와 Mesop 라이브러리를 임포트 합니다. Ollama는 챗봇 기능을 제공하고, Mesop은 웹 인터페이스를 구축하는 데 사용됩니다.
• 페이지 설정: `@me.page` 데코레이터는 Mesop 페이지를 정의합니다. `security_policy`는 페이지 보안 정책을 설정하며, iframe에서 특정 도메인에서만 접근을 허용하고, `mel.chat` 함수는 대화형 채팅 인터페이스를 생성하며, `transform` 함수를 통해 챗봇 응답을 처리합니다.
• 데이터 변환 함수 (`transform`): `system_prompt`로 Ollama 언어 모델에게 "Answer in Korean"이라고 요청합니다. 
• 메시지 구성: `history`를 통해 이전 대화의 메시지를 `messages` 리스트로 변환합니다. 사용자가 입력한 `input` 메시지를 리스트에 추가합니다.
• Ollama API 호출: `ollama.chat`을 호출하여 `qwen2` 모델을 사용해 챗봇 대화를 처리합니다. `messages` 리스트를 인자로 주며, `stream=True`로 설정하여 스트리밍 방식으로 응답을 받습니다.
• 응답 처리: 스트리밍 응답 `chunk`에서 `message`의 `content`를 추출합니다. 응답이 있으면 이를 `yield`를 통해 반환하여 사용자에게 실시간으로 표시합니다. 

4. Mesop 실행

"mesop main.py" 명령어를 입력해서 코드를 실행하면 http://localhost:32123/ 주소에서 아래와 같이 화면이 열립니다. 

mesop main.py 실행

Ollama Mesop Chat 화면

Ollama Mesop Chat에서 Qwen2 모델과의 대화

브라우저 오른쪽의 패널은 Mesop의 Visual Editor 기능입니다. 이 패널은 UI 컴포넌트를 시각적으로 편집할 수 있는 도구로, 이 기능을 사용하면 복잡한 코딩 없이도 Mesop 기반 UI의 레이아웃과 동작을 손쉽게 변경할 수 있어, 비개발자도 직관적으로 UI를 편집할 수 있습니다.

Mesop의 Visual Editor 기능

 

맺음말

Mesop은 Python 개발자들에게 웹 애플리케이션 개발의 새로운 가능성을 열어주는 프레임워크입니다. 비전문가도 쉽게 접근할 수 있는 사용자 인터페이스 화면 설계와 신속한 개발 워크플로우를 제공하여, 웹 개발의 복잡성을 크게 줄여줍니다.

 

Mesop으로 Ollama 챗봇을 만들어본 느낌은

1. 설치와 구현이 매우 간단하다.

2. 코드를 변경하면 실시간으로 웹 애플리케이션에 반영돼서 편리하다.

3. 다양한 UI를 파이썬 함수로 구현할 수 있다. 

 

여러분도 Mesop을 이용하시면 간단한 웹 챗봇 프로그램을 쉽게 만드실 수 있을 것 같습니다. 오늘 블로그 내용은 여기까지입니다. 그럼 저는 다음 시간에 더 유익한 정보를 가지고 다시 찾아뵙겠습니다. 감사합니다. 

 

 

https://fornewchallenge.tistory.com/

 

 

2024.05.31 - [AI 언어 모델] - 🌟코딩 혁신: Codestral - 미스트랄이 만든 AI 코드 생성 끝판왕!🚀

🌟코딩 혁신: Codestral - 미스트랄이 만든 AI 코드 생성 끝판왕!🚀