daveadmin
2aa86a0950
Swaps the CSS-only kdoc-compare and kdoc-graph blocks for two custom transparent-background PNGs (+ lossless WebP) designed by the user. memoryVlibrary shows the two-path General AI vs DBN flow; norwegianLaw shows the connected-law knowledge graph. Both served via <picture> with WebP primary and PNG fallback. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
334 lines
19 KiB
PHP
334 lines
19 KiB
PHP
<?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-diagram-img">
|
|
<picture>
|
|
<source srcset="assets/images/why-ours/memoryVlibrary.webp" type="image/webp">
|
|
<img src="assets/images/why-ours/memoryVlibrary.png"
|
|
alt="Two-path comparison: General AI searches its memory and may cite laws that don't exist; Do Better Norge searches 220,000+ verified Norwegian legal passages, reranks results, and cites the real passages found"
|
|
loading="lazy" width="1536" height="1024">
|
|
</picture>
|
|
</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-diagram-img">
|
|
<picture>
|
|
<source srcset="assets/images/why-ours/norwegianLaw.webp" type="image/webp">
|
|
<img src="assets/images/why-ours/norwegianLaw.png"
|
|
alt="Norwegian law knowledge graph showing how your question connects through barnevernsloven § 4-4, barneloven § 30 and § 34, ECHR Article 8, 23 ECHR judgments vs Norway, and Bufdir guidance — all grounding your final answer"
|
|
loading="lazy" width="1448" height="1086">
|
|
</picture>
|
|
</div>
|
|
|
|
<p class="kdoc-section__sub" style="margin-top:1.5rem;text-align:center"><?= htmlspecialchars($t['graph_caption']) ?></p>
|
|
</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>
|