Update app.py

app.py

@@ -308,7 +308,7 @@ h2 {
 
 /* Fix for map container spacing */
 #map-container {
-    height: 35vh !important;
+    height: 20vh !important;
     margin-bottom: 0 !important;
     padding-bottom: 0 !important;
 }
@@ -351,8 +351,28 @@ with gr.Blocks(css=custom_css, title="Daten Strukturieren und Analysieren") as d
     <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 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.
+    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 genannt werden.
   </p>
+  I'll visualize the text with earthquake locations in green and other locations in orange:
+
+<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;">
+Nene Erdbeben in <span style="background-color: #a8e6cf; font-weight: bold; padding: 2px 5px; border-radius: 3px;" title="Earthquake Location">Japan</span>. <span style="background-color: #ffdfba; font-weight: bold; padding: 2px 5px; border-radius: 3px;" title="Non-Earthquake Location">London</span>, 15. Jan. (Drahtber.) Reuter meldet aus <span style="background-color: #ffdfba; font-weight: bold; padding: 2px 5px; border-radius: 3px;" title="Non-Earthquake Location">Osaka</span>: Die telephonische Verbindung zwischen <span style="background-color: #ffdfba; font-weight: bold; padding: 2px 5px; border-radius: 3px;" title="Non-Earthquake Location">Osaka</span> und <span style="background-color: #ffdfba; font-weight: bold; padding: 2px 5px; border-radius: 3px;" title="Non-Earthquake Location">Tokio</span> ist heute um 5.45 Uhr durch ein Erdbeben unterbrochen worden. Die Straßenbahnen in <span style="background-color: #ffdfba; font-weight: bold; padding: 2px 5px; border-radius: 3px;" title="Non-Earthquake Location">Tokio</span> liegen still. Der Eisenbahnverkehr <span style="background-color: #ffdfba; font-weight: bold; padding: 2px 5px; border-radius: 3px;" title="Non-Earthquake Location">Tokio</span> — <span style="background-color: #ffdfba; font-weight: bold; padding: 2px 5px; border-radius: 3px;" title="Non-Earthquake Location">Osaka</span> ist unterbrochen. Die kaiserliche Familie ist in Sicherheit. In <span style="background-color: #ffdfba; font-weight: bold; padding: 2px 5px; border-radius: 3px;" title="Non-Earthquake Location">Suvamo</span>, einer Borstadt <span style="background-color: #ffdfba; font-weight: bold; padding: 2px 5px; border-radius: 3px;" title="Non-Earthquake Location">Tokios</span>, sind Brände ausgebrochen. Ein Eisenbahnzug stürzte in den <span style="background-color: #ffdfba; font-weight: bold; padding: 2px 5px; border-radius: 3px;" title="Non-Earthquake Location">Bajubawo</span>, einem Fluß zwischen <span style="background-color: #ffdfba; font-weight: bold; padding: 2px 5px; border-radius: 3px;" title="Non-Earthquake Location">Gotemba</span> und <span style="background-color: #ffdfba; font-weight: bold; padding: 2px 5px; border-radius: 3px;" title="Non-Earthquake Location">Tokio</span>. Sechs Züge wurden umgeworfen. <span style="background-color: #ffdfba; font-weight: bold; padding: 2px 5px; border-radius: 3px;" title="Non-Earthquake Location">Nenqork</span>, 15. Jan. (Drahtber.) Aus <span style="background-color: #ffdfba; font-weight: bold; padding: 2px 5px; border-radius: 3px;" title="Non-Earthquake Location">Tokio</span> wird berichtet, daß in <span style="background-color: #a8e6cf; font-weight: bold; padding: 2px 5px; border-radius: 3px;" title="Earthquake Location">Uokohama</span> bei dem Erdbeben sechs Personen getötet und 22 verletzt wurden. In <span style="background-color: #ffdfba; font-weight: bold; padding: 2px 5px; border-radius: 3px;" title="Non-Earthquake Location">Tokio</span> wurden vier Personen getötet und 20 verletzt. In <span style="background-color: #a8e6cf; font-weight: bold; padding: 2px 5px; border-radius: 3px;" title="Earthquake Location">Nokohama</span> wurden 800 Häuser zerstört.
+</div>
+
+<div style="display: flex; margin-top: 20px;">
+  <div style="display: flex; align-items: center; margin-right: 20px;">
+    <div style="width: 20px; height: 20px; background-color: #a8e6cf; margin-right: 10px; border-radius: 3px;"></div>
+    <span>Earthquake Locations: Japan, Uokohama (Yokohama), Nokohama (Yokohama)</span>
+  </div>
+  <div style="display: flex; align-items: center;">
+    <div style="width: 20px; height: 20px; background-color: #ffdfba; margin-right: 10px; border-radius: 3px;"></div>
+    <span>Other Locations: London, Osaka, Tokio, Suvamo, Gotemba, Nenqork (New York), etc.</span>
+  </div>
+</div>
+
+<div style="margin-top: 20px; font-style: italic;">
+Note: This visualization shows how the model would differentiate between locations where earthquakes occurred (in green) versus locations that are mentioned but were not earthquake sites (in orange). The model determines this based on contextual clues in the text.
+</div>
 
   <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;">
@@ -520,7 +540,7 @@ with gr.Blocks(css=custom_css, title="Daten Strukturieren und Analysieren") as d
                     map_output = gr.HTML(
                         label="Interaktive Karte",
                         value="""
-                        <div style="text-align:center; height:35vh; width:100%; display:flex; align-items:center; justify-content:center; 
+                        <div style="text-align:center; height:20vh; width:100%; display:flex; align-items:center; justify-content:center; 
                                 background-color:#f5f5f5; border:1px solid #e0e0e0; border-radius:8px;">
                             <div>
                                 <img src="https://cdn-icons-png.flaticon.com/512/854/854878.png" width="100">
@@ -550,7 +570,7 @@ with gr.Blocks(css=custom_css, title="Daten Strukturieren und Analysieren") as d
                     
                     if map_html and processed_path:
                         responsive_html = f"""
-                        <div style="width:100%; height:35vh; margin:0; padding:0; border:1px solid #e0e0e0; border-radius:8px; overflow:hidden;">
+                        <div style="width:100%; height:20vh; margin:0; padding:0; border:1px solid #e0e0e0; border-radius:8px; overflow:hidden;">
                             {map_html}
                         </div>
                         """