Spaces:

benjamin5607
/

drunken_plane

Sleeping

App Files Files Community

benjamin5607 commited on Dec 27, 2025

Commit

8e01cf9

verified ·

1 Parent(s): 37dbc4b

Update app.py

Browse files

Files changed (1) hide show

app.py +134 -33

app.py CHANGED Viewed

@@ -82,7 +82,7 @@ db_json_str = json.dumps(PLACE_DB, ensure_ascii=False)
 db_base64 = base64.b64encode(db_json_str.encode('utf-8')).decode('utf-8')
 # ==========================================
-# 🖥️ 3. 통합 프론트엔드 (좀비 순서 최적화)
 # ==========================================
 html_template = """
 <!DOCTYPE html>
@@ -121,18 +121,38 @@ html_template = """
         #world-map-page, #passport-page, #chat-page { background: #000; z-index: 2000; transform: translateY(100%); }
         #passport-page { transform: translateX(-100%); background: #0f0f1b; }
-        #detail-page { background: #0a0a0a; z-index: 4000; transform: translateX(100%); }
-        .nav-bar { height: 60px; display: flex; align-items: center; padding: 0 20px; border-bottom: 1px solid #222; background: #111; }
         .msg { max-width: 85%; padding: 12px 18px; border-radius: 15px; font-size: 14px; line-height: 1.6; margin-bottom: 12px; }
         .msg.bot { align-self: flex-start; background: #222; color: #eee; border: 1px solid #333; }
         .msg.user { align-self: flex-end; background: var(--gold); color: black; font-weight: bold; }
         .reco-btn { display: block; margin-top: 8px; padding: 10px; background: var(--gold); color: black !important; border-radius: 10px; font-weight: bold; text-decoration: none; font-size: 12px; cursor: pointer; border:none; width: 100%; text-align: center; }
-        .popup-btn { background: var(--gold); color: black; border: none; padding: 5px 10px; border-radius: 5px; font-weight: bold; font-size: 11px; cursor: pointer; margin-top: 5px; width: 100%; }
         .leaflet-popup-content-wrapper { background: #1a1a1a; color: white; border: 1px solid var(--gold); }
         .stamp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; padding: 20px; }
         .stamp { height: 90px; border-radius: 15px; border: 2px dashed #333; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 10px; color: #444; background: #161625; }
         .stamp.active { border: 2px solid var(--gold); color: var(--gold); background: rgba(212,175,55,0.05); }
     </style>
 </head>
 <body>
@@ -157,7 +177,15 @@ html_template = """
     </div>
     <div id="passport-page" class="page"><div class="nav-bar"><button onclick="closePassport()">←</button> MY PASSPORT</div><div id="stamp-grid" class="stamp-grid" style="overflow-y:auto;"></div></div>
-    <div id="world-map-page" class="page"><div class="nav-bar"><button onclick="closeMap()">🏠 HOME</button></div><div id="full-map" style="width:100%; height:100%;"></div></div>
     <div id="chat-page" class="page">
         <div class="nav-bar"><button onclick="closeChat()">←</button> Emily</div>
@@ -168,7 +196,23 @@ html_template = """
         </div>
     </div>
-    <div id="detail-page" class="page"><div class="nav-bar"><button onclick="closeDetail()">←</button> Review</div><div id="repo-content" style="padding:20px; white-space:pre-wrap; color:#ddd; line-height:1.7;"></div></div>
     <script>
         function b64DecodeUnicode(str) { try { return decodeURIComponent(atob(str).split('').map(function(c) { return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2); }).join('')); } catch(e) { return "{}"; } }
@@ -176,7 +220,8 @@ html_template = """
         let currentLang = "KO", selectedCountry = "", selectedType = "All", chatHistory = [];
         let visitedPlaces = JSON.parse(localStorage.getItem('visitedPlaces') || '[]');
         let userLat = null, userLon = null;
-        let worldMap = null;
         const TRANSLATIONS = {
             "KO": { "ai": "Korean", "greet": "안녕? 오늘은 어디서 한잔할까?", "aiBtn": "AI 리뷰", "mapBtn": "지도", "filters": ["🌐 전체", "🏺 전통주", "🥃 위스키", "🍺 맥주", "🍷 와인", "🍹 바"], "types": ["All", "Traditional", "Whiskey", "Beer", "Wine", "Bar"] },
@@ -260,12 +305,7 @@ html_template = """
             });
         }
-        // [핵심 패치] 좀비 순서 변경: 가장 빠르고 튼튼한 8b 모델을 1번으로 배치하여 429 방지
-        const ZOMBIE_MODELS = [
-            "llama-3.1-8b-instant",    // 1번: 쾌속 좀비 (가장 덜 죽음)
-            "llama-3.3-70b-versatile", // 2번: 지능 좀비 (가끔 죽음)
-            "mixtral-8x7b-32768"       // 3번: 예비군 좀비
-        ];
         async function callGroq(msgs) {
             let apiKey = "GROQ_KEY_INJECTED".trim();
@@ -282,14 +322,8 @@ html_template = """
                     if (r.ok) {
                         const d = await r.json(); return d.choices[0].message.content;
                     }
-                    // 429(과부하)면 1초 쉬고 다음 좀비 시도
-                    if (r.status === 429) {
-                        await new Promise(resolve => setTimeout(resolve, 1000));
-                        continue;
-                    }
                     if (r.status === 401) return "Error 401: Invalid API Key.";
                 } catch(e) { continue; }
             }
             return "Emily is sleeping (Network Issue). Please try again.";
@@ -323,21 +357,13 @@ html_template = """
                 if(nearbyPlaces.length > 0) gpsContext = "GPS Nearby(20km): " + nearbyPlaces.join(", ");
             }
-            // [샌드위치 프롬프트] 링크 생성 강제화
             const sysPrompt = `CRITICAL RULE: OUTPUT PLACE NAMES IN [BRACKETS]. Example: [Zest].
             You are Emily, a bartender. Speak ONLY in ${TRANSLATIONS[currentLang].ai}.
-            [DB]
-            ${fullDbContext}
-            [USER GPS]
-            ${gpsContext}
             [INSTRUCTIONS]
             1. Specific city mentioned? Use [DB].
             2. 'Nearby' mentioned? Use [USER GPS].
             REMEMBER: WRAP PLACE NAMES IN [ ] OR I WILL BE FIRED.`;
             const botMsg = await callGroq([{ role: "system", content: sysPrompt }, ...recentHistory]);
@@ -368,14 +394,89 @@ html_template = """
             box.appendChild(div); box.scrollTop = box.scrollHeight;
         }
-        function markVisited(name) { if(!visitedPlaces.includes(name)) { visitedPlaces.push(name); localStorage.setItem('visitedPlaces', JSON.stringify(visitedPlaces)); } }
         function openPassport() { document.getElementById('passport-page').style.transform = 'translateX(0%)'; const grid = document.getElementById('stamp-grid'); grid.innerHTML = ""; for(let c in PLACE_DB) { PLACE_DB[c].forEach(p => { const active = visitedPlaces.includes(p.name); const div = document.createElement('div'); div.className = 'stamp' + (active ? ' active' : ''); div.innerHTML = active ? `🍷<br><b>${p.name}</b>` : `✈️`; grid.appendChild(div); }); } }
         function closePassport() { document.getElementById('passport-page').style.transform = 'translateX(-100%)'; }
-        function openMap() { document.getElementById('world-map-page').style.transform = 'translateY(0%)'; if(!worldMap) { worldMap = L.map('full-map').setView([20,0],2); L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(worldMap); for(let c in PLACE_DB) PLACE_DB[c].forEach(p => { if(p.lat && p.lon) { const lbl = p.label || p.category || ""; L.marker([p.lat,p.lon]).addTo(worldMap).bindPopup(`<b>${p.name}</b><br>${lbl}<br><button class='popup-btn' onclick='window.open("${getMapUrl(p,c)}","_blank")'>MAP</button>`); } }); } }
         function closeMap() { document.getElementById('world-map-page').style.transform = 'translateY(100%)'; }
         function openChat() { document.getElementById('chat-page').style.transform = 'translateY(0%)'; if(chatHistory.length===0) addChatMessage(TRANSLATIONS[currentLang].greet, 'bot'); }
         function closeChat() { document.getElementById('chat-page').style.transform = 'translateY(100%)'; }
-        async function openReview(n, c) { document.getElementById('detail-page').style.transform = 'translateX(0%)'; document.getElementById('repo-content').innerText = "Loading..."; const res = await callGroq([{role:"system",content:"Review "+n+" in "+c+" in "+TRANSLATIONS[currentLang].ai}]); document.getElementById('repo-content').innerText = res; }
         function closeDetail() { document.getElementById('detail-page').style.transform = 'translateX(100%)'; }
     </script>
 </body>

 db_base64 = base64.b64encode(db_json_str.encode('utf-8')).decode('utf-8')
 # ==========================================
+# 🖥️ 3. 통합 프론트엔드 (지도 팝업 카드 복구 완료)
 # ==========================================
 html_template = """
 <!DOCTYPE html>
         #world-map-page, #passport-page, #chat-page { background: #000; z-index: 2000; transform: translateY(100%); }
         #passport-page { transform: translateX(-100%); background: #0f0f1b; }
+        #detail-page { background: #0f0f12; z-index: 4000; transform: translateX(100%); display:flex; flex-direction:column; }
+        #detail-map { width: 100%; height: 40vh; border-bottom: 2px solid var(--gold); }
+        .review-content-box { flex: 1; overflow-y: auto; padding: 20px; }
+        .review-header { text-align: center; margin-bottom: 20px; border-bottom: 1px solid #333; padding-bottom: 15px; }
+        .review-title { font-size: 24px; font-weight: bold; color: var(--gold); margin-bottom: 5px; }
+        .review-body { font-size: 16px; line-height: 1.8; color: #e0e0e0; font-family: 'Georgia', serif; font-style: italic; text-align: justify; }
+        .review-signature { text-align: right; margin-top: 20px; color: var(--gold); font-weight: bold; }
+        .detail-actions { display: flex; gap: 10px; margin-top: 20px; }
+        .detail-btn { flex: 1; padding: 12px; border-radius: 10px; border: none; font-weight: bold; cursor: pointer; font-size: 14px; text-transform: uppercase; }
+        .btn-map { background: #333; color: white; border: 1px solid #555; }
+        .btn-stamp { background: var(--gold); color: black; }
+        .nav-bar { height: 60px; display: flex; align-items: center; padding: 0 20px; border-bottom: 1px solid #222; background: #111; }
         .msg { max-width: 85%; padding: 12px 18px; border-radius: 15px; font-size: 14px; line-height: 1.6; margin-bottom: 12px; }
         .msg.bot { align-self: flex-start; background: #222; color: #eee; border: 1px solid #333; }
         .msg.user { align-self: flex-end; background: var(--gold); color: black; font-weight: bold; }
         .reco-btn { display: block; margin-top: 8px; padding: 10px; background: var(--gold); color: black !important; border-radius: 10px; font-weight: bold; text-decoration: none; font-size: 12px; cursor: pointer; border:none; width: 100%; text-align: center; }
+        /* [복구] 팝업 버튼 스타일 */
+        .popup-btn { background: var(--gold); color: black; border: none; padding: 6px 12px; border-radius: 5px; font-weight: bold; font-size: 11px; cursor: pointer; width: 100%; margin-top: 5px; }
+        .popup-btn:hover { opacity: 0.9; }
         .leaflet-popup-content-wrapper { background: #1a1a1a; color: white; border: 1px solid var(--gold); }
+        .leaflet-popup-content { margin: 10px; }
         .stamp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; padding: 20px; }
         .stamp { height: 90px; border-radius: 15px; border: 2px dashed #333; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 10px; color: #444; background: #161625; }
         .stamp.active { border: 2px solid var(--gold); color: var(--gold); background: rgba(212,175,55,0.05); }
+        .map-search-container { position: absolute; top: 80px; left: 50%; transform: translateX(-50%); width: 90%; max-width: 500px; z-index: 3000; display: flex; gap: 10px; }
+        .map-search-input { flex: 1; padding: 12px 15px; border-radius: 25px; border: 2px solid var(--gold); background: rgba(0,0,0,0.85); color: white; outline: none; font-size: 14px; }
+        .map-loc-btn { width: 45px; height: 45px; border-radius: 50%; background: var(--gold); border: none; font-size: 20px; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 10px rgba(0,0,0,0.5); }
     </style>
 </head>
 <body>
     </div>
     <div id="passport-page" class="page"><div class="nav-bar"><button onclick="closePassport()">←</button> MY PASSPORT</div><div id="stamp-grid" class="stamp-grid" style="overflow-y:auto;"></div></div>
+    <div id="world-map-page" class="page">
+        <div class="nav-bar"><button onclick="closeMap()">🏠 HOME</button></div>
+        <div class="map-search-container">
+            <input id="map-input" class="map-search-input" type="text" placeholder="Search City or Place..." onkeydown="if(event.key==='Enter') searchMap()">
+            <button class="map-loc-btn" onclick="panToUser()">◎</button>
+        </div>
+        <div id="full-map" style="width:100%; height:100%;"></div>
+    </div>
     <div id="chat-page" class="page">
         <div class="nav-bar"><button onclick="closeChat()">←</button> Emily</div>
         </div>
     </div>
+    <div id="detail-page" class="page">
+        <div class="nav-bar"><button onclick="closeDetail()">←</button> Bartender's Note</div>
+        <div id="detail-map"></div>
+        <div class="review-content-box">
+            <div class="review-header">
+                <div class="review-title" id="review-title">Loading...</div>
+                <div style="color:#888;" id="review-subtitle"></div>
+            </div>
+            <div id="repo-content" class="review-body">
+                Please wait while Emily recalls this place... 🍸
+            </div>
+            <div class="detail-actions">
+                <button id="btn-detail-map" class="detail-btn btn-map">🗺️ OPEN MAP</button>
+                <button id="btn-detail-stamp" class="detail-btn btn-stamp">✈️ STAMP</button>
+            </div>
+        </div>
+    </div>
     <script>
         function b64DecodeUnicode(str) { try { return decodeURIComponent(atob(str).split('').map(function(c) { return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2); }).join('')); } catch(e) { return "{}"; } }
         let currentLang = "KO", selectedCountry = "", selectedType = "All", chatHistory = [];
         let visitedPlaces = JSON.parse(localStorage.getItem('visitedPlaces') || '[]');
         let userLat = null, userLon = null;
+        let worldMap = null;
+        let detailMap = null;
         const TRANSLATIONS = {
             "KO": { "ai": "Korean", "greet": "안녕? 오늘은 어디서 한잔할까?", "aiBtn": "AI 리뷰", "mapBtn": "지도", "filters": ["🌐 전체", "🏺 전통주", "🥃 위스키", "🍺 맥주", "🍷 와인", "🍹 바"], "types": ["All", "Traditional", "Whiskey", "Beer", "Wine", "Bar"] },
             });
         }
+        const ZOMBIE_MODELS = ["llama-3.1-8b-instant", "llama-3.3-70b-versatile", "mixtral-8x7b-32768"];
         async function callGroq(msgs) {
             let apiKey = "GROQ_KEY_INJECTED".trim();
                     if (r.ok) {
                         const d = await r.json(); return d.choices[0].message.content;
                     }
+                    if (r.status === 429) { await new Promise(r => setTimeout(r, 1000)); continue; }
                     if (r.status === 401) return "Error 401: Invalid API Key.";
                 } catch(e) { continue; }
             }
             return "Emily is sleeping (Network Issue). Please try again.";
                 if(nearbyPlaces.length > 0) gpsContext = "GPS Nearby(20km): " + nearbyPlaces.join(", ");
             }
             const sysPrompt = `CRITICAL RULE: OUTPUT PLACE NAMES IN [BRACKETS]. Example: [Zest].
             You are Emily, a bartender. Speak ONLY in ${TRANSLATIONS[currentLang].ai}.
+            [DB] ${fullDbContext}
+            [USER GPS] ${gpsContext}
             [INSTRUCTIONS]
             1. Specific city mentioned? Use [DB].
             2. 'Nearby' mentioned? Use [USER GPS].
             REMEMBER: WRAP PLACE NAMES IN [ ] OR I WILL BE FIRED.`;
             const botMsg = await callGroq([{ role: "system", content: sysPrompt }, ...recentHistory]);
             box.appendChild(div); box.scrollTop = box.scrollHeight;
         }
+        function markVisited(name) {
+            if(!visitedPlaces.includes(name)) {
+                visitedPlaces.push(name);
+                localStorage.setItem('visitedPlaces', JSON.stringify(visitedPlaces));
+                alert("✈️ Stamped on Passport!");
+            } else { alert("You already visited here!"); }
+        }
         function openPassport() { document.getElementById('passport-page').style.transform = 'translateX(0%)'; const grid = document.getElementById('stamp-grid'); grid.innerHTML = ""; for(let c in PLACE_DB) { PLACE_DB[c].forEach(p => { const active = visitedPlaces.includes(p.name); const div = document.createElement('div'); div.className = 'stamp' + (active ? ' active' : ''); div.innerHTML = active ? `🍷<br><b>${p.name}</b>` : `✈️`; grid.appendChild(div); }); } }
         function closePassport() { document.getElementById('passport-page').style.transform = 'translateX(-100%)'; }
+        // [복구 완료] 지도 팝업 카드: 설명 + AI리뷰 버튼 + 지도 버튼
+        function openMap() {
+            document.getElementById('world-map-page').style.transform = 'translateY(0%)';
+            if(!worldMap) {
+                worldMap = L.map('full-map').setView([20,0],2);
+                L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(worldMap);
+                for(let c in PLACE_DB) PLACE_DB[c].forEach(p => {
+                    if(p.lat && p.lon) {
+                        const lbl = p.label || p.category || "";
+                        const desc = p['desc_'+currentLang.toLowerCase()] || p.desc_ko || "";
+                        // 설명은 너무 길면 잘라서 보여줌 (UI 깨짐 방지)
+                        const shortDesc = desc.length > 50 ? desc.substring(0, 50) + "..." : desc;
+                        const popupContent = `
+                            <div style="text-align:left;">
+                                <b style="color:#d4af37; font-size:14px;">${p.name}</b><br>
+                                <span style="font-size:10px; color:#aaa;">${lbl}</span><br>
+                                <div style="font-size:11px; margin:5px 0; color:#eee;">${shortDesc}</div>
+                                <div style="display:flex; gap:5px;">
+                                    <button class="popup-btn" style="background:#d4af37; color:black;" onclick="openReview('${p.name.replace(/'/g, "\\\\'")}', '${c}')">AI REVIEW</button>
+                                    <button class="popup-btn" style="background:#333; color:white; border:1px solid #555;" onclick="window.open('${getMapUrl(p,c)}','_blank')">MAP</button>
+                                </div>
+                            </div>
+                        `;
+                        L.marker([p.lat,p.lon]).addTo(worldMap).bindPopup(popupContent);
+                    }
+                });
+            }
+        }
         function closeMap() { document.getElementById('world-map-page').style.transform = 'translateY(100%)'; }
+        function searchMap() {
+            const q = document.getElementById('map-input').value.toLowerCase();
+            for(let c in PLACE_DB) {
+                if(c.toLowerCase().includes(q)) { const p = PLACE_DB[c][0]; if(p.lat && p.lon) { worldMap.setView([p.lat, p.lon], 10); return; } }
+                for(let p of PLACE_DB[c]) { if(p.name.toLowerCase().includes(q)) { if(p.lat && p.lon) { worldMap.setView([p.lat, p.lon], 16); return; } } }
+            }
+            alert("Not Found");
+        }
+        function panToUser() { if(userLat && userLon) worldMap.setView([userLat, userLon], 14); else alert("GPS missing."); }
         function openChat() { document.getElementById('chat-page').style.transform = 'translateY(0%)'; if(chatHistory.length===0) addChatMessage(TRANSLATIONS[currentLang].greet, 'bot'); }
         function closeChat() { document.getElementById('chat-page').style.transform = 'translateY(100%)'; }
+        async function openReview(n, c) {
+            document.getElementById('detail-page').style.transform = 'translateX(0%)';
+            document.getElementById('review-title').innerText = n;
+            document.getElementById('review-subtitle').innerText = c;
+            document.getElementById('repo-content').innerText = "Bartender Emily is preparing your review... 🥃";
+            let placeData = null;
+            if(PLACE_DB[c]) placeData = PLACE_DB[c].find(p => p.name === n);
+            if(placeData && placeData.lat && placeData.lon) {
+                if(detailMap) { detailMap.remove(); }
+                detailMap = L.map('detail-map').setView([placeData.lat, placeData.lon], 15);
+                L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(detailMap);
+                L.marker([placeData.lat, placeData.lon]).addTo(detailMap);
+            }
+            document.getElementById('btn-detail-map').onclick = function() { window.open(getMapUrl(placeData, c), '_blank'); };
+            document.getElementById('btn-detail-stamp').onclick = function() { markVisited(n); };
+            const contextDesc = placeData ? (placeData['desc_'+currentLang.toLowerCase()] || placeData.desc_ko) : "";
+            const reviewPrompt = `Act as Emily, a charming bartender. Write a short review (max 3 sentences) for "${n}" in "${c}". [CONTEXT] ${contextDesc}. [LANG] ${TRANSLATIONS[currentLang].ai}.`;
+            const res = await callGroq([{role:"system",content: reviewPrompt}]);
+            document.getElementById('repo-content').innerHTML = res + "<div class='review-signature'>- Yours, Emily 💋</div>";
+        }
         function closeDetail() { document.getElementById('detail-page').style.transform = 'translateX(100%)'; }
     </script>
 </body>