daveadmin
81ba20c44a
3 new public pages matching the korrespond doc pattern: timeline-about.php (marketing), timeline-guide.php (user guide), timeline-tech.php (tech showcase). Hero images + 4 screenshots in assets/images/timeline/. Doc links added to timeline.php and preview.php?tool=timeline. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
344 lines
21 KiB
PHP
344 lines
21 KiB
PHP
<?php
|
||
declare(strict_types=1);
|
||
require_once __DIR__ . '/includes/bootstrap.php';
|
||
|
||
$uiLang = dbnToolsCurrentLanguage();
|
||
$isAuthed = dbnToolsIsAuthenticated();
|
||
$langPath = '/timeline-guide.php';
|
||
$toolsLogin = 'https://dobetternorge.no/tools-login.php?return=' . urlencode('/timeline.php');
|
||
$registerUrl = 'https://dobetternorge.no/register.php';
|
||
?>
|
||
<!doctype html>
|
||
<html lang="<?= htmlspecialchars($uiLang) ?>">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>Timeline User Guide — How to extract dates from Norwegian legal documents</title>
|
||
<meta name="description" content="Step-by-step guide to using Timeline: choose an engine, set focus and confidence filters, upload files, read the timeline output, and interpret the evidence trail.">
|
||
<meta name="robots" content="index, follow">
|
||
<link rel="canonical" href="https://tools.dobetternorge.no/timeline-guide.php">
|
||
<meta property="og:title" content="Timeline User Guide">
|
||
<meta property="og:description" content="How to use Timeline to extract and classify dates from Norwegian case notes, court decisions, and correspondence.">
|
||
<meta name="theme-color" content="#00205B">
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@400;600;700&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap">
|
||
<link rel="stylesheet" href="assets/css/tools.css">
|
||
</head>
|
||
<body class="kdoc-page">
|
||
|
||
<header class="lt-nav">
|
||
<a href="https://dobetternorge.no" class="lt-nav__brand">
|
||
<picture>
|
||
<source srcset="assets/images/logo-header.webp" type="image/webp">
|
||
<img class="lt-nav__logo" src="assets/images/logo-header.png" alt="Do Better Norge" width="140" height="36" loading="eager">
|
||
</picture>
|
||
<span class="lt-nav__badge">Legal Tools</span>
|
||
</a>
|
||
<div class="lt-nav__right">
|
||
<nav class="shell-lang-switcher" aria-label="Language">
|
||
<?php foreach (dbnToolsSupportedLanguages() as $langCode): ?>
|
||
<a href="<?= htmlspecialchars($langPath . '?lang=' . $langCode) ?>" class="<?= $langCode === $uiLang ? 'is-active' : '' ?>"><?= htmlspecialchars(dbnToolsLanguageLabel($langCode)) ?></a>
|
||
<?php endforeach; ?>
|
||
</nav>
|
||
<?php if ($isAuthed): ?>
|
||
<a href="/timeline.php" class="lt-nav__cta lt-nav__cta--enter">Open Timeline →</a>
|
||
<?php else: ?>
|
||
<a href="<?= htmlspecialchars($toolsLogin) ?>" class="lt-nav__cta">Sign in</a>
|
||
<?php endif; ?>
|
||
</div>
|
||
</header>
|
||
|
||
<nav class="kdoc-doc-nav" aria-label="Timeline documentation">
|
||
<div class="kdoc-doc-nav__inner">
|
||
<a href="/timeline-about.php">About</a>
|
||
<a href="/timeline-guide.php" class="is-active">User guide</a>
|
||
<a href="/timeline-tech.php">How it works</a>
|
||
<?php if ($isAuthed): ?><a href="/timeline.php">← Open the tool</a><?php endif; ?>
|
||
</div>
|
||
</nav>
|
||
|
||
<!-- Hero -->
|
||
<section class="kdoc-hero" style="background: linear-gradient(rgba(0,20,60,0.78),rgba(0,20,60,0.86)), url('assets/images/timeline/hero-guide.png') center/cover no-repeat;">
|
||
<div class="kdoc-hero__inner">
|
||
<p class="kdoc-hero__kicker">User Guide · Timeline</p>
|
||
<h1 class="kdoc-hero__title">How to use Timeline.</h1>
|
||
<p class="kdoc-hero__sub">A step-by-step walkthrough of every control — from choosing your engine and focus filter to reading the output and understanding the evidence trail.</p>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- TOC + content -->
|
||
<div class="kdoc-section">
|
||
|
||
<div class="kdoc-toc">
|
||
<p class="kdoc-toc__title">In this guide</p>
|
||
<ol>
|
||
<li><a href="#engine">Choose your engine</a></li>
|
||
<li><a href="#focus">Focus filter</a></li>
|
||
<li><a href="#confidence">Confidence filter</a></li>
|
||
<li><a href="#background">Background events</a></li>
|
||
<li><a href="#datetypes">Date types</a></li>
|
||
<li><a href="#upload">Upload files</a></li>
|
||
<li><a href="#paste">Pasted text & context notes</a></li>
|
||
<li><a href="#reading">Reading the timeline</a></li>
|
||
<li><a href="#evidence">Evidence trail, uncertainty & next step</a></li>
|
||
<li><a href="#tips">Tips & gotchas</a></li>
|
||
</ol>
|
||
</div>
|
||
|
||
<!-- Step 1: Engine -->
|
||
<div class="kdoc-guide-step" id="engine">
|
||
<div class="kdoc-guide-step__header">
|
||
<span class="kdoc-guide-step__num">1</span>
|
||
<h2 class="kdoc-guide-step__title">Choose your engine</h2>
|
||
</div>
|
||
<div class="kdoc-guide-step__body">
|
||
<p>The engine controls the AI model used for extraction. Azure engines use your BNL Azure credits. The GPU engine runs the LiteLLM proxy on the local cuttlefish server with the dbn-legal-agent fine-tuned model.</p>
|
||
</div>
|
||
<table class="kdoc-table">
|
||
<thead>
|
||
<tr>
|
||
<th>Engine</th>
|
||
<th>Speed</th>
|
||
<th>Best for</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>Azure gpt-4o-mini ★</td>
|
||
<td>Fast (~15 s)</td>
|
||
<td>Default. Everyday extractions, long documents, first pass.</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Azure gpt-4o</td>
|
||
<td>Best quality (~45 s)</td>
|
||
<td>Complex documents, overlapping events, ambiguous or poorly formatted source text.</td>
|
||
</tr>
|
||
<tr>
|
||
<td>GPU / cuttlefish</td>
|
||
<td>Local (~25 s)</td>
|
||
<td>Maximum privacy. Runs entirely on local GPU with dbn-legal-agent fine-tuned model. Requires cuttlefish server online.</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
<!-- Step 2: Focus filter -->
|
||
<div class="kdoc-guide-step" id="focus">
|
||
<div class="kdoc-guide-step__header">
|
||
<span class="kdoc-guide-step__num">2</span>
|
||
<h2 class="kdoc-guide-step__title">Focus filter</h2>
|
||
</div>
|
||
<div class="kdoc-guide-step__body">
|
||
<p>The focus filter scopes what kinds of events the AI looks for. Found in the Advanced settings panel (click to expand).</p>
|
||
</div>
|
||
<table class="kdoc-table">
|
||
<thead>
|
||
<tr>
|
||
<th>Mode</th>
|
||
<th>What it extracts</th>
|
||
<th>When to use</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>All events ★</td>
|
||
<td>Every temporal reference in the document — background, operational, deadlines, narrative</td>
|
||
<td>Building a complete chronology from scratch</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Legal deadlines</td>
|
||
<td>Filing deadlines, appeal windows, statutory time limits</td>
|
||
<td>Checking whether you've missed a deadline or when you must act next</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Court hearings</td>
|
||
<td>Tribunal sessions, mediation dates, court appearances</td>
|
||
<td>Preparing for a hearing or reconstructing hearing history</td>
|
||
</tr>
|
||
<tr>
|
||
<td>CPS milestones</td>
|
||
<td>Barnevernet interventions, akuttplassering, tiltaksplan milestones, Fylkesnemnda proceedings</td>
|
||
<td>Child welfare cases needing a CPS-specific chronology</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
<!-- Step 3: Confidence -->
|
||
<div class="kdoc-guide-step" id="confidence">
|
||
<div class="kdoc-guide-step__header">
|
||
<span class="kdoc-guide-step__num">3</span>
|
||
<h2 class="kdoc-guide-step__title">Confidence filter</h2>
|
||
</div>
|
||
<div class="kdoc-guide-step__body">
|
||
<p>Controls whether uncertain events appear in the output. Also in the Advanced settings panel.</p>
|
||
</div>
|
||
<table class="kdoc-table">
|
||
<thead>
|
||
<tr>
|
||
<th>Setting</th>
|
||
<th>What it does</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>Show all events ★</td>
|
||
<td>Returns all extracted events including LOW-confidence ones (shown in grey). Use for a complete picture — decide yourself what to trust.</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Hide low-confidence</td>
|
||
<td>Suppresses any event the model isn't reasonably certain about. Use when you need a clean, defensible timeline for court or legal filing.</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
<div class="kdoc-guide-step__body" style="margin-top:1rem;">
|
||
<p>LOW-confidence events are typically those where the date is implied rather than stated, relative to an unclear reference point, or extracted from a degraded or ambiguous section of the source.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Step 4: Background events -->
|
||
<div class="kdoc-guide-step" id="background">
|
||
<div class="kdoc-guide-step__header">
|
||
<span class="kdoc-guide-step__num">4</span>
|
||
<h2 class="kdoc-guide-step__title">Background events</h2>
|
||
</div>
|
||
<div class="kdoc-guide-step__body">
|
||
<p><strong>Default: ON (checked).</strong> When checked, historical context dates are included — dates like <em>“born 30.07.2015”</em>, <em>“met around 2011/2012”</em>, <em>“married in 2009”</em>. These establish the narrative and biographical context of a case.</p>
|
||
<p style="margin-top:0.8rem;"><strong>When to uncheck:</strong> if you only want operational events and decisions — not biographical background. Unchecking substantially reduces event count in case notes that mix history with current proceedings. Useful when you're building a deadline tracker or action list rather than a full chronology.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Step 5: Date types -->
|
||
<div class="kdoc-guide-step" id="datetypes">
|
||
<div class="kdoc-guide-step__header">
|
||
<span class="kdoc-guide-step__num">5</span>
|
||
<h2 class="kdoc-guide-step__title">Date types</h2>
|
||
</div>
|
||
<div class="kdoc-guide-step__body">
|
||
<p><strong>Default: ON (checked).</strong> When checked, relative references (<em>“tre uker etter vedtaket”</em>), recurring patterns (<em>“each Monday”</em>, <em>“every 6 months”</em>), and conditional dates (<em>“if no response within 14 days”</em>) are included alongside absolute dates.</p>
|
||
<p style="margin-top:0.8rem;"><strong>When to uncheck:</strong> if you need only exact calendar dates — for example when exporting to a calendar app, a deadline tracker, or a court submission that requires hard dates only. Unchecking removes all events without a resolvable absolute date.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Step 6: Upload files -->
|
||
<div class="kdoc-guide-step" id="upload">
|
||
<div class="kdoc-guide-step__header">
|
||
<span class="kdoc-guide-step__num">6</span>
|
||
<h2 class="kdoc-guide-step__title">Upload files</h2>
|
||
</div>
|
||
<div class="kdoc-guide-step__screenshot">
|
||
<img src="assets/images/timeline/form-top.png" alt="Timeline form showing engine selection, advanced settings panel, and file upload zone" class="kdoc-screenshot" style="max-width:700px;" loading="lazy">
|
||
</div>
|
||
<div class="kdoc-guide-step__body">
|
||
<p>Drag files onto the upload zone or click <strong>browse</strong>. A file list appears below with a Clear button to remove files.</p>
|
||
<p style="margin-top:0.8rem;"><strong>Supported formats:</strong> <strong>PDF</strong>, <strong>DOCX</strong>, <strong>TXT</strong>. Up to 5 files per run.</p>
|
||
<p style="margin-top:0.8rem;">Files are extracted to text in memory. <strong>Nothing is written to disk. Nothing is retained after the session ends.</strong></p>
|
||
<p style="margin-top:0.8rem;">Upload and pasted text can be combined — the AI reads all sources together as a single input. If a case spans multiple documents, upload them all and let the tool assemble one unified timeline.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Step 7: Pasted text + context notes -->
|
||
<div class="kdoc-guide-step" id="paste">
|
||
<div class="kdoc-guide-step__header">
|
||
<span class="kdoc-guide-step__num">7</span>
|
||
<h2 class="kdoc-guide-step__title">Pasted text & context notes</h2>
|
||
</div>
|
||
<div class="kdoc-guide-step__body">
|
||
<p>Paste up to <strong>128,000 characters</strong> of text into the main text area — approximately 90–100 pages of A4. This can include case notes, decision letters, correspondence, or any document containing dates.</p>
|
||
<p style="margin-top:0.8rem;"><strong>Context notes</strong> (optional, up to 2,000 characters): use this field to guide the AI on ambiguities in your document. These notes are passed directly into the extraction prompt and are not stored. Good examples:</p>
|
||
<ul style="margin-top:0.6rem; padding-left:1.4rem; font-size:0.9rem; line-height:1.8;">
|
||
<li><em>“All dates are in 2024 unless stated otherwise.”</em></li>
|
||
<li><em>“D refers to the defendant, M is the mother, BV is Barnevernet.”</em></li>
|
||
<li><em>“The document is a summary of events, not in chronological order.”</em></li>
|
||
<li><em>“'Vedtaket' always refers to the omsorgsovertakelse decision of 12.03.2024.”</em></li>
|
||
<li><em>“Focus on the father's actions. Ignore events relating to the sister.”</em></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Step 8: Reading the output -->
|
||
<div class="kdoc-guide-step" id="reading">
|
||
<div class="kdoc-guide-step__header">
|
||
<span class="kdoc-guide-step__num">8</span>
|
||
<h2 class="kdoc-guide-step__title">Reading the timeline</h2>
|
||
</div>
|
||
<div class="kdoc-guide-step__screenshot">
|
||
<img src="assets/images/timeline/output-timeline.png" alt="Timeline output showing date cards with ABSOLUTE badge, HIGH confidence, actor names, event descriptions, and source excerpts" class="kdoc-screenshot" style="max-width:800px;" loading="lazy">
|
||
</div>
|
||
<div class="kdoc-guide-step__body">
|
||
<p>Each event card in the timeline contains:</p>
|
||
<ul style="padding-left:1.4rem; font-size:0.9rem; line-height:1.8; margin-top:0.5rem;">
|
||
<li><strong>Date:</strong> the resolved date. Absolute events show a formatted date (e.g. <em>2025-04-09</em>). Relative events show the expressed reference (e.g. <em>“three weeks after the decision”</em>). Periods show start–end.</li>
|
||
<li><strong>Date type badge:</strong> one of <code>ABSOLUTE</code> / <code>RELATIVE</code> / <code>RECURRING</code> / <code>CONDITIONAL</code> / <code>PERIOD</code>. Tells you how the date was expressed in the source.</li>
|
||
<li><strong>Confidence badge:</strong> <code>HIGH</code> (green — clearly stated), <code>MEDIUM</code> (amber — inferred), <code>LOW</code> (grey — ambiguous). LOW events appear greyed out when "Show all" is selected.</li>
|
||
<li><strong>Actor:</strong> the person, institution, or body the event is attributed to (named or by role).</li>
|
||
<li><strong>Event description:</strong> a concise one-sentence summary of what happened on that date.</li>
|
||
<li><strong>Source excerpt:</strong> the exact text from your document that produced this event.</li>
|
||
</ul>
|
||
<p style="margin-top:0.8rem;"><strong>Sorting:</strong> use the sort toggle above the timeline to switch between <strong>Document order</strong> (the order events appear in your source) and <strong>Chronological</strong> (oldest to newest).</p>
|
||
<p style="margin-top:0.6rem;"><strong>Search:</strong> type any keyword to filter events. The search matches against date, actor, description, and source excerpt simultaneously.</p>
|
||
</div>
|
||
<div class="kdoc-guide-step__screenshot" style="margin-top:1rem;">
|
||
<img src="assets/images/timeline/output-detail.png" alt="Detailed timeline events with Barnevernet social workers Judith and Trude, meetings in April and May 2025" class="kdoc-screenshot" style="max-width:800px;" loading="lazy">
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Step 9: Evidence trail -->
|
||
<div class="kdoc-guide-step" id="evidence">
|
||
<div class="kdoc-guide-step__header">
|
||
<span class="kdoc-guide-step__num">9</span>
|
||
<h2 class="kdoc-guide-step__title">Evidence trail, uncertainty & next step</h2>
|
||
</div>
|
||
<div class="kdoc-guide-step__screenshot">
|
||
<img src="assets/images/timeline/evidence-trail.png" alt="Evidence Trail section with three source documents listed, What Remains Uncertain bullet list, and Next Practical Step recommendation" class="kdoc-screenshot" style="max-width:700px;" loading="lazy">
|
||
</div>
|
||
<div class="kdoc-guide-step__body">
|
||
<p>Three sub-sections appear below every timeline:</p>
|
||
<ul style="padding-left:1.4rem; font-size:0.9rem; line-height:1.9; margin-top:0.5rem;">
|
||
<li><strong>Evidence Trail:</strong> lists every source document (or paste) that contributed events, with a title and excerpt identifying the source. Use this to verify that all your documents were processed and to trace any event back to its origin.</li>
|
||
<li><strong>What Remains Uncertain:</strong> a bulleted list of dates the AI could not fully resolve — undated events, events with ambiguous years, relative dates with no resolvable anchor. This is what you still need to verify or obtain manually.</li>
|
||
<li><strong>Next Practical Step:</strong> a single AI-generated recommended action based on the overall timeline — for example: <em>“Verify whether the 6-week appeal window from the 12.03.2024 omsorgsovertakelse has elapsed and document any missed deadline formally.”</em></li>
|
||
</ul>
|
||
<p style="margin-top:0.8rem;">The disclaimer at the bottom confirms that Timeline provides <em>preparation support</em>, not legal advice.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Tips -->
|
||
<div class="kdoc-guide-step" id="tips">
|
||
<div class="kdoc-guide-step__header">
|
||
<span class="kdoc-guide-step__num">10</span>
|
||
<h2 class="kdoc-guide-step__title">Tips & gotchas</h2>
|
||
</div>
|
||
<div class="kdoc-tips">
|
||
<div class="kdoc-tip"><strong>Use context notes for abbreviations.</strong> If your document uses internal abbreviations (D, M, BV, BH, the father, the case worker) consistently, naming them in the context notes dramatically improves actor attribution across all events.</div>
|
||
<div class="kdoc-tip"><strong>Combine upload and paste for best coverage.</strong> Upload the main decision letter and paste related case notes into the text area. The AI reads all sources together and produces one unified timeline.</div>
|
||
<div class="kdoc-tip"><strong>Run All events first, then re-run with focus.</strong> Start with the default "All events" mode to see the full picture. Then re-run with a specific focus mode (e.g. Legal deadlines) if you need a filtered view for a submission.</div>
|
||
<div class="kdoc-tip"><strong>Date types off for clean deadline lists.</strong> If you're exporting to a calendar or deadline tracker, uncheck "Date types" to return only resolved calendar dates — no relative or recurring entries to sort through.</div>
|
||
<div class="kdoc-tip"><strong>GPU engine for maximum privacy.</strong> The cuttlefish engine processes entirely locally using dbn-legal-agent — nothing leaves your network. Use it for the most sensitive case material.</div>
|
||
<div class="kdoc-tip"><strong>LOW confidence isn't wrong — it's uncertain.</strong> A LOW confidence event may still be correct and important. Read the source excerpt for each LOW event before dismissing it — the AI may have found a real date that was just expressed ambiguously.</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div><!-- /kdoc-section -->
|
||
|
||
<!-- CTA -->
|
||
<section class="kdoc-cta-strip">
|
||
<h2 class="kdoc-cta-strip__title">Ready to try it?</h2>
|
||
<p class="kdoc-cta-strip__sub">Free for Do Better Norge members.</p>
|
||
<div class="kdoc-hero__ctas">
|
||
<?php if ($isAuthed): ?>
|
||
<a href="/timeline.php" class="kdoc-btn-primary">Open Timeline →</a>
|
||
<?php else: ?>
|
||
<a href="<?= htmlspecialchars($toolsLogin) ?>" class="kdoc-btn-primary">Sign in to use Timeline →</a>
|
||
<a href="<?= htmlspecialchars($registerUrl) ?>" class="kdoc-btn-secondary">Register free</a>
|
||
<?php endif; ?>
|
||
<a href="/timeline-tech.php" class="kdoc-btn-secondary">How it works under the hood</a>
|
||
</div>
|
||
</section>
|
||
|
||
<?php require_once __DIR__ . '/includes/footer.php'; ?>
|
||
<script src="assets/js/tools.js" defer></script>
|
||
</body>
|
||
</html>
|