Files
glpi-neural-brain/internal/web/static/analysis.html
groot 87364f918a
All checks were successful
release-tag / release-image (push) Successful in 2m23s
Update 10 - Analyse
2026-08-06 08:53:16 +02:00

203 lines
13 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Neural Brain · Analyse</title>
<link rel="stylesheet" href="/analysis.css">
</head>
<body>
<header class="analysis-topbar">
<div class="analysis-brand">
<span class="analysis-mark"><i></i><i></i><i></i></span>
<div>
<strong>BRAIN ANALYSIS CENTER</strong>
<small>Nachvollziehbare Läufe, Graphänderungen, Embeddings, Recherche und Persistenz</small>
</div>
</div>
<nav class="analysis-actions" aria-label="Dashboard-Steuerung">
<a class="action secondary" href="/">← Gehirnansicht</a>
<label class="range-control">Zeitraum
<select id="rangeHours">
<option value="1">1 Stunde</option>
<option value="6">6 Stunden</option>
<option value="24" selected>24 Stunden</option>
<option value="72">3 Tage</option>
<option value="168">7 Tage</option>
<option value="720">30 Tage</option>
</select>
</label>
<label class="auto-control"><input id="autoRefresh" type="checkbox" checked> Live</label>
<button id="refreshNow" class="action">Aktualisieren</button>
<a id="exportAnalysis" class="action secondary" href="/api/analysis/export?hours=24">JSON-Export</a>
</nav>
</header>
<div id="connectionBanner" class="connection-banner loading">Analysedaten werden geladen …</div>
<main class="analysis-main">
<section class="section intro-section">
<div>
<span class="eyebrow">ERKLÄRBARE HIRNAKTIVITÄT</span>
<h1>Was hat das System tatsächlich verändert?</h1>
<p>Dieses Dashboard trennt die visuelle Gehirnansicht von der technischen Auswertung. Es zeigt nicht nur Endstände, sondern auch, ob ein Lauf neue Nodes, Edges oder Embeddings erzeugt, bestehende Daten verändert, etwas entfernt oder lediglich geprüft und verworfen hat.</p>
</div>
<div class="legend-box">
<span><i class="status-dot success"></i>positiv übernommen</span>
<span><i class="status-dot warning"></i>geprüft, aber nicht übernommen</span>
<span><i class="status-dot error"></i>fehlgeschlagen</span>
<span><i class="status-dot neutral"></i>ohne Graphänderung</span>
</div>
</section>
<section id="lastRunSection" class="section last-run-section" aria-live="polite">
<div class="section-heading">
<div><span class="eyebrow">LETZTER ABGESCHLOSSENER LAUF</span><h2>Ergebnisbewertung</h2></div>
<span id="lastRunStatus" class="status-pill neutral">noch keine Daten</span>
</div>
<div id="lastRunContent" class="last-run-content empty-state">Es wurde noch kein auswertbarer Lauf aufgezeichnet.</div>
</section>
<section class="summary-grid" aria-label="Systemzusammenfassung">
<article class="summary-card"><span>Graph aktuell</span><strong id="summaryGraph"></strong><small id="summaryGraphSub">Nodes · Edges</small></article>
<article class="summary-card"><span>Vektorabdeckung</span><strong id="summaryCoverage"></strong><small id="summaryCoverageSub">Embeddings / Wissens-Nodes</small></article>
<article class="summary-card"><span>Änderungen im Zeitraum</span><strong id="summaryChanges"></strong><small id="summaryChangesSub">Neu · Aktualisiert · Entfernt</small></article>
<article class="summary-card"><span>Graphqualität</span><strong id="summaryQuality"></strong><small id="summaryQualitySub">Komponenten · Waisen · Widersprüche</small></article>
<article class="summary-card"><span>AI-THINK</span><strong id="summaryThinking"></strong><small id="summaryThinkingSub">Status und letzte Ausführung</small></article>
<article class="summary-card"><span>Autonome Recherche</span><strong id="summaryAutonomous"></strong><small id="summaryAutonomousSub">Queue und Ergebnisse</small></article>
<article class="summary-card"><span>Ollama-Pool</span><strong id="summaryOllama"></strong><small id="summaryOllamaSub">Gesundheit und Warteschlangen</small></article>
<article class="summary-card"><span>Persistenz</span><strong id="summaryPersistence"></strong><small id="summaryPersistenceSub">SQLite / WAL / offene Änderungen</small></article>
</section>
<section class="section timeline-section">
<div class="section-heading">
<div><span class="eyebrow">ZEITVERLAUF</span><h2>Graphänderungen und Laufereignisse</h2></div>
<span id="timelineHint" class="section-note">Zeitfenster wird geladen</span>
</div>
<div class="explain-box"><b>Lesart:</b> Balken oberhalb der Mittellinie sind neu erzeugte oder aktualisierte Graphobjekte. Balken unterhalb zeigen Löschungen. Die Linie zeigt die Anzahl technischer Ereignisse. So bleibt sichtbar, wenn ein Lauf viele Prüfungen durchgeführt, aber den Graphen nicht verändert hat.</div>
<div class="chart-wrap"><canvas id="timelineCanvas" height="300" aria-label="Zeitverlauf der Graphänderungen"></canvas></div>
<div class="chart-legend"><span><i class="legend-swatch create"></i>Neu</span><span><i class="legend-swatch update"></i>Aktualisiert / neu berechnet</span><span><i class="legend-swatch delete"></i>Entfernt</span><span><i class="legend-swatch events"></i>Ereignisse</span></div>
</section>
<section class="section runs-section">
<div class="section-heading">
<div><span class="eyebrow">LAUFPROTOKOLL</span><h2>Thinking, Lernen, Recherche und Systemaktionen</h2></div>
<span id="runCount" class="section-note">0 Läufe</span>
</div>
<div class="filters-row">
<label>Typ <select id="runKindFilter"><option value="">Alle</option></select></label>
<label>Status <select id="runStatusFilter"><option value="">Alle</option><option value="success">Erfolgreich</option><option value="warning">Ohne Übernahme</option><option value="error">Fehler</option><option value="neutral">Neutral</option><option value="running">Läuft</option></select></label>
<label class="grow">Suche <input id="runSearch" type="search" placeholder="Titel, Ergebnis, Trigger oder Ereignistyp"></label>
</div>
<div class="table-wrap">
<table class="data-table runs-table">
<thead><tr><th>Zeit</th><th>Lauf</th><th>Bewertung</th><th>Graphänderung</th><th>Messwerte</th><th>Dauer</th></tr></thead>
<tbody id="runsBody"><tr><td colspan="6" class="empty-state">Läufe werden geladen …</td></tr></tbody>
</table>
</div>
</section>
<section class="two-column">
<article class="section">
<div class="section-heading"><div><span class="eyebrow">GRAPHBESTAND</span><h2>Nodes nach Herkunft und Typ</h2></div></div>
<div class="explain-box"><b>Source</b> ist der exakte Wert aus dem KB-Feld <code>source</code>. <b>Origin</b> beschreibt dagegen den technischen Erzeuger des Graphobjekts, etwa KB-Ingest, Recherche oder AI-Inferenz.</div>
<div class="distribution-grid">
<div><h3>Source</h3><div id="sourceDistribution" class="bar-list"></div></div>
<div><h3>Node-Typ</h3><div id="kindDistribution" class="bar-list"></div></div>
<div><h3>Origin</h3><div id="originDistribution" class="bar-list"></div></div>
</div>
</article>
<article class="section">
<div class="section-heading"><div><span class="eyebrow">BEZIEHUNGEN</span><h2>Edges, Nähe und Konfidenz</h2></div></div>
<div class="metric-grid compact">
<div><span>AI-Edges</span><strong id="relationAIEdges"></strong></div>
<div><span>Ø Relation-Konfidenz</span><strong id="relationConfidence"></strong></div>
<div><span>Ø gespeicherte Nähe</span><strong id="relationSimilarity"></strong></div>
<div><span>Widersprüche</span><strong id="relationContradictions"></strong></div>
</div>
<h3>Edge-Typen</h3><div id="edgeTypeDistribution" class="bar-list"></div>
<h3>Letzte Näheprüfungen</h3><div id="similarityList" class="compact-list"></div>
</article>
</section>
<section class="two-column">
<article class="section">
<div class="section-heading"><div><span class="eyebrow">LEARNING</span><h2>Embedding-Aktivität</h2></div><span id="embeddingCoverageBadge" class="status-pill neutral"></span></div>
<div class="metric-grid compact">
<div><span>Vektoren aktuell</span><strong id="embeddingRows"></strong></div>
<div><span>Neu im Zeitraum</span><strong id="embeddingCreated"></strong></div>
<div><span>Neu berechnet</span><strong id="embeddingUpdated"></strong></div>
<div><span>Entfernt</span><strong id="embeddingDeleted"></strong></div>
</div>
<h3>Dimensionen</h3><div id="embeddingDimensions" class="bar-list"></div>
<h3>Letzte Embedding-Ereignisse</h3><div id="embeddingEvents" class="compact-list"></div>
</article>
<article class="section">
<div class="section-heading"><div><span class="eyebrow">RESEARCH</span><h2>SearXNG und Wissensanreicherung</h2></div><span id="researchBadge" class="status-pill neutral"></span></div>
<div class="metric-grid compact">
<div><span>Suchtreffer</span><strong id="researchResults"></strong></div>
<div><span>Volltexte geladen</span><strong id="researchFetched"></strong></div>
<div><span>Belege akzeptiert</span><strong id="researchAccepted"></strong></div>
<div><span>Artikel erstellt</span><strong id="researchArticles"></strong></div>
</div>
<h3>Letzte Recherchevorgänge</h3><div id="researchRuns" class="compact-list"></div>
</article>
</section>
<section class="two-column">
<article class="section">
<div class="section-heading"><div><span class="eyebrow">NEUESTE OBJEKTE</span><h2>Zuletzt veränderte Nodes</h2></div></div>
<div id="newestNodes" class="entity-list"></div>
</article>
<article class="section">
<div class="section-heading"><div><span class="eyebrow">NEUESTE OBJEKTE</span><h2>Zuletzt veränderte Edges</h2></div></div>
<div id="newestEdges" class="entity-list"></div>
</article>
</section>
<section class="section changes-section">
<div class="section-heading">
<div><span class="eyebrow">ÄNDERUNGSJOURNAL</span><h2>Exakt betroffene Nodes, Edges und Vektoren</h2></div>
<span id="changeCount" class="section-note">0 Änderungen</span>
</div>
<div class="explain-box"><b>Unterschied zu den Summen:</b> Hier stehen die konkreten Objekt-IDs, die zwischen zwei technischen Events erzeugt, aktualisiert, neu berechnet oder gelöscht wurden. Zum Schutz vor extrem großen Erstimporten werden pro Event höchstens 2.000 Detailzeilen gespeichert; die exakten Gesamtzähler bleiben trotzdem erhalten.</div>
<div id="changeTruncationNotice" class="notice warning-notice" hidden></div>
<div class="filters-row">
<label>Objekt <select id="changeKindFilter"><option value="">Alle</option><option value="node">Node</option><option value="edge">Edge</option><option value="vector">Vektor</option></select></label>
<label>Aktion <select id="changeActionFilter"><option value="">Alle</option><option value="created">Erzeugt</option><option value="updated">Aktualisiert</option><option value="recalculated">Neu berechnet</option><option value="deleted">Entfernt</option></select></label>
<label class="grow">Suche <input id="changeSearch" type="search" placeholder="ID, Label, Relation, Origin, Source oder Ziel"></label>
</div>
<div class="table-wrap">
<table class="data-table changes-table">
<thead><tr><th>Zeit</th><th>Aktion</th><th>Objekt</th><th>ID / Bezeichnung</th><th>Relation / Origin</th><th>Graph-Version</th><th>Zugeordnetes Event</th></tr></thead>
<tbody id="changesBody"><tr><td colspan="7" class="empty-state">Änderungen werden geladen …</td></tr></tbody>
</table>
</div>
</section>
<section class="section raw-events-section">
<div class="section-heading">
<div><span class="eyebrow">ROHDATEN</span><h2>Technischer Eventstream</h2></div>
<span id="eventCount" class="section-note">0 Ereignisse</span>
</div>
<div class="explain-box"><b>Warum Rohdaten?</b> Jeder Eintrag enthält die ursprünglichen Engine-Metadaten sowie den unmittelbar erfassten Graphstand. Damit lässt sich auch bei einem übersprungenen Artikel erkennen, wie viele Vergleiche, Suchtreffer, Downloads oder Qualitätsentscheidungen stattgefunden haben.</div>
<div class="filters-row">
<label>Typ <select id="eventTypeFilter"><option value="">Alle</option></select></label>
<label class="grow">Suche <input id="eventSearch" type="search" placeholder="Eventtyp, Meldung, Query oder Metadaten"></label>
<label><input id="changesOnly" type="checkbox"> Nur mit Graphänderung</label>
</div>
<div id="eventsList" class="events-list"></div>
</section>
</main>
<footer class="analysis-footer">
<span id="generatedAt">Noch nicht aktualisiert</span>
<span>Analysehistorie wird in <code>graph.db</code> gespeichert; die coole Gehirnansicht bleibt davon getrennt.</span>
</footer>
<script src="/analysis.js"></script>
</body>
</html>