TL;DR

  • Ollaya Web UI는 백엔드 없이 Vite, React, Tailwind v4, shadcn(Nova 프리셋)으로 구축한 Ollaya 결정 서버용 브라우저 클라이언트임.
  • npm install과 npm run dev로 실행하며, 기본적으로 http://127.0.0.1:11435의 Ollaya 서버에 연결함.
  • 설정 대화상자에서 서버 주소와 API 키를 지정하며, 값은 localStorage에 저장되고 교차 출처 요청은 서버의 OLLAYA_ORIGINS 설정을 요구함.
  • Decide, Models, Running 화면에서 결정 요청과 모델 관리, 실행 중인 모델 상태 확인 및 언로드를 제공함.
  • npm run build, npm run preview, npm run lint로 프로덕션 빌드, 빌드 결과 미리보기, oxlint 검사를 수행함.

개요

  • Ollaya 결정 서버용 브라우저 클라이언트이며 백엔드는 포함하지 않음.
  • 기술 스택은 Vite, React, Tailwind v4, shadcn Nova 프리셋임.

실행 및 연결

  • npm install로 의존성을 설치하고 npm run dev로 개발 서버를 실행함.
  • http://localhost:5173에서 UI를 열며, 기본 Ollaya 서버 주소는 http://127.0.0.1:11435임.
  • 헤더의 설정 대화상자에서 서버 주소를 변경할 수 있으며 설정값은 localStorage에 저장됨.
  • 같은 머신이나 다른 위치의 Ollaya 서버를 지정할 수 있음. 교차 출처 요청을 허용하려면 서버에서 OLLAYA_ORIGINS를 설정해야 함.
  • 서버에 OLLAYA_API_KEY가 설정된 경우 키를 설정 대화상자에 입력하면 Authorization: Bearer <key> 헤더로 전송함.

주요 기능

  • Decide
  • choice, score, noul 유형의 질문을 만들고 상태값과 함께 /api/decide로 전송함.
  • 보정된 확률 막대, 신뢰도 배지, 라우팅 정보, 처리 시간을 포함해 답변을 확인함.
  • Sample 버튼으로 API 문서의 티켓 분류 예제를 불러옴.
  • Models
  • /api/tags의 로컬 모델을 표로 탐색하고, 계층별 진행 상황을 스트리밍하며 새 모델을 가져옴.
  • 모델 삭제와 복사, 내장 질문을 사용한 파생 모델 생성 기능을 제공함.
  • Show details는 /api/show를 사용하며 Modelfile과 라이선스 텍스트를 포함함.
  • Running
  • /api/ps의 스냅샷을 표시하고 5초마다 자동 새로고침함.
  • 각 행의 Unload 버튼은 keep_alive: 0으로 /api/decide를 호출함.

구성

  • src/App.jsx: 설정 제공자(SettingsProvider)와 토스터(Toaster)를 포함하는 루트임.
  • src/main.jsx: 진입점임.
  • src/index.css: Tailwind와 shadcn Nova 테마 토큰임.
  • src/lib/ollaya.js: 가져오기 래퍼와 NDJSON 스트리밍임.
  • src/lib/settings.js: localStorage에 저장되는 baseUrl과 apiKey임.
  • src/lib/theme.js: 라이트·다크·시스템 테마 전환임.
  • src/lib/hooks.js: useModels, useRunning 훅임.
  • src/lib/format.js: 바이트, 나노초, 백분율, 타임스탬프 형식화임.
  • src/lib/utils.js: shadcn의 cn 재내보내기임.
  • src/components/ui/: 내부적으로 Tailwind를 사용하는 shadcn 기본 요소임.
  • src/components/AppShell.jsx: 고정 헤더와 탭임.
  • src/components/ServerStatus.jsx: 30초마다 버전을 확인하는 핑임.
  • src/components/SettingsDialog.jsx: baseUrl과 apiKey 편집기임.
  • src/components/SettingsContext.jsx: 설정 컨텍스트임.
  • src/components/ThemeToggle.jsx: 테마 전환임.
  • src/components/decide/: ProbBar, AnswerCard, QuestionEditor임.
  • src/components/models/: PullDialog, CreateDialog, ShowDialog, CopyDialog, DeleteDialog, StreamProgress임.
  • src/pages/: DecidePage.jsx, ModelsPage.jsx, RunningPage.jsx, AboutPage.jsx임.

스크립트

  • npm run dev: :5173에서 Vite 개발 서버 실행임.
  • npm run build: 프로덕션 번들을 dist/에 생성함.
  • npm run preview: 빌드된 번들을 제공함.
  • npm run lint: oxlint를 실행함.