Jannik
81aefe0700
Bug fix
- EqualizerIcon: the SVG was rendering at the wrong size (filling
its parent) because it had no explicit width/height attributes.
Now it accepts a size prop with a 24px default and the SVG element
carries the size as width/height attributes, with the className
on top. Can't accidentally balloon.
Design
- Stripped the light-mode CSS — the app is dark-only now, and the
theme toggle was a no-op (clicking it just toggled a class that
had no matching rules). ThemeToggle.tsx and lib/theme.ts are
gone; initTheme() call removed from main.tsx.
- Reworked the input form:
• brand row is now small + refined (icon + wordmark, no huge
gradient title)
• Options is a single subtle collapsible card with a chevron and
a count badge showing how many options are non-default
• Vocals is now a segmented pill (single rounded container, two
flat segments) instead of two full-width grid buttons
• Generate button is slightly smaller (py-3.5, text-sm) and
uses a softer shadow (shadow-violet-900/20)
- Empty state in the results panel: dashed-border card, soft
gradient blur behind the music icon, cleaner copy.
- Results header: smaller heading, the 'Regenerate All' and
'Cancel' buttons are now tiny ghost-style pills in the top-right.
- Sticky ZIP bar: softer shadow, more refined copy.
- Result cards: smaller icon, single-line title, the Regenerate
button is now an inline pill that fits next to Revert + Copy.
- Home page header now has a tiny equalizer icon + 'MelodyMuse'
wordmark on the left (was just text). Settings page header has
the back arrow on the left and the title, no theme toggle.
- Global CSS: added modern focus-visible ring, custom selection
color, subtle scrollbar thumb, slightly tweaked the gradient
text to a softer violet-300 → cyan-300 instead of the loud
violet-400 → fuchsia-400 → cyan-400.
111 lines
5.9 KiB
Bash
111 lines
5.9 KiB
Bash
# ─────────────────────────────────────────────────────────────────────────────
|
|
# MelodyMuse — server environment
|
|
#
|
|
# The Node server (`server.mjs`) reads these from `process.env`. It refuses to
|
|
# start without `LLM_ENDPOINT` and `LLM_API_KEY`. 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`
|
|
#
|
|
# Three things you set:
|
|
#
|
|
# LLM_ENDPOINT — base URL of an OpenAI-compatible /chat/completions route
|
|
# LLM_API_KEY — provider secret (never sent to the browser)
|
|
# LLM_MODEL — model name to send in each request
|
|
#
|
|
# Below the active config you'll find worked examples for several providers —
|
|
# copy one of them into the active block above to switch.
|
|
# ─────────────────────────────────────────────────────────────────────────────
|
|
|
|
# ─── Active provider (uncomment ONE of the examples below to switch) ──────────
|
|
|
|
LLM_ENDPOINT=https://api.minimax.io/v1
|
|
LLM_API_KEY=
|
|
LLM_MODEL=MiniMax-M3
|
|
|
|
# ─── Server config ────────────────────────────────────────────────────────────
|
|
|
|
PORT=3000
|
|
CORS_ORIGIN=*
|
|
|
|
|
|
# ╔═══════════════════════════════════════════════════════════════════════════╗
|
|
# ║ PROVIDER EXAMPLES — copy one block up to switch providers ║
|
|
# ╚═══════════════════════════════════════════════════════════════════════════╝
|
|
|
|
# ─── MiniMax (the default) ───────────────────────────────────────────────────
|
|
# https://api.minimax.io/v1
|
|
# Sign in at https://MiniMax.io to get a key.
|
|
#
|
|
# LLM_ENDPOINT=https://api.minimax.io/v1
|
|
# LLM_API_KEY=eyXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
|
|
# LLM_MODEL=MiniMax-M3
|
|
|
|
|
|
# ─── OpenAI ──────────────────────────────────────────────────────────────────
|
|
# https://platform.openai.com/
|
|
# Keys look like: sk-XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
|
|
# Common models: gpt-4o, gpt-4o-mini, gpt-4-turbo, o1-mini, o1, …
|
|
#
|
|
# LLM_ENDPOINT=https://api.openai.com/v1
|
|
# LLM_API_KEY=sk-XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
|
|
# LLM_MODEL=gpt-4o-mini
|
|
|
|
|
|
# ─── OpenRouter (Claude, Llama, Mistral, Gemini, …) ────────────────────────
|
|
# https://openrouter.ai/
|
|
# One OpenAI-compatible endpoint that fronts hundreds of models. Easiest way
|
|
# to use Anthropic Claude, Meta Llama, Google Gemini, etc. without writing a
|
|
# custom adapter.
|
|
#
|
|
# Keys look like: sk-or-XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
|
|
# Model names are namespaced: anthropic/claude-3.5-sonnet, openai/gpt-4o,
|
|
# meta-llama/llama-3.1-405b-instruct, google/gemini-2.0-flash-exp, …
|
|
#
|
|
# LLM_ENDPOINT=https://openrouter.ai/api/v1
|
|
# LLM_API_KEY=sk-or-XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
|
|
# LLM_MODEL=anthropic/claude-3.5-sonnet
|
|
|
|
|
|
# ─── Poe ─────────────────────────────────────────────────────────────────────
|
|
# https://poe.com/
|
|
# Poe exposes an OpenAI-compatible API for the bots you've created in their
|
|
# UI. Create a bot there first (free), then use its exact name as the model.
|
|
#
|
|
# LLM_ENDPOINT=https://api.poe.com/v1
|
|
# LLM_API_KEY=sk-poe-XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
|
|
# LLM_MODEL=Claude-3.5-Sonnet
|
|
|
|
|
|
# ─── Anthropic Claude (DIRECT — needs a server adapter) ─────────────────────
|
|
# https://console.anthropic.com/
|
|
# Anthropic's native API is NOT OpenAI-compatible — it lives at
|
|
# POST /v1/messages with a different body shape (system message is a
|
|
# top-level field, not a message) and a different response shape.
|
|
#
|
|
# MelodyMuse's server does not currently talk to Anthropic's native API
|
|
# directly. Two options:
|
|
#
|
|
# 1. Use OpenRouter above — same model, OpenAI-compatible, zero code
|
|
# changes.
|
|
# 2. Add a small adapter to server.mjs that translates the request
|
|
# to Anthropic's Messages API format. Roughly 30 lines of code.
|
|
#
|
|
# If you do add the adapter, the endpoint would be:
|
|
#
|
|
# LLM_ENDPOINT=https://api.anthropic.com
|
|
# LLM_API_KEY=sk-ant-XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
|
|
# LLM_MODEL=claude-3-5-sonnet-latest
|
|
|
|
|
|
# ─────────────────────────────────────────────────────────────────────────────
|
|
# 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
|