<?php
declare(strict_types=1);
require_once __DIR__ . '/includes/bootstrap.php';

$uiLang      = dbnToolsCurrentLanguage();
$isAuthed    = dbnToolsIsAuthenticated();
$langPath    = '/transcribe-guide.php';
$toolsLogin  = 'https://dobetternorge.no/tools-login.php?return=' . urlencode('/transcribe.php');

$_pt = require __DIR__ . '/translations/transcribe-guide.php';
$t   = $_pt[$uiLang] ?? $_pt['en'];
?>
<!doctype html>
<html lang="<?= htmlspecialchars($uiLang) ?>">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Transcribe User Guide — How to transcribe Norwegian legal recordings · Do Better Norge Tools</title>
    <meta name="description" content="Step-by-step guide to using Transcribe: audio language, speaker identification, vocabulary presets, Whisper model selection, AI cleanup, upload, and saving to Min Sak or corpus.">
    <meta name="robots" content="index, follow">
    <link rel="canonical" href="https://tools.dobetternorge.no/transcribe-guide.php">
    <meta property="og:title" content="Transcribe User Guide">
    <meta property="og:description" content="How to use Transcribe to convert Norwegian legal recordings to timestamped, speaker-labelled text — engine selection, diarization, vocabulary presets, Min Sak save.">
    <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">
    <link rel="stylesheet" href="assets/css/dbn-tools-redesign.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="/transcribe.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>

<nav class="kdoc-doc-nav" aria-label="Transcribe documentation">
    <div class="kdoc-doc-nav__inner">
        <a href="/transcribe-about.php"><?= htmlspecialchars($t['nav_about']) ?></a>
        <a href="/transcribe-guide.php" class="is-active"><?= htmlspecialchars($t['nav_guide']) ?></a>
        <a href="/transcribe-tech.php"><?= htmlspecialchars($t['nav_howit']) ?></a>
        <?php if ($isAuthed): ?><a href="/transcribe.php"><?= htmlspecialchars($t['nav_opentool']) ?></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/transcribe/hero-guide.png') 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>
</section>

<!-- TOC + content -->
<div class="kdoc-section">

    <div class="kdoc-toc">
        <p class="kdoc-toc__title"><?= htmlspecialchars($t['toc_title']) ?></p>
        <ol>
            <li><a href="#lang"><?= htmlspecialchars($t['toc_1']) ?></a></li>
            <li><a href="#speakers"><?= htmlspecialchars($t['toc_2']) ?></a></li>
            <li><a href="#vocab"><?= htmlspecialchars($t['toc_3']) ?></a></li>
            <li><a href="#task"><?= htmlspecialchars($t['toc_4']) ?></a></li>
            <li><a href="#vad"><?= htmlspecialchars($t['toc_5']) ?></a></li>
            <li><a href="#model"><?= htmlspecialchars($t['toc_6']) ?></a></li>
            <li><a href="#cleanup"><?= htmlspecialchars($t['toc_7']) ?></a></li>
            <li><a href="#upload"><?= htmlspecialchars($t['toc_8']) ?></a></li>
            <li><a href="#myaudio"><?= htmlspecialchars($t['toc_9']) ?></a></li>
            <li><a href="#output"><?= htmlspecialchars($t['toc_10']) ?></a></li>
            <li><a href="#save"><?= htmlspecialchars($t['toc_11']) ?></a></li>
        </ol>
    </div>

    <!-- Step 1: Audio language -->
    <div class="kdoc-guide-step" id="lang">
        <h2 class="kdoc-guide-step__title"><?= htmlspecialchars($t['step1_title']) ?></h2>
        <p><?= htmlspecialchars($t['step1_intro']) ?></p>
        <table class="kdoc-table">
            <thead><tr>
                <th><?= htmlspecialchars($t['step1_table_lang']) ?></th>
                <th><?= htmlspecialchars($t['step1_table_code']) ?></th>
                <th><?= htmlspecialchars($t['step1_table_notes']) ?></th>
            </tr></thead>
            <tbody>
                <tr><td><?= htmlspecialchars($t['step1_nb']) ?></td><td><code>no</code></td><td><?= htmlspecialchars($t['step1_nb_notes']) ?></td></tr>
                <tr><td><?= htmlspecialchars($t['step1_nn']) ?></td><td><code>nn</code></td><td><?= htmlspecialchars($t['step1_nn_notes']) ?></td></tr>
                <tr><td><?= htmlspecialchars($t['step1_en']) ?></td><td><code>en</code></td><td><?= htmlspecialchars($t['step1_en_notes']) ?></td></tr>
                <tr><td><?= htmlspecialchars($t['step1_pl']) ?></td><td><code>pl</code></td><td><?= htmlspecialchars($t['step1_pl_notes']) ?></td></tr>
                <tr><td><?= htmlspecialchars($t['step1_uk']) ?></td><td><code>uk</code></td><td><?= htmlspecialchars($t['step1_uk_notes']) ?></td></tr>
                <tr><td><?= htmlspecialchars($t['step1_sv']) ?></td><td><code>sv</code></td><td><?= htmlspecialchars($t['step1_sv_notes']) ?></td></tr>
                <tr><td><?= htmlspecialchars($t['step1_da']) ?></td><td><code>da</code></td><td><?= htmlspecialchars($t['step1_da_notes']) ?></td></tr>
                <tr><td><?= htmlspecialchars($t['step1_de']) ?></td><td><code>de</code></td><td><?= htmlspecialchars($t['step1_de_notes']) ?></td></tr>
                <tr><td><?= htmlspecialchars($t['step1_fr']) ?></td><td><code>fr</code></td><td><?= htmlspecialchars($t['step1_fr_notes']) ?></td></tr>
                <tr><td><?= htmlspecialchars($t['step1_auto']) ?></td><td><code>auto</code></td><td><?= htmlspecialchars($t['step1_auto_notes']) ?></td></tr>
            </tbody>
        </table>
        <p class="kdoc-guide-tip">&#128161; <?= htmlspecialchars($t['step1_tip']) ?></p>
        <img src="assets/images/transcribe/form-top.png" alt="Audio language radio buttons with nb selected as default" class="kdoc-guide-screenshot" loading="lazy">
    </div>

    <!-- Step 2: Speaker identification -->
    <div class="kdoc-guide-step" id="speakers">
        <h2 class="kdoc-guide-step__title"><?= htmlspecialchars($t['step2_title']) ?></h2>
        <p><?= htmlspecialchars($t['step2_intro']) ?></p>
        <ul class="kdoc-list">
            <li><?= htmlspecialchars($t['step2_enable']) ?></li>
            <li><?= htmlspecialchars($t['step2_count']) ?></li>
        </ul>
        <p class="kdoc-guide-tip">&#128161; <?= htmlspecialchars($t['step2_tip']) ?></p>
        <p><?= htmlspecialchars($t['step2_limit']) ?></p>
        <img src="assets/images/transcribe/diarization-detail.png" alt="Speaker identification checkbox and speaker count input field" class="kdoc-guide-screenshot" loading="lazy">
    </div>

    <!-- Step 3: Vocabulary -->
    <div class="kdoc-guide-step" id="vocab">
        <h2 class="kdoc-guide-step__title"><?= htmlspecialchars($t['step3_title']) ?></h2>
        <p><?= htmlspecialchars($t['step3_intro']) ?></p>
        <table class="kdoc-table">
            <thead><tr>
                <th><?= htmlspecialchars($t['step3_table_preset']) ?></th>
                <th><?= htmlspecialchars($t['step3_table_contains']) ?></th>
                <th><?= htmlspecialchars($t['step3_table_use']) ?></th>
            </tr></thead>
            <tbody>
                <tr><td><?= htmlspecialchars($t['step3_barnerett']) ?></td><td><?= htmlspecialchars($t['step3_barnerett_contains']) ?></td><td><?= htmlspecialchars($t['step3_barnerett_use']) ?></td></tr>
                <tr><td><?= htmlspecialchars($t['step3_mediation']) ?></td><td><?= htmlspecialchars($t['step3_mediation_contains']) ?></td><td><?= htmlspecialchars($t['step3_mediation_use']) ?></td></tr>
                <tr><td><?= htmlspecialchars($t['step3_generell']) ?></td><td><?= htmlspecialchars($t['step3_generell_contains']) ?></td><td><?= htmlspecialchars($t['step3_generell_use']) ?></td></tr>
                <tr><td><?= htmlspecialchars($t['step3_custom']) ?></td><td><?= htmlspecialchars($t['step3_custom_contains']) ?></td><td><?= htmlspecialchars($t['step3_custom_use']) ?></td></tr>
            </tbody>
        </table>
        <p class="kdoc-guide-tip">&#128161; <?= htmlspecialchars($t['step3_custom_tip']) ?></p>
    </div>

    <!-- Step 4: Task -->
    <div class="kdoc-guide-step" id="task">
        <h2 class="kdoc-guide-step__title"><?= htmlspecialchars($t['step4_title']) ?></h2>
        <p class="kdoc-guide-note"><?= htmlspecialchars($t['step4_intro']) ?></p>
        <ul class="kdoc-list">
            <li><?= htmlspecialchars($t['step4_transcribe']) ?></li>
            <li><?= htmlspecialchars($t['step4_translate']) ?></li>
        </ul>
        <p class="kdoc-guide-note">&#9888;&#65039; <?= htmlspecialchars($t['step4_note']) ?></p>
    </div>

    <!-- Step 5: VAD -->
    <div class="kdoc-guide-step" id="vad">
        <h2 class="kdoc-guide-step__title"><?= htmlspecialchars($t['step5_title']) ?></h2>
        <p class="kdoc-guide-note"><?= htmlspecialchars($t['step5_intro']) ?></p>
        <ul class="kdoc-list">
            <li>&#10003; <?= htmlspecialchars($t['step5_when_on']) ?></li>
            <li>&#10007; <?= htmlspecialchars($t['step5_when_off']) ?></li>
        </ul>
        <p class="kdoc-guide-tip">&#128161; <?= htmlspecialchars($t['step5_tip']) ?></p>
    </div>

    <!-- Step 6: Whisper model -->
    <div class="kdoc-guide-step" id="model">
        <h2 class="kdoc-guide-step__title"><?= htmlspecialchars($t['step6_title']) ?></h2>
        <p class="kdoc-guide-note"><?= htmlspecialchars($t['step6_intro']) ?></p>
        <table class="kdoc-table">
            <thead><tr>
                <th><?= htmlspecialchars($t['step6_table_model']) ?></th>
                <th><?= htmlspecialchars($t['step6_table_speed']) ?></th>
                <th><?= htmlspecialchars($t['step6_table_accuracy']) ?></th>
                <th><?= htmlspecialchars($t['step6_table_use']) ?></th>
            </tr></thead>
            <tbody>
                <tr><td><code>large-v3</code> &#9733;</td><td><?= htmlspecialchars($t['step6_lv3_speed']) ?></td><td><?= htmlspecialchars($t['step6_lv3_accuracy']) ?></td><td><?= htmlspecialchars($t['step6_lv3_use']) ?></td></tr>
                <tr><td><code>large-v2</code></td><td><?= htmlspecialchars($t['step6_lv2_speed']) ?></td><td><?= htmlspecialchars($t['step6_lv2_accuracy']) ?></td><td><?= htmlspecialchars($t['step6_lv2_use']) ?></td></tr>
                <tr><td><code>medium</code></td><td><?= htmlspecialchars($t['step6_medium_speed']) ?></td><td><?= htmlspecialchars($t['step6_medium_accuracy']) ?></td><td><?= htmlspecialchars($t['step6_medium_use']) ?></td></tr>
                <tr><td><code>small</code></td><td><?= htmlspecialchars($t['step6_small_speed']) ?></td><td><?= htmlspecialchars($t['step6_small_accuracy']) ?></td><td><?= htmlspecialchars($t['step6_small_use']) ?></td></tr>
                <tr><td><code>base</code></td><td><?= htmlspecialchars($t['step6_base_speed']) ?></td><td><?= htmlspecialchars($t['step6_base_accuracy']) ?></td><td><?= htmlspecialchars($t['step6_base_use']) ?></td></tr>
                <tr><td><code>tiny</code></td><td><?= htmlspecialchars($t['step6_tiny_speed']) ?></td><td><?= htmlspecialchars($t['step6_tiny_accuracy']) ?></td><td><?= htmlspecialchars($t['step6_tiny_use']) ?></td></tr>
            </tbody>
        </table>
        <p class="kdoc-guide-note"><?= htmlspecialchars($t['step6_note']) ?></p>
    </div>

    <!-- Step 7: AI cleanup -->
    <div class="kdoc-guide-step" id="cleanup">
        <h2 class="kdoc-guide-step__title"><?= htmlspecialchars($t['step7_title']) ?></h2>
        <p class="kdoc-guide-note"><?= htmlspecialchars($t['step7_intro']) ?></p>
        <ul class="kdoc-list">
            <li><?= htmlspecialchars($t['step7_none']) ?></li>
            <li><?= htmlspecialchars($t['step7_mini']) ?></li>
            <li><?= htmlspecialchars($t['step7_full']) ?></li>
        </ul>
        <p class="kdoc-guide-tip">&#128161; <?= htmlspecialchars($t['step7_tip']) ?></p>
    </div>

    <!-- Step 8: Upload -->
    <div class="kdoc-guide-step" id="upload">
        <h2 class="kdoc-guide-step__title"><?= htmlspecialchars($t['step8_title']) ?></h2>
        <p><?= htmlspecialchars($t['step8_intro']) ?></p>
        <ul class="kdoc-list">
            <li><?= htmlspecialchars($t['step8_formats']) ?></li>
            <li><?= htmlspecialchars($t['step8_size']) ?></li>
            <li><?= htmlspecialchars($t['step8_queue']) ?></li>
        </ul>
        <p class="kdoc-guide-tip">&#128161; <?= htmlspecialchars($t['step8_tip']) ?></p>
        <img src="assets/images/transcribe/form-top.png" alt="Audio upload zone showing drag-and-drop area and queue with multiple files" class="kdoc-guide-screenshot" loading="lazy">
    </div>

    <!-- Step 9: My Audio -->
    <div class="kdoc-guide-step" id="myaudio">
        <h2 class="kdoc-guide-step__title"><?= htmlspecialchars($t['step9_title']) ?></h2>
        <p><?= htmlspecialchars($t['step9_intro']) ?></p>
        <p><?= htmlspecialchars($t['step9_save']) ?></p>
    </div>

    <!-- Step 10: Reading output -->
    <div class="kdoc-guide-step" id="output">
        <h2 class="kdoc-guide-step__title"><?= htmlspecialchars($t['step10_title']) ?></h2>
        <p><?= htmlspecialchars($t['step10_intro']) ?></p>
        <pre class="kdoc-code"><?= htmlspecialchars($t['step10_format']) ?></pre>
        <ul class="kdoc-list">
            <li><?= htmlspecialchars($t['step10_timestamp']) ?></li>
            <li><?= htmlspecialchars($t['step10_speaker']) ?></li>
            <li><?= htmlspecialchars($t['step10_confidence']) ?></li>
        </ul>
        <p class="kdoc-guide-tip">&#128161; <?= htmlspecialchars($t['step10_tip']) ?></p>
        <img src="assets/images/transcribe/output-transcript.png" alt="Transcript output with timestamps and speaker labels" class="kdoc-guide-screenshot" loading="lazy">
    </div>

    <!-- Step 11: Save -->
    <div class="kdoc-guide-step" id="save">
        <h2 class="kdoc-guide-step__title"><?= htmlspecialchars($t['step11_title']) ?></h2>
        <p><?= htmlspecialchars($t['step11_intro']) ?></p>
        <ul class="kdoc-list">
            <li><strong>&#128193; <?= htmlspecialchars($t['step11_minsak']) ?></strong></li>
            <li><strong>&#128269; <?= htmlspecialchars($t['step11_corpus']) ?></strong></li>
            <li><strong>&#8659; <?= htmlspecialchars($t['step11_download']) ?></strong></li>
            <li><strong>&#128203; <?= htmlspecialchars($t['step11_copy']) ?></strong></li>
        </ul>
        <p class="kdoc-guide-note">&#128274; <?= htmlspecialchars($t['step11_note']) ?></p>
    </div>

</div><!-- /.kdoc-section -->

<?php require_once __DIR__ . '/includes/footer.php'; ?>
<script src="assets/js/tools.js" defer></script>
</body>
</html>
