Update app.py

app.py

@@ -438,19 +438,16 @@ def create_map(df, location_col):
 custom_css = """
 <style>
 @import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300;400;600;700&display=swap');
-
 body, .gradio-container {
     font-family: 'Source Sans Pro', sans-serif !important;
     color: #333333;
 }
-
 h1 {
     font-weight: 700 !important;
     color: #2c6bb3 !important;
     font-size: 2.5rem !important;
     margin-bottom: 1rem !important;
 }
-
 h2 {
     font-weight: 600 !important;
     color: #4e8fd1 !important;
@@ -458,16 +455,13 @@ h2 {
     margin-top: 1rem !important;
     margin-bottom: 0.75rem !important;
 }
-
 .gradio-button.primary {
     background-color: #ff7518 !important;
 }
-
 .gradio-button.secondary {
     background-color: #5a87ca !important;
     color: white !important;
 }
-
 .info-box {
     background-color: #e8f4fd;
     border-left: 4px solid #2c6bb3;
@@ -475,7 +469,6 @@ h2 {
     margin: 15px 0;
     border-radius: 4px;
 }
-
 .file-upload-box {
     border: 2px dashed #e0e0e0;
     border-radius: 8px;
@@ -483,14 +476,12 @@ h2 {
     text-align: center;
     transition: all 0.3s ease;
 }
-
 /* Fix for map container spacing */
 #map-container {
     height: 20vh !important;
     margin-bottom: 0 !important;
     padding-bottom: 0 !important;
 }
-
 /* Stats box styling */
 .stats-box {
     margin-top: 10px !important;
@@ -499,12 +490,10 @@ h2 {
     background: #f8f9fa;
     border-radius: 4px;
 }
-
 /* Remove extra space around components */
 .gr-box {
     margin-bottom: 0 !important;
 }
-
 /* Model status styling */
 .model-status {
     padding: 10px;
@@ -513,7 +502,6 @@ h2 {
     background-color: #f8f9fa;
     font-size: 14px;
 }
-
 .separator {
     margin: 20px 0;
     border-top: 1px solid #eaeaea;
@@ -527,15 +515,12 @@ 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>
-
   <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>
-
 <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>
@@ -546,8 +531,6 @@ Die Katastrophe in <span style="background-color: #a8e6cf; font-weight: bold; pa
     <span>Andere Orte: London, Peking, China</span>
   </div>
 </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;">
       Methodik: Vom unstrukturierten Text zur strukturierten Information
@@ -584,7 +567,6 @@ Die Katastrophe in <span style="background-color: #a8e6cf; font-weight: bold; pa
       </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>
     
@@ -597,7 +579,6 @@ Die Katastrophe in <span style="background-color: #a8e6cf; font-weight: bold; pa
       <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
@@ -629,15 +610,12 @@ Die Katastrophe in <span style="background-color: #a8e6cf; font-weight: bold; pa
       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>
-
   <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>
-
 </div>
     """)
-
-
+    
     with gr.Tabs() as tabs:
         with gr.TabItem("🔍 Text Extrahierung"):
             gr.HTML("""
@@ -679,93 +657,6 @@ Die Katastrophe in <span style="background-color: #a8e6cf; font-weight: bold; pa
                 inputs=[template, text],
                 outputs=[status, output]
             )
-            
-
-            
-            # Add dateline examples section below the extraction
-            # Note: This HTML block must be properly indented to be within the first tab
-            with gr.Row():
-                gr.HTML("""
-                <div style="margin-top: 30px; border-top: 1px solid #eaeaea; padding-top: 20px;">
-                    <h3 style="color: #4e8fd1; margin-bottom: 15px;">Dateline Examples in International News</h3>
-                    <p style="margin-bottom: 15px;">Here are some examples of how datelines work in international news reporting:</p>
-                    
-                    <div style="margin-bottom: 20px; padding: 15px; background-color: white; border-left: 4px solid #0066cc; box-shadow: 0 1px 3px rgba(0,0,0,0.1);">
-                        <div style="font-weight: bold; margin-bottom: 8px;">BERLIN — </div>
-                        <div style="color: #444; line-height: 1.5;">
-                            Japanese authorities confirmed at least 12 people died after a magnitude 6.8 earthquake struck the northern island of Hokkaido early Tuesday morning. Rescue operations continue in affected areas, with dozens still reported missing.
-                        </div>
-                        <div style="margin-top: 10px; font-style: italic; color: #666; font-size: 0.9em; border-top: 1px dotted #ddd; padding-top: 8px;">
-                            Example of a Paris newspaper using its Berlin correspondent to report on a Japan earthquake, with a simple location-only dateline.
-                        </div>
-                    </div>
-                    
-                    <div style="margin-bottom: 20px; padding: 15px; background-color: white; border-left: 4px solid #0066cc; box-shadow: 0 1px 3px rgba(0,0,0,0.1);">
-                        <div style="font-weight: bold; margin-bottom: 8px;">BERLIN, May 7, 2025 — </div>
-                        <div style="color: #444; line-height: 1.5;">
-                            Japan's Meteorological Agency has issued a tsunami warning for coastal regions following a strong offshore earthquake. Initial reports indicate waves of up to two meters could reach shorelines within hours.
-                        </div>
-                        <div style="margin-top: 10px; font-style: italic; color: #666; font-size: 0.9em; border-top: 1px dotted #ddd; padding-top: 8px;">
-                            Example with both location and date in the dateline, showing more complete dateline format.
-                        </div>
-                    </div>
-                    
-                    <div style="margin-bottom: 20px; padding: 15px; background-color: white; border-left: 4px solid #0066cc; box-shadow: 0 1px 3px rgba(0,0,0,0.1);">
-                        <div style="font-weight: bold; margin-bottom: 8px;">BERLIN (AFP) — </div>
-                        <div style="color: #444; line-height: 1.5;">
-                            Economic impacts from last week's devastating earthquake in Japan have begun affecting global markets, with automotive supply chains particularly disrupted as several key parts manufacturers remain offline.
-                        </div>
-                        <div style="margin-top: 10px; font-style: italic; color: #666; font-size: 0.9em; border-top: 1px dotted #ddd; padding-top: 8px;">
-                            Example showing a dateline that includes the news agency source (AFP) along with the reporting location.
-                        </div>
-                    </div>
-                    
-                    <div style="margin-bottom: 20px; padding: 15px; background-color: white; border-left: 4px solid #0066cc; box-shadow: 0 1px 3px rgba(0,0,0,0.1);">
-                        <div style="font-weight: bold; margin-bottom: 8px;">BERLIN/TOKYO — </div>
-                        <div style="color: #444; line-height: 1.5;">
-                            German Chancellor [Name] pledged humanitarian assistance today as Japanese officials announced the death toll from yesterday's earthquake has risen to 37. "Germany stands ready to provide whatever aid our Japanese friends request," the Chancellor stated at a Berlin press conference.
-                        </div>
-                        <div style="margin-top: 10px; font-style: italic; color: #666; font-size: 0.9em; border-top: 1px dotted #ddd; padding-top: 8px;">
-                            Example of a dual location dateline, indicating reporting from both Berlin and Tokyo.
-                        </div>
-                    </div>
-                    
-                    <div style="margin-bottom: 20px; padding: 15px; background-color: white; border-left: 4px solid #0066cc; box-shadow: 0 1px 3px rgba(0,0,0,0.1);">
-                        <div style="font-weight: bold; margin-bottom: 8px;">BERLIN (Le Monde) — </div>
-                        <div style="color: #444; line-height: 1.5;">
-                            The powerful 7.2-magnitude earthquake that struck Japan's coastal regions yesterday has prompted international response, with the European Union mobilizing its emergency resources. Tokyo officials report widespread damage to infrastructure and at least 25 casualties.
-                        </div>
-                        <div style="margin-top: 10px; font-style: italic; color: #666; font-size: 0.9em; border-top: 1px dotted #ddd; padding-top: 8px;">
-                            Example of a French newspaper (Le Monde) with its Berlin correspondent reporting on the Japan earthquake.
-                        </div>
-                    </div>
-                    
-                    <div style="margin-bottom: 20px; padding: 15px; background-color: white; border-left: 4px solid #0066cc; box-shadow: 0 1px 3px rgba(0,0,0,0.1);">
-                        <div style="font-weight: bold; margin-bottom: 8px;">BERLIN, For Le Figaro — </div>
-                        <div style="color: #444; line-height: 1.5;">
-                            Japanese Prime Minister [Name] declared a state of emergency following Tuesday's earthquake. German seismologists at the Potsdam Institute note this is the strongest seismic event in the region since 2011.
-                        </div>
-                        <div style="margin-top: 10px; font-style: italic; color: #666; font-size: 0.9em; border-top: 1px dotted #ddd; padding-top: 8px;">
-                            Example showing alternative format with newspaper name (Le Figaro) incorporated in the dateline.
-                        </div>
-                    </div>
-                </div>
-                """)
-        
-        # Second tab starts here with proper indentation
-        with gr.TabItem("📍 Visualisierung von strukturierten Daten"):
-            gr.HTML("""
-            <div class="info-box">
-                <h3 style="margin-top: 0;">Visualisieren Sie Daten auf Karten</h3>
-                <p>Laden Sie eine Excel-Tabelle hoch und erstelle eine interaktive Karte.</p>
-            </div>
-            """)
-             
-        
-   
-
-
-    with gr.TabItem("📍 Visualisierung von strukturierten Daten"):
         
         with gr.TabItem("📍 Visualisierung von strukturierten Daten"):
             gr.HTML("""