Polished UI: sidebar, voice library, history, settings

index.html

@@ -4,422 +4,1000 @@
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>OpenAudioLabs</title>
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
 <style>
 :root {
-  --bg: #0a0a0f;
-  --surface: #14141f;
-  --surface2: #1e1e2e;
-  --border: #2a2a3e;
-  --text: #e0e0e8;
-  --text-dim: #8888a0;
-  --accent: #7c5cfc;
-  --accent-hover: #9070ff;
-  --danger: #ff4466;
-  --success: #44cc88;
+  --bg: #09090b;
+  --surface: #111113;
+  --surface2: #18181b;
+  --surface3: #1f1f23;
+  --border: #27272a;
+  --border-hover: #3f3f46;
+  --text: #fafafa;
+  --text-secondary: #a1a1aa;
+  --text-muted: #71717a;
+  --accent: #8b5cf6;
+  --accent-hover: #a78bfa;
+  --accent-subtle: rgba(139,92,246,0.1);
+  --accent-glow: rgba(139,92,246,0.15);
+  --danger: #ef4444;
+  --success: #22c55e;
+  --warning: #f59e0b;
 }
 
 * { margin: 0; padding: 0; box-sizing: border-box; }
 
 body {
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  font-family: 'Inter', -apple-system, sans-serif;
   background: var(--bg);
   color: var(--text);
-  min-height: 100vh;
+  height: 100vh;
+  overflow: hidden;
+}
+
+/* ── Layout ── */
+.app-layout {
+  display: grid;
+  grid-template-columns: 260px 1fr;
+  grid-template-rows: 56px 1fr;
+  height: 100vh;
 }
 
-header {
+/* ── Header ── */
+.header {
+  grid-column: 1 / -1;
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 16px 32px;
-  border-bottom: 1px solid var(--border);
+  padding: 0 20px;
   background: var(--surface);
+  border-bottom: 1px solid var(--border);
+  z-index: 10;
 }
 
 .logo {
-  font-size: 20px;
+  font-size: 17px;
   font-weight: 700;
-  letter-spacing: -0.5px;
+  letter-spacing: -0.3px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
 }
 
-.logo span { color: var(--accent); }
-
-.user-info {
+.logo-icon {
+  width: 28px;
+  height: 28px;
+  background: linear-gradient(135deg, var(--accent), #ec4899);
+  border-radius: 7px;
   display: flex;
   align-items: center;
-  gap: 10px;
+  justify-content: center;
   font-size: 14px;
-  color: var(--text-dim);
 }
 
-.user-info img {
-  width: 28px;
-  height: 28px;
+.header-right {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.user-pill {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 4px 12px 4px 4px;
+  background: var(--surface2);
+  border: 1px solid var(--border);
+  border-radius: 20px;
+  font-size: 13px;
+  color: var(--text-secondary);
+}
+
+.user-pill img {
+  width: 24px;
+  height: 24px;
   border-radius: 50%;
 }
 
-.btn {
-  padding: 8px 20px;
+/* ── Sidebar ── */
+.sidebar {
+  background: var(--surface);
+  border-right: 1px solid var(--border);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.sidebar-section {
+  padding: 16px 12px 8px;
+}
+
+.sidebar-label {
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.8px;
+  color: var(--text-muted);
+  padding: 0 8px;
+  margin-bottom: 8px;
+}
+
+.nav-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 8px 12px;
+  border-radius: 8px;
+  font-size: 13px;
+  color: var(--text-secondary);
+  cursor: pointer;
+  transition: all 0.1s;
   border: none;
-  border-radius: 6px;
-  font-size: 14px;
-  font-weight: 500;
+  background: none;
+  width: 100%;
+  text-align: left;
+}
+
+.nav-item:hover { background: var(--surface2); color: var(--text); }
+.nav-item.active { background: var(--accent-subtle); color: var(--accent-hover); }
+.nav-item svg { width: 18px; height: 18px; flex-shrink: 0; }
+
+.voice-list {
+  flex: 1;
+  overflow-y: auto;
+  padding: 0 12px 12px;
+}
+
+.voice-card {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px;
+  border-radius: 8px;
   cursor: pointer;
-  transition: all 0.15s;
+  transition: all 0.1s;
+  margin-bottom: 2px;
+  border: 1px solid transparent;
 }
 
-.btn-primary {
-  background: var(--accent);
-  color: white;
+.voice-card:hover { background: var(--surface2); }
+.voice-card.selected { background: var(--accent-subtle); border-color: var(--accent); }
+
+.voice-avatar {
+  width: 36px;
+  height: 36px;
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 16px;
+  flex-shrink: 0;
 }
 
-.btn-primary:hover { background: var(--accent-hover); }
+.voice-meta {
+  flex: 1;
+  min-width: 0;
+}
 
-.btn-primary:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
+.voice-name {
+  font-size: 13px;
+  font-weight: 500;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
-.btn-outline {
-  background: transparent;
-  color: var(--text);
-  border: 1px solid var(--border);
+.voice-detail {
+  font-size: 11px;
+  color: var(--text-muted);
+}
+
+.voice-card .delete-voice {
+  opacity: 0;
+  padding: 4px;
+  border: none;
+  background: none;
+  color: var(--text-muted);
+  cursor: pointer;
+  border-radius: 4px;
+  transition: all 0.1s;
 }
 
-.btn-outline:hover { border-color: var(--accent); }
+.voice-card:hover .delete-voice { opacity: 1; }
+.voice-card .delete-voice:hover { color: var(--danger); background: rgba(239,68,68,0.1); }
 
-.btn-hf {
-  background: #ff9d00;
-  color: #000;
-  font-weight: 600;
-  display: inline-flex;
+.add-voice-btn {
+  display: flex;
   align-items: center;
   gap: 8px;
+  padding: 10px;
+  border-radius: 8px;
+  font-size: 13px;
+  color: var(--text-muted);
+  cursor: pointer;
+  border: 1px dashed var(--border);
+  background: none;
+  width: 100%;
+  transition: all 0.15s;
 }
 
-.btn-hf:hover { background: #ffb340; }
+.add-voice-btn:hover { border-color: var(--accent); color: var(--accent-hover); }
 
-/* Landing */
-#landing {
+/* ── Main Content ── */
+.content {
+  overflow-y: auto;
+  padding: 32px;
   display: flex;
-  flex-direction: column;
-  align-items: center;
   justify-content: center;
-  min-height: 80vh;
-  text-align: center;
-  gap: 24px;
 }
 
-#landing h1 {
-  font-size: 48px;
-  font-weight: 700;
-  letter-spacing: -1px;
+.content-inner {
+  width: 100%;
+  max-width: 720px;
 }
 
-#landing h1 span { color: var(--accent); }
+/* ── Page: Speech Synthesis ── */
+.page { display: none; }
+.page.active { display: block; }
 
-#landing p {
-  color: var(--text-dim);
-  font-size: 18px;
-  max-width: 500px;
+.page-header {
+  margin-bottom: 28px;
 }
 
-/* App */
-#app { display: none; }
+.page-title {
+  font-size: 22px;
+  font-weight: 700;
+  letter-spacing: -0.5px;
+  margin-bottom: 6px;
+}
 
-.main {
-  max-width: 800px;
-  margin: 0 auto;
-  padding: 32px;
+.page-desc {
+  font-size: 14px;
+  color: var(--text-muted);
 }
 
-.section {
+/* Voice selector inline */
+.voice-selector {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 14px 16px;
   background: var(--surface);
   border: 1px solid var(--border);
   border-radius: 12px;
-  padding: 24px;
-  margin-bottom: 24px;
+  margin-bottom: 16px;
+  cursor: pointer;
+  transition: border-color 0.15s;
 }
 
-.section-title {
+.voice-selector:hover { border-color: var(--border-hover); }
+
+.voice-selector .voice-avatar { width: 40px; height: 40px; }
+
+.voice-selector-info { flex: 1; }
+
+.voice-selector-name {
   font-size: 14px;
   font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 1px;
-  color: var(--text-dim);
-  margin-bottom: 16px;
 }
 
-/* Upload */
-.upload-zone {
-  border: 2px dashed var(--border);
-  border-radius: 8px;
-  padding: 32px;
-  text-align: center;
-  cursor: pointer;
-  transition: all 0.15s;
-  color: var(--text-dim);
+.voice-selector-hint {
+  font-size: 12px;
+  color: var(--text-muted);
 }
 
-.upload-zone:hover, .upload-zone.dragover {
-  border-color: var(--accent);
-  color: var(--text);
+.voice-selector-change {
+  font-size: 12px;
+  color: var(--accent);
+  font-weight: 500;
 }
 
-.upload-zone.has-file {
-  border-color: var(--success);
-  border-style: solid;
-  color: var(--success);
+/* Text editor area */
+.editor {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  overflow: hidden;
+  margin-bottom: 16px;
 }
 
-.upload-zone input { display: none; }
-
-/* Text input */
-textarea {
+.editor textarea {
   width: 100%;
-  min-height: 100px;
-  background: var(--surface2);
-  border: 1px solid var(--border);
-  border-radius: 8px;
-  padding: 12px;
+  min-height: 180px;
+  background: transparent;
+  border: none;
+  padding: 20px;
   color: var(--text);
-  font-family: inherit;
+  font-family: 'Inter', sans-serif;
   font-size: 15px;
+  line-height: 1.6;
   resize: vertical;
 }
 
-textarea:focus {
-  outline: none;
-  border-color: var(--accent);
+.editor textarea:focus { outline: none; }
+
+.editor textarea::placeholder { color: var(--text-muted); }
+
+.editor-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 20px;
+  border-top: 1px solid var(--border);
+  background: var(--surface2);
+}
+
+.editor-left {
+  display: flex;
+  align-items: center;
+  gap: 12px;
 }
 
-.char-count {
-  text-align: right;
+.editor-stat {
+  font-size: 12px;
+  color: var(--text-muted);
+}
+
+.lang-select {
+  padding: 4px 8px;
+  background: var(--surface3);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  color: var(--text-secondary);
   font-size: 12px;
-  color: var(--text-dim);
-  margin-top: 4px;
+  font-family: 'Inter', sans-serif;
 }
 
-/* Controls row */
-.controls {
+.lang-select:focus { outline: none; border-color: var(--accent); }
+
+/* Settings panel */
+.settings-row {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 12px;
+  margin-bottom: 16px;
+}
+
+.setting-group {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  padding: 14px 16px;
+}
+
+.setting-label {
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  color: var(--text-muted);
+  margin-bottom: 8px;
+}
+
+.setting-value {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.setting-value input[type="range"] {
+  flex: 1;
+  accent-color: var(--accent);
+  height: 4px;
+}
+
+.setting-num {
+  font-size: 13px;
+  color: var(--text-secondary);
+  min-width: 30px;
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+}
+
+/* Generate button */
+.generate-bar {
   display: flex;
   gap: 12px;
   align-items: center;
-  margin-top: 16px;
 }
 
-select {
-  padding: 8px 12px;
-  background: var(--surface2);
-  border: 1px solid var(--border);
-  border-radius: 6px;
-  color: var(--text);
+.btn-generate {
+  flex: 1;
+  padding: 14px 24px;
+  background: linear-gradient(135deg, var(--accent), #7c3aed);
+  color: white;
+  border: none;
+  border-radius: 10px;
   font-size: 14px;
+  font-weight: 600;
+  font-family: 'Inter', sans-serif;
+  cursor: pointer;
+  transition: all 0.2s;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
 }
 
-select:focus {
-  outline: none;
-  border-color: var(--accent);
+.btn-generate:hover { filter: brightness(1.1); transform: translateY(-1px); }
+.btn-generate:active { transform: translateY(0); }
+.btn-generate:disabled { opacity: 0.4; cursor: not-allowed; transform: none; filter: none; }
+
+.btn-generate .spinner {
+  width: 16px;
+  height: 16px;
+  border: 2px solid rgba(255,255,255,0.3);
+  border-top-color: white;
+  border-radius: 50%;
+  animation: spin 0.6s linear infinite;
+  display: none;
 }
 
+.btn-generate.loading .spinner { display: block; }
+.btn-generate.loading .btn-text { display: none; }
+
+@keyframes spin { to { transform: rotate(360deg); } }
+
 /* Status */
-.status {
-  margin-top: 16px;
-  padding: 12px;
+.status-bar {
+  margin-top: 12px;
+  padding: 10px 14px;
   border-radius: 8px;
-  font-size: 14px;
+  font-size: 13px;
   display: none;
+  align-items: center;
+  gap: 8px;
 }
 
-.status.visible { display: block; }
-.status.info { background: #1a1a3e; color: #8888ff; }
-.status.success { background: #1a3e2a; color: var(--success); }
-.status.error { background: #3e1a1a; color: var(--danger); }
+.status-bar.visible { display: flex; }
+.status-bar.info { background: rgba(139,92,246,0.08); color: var(--accent-hover); border: 1px solid rgba(139,92,246,0.15); }
+.status-bar.success { background: rgba(34,197,94,0.08); color: var(--success); border: 1px solid rgba(34,197,94,0.15); }
+.status-bar.error { background: rgba(239,68,68,0.08); color: var(--danger); border: 1px solid rgba(239,68,68,0.15); }
 
-/* Audio result */
-.result {
+.progress-track {
+  width: 100%;
+  height: 3px;
+  background: var(--surface3);
+  border-radius: 2px;
+  margin-top: 6px;
+  overflow: hidden;
+  display: none;
+}
+
+.progress-track.visible { display: block; }
+
+.progress-fill {
+  height: 100%;
+  background: linear-gradient(90deg, var(--accent), #ec4899);
+  border-radius: 2px;
+  transition: width 0.3s;
+  width: 0%;
+}
+
+/* Result player */
+.player-card {
   margin-top: 16px;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  padding: 16px 20px;
   display: none;
 }
 
-.result.visible { display: block; }
+.player-card.visible { display: block; }
 
-.result audio {
-  width: 100%;
+.player-top {
+  display: flex;
+  align-items: center;
+  gap: 12px;
   margin-bottom: 12px;
 }
 
-.result-actions {
+.play-btn {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  background: var(--accent);
+  border: none;
+  color: white;
+  cursor: pointer;
   display: flex;
-  gap: 8px;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  transition: all 0.15s;
 }
 
-/* API Docs */
-.tabs {
+.play-btn:hover { background: var(--accent-hover); transform: scale(1.05); }
+
+.play-btn svg { width: 18px; height: 18px; }
+
+.player-info { flex: 1; }
+.player-title { font-size: 14px; font-weight: 500; }
+.player-meta { font-size: 12px; color: var(--text-muted); }
+
+.player-actions {
   display: flex;
-  gap: 4px;
-  margin-bottom: 16px;
+  gap: 6px;
 }
 
-.tab {
-  padding: 6px 14px;
+.icon-btn {
+  width: 32px;
+  height: 32px;
   border-radius: 6px;
-  font-size: 13px;
+  border: 1px solid var(--border);
+  background: transparent;
+  color: var(--text-secondary);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.1s;
+}
+
+.icon-btn:hover { background: var(--surface2); color: var(--text); border-color: var(--border-hover); }
+
+.player-audio { width: 100%; height: 32px; }
+
+/* ── Page: History ── */
+.history-list { display: flex; flex-direction: column; gap: 8px; }
+
+.history-item {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  padding: 14px 16px;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  transition: border-color 0.1s;
+}
+
+.history-item:hover { border-color: var(--border-hover); }
+
+.history-play {
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  background: var(--surface3);
+  border: 1px solid var(--border);
+  color: var(--text-secondary);
   cursor: pointer;
-  color: var(--text-dim);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  transition: all 0.1s;
+}
+
+.history-play:hover { background: var(--accent); color: white; border-color: var(--accent); }
+.history-play svg { width: 14px; height: 14px; }
+
+.history-info { flex: 1; min-width: 0; }
+.history-text { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.history-sub { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
+
+.history-download {
+  padding: 6px 12px;
+  border-radius: 6px;
+  border: 1px solid var(--border);
   background: transparent;
-  border: 1px solid transparent;
-  transition: all 0.15s;
+  color: var(--text-secondary);
+  font-size: 12px;
+  cursor: pointer;
+  font-family: 'Inter', sans-serif;
+  transition: all 0.1s;
 }
 
-.tab.active {
-  color: var(--text);
+.history-download:hover { background: var(--surface2); color: var(--text); }
+
+.empty-state {
+  text-align: center;
+  padding: 60px 20px;
+  color: var(--text-muted);
+  font-size: 14px;
+}
+
+.empty-state-icon { font-size: 40px; margin-bottom: 12px; opacity: 0.5; }
+
+/* ── Page: API ── */
+.api-tabs {
+  display: flex;
+  gap: 2px;
   background: var(--surface2);
-  border-color: var(--border);
+  border-radius: 8px;
+  padding: 3px;
+  margin-bottom: 16px;
 }
 
-.tab:hover { color: var(--text); }
+.api-tab {
+  padding: 7px 16px;
+  border-radius: 6px;
+  font-size: 13px;
+  cursor: pointer;
+  color: var(--text-muted);
+  background: transparent;
+  border: none;
+  font-family: 'Inter', sans-serif;
+  font-weight: 500;
+  transition: all 0.1s;
+}
+
+.api-tab.active { background: var(--surface3); color: var(--text); }
+.api-tab:hover { color: var(--text-secondary); }
 
 pre {
-  background: var(--bg);
+  background: var(--surface);
   border: 1px solid var(--border);
-  border-radius: 8px;
-  padding: 16px;
+  border-radius: 10px;
+  padding: 20px;
   overflow-x: auto;
   font-size: 13px;
-  line-height: 1.5;
+  line-height: 1.6;
+  font-family: 'JetBrains Mono', 'Fira Code', monospace;
+}
+
+.cm { color: var(--text-muted); }
+.s { color: #86efac; }
+.k { color: #c4b5fd; }
+.f { color: #93c5fd; }
+
+/* ── Modal ── */
+.modal-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0,0,0,0.6);
+  backdrop-filter: blur(4px);
+  display: none;
+  align-items: center;
+  justify-content: center;
+  z-index: 100;
 }
 
-code { color: #c0c0d8; }
-.code-comment { color: #6a6a8a; }
-.code-string { color: #88cc88; }
-.code-key { color: #cc88cc; }
+.modal-overlay.visible { display: flex; }
 
-/* Progress bar */
-.progress-bar {
+.modal {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 16px;
+  padding: 28px;
+  width: 440px;
+  max-width: 90vw;
+}
+
+.modal-title {
+  font-size: 17px;
+  font-weight: 600;
+  margin-bottom: 6px;
+}
+
+.modal-desc {
+  font-size: 13px;
+  color: var(--text-muted);
+  margin-bottom: 20px;
+}
+
+.modal-field { margin-bottom: 16px; }
+
+.modal-field label {
+  display: block;
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--text-secondary);
+  margin-bottom: 6px;
+}
+
+.modal-field input[type="text"] {
   width: 100%;
-  height: 4px;
+  padding: 10px 12px;
   background: var(--surface2);
-  border-radius: 2px;
-  margin-top: 8px;
-  overflow: hidden;
-  display: none;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  color: var(--text);
+  font-family: 'Inter', sans-serif;
+  font-size: 14px;
 }
 
-.progress-bar.visible { display: block; }
+.modal-field input:focus { outline: none; border-color: var(--accent); }
 
-.progress-fill {
-  height: 100%;
-  background: var(--accent);
-  border-radius: 2px;
-  transition: width 0.3s;
-  width: 0%;
+.upload-area {
+  border: 2px dashed var(--border);
+  border-radius: 10px;
+  padding: 28px;
+  text-align: center;
+  cursor: pointer;
+  transition: all 0.15s;
+  color: var(--text-muted);
+  font-size: 13px;
+}
+
+.upload-area:hover { border-color: var(--accent); color: var(--text-secondary); }
+.upload-area.has-file { border-color: var(--success); border-style: solid; color: var(--success); }
+.upload-area input { display: none; }
+.upload-area-sub { font-size: 11px; margin-top: 4px; opacity: 0.7; }
+
+.modal-actions {
+  display: flex;
+  gap: 8px;
+  justify-content: flex-end;
+  margin-top: 20px;
+}
+
+.btn-modal {
+  padding: 9px 20px;
+  border-radius: 8px;
+  font-size: 13px;
+  font-weight: 500;
+  font-family: 'Inter', sans-serif;
+  cursor: pointer;
+  transition: all 0.1s;
+  border: none;
+}
+
+.btn-cancel { background: var(--surface2); color: var(--text-secondary); border: 1px solid var(--border); }
+.btn-cancel:hover { background: var(--surface3); color: var(--text); }
+.btn-save { background: var(--accent); color: white; }
+.btn-save:hover { background: var(--accent-hover); }
+.btn-save:disabled { opacity: 0.4; cursor: not-allowed; }
+
+/* ── Landing ── */
+#landing {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: 100vh;
+  text-align: center;
+  gap: 20px;
+  background: radial-gradient(ellipse at 50% 0%, var(--accent-glow) 0%, transparent 60%);
+}
+
+#landing h1 {
+  font-size: 52px;
+  font-weight: 700;
+  letter-spacing: -1.5px;
+  background: linear-gradient(135deg, var(--text) 0%, var(--text-secondary) 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+#landing .subtitle {
+  color: var(--text-muted);
+  font-size: 17px;
+  max-width: 420px;
+  line-height: 1.5;
+}
+
+.btn-hf {
+  padding: 13px 32px;
+  background: #ff9d00;
+  color: #000;
+  border: none;
+  border-radius: 10px;
+  font-size: 15px;
+  font-weight: 600;
+  font-family: 'Inter', sans-serif;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  transition: all 0.2s;
+}
+
+.btn-hf:hover { background: #ffb340; transform: translateY(-1px); }
+
+.landing-note {
+  font-size: 12px;
+  color: var(--text-muted);
 }
 
-@media (max-width: 600px) {
-  header { padding: 12px 16px; }
-  .main { padding: 16px; }
-  #landing h1 { font-size: 32px; }
-  .controls { flex-direction: column; align-items: stretch; }
+/* ── Scrollbar ── */
+::-webkit-scrollbar { width: 6px; }
+::-webkit-scrollbar-track { background: transparent; }
+::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
+::-webkit-scrollbar-thumb:hover { background: var(--border-hover); }
+
+/* ── Responsive ── */
+@media (max-width: 768px) {
+  .app-layout { grid-template-columns: 1fr; }
+  .sidebar { display: none; }
+  #landing h1 { font-size: 36px; }
 }
 </style>
 </head>
 <body>
 
-<header>
-  <div class="logo">Open<span>Audio</span>Labs</div>
-  <div id="header-right">
-    <button class="btn btn-hf" id="login-btn-header" style="display:none" onclick="login()">
-      🤗 Sign in with Hugging Face
-    </button>
-    <div class="user-info" id="user-info" style="display:none">
-      <img id="user-avatar" src="" alt="">
-      <span id="user-name"></span>
-      <button class="btn btn-outline" onclick="logout()" style="font-size:12px;padding:4px 10px">Sign out</button>
-    </div>
-  </div>
-</header>
-
+<!-- ── Landing ── -->
 <div id="landing">
-  <h1>Open<span>Audio</span>Labs</h1>
-  <p>Voice cloning powered by open-source models on Hugging Face. Sign in with your HF account to get started.</p>
-  <button class="btn btn-hf" onclick="login()" style="font-size:16px;padding:12px 28px">
-    🤗 Sign in with Hugging Face
-  </button>
-  <p style="font-size:13px;color:var(--text-dim)">Uses your HF ZeroGPU quota. Free tier included with every account.</p>
+  <div class="logo-icon" style="width:56px;height:56px;font-size:28px;border-radius:14px">🎙</div>
+  <h1>OpenAudioLabs</h1>
+  <p class="subtitle">Voice cloning powered by open-source models. Sign in with your Hugging Face account to start generating.</p>
+  <button class="btn-hf" onclick="login()">🤗 Sign in with Hugging Face</button>
+  <p class="landing-note">Uses your HF ZeroGPU quota &middot; Free tier included</p>
 </div>
 
-<div id="app">
-  <div class="main">
+<!-- ── App Shell ── -->
+<div id="app" class="app-layout" style="display:none">
 
-    <div class="section">
-      <div class="section-title">Reference Voice</div>
-      <div class="upload-zone" id="upload-zone">
-        <div id="upload-label">Drop an audio file here or click to upload<br><span style="font-size:12px">MP3, WAV, FLAC supported</span></div>
-        <input type="file" id="file-input" accept="audio/*">
+  <!-- Header -->
+  <div class="header">
+    <div class="logo">
+      <div class="logo-icon">🎙</div>
+      OpenAudioLabs
+    </div>
+    <div class="header-right">
+      <div class="user-pill" id="user-pill">
+        <img id="user-avatar" src="" alt="">
+        <span id="user-name"></span>
       </div>
     </div>
+  </div>
 
-    <div class="section">
-      <div class="section-title">Text to Synthesize</div>
-      <textarea id="text-input" placeholder="Type the text you want to synthesize..."></textarea>
-      <div class="char-count"><span id="char-count">0</span> characters</div>
-
-      <div class="controls">
-        <select id="lang-select">
-          <option value="Auto">Auto-detect</option>
-          <option value="English">English</option>
-          <option value="Chinese">Chinese</option>
-          <option value="French">French</option>
-          <option value="German">German</option>
-          <option value="Spanish">Spanish</option>
-          <option value="Japanese">Japanese</option>
-          <option value="Korean">Korean</option>
-          <option value="Portuguese">Portuguese</option>
-          <option value="Italian">Italian</option>
-          <option value="Dutch">Dutch</option>
-          <option value="Russian">Russian</option>
-          <option value="Arabic">Arabic</option>
-          <option value="Hindi">Hindi</option>
-        </select>
-        <button class="btn btn-primary" id="generate-btn" onclick="generate()" disabled>Generate</button>
-      </div>
+  <!-- Sidebar -->
+  <div class="sidebar">
+    <div class="sidebar-section">
+      <div class="sidebar-label">Create</div>
+      <button class="nav-item active" onclick="showPage('synthesis', this)">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z"/><path d="M19 10v2a7 7 0 0 1-14 0v-2"/><line x1="12" y1="19" x2="12" y2="22"/></svg>
+        Speech Synthesis
+      </button>
+      <button class="nav-item" onclick="showPage('history', this)">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
+        History
+      </button>
+      <button class="nav-item" onclick="showPage('api', this)">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/></svg>
+        API
+      </button>
+    </div>
+
+    <div class="sidebar-section">
+      <div class="sidebar-label">Voice Library</div>
+    </div>
+    <div class="voice-list" id="voice-list">
+      <!-- populated by JS -->
+    </div>
+    <div style="padding:0 12px 12px">
+      <button class="add-voice-btn" onclick="openAddVoice()">
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
+        Add Voice
+      </button>
+    </div>
+  </div>
 
-      <div class="status" id="status"></div>
-      <div class="progress-bar" id="progress-bar"><div class="progress-fill" id="progress-fill"></div></div>
+  <!-- Content -->
+  <div class="content">
+    <div class="content-inner">
 
-      <div class="result" id="result">
-        <audio id="audio-player" controls></audio>
-        <div class="result-actions">
-          <button class="btn btn-outline" onclick="downloadAudio()">Download WAV</button>
+      <!-- Speech Synthesis Page -->
+      <div class="page active" id="page-synthesis">
+        <div class="page-header">
+          <div class="page-title">Speech Synthesis</div>
+          <div class="page-desc">Select a voice and type your text to generate speech.</div>
+        </div>
+
+        <div class="voice-selector" id="voice-selector" onclick="openAddVoice()">
+          <div class="voice-avatar" id="sel-voice-avatar" style="background:var(--surface3)">🎤</div>
+          <div class="voice-selector-info">
+            <div class="voice-selector-name" id="sel-voice-name">No voice selected</div>
+            <div class="voice-selector-hint" id="sel-voice-hint">Click to add a voice from your library</div>
+          </div>
+          <div class="voice-selector-change">Change</div>
         </div>
-      </div>
-    </div>
 
-    <div class="section">
-      <div class="section-title">API Usage</div>
-      <p style="color:var(--text-dim);font-size:14px;margin-bottom:16px">Use your HF token to call the OmniVoice API directly. The key trick: file objects need <code>meta: {"_type": "gradio.FileData"}</code>.</p>
+        <div class="editor">
+          <textarea id="text-input" placeholder="Start typing your text here..."></textarea>
+          <div class="editor-footer">
+            <div class="editor-left">
+              <span class="editor-stat"><span id="char-count">0</span> chars</span>
+              <select class="lang-select" id="lang-select">
+                <option value="Auto">Auto</option>
+                <option value="English">English</option>
+                <option value="Chinese">Chinese</option>
+                <option value="French">French</option>
+                <option value="German">German</option>
+                <option value="Spanish">Spanish</option>
+                <option value="Japanese">Japanese</option>
+                <option value="Korean">Korean</option>
+                <option value="Portuguese">Portuguese</option>
+                <option value="Italian">Italian</option>
+                <option value="Russian">Russian</option>
+                <option value="Arabic">Arabic</option>
+                <option value="Hindi">Hindi</option>
+              </select>
+            </div>
+          </div>
+        </div>
+
+        <div class="settings-row">
+          <div class="setting-group">
+            <div class="setting-label">Inference Steps</div>
+            <div class="setting-value">
+              <input type="range" id="setting-steps" min="4" max="64" value="32">
+              <span class="setting-num" id="steps-val">32</span>
+            </div>
+          </div>
+          <div class="setting-group">
+            <div class="setting-label">Speed</div>
+            <div class="setting-value">
+              <input type="range" id="setting-speed" min="50" max="150" value="100">
+              <span class="setting-num" id="speed-val">1.0x</span>
+            </div>
+          </div>
+        </div>
+
+        <div class="generate-bar">
+          <button class="btn-generate" id="generate-btn" onclick="generate()" disabled>
+            <span class="btn-text">Generate Speech</span>
+            <div class="spinner"></div>
+          </button>
+        </div>
+
+        <div class="status-bar" id="status"></div>
+        <div class="progress-track" id="progress-bar"><div class="progress-fill" id="progress-fill"></div></div>
+
+        <div class="player-card" id="result">
+          <div class="player-top">
+            <button class="play-btn" id="play-btn" onclick="togglePlay()">
+              <svg id="play-icon" viewBox="0 0 24 24" fill="currentColor"><polygon points="5 3 19 12 5 21 5 3"/></svg>
+              <svg id="pause-icon" viewBox="0 0 24 24" fill="currentColor" style="display:none"><rect x="6" y="4" width="4" height="16"/><rect x="14" y="4" width="4" height="16"/></svg>
+            </button>
+            <div class="player-info">
+              <div class="player-title" id="player-title">Generated audio</div>
+              <div class="player-meta" id="player-meta"></div>
+            </div>
+            <div class="player-actions">
+              <button class="icon-btn" onclick="downloadAudio()" title="Download">
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
+              </button>
+            </div>
+          </div>
+          <audio id="audio-player" class="player-audio"></audio>
+        </div>
+      </div>
 
-      <div class="tabs">
-        <div class="tab active" onclick="showTab('curl')">curl</div>
-        <div class="tab" onclick="showTab('javascript')">JavaScript</div>
-        <div class="tab" onclick="showTab('python')">Python</div>
+      <!-- History Page -->
+      <div class="page" id="page-history">
+        <div class="page-header">
+          <div class="page-title">History</div>
+          <div class="page-desc">Your recent generations.</div>
+        </div>
+        <div id="history-container">
+          <div class="empty-state">
+            <div class="empty-state-icon">🕐</div>
+            <div>No generations yet. Create your first one!</div>
+          </div>
+        </div>
       </div>
 
-      <div id="tab-curl">
-<pre><code><span class="code-comment"># 1. Upload reference audio</span>
-UPLOAD_PATH=$(curl -s -X POST \
-  <span class="code-string">"https://k2-fsa-omnivoice.hf.space/gradio_api/upload"</span> \
-  -H <span class="code-string">"Authorization: Bearer $HF_TOKEN"</span> \
-  -F <span class="code-string">"files=@voice.mp3"</span> | jq -r <span class="code-string">'.[0]'</span>)
-
-<span class="code-comment"># 2. Generate (queue/join + queue/data)</span>
-SESSION=$(uuidgen)
-curl -s -X POST \
-  <span class="code-string">"https://k2-fsa-omnivoice.hf.space/gradio_api/queue/join"</span> \
-  -H <span class="code-string">"Content-Type: application/json"</span> \
-  -H <span class="code-string">"Authorization: Bearer $HF_TOKEN"</span> \
-  -d <span class="code-string">'{
+      <!-- API Page -->
+      <div class="page" id="page-api">
+        <div class="page-header">
+          <div class="page-title">API</div>
+          <div class="page-desc">Use your HF token to call the OmniVoice API directly. File objects need <code style="background:var(--surface2);padding:2px 6px;border-radius:4px;font-size:12px">meta: {"_type": "gradio.FileData"}</code>.</div>
+        </div>
+
+        <div class="api-tabs">
+          <button class="api-tab active" onclick="showApiTab('curl', this)">curl</button>
+          <button class="api-tab" onclick="showApiTab('javascript', this)">JavaScript</button>
+          <button class="api-tab" onclick="showApiTab('python', this)">Python</button>
+        </div>
+
+        <div id="api-curl">
+<pre><code><span class="cm"># 1. Upload reference audio</span>
+UPLOAD_PATH=$(<span class="f">curl</span> -s -X POST \
+  <span class="s">"https://k2-fsa-omnivoice.hf.space/gradio_api/upload"</span> \
+  -H <span class="s">"Authorization: Bearer $HF_TOKEN"</span> \
+  -F <span class="s">"files=@voice.mp3"</span> | jq -r <span class="s">'.[0]'</span>)
+
+<span class="cm"># 2. Join queue</span>
+SESSION=$(<span class="f">uuidgen</span>)
+<span class="f">curl</span> -s -X POST \
+  <span class="s">"https://k2-fsa-omnivoice.hf.space/gradio_api/queue/join"</span> \
+  -H <span class="s">"Content-Type: application/json"</span> \
+  -H <span class="s">"Authorization: Bearer $HF_TOKEN"</span> \
+  -d <span class="s">'{
     "data": [
       "Your text here", "English",
       {"path": "'$UPLOAD_PATH'",
@@ -431,73 +1009,92 @@ curl -s -X POST \
     "session_hash": "'$SESSION'"
   }'</span>
 
-<span class="code-comment"># 3. Stream result</span>
-curl -N <span class="code-string">"https://k2-fsa-omnivoice.hf.space/gradio_api/queue/data?session_hash=$SESSION"</span> \
-  -H <span class="code-string">"Authorization: Bearer $HF_TOKEN"</span></code></pre>
-      </div>
+<span class="cm"># 3. Stream result</span>
+<span class="f">curl</span> -N \
+  <span class="s">"https://k2-fsa-omnivoice.hf.space/gradio_api/queue/data?session_hash=$SESSION"</span> \
+  -H <span class="s">"Authorization: Bearer $HF_TOKEN"</span></code></pre>
+        </div>
 
-      <div id="tab-javascript" style="display:none">
-<pre><code><span class="code-key">const</span> BASE = <span class="code-string">"https://k2-fsa-omnivoice.hf.space/gradio_api"</span>;
-<span class="code-key">const</span> TOKEN = <span class="code-string">"hf_..."</span>;
-<span class="code-key">const</span> SESSION = crypto.randomUUID();
-
-<span class="code-comment">// 1. Upload reference audio</span>
-<span class="code-key">const</span> form = <span class="code-key">new</span> FormData();
-form.append(<span class="code-string">"files"</span>, audioFile);
-<span class="code-key">const</span> [uploadPath] = <span class="code-key">await</span> fetch(`${BASE}/upload`, {
-  method: <span class="code-string">"POST"</span>,
-  headers: { Authorization: <span class="code-string">`Bearer ${TOKEN}`</span> },
+        <div id="api-javascript" style="display:none">
+<pre><code><span class="k">const</span> BASE = <span class="s">"https://k2-fsa-omnivoice.hf.space/gradio_api"</span>;
+<span class="k">const</span> TOKEN = <span class="s">"hf_..."</span>;
+<span class="k">const</span> SESSION = <span class="f">crypto.randomUUID</span>();
+
+<span class="cm">// 1. Upload reference audio</span>
+<span class="k">const</span> form = <span class="k">new</span> <span class="f">FormData</span>();
+form.<span class="f">append</span>(<span class="s">"files"</span>, audioFile);
+<span class="k">const</span> [uploadPath] = <span class="k">await</span> <span class="f">fetch</span>(<span class="s">`${BASE}/upload`</span>, {
+  method: <span class="s">"POST"</span>,
+  headers: { Authorization: <span class="s">`Bearer ${TOKEN}`</span> },
   body: form
-}).then(r => r.json());
+}).<span class="f">then</span>(r => r.<span class="f">json</span>());
 
-<span class="code-comment">// 2. Join queue</span>
-<span class="code-key">await</span> fetch(`${BASE}/queue/join`, {
-  method: <span class="code-string">"POST"</span>,
+<span class="cm">// 2. Join queue</span>
+<span class="k">await</span> <span class="f">fetch</span>(<span class="s">`${BASE}/queue/join`</span>, {
+  method: <span class="s">"POST"</span>,
   headers: {
-    <span class="code-string">"Content-Type"</span>: <span class="code-string">"application/json"</span>,
-    Authorization: <span class="code-string">`Bearer ${TOKEN}`</span>
+    <span class="s">"Content-Type"</span>: <span class="s">"application/json"</span>,
+    Authorization: <span class="s">`Bearer ${TOKEN}`</span>
   },
-  body: JSON.stringify({
-    data: [
-      <span class="code-string">"Your text"</span>, <span class="code-string">"English"</span>,
+  body: <span class="f">JSON.stringify</span>({
+    data: [<span class="s">"Your text"</span>, <span class="s">"English"</span>,
       { path: uploadPath,
-        meta: { _type: <span class="code-string">"gradio.FileData"</span> },
-        orig_name: <span class="code-string">"voice.mp3"</span> },
-      <span class="code-string">""</span>, <span class="code-string">""</span>, 32, 2.0, true, 1.0, 0, true, true
-    ],
-    fn_index: 0,
-    session_hash: SESSION
+        meta: { _type: <span class="s">"gradio.FileData"</span> },
+        orig_name: <span class="s">"voice.mp3"</span> },
+      <span class="s">""</span>, <span class="s">""</span>, 32, 2.0, true, 1.0, 0, true, true],
+    fn_index: 0, session_hash: SESSION
   })
 });
 
-<span class="code-comment">// 3. Stream results</span>
-<span class="code-key">const</span> res = <span class="code-key">await</span> fetch(
-  `${BASE}/queue/data?session_hash=${SESSION}`,
-  { headers: { Authorization: <span class="code-string">`Bearer ${TOKEN}`</span> } }
-);
-<span class="code-comment">// Parse SSE stream for process_completed message</span></code></pre>
-      </div>
+<span class="cm">// 3. Stream results via SSE</span>
+<span class="k">const</span> res = <span class="k">await</span> <span class="f">fetch</span>(
+  <span class="s">`${BASE}/queue/data?session_hash=${SESSION}`</span>,
+  { headers: { Authorization: <span class="s">`Bearer ${TOKEN}`</span> } }
+);</code></pre>
+        </div>
 
-      <div id="tab-python" style="display:none">
-<pre><code><span class="code-key">from</span> gradio_client <span class="code-key">import</span> Client, handle_file
+        <div id="api-python" style="display:none">
+<pre><code><span class="k">from</span> gradio_client <span class="k">import</span> Client, handle_file
 
-client = Client(<span class="code-string">"k2-fsa/OmniVoice"</span>)
+client = <span class="f">Client</span>(<span class="s">"k2-fsa/OmniVoice"</span>)
 
-result = client.predict(
-    text=<span class="code-string">"Your text here"</span>,
-    lang=<span class="code-string">"English"</span>,
-    ref_aud=handle_file(<span class="code-string">"voice.mp3"</span>),
-    ref_text=<span class="code-string">""</span>,
-    instruct=<span class="code-string">""</span>,
-    ns=32, gs=2.0, dn=True,
-    sp=1.0, du=0, pp=True, po=True,
-    api_name=<span class="code-string">"/_clone_fn"</span>
+result = client.<span class="f">predict</span>(
+    text=<span class="s">"Your text here"</span>,
+    lang=<span class="s">"English"</span>,
+    ref_aud=<span class="f">handle_file</span>(<span class="s">"voice.mp3"</span>),
+    ref_text=<span class="s">""</span>, instruct=<span class="s">""</span>,
+    ns=<span class="s">32</span>, gs=<span class="s">2.0</span>, dn=<span class="k">True</span>,
+    sp=<span class="s">1.0</span>, du=<span class="s">0</span>, pp=<span class="k">True</span>, po=<span class="k">True</span>,
+    api_name=<span class="s">"/_clone_fn"</span>
 )
-
-<span class="code-key">print</span>(result)  <span class="code-comment"># (audio_path, status)</span></code></pre>
+<span class="f">print</span>(result)</code></pre>
+        </div>
       </div>
+
     </div>
+  </div>
+</div>
 
+<!-- Add Voice Modal -->
+<div class="modal-overlay" id="add-voice-modal">
+  <div class="modal">
+    <div class="modal-title">Add Voice</div>
+    <div class="modal-desc">Upload a reference audio clip to clone a voice. Short clips (5-30s) work best.</div>
+    <div class="modal-field">
+      <label>Voice Name</label>
+      <input type="text" id="voice-name-input" placeholder="e.g. Joshua, Sarah...">
+    </div>
+    <div class="modal-field">
+      <label>Reference Audio</label>
+      <div class="upload-area" id="modal-upload">
+        <div id="modal-upload-label">Drop audio file here or click to browse<div class="upload-area-sub">MP3, WAV, FLAC &middot; 5-30 seconds recommended</div></div>
+        <input type="file" id="modal-file-input" accept="audio/*">
+      </div>
+    </div>
+    <div class="modal-actions">
+      <button class="btn-modal btn-cancel" onclick="closeModal()">Cancel</button>
+      <button class="btn-modal btn-save" id="save-voice-btn" onclick="saveVoice()" disabled>Save Voice</button>
+    </div>
   </div>
 </div>
 
@@ -505,13 +1102,170 @@ result = client.predict(
 import { oauthLoginUrl, oauthHandleRedirectIfPresent } from "https://esm.sh/@huggingface/hub@0.20.0";
 
 const OMNIVOICE_BASE = "https://k2-fsa-omnivoice.hf.space/gradio_api";
+const COLORS = ["#7c3aed","#ec4899","#f59e0b","#22c55e","#3b82f6","#ef4444","#06b6d4","#8b5cf6"];
 
 let accessToken = null;
-let uploadedFilePath = null;
-let uploadedFileName = null;
+let selectedVoice = null;
 let resultAudioUrl = null;
+let modalFileData = null;
+let history = JSON.parse(localStorage.getItem("oal_history") || "[]");
+
+// ── Voices (IndexedDB) ──
+
+function openDB() {
+  return new Promise((resolve, reject) => {
+    const req = indexedDB.open("OpenAudioLabs", 1);
+    req.onupgradeneeded = () => req.result.createObjectStore("voices", { keyPath: "id" });
+    req.onsuccess = () => resolve(req.result);
+    req.onerror = () => reject(req.error);
+  });
+}
+
+async function getVoices() {
+  const db = await openDB();
+  return new Promise((resolve, reject) => {
+    const tx = db.transaction("voices", "readonly");
+    const store = tx.objectStore("voices");
+    const req = store.getAll();
+    req.onsuccess = () => resolve(req.result);
+    req.onerror = () => reject(req.error);
+  });
+}
 
-// --- OAuth ---
+async function putVoice(voice) {
+  const db = await openDB();
+  return new Promise((resolve, reject) => {
+    const tx = db.transaction("voices", "readwrite");
+    tx.objectStore("voices").put(voice);
+    tx.oncomplete = () => resolve();
+    tx.onerror = () => reject(tx.error);
+  });
+}
+
+async function deleteVoiceDB(id) {
+  const db = await openDB();
+  return new Promise((resolve, reject) => {
+    const tx = db.transaction("voices", "readwrite");
+    tx.objectStore("voices").delete(id);
+    tx.oncomplete = () => resolve();
+    tx.onerror = () => reject(tx.error);
+  });
+}
+
+async function renderVoices() {
+  const voices = await getVoices();
+  const list = document.getElementById("voice-list");
+  list.innerHTML = voices.map(v => `
+    <div class="voice-card ${selectedVoice?.id === v.id ? 'selected' : ''}" onclick="selectVoice('${v.id}')">
+      <div class="voice-avatar" style="background:${v.color}">${v.name[0].toUpperCase()}</div>
+      <div class="voice-meta">
+        <div class="voice-name">${v.name}</div>
+        <div class="voice-detail">${v.fileName}</div>
+      </div>
+      <button class="delete-voice" onclick="event.stopPropagation();deleteVoice('${v.id}')" title="Remove">
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
+      </button>
+    </div>
+  `).join("");
+}
+
+window.selectVoice = async function(id) {
+  const voices = await getVoices();
+  selectedVoice = voices.find(v => v.id === id);
+  renderVoices();
+  updateVoiceSelector();
+  updateGenerateBtn();
+};
+
+window.deleteVoice = async function(id) {
+  await deleteVoiceDB(id);
+  if (selectedVoice?.id === id) { selectedVoice = null; updateVoiceSelector(); }
+  renderVoices();
+  updateGenerateBtn();
+};
+
+function updateVoiceSelector() {
+  const avatar = document.getElementById("sel-voice-avatar");
+  const name = document.getElementById("sel-voice-name");
+  const hint = document.getElementById("sel-voice-hint");
+  if (selectedVoice) {
+    avatar.textContent = selectedVoice.name[0].toUpperCase();
+    avatar.style.background = selectedVoice.color;
+    name.textContent = selectedVoice.name;
+    hint.textContent = selectedVoice.fileName;
+  } else {
+    avatar.textContent = "🎤";
+    avatar.style.background = "var(--surface3)";
+    name.textContent = "No voice selected";
+    hint.textContent = "Click to add a voice from your library";
+  }
+}
+
+// ── Modal ──
+
+window.openAddVoice = function() {
+  document.getElementById("add-voice-modal").classList.add("visible");
+  document.getElementById("voice-name-input").value = "";
+  document.getElementById("modal-upload-label").textContent = "Drop audio file here or click to browse";
+  document.getElementById("modal-upload").classList.remove("has-file");
+  document.getElementById("save-voice-btn").disabled = true;
+  modalFileData = null;
+};
+
+window.closeModal = function() {
+  document.getElementById("add-voice-modal").classList.remove("visible");
+};
+
+const modalUpload = document.getElementById("modal-upload");
+const modalFileInput = document.getElementById("modal-file-input");
+
+modalUpload.addEventListener("click", () => modalFileInput.click());
+modalUpload.addEventListener("dragover", e => { e.preventDefault(); });
+modalUpload.addEventListener("drop", e => {
+  e.preventDefault();
+  if (e.dataTransfer.files.length) handleModalFile(e.dataTransfer.files[0]);
+});
+modalFileInput.addEventListener("change", () => { if (modalFileInput.files.length) handleModalFile(modalFileInput.files[0]); });
+
+function handleModalFile(file) {
+  const reader = new FileReader();
+  reader.onload = () => {
+    modalFileData = { name: file.name, data: reader.result, type: file.type };
+    document.getElementById("modal-upload-label").textContent = file.name;
+    modalUpload.classList.add("has-file");
+    checkModalSave();
+  };
+  reader.readAsArrayBuffer(file);
+}
+
+document.getElementById("voice-name-input").addEventListener("input", checkModalSave);
+
+function checkModalSave() {
+  document.getElementById("save-voice-btn").disabled = !(
+    document.getElementById("voice-name-input").value.trim() && modalFileData
+  );
+}
+
+window.saveVoice = async function() {
+  const name = document.getElementById("voice-name-input").value.trim();
+  const voice = {
+    id: crypto.randomUUID(),
+    name,
+    fileName: modalFileData.name,
+    audioData: modalFileData.data,
+    audioType: modalFileData.type,
+    color: COLORS[Math.floor(Math.random() * COLORS.length)],
+    createdAt: Date.now()
+  };
+  await putVoice(voice);
+  selectedVoice = voice;
+  closeModal();
+  renderVoices();
+  updateVoiceSelector();
+  updateGenerateBtn();
+};
+
+// ── OAuth ──
 
 async function initOAuth() {
   const result = await oauthHandleRedirectIfPresent();
@@ -526,99 +1280,86 @@ window.login = async function() {
   window.location.href = url;
 };
 
-window.logout = function() {
-  accessToken = null;
-  document.getElementById("app").style.display = "none";
-  document.getElementById("landing").style.display = "flex";
-  document.getElementById("user-info").style.display = "none";
-  document.getElementById("login-btn-header").style.display = "none";
-};
-
 function showApp(userInfo) {
   document.getElementById("landing").style.display = "none";
-  document.getElementById("app").style.display = "block";
-  document.getElementById("login-btn-header").style.display = "none";
-  document.getElementById("user-info").style.display = "flex";
+  document.getElementById("app").style.display = "grid";
   document.getElementById("user-avatar").src = userInfo.avatarUrl;
   document.getElementById("user-name").textContent = userInfo.name;
+  renderVoices();
+  renderHistory();
 }
 
-// --- File Upload ---
-
-const uploadZone = document.getElementById("upload-zone");
-const fileInput = document.getElementById("file-input");
-const uploadLabel = document.getElementById("upload-label");
-
-uploadZone.addEventListener("click", () => fileInput.click());
-uploadZone.addEventListener("dragover", e => { e.preventDefault(); uploadZone.classList.add("dragover"); });
-uploadZone.addEventListener("dragleave", () => uploadZone.classList.remove("dragover"));
-uploadZone.addEventListener("drop", e => {
-  e.preventDefault();
-  uploadZone.classList.remove("dragover");
-  if (e.dataTransfer.files.length) handleFile(e.dataTransfer.files[0]);
-});
-fileInput.addEventListener("change", () => { if (fileInput.files.length) handleFile(fileInput.files[0]); });
-
-async function handleFile(file) {
-  uploadLabel.textContent = `Uploading ${file.name}...`;
-  uploadedFileName = file.name;
+// ── Pages ──
 
-  const form = new FormData();
-  form.append("files", file);
+window.showPage = function(page, el) {
+  document.querySelectorAll(".page").forEach(p => p.classList.remove("active"));
+  document.getElementById(`page-${page}`).classList.add("active");
+  document.querySelectorAll(".nav-item").forEach(n => n.classList.remove("active"));
+  el.classList.add("active");
+};
 
-  try {
-    const res = await fetch(`${OMNIVOICE_BASE}/upload`, {
-      method: "POST",
-      headers: accessToken ? { Authorization: `Bearer ${accessToken}` } : {},
-      body: form
-    });
-    const paths = await res.json();
-    uploadedFilePath = paths[0];
-    uploadZone.classList.add("has-file");
-    uploadLabel.textContent = `${file.name}`;
-    updateGenerateBtn();
-  } catch (err) {
-    uploadLabel.textContent = `Upload failed: ${err.message}`;
-    uploadZone.classList.remove("has-file");
-  }
-}
+window.showApiTab = function(tab, el) {
+  document.querySelectorAll('[id^="api-"]').forEach(t => t.style.display = "none");
+  document.getElementById(`api-${tab}`).style.display = "block";
+  document.querySelectorAll(".api-tab").forEach(t => t.classList.remove("active"));
+  el.classList.add("active");
+};
 
-// --- Text Input ---
+// ── Text Input ──
 
 const textInput = document.getElementById("text-input");
-const charCount = document.getElementById("char-count");
-
 textInput.addEventListener("input", () => {
-  charCount.textContent = textInput.value.length;
+  document.getElementById("char-count").textContent = textInput.value.length;
   updateGenerateBtn();
 });
 
 function updateGenerateBtn() {
-  document.getElementById("generate-btn").disabled = !(uploadedFilePath && textInput.value.trim());
+  document.getElementById("generate-btn").disabled = !(selectedVoice && textInput.value.trim());
 }
 
-// --- Generate ---
+// ── Settings ──
+
+const stepsSlider = document.getElementById("setting-steps");
+const speedSlider = document.getElementById("setting-speed");
+stepsSlider.addEventListener("input", () => document.getElementById("steps-val").textContent = stepsSlider.value);
+speedSlider.addEventListener("input", () => document.getElementById("speed-val").textContent = (speedSlider.value / 100).toFixed(1) + "x");
+
+// ── Generate ──
 
 window.generate = async function() {
+  if (!selectedVoice) return;
   const text = textInput.value.trim();
   const lang = document.getElementById("lang-select").value;
+  const steps = parseInt(stepsSlider.value);
+  const speed = speedSlider.value / 100;
   const btn = document.getElementById("generate-btn");
-  const status = document.getElementById("status");
   const progressBar = document.getElementById("progress-bar");
   const progressFill = document.getElementById("progress-fill");
   const result = document.getElementById("result");
 
   btn.disabled = true;
-  btn.textContent = "Generating...";
+  btn.classList.add("loading");
   result.classList.remove("visible");
-  showStatus("info", "Joining queue...");
+  showStatus("info", "Uploading voice...");
   progressBar.classList.add("visible");
   progressFill.style.width = "0%";
 
-  const sessionHash = crypto.randomUUID();
-
   try {
-    // Join queue
+    // Upload voice from IndexedDB
+    const blob = new Blob([selectedVoice.audioData], { type: selectedVoice.audioType || "audio/mpeg" });
+    const form = new FormData();
+    form.append("files", blob, selectedVoice.fileName);
+
+    const uploadRes = await fetch(`${OMNIVOICE_BASE}/upload`, {
+      method: "POST",
+      headers: accessToken ? { Authorization: `Bearer ${accessToken}` } : {},
+      body: form
+    });
+    const [uploadPath] = await uploadRes.json();
+
+    showStatus("info", "Joining queue...");
+    const sessionHash = crypto.randomUUID();
+
     const joinRes = await fetch(`${OMNIVOICE_BASE}/queue/join`, {
       method: "POST",
       headers: {
@@ -628,8 +1369,8 @@ window.generate = async function() {
       body: JSON.stringify({
         data: [
           text, lang,
-          { path: uploadedFilePath, meta: { _type: "gradio.FileData" }, orig_name: uploadedFileName },
-          "", "", 32, 2.0, true, 1.0, 0, true, true
+          { path: uploadPath, meta: { _type: "gradio.FileData" }, orig_name: selectedVoice.fileName },
+          "", "", steps, 2.0, true, speed, 0, true, true
         ],
         fn_index: 0,
         session_hash: sessionHash
@@ -638,7 +1379,6 @@ window.generate = async function() {
 
     if (!joinRes.ok) throw new Error(`Queue join failed: ${joinRes.status}`);
 
-    // Stream results
     const streamRes = await fetch(
       `${OMNIVOICE_BASE}/queue/data?session_hash=${sessionHash}`,
       { headers: accessToken ? { Authorization: `Bearer ${accessToken}` } : {} }
@@ -651,7 +1391,6 @@ window.generate = async function() {
     while (true) {
       const { done, value } = await reader.read();
       if (done) break;
-
       buffer += decoder.decode(value, { stream: true });
       const lines = buffer.split("\n\n");
       buffer = lines.pop();
@@ -660,32 +1399,27 @@ window.generate = async function() {
         if (!line.startsWith("data: ")) continue;
         const data = JSON.parse(line.slice(6));
 
-        if (data.msg === "estimation") {
-          showStatus("info", `In queue (position ${data.rank})...`);
-        } else if (data.msg === "process_starts") {
-          showStatus("info", "Processing...");
-          progressFill.style.width = "10%";
-        } else if (data.msg === "log") {
-          showStatus("info", data.log);
-        } else if (data.msg === "progress" && data.progress_data?.length) {
+        if (data.msg === "estimation") showStatus("info", `In queue (position ${data.rank})...`);
+        else if (data.msg === "process_starts") { showStatus("info", "Processing..."); progressFill.style.width = "10%"; }
+        else if (data.msg === "log") showStatus("info", data.log);
+        else if (data.msg === "progress" && data.progress_data?.length) {
           const p = data.progress_data[0];
           if (p.length) {
-            const pct = Math.round((p.index / p.length) * 90) + 10;
-            progressFill.style.width = `${pct}%`;
-            const desc = p.desc || `Step ${p.index}/${p.length}`;
-            showStatus("info", desc);
+            progressFill.style.width = `${Math.round((p.index / p.length) * 90) + 10}%`;
+            showStatus("info", p.desc || `Step ${p.index}/${p.length}`);
           }
         } else if (data.msg === "process_completed") {
           progressFill.style.width = "100%";
           if (data.success) {
-            const audioData = data.output.data[0];
-            resultAudioUrl = audioData.url;
+            resultAudioUrl = data.output.data[0].url;
             document.getElementById("audio-player").src = resultAudioUrl;
+            document.getElementById("player-title").textContent = text.slice(0, 60) + (text.length > 60 ? "..." : "");
+            document.getElementById("player-meta").textContent = `${selectedVoice.name} · ${data.output.duration?.toFixed(1)}s · ${text.length} chars`;
             result.classList.add("visible");
-            showStatus("success", `Done in ${data.output.duration?.toFixed(1)}s`);
+            showStatus("success", `Generated in ${data.output.duration?.toFixed(1)}s`);
+            addToHistory(text, selectedVoice.name, data.output.duration, resultAudioUrl);
           } else {
-            const errMsg = data.output?.error || "Generation failed";
-            showStatus("error", errMsg);
+            showStatus("error", data.output?.error || "Generation failed");
           }
         }
       }
@@ -694,21 +1428,34 @@ window.generate = async function() {
     showStatus("error", err.message);
   } finally {
     btn.disabled = false;
-    btn.textContent = "Generate";
-    setTimeout(() => {
-      progressBar.classList.remove("visible");
-      updateGenerateBtn();
-    }, 2000);
+    btn.classList.remove("loading");
+    setTimeout(() => { progressBar.classList.remove("visible"); updateGenerateBtn(); }, 2000);
   }
 };
 
 function showStatus(type, msg) {
   const el = document.getElementById("status");
-  el.className = `status visible ${type}`;
+  el.className = `status-bar visible ${type}`;
   el.textContent = msg;
 }
 
-// --- Download ---
+// ── Player ──
+
+const audioEl = document.getElementById("audio-player");
+
+window.togglePlay = function() {
+  if (audioEl.paused) { audioEl.play(); } else { audioEl.pause(); }
+};
+
+audioEl.addEventListener("play", () => {
+  document.getElementById("play-icon").style.display = "none";
+  document.getElementById("pause-icon").style.display = "block";
+});
+
+audioEl.addEventListener("pause", () => {
+  document.getElementById("play-icon").style.display = "block";
+  document.getElementById("pause-icon").style.display = "none";
+});
 
 window.downloadAudio = async function() {
   if (!resultAudioUrl) return;
@@ -721,16 +1468,57 @@ window.downloadAudio = async function() {
   URL.revokeObjectURL(a.href);
 };
 
-// --- Tabs ---
+// ── History ──
+
+function addToHistory(text, voiceName, duration, url) {
+  history.unshift({ text, voiceName, duration, url, timestamp: Date.now() });
+  if (history.length > 50) history.pop();
+  localStorage.setItem("oal_history", JSON.stringify(history));
+  renderHistory();
+}
 
-window.showTab = function(tab) {
-  document.querySelectorAll('[id^="tab-"]').forEach(el => el.style.display = "none");
-  document.getElementById(`tab-${tab}`).style.display = "block";
-  document.querySelectorAll(".tab").forEach(el => el.classList.remove("active"));
-  event.target.classList.add("active");
+function renderHistory() {
+  const container = document.getElementById("history-container");
+  if (!history.length) {
+    container.innerHTML = '<div class="empty-state"><div class="empty-state-icon">🕐</div><div>No generations yet</div></div>';
+    return;
+  }
+  container.innerHTML = '<div class="history-list">' + history.map((h, i) => {
+    const date = new Date(h.timestamp);
+    const timeStr = date.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
+    return `<div class="history-item">
+      <button class="history-play" onclick="playHistory(${i})">
+        <svg viewBox="0 0 24 24" fill="currentColor"><polygon points="5 3 19 12 5 21 5 3"/></svg>
+      </button>
+      <div class="history-info">
+        <div class="history-text">${h.text}</div>
+        <div class="history-sub">${h.voiceName} · ${h.duration?.toFixed(1)}s · ${timeStr}</div>
+      </div>
+      <button class="history-download" onclick="downloadHistoryItem(${i})">Download</button>
+    </div>`;
+  }).join("") + '</div>';
+}
+
+window.playHistory = function(i) {
+  const h = history[i];
+  if (h.url) { audioEl.src = h.url; audioEl.play(); }
+};
+
+window.downloadHistoryItem = async function(i) {
+  const h = history[i];
+  if (!h.url) return;
+  try {
+    const res = await fetch(h.url);
+    const blob = await res.blob();
+    const a = document.createElement("a");
+    a.href = URL.createObjectURL(blob);
+    a.download = `openaudio_${i}.wav`;
+    a.click();
+    URL.revokeObjectURL(a.href);
+  } catch { /* URL may have expired */ }
 };
 
-// --- Init ---
+// ── Init ──
 initOAuth();
 </script>
 </body>