Per-tool pages + multi-engine transcribe with expert controls

- Split monolithic index.php into per-tool pages (ask, search, summarize,
  timeline, redact, transcribe), each with its own URL and bookmarkable state
- Shared shell: includes/layout.php + layout_footer.php; shared form:
  includes/tool_form.php used by all text-tool pages
- index.php now redirects authenticated users to ask.php; unauthenticated
  users see the login gate only
- transcribe.php: engine selector (GPU/OpenAI/Azure), model size (small/
  medium/large-v3), diarize, language, expert settings (beam, VAD, task,
  initial prompt)
- api/transcribe.php: engine routing — GPU (cuttlefish), OpenAI BYOK,
  Azure AI Speech; passes model/beam/task/vad/prompt to Whisper server
- tools.js: data-active-tool body attr drives setTool() on load; <a> nav
  tabs skip click listeners; null guards on form/passcodeForm; engine radio
  toggle shows/hides BYOK key inputs and model selector; RTF shown in status
- tools.css: styles for BYOK inputs, expert settings panel, prompt textarea

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-05-13 22:14:20 +02:00
parent d178fbf295
commit eaff2a4d86
13 changed files with 789 additions and 257 deletions
+14 -163
View File
@@ -2,7 +2,14 @@
declare(strict_types=1);
require_once __DIR__ . '/includes/bootstrap.php';
$authenticated = dbnToolsIsAuthenticated();
if (dbnToolsIsAuthenticated()) {
$return = $_GET['return'] ?? '';
$dest = ($return && str_starts_with($return, '/') && !str_contains($return, '//'))
? $return : 'ask.php';
header('Location: ' . $dest);
exit;
}
?>
<!doctype html>
<html lang="en">
@@ -12,16 +19,17 @@ $authenticated = dbnToolsIsAuthenticated();
<title>Do Better Norge — AI Legal Research</title>
<meta name="description" content="AI-powered family law research for Norway. Source-cited answers from curated legal corpora, with a post-generation reviewer pass. Powered by CaveauAI.">
<meta name="robots" content="index, follow">
<link rel="canonical" href="https://ai.dobetternorge.no/">
<link rel="canonical" href="https://tools.dobetternorge.no/">
<meta property="og:title" content="Do Better Norge — AI Legal Research">
<meta property="og:description" content="Source-cited answers from curated Norwegian law corpora. Every claim checked against real sources before it reaches you.">
<meta property="og:type" content="website">
<meta property="og:url" content="https://ai.dobetternorge.no/">
<meta property="og:url" content="https://tools.dobetternorge.no/">
<meta name="theme-color" content="#f7f8fb">
<link rel="stylesheet" href="assets/css/tools.css">
</head>
<body data-authenticated="<?= $authenticated ? 'true' : 'false' ?>">
<div id="publicLanding" class="showcase-page<?= $authenticated ? ' is-hidden' : '' ?>">
<body data-authenticated="false">
<div id="publicLanding" class="showcase-page">
<header class="showcase-header">
<div class="showcase-header-inner">
@@ -156,164 +164,7 @@ $authenticated = dbnToolsIsAuthenticated();
</div>
<main id="appShell" class="app-shell<?= $authenticated ? '' : ' is-hidden' ?>">
<header class="topbar">
<div>
<p class="eyebrow">Do Better Norge</p>
<h1>Legal Tools Hub</h1>
</div>
<div class="topbar-actions">
<span id="healthPill" class="status-pill">Session active</span>
<button id="healthButton" class="secondary-button" type="button">Health</button>
</div>
</header>
<div class="disclaimer" role="note">
Legal information and preparation support, not final legal advice. Pasted text is processed in memory by default.
</div>
<section class="workspace" aria-label="Legal tools workspace">
<nav class="tool-rail" aria-label="Tools">
<button type="button" class="tool-tab is-active" data-tool="ask" aria-pressed="true">
<span>Ask</span>
<small>Source-grounded</small>
</button>
<button type="button" class="tool-tab" data-tool="search" aria-pressed="false">
<span>Search</span>
<small>Legal sources</small>
</button>
<button type="button" class="tool-tab" data-tool="summarize" aria-pressed="false">
<span>Summarize</span>
<small>Pasted text</small>
</button>
<button type="button" class="tool-tab" data-tool="timeline" aria-pressed="false">
<span>Timeline</span>
<small>Events</small>
</button>
<button type="button" class="tool-tab" data-tool="redact" aria-pressed="false">
<span>Redact</span>
<small>Privacy</small>
</button>
<button type="button" class="tool-tab" data-tool="transcribe" aria-pressed="false">
<span>Transcribe</span>
<small>Audio</small>
</button>
</nav>
<section class="tool-panel" aria-labelledby="toolTitle">
<div class="tool-heading">
<div>
<p id="toolKind" class="eyebrow">Source-grounded Legal Ask</p>
<h2 id="toolTitle">Ask a legal question</h2>
</div>
<span id="toolBadge" class="tool-badge">family-legal</span>
</div>
<form id="toolForm" class="tool-form">
<div class="control-row" id="languageControl">
<span class="control-label">Language</span>
<label><input type="radio" name="language" value="en" checked> English</label>
<label><input type="radio" name="language" value="no"> Norsk</label>
</div>
<div class="control-row is-hidden" id="transcribeLangControl">
<span class="control-label">Language</span>
<label><input type="radio" name="transcribeLang" value="auto" checked> Auto-detect</label>
<label><input type="radio" name="transcribeLang" value="no"> Norsk</label>
<label><input type="radio" name="transcribeLang" value="en"> English</label>
</div>
<div class="control-row is-hidden" id="diarizeControl">
<span class="control-label">Speakers</span>
<label><input type="checkbox" id="diarizeCheck" name="diarize"> Separate speakers</label>
<span class="control-label" style="margin-left:1.25rem">Count</span>
<input type="number" id="numSpeakersInput" name="num_speakers" min="2" max="10" placeholder="auto" class="num-speakers-input" aria-label="Expected speaker count">
</div>
<div class="control-row is-hidden" id="redactionControl">
<span class="control-label">Mode</span>
<label><input type="radio" name="redactionMode" value="standard" checked> Standard</label>
<label><input type="radio" name="redactionMode" value="strict"> Strict</label>
<span class="control-label" style="margin-left:1.25rem">Region</span>
<label><input type="radio" name="redactionRegion" value="nordic" checked> Nordic</label>
<label><input type="radio" name="redactionRegion" value="european"> European</label>
<label><input type="radio" name="redactionRegion" value="echr"> ECHR</label>
<label><input type="radio" name="redactionRegion" value="global"> Global</label>
</div>
<div class="upload-zone is-hidden" id="audioZone" role="region" aria-label="Audio upload">
<input type="file" id="audioInput" accept="audio/*,video/mp4,video/webm" aria-label="Choose audio file">
<div id="audioPrompt" class="upload-prompt">
<span class="upload-icon" aria-hidden="true">&#9654;</span>
<p>Drop audio file here, or <label for="audioInput" class="upload-browse">browse</label></p>
<p class="upload-hint"><strong>MP3</strong>, <strong>WAV</strong>, <strong>OGG</strong>, <strong>M4A</strong>, <strong>FLAC</strong>, <strong>WEBM</strong> &mdash; max 200&thinsp;MB</p>
</div>
<div id="audioFileInfo" class="upload-file is-hidden">
<ul class="upload-file-list"><li id="audioFileLine"><span id="audioFileName" class="upload-filename"></span><span id="audioFileSize" class="upload-chars"></span></li></ul>
<button type="button" id="audioClear" class="upload-clear" aria-label="Clear audio file">&times;</button>
</div>
</div>
<div class="upload-zone is-hidden" id="uploadZone" role="region" aria-label="File upload">
<input type="file" id="uploadInput" multiple accept=".pdf,.docx,.txt" aria-label="Choose files">
<div id="uploadPrompt" class="upload-prompt">
<span class="upload-icon" aria-hidden="true">&#8679;</span>
<p>Drop up to 5 files (<strong>.pdf</strong>, <strong>.docx</strong>, <strong>.txt</strong>), or <label for="uploadInput" class="upload-browse">browse</label></p>
<p class="upload-hint">Text is extracted in memory and never stored.</p>
</div>
<div id="uploadFileInfo" class="upload-file is-hidden">
<ul id="uploadFileList" class="upload-file-list"></ul>
<button type="button" id="uploadClear" class="upload-clear" aria-label="Clear uploaded files">&times;</button>
</div>
</div>
<div class="alias-section is-hidden" id="aliasSection">
<div class="alias-header">
<span class="control-label">Name aliases</span>
<button type="button" id="addAliasRow" class="alias-add-btn">+ Add</button>
</div>
<div id="aliasRows"></div>
<p class="alias-hint">Replace a name with a bracketed alias, e.g. &ldquo;David Jr&rdquo; &rarr; [Junior]</p>
</div>
<label class="input-label" for="toolInput" id="inputLabel">Question</label>
<textarea id="toolInput" name="toolInput" rows="10" required></textarea>
<div class="form-footer">
<p id="toolStatus" class="form-status" role="status" aria-live="polite"></p>
<button id="runButton" type="submit">Run Tool</button>
</div>
</form>
<section id="results" class="results" aria-live="polite">
<div class="empty-state">
<h3>Ready</h3>
<p>Choose a tool, run a request, and the answer will show the evidence trail beside it.</p>
</div>
</section>
</section>
<aside class="reasoning-panel" aria-labelledby="reasoningTitle">
<div class="reasoning-head">
<p class="eyebrow">Evidence trail</p>
<h2 id="reasoningTitle">Reasoning</h2>
</div>
<ol id="traceList" class="trace-list">
<li>
<span class="trace-status waiting"></span>
<div>
<strong>Waiting</strong>
<p>Run a tool to see interpretation, retrieval, confidence, uncertainty, and next step.</p>
</div>
</li>
</ol>
</aside>
</section>
</main>
<script>
window.DBN_TOOLS_AUTHENTICATED = <?= $authenticated ? 'true' : 'false' ?>;
</script>
<script>window.DBN_TOOLS_AUTHENTICATED = false;</script>
<script src="assets/js/tools.js" defer></script>
</body>
</html>