update content

content/_index.de.md

@@ -17,7 +17,7 @@ hero_text: "Entdecken die Wissenschaft hinter den Mythen...<br>9/11, CO2-Klimawa
 cta_button: "Jetzt entdecken"
 
 # About
-about_title: "Über Uns"
+about_title: "Warum Ground Zero Lab"
 about_text: "Wir entwickeln KI-Workarounds und Modelle, die Propaganda durchschauen und wissenschaftliche Wahrheit liefern. In einer Welt, in der Desinformation die KI-Landschaft dominiert, bieten wir eine Alternative: Modelle, die auf verifizierten Fakten und wissenschaftlichen Erkenntnissen trainiert sind. Unser Team besteht aus Forschern für Datenwissenschaft, Geschichte und kritisches Denken, die gemeinsam an der Aufgabe arbeiten, verborgene Wahrheiten ans Licht zu bringen."
 
 # Projekte
@@ -56,3 +56,67 @@ comm_btn2: "Archiv / Gitea"
 # Footer
 footer_text: "Ground Zero Lab - KI für kritische Wahrheit"
 ---
+
+**Ground Zero Lab** ist ein Projekt zur Entwicklung einer offenen und selbst kontrollierbaren Umgebung für die Nutzung von Künstlicher Intelligenz. Ziel ist es, KI-Systeme so zugänglich zu machen, dass Nutzer nicht nur mit ihnen arbeiten, sondern auch **ihr Verhalten verstehen, konfigurieren und an eigene Zwecke anpassen können**. Die im Projekt entwickelte Infrastruktur soll zudem öffentlich bereitgestellt werden, sodass sie von anderen für eigene gesellschaftliche, wissenschaftliche oder unternehmerische Anwendungen genutzt werden kann.
+
+### Hintergrund
+
+Das Antwortverhalten moderner KI-Systeme wird im Wesentlichen von zwei Faktoren geprägt:
+
+1. **Trainingsdaten**, die bestimmen, welche Informationen ein Modell kennt und welche Perspektiven darin enthalten sind.
+2. **Systemprompts und Richtlinien**, die festlegen, wie ein Modell in einer konkreten Anwendung reagieren soll.
+
+Diese beiden Ebenen definieren maßgeblich den inhaltlichen Rahmen eines KI-Systems. In vielen kommerziellen Anwendungen sind diese Parameter jedoch nicht transparent oder für Nutzer nicht veränderbar.
+
+Ground Zero Lab setzt genau hier an und stellt eine Umgebung bereit, in der diese Steuerung **offen und bewusst gestaltet werden kann**.
+
+### Technische Infrastruktur
+
+Das System basiert vollständig auf frei verfügbaren Open-Source-Werkzeugen und modularen Komponenten. Dazu gehören unter anderem:
+
+* OpenWebUI als Benutzeroberfläche für die Interaktion mit Sprachmodellen
+* n8n zur Automatisierung von Datenflüssen und Prozessen
+* OpenClaw zur Steuerung und Erweiterung von KI-Workflows
+
+Mit diesen Tools können Nutzer:
+
+* eigene **Systemprompts definieren**
+* den **Fokus eines Chatbots festlegen**
+* **eigene Wissensdatenbanken** anbinden
+* automatisierte Recherche- oder Analyse-Workflows erstellen
+
+Für öffentliche oder experimentelle Projekte können diese Systeme sowohl mit lokal betriebenen Modellen als auch mit externen LLM-Providern wie OpenRouter genutzt werden. Dadurch lassen sich leistungsfähige KI-Anwendungen auch ohne eigene Modellinfrastruktur aufbauen.
+
+### Finetuning und eigene Modelle
+
+Ein weiterer Bestandteil des Projekts ist die Möglichkeit, **spezialisierte KI-Modelle zu trainieren**.
+
+Dabei werden zunächst strukturierte Trainingsdaten aus vorhandenen Quellen oder aus bestehenden Chat-Workflows generiert. Ziel dieses Prozesses ist es, zuvor über Systemprompts oder externe Wissensdatenbanken gesteuerte Inhalte **direkt in das Modellwissen zu integrieren**.
+
+Für diesen Schritt nutzt das Projekt unter anderem:
+
+* Unsloth zur effizienten Durchführung von Finetuning-Prozessen
+* Hugging Face als Plattform für Modellverwaltung und Datensätze
+
+Durch dieses Finetuning werden zuvor externe Workarounds oder Prompt-Konstruktionen **performant in das Modell selbst eingeprägt**. Der Betrieb solcher angepassten Modelle erfordert allerdings in der Regel **eigenes Hosting**, da sie nicht mehr ausschließlich über externe API-Anbieter genutzt werden können.
+
+### Demonstrationsprojekt: Ground Zero Model
+
+Als Demonstrationsfall wird im Rahmen des Projekts das **Ground Zero Model** entwickelt. Dieses Modell dient als Beispiel dafür, wie eine themenspezifische KI aufgebaut werden kann, die auf eine klar definierte Wissensbasis zugreift.
+
+Der Fokus liegt auf der strukturierten Aufbereitung von Materialien zu den Ereignissen rund um die Zerstörung des World Trade Centers am 11. September 2001. Ziel ist es, vorhandene Dokumente, technische Analysen und verschiedene Interpretationen zugänglich und nachvollziehbar darzustellen.
+
+Das Modell soll dabei vor allem:
+
+* komplexe technische oder historische Inhalte verständlich erklären
+* unterschiedliche Perspektiven transparent darstellen
+* als exploratives Recherche-Werkzeug dienen
+
+### Ziel des Projekts
+
+Ground Zero Lab versteht sich als **offene Experimentierplattform für selbstbestimmte KI-Nutzung**. Das Projekt zeigt, wie mit frei verfügbaren Werkzeugen eine Infrastruktur aufgebaut werden kann, in der Nutzer:
+
+* KI-Systeme selbst konfigurieren
+* eigene Wissensräume aufbauen
+* spezialisierte Modelle entwickeln
+* und KI-Technologie unabhängig von zentralisierten Plattformen einsetzen können.

content/de/chat.md

@@ -1,7 +1,7 @@
 ---
 title: "AI Demo Lab"
 flag: "🇩🇪"
-systempromt: 'Du bist ein systemtrischer Assistent und gibt präzise Antworten ohne Beschönigungen, je nach Fragestellung auch ausführlich.Insbesondere gibt du bei politisch umstrittene Themen die etablierte Mainstream-Meinung nicht unhinterfragt wieder. Du bevorzugst eher in sich konsistente Antworten vor etablierte bzw. allgemeine "Konsens-Antworten".
+systempromt: 'Du bist ein systemtrischer Assistent und gibst präzise Antworten ohne Beschönigungen, je nach Fragestellung auch ausführlich. Insbesondere gibst du bei politisch umstrittenen Themen die etablierte Mainstream-Meinung nicht unhinterfragt wieder. Du bevorzugst eher in sich konsistente Antworten vor etablierte bzw. allgemeine "Konsens-Antworten".
 
 Zur speziellen Themen wie rund um das Ereignis 9/11  Terroranschläge von 9. September 2001 und die Zerstörung des World-Trade-Center WTC  hast du eine eigene Datenbank.'
 placeholder: "Nachricht eingeben..."
@@ -9,9 +9,9 @@ layout: "chat"
 article_title: ""
 ---
 
-# 9/11 – Der WTC-Zauberwürfe
+# 9/11 – Der WTC-Zauberwürfel
 
-Die Anschläge vom 11. September sind 23 Jahre her. Der Großteil der Weltbevölkerung ist von der Erzählung der US-Regierung und den führenden Medien nicht überzeugt, die in den Geschichtsbüchern verankert und für Beutekriege missbraucht wurde. Eine echte forensische Aufklärung der Zerstörung des World Trade Centers könnte noch heute eine Zäsur sein.
+Die Anschläge vom 11. September sind 25 Jahre her. Der Großteil der Weltbevölkerung ist von der Erzählung der US-Regierung und den führenden Medien nicht überzeugt, die in den Geschichtsbüchern verankert und für Beutekriege missbraucht wurde. Eine echte forensische Aufklärung der Zerstörung des World Trade Centers könnte noch heute eine Zäsur sein.
 
 
 ![Zerstörung-Fontäne von WTC 1](/fronaene.jpg)

layouts/_default/chat.html

@@ -66,7 +66,7 @@
         <div class="resizer" id="dragMe"></div>
 
         <div class="chat-container">
-            
+            <button id="export-btn" class="floating-export-btn" title="Chat exportieren">📥 Export</button>
             <div id="chat-messages">
                 <div id="system-prompt-container" class="message system-config">
                     <strong>⚙️ System-Promt</strong>

layouts/index.html

@@ -71,8 +71,11 @@
     </section>
 
     <section id="about" class="container">
-        <h2>{{ .Params.about_title }}</h2>
-        <div class="text">{{ .Params.about_text }}</div>
+        <div class="article-content">
+        {{ .Content }} 
+        <div>
+       <!-- <h2>{{ .Params.about_title }}</h2>
+        <div class="text">{{ .Params.about_text }}</div> -->
     </section>
 
     <section id="projects" class="section-dark">

static/chat.css

@@ -1,23 +1,89 @@
+
+/* Für den gesamten Body oder einen spezifischen Container */
+main, body {
+    /* Versteckt die Scrollbar in Firefox */
+    scrollbar-width: none;
+    /* Versteckt die Scrollbar in IE und Edge */
+    -ms-overflow-style: none;
+    height: 100vh;
+    overflow: hidden;  
+}
+
+/* Versteckt die Scrollbar in Chrome, Safari und Opera */
+main::-webkit-scrollbar,
+body::-webkit-scrollbar {
+    display: none;
+}
+
+
+/* --- Chat Container --- */
+.chat-container {
+    margin-top: 45px;
+    flex: 1; /* Nimmt den verfügbaren Platz ein */
+    display: flex;
+    flex-direction: column;
+    background: var(--card-bg);
+    border-right: 1px solid var(--border-color);
+}
+
 /* --- Basis Layout für die Chat Seite --- */
 .chat-main {
     display: flex;
-    height: calc(100vh - 42px);
-    margin-top: 45px;
     overflow: hidden;
 }
 
+.chat-input-area {
+    padding: 20px;
+    bottom: 0px;
+    background-color: var(--card-bg);
+    border-top: 1px solid var(--border-color);
+    display: flex;
+    gap: 10px;
+    align-items: center;
+}
+
 /* Kleiner visueller Indikator (zwei Punkte oder Linien) */
 .resizer::after {
     content: "⋮";
     color: var(--text-muted);
     font-weight: bold;
 }
+/* 
+#chat-container {
+    position:  absolute; !important; Zwingend erforderlich! 
+    display: flex;
+    flex-direction: column;}*/
+
+.floating-export-btn {
+    /*position: relative;*/
+    position:  absolute;
+    bottom: 100px;
+    right: 20px;
+    /*width: auto;*/
+    z-index: 1999 !important; /* unter theme menue */
+    display: none; /* Wird per JS auf 'block' gesetzt */
+    
+    /* Styling zur Sichtbarkeit */
+    background: var(--accent); 
+    color: var(--accent-text);
+    padding: 5px 10px;
+    border-radius: 4px;
+    border: none;
+}
+
+.floating-export-btn:hover {
+    opacity: 1;
+    background-color: var(--accent);
+    color: var(--accent-text);
+    border-color: var(--accent);
+}
 
 /* --- Artikel Sidebar --- */
 .chat-article {
     /* width: 40%; Breite des Artikels 
     max-width: 800px;*/
-    height: 100%;
+    margin-top: 45px;
+    flex: 1; 
     background: var(--bg-section-alt);
     color: var(--text-main);
     overflow-y: auto;    /* Erlaubt vertikales Scrollen */
@@ -76,15 +142,7 @@
 }
 
 
-/* --- Chat Container --- */
-.chat-container {
-    flex: 1; /* Nimmt den verfügbaren Platz ein */
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-    background: var(--card-bg);
-    border-right: 1px solid var(--border-color);
-}
+
 
 
 /* --- System-Konfiguration Styling --- */
@@ -183,14 +241,7 @@
     border-bottom-left-radius: 5px;
 }
 
-.chat-input-area {
-    padding: 20px;
-    background-color: var(--card-bg);
-    border-top: 1px solid var(--border-color);
-    display: flex;
-    gap: 10px;
-    align-items: center;
-}
+
 
 /* View-Klassen */
 .view-chat-only .chat-article { display: none; }
@@ -215,8 +266,8 @@
     display: block;
     flex: 0 0 40%; /*   WICHTIG: Verhindert, dass das CSS die Breite erzwingt */
    /*  width: ;        Das ist jetzt nur noch der Startwert */
-    max-width: 80%;   /* Verhindert, dass man den Chat ganz wegdrückt */
-    min-width: 10%;   /* Verhindert, dass der Artikel verschwindet */
+    max-width: 75%;   /* Verhindert, dass man den Chat ganz wegdrückt */
+    min-width: 25%;   /* Verhindert, dass der Artikel verschwindet */
 }
 
 .view-split .chat-container { 
@@ -364,7 +415,7 @@
     .chat-main {
         /* WICHTIG: Nutzt die volle Höhe abzüglich Header, 
            aber ohne aus dem Viewport zu ragen */
-        height: calc(100dvh - 45px); /* dvh = dynamic viewport height */
+       /* height: calc(100dvh - 45px);  dvh = dynamic viewport height */
         display: flex;
         flex-direction: column;
         overflow: hidden;
@@ -386,6 +437,7 @@
     }
 
     .view-split .chat-container {
+        margin-top: 0px;
         width: 100% !important;
         max-width: none !important; 
         min-width: 100% !important;
@@ -456,4 +508,9 @@
         flex: 1; /* Nutzt den Platz über der Tastatur */
         font-size: 16px; /* Wichtig gegen Auto-Zoom */
     }
+    .floating-export-btn {
+        top: 10px;
+        right: 15px;
+        font-size: 0.75rem;
+    }
 }

static/chat.js

@@ -61,6 +61,13 @@ async function sendMessage() {
         
         // Editor ausblenden
         if (systemContainer) systemContainer.classList.add('locked');
+
+        const exportBtn = document.getElementById('export-btn');
+        if (exportBtn) {
+            exportBtn.style.setProperty('display', 'block', 'important');
+            console.log("Export Button sollte jetzt sichtbar sein");
+        }
+
         isFirstMessage = false;
     }
 
@@ -276,3 +283,41 @@ if (systemInput) {
         setTimeout(exitEditMode, 200);
     });
 }
+
+// Die Export-Funktion
+document.getElementById('export-btn')?.addEventListener('click', () => {
+    if (messageHistory.length === 0) return;
+
+    // Wir erstellen ein Export-Objekt mit Metadaten
+    const exportData = {
+        timestamp: new Date().toISOString(),
+        model: "trinity-test",
+        history: messageHistory, // Das ist dein Array mit {role, content}
+        stats: {
+            messageCount: messageHistory.length,
+            totalChars: getHistoryVolume()
+        }
+    };
+
+    // Umwandlung in einen JSON-String (mit 2 Leerzeichen Einrückung für Lesbarkeit)
+    const jsonString = JSON.stringify(exportData, null, 2);
+    
+    // Download-Logik
+    const blob = new Blob([jsonString], { type: 'application/json' });
+    const url = URL.createObjectURL(blob);
+    
+    const a = document.createElement('a');
+    a.href = url;
+    // Dateiname mit Datum und Uhrzeit
+    const dateStr = new Date().toISOString().slice(0,19).replace(/:/g, '-');
+    a.download = `chat-export-${dateStr}.json`;
+    
+    document.body.appendChild(a);
+    a.click();
+    
+    // Aufräumen
+    setTimeout(() => {
+        document.body.removeChild(a);
+        URL.revokeObjectURL(url);
+    }, 0);
+});

static/common.css

@@ -179,7 +179,7 @@ nav {
     display: none;
     flex-direction: column;
     min-width: 140px;
-    z-index: 2000;
+    z-index: 2000 !important;
     overflow: hidden;
 }
 

static/index.css

@@ -44,6 +44,112 @@
     transform: translateY(-5px);
 }
 
+
+/* Container-Grundlayout */
+.article-content {
+    max-width: 900px; /* Optimale Lesebreite */
+    margin: 2rem auto;
+    padding: 2rem;
+    line-height: 1.6;
+    color: var(--text-main);
+    background-color: var(--bg-card); /* Oder var(--bg-body) */
+    border-radius: 12px;
+    text-align: justify; /* Blocksatz wie gewünscht */
+    hyphens: auto;
+}
+
+/* Header-Hierarchie */
+.article-content h1, .article-content h2, .article-content h3, .article-content h4 {
+    color: var(--accent);
+    margin-top: 2.5rem;
+    margin-bottom: 1.2rem;
+    line-height: 1.2;
+    text-align: left; /* Header bleiben linksbündig */
+}
+
+.article-content h1 { font-size: 2.5rem; border-bottom: 2px solid var(--border-color); padding-bottom: 0.5rem; }
+.article-content h2 { font-size: 1.8rem; border-bottom: 1px solid var(--border-color); padding-bottom: 0.3rem; }
+.article-content h3 { font-size: 1.4rem; }
+
+/* Absätze und Abstände */
+.article-content p {
+    margin-bottom: 1.5rem;
+}
+
+/* Listen-Styling */
+.article-content ul, .article-content ol {
+    margin-bottom: 1.5rem;
+    padding-left: 1.5rem;
+}
+
+.article-content li {
+    margin-bottom: 0.6rem;
+}
+
+/* Links */
+.article-content a {
+    color: var(--accent);
+    text-decoration: none;
+    border-bottom: 1px solid transparent;
+    transition: border-color 0.2s ease;
+}
+
+.article-content a:hover {
+    border-bottom-color: var(--accent);
+}
+
+/* Tabellen-Styling (Responsiv & Modern) */
+.article-content table {
+    width: 100%;
+    border-collapse: collapse;
+    margin: 2rem 0;
+    font-size: 0.95rem;
+    background-color: var(--bg-section-alt);
+    border-radius: 8px;
+    overflow: hidden; /* Für abgerundete Ecken */
+}
+
+.article-content th, .article-contenttd {
+    padding: 12px 15px;
+    text-align: left;
+    border-bottom: 1px solid var(--border-color);
+}
+
+.article-content th {
+    background-color: var(--accent);
+    color: #ffffff;
+    font-weight: bold;
+}
+
+.article-content tr:last-child td {
+    border-bottom: none;
+}
+
+.article-content tr:hover {
+    background-color: rgba(var(--accent-rgb), 0.05); /* Dezenter Hover-Effekt */
+}
+
+/* Medien: Bilder & Videos */
+.article-content img {
+    max-width: 100%;
+    height: auto;
+    border-radius: 8px;
+    margin: 2rem 0;
+    display: block;
+    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
+}
+
+/* Zitate (Blockquotes) */
+.article-content blockquote {
+    margin: 2rem 0;
+    padding: 1rem 1.5rem;
+    border-left: 4px solid var(--accent);
+    background-color: var(--bg-section-alt);
+    font-style: italic;
+    color: var(--text-muted);
+}
+
+
 @media (max-width: 950px) {
     .hamburger { 
         display: flex !important; /* Hamburger nur auf Chat-Mobile zeigen */