Skip to content

Align Arena controls with Studio styling #1089

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
0xShug0 merged 2 commits into from
Oct 25, 2026
Merged

Align Arena controls with Studio styling #1089

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
6b9f4e8
Align Arena controls with Studio styling [skip ci]
0xShug0 Oct 25, 2026
7db0ee7
Merge main and regenerate UI for Arena cleanup
0xShug0 Oct 25, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
76 changes: 38 additions & 38 deletions webui/native/dist/index.html
View file
Open in desktop

Large diffs are not rendered by default.

30 changes: 17 additions & 13 deletions webui/native/src/app.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -242,28 +242,28 @@ h1 { font-size: clamp(28px, 3vw, 40px); line-height: 1; letter-spacing: -.04em;
.studio-grid .audio-list article { border-radius: 8px; }
.studio-grid .audio-list article > div { gap: 12px; flex-wrap: wrap; overflow-wrap: anywhere; }
.studio-grid .output pre { overflow: auto; max-height: 360px; }
.studio-grid .studio-input-section { min-width: 0; margin: 20px 0; padding-top: 18px; border-top: 1px solid var(--line); }
.studio-grid .studio-input-section, .arena-grid .arena-input-section { min-width: 0; margin: 20px 0; padding-top: 18px; border-top: 1px solid var(--line); }
.studio-grid .section-title + input + .studio-input-section { margin-top: 0; padding-top: 0; border-top: 0; }
.studio-grid .studio-section-label { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 12px; font-size: 14px; font-weight: 650; color: var(--text-strong); }
.studio-grid .studio-section-label span { color: var(--muted); font-size: 11px; font-weight: 400; }
.studio-grid .studio-section-label svg { color: var(--muted); flex-shrink: 0; }
.studio-grid .studio-section-label, .arena-grid .arena-section-label { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 12px; font-size: 14px; font-weight: 650; color: var(--text-strong); }
.studio-grid .studio-section-label span, .arena-grid .arena-section-label span { color: var(--muted); font-size: 11px; font-weight: 400; }
.studio-grid .studio-section-label svg, .arena-grid .arena-section-label svg { color: var(--muted); flex-shrink: 0; }
.studio-grid .controls button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.studio-grid .controls button svg, .studio-grid .file-picker svg { flex-shrink: 0; }
.studio-grid .controls .studio-icon-button { width: 32px; height: 32px; padding: 0; flex-shrink: 0; }
.studio-grid .media-actions { flex-wrap: wrap; margin-block: 10px; }
.studio-grid .field-grid { gap: 12px; margin-block: 18px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.studio-grid .field-grid > div > label { margin-top: 0; }
.studio-grid .field-grid:empty { display: none; }
.studio-grid .field-grid, .arena-grid .field-grid { gap: 12px; margin-block: 18px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.studio-grid .field-grid > div > label, .arena-grid .field-grid > div > label { margin-top: 0; }
.studio-grid .field-grid:empty, .arena-grid .field-grid:empty { display: none; }
.studio-grid .vibevoice-speakers { margin-block: 20px; padding-top: 18px; border-top: 1px solid var(--line); }
.studio-grid .studio-options { border: 0; border-top: 1px solid var(--line); border-radius: 0; overflow: visible; }
.studio-grid .studio-options > summary { display: flex; align-items: center; gap: 8px; padding: 14px 0; background: none; }
.studio-grid .studio-options > summary::before { content: '+'; width: 12px; color: var(--muted); }
.studio-grid .studio-options[open] > summary::before { content: '-'; }
.studio-grid .studio-options > summary span { float: none; margin-left: auto; font-variant-numeric: tabular-nums; }
.studio-grid .studio-options, .arena-grid .arena-options { border: 0; border-top: 1px solid var(--line); border-radius: 0; overflow: visible; }
.studio-grid .studio-options > summary, .arena-grid .arena-options > summary { display: flex; align-items: center; gap: 8px; padding: 14px 0; background: none; }
.studio-grid .studio-options > summary::before, .arena-grid .arena-options > summary::before { content: '+'; width: 12px; color: var(--muted); }
.studio-grid .studio-options[open] > summary::before, .arena-grid .arena-options[open] > summary::before { content: '-'; }
.studio-grid .studio-options > summary span, .arena-grid .arena-options > summary span { float: none; margin-left: auto; font-variant-numeric: tabular-nums; }
.studio-grid .studio-options > .parameter-grid { padding: 0 0 16px; gap: 14px 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.studio-grid .studio-options > .parameter-grid label { margin-top: 0; }
.studio-grid .studio-options > .parameter-grid small { font-size: 11px; line-height: 1.5; }
.studio-grid .studio-options > .code { border: 1px solid var(--control-border); border-radius: 6px; margin-bottom: 14px; }
.studio-grid .studio-options > .code, .arena-grid .arena-options > .code { border: 1px solid var(--control-border); border-radius: 6px; margin-bottom: 14px; }
.panel { background: var(--panel-bg); border: 1px solid var(--line); border-radius: 11px; box-shadow: 0 10px 32px var(--panel-shadow); }
.model-rail, .controls, .output { padding: 14px; }
.output { position: sticky; top: 69px; min-height: 470px; }
Expand Down Expand Up @@ -380,6 +380,10 @@ pre { background: var(--code-bg); border: 1px solid var(--line); border-radius:
.arena-grid .task-chip { border-radius: 4px; }
.arena-grid label, .arena-grid summary { font-size: 12px; }
.arena-inputs .reference-input-grid { grid-template-columns: minmax(0, 1fr); }
.arena-inputs > .section-title + .arena-input-section { margin-top: 0; padding-top: 0; border-top: 0; }
.arena-inputs button, .arena-add-row button, .arena-items button, .arena-runbar button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.arena-grid button svg, .arena-grid .file-picker svg { flex-shrink: 0; }

.arena-add-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: end; }
.arena-add-row > div:first-child { grid-column: 1 / -1; }
.arena-add-row button { min-width: 72px; margin-bottom: 0; }
Expand Down
31 changes: 20 additions & 11 deletions webui/native/src/routes/Arena.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
<script lang="ts">
import { onDestroy, onMount } from 'svelte';
import { AudioLines, Code, FileText, FolderOpen, MessageSquare, Play, Plus, Square, Trash2, User } from '@lucide/svelte';
import { browserDecodeToWav } from '$lib/audio';
import {
availableVoices,
Expand Down Expand Up @@ -648,27 +649,31 @@
<span class="task-chip">{arenaModeText}</span>
</div>

<section class="arena-input-section">
{#if arenaMode === 'tts'}
<label for="arena-text">{tr('request.text')}</label>
<label class="arena-section-label" for="arena-text"><MessageSquare size={17} />{tr('request.text')}</label>
<textarea id="arena-text" rows="5" bind:value={arenaText}
placeholder={tr('arena.input.textPlaceholder')}></textarea>
{:else}
<label for="arena-source">{tr('request.sourceAudio')}</label>
<label class="arena-section-label" for="arena-source"><AudioLines size={17} />{tr('request.sourceAudio')}</label>
<input id="arena-source" class="file file-native" type="file" accept="audio/*"
bind:this={arenaSourceInput}
on:change={(event) => arenaSourceFile = event.currentTarget.files?.[0] || null} />
<label class="file-picker" for="arena-source"><strong>{tr('file.choose')}</strong><span>{arenaSourceFile?.name || tr('file.none')}</span></label>
<label class="file-picker" for="arena-source"><FolderOpen size={16} /><strong>{tr('file.choose')}</strong><span>{arenaSourceFile?.name || tr('file.none')}</span></label>
<div class="media-actions">
<button type="button" disabled={!arenaSourceFile} on:click={clearArenaSource}>{tr('file.clear')}</button>
{#if arenaSourceFile}<span>{arenaSourceFile.name}</span>{/if}
</div>
<MediaPreview file={arenaSourceFile} kind="audio" label={tr('file.preview')} />
{/if}
</section>

{#if arenaMode === 'asr'}
<label for="arena-ground-truth">{tr('arena.input.groundTruth')} <span>{tr('request.optional')}</span></label>
<section class="arena-input-section">
<label class="arena-section-label" for="arena-ground-truth"><FileText size={17} />{tr('arena.input.groundTruth')} <span>{tr('request.optional')}</span></label>
<textarea id="arena-ground-truth" rows="4" bind:value={arenaGroundTruthText}
placeholder={tr('arena.input.groundTruthPlaceholder')}></textarea>
</section>
{/if}

<div class="field-grid">
Expand All @@ -684,7 +689,9 @@
{/if}
</div>

<div class:arena-input-section={arenaMode !== 'asr'}>
{#if arenaMode !== 'asr'}
<h3 class="arena-section-label"><User size={17} />{arenaMode === 'vc' ? tr('arena.voice.targetSpeaker') : tr('voice.reference')}</h3>
<div class="reference-input-grid">
<div>
<VoicePicker id="arena-voice-mode"
Expand All @@ -710,7 +717,7 @@
<input id="arena-voice" class="file file-native" type="file" accept="audio/*"
bind:this={arenaVoiceInput}
on:change={(event) => chooseArenaReferenceVoice(event.currentTarget.files?.[0] || null)} />
<label class="file-picker" for="arena-voice"><strong>{tr('file.choose')}</strong><span>{arenaVoiceFile?.name || tr('file.none')}</span></label>
<label class="file-picker" for="arena-voice"><FolderOpen size={16} /><strong>{tr('file.choose')}</strong><span>{arenaVoiceFile?.name || tr('file.none')}</span></label>
<MediaPreview file={arenaVoiceFile} kind="audio" label={tr('file.preview')} />
{/if}
{#if arenaMode !== 'asr'}
Expand All @@ -721,9 +728,10 @@
{#if arenaVoiceFile}<span>{arenaVoiceFile.name}</span>{/if}
</div>
{/if}
</div>

<details>
<summary>{tr('arena.options.shared')} <span>JSON</span></summary>
<details class="arena-options">
<summary><Code size={16} />{tr('arena.options.shared')} <span>JSON</span></summary>
<textarea class="code" rows="3" bind:value={arenaOptionsJson}></textarea>
</details>
</section>
Expand Down Expand Up @@ -757,7 +765,7 @@
{/if}
</select>
</div>
<button type="button" disabled={!arenaEntry} on:click={addArenaItem}>{tr('arena.queue.add')}</button>
<button type="button" disabled={!arenaEntry} on:click={addArenaItem}><Plus size={15} />{tr('arena.queue.add')}</button>
</div>

{#if arenaItems.length}
Expand All @@ -769,7 +777,7 @@
<span>{item.packageLabel}</span>
</div>
<span class="arena-status">{arenaStatusLabel(item.status)}</span>
<button type="button" disabled={running} on:click={() => removeArenaItem(item.id)}>{tr('arena.queue.remove')}</button>
<button type="button" disabled={running} on:click={() => removeArenaItem(item.id)}><Trash2 size={14} />{tr('arena.queue.remove')}</button>
</article>
{/each}
</div>
Expand Down Expand Up @@ -824,11 +832,12 @@
<div class="arena-actions">
<div class="runbar arena-runbar">
<button class="run" disabled={running || !arenaItems.length} on:click={runArena}>
<Play size={15} />
<span>{running ? tr('run.working') : tr('arena.run')}</span>
<kbd>Ctrl Enter</kbd>
</button>
<button disabled={!running} on:click={cancel}>{tr('run.cancel')}</button>
<button disabled={running || !arenaItems.length} on:click={resetArena}>{tr('arena.queue.clear')}</button>
<button disabled={!running} on:click={cancel}><Square size={14} />{tr('run.cancel')}</button>
<button disabled={running || !arenaItems.length} on:click={resetArena}><Trash2 size={14} />{tr('arena.queue.clear')}</button>
</div>
<div class="status" class:busy={running}>{status || tr('status.ready')}</div>
</div>
Expand Down
Loading