Update app.py

app.py

@@ -1,7 +1,7 @@
-import os, re, time, json, datetime, requests, gradio as gr
+import os, json, time, datetime, requests, gradio as gr
 
 # ───────────────────── 1. 기본 설정 ─────────────────────
-BEST_FILE, PER_PAGE = "best_games.json", 9
+BEST_FILE, PER_PAGE = "best_games.json", 9          # ❶ 페이지당 9개 유지
 
 # ───────────────────── 2. BEST 데이터 ────────────────────
 def _init_best():
@@ -9,85 +9,48 @@ def _init_best():
         json.dump([], open(BEST_FILE, "w"), ensure_ascii=False)
 
 def _load_best():
-    """best_games.json →  ["https://foo.vercel.app", ...]  형태로 로드"""
     try:
         raw = json.load(open(BEST_FILE))
+        # URL 리스트만 반환
         if isinstance(raw, list):
-            urls = []
-            for it in raw:
-                if isinstance(it, str):
-                    urls.append(it)
-                elif isinstance(it, dict) and "url" in it:
-                    urls.append(it["url"])
-            return urls
+            return [u if isinstance(u, str) else u.get("url") for u in raw]
         return []
     except Exception as e:
-        print(f"BEST 데이터 로드 오류: {e}")
+        print("BEST 로드 오류:", e)
         return []
 
-def _save_best(url_list: list[str]) -> bool:
+def _save_best(lst):                                  # URL 리스트 저장
     try:
-        json.dump(url_list, open(BEST_FILE, "w"), ensure_ascii=False, indent=2)
+        json.dump(lst, open(BEST_FILE, "w"), ensure_ascii=False, indent=2)
         return True
     except Exception as e:
-        print(f"BEST 데이터 저장 오류: {e}")
+        print("BEST 저장 오류:", e)
         return False
 
-# ───────────────────── 3. URL 추가 기능 ─────────────────────
-def add_url_to_best(url: str) -> bool:
-    try:
-        data = _load_best()
-        if url in data:
-            print("이미 존재:", url)
-            return False
-        data.insert(0, url)
-        return _save_best(data)
-    except Exception as e:
-        print("URL 추가 오류:", e)
+def add_url_to_best(url: str):
+    data = _load_best()
+    if url in data:
         return False
+    data.insert(0, url)
+    return _save_best(data)
 
-# ───────────────────── 4. 페이지네이션 ───────────────────
+# ───────────────────── 3. 유틸 ──────────────────────────
 def page(lst, pg):
-    s = (pg-1) * PER_PAGE
-    e = s + PER_PAGE
-    total = (len(lst) + PER_PAGE - 1) // PER_PAGE
+    s, e = (pg-1)*PER_PAGE, (pg-1)*PER_PAGE+PER_PAGE
+    total = (len(lst)+PER_PAGE-1)//PER_PAGE
     return lst[s:e], total
 
-# ───────────────────── 5. URL → iframe 변환 ───────────────
 def process_url_for_iframe(url):
-    is_huggingface = False
-    embed_urls = []
+    # Hugging Face Spaces embed 우선
     if "huggingface.co/spaces" in url:
-        is_huggingface = True
-        base_url = url.rstrip("/")
-        try:
-            path = base_url.split("/spaces/")[1]
-            owner, *rest = path.split("/")
-            if rest:
-                name = rest[0]
-                clean_owner = owner.lower()
-                clean_name  = name.replace('.', '-').replace('_', '-').lower()
-                embed_urls.append(f"https://huggingface.co/spaces/{owner}/{name}/embed")
-                embed_urls.append(f"https://{clean_owner}-{clean_name}.hf.space")
-            else:
-                embed_urls.append(f"https://huggingface.co/spaces/{owner}/embed")
-        except Exception:
-            if not base_url.endswith("/embed"):
-                embed_urls.append(f"{base_url}/embed")
-            else:
-                embed_urls.append(base_url)
-    elif ".hf.space" in url:
-        is_huggingface = True
-        embed_urls.append(url)
-    else:
-        return url, False, []
-    primary = embed_urls[0] if embed_urls else url
-    return primary, is_huggingface, embed_urls[1:]
-
-# ───────────────────── 6. HTML 렌더 ───────────────────────
+        owner, name = url.rstrip("/").split("/spaces/")[1].split("/")[:2]
+        return f"https://huggingface.co/spaces/{owner}/{name}/embed", True, []
+    return url, False, []
+
+# ───────────────────── 4. 카드 그리드 HTML ───────────────
 def html(urls, pg, total):
     if not urls:
-        return "<div style='text-align:center;padding:70px;color:#555;'>표시할 배포가 없습니다.</div>"
+        return '<div style="text-align:center;padding:70px;color:#555;">표시할 배포가 ��습니다.</div>'
 
     css = r"""
     <style>
@@ -95,92 +58,74 @@ def html(urls, pg, total):
       .container{padding:16px;}
       .grid{
           display:grid;
-          grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
+          grid-template-columns:repeat(auto-fill,minmax(340px,1fr));
           gap:16px;
       }
       .card{
-          background:#fff;
-          border-radius:10px;
-          overflow:hidden;
-          box-shadow:0 2px 8px rgba(0,0,0,.05);
+          background:#fff;border-radius:10px;overflow:hidden;
+          box-shadow:0 2px 10px rgba(0,0,0,.08);
+          height:480px;                               /* ★ 기본 카드 높이 ↑ */
           transition:transform .2s;
       }
+      @media (min-width:1400px){.card{height:640px;} }/* ★ 아주 큰 화면 */
+      @media (max-width:992px) {.card{height:420px;} }/* 태블릿 */
+      @media (max-width:600px) {.card{height:360px;} }/* 모바일 */
+
       .card:hover{transform:translateY(-4px);}
-      .frame{position:relative;width:100%;padding-top:56.25%;}
+      .frame{position:relative;width:100%;height:100%;}
       .frame iframe{position:absolute;inset:0;width:100%;height:100%;border:none;}
-      .frame.huggingface iframe{padding:0;margin:0;}
       .page-info{text-align:center;color:#777;margin:12px 0;}
     </style>"""
 
-    js = """
-    <script>
-    function handleIframeError(id, alternates, origin){
-        const f=document.getElementById(id); if(!f)return;
-        f.onerror=()=>tryNext(id, alternates, origin);
-        f.onload=()=>setTimeout(()=>{if(f.offsetWidth===0||f.offsetHeight===0)tryNext(id, alternates, origin);},4000);
-    }
-    function tryNext(id, alternates, origin){
-        const f=document.getElementById(id); if(!f)return;
-        if(alternates.length){
-            f.src=alternates.shift();
-            handleIframeError(id, alternates, origin);
-        }else{
-            f.parentNode.innerHTML='<div style="display:flex;align-items:center;justify-content:center;height:100%;font-size:14px;color:#999;">로드 실패 ↗</div>';
-        }
-    }
-    window.addEventListener('load',()=>{
-        document.querySelectorAll('.huggingface iframe').forEach(f=>{
-            const id=f.id;
-            const alt=(f.getAttribute('data-alt')||'').split(',').filter(Boolean);
-            if(id&&alt.length)handleIframeError(id,alt,f.src);
-        });
-    });
-    </script>"""
-
     body = '<div class="container"><div class="grid">'
-    for i, url in enumerate(urls):
-        iframe_url, is_hf, alt = process_url_for_iframe(url)
-        frame_cls = "frame huggingface" if is_hf else "frame"
-        iframe_id = f"f{i}"
-        alt_attr  = f'data-alt="{",".join(alt)}"' if alt else ""
+    for i, origin in enumerate(urls):
+        src, is_hf, _ = process_url_for_iframe(origin)
         body += f"""
         <div class="card">
-          <div class="{frame_cls}">
-            <iframe id="{iframe_id}" src="{iframe_url}" loading="lazy" {alt_attr}></iframe>
+          <div class="frame{' huggingface' if is_hf else ''}">
+            <iframe src="{src}" loading="lazy"></iframe>
           </div>
         </div>"""
     body += "</div></div>"
     page_info = f'<div class="page-info">Page {pg} / {total}</div>'
-    return css + js + body + page_info
+    return css + body + page_info
 
-# ───────────────────── 7. UI ─────────────────────────────
+# ───────────────────── 5. Gradio UI ─────────────────────
 def build():
     _init_best()
 
-    header_html = """
+    header = """
     <style>
-      .app-header{text-align:center;padding:16px 0 8px;margin:0;position:sticky;top:0;background:#fff;z-index:1100;border-bottom:1px solid #eee;}
+      .app-header{position:sticky;top:0;text-align:center;background:#fff;
+                  padding:16px 0 8px;border-bottom:1px solid #eee;z-index:1100;}
       .badge-row{display:inline-flex;gap:8px;margin:8px 0;}
     </style>
     <div class="app-header">
         <h1 style="margin:0;font-size:28px;">🎮 Vibe Game Gallery</h1>
         <div class="badge-row">
-            <a href="https://huggingface.co/spaces/openfree/Vibe-Game" target="_blank"><img src="https://img.shields.io/static/v1?label=huggingface&message=Vibe%20Game%20Craft&color=%23800080&labelColor=%23ffa500&logo=huggingface&logoColor=%23ffff00&style=for-the-badge"></a>
-            <a href="https://huggingface.co/spaces/openfree/Game-Gallery" target="_blank"><img src="https://img.shields.io/static/v1?label=huggingface&message=Game%20Gallery&color=%23800080&labelColor=%23ffa500&logo=huggingface&logoColor=%23ffff00&style=for-the-badge"></a>
-            <a href="https://discord.gg/openfreeai" target="_blank"><img src="https://img.shields.io/static/v1?label=Discord&message=Openfree%20AI&color=%230000ff&labelColor=%23800080&logo=discord&logoColor=white&style=for-the-badge"></a>
+          <a href="https://huggingface.co/spaces/openfree/Vibe-Game" target="_blank">
+            <img src="https://img.shields.io/static/v1?label=huggingface&message=Vibe%20Game%20Craft&color=800080&labelColor=ffa500&logo=huggingface&logoColor=ffff00&style=for-the-badge">
+          </a>
+          <a href="https://huggingface.co/spaces/openfree/Game-Gallery" target="_blank">
+            <img src="https://img.shields.io/static/v1?label=huggingface&message=Game%20Gallery&color=800080&labelColor=ffa500&logo=huggingface&logoColor=ffff00&style=for-the-badge">
+          </a>
+          <a href="https://discord.gg/openfreeai" target="_blank">
+            <img src="https://img.shields.io/static/v1?label=Discord&message=Openfree%20AI&color=0000ff&labelColor=800080&logo=discord&logoColor=white&style=for-the-badge">
+          </a>
         </div>
-    </div>
-    """
-
-    css_global = """
-    footer{display:none !important;}
-    .button-row{position:fixed;bottom:0;left:0;right:0;height:60px;background:#f0f0f0;padding:10px;text-align:center;box-shadow:0 -2px 10px rgba(0,0,0,.05);z-index:1000;}
-    .button-row button{margin:0 10px;padding:10px 20px;font-size:16px;font-weight:bold;border-radius:50px;}
-    #content-area{overflow-y:auto;height:calc(100vh - 60px - 120px);}
+    </div>"""
+
+    global_css = """
+      footer{display:none !important;}
+      .button-row{position:fixed;bottom:0;left:0;right:0;height:60px;
+                  background:#f0f0f0;padding:10px;text-align:center;
+                  box-shadow:0 -2px 10px rgba(0,0,0,.05);z-index:1000;}
+      .button-row button{margin:0 10px;padding:10px 20px;font-size:16px;font-weight:bold;border-radius:50px;}
+      #content-area{overflow-y:auto;height:calc(100vh - 60px - 120px);}
     """
 
-    with gr.Blocks(title="Vibe Game Gallery", css=css_global) as demo:
-        gr.HTML(header_html)
+    with gr.Blocks(title="Vibe Game Gallery", css=global_css) as demo:
+        gr.HTML(header)
         out = gr.HTML(elem_id="content-area")
         with gr.Row(elem_classes="button-row"):
             b_prev = gr.Button("◀ 이전", size="lg")
@@ -188,24 +133,14 @@ def build():
 
         bp = gr.State(1)
 
-        def show_best(p=1):
-            d, t = page(_load_best(), p)
-            return html(d, p, t), p
-
-        def prev(b):
-            b = max(1, b-1)
-            h, _ = show_best(b)
-            return h, b
+        def render(p=1):
+            data, tot = page(_load_best(), p)
+            return html(data, p, tot), p
 
-        def nxt(b):
-            maxp = (len(_load_best()) + PER_PAGE - 1) // PER_PAGE
-            b = min(maxp, b+1)
-            h, _ = show_best(b)
-            return h, b
+        b_prev.click(lambda p: render(max(1, p-1)), inputs=bp, outputs=[out, bp])
+        b_next.click(lambda p: render(p+1),      inputs=bp, outputs=[out, bp])
 
-        b_prev.click(prev, inputs=[bp], outputs=[out, bp])
-        b_next.click(nxt,  inputs=[bp], outputs=[out, bp])
-        demo.load(show_best, outputs=[out, bp])
+        demo.load(render, outputs=[out, bp])
 
     return demo