feat: web UI + HTTP server + Electron shell

- serve.go: embedded web UI (embed.FS), REST API endpoints for search, list, download (SSE progress), and WAV extraction - main.go: added serve subcommand and flag registration - web/ui: vanilla JS frontend with search cards, download queue, extract controls; dark theme, zero dependencies - electron/: Electron wrapper that spawns fetch serve as sidecar, reads port from stdout, creates BrowserWindow; electron-builder config for macOS .app bundle with akaiutil + script as resources Refs #1, #9
2026-06-21 19:46:26 -07:00
parent 815d43ee97
commit e2dbb66525
8 changed files with 982 additions and 1 deletions
@@ -0,0 +1,206 @@
+// AKAI Utils — Web UI
+const API = '/api';
+
+let eventSource = null;
+
+// ─── Search ────────────────────────────────────────────────────────
+
+document.getElementById('search-btn').addEventListener('click', doSearch);
+document.getElementById('search-query').addEventListener('keydown', e => {
+  if (e.key === 'Enter') doSearch();
+});
+document.getElementById('search-dl-all').addEventListener('click', downloadTop10);
+
+async function doSearch() {
+  const q = document.getElementById('search-query').value;
+  const filter = document.getElementById('search-filter').value;
+  const status = document.getElementById('search-status');
+  const results = document.getElementById('search-results');
+
+  status.textContent = 'Searching...';
+  results.innerHTML = '';
+
+  try {
+    const params = new URLSearchParams();
+    if (q) params.set('q', q);
+    if (filter) params.set('filter', filter);
+    params.set('limit', '50');
+
+    const resp = await fetch(`${API}/search?${params}`);
+    const data = await resp.json();
+    status.textContent = `Found ${data.length} items`;
+    renderResults(data);
+  } catch (e) {
+    status.textContent = 'Search failed: ' + e.message;
+  }
+}
+
+function renderResults(items) {
+  const container = document.getElementById('search-results');
+  container.innerHTML = items.map(r => `
+    <div class="result-card">
+      <div class="title">${esc(r.title)}</div>
+      <div class="meta">
+        <span>${r.identifier}</span>
+        <span>${r.downloads.toLocaleString()} downloads</span>
+      </div>
+      <div class="actions">
+        <button class="btn-dl" onclick="downloadItem('${esc(r.identifier)}')">Download ISOs</button>
+        <button class="btn-list" onclick="listItem('${esc(r.identifier)}')">List Files</button>
+      </div>
+      <div id="list-${sanitize(r.identifier)}" class="file-list"></div>
+    </div>
+  `).join('');
+}
+
+async function downloadTop10() {
+  const q = document.getElementById('search-query').value;
+  const filter = document.getElementById('search-filter').value;
+  const params = new URLSearchParams();
+  if (q) params.set('q', q);
+  if (filter) params.set('filter', filter);
+  params.set('limit', '10');
+
+  try {
+    const resp = await fetch(`${API}/search?${params}`);
+    const data = await resp.json();
+    for (const item of data) {
+      await downloadItem(item.identifier);
+    }
+  } catch (e) {
+    alert('Bulk download failed: ' + e.message);
+  }
+}
+
+// ─── List ──────────────────────────────────────────────────────────
+
+async function listItem(identifier) {
+  const el = document.getElementById('list-' + sanitize(identifier));
+  el.innerHTML = 'Loading...';
+
+  try {
+    const resp = await fetch(`${API}/list?identifier=${encodeURIComponent(identifier)}`);
+    const files = await resp.json();
+    if (!Array.isArray(files) || files.length === 0) {
+      el.innerHTML = '<span class="no-files">No ISO files</span>';
+      return;
+    }
+    el.innerHTML = files.map(f =>
+      `<div class="file-row">${esc(f.name)} <span class="file-size">${f.size || '?'}</span></div>`
+    ).join('');
+  } catch (e) {
+    el.innerHTML = 'Failed: ' + e.message;
+  }
+}
+
+// ─── Download ──────────────────────────────────────────────────────
+
+async function downloadItem(identifier) {
+  try {
+    const resp = await fetch(`${API}/download?identifier=${encodeURIComponent(identifier)}&dir=./output/isos`);
+    const data = await resp.json();
+    if (data.error) {
+      alert(data.error);
+      return;
+    }
+    startProgressStream();
+  } catch (e) {
+    alert('Download failed: ' + e.message);
+  }
+}
+
+function startProgressStream() {
+  if (eventSource) eventSource.close();
+  eventSource = new EventSource(`${API}/progress`);
+
+  eventSource.onmessage = function(e) {
+    const jobs = JSON.parse(e.data);
+    renderDownloadQueue(jobs);
+
+    const allDone = Object.values(jobs).every(j => j.done || j.error);
+    if (allDone && Object.keys(jobs).length > 0) {
+      eventSource.close();
+      eventSource = null;
+    }
+  };
+
+  eventSource.onerror = function() {
+    if (eventSource) {
+      eventSource.close();
+      eventSource = null;
+    }
+  };
+}
+
+function renderDownloadQueue(jobs) {
+  const container = document.getElementById('download-queue');
+  const count = document.getElementById('dl-count');
+  const entries = Object.values(jobs);
+  count.textContent = `(${entries.length})`;
+
+  container.innerHTML = entries.map(j => {
+    const pct = j.total_size > 0 ? Math.round(j.downloaded / j.total_size * 100) : 0;
+    let cls = '';
+    if (j.error) cls = 'error';
+    else if (j.done) cls = 'done';
+
+    let info = '';
+    if (j.error) info = j.error;
+    else if (j.done) info = formatBytes(j.total_size) + ' — complete';
+    else info = formatBytes(j.downloaded) + ' / ' + formatBytes(j.total_size) +
+                (j.speed > 0 ? ' — ' + formatBytes(j.speed) + '/s' : '');
+
+    return `
+      <div class="dl-item">
+        <div class="dl-name">${esc(j.file_name)}</div>
+        <div class="dl-bar"><div class="dl-bar-fill ${cls}" style="width:${pct}%"></div></div>
+        <div class="dl-info"><span>${info}</span><span>${j.done && !j.error ? '✓' : pct + '%'}</span></div>
+      </div>`;
+  }).join('');
+}
+
+// ─── Extract ───────────────────────────────────────────────────────
+
+document.getElementById('extract-btn').addEventListener('click', doExtract);
+
+async function doExtract() {
+  const isoDir = document.getElementById('extract-iso-dir').value;
+  const wavDir = document.getElementById('extract-wav-dir').value;
+  const status = document.getElementById('extract-status');
+
+  status.textContent = 'Extracting... (check server console for output)';
+  status.style.color = 'var(--yellow)';
+
+  try {
+    const resp = await fetch(`${API}/extract?dir=${encodeURIComponent(isoDir)}&out=${encodeURIComponent(wavDir)}`);
+    const data = await resp.json();
+    status.textContent = data.message || 'Extraction complete';
+    status.style.color = 'var(--green)';
+  } catch (e) {
+    status.textContent = 'Extraction failed: ' + e.message;
+    status.style.color = 'var(--accent)';
+  }
+}
+
+// ─── Helpers ──────────────────────────────────────────────────────
+
+function esc(s) {
+  if (!s) return '';
+  return s.replace(/&/g, '&amp;').replace(/</g, '&lt;')
+          .replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/'/g, '&#39;');
+}
+
+function sanitize(s) {
+  return s.replace(/[^a-zA-Z0-9_-]/g, '_');
+}
+
+function formatBytes(bytes) {
+  if (bytes === 0) return '0 B';
+  const k = 1024;
+  const sizes = ['B', 'KB', 'MB', 'GB'];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i];
+}
+
+// Initial load
+doSearch();
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>AKAI Utils</title>
+<link rel="stylesheet" href="style.css">
+</head>
+<body>
+<div id="app">
+  <header>
+    <h1>AKAI Utils</h1>
+    <span class="subtitle">Sampler ISO Downloader &amp; WAV Extractor</span>
+  </header>
+
+  <section id="search-section">
+    <div class="search-bar">
+      <input type="text" id="search-query" placeholder="Search archive.org AKAI samplers..."
+             value="subject:akai AND subject:sampler">
+      <input type="text" id="search-filter" placeholder="Extra filter (e.g. vocal, drum)">
+      <button id="search-btn">Search</button>
+      <button id="search-dl-all">Download Top 10</button>
+    </div>
+    <div id="search-status"></div>
+    <div id="search-results"></div>
+  </section>
+
+  <section id="download-section">
+    <h2>Downloads <span id="dl-count"></span></h2>
+    <div id="download-queue"></div>
+  </section>
+
+  <section id="extract-section">
+    <h2>WAV Extraction</h2>
+    <div class="extract-controls">
+      <input type="text" id="extract-iso-dir" placeholder="ISO directory" value="./output/isos">
+      <input type="text" id="extract-wav-dir" placeholder="WAV output directory" value="./output/wavs">
+      <button id="extract-btn">Extract</button>
+    </div>
+    <div id="extract-status"></div>
+  </section>
+</div>
+<script src="app.js"></script>
+</body>
+</html>
@@ -0,0 +1,208 @@
+:root {
+  --bg: #1a1a2e;
+  --bg2: #16213e;
+  --bg3: #0f3460;
+  --text: #e0e0e0;
+  --text2: #a0a0b0;
+  --accent: #e94560;
+  --accent2: #533483;
+  --green: #4ecca3;
+  --yellow: #f0c040;
+  --radius: 6px;
+}
+
+* { box-sizing: border-box; margin: 0; padding: 0; }
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  background: var(--bg);
+  color: var(--text);
+  line-height: 1.5;
+  min-height: 100vh;
+}
+
+#app {
+  max-width: 1100px;
+  margin: 0 auto;
+  padding: 20px;
+}
+
+header {
+  text-align: center;
+  padding: 30px 0 20px;
+  border-bottom: 1px solid var(--bg3);
+  margin-bottom: 24px;
+}
+header h1 {
+  font-size: 28px;
+  color: var(--accent);
+  letter-spacing: 1px;
+}
+header .subtitle {
+  color: var(--text2);
+  font-size: 14px;
+}
+
+section {
+  background: var(--bg2);
+  border-radius: var(--radius);
+  padding: 20px;
+  margin-bottom: 20px;
+}
+
+h2 {
+  font-size: 16px;
+  color: var(--text2);
+  margin-bottom: 12px;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+}
+
+.search-bar {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+.search-bar input {
+  flex: 1;
+  min-width: 200px;
+  padding: 10px 14px;
+  border: 1px solid var(--bg3);
+  border-radius: var(--radius);
+  background: var(--bg);
+  color: var(--text);
+  font-size: 14px;
+}
+.search-bar input:focus {
+  outline: none;
+  border-color: var(--accent);
+}
+.search-bar button {
+  padding: 10px 20px;
+  border: none;
+  border-radius: var(--radius);
+  background: var(--accent);
+  color: white;
+  font-size: 14px;
+  cursor: pointer;
+  white-space: nowrap;
+}
+.search-bar button:hover { opacity: 0.9; }
+#search-dl-all {
+  background: var(--green);
+  color: #111;
+}
+
+#search-status {
+  margin-top: 10px;
+  color: var(--text2);
+  font-size: 13px;
+}
+
+#search-results {
+  margin-top: 16px;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+  gap: 10px;
+}
+
+.result-card {
+  background: var(--bg);
+  border: 1px solid var(--bg3);
+  border-radius: var(--radius);
+  padding: 14px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.result-card .title {
+  font-weight: 600;
+  font-size: 14px;
+  word-break: break-word;
+}
+.result-card .meta {
+  font-size: 12px;
+  color: var(--text2);
+  display: flex;
+  justify-content: space-between;
+}
+.result-card .actions {
+  display: flex;
+  gap: 6px;
+}
+.result-card button {
+  flex: 1;
+  padding: 6px 12px;
+  border: none;
+  border-radius: 4px;
+  font-size: 12px;
+  cursor: pointer;
+}
+.btn-dl { background: var(--accent); color: white; }
+.btn-list { background: var(--bg3); color: var(--text); }
+.btn-dl:hover, .btn-list:hover { opacity: 0.85; }
+
+.dl-item {
+  background: var(--bg);
+  border: 1px solid var(--bg3);
+  border-radius: var(--radius);
+  padding: 12px;
+  margin-bottom: 8px;
+}
+.dl-item .dl-name {
+  font-size: 13px;
+  font-weight: 600;
+  margin-bottom: 6px;
+  word-break: break-all;
+}
+.dl-item .dl-bar {
+  height: 6px;
+  background: var(--bg3);
+  border-radius: 3px;
+  overflow: hidden;
+  margin-bottom: 4px;
+}
+.dl-item .dl-bar-fill {
+  height: 100%;
+  background: var(--accent);
+  border-radius: 3px;
+  transition: width 0.3s;
+}
+.dl-item .dl-bar-fill.done { background: var(--green); }
+.dl-item .dl-bar-fill.error { background: var(--yellow); }
+.dl-item .dl-info {
+  font-size: 11px;
+  color: var(--text2);
+  display: flex;
+  justify-content: space-between;
+}
+
+.extract-controls {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+.extract-controls input {
+  flex: 1;
+  min-width: 150px;
+  padding: 10px 14px;
+  border: 1px solid var(--bg3);
+  border-radius: var(--radius);
+  background: var(--bg);
+  color: var(--text);
+  font-size: 14px;
+}
+.extract-controls button {
+  padding: 10px 20px;
+  border: none;
+  border-radius: var(--radius);
+  background: var(--accent2);
+  color: white;
+  font-size: 14px;
+  cursor: pointer;
+}
+#extract-status {
+  margin-top: 10px;
+  font-size: 13px;
+  color: var(--text2);
+}