app.py

import gradio as gr
import json
import requests
import os
import pandas as pd
import folium
from folium.plugins import MeasureControl, Fullscreen, MarkerCluster
from geopy.geocoders import Nominatim
from geopy.exc import GeocoderTimedOut, GeocoderServiceError
import time
import random
from typing import List, Tuple, Optional
import io
import tempfile
import warnings

warnings.filterwarnings("ignore")

# Map Tile Providers with reliable sources
MAP_TILES = {
    "GreenMap": {
        "url": "https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}",
        "attr": "Esri"
    }
}

# NuExtract API configuration
API_URL = "https://api-inference.huggingface.co/models/numind/NuExtract-1.5"
headers = {"Authorization": f"Bearer {os.environ.get('HF_TOKEN', '')}"}

class SafeGeocoder:
    def __init__(self):
        user_agent = f"location_mapper_v1_{random.randint(1000, 9999)}"
        self.geolocator = Nominatim(user_agent=user_agent, timeout=10)
        self.cache = {}
        self.last_request = 0
    
    def _respect_rate_limit(self):
        current_time = time.time()
        elapsed = current_time - self.last_request
        if elapsed < 1.0:
            time.sleep(1.0 - elapsed)
        self.last_request = time.time()
    
    def get_coords(self, location: str):
        if not location or pd.isna(location):
            return None
            
        location = str(location).strip()
        
        if location in self.cache:
            return self.cache[location]
        
        try:
            self._respect_rate_limit()
            result = self.geolocator.geocode(location)
            if result:
                coords = (result.latitude, result.longitude)
                self.cache[location] = coords
                return coords
            self.cache[location] = None
            return None
        except Exception as e:
            print(f"Geocoding error for '{location}': {e}")
            self.cache[location] = None
            return None

# Function to just load the model
def load_model():
    try:
        # Send a minimal request just to trigger model loading
        payload = {
            "inputs": "<|input|>\n### Template:\n{\"test\": \"\"}\n### Text:\ntest\n\n<|output|>",
            "parameters": {
                "max_new_tokens": 10,
                "do_sample": False
            }
        }
        
        response = requests.post(API_URL, headers=headers, json=payload)
        
        if response.status_code == 503:
            response_json = response.json()
            if "error" in response_json and "loading" in response_json["error"]:
                estimated_time = response_json.get("estimated_time", "unknown")
                return f"⏳ Modell lädt... (ca. {int(float(estimated_time)) if isinstance(estimated_time, (int, float, str)) else 'unbekannt'} Sekunden)"
        
        if response.status_code != 200:
            return f"❌ API Fehler: {response.status_code}"
            
        return "✅ Modell erfolgreich geladen! Sie können jetzt mit der Extraktion beginnen."
    except Exception as e:
        return f"❌ Fehler: {str(e)}"

def extract_info(template, text):
    try:
        prompt = f"<|input|>\n### Template:\n{template}\n### Text:\n{text}\n\n<|output|>"
        
        payload = {
            "inputs": prompt,
            "parameters": {
                "max_new_tokens": 1000,
                "do_sample": False
            }
        }
        
        response = requests.post(API_URL, headers=headers, json=payload)
        
        if response.status_code == 503:
            response_json = response.json()
            if "error" in response_json and "loading" in response_json["error"]:
                estimated_time = response_json.get("estimated_time", "unknown")
                return f"⏳ Modell lädt... (ca. {int(float(estimated_time)) if isinstance(estimated_time, (int, float, str)) else 'unbekannt'} Sekunden)", "Bitte versuchen Sie es in einigen Minuten erneut oder nutzen Sie den 'Modell laden' Button"
        
        if response.status_code != 200:
            return f"❌ API Fehler: {response.status_code}", response.text
        
        result = response.json()
        
        if isinstance(result, list) and len(result) > 0:
            result_text = result[0].get("generated_text", "")
        else:
            result_text = str(result)
        
        if "<|output|>" in result_text:
            json_text = result_text.split("<|output|>")[1].strip()
        else:
            json_text = result_text
        
        try:
            extracted = json.loads(json_text)
            formatted = json.dumps(extracted, indent=2)
        except json.JSONDecodeError:
            return "❌ JSON Parsing Fehler", json_text
            
        return "✅ Erfolgreich extrahiert", formatted
    except Exception as e:
        return f"❌ Fehler: {str(e)}", "{}"

def create_map(df, location_col):
    m = folium.Map(
        location=[20, 0],
        zoom_start=2, 
        control_scale=True
    )
    
    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)
    
    geocoder = SafeGeocoder()
    coords = []
    marker_cluster = MarkerCluster(name="Locations").add_to(m)
    processed_count = 0
    
    for idx, row in df.iterrows():
        if pd.isna(row[location_col]):
            continue
            
        location = str(row[location_col]).strip()
        
        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]}"
        
        try:
            locations = [loc.strip() for loc in location.split(',') if loc.strip()]
            if not locations:
                locations = [location]
        except:
            locations = [location]
            
        for loc in locations:
            point = geocoder.get_coords(loc)
            if point:
                popup_content = f"""
                <div style="min-width: 200px; max-width: 300px">
                    <h4 style="font-family: 'Source Sans Pro', sans-serif; margin-bottom: 5px;">{loc}</h4>
                    <div style="font-family: 'Source Sans Pro', sans-serif; font-size: 14px;">
                        {additional_info}
                    </div>
                </div>
                """
                
                folium.Marker(
                    location=point,
                    popup=folium.Popup(popup_content, max_width=300),
                    tooltip=loc,
                    icon=folium.Icon(color="blue", icon="info-sign")
                ).add_to(marker_cluster)
                
                coords.append(point)
                processed_count += 1
    
    if coords:
        m.fit_bounds(coords)
    
    custom_css = """
    <style>
    @import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600&display=swap');
    .leaflet-container {
        font-family: 'Source Sans Pro', sans-serif;
    }
    .leaflet-popup-content {
        font-family: 'Source Sans Pro', sans-serif;
    }
    .leaflet-popup-content h4 {
        font-weight: 600;
        margin-bottom: 8px;
    }
    </style>
    """
    m.get_root().header.add_child(folium.Element(custom_css))
    
    return m._repr_html_(), processed_count

def process_excel(file, places_column):
    if file is None:
        return None, "No file uploaded", None
    
    try:
        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)
        
        print(f"Spalten in der Excel-Tabelle: {list(df.columns)}")
        
        if places_column not in df.columns:
            return None, f"Spalte '{places_column}' wurde in der Excel-Datei nicht gefunden. Verfügbare Spalten: {', '.join(df.columns)}", None
        
        map_html, processed_count = create_map(df, places_column)
        
        with tempfile.NamedTemporaryFile(suffix=".xlsx", delete=False) as tmp:
            processed_path = tmp.name
            df.to_excel(processed_path, index=False)
        
        total_locations = df[places_column].count()
        success_rate = (processed_count / total_locations * 100) if total_locations > 0 else 0
        
        stats = f"Gefunden: {processed_count} von {total_locations} Orten ({success_rate:.1f}%)"
        
        return map_html, stats, processed_path
    except Exception as e:
        import traceback
        trace = traceback.format_exc()
        print(f"Error processing file: {e}\n{trace}")
        return None, f"Fehler bei der Verarbeitung der Datei: {str(e)}", None

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;
    font-size: 1.5rem !important;
    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;
    padding: 15px;
    margin: 15px 0;
    border-radius: 4px;
}

.file-upload-box {
    border: 2px dashed #e0e0e0;
    border-radius: 8px;
    padding: 20px;
    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;
    margin-bottom: 0 !important;
    padding: 10px;
    background: #f8f9fa;
    border-radius: 4px;
}

/* Remove extra space around components */
.gr-box {
    margin-bottom: 0 !important;
}

/* Model status styling */
.model-status {
    padding: 10px;
    border-radius: 4px;
    margin-bottom: 15px;
    background-color: #f8f9fa;
    font-size: 14px;
}

.separator {
    margin: 20px 0;
    border-top: 1px solid #eaeaea;
}
</style>
"""

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;">

  <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 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;">
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. 
</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>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>Andere Orte: London, Osaka, Tokio, Suvamo, Gotemba.</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
    </h3>
    
    <p style="margin-bottom: 1.8rem; font-size: 1.2rem;">
      Die grundlegende Herausforderung bei der Arbeit mit historischen Quellen ist, dass relevante Informationen in langen 
      Fließtexten eingebettet sind und manuell mühsam extrahiert werden müssen. Dieser Ansatz automatisiert diesen Prozess.
    </p>
    
    <h4 style="color: #2980b9; margin-top: 2rem; font-size: 1.35rem;">Wie funktioniert die Informationsextraktion?</h4>
    
    <ol style="padding-left: 2rem; font-size: 1.15rem;">
      <li style="margin-bottom: 1.5rem;">
        <strong style="color: #2c3e50; font-size: 1.2rem;">Template-Definition</strong>: Sie definieren ein JSON-Template mit den Informationstypen, die Sie extrahieren möchten:
        <pre style="background: #f5f5f5; padding: 1.2rem; border-radius: 6px; overflow-x: auto; margin: 1rem 0 1.5rem; font-size: 1.1rem;"><code>{"earthquake location": "", "dateline location": ""}</code></pre>
      </li>
      
      <li style="margin-bottom: 1.5rem;">
        <strong style="color: #2c3e50; font-size: 1.2rem;">Question-Answering-Methode</strong>: Das Sprachmodell interpretiert jedes leere Feld als implizite Frage:
        <ul style="margin-top: 1rem; padding-left: 2rem; font-size: 1.15rem;">
          <li style="margin-bottom: 0.8rem;"><code style="background: #f0f0f0; padding: 0.3rem 0.5rem; border-radius: 4px; font-size: 1.1rem;">"earthquake location": ""</code> → "Wo ist das Erdbeben passiert?"</li>
          <li style="margin-bottom: 0.8rem;"><code style="background: #f0f0f0; padding: 0.3rem 0.5rem; border-radius: 4px; font-size: 1.1rem;">"dateline location": ""</code> → "Von wo wird berichtet?"</li>
        </ul>
      </li>
      
      <li style="margin-bottom: 1.5rem;">
        <strong style="color: #2c3e50; font-size: 1.2rem;">Sprachmodell-Verarbeitung</strong>: Das NuExtract-1.5 Modell (ein Sequence-to-Sequence Transformer) analysiert den Text vollständig und identifiziert die relevanten Informationen für jedes Template-Feld.
      </li>
      
      <li style="margin-bottom: 1rem;">
        <strong style="color: #2c3e50; font-size: 1.2rem;">Strukturierte Ausgabe</strong>: Das Modell füllt das Template mit den extrahierten Informationen:
        <pre style="background: #f5f5f5; padding: 1.2rem; border-radius: 6px; overflow-x: auto; margin: 1rem 0 1.5rem; font-size: 1.1rem;"><code>{"earthquake location": "Japan, Yokohama", "dateline location": "Tokio"}</code></pre>
      </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>
    
    <p style="font-size: 1.2rem;">Intern erfolgt die Verarbeitung in mehreren Schritten:</p>
    
    <ol style="padding-left: 2rem; font-size: 1.15rem;">
      <li style="margin-bottom: 1rem;"><strong style="color: #2c3e50; font-size: 1.2rem;">Tokenisierung</strong>: Der Text wird in bearbeitbare Einheiten zerlegt.</li>
      <li style="margin-bottom: 1rem;"><strong style="color: #2c3e50; font-size: 1.2rem;">Kontextuelle Analyse</strong>: Der Transformer-Mechanismus ermöglicht die Analyse von Beziehungen zwischen allen Textteilen gleichzeitig.</li>
      <li style="margin-bottom: 1rem;"><strong style="color: #2c3e50; font-size: 1.2rem;">Selektive Aufmerksamkeit</strong>: Das Modell fokussiert sich auf Textpassagen, die Antworten auf die impliziten Fragen enthalten könnten.</li>
      <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
    </h3>
    
    <p style="margin-bottom: 1.8rem; font-size: 1.2rem;">
      Nach der Extraktion der Ortsangaben ermöglicht unsere Anwendung die automatische Visualisierung dieser Daten auf einer interaktiven Karte:
    </p>
    
    <ol style="padding-left: 2rem; font-size: 1.15rem;">
      <li style="margin-bottom: 1.2rem;">
        <strong style="color: #2c3e50; font-size: 1.2rem;">Geokodierung</strong>: Die extrahierten Ortsnamen werden mittels eines geografischen Dienstes in geografische Koordinaten (Längen- und Breitengrade) umgewandelt.
      </li>
      
      <li style="margin-bottom: 1.2rem;">
        <strong style="color: #2c3e50; font-size: 1.2rem;">Kartenerstellung</strong>: Die Koordinaten werden auf einer interaktiven Karte platziert, wobei jeder Ort durch einen Marker dargestellt wird.
      </li>
      
      <li style="margin-bottom: 1.2rem;">
        <strong style="color: #2c3e50; font-size: 1.2rem;">Kontextinformationen</strong>: Beim Klick auf einen Marker werden zusätzliche Informationen aus dem Originaltext angezeigt.
      </li>
      
      <li style="margin-bottom: 1rem;">
        <strong style="color: #2c3e50; font-size: 1.2rem;">Räumliche Analyse</strong>: Die Karte ermöglicht die visuelle Analyse der räumlichen Verteilung historischer Ereignisse.
      </li>
    </ol>
    
    <p style="font-size: 1.2rem; margin-top: 1.5rem;">
      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("""
            <div class="info-box">
                <h3 style="margin-top: 0;">Extrahieren Sie strukturierte Daten aus unstrukturiertem Text</h3>
                <p>Verwenden Sie das Sprachmodell NuExtract-1.5 um automatisch Informationen zu extrahieren.</p>
            </div>
            """)
            
            # Add model loading button and status at the top
            with gr.Row():
                load_btn = gr.Button("Modell laden (1. Schritt)", variant="secondary")
                model_status = gr.Textbox(
                    label="Modell Status", 
                    value="Modell nicht geladen. Bitte zuerst das Modell laden, um Verzögerungen zu vermeiden.",
                    elem_classes="model-status"
                )
            
            # Connect loading button
            load_btn.click(
                fn=load_model,
                inputs=[],
                outputs=[model_status]
            )
            
            gr.HTML("""<div class="separator"></div>""")
            
            with gr.Row():
                with gr.Column():
                    template = gr.Textbox(
                        label="JSON Template", 
                        value='{"earthquake location": "", "dateline location": ""}',
                        lines=5
                    )
                    text = gr.Textbox(
                        label="Hier unstrukturierten Text einfügen",
                        value="Nene Erdbeben in Japan. London, 15. Jan. (Drahtber.) Reuter meldet aus Osaka: Die telephonische Verbindung zwischen Osaka und Tokio ist heute um 5.45 Uhr durch ein Erdbeben unterbrochen worden. Die Straßenbahnen in Tokio liegen still. Der Eisenbahnverkehr Tokio — Osaka ist unterbrochen. Die kaiserliche Familie ist in Sicherheit. In Suvamo, einer Borstadt Tokios, sind Brände ausgebrochen. Ein Eisenbahnzug stürzte in den Bajubawo, einem Fluß zwischen Gotemba und Tokio. Sechs Züge wurden umgeworfen. Nenqork, 15. Jan. (Drahtber.) Aus Tokio wird berichtet, daß in Uokohama bei dem Erdbeben sechs Personen getötet und 22 verletzt wurden. In Tokio wurden vier Personen getötet und 20 verletzt. In Nokohama wurden 800 Häuser zerstört.",
                        lines=8
                    )
                    extract_btn = gr.Button("Extrahieren Sie Informationen (2. Schritt)", variant="primary")
                
                with gr.Column():
                    status = gr.Textbox(label="Status")
                    output = gr.Textbox(label="Output", lines=10)
            
            extract_btn.click(
                fn=extract_info,
                inputs=[template, text],
                outputs=[status, output]
            )
        
        with gr.TabItem("📍 Mapping 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.Row():
                with gr.Column():
                    excel_file = gr.File(
                        label="Upload Excel File",
                        file_types=[".xlsx", ".xls"],
                        elem_classes="file-upload-box"
                    )
                    places_column = gr.Textbox(
                        label="Name der Tabellenspalte mit Ortsname",
                        value="earthquake_location",
                        placeholder="Füge den Namen der Spalte mit den Orten ein"
                    )
                    process_btn = gr.Button("Erstellen Sie die Karte", variant="primary")
                
                with gr.Column():
                    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"
                    )
                    stats_output = gr.Textbox(
                        label="Status",
                        lines=2,
                        elem_classes="stats-box"
                    )
                    processed_file = gr.File(
                        label="Bearbeitete Daten herunterladen",
                        visible=True,
                        interactive=False
                    )
            
            def process_and_map(file, column):
                if file is None:
                    return None, "Hier bitte die Excel-Tabelle hochladen", None
                
                try:
                    map_html, stats, processed_path = process_excel(file, column)
                    
                    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()
                    print(f"Error in process_and_map: {e}\n{trace}")
                    return None, f"Error: {str(e)}", None
            
            process_btn.click(
                fn=process_and_map,
                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;">
        <p>Made with <span style="color: #e25555;">❤</span> for historical research</p>
    </div>
    """)

if __name__ == "__main__":
    demo.launch()