docs/ui-concept.md

# ACE-Step Inspire — UI Concept (DJ Console)

Status: **implemented** in Gradio custom CSS/JS (see `console_ui.py` + `app.py`).

## Control language (pads everywhere)

Exclusive choices use **pad / chip grids** (amber active), same family as instrument pads:

| Zone | Pads |
|------|------|
| MACHINE | Model (column), Duration presets + ±10s stepper, Export format |
| MIX BAY | Genre, Style, Use case, Vocal |
| PERFORMANCE | Language, Structure, Instrumental toggle |
| MIX BAY | Instruments remain multi-select pads; Mood Matrix + Tempo knob unchanged |

Theme stays a free text field. Expert accordion stays collapsed Gradio sliders.

Hidden Gradio Dropdown/Number/Checkbox fields keep server state; JS pads sync via `input`/`change` events. Genre pad triggers `apply_genre` and rebuilds Style/Vocal pad options from embedded `PAD_DATA`.

## Mood matrix

Named mood faders + radar (top 5). Derived mood label, key, meter as LED chips.

## Lyrics vs prompt

Caption/style prompt and lyrics are **separate** ACE-Step inputs. Language pad also drives lyrics generation language packs.

## Layout (desktop)

```
┌──────────────────────────────────────────────────────────────────────────┐
│  BRAND  ·  INSPIRE                                                       │
├──────────┬───────────────────────────────────────────────────────────────┤
│ GENERATE │  PLAYBACK DECK                                                │
├──────────┴───────────────┬───────────────────────────┬───────────────────┤
│ MACHINE                  │ MIX BAY                   │ PERFORMANCE       │
│ Model pads               │ Genre / Style / Use case  │ Tempo knob        │
│ Duration bay             │ Theme                     │ Language pads     │
│ Format pads              │ Vocal pads                │ Structure pads    │
│ Expert ▾                 │ Mood matrix + instruments │ Instrumental pad  │
│                          │                           │ Lyrics editor     │
├──────────────────────────┴───────────────────────────┴───────────────────┤
│  Surprise · Prompt · Info · Presets (localStorage)                       │
└──────────────────────────────────────────────────────────────────────────┘
```

## Presets

Browser `localStorage` saves all rack controls (not the audio file). Load refreshes pad active states via `refreshPadsFromGradio`.