Update app.py

app.py

@@ -299,208 +299,98 @@ h2 {
 
 with gr.Blocks(css=custom_css, title="Daten Strukturieren und Analysieren") as demo:
     gr.HTML("""
-    
-<style>
-@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Source+Sans+Pro:wght@300;400;600&display=swap');
-
-.methodology-container {
-    max-width: 100%;
-    padding: 30px;
-    background: linear-gradient(to right, #f8f9fa, #ffffff);
-    border-radius: 12px;
-    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
-    color: #2d3748;
-    font-family: 'Source Sans Pro', sans-serif;
-    line-height: 1.6;
-}
-
-.methodology-container h2 {
-    font-family: 'Playfair Display', serif;
-    color: #2c5282;
-    font-size: 2.2rem;
-    margin-bottom: 20px;
-    border-bottom: 2px solid #4299e1;
-    padding-bottom: 10px;
-}
-
-.methodology-container h3 {
-    font-family: 'Playfair Display', serif;
-    color: #2b6cb0;
-    font-size: 1.8rem;
-    margin-top: 30px;
-    margin-bottom: 15px;
-}
-
-.methodology-container h4 {
-    font-family: 'Source Sans Pro', sans-serif;
-    color: #3182ce;
-    font-size: 1.3rem;
-    font-weight: 600;
-    margin-top: 25px;
-    margin-bottom: 12px;
-}
-
-.methodology-container p {
-    font-size: 1.1rem;
-    margin-bottom: 15px;
-    text-align: justify;
-}
-
-.methodology-container .intro {
-    font-size: 1.2rem;
-    color: #4a5568;
-    line-height: 1.7;
-    border-left: 4px solid #4299e1;
-    padding-left: 15px;
-    margin: 20px 0;
-}
-
-.methodology-container ol, .methodology-container ul {
-    padding-left: 20px;
-    margin-bottom: 20px;
-}
-
-.methodology-container li {
-    margin-bottom: 12px;
-}
-
-.methodology-container strong {
-    color: #2c5282;
-    font-weight: 600;
-}
-
-.methodology-container code {
-    background-color: #edf2f7;
-    border-radius: 3px;
-    font-family: monospace;
-    padding: 3px 5px;
-    color: #2d3748;
-}
-
-.methodology-container pre {
-    background-color: #f7fafc;
-    border-radius: 6px;
-    padding: 15px;
-    margin: 15px 0;
-    overflow: auto;
-    border-left: 3px solid #4299e1;
-}
-
-.methodology-container pre code {
-    background-color: transparent;
-    padding: 0;
-    color: #2d3748;
-}
+    <div style="font-family: 'Source Sans Pro', sans-serif; max-width: 900px; margin: 0 auto; color: #333; line-height: 1.7; font-size: 1.15rem;">
 
-.process-step {
-    background-color: #ebf8ff;
-    border-radius: 8px;
-    padding: 15px 15px 15px 20px;
-    margin-bottom: 15px;
-    border-left: 5px solid #4299e1;
-    transition: transform 0.2s ease-in-out;
-}
-
-.process-step:hover {
-    transform: translateX(5px);
-    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
-}
-
-.section-divider {
-    height: 3px;
-    background: linear-gradient(to right, #4299e1, transparent);
-    margin: 30px 0;
-}
-
-.highlight-box {
-    background-color: #e6fffa;
-    border-radius: 8px;
-    padding: 20px;
-    margin: 20px 0;
-    border-left: 5px solid #38b2ac;
-}
-</style>
-<div class="methodology-container">
-    <h2>Historische Textanalyse und Kartierung</h2>
-<p class="intro">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 auf Informationsextrahierung trainiertes Sprachmodell, das auf der Question-Answering-Methode basiert. Diese Methode extrahiert Text auf der Basis von Fragen, wie etwa „Wo fand das Erdbeben statt"? Dies ermöglicht die Extrahierung des Erdbebenortes, auch wenn im Text selbst noch andere Orte genannt werden.</p>
-
-<div class="section-divider"></div>
-
-<h3>Methodik: Vom unstrukturierten Text zur strukturierten Information</h3>
-
-<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. Dieser Ansatz automatisiert diesen Prozess.</p>
+  <p style="font-size: 1.3rem; margin-bottom: 1.8rem; color: #2c3e50; font-weight: 400; padding: 0 1rem;">
+    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 auf Informationsextrahierung trainierten Sprachmodell, das auf der Question-Answering-Methode basiert. Diese Methode extrahiert Text auf der Basis von Fragen, wie etwa „Wo fand das Erdbeben statt"? Dies ermöglicht die Extrahierung des Erdbebenortes, auch wenn im Text selbst noch andere genannt werden.
+  </p>
 
-<h4>Wie funktioniert die Informationsextraktion?</h4>
-
-<ol>
-    <li class="process-step">
-        <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>
+  <div style="background: #f8f9fa; padding: 2rem; border-radius: 10px; margin-bottom: 2.5rem; border-left: 5px solid #3498db;">
+    <h3 style="margin-top: 0; color: #2c3e50; border-bottom: 2px solid #eee; padding-bottom: 0.8rem; font-size: 1.5rem;">
+      Methodik: Vom unstrukturierten Text zur strukturierten Information
+    </h3>
+    
+    <p style="margin-bottom: 1.8rem; font-size: 1.2rem;">
+      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. Dieser Ansatz automatisiert diesen Prozess.
+    </p>
     
-    <li class="process-step">
-        <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>
+    <h4 style="color: #2980b9; margin-top: 2rem; font-size: 1.35rem;">Wie funktioniert die Informationsextraktion?</h4>
+    
+    <ol style="padding-left: 2rem; font-size: 1.15rem;">
+      <li style="margin-bottom: 1.5rem;">
+        <strong style="color: #2c3e50; font-size: 1.2rem;">Template-Definition</strong>: Sie definieren ein JSON-Template mit den Informationstypen, die Sie extrahieren möchten:
+        <pre style="background: #f5f5f5; padding: 1.2rem; border-radius: 6px; overflow-x: auto; margin: 1rem 0 1.5rem; font-size: 1.1rem;"><code>{"earthquake location": "", "dateline location": ""}</code></pre>
+      </li>
+      
+      <li style="margin-bottom: 1.5rem;">
+        <strong style="color: #2c3e50; font-size: 1.2rem;">Question-Answering-Methode</strong>: Das Sprachmodell interpretiert jedes leere Feld als implizite Frage:
+        <ul style="margin-top: 1rem; padding-left: 2rem; font-size: 1.15rem;">
+          <li style="margin-bottom: 0.8rem;"><code style="background: #f0f0f0; padding: 0.3rem 0.5rem; border-radius: 4px; font-size: 1.1rem;">"earthquake location": ""</code> → "Wo ist das Erdbeben passiert?"</li>
+          <li style="margin-bottom: 0.8rem;"><code style="background: #f0f0f0; padding: 0.3rem 0.5rem; border-radius: 4px; font-size: 1.1rem;">"dateline location": ""</code> → "Von wo wird berichtet?"</li>
         </ul>
-    </li>
+      </li>
+      
+      <li style="margin-bottom: 1.5rem;">
+        <strong style="color: #2c3e50; font-size: 1.2rem;">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; font-size: 1.2rem;">Strukturierte Ausgabe</strong>: Das Modell füllt das Template mit den extrahierten Informationen:
+        <pre style="background: #f5f5f5; padding: 1.2rem; border-radius: 6px; overflow-x: auto; margin: 1rem 0 1.5rem; font-size: 1.1rem;"><code>{"earthquake location": "Japan, Yokohama", "dateline location": "Tokio"}</code></pre>
+      </li>
+    </ol>
+  </div>
+
+  <div style="background: #f8f9fa; padding: 2rem; border-radius: 10px; margin-bottom: 2.5rem; border-left: 5px solid #9b59b6;">
+    <h4 style="color: #2980b9; margin-top: 0; font-size: 1.35rem;">Technische Funktionsweise des Sprachmodells</h4>
     
-    <li class="process-step">
-        <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>
+    <p style="font-size: 1.2rem;">Intern erfolgt die Verarbeitung in mehreren Schritten:</p>
     
-    <li class="process-step">
-        <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>
-
-<div class="section-divider"></div>
-
-<h4>Technische Funktionsweise des Sprachmodells</h4>
-
-<p>Intern erfolgt die Verarbeitung in mehreren Schritten:</p>
-
-<ol>
-    <li class="process-step">
-        <strong>Tokenisierung</strong>: Der Text wird in bearbeitbare Einheiten zerlegt.
-    </li>
-    <li class="process-step">
-        <strong>Kontextuelle Analyse</strong>: Der Transformer-Mechanismus ermöglicht die Analyse von Beziehungen zwischen allen Textteilen gleichzeitig.
-    </li>
-    <li class="process-step">
-        <strong>Selektive Aufmerksamkeit</strong>: Das Modell fokussiert sich auf Textpassagen, die Antworten auf die impliziten Fragen enthalten könnten.
-    </li>
-    <li class="process-step">
-        <strong>Generierung</strong>: Die erkannten Informationen werden in das vorgegebene Template eingefügt.
-    </li>
-</ol>
-
-<div class="section-divider"></div>
-
-<h3>Die Kartierungsfunktion</h3>
-
-<div class="highlight-box">
-    <p>Nach der Extraktion der Ortsangaben ermöglicht unsere Anwendung die automatische Visualisierung dieser Daten auf einer interaktiven Karte:</p>
-</div>
+    <ol style="padding-left: 2rem; font-size: 1.15rem;">
+      <li style="margin-bottom: 1rem;"><strong style="color: #2c3e50; font-size: 1.2rem;">Tokenisierung</strong>: Der Text wird in bearbeitbare Einheiten zerlegt.</li>
+      <li style="margin-bottom: 1rem;"><strong style="color: #2c3e50; font-size: 1.2rem;">Kontextuelle Analyse</strong>: Der Transformer-Mechanismus ermöglicht die Analyse von Beziehungen zwischen allen Textteilen gleichzeitig.</li>
+      <li style="margin-bottom: 1rem;"><strong style="color: #2c3e50; font-size: 1.2rem;">Selektive Aufmerksamkeit</strong>: Das Modell fokussiert sich auf Textpassagen, die Antworten auf die impliziten Fragen enthalten könnten.</li>
+      <li style="margin-bottom: 1rem;"><strong style="color: #2c3e50; font-size: 1.2rem;">Generierung</strong>: Die erkannten Informationen werden in das vorgegebene Template eingefügt.</li>
+    </ol>
+  </div>
+
+  <div style="background: #f8f9fa; padding: 2rem; border-radius: 10px; margin-bottom: 2.5rem; border-left: 5px solid #27ae60;">
+    <h3 style="margin-top: 0; color: #2c3e50; border-bottom: 2px solid #eee; padding-bottom: 0.8rem; font-size: 1.5rem;">
+      Die Kartierungsfunktion
+    </h3>
+    
+    <p style="margin-bottom: 1.8rem; font-size: 1.2rem;">
+      Nach der Extraktion der Ortsangaben ermöglicht unsere Anwendung die automatische Visualisierung dieser Daten auf einer interaktiven Karte:
+    </p>
+    
+    <ol style="padding-left: 2rem; font-size: 1.15rem;">
+      <li style="margin-bottom: 1.2rem;">
+        <strong style="color: #2c3e50; font-size: 1.2rem;">Geokodierung</strong>: Die extrahierten Ortsnamen werden mittels eines geografischen Dienstes in geografische Koordinaten (Längen- und Breitengrade) umgewandelt.
+      </li>
+      
+      <li style="margin-bottom: 1.2rem;">
+        <strong style="color: #2c3e50; font-size: 1.2rem;">Kartenerstellung</strong>: Die Koordinaten werden auf einer interaktiven Karte platziert, wobei jeder Ort durch einen Marker dargestellt wird.
+      </li>
+      
+      <li style="margin-bottom: 1.2rem;">
+        <strong style="color: #2c3e50; font-size: 1.2rem;">Kontextinformationen</strong>: Beim Klick auf einen Marker werden zusätzliche Informationen aus dem Originaltext angezeigt.
+      </li>
+      
+      <li style="margin-bottom: 1rem;">
+        <strong style="color: #2c3e50; font-size: 1.2rem;">Räumliche Analyse</strong>: Die Karte ermöglicht die visuelle Analyse der räumlichen Verteilung historischer Ereignisse.
+      </li>
+    </ol>
+    
+    <p style="font-size: 1.2rem; margin-top: 1.5rem;">
+      Dieser kombinierte Ansatz aus Textextraktion und geografischer Visualisierung eröffnet neue Möglichkeiten für die räumliche Analyse historischer Quellen und erlaubt es, geografische Muster zu erkennen, die in den reinen Textdaten nicht unmittelbar sichtbar wären.
+    </p>
+  </div>
 
-<ol>
-    <li class="process-step">
-        <strong>Geokodierung</strong>: Die extrahierten Ortsnamen werden mittels eines geografischen Dienstes in geografische Koordinaten (Längen- und Breitengrade) umgewandelt.
-    </li>
-    <li class="process-step">
-        <strong>Kartenerstellung</strong>: Die Koordinaten werden auf einer interaktiven Karte platziert, wobei jeder Ort durch einen Marker dargestellt wird.
-    </li>
-    <li class="process-step">
-        <strong>Kontextinformationen</strong>: Beim Klick auf einen Marker werden zusätzliche Informationen aus dem Originaltext angezeigt.
-    </li>
-    <li class="process-step">
-        <strong>Räumliche Analyse</strong>: Die Karte ermöglicht die visuelle Analyse der räumlichen Verteilung historischer Ereignisse.
-    </li>
-</ol>
+  <div style="margin-top: 2.5rem; padding: 1.5rem; background: #e8f4fd; border-radius: 10px; text-align: center; font-size: 1.1rem;">
+    <p style="margin: 0;">Diese Methode ermöglicht die effiziente Extraktion und Visualisierung historischer Daten aus unstrukturierten Quellen.</p>
+  </div>
 
-<p>Dieser kombinierte Ansatz aus Textextraktion und geografischer Visualisierung eröffnet neue Möglichkeiten für die räumliche Analyse historischer Quellen und erlaubt es, geografische Muster zu erkennen, die in den reinen Textdaten nicht unmittelbar sichtbar wären.</p>
 </div>
     """)