daveadmin/dobetternorge-tools
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add why-ours.php — plain-language explainer page

Browse Source 
Explains why Do Better Norge tools give different answers than ChatGPT:
RAG, BM25+vector search, reranker, knowledge graph, fine-tuned model.
Includes EN/NO translations, 5 optimised WebP/JPEG images, new kdoc-compare
and kdoc-graph CSS components. Link added from index.php trust section.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
davegilligan
2026-05-21 06:48:02 +02:00
parent 1f67f20581
commit fc84bb31fe
14 changed files with 866 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
why-ours.php
+417
View File
@@ -0,0 +1,417 @@
<?php
declare(strict_types=1);
require_once __DIR__ . '/includes/bootstrap.php';
$uiLang = dbnToolsCurrentLanguage();
$isAuthed = dbnToolsIsAuthenticated();
$langPath = '/why-ours.php';
$toolsLogin = 'https://dobetternorge.no/tools-login.php?return=' . urlencode('/why-ours.php');
$registerUrl = 'https://dobetternorge.no/register.php';
$ctaUrl = $isAuthed ? '/index.php' : $toolsLogin;
$_pt = require __DIR__ . '/translations/why-ours.php';
$t = (!empty($_pt[$uiLang])) ? $_pt[$uiLang] : $_pt['en'];
/* Helper: image slot — serves WebP+JPG <picture> if optimised files exist, else shows placeholder */
function imgSlot(string $slot, string $file, string $label, string $caption, string $prompt): string {
$base = pathinfo($file, PATHINFO_FILENAME);
$webp = __DIR__ . '/assets/images/why-ours/' . $base . '.webp';
$jpg = __DIR__ . '/assets/images/why-ours/' . $base . '.jpg';
$webpSrc = 'assets/images/why-ours/' . $base . '.webp';
$jpgSrc = 'assets/images/why-ours/' . $base . '.jpg';
$alt = htmlspecialchars($caption);
$html = '<div class="kdoc-img-slot">';
if (file_exists($webp) && file_exists($jpg)) {
$html .= '<picture>';
$html .= '<source srcset="' . $webpSrc . '" type="image/webp">';
$html .= '<img src="' . $jpgSrc . '" alt="' . $alt . '" loading="lazy" style="width:100%;height:100%;object-fit:cover;display:block">';
$html .= '</picture>';
} else {
$html .= '<div class="kdoc-img-slot__placeholder">';
$html .= '<p class="kdoc-img-slot__label">Image slot ' . htmlspecialchars($slot) . ' — place generated image at assets/images/why-ours/' . htmlspecialchars($file) . '</p>';
$html .= '<strong>' . htmlspecialchars($label) . '</strong>';
$html .= '<div class="kdoc-img-slot__prompt"><strong>AI image prompt:</strong><br>' . htmlspecialchars($prompt) . '</div>';
$html .= '</div>';
}
$html .= '</div>';
return $html;
}
?>
<!doctype html>
<html lang="<?= htmlspecialchars($uiLang) ?>">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Why our tools give different answers than ChatGPT · Do Better Norge Tools</title>
<meta name="description" content="Plain-language explainer: why RAG, BM25 keyword search, semantic vector search, a reranker, and a fine-tuned Norwegian law model give you fundamentally different — and more reliable — answers than ChatGPT or Gemini.">
<meta name="robots" content="index, follow">
<link rel="canonical" href="https://tools.dobetternorge.no/why-ours.php">
<meta property="og:title" content="Why our tools give different answers than ChatGPT">
<meta property="og:description" content="ChatGPT answers from memory. Do Better Norge tools look it up first — 220,000+ verified Norwegian legal passages, every time.">
<meta property="og:type" content="website">
<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">
<!-- ── Navigation ─────────────────────────────────────────────────────────── -->
<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="/index.php" class="lt-nav__cta lt-nav__cta--enter"><?= htmlspecialchars($t['nav_open']) ?></a>
<?php else: ?>
<a href="<?= htmlspecialchars($toolsLogin) ?>" class="lt-nav__cta"><?= htmlspecialchars($t['nav_signin']) ?></a>
<?php endif; ?>
</div>
</header>
<!-- ── Hero ───────────────────────────────────────────────────────────────── -->
<section class="kdoc-hero" style="background: linear-gradient(rgba(0,15,50,0.88),rgba(0,15,50,0.93)), url('assets/images/why-ours/hero.jpg') center/cover no-repeat;">
<div class="kdoc-hero__inner">
<p class="kdoc-hero__kicker"><?= htmlspecialchars($t['hero_kicker']) ?></p>
<h1 class="kdoc-hero__title"><?= htmlspecialchars($t['hero_title']) ?></h1>
<p class="kdoc-hero__sub"><?= htmlspecialchars($t['hero_sub']) ?></p>
<div class="kdoc-hero__stats">
<div class="kdoc-hero__stat">
<strong>220K+</strong>
<span><?= htmlspecialchars($t['stat_passages']) ?></span>
</div>
<div class="kdoc-hero__stat">
<strong>1,731</strong>
<span><?= htmlspecialchars($t['stat_tribunal']) ?></span>
</div>
<div class="kdoc-hero__stat">
<strong>23</strong>
<span><?= htmlspecialchars($t['stat_echr']) ?></span>
</div>
<div class="kdoc-hero__stat">
<strong>NO</strong>
<span><?= htmlspecialchars($t['stat_scope']) ?></span>
</div>
</div>
<div class="kdoc-hero__ctas">
<a href="<?= htmlspecialchars($ctaUrl) ?>" class="kdoc-btn-primary"><?= htmlspecialchars($t['btn_try']) ?></a>
<?php if (!$isAuthed): ?>
<a href="<?= htmlspecialchars($registerUrl) ?>" class="kdoc-btn-secondary"><?= htmlspecialchars($t['btn_register']) ?></a>
<?php endif; ?>
</div>
</div>
</section>
<?php echo imgSlot(
'1',
'hero.jpg',
'Hero — ChatGPT vs Do Better Norge',
'Split composition: left side shows a person at a laptop with a vague "Maybe?" AI response; right side shows the same person at a clean Nordic desk with precise law citations glowing in gold.',
'Cinematic split composition. Left half: a person sits at a laptop, a large glowing chat bubble above their head filled with jumbled text — the word "Maybe?" prominent. Soft, uncertain light, slightly desaturated. Right half: the same person at a clean Nordic-minimalist desk, a glowing document interface with Norwegian law text visible, specific paragraph numbers highlighted in warm gold. Soft directional light. Navy blue and deep red color palette. Photorealistic, editorial style. Wide landscape format, 16:9.'
); ?>
<!-- ── Core problem: two-path comparison ─────────────────────────────────── -->
<div class="kdoc-section">
<p class="kdoc-section__eyebrow"><?= htmlspecialchars($t['problem_eyebrow']) ?></p>
<h2 class="kdoc-section__title"><?= htmlspecialchars($t['problem_title']) ?></h2>
<p class="kdoc-section__sub"><?= htmlspecialchars($t['problem_sub']) ?></p>
<div class="kdoc-compare">
<!-- Left: generic AI -->
<div class="kdoc-compare__col kdoc-compare__col--generic">
<p class="kdoc-compare__label"><?= htmlspecialchars($t['col_generic_label']) ?></p>
<div class="kdoc-compare__flow">
<div class="kdoc-compare__flow-step"><?= htmlspecialchars($t['col_generic_s1']) ?></div>
<div class="kdoc-compare__arrow">&#8595;</div>
<div class="kdoc-compare__flow-step"><?= htmlspecialchars($t['col_generic_s2']) ?></div>
<div class="kdoc-compare__arrow">&#8595;</div>
<div class="kdoc-compare__flow-step"><?= htmlspecialchars($t['col_generic_s3']) ?></div>
<div class="kdoc-compare__arrow">&#8595;</div>
<div class="kdoc-compare__flow-step kdoc-compare__flow-step--final"><?= htmlspecialchars($t['col_generic_s4']) ?></div>
</div>
</div>
<!-- Right: Do Better Norge -->
<div class="kdoc-compare__col kdoc-compare__col--dbn">
<p class="kdoc-compare__label"><?= htmlspecialchars($t['col_dbn_label']) ?></p>
<div class="kdoc-compare__flow">
<div class="kdoc-compare__flow-step"><?= htmlspecialchars($t['col_dbn_s1']) ?></div>
<div class="kdoc-compare__arrow">&#8595;</div>
<div class="kdoc-compare__flow-step"><?= htmlspecialchars($t['col_dbn_s2']) ?></div>
<div class="kdoc-compare__arrow">&#8595;</div>
<div class="kdoc-compare__flow-step"><?= htmlspecialchars($t['col_dbn_s3']) ?></div>
<div class="kdoc-compare__arrow">&#8595;</div>
<div class="kdoc-compare__flow-step"><?= htmlspecialchars($t['col_dbn_s4']) ?></div>
<div class="kdoc-compare__arrow">&#8595;</div>
<div class="kdoc-compare__flow-step kdoc-compare__flow-step--final"><?= htmlspecialchars($t['col_dbn_s5']) ?></div>
</div>
</div>
</div>
<p class="kdoc-compare__caption"><?= htmlspecialchars($t['problem_caption']) ?></p>
</div>
<!-- ── Three analogies ───────────────────────────────────────────────────── -->
<section class="kdoc-section--alt">
<div class="kdoc-section">
<p class="kdoc-section__eyebrow"><?= htmlspecialchars($t['analogy_eyebrow']) ?></p>
<h2 class="kdoc-section__title"><?= htmlspecialchars($t['analogy_title']) ?></h2>
<div class="kdoc-features">
<div class="kdoc-feature-card">
<span class="kdoc-feature-card__icon"><?= $t['a1_icon'] ?></span>
<h3 class="kdoc-feature-card__title"><?= htmlspecialchars($t['a1_title']) ?></h3>
<p class="kdoc-feature-card__body"><?= htmlspecialchars($t['a1_body']) ?></p>
<span class="kdoc-feature-card__term"><?= htmlspecialchars($t['a1_term']) ?></span>
</div>
<div class="kdoc-feature-card">
<span class="kdoc-feature-card__icon"><?= $t['a2_icon'] ?></span>
<h3 class="kdoc-feature-card__title"><?= htmlspecialchars($t['a2_title']) ?></h3>
<p class="kdoc-feature-card__body"><?= htmlspecialchars($t['a2_body']) ?></p>
<span class="kdoc-feature-card__term"><?= htmlspecialchars($t['a2_term']) ?></span>
</div>
<div class="kdoc-feature-card">
<span class="kdoc-feature-card__icon"><?= $t['a3_icon'] ?></span>
<h3 class="kdoc-feature-card__title"><?= htmlspecialchars($t['a3_title']) ?></h3>
<p class="kdoc-feature-card__body"><?= htmlspecialchars($t['a3_body']) ?></p>
<span class="kdoc-feature-card__term"><?= htmlspecialchars($t['a3_term']) ?></span>
</div>
</div>
<?php echo imgSlot(
'2',
'library.jpg',
'The Librarian — RAG analogy',
'A warm Nordic library interior where a librarian reaches for a glowing book on a precise shelf, while shadowy figures fumble with random piles of books in the background.',
'A warm, Nordic-style library interior. A focused librarian reaches precisely for one glowing book on a vast shelf. The pages of the open book glow with highlighted text. In the background, dim shadowy figures fumble through random piles of books from memory. Warm amber and cool blue tones. Soft bokeh background. Square or 4:3 landscape. Photorealistic illustration style.'
); ?>
</div>
</section>
<!-- ── Knowledge graph ───────────────────────────────────────────────────── -->
<div class="kdoc-section">
<p class="kdoc-section__eyebrow"><?= htmlspecialchars($t['graph_eyebrow']) ?></p>
<h2 class="kdoc-section__title"><?= htmlspecialchars($t['graph_title']) ?></h2>
<p class="kdoc-section__sub"><?= htmlspecialchars($t['graph_sub']) ?></p>
<div class="kdoc-graph">
<div class="kdoc-graph__node kdoc-graph__node--start">
<p class="kdoc-graph__node-title"><?= htmlspecialchars($t['graph_n1']) ?></p>
</div>
<div class="kdoc-graph__connector">
<div class="kdoc-graph__connector-line"></div>
<span class="kdoc-graph__connector-label">finds</span>
<div class="kdoc-graph__connector-line"></div>
</div>
<div class="kdoc-graph__node">
<p class="kdoc-graph__node-title"><?= htmlspecialchars($t['graph_n2']) ?></p>
<p class="kdoc-graph__node-note"><?= htmlspecialchars($t['graph_n2_note']) ?></p>
</div>
<div class="kdoc-graph__connector">
<div class="kdoc-graph__connector-line"></div>
<span class="kdoc-graph__connector-label">linked to</span>
<div class="kdoc-graph__connector-line"></div>
</div>
<div class="kdoc-graph__node">
<p class="kdoc-graph__node-title"><?= htmlspecialchars($t['graph_n3']) ?></p>
<p class="kdoc-graph__node-note"><?= htmlspecialchars($t['graph_n3_note']) ?></p>
</div>
<div class="kdoc-graph__connector">
<div class="kdoc-graph__connector-line"></div>
<span class="kdoc-graph__connector-label">linked to</span>
<div class="kdoc-graph__connector-line"></div>
</div>
<div class="kdoc-graph__node">
<p class="kdoc-graph__node-title"><?= htmlspecialchars($t['graph_n4']) ?></p>
<p class="kdoc-graph__node-note"><?= htmlspecialchars($t['graph_n4_note']) ?></p>
</div>
<div class="kdoc-graph__connector">
<div class="kdoc-graph__connector-line"></div>
<span class="kdoc-graph__connector-label">backed by</span>
<div class="kdoc-graph__connector-line"></div>
</div>
<div class="kdoc-graph__node">
<p class="kdoc-graph__node-title"><?= htmlspecialchars($t['graph_n5']) ?></p>
<p class="kdoc-graph__node-note"><?= htmlspecialchars($t['graph_n5_note']) ?></p>
</div>
<div class="kdoc-graph__connector">
<div class="kdoc-graph__connector-line"></div>
<span class="kdoc-graph__connector-label">plus</span>
<div class="kdoc-graph__connector-line"></div>
</div>
<div class="kdoc-graph__node">
<p class="kdoc-graph__node-title"><?= htmlspecialchars($t['graph_n6']) ?></p>
<p class="kdoc-graph__node-note"><?= htmlspecialchars($t['graph_n6_note']) ?></p>
</div>
<div class="kdoc-graph__connector">
<div class="kdoc-graph__connector-line"></div>
<span class="kdoc-graph__connector-label">becomes</span>
<div class="kdoc-graph__connector-line"></div>
</div>
<div class="kdoc-graph__node kdoc-graph__node--end">
<p class="kdoc-graph__node-title"><?= htmlspecialchars($t['graph_n7']) ?></p>
<p class="kdoc-graph__node-note"><?= htmlspecialchars($t['graph_n7_note']) ?></p>
</div>
</div>
<p class="kdoc-section__sub" style="margin-top:1.5rem;text-align:center"><?= htmlspecialchars($t['graph_caption']) ?></p>
<?php echo imgSlot(
'3',
'graph.jpg',
'Knowledge graph — connected Norwegian law',
'Abstract visualization of a legal knowledge graph: glowing nodes labeled §4-4, ECHR Art.8, barneloven, Bufdir connected by golden threads on a midnight-navy background.',
'Abstract visualization of a legal knowledge graph on a deep midnight-navy background. Glowing circular nodes connected by golden threads — some nodes labeled with §4-4, ECHR Art.8, barneloven, Bufdir. The central node pulses white. Norwegian red (#BA0C2F) and gold (#C9A84C) accent colors. Data-visualization aesthetic, clean, no text clutter beyond the node labels. Wide landscape format 16:9.'
); ?>
</div>
<!-- ── Side-by-side answer comparison ────────────────────────────────────── -->
<section class="kdoc-section--alt">
<div class="kdoc-section">
<p class="kdoc-section__eyebrow"><?= htmlspecialchars($t['compare_eyebrow']) ?></p>
<h2 class="kdoc-section__title"><?= htmlspecialchars($t['compare_title']) ?></h2>
<p class="kdoc-section__sub"><?= htmlspecialchars($t['compare_sub']) ?></p>
<div class="kdoc-table-wrap">
<table class="kdoc-table">
<thead>
<tr>
<th><?= htmlspecialchars($t['compare_th_q']) ?></th>
<th><?= htmlspecialchars($t['compare_th_gpt']) ?></th>
<th><?= htmlspecialchars($t['compare_th_dbn']) ?></th>
</tr>
</thead>
<tbody>
<tr>
<td><?= htmlspecialchars($t['compare_r1_q']) ?></td>
<td style="color:var(--coral,#c2410c)"><?= htmlspecialchars($t['compare_r1_gpt']) ?></td>
<td style="color:var(--teal-dark,#115e59)"><?= htmlspecialchars($t['compare_r1_dbn']) ?></td>
</tr>
<tr>
<td><?= htmlspecialchars($t['compare_r2_q']) ?></td>
<td style="color:var(--coral,#c2410c)"><?= htmlspecialchars($t['compare_r2_gpt']) ?></td>
<td style="color:var(--teal-dark,#115e59)"><?= htmlspecialchars($t['compare_r2_dbn']) ?></td>
</tr>
<tr>
<td><?= htmlspecialchars($t['compare_r3_q']) ?></td>
<td style="color:var(--coral,#c2410c)"><?= htmlspecialchars($t['compare_r3_gpt']) ?></td>
<td style="color:var(--teal-dark,#115e59)"><?= htmlspecialchars($t['compare_r3_dbn']) ?></td>
</tr>
</tbody>
</table>
</div>
<p class="kdoc-section__sub" style="margin-top:1.25rem;text-align:center;font-style:italic"><?= htmlspecialchars($t['compare_caption']) ?></p>
<?php echo imgSlot(
'4',
'comparison.jpg',
'Side-by-side answer comparison',
'Two browser windows on a desk: the left shows a vague, uncited AI chat response; the right shows a precise legal tool answer with numbered citations glowing in navy and gold.',
'Two browser windows side by side on a desk. Left window shows a generic AI chat interface with a long vague answer, no citations, generic. Right window shows a clean legal tool interface with a precise answer, numbered law citations highlighted in navy blue and gold, a clear source list below. The right window glows more brightly. Top-down editorial photography style, desks with minimal Norwegian decor. 4:3 landscape.'
); ?>
</div>
</section>
<!-- ── Fine-tuned model ───────────────────────────────────────────────────── -->
<div class="kdoc-section">
<p class="kdoc-section__eyebrow"><?= htmlspecialchars($t['llm_eyebrow']) ?></p>
<h2 class="kdoc-section__title"><?= htmlspecialchars($t['llm_title']) ?></h2>
<div class="kdoc-llm-spotlight">
<div>
<span class="kdoc-llm-spotlight__badge"><?= htmlspecialchars($t['llm_badge']) ?></span>
<h3 class="kdoc-llm-spotlight__title">dbn-legal-agent</h3>
<p class="kdoc-llm-spotlight__body"><?= $t['llm_body_html'] ?></p>
<div class="kdoc-chips" style="margin-top:1rem">
<span class="kdoc-chip">QLoRA</span>
<span class="kdoc-chip">barnevernsloven</span>
<span class="kdoc-chip">barneloven</span>
<span class="kdoc-chip">ECHR Art. 8</span>
<span class="kdoc-chip">220K passages</span>
<span class="kdoc-chip">Norwegian bokmål</span>
</div>
</div>
<div class="kdoc-llm-stats">
<div class="kdoc-llm-stat">
<strong>QLoRA</strong>
<span><?= htmlspecialchars($t['llm_s1']) ?></span>
</div>
<div class="kdoc-llm-stat">
<strong>220K+</strong>
<span><?= htmlspecialchars($t['llm_s2']) ?></span>
</div>
<div class="kdoc-llm-stat">
<strong>23</strong>
<span><?= htmlspecialchars($t['llm_s3']) ?></span>
</div>
<div class="kdoc-llm-stat">
<strong>bokmål</strong>
<span><?= htmlspecialchars($t['llm_s4']) ?></span>
</div>
</div>
</div>
<?php echo imgSlot(
'5',
'finetune.jpg',
'Fine-tuned model — trained for Norwegian law',
'Abstract illustration: a neural network converges from broad diffuse light on the left to a sharp focused point surrounded by Norwegian legal symbols on the right.',
'A clean abstract illustration of a neural network being shaped and focused. On one side, broad diffuse light representing general knowledge. On the other side, the network converges to a sharp point surrounded by Norwegian legal symbols (§ marks, scales of justice, Norwegian flag colors). Midnight navy background, gold and teal accents. Square format, minimalist, editorial.'
); ?>
</div>
<!-- ── Privacy ────────────────────────────────────────────────────────────── -->
<section class="kdoc-section--alt">
<div class="kdoc-section">
<p class="kdoc-section__eyebrow"><?= htmlspecialchars($t['privacy_eyebrow']) ?></p>
<h2 class="kdoc-section__title"><?= htmlspecialchars($t['privacy_title']) ?></h2>
<div class="kdoc-privacy-card">
<h3><?= htmlspecialchars($t['privacy_title']) ?></h3>
<p><?= htmlspecialchars($t['privacy_body']) ?></p>
<div class="kdoc-privacy-card__badges">
<span class="kdoc-privacy-card__badge">No OpenAI</span>
<span class="kdoc-privacy-card__badge">No Google</span>
<span class="kdoc-privacy-card__badge">GDPR compliant</span>
<span class="kdoc-privacy-card__badge">Servers in EU</span>
<span class="kdoc-privacy-card__badge">Zero training data from users</span>
</div>
</div>
</div>
</section>
<!-- ── CTA strip ──────────────────────────────────────────────────────────── -->
<section class="kdoc-cta-strip">
<h2 class="kdoc-cta-strip__title"><?= htmlspecialchars($t['cta_title']) ?></h2>
<p class="kdoc-cta-strip__sub"><?= htmlspecialchars($t['cta_sub']) ?></p>
<div class="kdoc-hero__ctas">
<?php if ($isAuthed): ?>
<a href="/index.php" class="kdoc-btn-primary"><?= htmlspecialchars($t['btn_open']) ?></a>
<?php else: ?>
<a href="<?= htmlspecialchars($toolsLogin) ?>" class="kdoc-btn-primary"><?= htmlspecialchars($t['btn_signin_cta']) ?></a>
<a href="<?= htmlspecialchars($registerUrl) ?>" class="kdoc-btn-secondary"><?= htmlspecialchars($t['btn_register']) ?></a>
<?php endif; ?>
</div>
</section>
<?php require_once __DIR__ . '/includes/footer.php'; ?>
<script src="assets/js/tools.js" defer></script>
</body>
</html>