본문 바로가기
AI 도구

🌐✨Page Assist: Ollama 기반 웹 브라우저 AI Co-pilot 설치 및 사용법

by James AI Explorer 2024. 5. 30.
    728x90

    안녕하세요!! 오늘은 Ollama를 활용해서 웹 브라우저 Co-pilot으로 사용할 수 있는 Page Assist라는 크롬 확장 프로그램을 소개해 드리겠습니다. Page Assist는 로컬 AI 모델과 상호 작용할 수 있는 사이드바웹 UI를 제공하는 오픈 소스 크롬 확장 프로그램입니다. 이 확장 프로그램은 웹페이지에서 로컬 AI 모델과 상호 작용할 수 있으며, 로컬 파일 RAG, 음성 프롬프트 입력, 이미지 입력, 인터넷 검색, Ollama 모델 관리 등 다양한 기능을 제공합니다. 이 블로그에서는 Page Assist의 주요 기능과 설치방법에 대해서 알아보겠습니다. 

    Page Assist: Ollama 기반 웹 브라우저 AI Co-pilot 설치 및 사용법

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

    Page Assist 주요 기능

    Page Assist는 로컬 AI 모델과 상호 작용할 수 있는 오픈 소스 크롬 확장 프로그램입니다. 웹페이지 어디서나 사이드바를 통해 AI 모델과 채팅하고 결과를 확인할 수 있으며, 웹 UI를 통해 ChatGPT와 유사한 인터페이스로 모델과 대화할 수 있습니다. Node.js와 Ollama를 사용하여 설치 및 빌드가 가능하며, Chrome, Firefox, Brave 등 다양한 브라우저를 지원합니다. 개인정보는 수집하지 않으며 모든 데이터는 로컬에 저장됩니다.

     

    Page Assist의 주요 기능은 다음과 같습니다:

    • 사이드바 (Sidebar): 유연하고 편리한 사이드바를 통해 웹페이지 어디서나 로컬 AI 모델과 실시간으로 상호 작용할 수 있습니다.
    • 웹 UI (Web UI): 매우 직관적이고 사용자 친화적인 웹 인터페이스를 제공하여 ChatGPT 웹사이트와 유사한 몰입감 있는 대화 경험을 할 수 있습니다.
    • 웹페이지와 채팅 (Chat With Webpage): 웹페이지와 직접적으로 채팅하면서 콘텐츠에 대한 질문을 즉각적으로 할 수 있습니다.
    • 문서 파일 RAG: pdf, csv, txt, md, docx 등 다양한 형태의 문서를 지식으로 사용할 수 있습니다. 
    • 다양한 브라우저 지원: Chrome, Firefox, Brave 등 다양한 인기 브라우저에서 완벽하게 작동합니다.
    • 개발 모드 (Development Mode): 개발자 친화적인 모드를 통해 확장 프로그램을 손쉽게 수정하고 신속하게 테스트할 수 있습니다.
    • 개인정보 보호 (Privacy): Page Assist는 개인 데이터를 수집하지 않으며, 모든 데이터는 안전하게 로컬 브라우저에 저장됩니다.
    • 기타: 시스템 프롬프트 설정기능, Ollama 모델 관리, TTS/STS 기능, 테마 기능 등 다양한 기능을 제공합니다. 

    다음은 각 기능에 대해 좀 더 자세히 살펴보겠습니다. 

    1. Ollama 로컬 AI 모델 상호 작용

    Page Assist는 Ollama에서 다운로드한 언어 모델을 사용하려면 아래 화면과 같이 설정 메뉴에서 Ollama URL을 설정해 주면 됩니다. Ollama URL은 http://127.0.0.1:11434입니다. 언어 모델은 이번에 Cohere에서 공개한 Aya 23을 추천합니다.

    Ollama URL 설정

    2. 로컬 파일 RAG 기능

    Page Assist에서 지원하는 pdf, csv, txt, md, docx와 같은 파일의 내용을 검색하고 대화할 수 있는 RAG 기능을 사용하려면 다음 화면과 같이 설정메뉴에서 "Manage Knowledge"를 클릭하고 내 컴퓨터의 문서파일을 입력하면 됩니다. 

    Manage Knowledge 설정화면

    문서 파일을 등록한 후, 설정 메뉴의 "RAG Setting"에서 엠베딩 모델을 선택하고 Chunk Size Chunk Overlap 크기를 아래 화면과 같이 설정합니다. 이 설정값은 RAG 응답속도를 결정하므로, 최적의 값으로 조정하면 됩니다. 엠베딩 모델이 없는 경우, nomic-embed-text나mxbai-embed-large 등 원하는 엠베딩 모델을 Ollama에서 다운로드합니다. 

    RAG 설정 화면
    채팅창 우측 지식 선택 아이콘
    pdf 문서 RAG 테스트 화면

    위 화면은 "AutoCoder" 논문 파일을 Knowledge에 등록하고, Llama3 언어모델을 사용하여 AutoCoder의 Java 성능 벤치마크 결과를 질문을 해본 테스트 화면인데요, 아래 표시된 벤치마크 결과값 61.4%를 정확하게 찾아서 응답하였습니다. 

    AutoCoder Java성능 벤치마크 결과 RAG 테스트 확인 화면

    3. 사이드 바(Side Bar)

    사이드 바 기능은 현재 페이지의 내용에 대해서 요약, 질문 등 대화할 수 있는 기능으로, 브라우저 상단 툴바에서 확장 프로그램 아이콘을 클릭하고,  Page Assist 고정핀 오른쪽 메뉴에서 "Open Copilot to Chat"을 클릭하면 사이드바를 열 수 있습니다.

    사이드 바 화면
    사이드 바 페이지 요약 기능

    4. 이미지 입력 기능

    Page Assist는 Llava 모델과 같은 비전 모델을 활용할 수 있도록 이미지 입력 기능을 지원합니다. 아래 화면은 Llava 모델의 응답을 브라우저 번역기능으로 번역한 화면입니다. 

    Llava 모델 이미지 설명 응답화면

    5. STT(SpeechToText)/TTS(TextToSpeech) 기능

    Page Assist는 STT기능을 통해 음성으로 프롬프트를 입력할 수 있으며, TTS기능으로 언어 모델이 응답한 텍스트를 음성으로 변환하여 사용자에게 읽어주는 기능을 지원합니다. 

    SpeechToText(좌), TextToSpeech(우)

    6. 인터넷 검색 기능

    또한, Page Assist는 설정메뉴에서 아래화면과 같이 구글, DuckDuckGo와 같은 검색엔진을 선택하고, 메시지 입력창 아래 인터넷 검색 옵션을 활성화하면 사용자의 질문에 인터넷 검색을 통해 답변할 수 있습니다. 

    검색엔진 설정화면
    인터넷 검색 기능
    인터넷 검색을 통한 뉴스 내용 응답화면
    인터넷 검색을통한 날씨정보 응답화면

    7. Ollama 모델 관리

    Page Assist는 아래 화면과 같이 Ollama 모델 추가, 삭제, Re-Pull과 같은 기능을 웹 UI를 통해 관리할 수 있습니다. 

    웹 UI를 통한 Ollama 모델 추가 화면

    8. 시스템 프롬프트 기능

    시스템 프롬프트는 언어 모델이 동작하는데 필요한 기본적인 사용자의 요구사항을 작성하여 언어 모델의 응답 지침이나 동작을 지시하는 프롬프트입니다. 저는 매번 한국어로 번역하지 않아도 되도록 "Answer in Korean"으로 입력하여 Aya 23과 같은 멀티링구얼(Multi-lingual) 모델이 매번 요청하지 않아도 한국어로 대답하도록 시스템 프롬프트를 아래 화면과 같이 작성하였습니다. 

    한국어로 대답하도록 요청하는 시스템 프롬프트 적용화면

    아래 화면을 보시면 영어로 질문하였지만 응답은 별도의 지시가 없이도 한국어로 대답하는 것을 확인할 수 있습니다. 

    한국어 대답 시스템 프롬프트 적용결과

    728x90

    설치방법

    Page Assist는 Chrome, Brave, Edge, Firefox와 같은 Chromium 기반 브라우저를 지원하며, 설치 방법은 다음과 같습니다.

    이 블로그의 설치환경은 Windows 11 Pro(23H2),  파이썬 버전 3.11, 비주얼 스튜디오 코드(이하 VSCode), 하드웨어는 CPU  i9-13900H, 2.60 GHz, RAM 16GB, GPU RTX4060입니다.

    브라우저 확장 프로그램 설치방법

    크롬 계열 브라우저는 확장 프로그램 검색에서 Page Assist를 검색해서 간단하게 설치하실 수 있습니다. 

    확장 프로그램 검색 및 설치

    설치 후에는 브라우저 상단 툴바에서 확장 프로그램 아이콘을 클릭하고 Page Assist의 고정핀을 클릭한 후, 바로 오른쪽 메뉴에서 "Open Copilot to Chat"을 클릭하면 사이드바에서 Page Assist를 사용할 수 있습니다. 

    브라우저 상단 툴바 확장 프로그램 아이콘 클릭

    Edge 브라우저에서는 크롬용 웹 스토어에서 확장 프로그램을 검색하고 설치할 수 있습니다. 

    Edge에서 크롬 확장 프로그램 설치
    Edge에서 크롬용 확장 프로그램 설치

    개발자 모드 수동 설치방법

    Page Assist를 설치하는 두 번째 방법은 개발자 모드인데요, 개발자 모드로 설치하기 위한 전제 조건은  다음과 같습니다. 

    수동 설치 순서는 다음과 같습니다. 

    1. 저장소 클론: 아래 명령어를 이용해서 깃허브 레포지토리를 복제하고 작업디렉토리로 이동합니다.

    git clone https://github.com/n4ze3m/page-assist.git
    cd page-assist

    2. 의존성 설치: 아래 명령어로 Page Assist 설치와 실행에 필요한 의존성을 설치합니다. 

    npm install

    의존성 설치 화면

    저는 의존성 설치단계에서 에러가 발생했는데 해결하기가 어려워서 그냥 빌드단계로 넘어갔습니다. 

    의존성 설치 에러

    3. 확장 프로그램 빌드: 프로그램을 배포하기 위한 빌드단계로, 아래 명령어를 사용해서 브라우저 종류에 따라 실행합니다. 

    Chrome용 빌드: npm run build 
    Firefox용 빌드: npm run build:firefox

    확장 프로그램 빌드

    4. 확장 프로그램 로드: 주소창에 확장 프로그램 관리페이지 주소를 입력하고 이동해서 개발자 모드를 활성화하고 '압축 해제된 확장 프로그램 로드' 버튼 클릭 후 빌드 디렉토리를 선택합니다. 

    • Chrome: chrome://extensions로 이동
    • Firefox: about:addons로 이동 후, '확장 프로그램 관리' 버튼 클릭하고, manifest.json 파일 선택

    저는 의존성 설치단계에서 에러가 발생한 상태에서 빌드 및 브라우저 설치하였으나, 역시 계속 에러가 발생해서 중단하였습니다. 수동 설치에 대한 자세한 내용은 아래 링크를 참고하시기 바랍니다. 

    https://github.com/n4ze3m/page-assist

     

    GitHub - n4ze3m/page-assist: Use your locally running AI models to assist you in your web browsing

    Use your locally running AI models to assist you in your web browsing - n4ze3m/page-assist

    github.com

     

    맺음말

    오늘은 Ollama를 활용하여 웹 브라우저 Co-pilot으로 사용할 수 있는 Page Assist 크롬 확장 프로그램에 대해 알아보았습니다. Page Assist는 다양한 기능을 제공하여 웹페이지에서 로컬 AI 모델과 상호 작용을 할 수 있는 강력한 도구입니다. 사이드바와 웹 UI를 통해 실시간으로 AI 모델과 대화할 수 있고, 로컬 파일 RAG, 스피치 투 텍스트 프롬프트 입력, 이미지 입력, 인터넷 검색, Ollama 모델 관리 등 다양한 기능을 활용할 수 있습니다.

     

    Page Assist를 사용해본 느낌은 다음과 같습니다.

    • 웹 브라우저 Co-pilot으로서 필요한 다양한 기능이 모두 구현되어 있다.
    • 특히 문서 파일 RAG인터넷 검색 기능은 매우 편리하다.
    • 시스템 사양에 따라 Ollama 언어 모델의 응답이 느릴수 있다.

     

    설치 방법도 매우 간단하며, Chrome, Firefox, Brave 등 다양한 브라우저를 지원합니다. Node.js와 Ollama를 이용한 수동 설치 방법도 제공되어 있어 개발자들이 더욱 자유롭게 활용할 수 있습니다. Page Assist는 개인정보를 보호하며, 모든 데이터는 로컬에 안전하게 저장됩니다. 웹 서핑을 하면서 더욱 풍부한 경험을 원하신다면, Page Assist를 설치하고 활용해 보세요. 더 많은 정보는 GitHub 저장소를 참고하시기 바랍니다. 감사합니다! 다음에 또 유익한 정보로 찾아뵙겠습니다.

     

    https://fornewchallenge.tistory.com/

     

     

    2024.05.24 - [AI 도구] - 🔎퍼플렉시카: 다양한 검색 엔진을 통합하는 AI 기반 메타 검색 엔진

     

    🔎퍼플렉시카: 다양한 검색 엔진을 통합하는 AI 기반 메타 검색 엔진

    안녕하세요! 오늘은 퍼플렉시카(Perplexica)라는 오픈 소스 AI 기반 메타 검색 엔진을 소개해드리겠습니다. 퍼플렉시카는 Perplexity AI를 모티브로 개발되었으며, Google, Bing, Yahoo 등 여러 검색엔진의

    fornewchallenge.tistory.com

    728x90