Move LLM key to the server, add random-style buttons

Architectural change The browser no longer talks to the LLM directly. A new Node server (server.mjs) sits in the middle: [Browser] → [Node :3000] → [LLM provider] (no key) (key in .env) server.mjs is the production runtime: it serves the built SPA out of dist/ and exposes three JSON endpoints that proxy to the LLM with credentials held in process.env. The browser-side llm.ts is now a thin fetch wrapper. - server.mjs: single-file Node server, no production deps - server/prompts.mjs: system + user prompt construction (was client-side) - src/lib/prompts.ts removed (moved server-side) - src/lib/llm.ts rewritten — no more direct LLM calls, no more JSON extraction, no more validation; just fetch the proxy - src/lib/types.ts: drop SaveConfigPayload/TestConnectionResult, add style_hint and ServerStatus - vite.config.ts: proxy /api/* → localhost:3000 in dev - .env.example: LLM_* and PORT/CORS_ORIGIN instead of Supabase values New feature: random style buttons The Options → Music style field now has two AI buttons that fill it with a fresh Suno style description: - 'Surprise me' → coherent, production-ready style (max 25 words) - 'Go crazy' → deliberately clashing genre mashup (max 25 words) The buttons hit a dedicated /api/style/random endpoint on the server that uses a small, focused system prompt. Each click overwrites the field. Both buttons show a spinner and disable while a request is in flight. Errors surface as toasts. AbortController is used so a fast second click cancels the first. When the Music style field is non-empty at generation time, its value is sent to the model as style_hint and used as the basis for the full 120-word style field (per the updated system prompt). Other UX - Settings page is now a server-status page: green/red indicator, model + endpoint, re-check button. The API key is no longer configurable in the browser (it never was reachable anyway — now the UI is honest about that). - Home page header shows a small 'Server offline' warning when the server is unreachable. - Settings has a Local data section: list what's in localStorage with one-click clear-history and clear-all buttons (with confirm). - Esc cancels any in-flight generation. - ZIP filename falls back to 'song' if the title sanitizes to empty. Deployment deploy/ holds reference files (Dockerfile, docker-compose example, Caddy fragment, generate-env.sh, README) for adding the service to a Jannik-Cloud-style stack. The repo is intentionally not wired into the Jannik-Cloud repo; copy the four files when ready.
2026-06-03 08:01:21 +02:00
parent b945417773
commit d8b25ec6ab
17 changed files with 1597 additions and 759 deletions
@@ -0,0 +1,43 @@
+# Multi-stage Dockerfile for MelodyMuse.
+#
+# This file lives in the MelodyMuse repo under `deploy/` as a reference. To
+# add MelodyMuse to a Docker-Compose deployment (including your Jannik-Cloud
+# stack), copy this file to your service directory and reference it from
+# docker-compose.yml — see `docker-compose.example.yml`.
+
+# Stage 1 — build the SPA
+FROM node:20-alpine AS builder
+
+RUN apk add --no-cache git
+
+# Override these at build time if you fork the repo.
+ARG REPO_URL=https://git.orfel.de/Jannik/MelodyMuse.git
+ARG BRANCH=main
+
+WORKDIR /build
+RUN git clone --depth 1 --branch ${BRANCH} ${REPO_URL} .
+RUN npm ci
+RUN npm run build
+
+# Stage 2 — runtime: just Node + the built assets + the proxy server
+FROM node:20-alpine
+
+WORKDIR /app
+COPY --from=builder /build/dist         ./dist
+COPY --from=builder /build/server.mjs   ./server.mjs
+COPY --from=builder /build/server       ./server
+COPY --from=builder /build/package.json ./package.json
+
+# server.mjs uses only Node's built-ins — no production deps to install.
+# Install nothing here; the image stays small.
+
+ENV NODE_ENV=production
+ENV PORT=3000
+
+EXPOSE 3000
+
+# Quick healthcheck so Docker / your orchestrator can detect a broken boot.
+HEALTHCHECK --interval=30s --timeout=5s --start-period=5s --retries=3 \
+  CMD wget -qO- http://localhost:3000/api/health || exit 1
+
+CMD ["node", "server.mjs"]
@@ -0,0 +1,78 @@
+# Deploying MelodyMuse
+
+The files in this folder are **reference templates**. MelodyMuse is a single
+Node.js server (`server.mjs` in the repo root) that serves the built SPA and
+proxies LLM calls. To deploy it you can:
+
+- Run `node server.mjs` directly (after `npm run build`)
+- Use the included `Dockerfile` + `docker-compose.yml`
+- Copy these into your Jannik-Cloud `services/melodymuse/` directory
+
+## Required environment variables
+
+| Var | Required? | Default | Notes |
+|---|---|---|---|
+| `LLM_ENDPOINT` | **yes** | — | OpenAI-compatible base URL, e.g. `https://api.minimax.chat/v1` |
+| `LLM_API_KEY` | **yes** | — | Provider secret key. **Never** set this in the browser. |
+| `LLM_MODEL` | no | `MiniMax-M3` | Model name |
+| `PORT` | no | `3000` | Listen port |
+| `CORS_ORIGIN` | no | `*` | Set to a specific origin in production if you split SPA and server |
+
+The server refuses to start if `LLM_ENDPOINT` or `LLM_API_KEY` is missing.
+
+## Option 1 — Bare Node
+
+```sh
+# Clone, build, run
+git clone https://git.orfel.de/Jannik/MelodyMuse.git
+cd MelodyMuse
+npm ci
+npm run build
+
+# Set the secrets and start
+export LLM_ENDPOINT=https://api.minimax.chat/v1
+export LLM_API_KEY=sk-...
+npm start
+```
+
+## Option 2 — Docker
+
+```sh
+# Build
+docker build -f deploy/Dockerfile -t melodymuse .
+
+# Run
+docker run --rm -p 3000:3000 \
+  -e LLM_ENDPOINT=https://api.minimax.chat/v1 \
+  -e LLM_API_KEY=sk-... \
+  melodymuse
+```
+
+## Option 3 — Add to Jannik-Cloud
+
+1. Create `services/melodymuse/` in your Jannik-Cloud repo.
+2. Copy the four files from this folder into it:
+   - `Dockerfile`
+   - `docker-compose.yml` (rename from `docker-compose.example.yml`)
+   - `melodymuse.caddy`
+   - `generate-env.sh`
+3. `touch services/melodymuse/service.enabled`
+4. `bash services/melodymuse/generate-env.sh` — answer the prompts.
+5. Commit `services/melodymuse/.env.age` and the four non-secret files.
+6. `sudo bash /opt/Jannik-Cloud/deploy_script.sh` — Caddy will pick up
+   `melodymuse.orfel.de` and route it to the container.
+
+## Endpoints exposed by the server
+
+| Method | Path | Purpose |
+|---|---|---|
+| `GET`  | `/api/health` | Health check. Returns `{ ok, llm_configured, model, endpoint }`. |
+| `POST` | `/api/generate` | Main generation. Body matches the `GenerateRequest` shape. |
+| `POST` | `/api/style/random` | Returns a one-line Suno style. Body: `{ mode: "normal" \| "crazy" }`. |
+| `GET`  | everything else | Serves the built SPA from `dist/`, with SPA fallback to `index.html`. |
+
+## Image footprint
+
+The runtime image is `node:20-alpine` with only `server.mjs` and the
+built SPA. No production `npm install` (server.mjs uses only Node
+built-ins). Total image size is roughly 200 MB.
@@ -0,0 +1,34 @@
+# Example docker-compose snippet for MelodyMuse.
+#
+# Drop this into your service directory (e.g. `services/melodymuse/` in a
+# Jannik-Cloud-style stack) and rename to `docker-compose.yml`. Pair it with
+# `Dockerfile`, `melodymuse.caddy`, and `generate-env.sh` from the same folder.
+
+services:
+  melodymuse:
+    build:
+      context: .
+      dockerfile: Dockerfile
+    image: melodymuse:latest
+    container_name: melodymuse
+    restart: unless-stopped
+    ports:
+      # Only loopback — let your reverse proxy (Caddy) handle public traffic.
+      - "127.0.0.1:3000:3000"
+    environment:
+      LLM_ENDPOINT: ${LLM_ENDPOINT}
+      LLM_API_KEY: ${LLM_API_KEY}
+      LLM_MODEL: ${LLM_MODEL:-MiniMax-M3}
+      PORT: ${PORT:-3000}
+      CORS_ORIGIN: ${CORS_ORIGIN:-*}
+    deploy:
+      resources:
+        limits:
+          cpus: "0.5"
+          memory: 256M
+    networks:
+      - jannik-cloud-net
+
+networks:
+  jannik-cloud-net:
+    external: true
@@ -0,0 +1,57 @@
+#!/usr/bin/env bash
+# generate-env.sh — create the MelodyMuse `.env` (and AGE-encrypt it).
+#
+# Usage:  bash generate-env.sh
+#
+# Customize LLM_ENDPOINT / LLM_MODEL below before running. The script prompts
+# for the LLM_API_KEY so it doesn't end up in your shell history.
+
+set -euo pipefail
+SCRIPT_DIR="$(cd "$(dirname "$0")" && pwd)"
+REPO_ROOT="$(cd "${SCRIPT_DIR}/../.." && pwd)"
+AGE_PUB_KEY="${REPO_ROOT}/keys/age-public-key.txt"
+
+# ─── Customize these for your deployment ─────────────────────────────────────
+LLM_ENDPOINT_DEFAULT="https://api.minimax.chat/v1"
+LLM_MODEL_DEFAULT="MiniMax-M3"
+# ──────────────────────────────────────────────────────────────────────────────
+
+echo "LLM endpoint [${LLM_ENDPOINT_DEFAULT}]:"
+read -r LLM_ENDPOINT
+LLM_ENDPOINT="${LLM_ENDPOINT:-$LLM_ENDPOINT_DEFAULT}"
+
+echo "LLM model [${LLM_MODEL_DEFAULT}]:"
+read -r LLM_MODEL
+LLM_MODEL="${LLM_MODEL:-$LLM_MODEL_DEFAULT}"
+
+echo "LLM API key (input is hidden):"
+read -rs LLM_API_KEY
+echo ""
+
+if [[ -z "${LLM_API_KEY}" ]]; then
+    echo "ERROR: LLM_API_KEY is required."
+    exit 1
+fi
+
+cat > "${SCRIPT_DIR}/.env" <<EOF
+# MelodyMuse — generated by generate-env.sh
+LLM_ENDPOINT=${LLM_ENDPOINT}
+LLM_API_KEY=${LLM_API_KEY}
+LLM_MODEL=${LLM_MODEL}
+PORT=3000
+CORS_ORIGIN=*
+EOF
+
+chmod 600 "${SCRIPT_DIR}/.env"
+
+if [[ -f "${AGE_PUB_KEY}" ]]; then
+    age -r "$(cat "${AGE_PUB_KEY}")" -o "${SCRIPT_DIR}/.env.age" "${SCRIPT_DIR}/.env"
+    echo ""
+    echo "Encrypted .env → .env.age"
+    echo "Commit .env.age (NOT .env) to your repo, then re-run deploy."
+else
+    echo ""
+    echo "No AGE public key found at ${AGE_PUB_KEY}."
+    echo "Encrypt manually before committing, e.g.:"
+    echo "  age -r <recipient> -o .env.age .env"
+fi
@@ -0,0 +1,8 @@
+# Caddy reverse proxy for MelodyMuse.
+# Drop this into your service directory as `melodymuse.caddy` — your
+# Caddyfile (or `caddy` Docker image) will pick it up automatically.
+
+melodymuse.orfel.de {
+	encode zstd gzip
+	reverse_proxy melodymuse:3000
+}