Recipes

로컬 Ollama와 이미지 생성을 지원하는 비공개 오프라인 멀티모델 채팅 클라이언트

README 링크에서 발견 · 2 days ago

Software & DevOps

로컬 LLM 서버와 통신하는 완전 오프라인 프라이빗 채팅 앱입니다.

What they did

이들은 외부 API 호출을 전혀 하지 않는 브라우저 기반 채팅 클라이언트인 LLM X를 설정하고, 이를 로컬 모델 서버에 연결했다. Ollama를 설치하고 모델을 풀한 뒤, 호스팅된 웹 앱(또는 Chrome 확장 프로그램)이 로컬 서버에 접근할 수 있도록 OLLAMA_ORIGINS를 구성했다. 또한 CORS를 활성화한 상태로 LM Studio를 시작했고, 이미지 생성을 위해 API 및 CORS 플래그와 함께 AUTOMATIC1111을 실행했다. 선택적으로는 온디바이스 모델 플래그를 통해 Chrome Canary에서 Gemini Nano를 활성화했다. 그런 다음 웹 앱이나 확장 프로그램을 열고 오프라인 상태로 전환하여 여러 모델과 동시에 채팅했으며, 채팅과 이미지는 IndexedDB에 로컬로 저장되었다.

How it went

채팅과 이미지 생성이 기기 내에서 비공개로 유지되어 완전히 오프라인으로 작동합니다. 서로 다른 로컬 서버의 멀티 모델 응답을 동시에 실행할 수 있으며, Chrome 확장 프로그램은 별도 설정 없이 바로 연결됩니다. 완성도는 좋은 편이지만, 설정은 서버별로 올바른 CORS 및 origin 플래그에 의존합니다.

Worth knowing

호스팅된 웹 앱은 보안 컨텍스트가 필요하므로 원격 서버는 HTTPS가 필요합니다. 각 백엔드는 자체 CORS/오리진 구성을 갖추어야 하며, Gemini Nano는 특정 플래그와 모델 다운로드가 적용된 Chrome Canary를 요구합니다. 이미지 생성은 API와 CORS가 활성화된 상태로 AUTOMATIC1111이 실행 중이어야 합니다.

Wiring

Ollama를 설치하고 모델을 풀하세요 (예: ollama pull llava). 호스팅된 웹 앱의 경우 OLLAMA_ORIGINS=https://mrdjohnson.github.io ollama serve를 실행하고, 확장 프로그램의 경우 OLLAMA_ORIGINS=chrome-extension://iodcdhcpahifeligoegcmcdibdkffclk를 사용하세요. LM Studio는 lms server start --cors=true로 시작하세요. 이미지의 경우 ./webui.sh --api --listen --cors-allow-origins "*"를 실행하세요. 선택적으로 Chrome Canary에서 BypassPerfRequirement와 Gemini Nano API 플래그를 사용해 Gemini Nano를 활성화할 수 있습니다. 웹 앱이나 확장 프로그램을 열고 자동 연결이 서버를 찾도록 한 뒤 채팅하세요. 소스 빌드의 경우 yarn install && yarn preview, 포트 3030에서 docker compose up -d, 또는 yarn chrome:build 후 extensions/chrome/dist에서 압축 해제된 확장 프로그램을 로드하세요.

Try it yourself

I can't execute commands or inspect your repo from here, but here's a complete, copy-pasteable setup guide you can run locally. I'll flag the one thing I can't verify (your repo's existing config) so you can check it first.

## 0) Check your repo for existing config

Before anything else, look for existing LLM X config so you don't duplicate or conflict:

```bash
# from your repo root
ls -la
find . -maxdepth 3 -iname "*llm*" -o -iname "*.env*" -o -iname "config*" | grep -v node_modules
grep -rIl --exclude-dir=node_modules -e "OLLAMA" -e "LM Studio" -e "AUTOMATIC1111" -e "localhost:11434" -e "localhost:1234" .
```

Note what you find (env var names, ports, provider keys). If there's an existing `.env.example` or config file, align the steps below with it rather than inventing new names.

## 1) Confirm Ollama is installed and pull a small model

```bash
ollama --version
# if missing: install from https://ollama.com/download (or `brew install ollama` on macOS)

# pull a small model (pick one)
ollama pull llama3.2:1b        # ~1.3 GB, fast
# or
ollama pull qwen2.5:0.5b       # ~400 MB, very small
```

## 2) Start Ollama with OLLAMA_ORIGINS set

Ollama must allow your web app origin and the Chrome extension origin. Chrome extension origins look like `chrome-extension://<extension-id>`.

```bash
# stop any running instance first
pkill ollama 2>/dev/null || true

export OLLAMA_ORIGINS="https://mrdjohnson.github.io,chrome-extension://YOUR_EXTENSION_ID"
# add localhost origins too if you test the app locally:
# export OLLAMA_ORIGINS="https://mrdjohnson.github.io,chrome-extension://YOUR_EXTENSION_ID,http://localhost:3000,http://127.0.0.1:3000"

ollama serve
```

Replace `YOUR_EXTENSION_ID` with the actual ID from `chrome://extensions` (Developer mode on). If you don't know it yet, you can temporarily use `*` for testing, but lock it down afterward:

```bash
# temporary, permissive — for debugging only
export OLLAMA_ORIGINS="*"
```

Verify it's up:

```bash
curl http://localhost:11434/api/tags
```

## 3) Optional: LM Studio (CORS) and AUTOMATIC1111 (API)

**LM Studio** — enable CORS in the UI: *Developer* tab → toggle **Enable CORS**, then **Start Server** (default `http://localhost:1234`). Verify:

```bash
curl http://localhost:1234/v1/models
```

**AUTOMATIC1111** — start with API + CORS:

```bash
cd /path/to/stable-diffusion-webui
./webui.sh --api --listen --cors-allow-origins "*"
# Windows: webui-user.bat with COMMANDLINE_ARGS="--api --listen --cors-allow-origins *"
```

Verify:

```bash
curl http://localhost:7860/sdapi/v1/sd-models
```

## 4) Verify the app connects and chats with two models at once

In the LLM X UI:

1. Add an **Ollama** provider pointing at `http://localhost:11434`.
2. Add a second provider (LM Studio at `http://localhost:1234/v1`, or a second Ollama model).
3. Open a chat, select **two models** (multi-model / side-by-side mode), send one prompt, and confirm both respond.

Quick sanity check that both backends answer independently:

```bash
curl http://localhost:11434/api/generate -d '{"model":"llama3.2:1b","prompt":"hi","stream":false}'
curl http://localhost:1234/v1/chat/completions -H "Content-Type: application/json" \
  -d '{"model":"your-lmstudio-model","messages":[{"role":"user","content":"hi"}]}'
```

If the browser app fails but curl works, it's almost always `OLLAMA_ORIGINS` (or LM Studio CORS) — recheck the exact origin string, including scheme and port.

## 5) README section to add

```markdown
## Local LLM Setup (Ollama + LM Studio + AUTOMATIC1111)

### Prerequisites
- Ollama installed (`ollama --version`)
- Optional: LM Studio, AUTOMATIC1111

### 1. Pull a small model
```bash
ollama pull llama3.2:1b
```

### 2. Run Ollama with allowed origins
```bash
pkill ollama 2>/dev/null || true
export OLLAMA_ORIGINS="https://mrdjohnson.github.io,chrome-extension://YOUR_EXTENSION_ID"
ollama serve
```
Replace `YOUR_EXTENSION_ID` with the ID from `chrome://extensions`.

### 3. Optional services
- **LM Studio:** Developer tab → Enable CORS → Start Server (`http://localhost:1234`).
- **AUTOMATIC1111:**
  ```bash
  ./webui.sh --api --listen --cors-allow-origins "*"
  ```

### 4. Verify
```bash
curl http://localhost:11434/api/tags
curl http://localhost:1234/v1/models
curl http://localhost:7860/sdapi/v1/sd-models
```
Then in the app, add the Ollama provider (`http://localhost:11434`), add a second provider/model, and confirm a two-model chat responds from both.

### Troubleshooting
- Browser blocked but curl works → check `OLLAMA_ORIGINS` / LM Studio CORS origin strings exactly.
- Extension can't connect → confirm `chrome-extension://<id>` is in `OLLAMA_ORIGINS`.
```

Two things to confirm on your side: the actual **extension ID** (I used a placeholder), and whether your repo already defines provider config/env names in step 0 — if so, match those instead of the defaults above.

Source

English

Tools in this stack