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.
This commit is contained in:
@@ -0,0 +1,38 @@
|
||||
# ─────────────────────────────────────────────────────────────────────────────
|
||||
# MelodyMuse — server environment
|
||||
#
|
||||
# The Node server (`server.mjs`) reads these from `process.env`. Pass them in
|
||||
# however you run the server:
|
||||
#
|
||||
# • Bare-metal: LLM_ENDPOINT=… LLM_API_KEY=… node server.mjs
|
||||
# • Docker: -e LLM_ENDPOINT=… -e LLM_API_KEY=…
|
||||
# • docker-compose: put them in a `.env` file next to compose.yml
|
||||
# • Jannik-Cloud: AGE-encrypted `.env` generated by `generate-env.sh`
|
||||
#
|
||||
# `LLM_ENDPOINT` and `LLM_API_KEY` are required — the server refuses to start
|
||||
# without them. The rest have sensible defaults.
|
||||
# ─────────────────────────────────────────────────────────────────────────────
|
||||
|
||||
# OpenAI-compatible base URL, e.g. https://api.minimax.chat/v1
|
||||
LLM_ENDPOINT=https://api.minimax.chat/v1
|
||||
|
||||
# Your provider's secret key
|
||||
LLM_API_KEY=
|
||||
|
||||
# Model name (default: MiniMax-M3)
|
||||
LLM_MODEL=MiniMax-M3
|
||||
|
||||
# Listen port (default: 3000)
|
||||
PORT=3000
|
||||
|
||||
# CORS origin. "*" allows any origin (fine for a single-user personal app).
|
||||
# Set to a specific origin like "https://melodymuse.orfel.de" to lock it down.
|
||||
CORS_ORIGIN=*
|
||||
|
||||
# ─────────────────────────────────────────────────────────────────────────────
|
||||
# Vite dev environment (only used by `npm run dev`, not by the server)
|
||||
# ─────────────────────────────────────────────────────────────────────────────
|
||||
|
||||
# Leave empty to use the dev proxy (see vite.config.ts). Set this if you want
|
||||
# the browser to talk to a server on a different origin.
|
||||
# VITE_API_BASE_URL=http://localhost:3000
|
||||
Reference in New Issue
Block a user