Update app.py

app.py

@@ -303,52 +303,78 @@ with gr.Blocks(css=custom_css, title="Daten Strukturieren und Analysieren") as d
         <h1>Daten Strukturieren und Analysieren</h1>
         <p style="font-size: 1.1rem; margin-top: -10px;">Dies ist eine Demoversion für die Extrahierung und Visualisierung von Daten</p>
     </div>
-<p style="font-size: 1.1rem; margin-top: -10px;">In dieser Unterrichtseinheit befassen wir uns mit einer Methode zur Strukturierung unstrukturierter historischer Texte. Im Kern verbindet unsere Anwendung die systematische Strukturierung von Daten mit einem spezialisierten Sprachmodell, das auf der Question-Answering-Methode basiert.</p>
+<div style="font-family: 'Source Sans Pro', sans-serif; max-width: 800px; margin: 0 auto; color: #333; line-height: 1.6;">
 
-<h3>Methodik: Vom unstrukturierten Text zur strukturierten Information</h3>
+  <p style="font-size: 1.2rem; margin-bottom: 1.5rem; color: #2c3e50; font-weight: 400;">
+    In dieser Unterrichtseinheit befassen wir uns mit einer Methode zur Strukturierung unstrukturierter historischer Texte. 
+    Im Kern verbindet unsere Anwendung die systematische Strukturierung von Daten mit einem spezialisierten Sprachmodell, 
+    das auf der Question-Answering-Methode basiert.
+  </p>
 
-<p>Die grundlegende Herausforderung bei der Arbeit mit historischen Quellen ist, dass relevante Informationen in langen Fließtexten eingebettet sind und manuell mühsam extrahiert werden müssen. Unser Ansatz automatisiert diesen Prozess.</p>
-
-<h4>Wie funktioniert die Informationsextraktion?</h4>
-
-<ol>
-  <li><strong>Template-Definition</strong>: Sie definieren ein JSON-Template mit den Informationstypen, die Sie extrahieren möchten:
-  <pre><code>{"earthquake location": "", "dateline location": ""}</code></pre>
-  </li>
-  
-  <li><strong>Question-Answering-Methode</strong>: Das Sprachmodell interpretiert jedes leere Feld als implizite Frage:
-  <ul>
-    <li><code>"earthquake location": ""</code> → "Wo ist das Erdbeben passiert?"</li>
-    <li><code>"dateline location": ""</code> → "Von wo wird berichtet?"</li>
-  </ul>
-  </li>
-  
-  <li><strong>Sprachmodell-Verarbeitung</strong>: Das NuExtract-1.5 Modell (ein Sequence-to-Sequence Transformer) analysiert den Text vollständig und identifiziert die relevanten Informationen für jedes Template-Feld.</li>
-  
-  <li><strong>Strukturierte Ausgabe</strong>: Das Modell füllt das Template mit den extrahierten Informationen:
-  <pre><code>{"earthquake location": "Japan, Yokohama", "dateline location": "Tokio"}</code></pre>
-  </li>
-</ol>
-
-<h4>Technische Funktionsweise des Sprachmodells</h4>
-
-<p>Das Modell verarbeitet den Input in diesem Format:</p>
+  <div style="background: #f8f9fa; padding: 1.5rem; border-radius: 8px; margin-bottom: 2rem; border-left: 4px solid #3498db;">
+    <h3 style="margin-top: 0; color: #2c3e50; border-bottom: 1px solid #eee; padding-bottom: 0.5rem;">
+      Methodik: Vom unstrukturierten Text zur strukturierten Information
+    </h3>
+    
+    <p style="margin-bottom: 1.5rem;">
+      Die grundlegende Herausforderung bei der Arbeit mit historischen Quellen ist, dass relevante Informationen in langen 
+      Fließtexten eingebettet sind und manuell mühsam extrahiert werden müssen. Unser Ansatz automatisiert diesen Prozess.
+    </p>
+    
+    <h4 style="color: #2980b9; margin-top: 1.5rem;">Wie funktioniert die Informationsextraktion?</h4>
+    
+    <ol style="padding-left: 1.5rem;">
+      <li style="margin-bottom: 1rem;">
+        <strong style="color: #2c3e50;">Template-Definition</strong>: Sie definieren ein JSON-Template mit den Informationstypen, die Sie extrahieren möchten:
+        <pre style="background: #f5f5f5; padding: 1rem; border-radius: 4px; overflow-x: auto; margin: 0.5rem 0 1rem;"><code>{"earthquake location": "", "dateline location": ""}</code></pre>
+      </li>
+      
+      <li style="margin-bottom: 1rem;">
+        <strong style="color: #2c3e50;">Question-Answering-Methode</strong>: Das Sprachmodell interpretiert jedes leere Feld als implizite Frage:
+        <ul style="margin-top: 0.5rem; padding-left: 1.5rem;">
+          <li><code style="background: #f0f0f0; padding: 0.2rem 0.4rem; border-radius: 3px;">"earthquake location": ""</code> → "Wo ist das Erdbeben passiert?"</li>
+          <li><code style="background: #f0f0f0; padding: 0.2rem 0.4rem; border-radius: 3px;">"dateline location": ""</code> → "Von wo wird berichtet?"</li>
+        </ul>
+      </li>
+      
+      <li style="margin-bottom: 1rem;">
+        <strong style="color: #2c3e50;">Sprachmodell-Verarbeitung</strong>: Das NuExtract-1.5 Modell (ein Sequence-to-Sequence Transformer) analysiert den Text vollständig und identifiziert die relevanten Informationen für jedes Template-Feld.
+      </li>
+      
+      <li style="margin-bottom: 1rem;">
+        <strong style="color: #2c3e50;">Strukturierte Ausgabe</strong>: Das Modell füllt das Template mit den extrahierten Informationen:
+        <pre style="background: #f5f5f5; padding: 1rem; border-radius: 4px; overflow-x: auto; margin: 0.5rem 0 1rem;"><code>{"earthquake location": "Japan, Yokohama", "dateline location": "Tokio"}</code></pre>
+      </li>
+    </ol>
+  </div>
 
-<pre><code>&lt;|input|&gt;
+  <div style="background: #f8f9fa; padding: 1.5rem; border-radius: 8px; border-left: 4px solid #9b59b6;">
+    <h4 style="color: #2980b9; margin-top: 0;">Technische Funktionsweise des Sprachmodells</h4>
+    
+    <p>Das Modell verarbeitet den Input in diesem Format:</p>
+    
+    <pre style="background: #f5f5f5; padding: 1rem; border-radius: 4px; overflow-x: auto;"><code>&lt;|input|&gt;
 ### Template:
 {"earthquake location": "", "dateline location": ""}
 ### Text:
 Neues Erdbeben in Japan. Aus Tokio wird berichtet, daß in Yokohama bei einem Erdbeben sechs Personen getötet...
 &lt;|output|&gt;</code></pre>
+    
+    <p style="margin-top: 1.5rem;">Intern erfolgt die Verarbeitung in mehreren Schritten:</p>
+    
+    <ol style="padding-left: 1.5rem;">
+      <li style="margin-bottom: 0.5rem;"><strong style="color: #2c3e50;">Tokenisierung</strong>: Der Text wird in bearbeitbare Einheiten zerlegt.</li>
+      <li style="margin-bottom: 0.5rem;"><strong style="color: #2c3e50;">Kontextuelle Analyse</strong>: Der Transformer-Mechanismus ermöglicht die Analyse von Beziehungen zwischen allen Textteilen gleichzeitig.</li>
+      <li style="margin-bottom: 0.5rem;"><strong style="color: #2c3e50;">Selektive Aufmerksamkeit</strong>: Das Modell fokussiert sich auf Textpassagen, die Antworten auf die impliziten Fragen enthalten könnten.</li>
+      <li style="margin-bottom: 0.5rem;"><strong style="color: #2c3e50;">Generierung</strong>: Die erkannten Informationen werden in das vorgegebene Template eingefügt.</li>
+    </ol>
+  </div>
 
-<p>Intern erfolgt die Verarbeitung in mehreren Schritten:</p>
+  <div style="margin-top: 2rem; padding: 1rem; background: #e8f4fd; border-radius: 8px; text-align: center; font-size: 0.9rem;">
+    <p style="margin: 0;">Diese Methode ermöglicht die effiziente Extraktion historischer Daten aus unstrukturierten Quellen.</p>
+  </div>
 
-<ol>
-  <li><strong>Tokenisierung</strong>: Der Text wird in bearbeitbare Einheiten zerlegt.</li>
-  <li><strong>Kontextuelle Analyse</strong>: Der Transformer-Mechanismus ermöglicht die Analyse von Beziehungen zwischen allen Textteilen gleichzeitig.</li>
-  <li><strong>Selektive Aufmerksamkeit</strong>: Das Modell fokussiert sich auf Textpassagen, die Antworten auf die impliziten Fragen enthalten könnten.</li>
-  <li><strong>Generierung</strong>: Die erkannten Informationen werden in das vorgegebene Template eingefügt.</li>
-</ol>
+</div>
     """)
     
     with gr.Tabs() as tabs: