irene
5df802a574
Reuses the analysis backend unchanged. metrics.py already split compute() from build_spec(), and plotspec.PlotSpec is backend-agnostic, so the web UI reimplements only the renderer: uPlot for curves/bands, a canvas for the spectrogram heatmap. No PyQt5, pyqtgraph or matplotlib on the web path. Uploaded audio is never persisted on the host. The browser copies each file into Origin Private File System (sandboxed browser storage) and streams the bytes to the server per request; the server spools each body to a temp file, decodes, computes, and unlinks it in a finally before responding. There is no upload directory, no cache of audio, and no session state keyed on a path: file_id is the SHA-256 of the audio, so re-sending a master for another metric reuses the first decode. Verified: a spool is observable mid-request and gone after the response. Being precise: the bytes do have to reach the server, since librosa decodes from a path and the analysis is CPU-bound numpy/scipy. The claim is that running this does not accumulate masters on the host, not that audio is never on the machine mid-request. New: metrics_json.py PlotSpec/metric data -> JSON (the renderer seam) web_session.py headless analysis session, content-addressed tracks webapp.py FastAPI routes, raw-body analysis, ujm-web entry point static/ browser front end + test suite scripts/webapi_smoke.py 61 end-to-end assertions against a running server Also fixes a bug the direct-uvicorn dev loop had hidden: the CLI advertises logger_setup's WARN level but passed it straight to uvicorn, which only knows 'warning' -- `ujm-web --log-level WARN` died with KeyError: 'warn'. Removes an earlier /api/collect debug route that served every source module over HTTP. pyproject: 'web' extra (fastapi, uvicorn, python-multipart), package-data for static/, Apache-2.0 licence.
98 lines
3.6 KiB
HTML
98 lines
3.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>Audio Mastering Analysis Toolkit</title>
|
|
<link rel="stylesheet" href="/static/vendor/uPlot.min.css">
|
|
<link rel="stylesheet" href="/static/app.css">
|
|
</head>
|
|
<body>
|
|
|
|
<header class="topbar">
|
|
<div class="brand">
|
|
<span class="logo">◉</span>
|
|
<span class="brand-name">uj-mastering-master</span>
|
|
<span class="brand-sub">web</span>
|
|
</div>
|
|
<div class="topbar-controls">
|
|
<label class="field">
|
|
<span>Metric</span>
|
|
<select id="metric-select" title="Which metric to display"></select>
|
|
</label>
|
|
<label class="field">
|
|
<span>X axis</span>
|
|
<select id="x-mode-select" title="Absolute time, or each track normalised to its own length">
|
|
<option value="absolute">Absolute (s)</option>
|
|
<option value="relative">Relative (%)</option>
|
|
</select>
|
|
</label>
|
|
<button id="toggle-y-log" class="toggle" type="button">Y: log</button>
|
|
<button id="refresh-plot" class="btn" type="button" title="Redraw from cached data">Refresh</button>
|
|
<div class="separator"></div>
|
|
<button id="pick-files" class="btn primary" type="button">Add audio…</button>
|
|
<input id="file-input" type="file" accept=".mp3,.wav,.flac,.ogg,.oga,.m4a,.aif,.aiff,.opus" multiple hidden>
|
|
</div>
|
|
</header>
|
|
|
|
<main class="layout">
|
|
|
|
<aside class="sidebar">
|
|
<section class="panel">
|
|
<h2>Files <span id="file-count" class="badge">0</span></h2>
|
|
<ul id="file-list" class="file-list"></ul>
|
|
<p id="file-empty" class="empty">Drop audio files here, or use <em>Add audio…</em>.
|
|
Files are held in this browser, not on the server.</p>
|
|
</section>
|
|
|
|
<section class="panel">
|
|
<h2>Metadata</h2>
|
|
<dl id="metadata" class="metadata">
|
|
<dt>Track</dt><dd class="muted">nothing selected</dd>
|
|
</dl>
|
|
</section>
|
|
|
|
<section class="panel">
|
|
<h2>Reference lines <span id="ref-count" class="badge">0</span></h2>
|
|
<ul id="ref-list" class="ref-list"></ul>
|
|
<div class="ref-actions">
|
|
<button id="add-ref" class="btn small" type="button">Add at centre</button>
|
|
<button id="clear-refs" class="btn small" type="button">Clear</button>
|
|
</div>
|
|
<p class="hint">Drag a line on the plot to move it. Sets are kept per metric.</p>
|
|
</section>
|
|
</aside>
|
|
|
|
<section class="stage">
|
|
<div class="plot-head">
|
|
<h1 id="plot-title">No track loaded</h1>
|
|
<div id="legend" class="legend"></div>
|
|
</div>
|
|
|
|
<div id="plot-host" class="plot-host">
|
|
<div id="placeholder" class="placeholder">
|
|
<p class="ph-title">Audio Mastering Analysis Toolkit</p>
|
|
<p class="ph-body">Drop <code>.mp3</code>, <code>.wav</code> or <code>.flac</code> files to analyse.
|
|
Audio stays in this browser's private storage; the server receives it
|
|
only for the moment it takes to compute a metric, and writes nothing to
|
|
disk. Analysis runs at the file's native sample rate.</p>
|
|
</div>
|
|
<canvas id="heatmap" class="heatmap" hidden></canvas>
|
|
</div>
|
|
|
|
<div class="statusbar">
|
|
<span id="status" class="status">Ready</span>
|
|
<span id="timing" class="timing"></span>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<div id="drop-overlay" class="drop-overlay" hidden><span>Drop to analyse</span></div>
|
|
|
|
<script src="/static/vendor/uPlot.iife.min.js"></script>
|
|
<!-- app.js is an ES module: it imports ./audio-store.js, which owns the
|
|
browser-side copy of every uploaded file. -->
|
|
<script type="module" src="/static/app.js"></script>
|
|
</body>
|
|
</html>
|