llm-x

LLM X
Chrome 확장 프로그램 | 웹/모바일 앱

개인정보 보호 성명:
LLM X는 외부 API 호출을 전혀 하지 않습니다. (직접 네트워크 탭의 Fetch 섹션을 확인해 보세요.) 채팅과 이미지 생성은 100% 비공개입니다. 이 사이트/앱은 완전히 오프라인으로 작동합니다.

문제점:
LLM X(웹 앱)는 안전하지 않은 서버에는 연결되지 않습니다. 즉, localhost(보안 컨텍스트로 간주됨)에서는 LLM X를 사용할 수 있지만, 네트워크를 통해 llm-x를 사용하려는 경우 서버가 https여야 하며 그렇지 않으면 작동하지 않습니다.

최근 추가된 기능:

Ollama를 통한 텍스트-이미지 생성 지원!
멀티 모델 지원! 이제 채팅은 연결된 모든 서버의 여러 모델을 지원하며, 동시에 각 모델로부터 응답을 받을 수 있습니다
빠른 삭제! 빠른 검색/kbar 패널을 사용하면 앱 관련 데이터를 매우 쉽게 모두 삭제할 수 있습니다
Chrome 확장 프로그램 지원! 웹 앱의 모든 기능이 브라우저에 내장됩니다
Gemini Nano 지원!
IndexedDB 지원! 이제 모든 텍스트가 로컬 스토리지 대신 IndexedDB에 저장됩니다
로드 시 자동 연결. 연결 가능한 서버가 보이고 준비되어 있으면 자동으로 연결합니다

사용 방법:
애플리케이션 사전 요구 사항

Ollama: Ollama를 다운로드하여 설치하세요

라이브러리에서 모델을 하나(또는 여러 개) 풀다운하세요. 예: ollama pull llava (또는 앱 사용)

llmman: curl -fsSL https://llmmanorg.github.io/install.sh | sh 로 llmman을 설치하세요

모델을 풀다운하세요. 예: llmman pull gemma4 (또는 앱 사용)

LM Studio: LM Studio를 다운로드하여 설치하세요
AUTOMATIC1111: AUTOMATIC1111을 git clone하세요 (이미지 생성용)
Gemini Nano: Chrome Canary를 다운로드하여 설치하세요

BypassPerfRequirement를 선택하여 On Device Model을 활성화하세요
nano용 Api Gemini를 활성화하세요
Chrome을 다시 실행하세요 (다운로드가 완료될 때까지 기다려야 할 수 있습니다)

웹 클라이언트 사용 방법 (설치 없음):
웹 클라이언트 사전 요구 사항

Ollama 옵션:

Ollama의 FAQ를 참고하여 OLLAMA_ORIGINS = https://mrdjohnson.github.io 를 설정하세요
터미널에서 다음을 실행하세요: OLLAMA_ORIGINS=https://mrdjohnson.github.io ollama serve

(Powershell 사용자: $env:OLLAMA_ORIGINS="https://mrdjohnson.github.io"; ollama serve )

LM Studio:

터미널에서 다음을 실행하세요: lms server start --cors=true

A1111:

a1111 프로젝트 폴더에서 다음을 실행하세요: ./webui.sh --api --listen --cors-allow-origins "*"

Gemini Nano: 자동으로 작동합니다

브라우저를 사용하여 LLM-X로 이동하세요
오프라인으로 전환하세요! (선택 사항)
채팅을 시작하세요!

Chrome 확장 프로그램 사전 요구 사항

Chrome 확장 프로그램을 다운로드하여 설치하세요
이상적으로는 별도의 특별한 설정 없이 바로 작동합니다! 그렇지 않다면 아래 단계를 계속 진행하세요:
Ollama 옵션:

Ollama의 FAQ를 참고하여 OLLAMA_ORIGINS = chrome-extension://iodcdhcpahifeligoegcmcdibdkffclk 를 설정하세요
터미널에서 다음을 실행하세요: OLLAMA_ORIGINS=chrome-extension://iodcdhcpahifeligoegcmcdibdkffclk ollama serve

(Powershell 사용자: $env:OLLAMA_ORIGINS="chrome-extension://iodcdhcpahifeligoegcmcdibdkffclk"; ollama serve )

LM Studio:

터미널에서 다음을 실행하세요: lms server start --cors=true

A1111:

a1111 프로젝트 폴더에서 다음을 실행하세요: ./webui.sh --api --listen --cors-allow-origins "*"

오프라인 사용 방법:

"웹 클라이언트 사용 방법"의 지침을 따르세요
브라우저 검색 표시줄에 다운로드/설치 버튼이 표시되면 해당 버튼을 누르세요.
오프라인으로 전환하세요! (선택 사항)
채팅을 시작하세요!

프로젝트 소스에서 사용하는 방법:
프로젝트 소스 사전 요구 사항

Ollama: 터미널에서 ollama serve 를 실행하세요
llmman: 터미널에서 llmman serve 를 실행하세요
LM Studio: 터미널에서 다음을 실행하세요: lms server start
A1111: a1111 프로젝트 폴더에서 다음을 실행하세요: ./webui.sh --api --listen

Vite 프리뷰 모드

이 프로젝트를 풀다운하세요; yarn install , yarn preview
오프라인으로 전환하세요! (선택 사항)
채팅을 시작하세요!

Docker

터미널에서 다음을 실행하세요: docker compose up -d
http://localhost:3030 을 여세요
오프라인으로 전환하세요! (선택 사항)
채팅을 시작하세요!

Chrome 확장 프로그램

이 프로젝트를 풀다운하세요; yarn chrome:build
chrome://extensions/ 로 이동하세요
다음 경로에서 Load unpacked(개발자 모드 옵션)를 실행하세요: llm-x/extensions/chrome/dist

목표 / 기능

완전한 비공개; 완전한 오프라인 작동
Ollama 통합!
llmman 통합! (포트 17434의 Ollama API)
LM Studio 통합!
Open AI 서버 통합!
Gemini Nano 통합!
AUTOMATIC1111 통합!
Ollama 및 AUTOMATIC1111을 통한 텍스트-이미지 생성
Ollama의 멀티 모달 기능을 사용한 이미지-텍스트 변환
Highlight.js를 사용한 코드 하이라이팅 (현재는 일반적인 언어만 처리)
검색/명령 바는 kbar를 통해 앱 기능에 빠르게 접근할 수 있게 해줍니다
LaTex 지원
사용자가 원하는 만큼 많은 연결을 가질 수 있습니다!
채팅 기록 자동 저장
여러 채팅 관리
보내거나 받은 메시지 복사/편집/삭제
사용자 메시지 재작성 (응답 새로고침 트리거)
"Personas" 기능을 통한 시스템 프롬프트 커스터마이징
DaisyUI를 통한 테마 변경
Yet another react lightbox를 통한 채팅 이미지 모달 미리보기
채팅 가져오기 / 내보내기
지속적 배포! master 브랜치에 병합하면 새로운 github 페이지 빌드/배포가 자동으로 트리거됩니다

스크린샷:

Google의 온디바이스 Gemini Nano와 함께 Chrome 확장 프로그램 모드를 보여줍니다

Ollama의 llama3.2-vision과 함께 Chrome 확장 프로그램 모드를 보여줍니다

ollama와 LM Studio를 동시에 실행하는 기능을 보여줍니다

로고에 관한 대화

이미지 생성 예시!

옴니바와 코드를 보여줍니다

코드와 라이트 테마를 보여줍니다

고양이에 대해 응답하기

LaTex 지원!

또 다른 로고 응답

기타
이것은 무엇인가요?
Ollama를 로컬에서 실행하는 틈새 그룹을 위한 ChatGPT 스타일 UI입니다 (오프라인 chat gpt 서버라고 생각하시면 됩니다). 이미지와 텍스트 송수신을 지원합니다!
PWA(Progressive Web App) 표준을 통해 오프라인으로 작동합니다 (죽지 않았어요!)

왜 만들었나요?
저는 한동안 LLM UI에 관심이 있었고 이것이 좋은 입문 애플리케이션이 될 것 같았습니다.
이 프로젝트 덕분에 많은 현대 기술들을 접하게 되었고, 즐거웠습니다!

왜 이렇게 많은 유행어가 있나요?
멋져 보이지 않을 수 없었어요 😎

기술 스택 (감사합니다):
로직 헬퍼:

React
Typescript
Lodash
Zod
Mobx
Mobx State Tree (프로젝트를 빠르게 시작하기에는 좋지만 장기 유지보수에는 좋지 않습니다)
Langchain.js

UI 헬퍼:

Tailwind css
DaisyUI
NextUI
Highlight.js
React Markdown
kbar
Yet Another React Lightbox
React speech to text

프로젝트 설정 헬퍼:

Vite
Vite PWA plugin
Vite Plugin Web Extension

영감:
ollama-ui의 프로젝트. 사용자가 웹 앱을 통해 ollama에 연결할 수 있게 해줍니다

Perplexity.ai Perplexity는 LLM UI 분야에서 놀라운 UI 발전을 이루었고 저는 그 지점에 도달하는 데 큰 관심이 있었습니다. 이 스타터 프로젝트가 비슷한 것을 하는 데 더 가까워지게 해주기를 바랍니다!

로컬 개발 시작하기
(package json의 최소 엔진 요구 사항을 확인하세요)

프로젝트를 클론하고 루트 디렉터리에서 yarn을 실행하세요

yarn dev 는 로컬 인스턴스를 시작하고 https:// 아래에 브라우저 탭을 엽니다 (PWA 이유로)

⭐ 기여 가이드
typescript, prettier, biome 덕분에 LLM-X는 모든 기여자를 맞이할 준비가 되어 있습니다!

참고:

쉬운 플랫폼 분리 ⭐⭐
빈 화면 디버깅

배운 것들

LangChain.js는 이 앱을 스파이크하는 동안 시도되었지만 안타깝게도 들어오는 스트림을 중지하도록 올바르게 설정되지 않았습니다. 이 문제가 나중에 수정되기를 바랍니다. 또는 가능하다면 LangChain을 사용하기 위해 커스텀 LLM Agent를 활용할 수 있기를 바랍니다

수정: Langchain이 작동하며 이제 앱에 추가되었습니다!

원래 이 프로젝트를 만들 때 create-react-app 👴 을 사용했는데 더 이상 유지보수되지 않는다는 것을 몰랐습니다. 지금은 Vite를 사용하고 있습니다. 🤞 이제 이전에는 사용할 수 없었던 ollama-js 같은 라이브러리를 사용할 수 있게 되었습니다. 곧 langchain으로 더 테스트해 볼 예정입니다

이 readme는 https://stackedit.io/app 로 작성되었습니다

main 브랜치에 변경 사항이 생기면 https://mrdjohnson.github.io/llm-x/ 로 즉시 배포가 트리거됩니다