Update app.py

app.py

@@ -678,31 +678,79 @@ Die Katastrophe in <span style="background-color: #a8e6cf; font-weight: bold; pa
                 inputs=[template, text],
                 outputs=[status, output]
             )
-        
             
-
-    # Add your dateline examples here:
-            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.
+            # 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-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 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>
-                
-                <!-- Add other examples here -->
-                
-            </div>
-            """)
+                """)
+        
+   
 
-# This goes before:
 with gr.TabItem("📍 Visualisierung von strukturierten Daten"):
 
 # This goes before: