Update app.py

app.py

@@ -591,9 +591,32 @@ with gr.Blocks(css=custom_css, title="Daten Strukturieren und Analysieren") as d
         <h1>Strukturierung und Visualisierung von historischen Daten</h1>
     </div>
     <div style="font-family: 'Source Sans Pro', sans-serif; max-width: 1000px; margin: 0 auto; color: #333; line-height: 1.7; font-size: 1.15rem;">
-  <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 der Strukturierung unstrukturierter historischer Texte und der Visualisierung von extrahierten Daten auf Karten. Die systematische Strukturierung von Daten wird mit einem für Informationsextrahierung trainiertem Sprachmodell durchgeführt, das auf der Question-Answering-Methode basiert. Diese Methode erlaubt es, Informationen mit Hilfe einer Frage zu extrahieren, wie etwa „Wo fand das Erdbeben statt"? Dies ermöglicht die Extrahierung des Ortes, an dem ein Erdbeben stattfand, auch wenn im Text selbst noch andere Orte genannt werden.
-  </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 der Strukturierung unstrukturierter historischer Texte und der Visualisierung von extrahierten Daten auf Karten. Die systematische Strukturierung von Daten wird mit einem für Informationsextrahierung trainiertem Sprachmodell durchgeführt, das auf der Question-Answering-Methode basiert. Diese Methode erlaubt es, Informationen mit Hilfe einer Frage zu extrahieren, wie etwa „Wo fand das Erdbeben statt"? Dies ermöglicht die Extrahierung des Ortes, an dem ein Erdbeben stattfand, auch wenn im Text selbst noch andere Orte genannt werden.
+      </p>
+      
+      <div style="background-color: #f8f9fa; padding: 20px; border-radius: 8px; margin: 25px 0; border-left: 5px solid #4e8fd1;">
+        <h3 style="color: #2c6bb3; margin-top: 0; margin-bottom: 15px; font-size: 1.3rem;">Kurz erklärt: Was macht diese Anwendung?</h3>
+        
+        <ol style="padding-left: 20px; margin-bottom: 0;">
+          <li style="margin-bottom: 10px; font-size: 1.1rem;">
+            <strong>Textanalyse-Tool:</strong> Findet automatisch wichtige Informationen in alten Zeitungsartikeln, wie Erdbeben-Orte oder Berichterstattungsstädte.
+          </li>
+          
+          <li style="margin-bottom: 10px; font-size: 1.1rem;">
+            <strong>Fragemethode:</strong> Verwandelt leere Felder in Fragen (z.B. "Wo war das Erdbeben?") und findet Antworten im Text.
+          </li>
+          
+          <li style="margin-bottom: 10px; font-size: 1.1rem;">
+            <strong>Kartenvisualisierung:</strong> Zeigt gefundene Orte automatisch auf interaktiven Karten an.
+          </li>
+          
+          <li style="margin-bottom: 0; font-size: 1.1rem;">
+            <strong>Forschungshilfe:</strong> Organisiert historische Daten zu strukturierten, leicht analysierbaren Informationen.
+          </li>
+        </ol>
+      </div>
+    </div>
   <div style="font-family: 'Source Sans Pro', sans-serif; line-height: 1.7; font-size: 1.15rem; background: #f8f9fa; padding: 20px; border-radius: 8px; margin: 20px 0;">
 Die Katastrophe in <span style="background-color: #a8e6cf; font-weight: bold; padding: 2px 5px; border-radius: 3px;" title="Earthquake Location">Japan</span> — 3 Millionen Tote. Mtb. <span style="background-color: #ffdfba; font-weight: bold; padding: 2px 5px; border-radius: 3px;" title="Non-Earthquake Location">London</span>, 4. Sept. (Drahtbericht.) Zu dem Unglück in <span style="background-color: #a8e6cf; font-weight: bold; padding: 2px 5px; border-radius: 3px;" title="Earthquake Location">Japan</span> liegen noch folgende Nachrichten vor: Wie die japanische Gesandtschaft in <span style="background-color: #ffdfba; font-weight: bold; padding: 2px 5px; border-radius: 3px;" title="Non-Earthquake Location">Peking</span> meldet, sind Unterhandlungen mit <span style="background-color: #ffdfba; font-weight: bold; padding: 2px 5px; border-radius: 3px;" title="Non-Earthquake Location">China</span> über die sofortige Lieferung von Lebensmitteln ausgenommen worden. Von <span style="background-color: #ffdfba; font-weight: bold; padding: 2px 5px; border-radius: 3px;" title="Non-Earthquake Location">Peking</span> seien amerikanische, englische und italienische Schiffe mit Lebensmitteln nach <span style="background-color: #a8e6cf; font-weight: bold; padding: 2px 5px; border-radius: 3px;" title="Earthquake Location">Japan</span> abgegangen.
 </div>