70b86f78ce
- Add AI SYNC button to timeline toolbar, panel hidden by default (D-08) - Panel: feature toggles (BEATS, ONSETS, CHROMA, RMS), GENERATE button, USE LLM toggle - GENERATE disabled until audio loaded; re-enables on loadedmetadata event - LLM toggle enabled/disabled based on /api/sync/llm-available at page load - D-07: confirmation dialog before replacing existing timeline blocks - D-11: section_range passed when a segment is selected in the overlay - Segment selection watcher (200ms interval) updates info text dynamically - Add AI sync panel styles — flat terminal aesthetic, no border-radius
137 lines
6.8 KiB
HTML
137 lines
6.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>LIGHTSYNC</title>
|
|
<link rel="stylesheet" href="/style.css">
|
|
</head>
|
|
<body>
|
|
<div class="app-shell">
|
|
|
|
<header class="header">
|
|
<span class="header-title">■ LIGHTSYNC</span>
|
|
<div class="status-dot" id="status-dot"></div>
|
|
<span id="status-text" class="text-dim">OFFLINE</span>
|
|
<span class="header-sep">|</span>
|
|
<span id="show-name" class="text-dim">— no file loaded —</span>
|
|
<div style="flex:1"></div>
|
|
<div id="beat-indicator" class="beat-indicator" title="Beat"></div>
|
|
<span id="beat-label" class="text-dim beat-label">BEAT</span>
|
|
</header>
|
|
|
|
<aside class="sidebar">
|
|
<div class="panel" style="flex: 1; min-height: 0;">
|
|
<div class="panel-header">DEVICES</div>
|
|
<div class="panel-content" id="device-list">
|
|
<span class="text-dim">loading...</span>
|
|
</div>
|
|
<details class="device-manage-section">
|
|
<summary>⚙ MANAGE</summary>
|
|
<form id="add-device-form" class="device-form">
|
|
<input type="text" name="name" placeholder="Name" required>
|
|
<select name="strip_type" required>
|
|
<option value="sk6812">SK6812</option>
|
|
<option value="ws2801">WS2801</option>
|
|
<option value="generic">Generic</option>
|
|
</select>
|
|
<input type="number" name="led_count" placeholder="LED count" min="1" max="1000" required>
|
|
<input type="text" name="ip" placeholder="IP address" required>
|
|
<input type="number" name="port" placeholder="Port" min="1" max="65535" value="21324" required>
|
|
<button type="submit">+ ADD</button>
|
|
</form>
|
|
</details>
|
|
</div>
|
|
<div class="panel" style="flex: 0 0 auto;">
|
|
<div class="panel-header">ANIMATIONS</div>
|
|
<div class="panel-content animation-list" id="animation-palette">
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
|
|
<main class="main-area">
|
|
<div id="timeline-toolbar" class="timeline-toolbar">
|
|
<label class="toolbar-field">
|
|
<span class="toolbar-label">ZOOM</span>
|
|
<input type="range" id="zoom-slider" min="20" max="400" step="10" value="100">
|
|
</label>
|
|
<div class="toolbar-sep"></div>
|
|
<label class="toolbar-field">
|
|
<span class="toolbar-label">BEAT OFFSET</span>
|
|
<input type="number" id="beat-offset" step="0.005" min="-0.2" max="0.2" value="0.030">
|
|
<span class="toolbar-unit">s</span>
|
|
</label>
|
|
<div class="toolbar-sep"></div>
|
|
<button id="btn-snap" class="transport-btn snap-btn active" title="Snap to beat">SNAP</button>
|
|
<div class="toolbar-sep"></div>
|
|
<button id="btn-ai-sync-open" class="transport-btn" title="AI-assisted show generation">AI SYNC</button>
|
|
</div>
|
|
<div id="ai-sync-panel" class="ai-sync-panel" style="display:none;">
|
|
<div class="ai-sync-header">AI SYNC</div>
|
|
<div class="ai-sync-body">
|
|
<div class="ai-sync-info" id="ai-sync-info">SELECT AUDIO FILE FIRST</div>
|
|
<div class="ai-sync-toggles">
|
|
<label class="ai-sync-toggle"><input type="checkbox" id="ai-use-beats" checked> BEATS</label>
|
|
<label class="ai-sync-toggle"><input type="checkbox" id="ai-use-onsets" checked> ONSETS</label>
|
|
<label class="ai-sync-toggle"><input type="checkbox" id="ai-use-chroma" checked> CHROMA</label>
|
|
<label class="ai-sync-toggle"><input type="checkbox" id="ai-use-rms" checked> RMS</label>
|
|
</div>
|
|
<div class="ai-sync-actions">
|
|
<button id="btn-ai-generate" class="transport-btn ai-sync-generate" disabled>GENERATE</button>
|
|
<label class="ai-sync-toggle ai-sync-llm-toggle">
|
|
<input type="checkbox" id="ai-use-llm" disabled>
|
|
<span id="ai-llm-label">USE LLM</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<canvas id="timeline-canvas"></canvas>
|
|
<div id="live-preview" class="live-preview" style="display:none;"></div>
|
|
<div id="block-inspector" class="block-inspector" style="display:none;"></div>
|
|
</main>
|
|
|
|
<footer class="transport-bar">
|
|
<audio id="player" style="display:none;"></audio>
|
|
|
|
<button id="btn-play" class="transport-btn transport-playpause" title="Play/Pause">▶</button>
|
|
|
|
<span id="time-current" class="transport-time">0:00</span>
|
|
<span class="text-dim">/</span>
|
|
<span id="time-duration" class="transport-time">0:00</span>
|
|
|
|
<input type="range" id="seek-bar" min="0" max="100" value="0" step="0.1" class="seek-slider">
|
|
|
|
<div class="transport-sep"></div>
|
|
|
|
<select id="show-select" class="transport-file-select">
|
|
<option value="">— no shows —</option>
|
|
</select>
|
|
<button id="btn-load-show" class="transport-btn" title="Load saved show">LOAD</button>
|
|
|
|
<div class="transport-sep"></div>
|
|
|
|
<label class="transport-btn" title="Upload MP3/WAV/FLAC/OGG" style="cursor:pointer;">
|
|
+ UPLOAD
|
|
<input type="file" id="audio-upload" accept=".mp3,.wav,.flac,.ogg" style="display:none;">
|
|
</label>
|
|
|
|
<select id="audio-select" class="transport-file-select">
|
|
<option value="">— no files —</option>
|
|
</select>
|
|
|
|
<button id="btn-load" class="transport-btn" title="Load selected file">LOAD</button>
|
|
|
|
<div class="transport-sep"></div>
|
|
<input type="text" id="yt-url" class="yt-url-input" placeholder="YOUTUBE URL" disabled>
|
|
<button id="btn-fetch" class="transport-btn" title="Download from YouTube">FETCH</button>
|
|
<span id="yt-progress" class="yt-progress" style="display:none;"></span>
|
|
|
|
<div style="flex:1"></div>
|
|
<span class="keyboard-hint">[SPACE] PLAY [←→] SEEK [^Z] UNDO [^S] SAVE</span>
|
|
</footer>
|
|
|
|
</div>
|
|
<script src="/app.js" type="module"></script>
|
|
</body>
|
|
</html>
|