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:
@@ -0,0 +1,67 @@
|
||||
<?php
|
||||
declare(strict_types=1);
|
||||
// Required vars: $toolName (string), $toolTitle (string), $toolKind (string), $toolBadge (string)
|
||||
require_once __DIR__ . '/bootstrap.php';
|
||||
if (!dbnToolsIsAuthenticated()) {
|
||||
$return = urlencode($_SERVER['REQUEST_URI'] ?? '/');
|
||||
header('Location: /?return=' . $return);
|
||||
exit;
|
||||
}
|
||||
|
||||
$navItems = [
|
||||
'ask' => ['Ask', 'Source-grounded'],
|
||||
'search' => ['Search', 'Legal sources'],
|
||||
'summarize' => ['Summarize', 'Pasted text'],
|
||||
'timeline' => ['Timeline', 'Events'],
|
||||
'redact' => ['Redact', 'Privacy'],
|
||||
'transcribe' => ['Transcribe', 'Audio'],
|
||||
];
|
||||
$toolName = $toolName ?? 'ask';
|
||||
$toolTitle = $toolTitle ?? 'Legal Tools';
|
||||
$toolKind = $toolKind ?? '';
|
||||
$toolBadge = $toolBadge ?? '';
|
||||
?>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title><?= htmlspecialchars($toolTitle) ?> — Do Better Norge</title>
|
||||
<link rel="stylesheet" href="assets/css/tools.css">
|
||||
</head>
|
||||
<body data-authenticated="true" data-active-tool="<?= htmlspecialchars($toolName) ?>">
|
||||
<script>window.DBN_TOOLS_AUTHENTICATED = true;</script>
|
||||
<main id="appShell" class="app-shell">
|
||||
<header class="topbar">
|
||||
<div>
|
||||
<p class="eyebrow">Do Better Norge</p>
|
||||
<h1>Legal Tools</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">
|
||||
<?php foreach ($navItems as $slug => [$label, $sub]): ?>
|
||||
<a href="<?= $slug ?>.php" class="tool-tab<?= $slug === $toolName ? ' is-active' : '' ?>" data-tool="<?= $slug ?>"<?= $slug === $toolName ? ' aria-current="page"' : '' ?>>
|
||||
<span><?= $label ?></span>
|
||||
<small><?= $sub ?></small>
|
||||
</a>
|
||||
<?php endforeach; ?>
|
||||
</nav>
|
||||
|
||||
<section class="tool-panel" aria-labelledby="toolTitle">
|
||||
<div class="tool-heading">
|
||||
<div>
|
||||
<p id="toolKind" class="eyebrow"><?= htmlspecialchars($toolKind) ?></p>
|
||||
<h2 id="toolTitle"><?= htmlspecialchars($toolTitle) ?></h2>
|
||||
</div>
|
||||
<span id="toolBadge" class="tool-badge"><?= htmlspecialchars($toolBadge) ?></span>
|
||||
</div>
|
||||
@@ -0,0 +1,22 @@
|
||||
</section><!-- /tool-panel -->
|
||||
|
||||
<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><!-- /workspace -->
|
||||
</main><!-- /appShell -->
|
||||
<script src="assets/js/tools.js" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,82 @@
|
||||
<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">▶</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> — max 200 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">×</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">⇧</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">×</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. “David Jr” → [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>
|
||||
Reference in New Issue
Block a user