Update app.py

app.py

@@ -1,110 +1,151 @@
-import os
-import googlemaps
-import pandas as pd
-import folium
-import gradio as gr
-from tempfile import NamedTemporaryFile
-
-# ===============================
-# 1. Google Maps API client
-# ===============================
-API_KEY = os.getenv("GOOGLE_MAPS_API_KEY")
-if API_KEY is None:
-    raise ValueError("GOOGLE_MAPS_API_KEY not found in environment variables")
-
-gmaps = googlemaps.Client(key=API_KEY)
-
-# ===============================
-# 2. Data collection
-# ===============================
-def fetch_hawaiian_pizza_seoul():
-    query = "Hawaiian pizza in Seoul"
-    results = []
-    response = gmaps.places(query=query, language="ko")
-
-    while True:
-        for r in response["results"]:
-            results.append({
-                "name": r.get("name"),
-                "address": r.get("formatted_address"),
-                "rating": r.get("rating", 0),
-                "lat": r["geometry"]["location"]["lat"],
-                "lng": r["geometry"]["location"]["lng"],
-            })
-
-        if "next_page_token" not in response:
-            break
-
-        import time
-        time.sleep(2)
-        response = gmaps.places(
-            page_token=response["next_page_token"],
-            language="ko"
-        )
-
-    return pd.DataFrame(results)
-
-# 캐시 (Spaces 재시작 전까지 유지)
-DATA = fetch_hawaiian_pizza_seoul()
-
-# ===============================
-# 3. Map generator
-# ===============================
-def generate_map(min_rating):
-    df = DATA[DATA["rating"] >= min_rating]
-
-    m = folium.Map(
-        location=[37.5665, 126.9780],
-        zoom_start=11,
-        tiles="OpenStreetMap"
-    )
-
-    for _, r in df.iterrows():
-        folium.Marker(
-            [r.lat, r.lng],
-            popup=f"""
-            <b>{r.name}</b><br>
-            ⭐ {r.rating}<br>
-            {r.address}
-            """,
-            icon=folium.Icon(icon="cutlery", prefix="fa")
-        ).add_to(m)
-
-    tmp = NamedTemporaryFile(delete=False, suffix=".html")
-    m.save(tmp.name)
-
-    with open(tmp.name, "r", encoding="utf-8") as f:
-        return f.read()
-
-# ===============================
-# 4. Gradio UI
-# ===============================
-with gr.Blocks() as demo:
-    gr.Markdown("""
-    # 🍍 서울 하와이안 피자 지도  
-    Google Maps 데이터를 기반으로 한 하와이안 피자 식당 지도
-    """)
-
-    rating = gr.Slider(
-        minimum=0,
-        maximum=5,
-        value=3.5,
-        step=0.1,
-        label="최소 평점"
-    )
-
-    map_html = gr.HTML()
-
-    rating.change(
-        fn=generate_map,
-        inputs=rating,
-        outputs=map_html
-    )
-
-    demo.load(
-        fn=generate_map,
-        inputs=rating,
-        outputs=map_html
-    )
-
-demo.launch()
+import os
+import googlemaps
+import pandas as pd
+import folium
+import gradio as gr
+from tempfile import NamedTemporaryFile
+import time
+
+# ===============================
+# 1. Google Maps API
+# ===============================
+API_KEY = os.getenv("GOOGLE_MAPS_API_KEY")
+if API_KEY is None:
+    raise ValueError("GOOGLE_MAPS_API_KEY not found")
+
+gmaps = googlemaps.Client(key=API_KEY)
+
+# ===============================
+# 2. Data fetch
+# ===============================
+def fetch_places():
+    query = "Hawaiian pizza in Seoul"
+    results = []
+    response = gmaps.places(query=query, language="ko")
+
+    while True:
+        for r in response["results"]:
+            results.append({
+                "name": r.get("name"),
+                "address": r.get("formatted_address"),
+                "rating": r.get("rating", 0),
+                "lat": r["geometry"]["location"]["lat"],
+                "lng": r["geometry"]["location"]["lng"],
+            })
+
+        if "next_page_token" not in response:
+            break
+
+        time.sleep(2)
+        response = gmaps.places(
+            page_token=response["next_page_token"],
+            language="ko"
+        )
+
+    return pd.DataFrame(results)
+
+DATA = fetch_places()
+
+# ===============================
+# 3. Map rendering
+# ===============================
+def render_map(min_rating):
+    df = DATA[DATA["rating"] >= min_rating]
+
+    m = folium.Map(
+        location=[37.5665, 126.9780],
+        zoom_start=11,
+        tiles="CartoDB positron"
+    )
+
+    for _, r in df.iterrows():
+        folium.Marker(
+            [r.lat, r.lng],
+            popup=f"""
+            <div style="font-size:13px">
+            <b>{r.name}</b><br>
+            ⭐ {r.rating}<br>
+            {r.address}
+            </div>
+            """
+        ).add_to(m)
+
+    tmp = NamedTemporaryFile(delete=False, suffix=".html")
+    m.save(tmp.name)
+
+    with open(tmp.name, "r", encoding="utf-8") as f:
+        return f.read()
+
+# ===============================
+# 4. UI
+# ===============================
+CSS = """
+#title {
+    font-size: 28px;
+    font-weight: 700;
+    margin-bottom: 0.2em;
+}
+#subtitle {
+    color: #666;
+    margin-bottom: 1.5em;
+}
+.card {
+    background: white;
+    border-radius: 12px;
+    padding: 16px;
+    box-shadow: 0 4px 14px rgba(0,0,0,0.06);
+}
+"""
+
+with gr.Blocks(css=CSS) as demo:
+    # ---------- Header ----------
+    gr.Markdown(
+        """
+        <div id="title">🍍 서울 하와이안 피자 지도</div>
+        <div id="subtitle">
+        Google Maps 기반 · 평점 필터링 가능
+        </div>
+        """,
+        elem_id="header"
+    )
+
+    with gr.Row():
+        # ---------- Left panel ----------
+        with gr.Column(scale=1):
+            with gr.Group(elem_classes="card"):
+                gr.Markdown("### 🔎 필터")
+
+                rating = gr.Slider(
+                    minimum=0,
+                    maximum=5,
+                    value=3.5,
+                    step=0.1,
+                    label="최소 평점"
+                )
+
+                count = gr.Markdown()
+
+        # ---------- Right panel ----------
+        with gr.Column(scale=3):
+            with gr.Group(elem_classes="card"):
+                map_html = gr.HTML()
+
+    # ---------- Logic ----------
+    def update(min_rating):
+        html = render_map(min_rating)
+        n = (DATA["rating"] >= min_rating).sum()
+        return html, f"**{n}개 매장 표시 중**"
+
+    rating.change(
+        fn=update,
+        inputs=rating,
+        outputs=[map_html, count]
+    )
+
+    demo.load(
+        fn=update,
+        inputs=rating,
+        outputs=[map_html, count]
+    )
+
+demo.launch()