173 lines
7.1 KiB
HTML
173 lines
7.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de" data-theme="dark">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>NovaPhonic, ein Tool von KI-WERKE</title>
|
|
<link rel="icon" href="assets/kiwerke-logo.ico">
|
|
<link rel="stylesheet" href="style.css">
|
|
</head>
|
|
<body>
|
|
<div class="wrap">
|
|
|
|
<header>
|
|
<div class="brand-row">
|
|
<div class="brand-logo"><img src="assets/kiwerke-logo-master.png" alt="KI-WERKE Logo"></div>
|
|
<div>
|
|
<div class="product-of">Ein Tool von KI-WERKE</div>
|
|
<h1>NovaPhonic</h1>
|
|
<div class="sub">
|
|
Schneidet Füllwörter und Stille automatisch aus deinem Video, entfernt
|
|
Hintergrundgeräusche und gleicht Lautstärke sowie Klangbalance an.
|
|
Komplett lokal, ohne Upload, ohne Internetverbindung.
|
|
</div>
|
|
<span class="badge-hint">Einzelperson Aufnahmen, kostenlose Version</span>
|
|
</div>
|
|
</div>
|
|
<div class="header-actions">
|
|
<span class="version-tag" id="versionTag">v0.1.0</span>
|
|
<button id="checkUpdateBtn" class="secondary check-update-btn" type="button" style="display:none;">
|
|
Nach Updates suchen
|
|
</button>
|
|
<button id="themeToggle" class="theme-toggle" type="button" aria-label="Farbschema wechseln">
|
|
<svg class="ico-sun" viewBox="0 0 24 24"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4"/></svg>
|
|
<svg class="ico-moon" viewBox="0 0 24 24"><path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z"/></svg>
|
|
<span id="themeLabel">Dunkel</span>
|
|
</button>
|
|
</div>
|
|
</header>
|
|
|
|
<main>
|
|
<div class="update-banner" id="updateBanner" style="display:none;" role="status" aria-live="polite">
|
|
<span id="updateBannerText"><strong>Update verfügbar.</strong> Eine neue Version von NovaPhonic steht bereit.</span>
|
|
<div class="update-banner-actions">
|
|
<button id="updateInstallBtn" type="button">Jetzt installieren</button>
|
|
<button id="updateDismissBtn" type="button" class="secondary">Später</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="privacy-note">
|
|
<strong>Läuft lokal:</strong> Dein Video verlässt diesen Rechner nicht. Schnitt,
|
|
Entrauschen und Lautstärke Angleichung passieren ausschließlich hier, es wird
|
|
nichts hochgeladen und keine Verbindung zu einem Server aufgebaut.
|
|
</div>
|
|
|
|
<div id="toolWarning" class="tool-warning" style="display:none;">
|
|
<strong>Werkzeuge fehlen.</strong>
|
|
<span id="toolWarningText">Es konnten nicht alle benötigten Programme gefunden werden.</span>
|
|
</div>
|
|
|
|
<div class="grid">
|
|
<div>
|
|
<div class="panel">
|
|
<h2>Einstellungen</h2>
|
|
|
|
<div class="row">
|
|
<label for="marginSlider">Zeitpuffer um jeden Schnitt <span class="value-tag" id="marginTag">0,2 s</span></label>
|
|
<input type="range" id="marginSlider" min="0" max="10" step="1" value="2">
|
|
<div class="hint-small">Kleiner Puffer vor und nach jedem Schnitt, damit Wörter nicht mitten im Laut abgeschnitten werden.</div>
|
|
</div>
|
|
|
|
<div class="checkbox-row" style="margin-top:16px;">
|
|
<input type="checkbox" id="denoiseToggle" checked>
|
|
<label for="denoiseToggle">Hintergrundgeräusche entfernen (DeepFilterNet)</label>
|
|
</div>
|
|
|
|
<div class="checkbox-row" style="margin-top:10px;">
|
|
<input type="checkbox" id="loudnormToggle" checked>
|
|
<label for="loudnormToggle">Lautstärke & Klangbalance angleichen (EBU R128)</label>
|
|
</div>
|
|
|
|
<div class="row" id="loudnormOptions" style="margin-top:14px;">
|
|
<label for="loudnormTarget">Ziel Lautheit</label>
|
|
<select id="loudnormTarget">
|
|
<option value="-16" selected>-16 LUFS (Podcast / YouTube)</option>
|
|
<option value="-23">-23 LUFS (Rundfunk, EBU R128)</option>
|
|
<option value="-14">-14 LUFS (Streaming, laut)</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="panel">
|
|
<h2>Über die Werkzeuge</h2>
|
|
<div class="hint-small">
|
|
Schnitt: <strong>auto-editor</strong> (Public Domain). Entrauschen:
|
|
<strong>DeepFilterNet</strong> (MIT/Apache 2.0). Lautstärke: <strong>FFmpeg</strong>
|
|
loudnorm Filter (LGPL/GPL). Alle drei laufen als eigenständige Programme neben
|
|
NovaPhonic auf diesem Rechner, keines davon braucht eine Grafikkarte.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<div class="panel">
|
|
<h2>Video</h2>
|
|
<div class="dropzone" id="dropzone" role="button" tabindex="0"
|
|
aria-label="Video auswählen. Klicken oder Datei hierher ziehen">
|
|
<div class="dz-icon" aria-hidden="true">
|
|
<svg viewBox="0 0 24 24"><path d="M4 16v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2M7 10l5-5 5 5M12 5v13"/></svg>
|
|
</div>
|
|
<div><strong>Video hierher ziehen</strong> oder klicken zum Auswählen</div>
|
|
<div style="font-size:12px;margin-top:6px;">MP4, MOV, MKV, eine Aufnahme mit einer sprechenden Person</div>
|
|
</div>
|
|
|
|
<div id="selectedFileBox" style="display:none;">
|
|
<div class="selected-file">
|
|
<span class="sf-name" id="sfName"></span>
|
|
<span class="sf-size" id="sfSize"></span>
|
|
<button class="sf-remove" id="sfRemove" type="button" aria-label="Auswahl entfernen">
|
|
<svg viewBox="0 0 24 24"><path d="M18 6L6 18M6 6l12 12"/></svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="actions">
|
|
<button id="startBtn" disabled>Verarbeitung starten</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="panel">
|
|
<h2>Ablauf</h2>
|
|
<div class="pipeline-steps">
|
|
<div class="pipeline-step" id="step-cut">
|
|
<span class="ps-dot"></span>
|
|
<span class="ps-label">Füllwörter & Stille schneiden</span>
|
|
<span class="ps-detail" id="step-cut-detail"></span>
|
|
</div>
|
|
<div class="pipeline-step" id="step-denoise">
|
|
<span class="ps-dot"></span>
|
|
<span class="ps-label">Rauschen entfernen</span>
|
|
<span class="ps-detail" id="step-denoise-detail"></span>
|
|
</div>
|
|
<div class="pipeline-step" id="step-loudnorm">
|
|
<span class="ps-dot"></span>
|
|
<span class="ps-label">Lautstärke angleichen</span>
|
|
<span class="ps-detail" id="step-loudnorm-detail"></span>
|
|
</div>
|
|
</div>
|
|
<div class="log-box" id="logBox">Noch nichts gestartet.</div>
|
|
</div>
|
|
|
|
<div class="panel">
|
|
<h2>Ergebnis</h2>
|
|
<div id="resultArea">
|
|
<div class="empty-hint" id="resultEmptyHint">Noch kein Video verarbeitet.</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<div class="footer-note">
|
|
Hinweis: NovaPhonic bearbeitet ausschließlich technische Aspekte deiner Aufnahme
|
|
(Schnitt, Rauschunterdrückung, Lautstärke). Es werden keine neuen Inhalte erzeugt
|
|
und keine Aussagen im Video verändert. NovaPhonic ersetzt keine manuelle
|
|
Endkontrolle, insbesondere Bildsprünge an Schnittstellen solltest du dir vor der
|
|
Veröffentlichung kurz ansehen.
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<script src="app.js"></script>
|
|
</body>
|
|
</html>
|