Update app.py

app.py

@@ -299,81 +299,208 @@ h2 {
 
 with gr.Blocks(css=custom_css, title="Daten Strukturieren und Analysieren") as demo:
     gr.HTML("""
-    <div style="text-align: center; margin-bottom: 1rem">
-        <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>
-<div style="font-family: 'Source Sans Pro', sans-serif; max-width: 800px; margin: 0 auto; color: #333; line-height: 1.6;">
-
-  <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>
-
-  <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>
+<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;
+}
+
+.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>
+
+<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>
     
-    <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>
+    <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>
         </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>
-
-  <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>
+    </li>
     
-    <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>
+    <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="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>
-
-  <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>
+    <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>
+    <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>
 
+<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>
     """)