Update app.py

app.py

@@ -347,124 +347,84 @@ def extract_info(template, text):
         print(f"Error in extract_info: {e}\n{trace}")
         return f"❌ Fehler: {str(e)}", "{}"
 @spaces.GPU
-
-# Instead of using folium directly with Gradio's HTML component,
-# try this alternative approach using Plotly for maps
-
-def create_map_plotly(df, location_col):
-    """
-    Creates an interactive map using Plotly instead of Folium
-    which should be more stable in Gradio applications
-    """
-    import plotly.graph_objects as go
-    import pandas as pd
+@spaces.GPU
+def create_map(df, location_col):
+    # Start a simple log to track execution
+    with open("map_debug.log", "w") as log:
+        log.write(f"Starting map creation at {time.strftime('%Y-%m-%d %H:%M:%S')}\n")
+    
+    m = folium.Map(
+        location=[20, 0],
+        zoom_start=2, 
+        control_scale=True
+    )
     
-    # Track processing for debugging
-    print(f"Processing {len(df)} rows with location column: {location_col}")
+    folium.TileLayer(
+        tiles=MAP_TILES["GreenMap"]["url"],
+        attr=MAP_TILES["GreenMap"]["attr"],
+        name="GreenMap",
+        overlay=False,
+        control=False
+    ).add_to(m)
+    
+    Fullscreen().add_to(m)
+    MeasureControl(position='topright', primary_length_unit='kilometers').add_to(m)
     
-    # Initialize geocoder and tracking variables
     geocoder = SafeGeocoder()
+    coords = []
+    marker_cluster = MarkerCluster(name="Locations").add_to(m)
     processed_count = 0
-    all_lats = []
-    all_lons = []
-    hover_texts = []
     
-    # Process each row
+    with open("map_debug.log", "a") as log:
+        log.write(f"Processing {len(df)} rows from dataframe\n")
+    
     for idx, row in df.iterrows():
         if pd.isna(row[location_col]):
             continue
             
         location = str(row[location_col]).strip()
         
-        # Build additional info for hover text
+        # Log the location being processed
+        with open("map_debug.log", "a") as log:
+            log.write(f"Processing location: {location}\n")
+        
         additional_info = ""
         for col in df.columns:
             if col != location_col and not pd.isna(row[col]):
                 additional_info += f"<br><b>{col}:</b> {row[col]}"
         
-        # Split location if it contains multiple comma-separated places
         try:
             locations = [loc.strip() for loc in location.split(',') if loc.strip()]
             if not locations:
                 locations = [location]
         except Exception as e:
-            print(f"Error splitting location '{location}': {str(e)}")
+            with open("map_debug.log", "a") as log:
+                log.write(f"Error splitting location '{location}': {str(e)}\n")
             locations = [location]
+        
+        # Log the parsed locations
+        with open("map_debug.log", "a") as log:
+            log.write(f"Split into locations: {locations}\n")
             
-        # Process each individual location
         for loc in locations:
             try:
-                # Get coordinates
+                # Log the current location
+                with open("map_debug.log", "a") as log:
+                    log.write(f"Getting coordinates for: {loc}\n")
+                
                 point = geocoder.get_coords(loc)
                 
-                if point:
-                    lat, lon = point
-                    all_lats.append(lat)
-                    all_lons.append(lon)
-                    
-                    # Create hover text with location name and info
-                    hover_text = f"<b>{loc}</b>{additional_info}"
-                    hover_texts.append(hover_text)
                     
-                    processed_count += 1
             except Exception as e:
-                print(f"Error processing location {loc}: {str(e)}")
+                # Log any errors in processing this location
+                with open("map_debug.log", "a") as log:
+                    log.write(f"Error processing {loc}: {str(e)}\n")
+                    log.write(traceback.format_exc() + "\n")
+    
+    # Fit map bounds if we have coordinates
+    if coords:
+        m.fit_bounds(coords)
     
-    # Create Plotly map
-    if len(all_lats) > 0:
-        fig = go.Figure()
-        
-        # Add scatter mapbox points
-        fig.add_trace(go.Scattermapbox(
-            lat=all_lats,
-            lon=all_lons,
-            mode='markers',
-            marker=go.scattermapbox.Marker(
-                size=10,
-                color='blue'
-            ),
-            text=hover_texts,
-            hoverinfo="text"
-        ))
-        
-        # Configure map layout
-        fig.update_layout(
-            mapbox_style="open-street-map",
-            mapbox=dict(
-                center={"lat": sum(all_lats)/len(all_lats) if all_lats else 20, 
-                        "lon": sum(all_lons)/len(all_lons) if all_lons else 0},
-                zoom=3
-            ),
-            margin={"r":0,"t":0,"l":0,"b":0},
-            height=600
-        )
-        
-        return fig, processed_count
-    else:
-        # Create empty figure if no coordinates found
-        fig = go.Figure()
-        fig.update_layout(
-            mapbox_style="open-street-map",
-            mapbox=dict(
-                center={"lat": 20, "lon": 0},
-                zoom=2
-            ),
-            margin={"r":0,"t":0,"l":0,"b":0},
-            height=600,
-            annotations=[
-                dict(
-                    text="No locations found to display",
-                    showarrow=False,
-                    xref="paper",
-                    yref="paper",
-                    x=0.5,
-                    y=0.5
-                )
-            ]
-        )
-        return fig, 0
-
-
     # Custom CSS for map
     custom_css = """
     <style>
@@ -588,30 +548,62 @@ 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>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;">
-        <h3 style="color: #2c6bb3; margin-top: 0; margin-bottom: 15px; font-size: 1.3rem;">Kurz erklärt: Was macht diese Anwendung?</h3>
+    <div style="font-family: 'Source Sans Pro', sans-serif; max-width: 1000px; margin: 0 auto; color: #333;">
+      <!-- Header Section with Improved Styling -->
+      <div style="text-align: center; margin-bottom: 2rem; background: linear-gradient(135deg, #2c6bb3 0%, #4e8fd1 100%); padding: 2rem; border-radius: 10px; color: white;">
+        <h1 style="margin: 0; font-size: 2.5rem; font-weight: 700;">Strukturierung und Visualisierung von historischen Daten</h1>
+      </div>
+      
+      <!-- Quick Summary Box -->
+      <div style="background-color: #f8f9fa; padding: 1.5rem; border-radius: 8px; margin-bottom: 2rem; border-left: 5px solid #4e8fd1; box-shadow: 0 2px 10px rgba(0,0,0,0.05);">
+        <h3 style="color: #2c6bb3; margin-top: 0; margin-bottom: 15px; font-size: 1.4rem;">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 style="margin-bottom: 15px; font-size: 1.1rem; line-height: 1.5;">
+            <strong style="color: #2c6bb3;">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 style="margin-bottom: 15px; font-size: 1.1rem; line-height: 1.5;">
+            <strong style="color: #2c6bb3;">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 style="margin-bottom: 15px; font-size: 1.1rem; line-height: 1.5;">
+            <strong style="color: #2c6bb3;">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 style="margin-bottom: 0; font-size: 1.1rem; line-height: 1.5;">
+            <strong style="color: #2c6bb3;">Forschungshilfe:</strong> Organisiert historische Daten zu strukturierten, leicht analysierbaren Informationen.
           </li>
         </ol>
       </div>
+      
+      <!-- Main Explanation Section -->
+      <div style="line-height: 1.7; font-size: 1.15rem; margin-bottom: 2rem;">
+        <p style="font-size: 1.2rem; margin-bottom: 1.5rem; color: #2c3e50; font-weight: 400; padding: 0 1rem; line-height: 1.8;">
+          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>
+      
+      <!-- Example Section with Improved Styling -->
+      <div style="line-height: 1.7; font-size: 1.15rem; background: #f8f9fa; padding: 1.5rem; border-radius: 8px; margin: 2rem 0; box-shadow: 0 2px 10px rgba(0,0,0,0.05); border: 1px solid #e8e8e8;">
+        <h3 style="color: #2c6bb3; margin-top: 0; margin-bottom: 15px;">Beispiel einer Textanalyse</h3>
+        
+        <div style="background-color: white; padding: 1.5rem; border-radius: 6px; font-family: 'Source Sans Pro', sans-serif; line-height: 1.7;">
+          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>
+        
+        <!-- Legend with Improved Layout -->
+        <div style="display: flex; margin-top: 20px; flex-wrap: wrap; justify-content: flex-start;">
+          <div style="display: flex; align-items: center; margin-right: 30px; margin-bottom: 10px;">
+            <div style="width: 20px; height: 20px; background-color: #a8e6cf; margin-right: 10px; border-radius: 3px;"></div>
+            <span style="font-weight: 600;">Ort des Erdbebens: Japan</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 style="font-weight: 600;">Andere Orte: London, Peking, China</span>
+          </div>
+        </div>
+      </div>
     </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;">
@@ -805,124 +797,6 @@ Die Katastrophe in <span style="background-color: #a8e6cf; font-weight: bold; pa
                 """)
         
     
-            # Instead of using folium directly with Gradio's HTML component,
-# try this alternative approach using Plotly for maps
-
-def create_map_plotly(df, location_col):
-    """
-    Creates an interactive map using Plotly instead of Folium
-    which should be more stable in Gradio applications
-    """
-    import plotly.graph_objects as go
-    import pandas as pd
-    
-    # Track processing for debugging
-    print(f"Processing {len(df)} rows with location column: {location_col}")
-    
-    # Initialize geocoder and tracking variables
-    geocoder = SafeGeocoder()
-    processed_count = 0
-    all_lats = []
-    all_lons = []
-    hover_texts = []
-    
-    # Process each row
-    for idx, row in df.iterrows():
-        if pd.isna(row[location_col]):
-            continue
-            
-        location = str(row[location_col]).strip()
-        
-        # Build additional info for hover text
-        additional_info = ""
-        for col in df.columns:
-            if col != location_col and not pd.isna(row[col]):
-                additional_info += f"<br><b>{col}:</b> {row[col]}"
-        
-        # Split location if it contains multiple comma-separated places
-        try:
-            locations = [loc.strip() for loc in location.split(',') if loc.strip()]
-            if not locations:
-                locations = [location]
-        except Exception as e:
-            print(f"Error splitting location '{location}': {str(e)}")
-            locations = [location]
-            
-        # Process each individual location
-        for loc in locations:
-            try:
-                # Get coordinates
-                point = geocoder.get_coords(loc)
-                
-                if point:
-                    lat, lon = point
-                    all_lats.append(lat)
-                    all_lons.append(lon)
-                    
-                    # Create hover text with location name and info
-                    hover_text = f"<b>{loc}</b>{additional_info}"
-                    hover_texts.append(hover_text)
-                    
-                    processed_count += 1
-            except Exception as e:
-                print(f"Error processing location {loc}: {str(e)}")
-    
-    # Create Plotly map
-    if len(all_lats) > 0:
-        fig = go.Figure()
-        
-        # Add scatter mapbox points
-        fig.add_trace(go.Scattermapbox(
-            lat=all_lats,
-            lon=all_lons,
-            mode='markers',
-            marker=go.scattermapbox.Marker(
-                size=10,
-                color='blue'
-            ),
-            text=hover_texts,
-            hoverinfo="text"
-        ))
-        
-        # Configure map layout
-        fig.update_layout(
-            mapbox_style="open-street-map",
-            mapbox=dict(
-                center={"lat": sum(all_lats)/len(all_lats) if all_lats else 20, 
-                        "lon": sum(all_lons)/len(all_lons) if all_lons else 0},
-                zoom=3
-            ),
-            margin={"r":0,"t":0,"l":0,"b":0},
-            height=600
-        )
-        
-        return fig, processed_count
-    else:
-        # Create empty figure if no coordinates found
-        fig = go.Figure()
-        fig.update_layout(
-            mapbox_style="open-street-map",
-            mapbox=dict(
-                center={"lat": 20, "lon": 0},
-                zoom=2
-            ),
-            margin={"r":0,"t":0,"l":0,"b":0},
-            height=600,
-            annotations=[
-                dict(
-                    text="No locations found to display",
-                    showarrow=False,
-                    xref="paper",
-                    yref="paper",
-                    x=0.5,
-                    y=0.5
-                )
-            ]
-        )
-        return fig, 0
-
-# To use this in your Gradio app, modify your code to use gr.Plot instead of gr.HTML:
-
         with gr.TabItem("📍 Visualisierung von strukturierten Daten"):
             gr.HTML("""
             <div class="info-box">
@@ -956,39 +830,37 @@ def create_map_plotly(df, location_col):
                     )
                 
                 with gr.Column():
-                    # Replace HTML with Plot component
-                    map_output = gr.Plot(
-                        label="Interaktive Karte"
+                    map_output = gr.HTML(
+                        label="Interaktive Karte",
+                        value="""
+                        <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">
+                                <p style="margin-top:20px; color:#666;">Your map will appear here after processing</p>
+                            </div>
+                        </div>
+                        """,
+                        elem_id="map-container"
                     )
+                    
             
-            # Modify your process_and_map function to use the new create_map_plotly function
             def process_and_map(file, column):
                 if file is None:
                     return None, "Hier bitte die Excel-Tabelle hochladen", None
                 
                 try:
-                    # Load the Excel file
-                    if hasattr(file, 'name'):
-                        df = pd.read_excel(file.name)
-                    elif isinstance(file, bytes):
-                        df = pd.read_excel(io.BytesIO(file))
-                    else:
-                        df = pd.read_excel(file)
-                    
-                    if column not in df.columns:
-                        return None, f"Spalte '{column}' wurde in der Excel-Datei nicht gefunden.", None
-                    
-                    # Create map using Plotly
-                    fig, processed_count = create_map_plotly(df, column)
+                    map_html, stats, processed_path = process_excel(file, column)
                     
-                    # Save processed data to Excel
-                    with tempfile.NamedTemporaryFile(suffix=".xlsx", delete=False) as tmp:
-                        processed_path = tmp.name
-                        df.to_excel(processed_path, index=False)
-                    
-                    stats = f"Gefunden: {processed_count} Orte"
-                    
-                    return fig, stats, processed_path
+                    if map_html and processed_path:
+                        responsive_html = f"""
+                        <div style="width:100%; height:20vh; margin:0; padding:0; border:1px solid #e0e0e0; border-radius:8px; overflow:hidden;">
+                            {map_html}
+                        </div>
+                        """
+                        return responsive_html, stats, processed_path
+                    else:
+                        return None, stats, None
                 except Exception as e:
                     import traceback
                     trace = traceback.format_exc()
@@ -1000,7 +872,6 @@ def create_map_plotly(df, location_col):
                 inputs=[excel_file, places_column],
                 outputs=[map_output, stats_output, processed_file]
             )
-"""
     
     gr.HTML("""
     <div style="text-align: center; margin-top: 2rem; padding-top: 1rem; border-top: 1px solid #eee; font-size: 0.9rem; color: #666;">