본문 바로가기
AI 도구

[Ollama 활용] 🤖AI 자동화로 손쉽게 앱 만들기: Maestro 설치 및 활용

by James AI Explorer 2024. 7. 2.
    728x90

    안녕하세요! 오늘은 간단한 텍스트 입력으로 다양한 애플리케이션을 제작할 수 있는 자동화 도구 Maestro를 소개해 드리겠습니다. Maestro는 Claude 3.5 Sonnet, GPT-4o, Gemini 1.5 Pro 등과 같은 AI 모델을 활용하여 사용자가 요청하는 목표를 하위 작업으로 분해하고, 각 작업을 실행한 뒤 산출된 결과를 종합하는 프로세스를 자동화 하는 혁신적인 프레임워크입니다. 이 블로그에서는 Maestro의 주요 기능, 설치 방법 및 사용법에 대해 알아보고 실제로 메모앱, 스네이크 게임, 한-영 번역기를 만들어 보겠습니다.  

    [Ollama 활용] 🤖AI 자동화로 손쉽게 앱 만들기: Maestro 설치 및 활용
    Maestro로 만든 메모 앱(좌), 스네이크 게임(우)

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

    Maestro 주요기능

    Maestro는 주어진 목표를 관리 가능한 하위 작업으로 분할하고, 각 하위 작업에 대한 실행 결과를 정제하여 일관된 형식의 최종 결과물로 통합하는 Python 기반 프레임워크입니다. 이 과정에서 Anthropic, OpenAI, Google AI, Ollama 등 다양한 API를 통해 Orchestrator 모델, Sub agent 모델, Refiner 모델을 지정해서, 오케스트레이션(조정) 작업, 하위 작업, 정제 작업을 실행하게 되며, 주요 기능은 다음과 같습니다: 

    • 목표 분해: 사용자가 요청한 목표를 Orchestrator 모델을 이용해서 세부 작업으로 나눕니다.
    • 작업 실행: Sub agent 모델을 이용해 각 하위 작업을 수행합니다.
    • 결과 정제: Refiner 모델을 통해 하위 작업 결과를 종합하여 최종 결과물을 생성합니다.
    • 상세 로그: 전체 과정을 기록한 교환 로그를 마크다운 파일로 저장합니다.
    • 코드 생성: 코드 프로젝트 작업 시 필요한 파일과 폴더를 타임스탬프와 함께 생성합니다.

    요약하면 사용자가 "HTML, CSS, JS를 이용해서 스네이크 게임을 만들어줘"라고 목표만 입력하면, Orchestrator, Sub agent, Refiner 모델이 협업하여 구현한 후, 완성된 결과물을 폴더에 저장하고, 마크다운 파일로 작업로그를 저장합니다. 

    아래 스크린샷은 "한국어로 입력하면 영어로 바뀌는 html, css, js로 번역기를 만들어줘." 라고 목표를 입력해서 만들어진 한-영 번역기 앱입니다. 

    Maestro로 만든 한-영 번역 앱 스크린샷

    728x90

    Maestro 설치방법

    다음은 Maestro 설치방법입니다. 이 블로그의 설치 환경은 Windows 11 Pro(23H2), WSL2, 파이썬 버전 3.11, 비주얼 스튜디오 코드(이하 VSC) 1.90.2이며, VSC를 실행하여 "WSL 연결"을 통해 Windows Subsystem for Linux(WSL) Linux 환경에 액세스 하도록 구성하였습니다. 작업순서는 다음과 같습니다.

    1. 다음 명령어로 깃 허브 저장소를 복제합니다.

    git clone https://github.com/Doriandarko/maestro.git

    2. 메인 디렉토리로 이동해서 가상환경을 만들고 활성화합니다.

    python3.11 -m venv myenv
    source myenv/bin/activate

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

    pip install rich litellm tavily-python

    4. maestro/maestro-anyapi.py 파일을 아래 파일로 바꿉니다. 깃 허브 저장소 원래 코드에서 NotRenderableError 수정, 결과물 저장 폴더명에 타임스탬프 추가, 결과파일 생성에러 처리 개선 등을 수정한 코드입니다. 

    maestro-anyapi3.py
    0.01MB

     

    5. VSC에서 위 단계에서 다운로드한 maestro-anyapi3.py 파일을 열고, 모델설정 부분에서 ORCHESTRATOR, SUB_AGENT, REFINER모델에 gemini-1.5-flash-latest를 동일하게 적용합니다.

    maestro-anyapi.py 모델 설정 수정

    각 모델을 다르게 설정할수도 있으며, Anthropic, OpenAI, Google AI, Ollama 등 다양한 모델 중에서 최적의 조합을 찾아볼수 있습니다. GEMINI_API_KEY는 아래 구글 AI 스튜디오에 접속해서 API 키를 생성해서 입력합니다. 

    https://aistudio.google.com/app/apikey

    구글 AI 스튜디오 API 키 생성화면

    DEMO 앱 만들기

    다음은 실제로 앱을 만들어 보는 단계입니다. API Key와 모델 설정이 완성된 코드 maestro-anyapi3.py를 실행하면 아래 화면과 같이 "Please enter your objective:"라고 나오며, 여기에 만들고자 하는 앱의 기능을 영어로 입력하면 됩니다.

    메모 앱

    메모 앱을 만들기 위해 아래와 같이 목표를 입력합니다.

    "Create a memo app with features for adding, deleting, and timestamping notes in html, css, js. Ensure the memo app saves notes so they aren't deleted when the browser closes, and can be reloaded upon reopening."

    "html, css, js로 메모를 추가, 삭제, 타임스탬프 기능을 가진 메모 앱을 만들어줘. 메모 앱이 브라우저가 닫힐 때 메모가 삭제되지 않고, 다시 열 때 다시 로드될 수 있도록 해줘."

     

    목표를 입력하면 AI 모델이 자동으로 HTML 구조와, 메모 저장/불러오기/삭제 기능 등을 차례로 구현하고, 코드가 완성되면 타임스탬프가 포함된 폴더명index.html, style.css, script.js 파일이 생성되고, 작업로그는 .md 파일로 저장됩니다.

    20240701_111125_Create_a_memo_app_with_fe.md
    0.02MB

     

    생성된 결과물의 실행방법은 VSC에서 확장프로그램 검색창에서 Live Server를 입력하고, 설치한 후, 생성된 index.html 파일을 오른쪽 마우스로 클릭하고 "Open with Live Server"를 선택하면, http://127.0.0.1:5500/MemoApp/MemoApp/index.html 주소에서 아래 화면과 같이 메모 앱이 열립니다. 

    VSC 확장프로그램 Live Server
    메모 앱 실행화면

    스네이크 게임

    다음은 스네이크 게임을 만들어 보겠습니다. 스네이크 게임  생성을 위한 목표입력 프롬프트는 다음과 같습니다. 

    "Create snake game with start button in html, css, js."

    "html, css, js로 시작 버튼이 있는 뱀 게임 만들어줘"

     

    메모 앱과 마찬가지로 AI 모델이 html, css, js를 자동으로 생성하고,  타임스탬프가 포함된 폴더명 index.html, style.css, script.js 파일을 생성하며, 작업로그는 .md 파일로 저장됩니다. 생성된 index.html 파일을 오른쪽 마우스로 클릭하고 "Open with Live Server"를 선택하면, http://127.0.0.1:5500/SnakeGame/SnakeGame/index.html 주소에서 아래 화면과 같이 스네이크 앱이 열립니다. 

    스네이크 게임 실행 화면

    한-영 번역기

    다음 만들어볼 앱은 한-영 번역기입니다. 한글을 입력하면 자동으로 영어로 번역된 텍스트가 출력되는 앱으로 다음과 같이 목표 프롬프트를 입력합니다. 

    "Make a translator with html, css, js which turns into English when I type in Korean."

    "한글을 입력하면 영어로 바뀌도록 html, css, js로 번역기를 만들어줘."

     

     index.html, style.css, script.js 파일이 생성된 후, script.js 파일의 apiUrl 항목에서 아래 화면과 같이 구글 클라우드 번역 API Key를 발급받아서 입력하고, index.html을 실행하면 됩니다. 

    구글 클라우드 번역 API Key 발급화면

    https://cloud.google.com/translate/docs?hl=ko

     

    Cloud Translation 문서  |  Google Cloud

    Google 번역과 프로그래매틱 방식으로 통합할 수 있습니다.

    cloud.google.com

    script.js apiUrl Key값 수정화면

    생성된 index.html 파일을 오른쪽 마우스로 클릭하고 "Open with Live Server"를 선택하면, http://127.0.0.1:5500/20240630_231525_KoreanTranslator/KoreanTranslator/index.html 주소에서 아래 화면과 같이 앱이 열립니다. 

    한-영 번역기 실행 화면

    Ollama 로컬 AI 모델의 사용법은 다음과 같습니다. 

    1. https://ollama.com/download에서 Ollama 클라이언트 설치

    2. `pip install ollama` 실행

    3. `ollama pull 모델명` 명령어로 모델 다운로드: gemma2, deepseek-coder-v2 모델을 추천합니다. 

    4. maestro-anyapi3.py 파일 수정: 아래와 같이 원하는 역할에 원하는 모델을 설정하면 됩니다. 

    Ollama 로컬 모델명 수정

    맺음말

    Maestro는 AI 기술을 통해 프로그래밍의 장벽을 낮추고, 누구나 손쉽게 다양한 애플리케이션을 제작할 수 있도록 돕는 혁신적인 프레임워크입니다. 이를 통해 여러분도 복잡한 코딩 과정 없이도 원하는 애플리케이션을 만들 수 있으며, 다양한 AI 모델의 조합을 통해 최적의 결과를 얻을 수 있습니다. Maestro를 활용하여 다양한 아이디어를 실현해 보세요. 

     

    Maestro를 사용해본 후기는 다음과 같습니다.

    • 누구나 손쉽게 목표기능을 설명하는 텍스트 입력만으로 프로그램을 만들수 있다. 
    • 한번 생성된 프로그램을 수정하는 기능이 없다. 
    • AI 모델의 성능에 따라 프로그램의 완성도가 결정된다. .

    Maestro의 간편하고 다양한 기능을 활용해서 더욱 창의적이고 혁신적인 결과물들을 만들어 보시길 바라면서 저는 다음 시간에 더 유익한 정보를 가지고 다시 찾아 뵙겠습니다. 감사합니다!

     

    https://fornewchallenge.tistory.com/

     

     

    2024.05.04 - [AI 도구] - 누구나 할 수 있는 AI 코딩! Llama3와 Claude3로 벽돌깨기 게임 1분 컷!

     

    누구나 할 수 있는 AI 코딩! Llama3와 Claude3로 벽돌깨기 게임 1분 컷!

    안녕하세요! 오늘은 요즘 가장 핫한 언어 모델 Llama3와 Claude3를 AI 코딩 어시스턴트로 활용해서 스네이크 게임과 벽돌 깨기 게임을 쉽게 코딩해 보겠습니다. 비주얼 스튜디오 코드(이하 VSCode)는

    fornewchallenge.tistory.com

     

     

    728x90