Update app.py

app.py

@@ -1,24 +1,37 @@
-import os, time, json, requests, datetime, gradio as gr
+"""
+Vibe Game Craft – NEW / BEST 탭을 ‘사이트 미러링’(iframe) 방식으로 보여주는 Gradio Space
+
+● Gradio 4.x 공용 API만 사용 – set_event_trigger 제거
+● Prev / Next 버튼으로 페이지 전환
+● os.getenv("SVR_TOKEN") 필수
+"""
+
+import os
+import time
+import json
+import requests
+import datetime
+import gradio as gr
 
 # ────────────────────────────────────────────────────────────────────────────────
-# 1. Vercel API 설정 ─ 환경변수에서 토큰 읽기
-VERCEL_API_TOKEN = os.getenv("SVR_TOKEN")
+# 1. Vercel API 설정
+VERCEL_API_TOKEN = os.getenv("SVR_TOKEN")          # ← 환경변수에서 읽음
 if not VERCEL_API_TOKEN:
     raise EnvironmentError("환경 변수 'SVR_TOKEN'이 설정되어 있지 않습니다!")
-VERCEL_API_URL = "https://api.vercel.com/v9"
+VERCEL_API_URL  = "https://api.vercel.com/v9"
 HEADERS = {
     "Authorization": f"Bearer {VERCEL_API_TOKEN}",
     "Content-Type": "application/json",
 }
 
 # ────────────────────────────────────────────────────────────────────────────────
-# 2. 갤러리·페이지네이션 기본값
+# 2. 갤러리 설정
 BEST_GAMES_FILE = "best_games.json"
 GAMES_PER_PAGE  = 48
 
 # ────────────────────────────────────────────────────────────────────────────────
-# 3. BEST 탭용 샘플 게임 초기화
-def initialize_best_games():
+# 3. BEST 탭 초기화 / 로드
+def initialize_best_games() -> None:
     if not os.path.exists(BEST_GAMES_FILE):
         sample = [
             {
@@ -40,33 +53,32 @@ def initialize_best_games():
                 "timestamp": time.time(),
             },
         ]
-        json.dump(sample, open(BEST_GAMES_FILE, "w"))
+        json.dump(sample, open(BEST_GAMES_FILE, "w"), ensure_ascii=False, indent=2)
 
-def load_best_games():
+def load_best_games() -> list:
     try:
         return json.load(open(BEST_GAMES_FILE))
     except Exception:
         return []
 
 # ────────────────────────────────────────────────────────────────────────────────
-# 4. 최신 Vercel 배포 → 게임 목록
-def get_latest_deployments():
+# 4. Vercel 최신 배포 가져오기
+def get_latest_deployments() -> list:
     try:
-        r = requests.get(
+        resp = requests.get(
             f"{VERCEL_API_URL}/deployments",
             headers=HEADERS,
             params={"limit": 100},
             timeout=30,
         )
-        r.raise_for_status()
+        resp.raise_for_status()
         games = []
-        for d in r.json().get("deployments", []):
+        for d in resp.json().get("deployments", []):
             if d.get("state") != "READY":
                 continue
-            ts = (
-                int(d["createdAt"] / 1000)
-                if isinstance(d["createdAt"], (int, float))
-                else int(time.time())
+            created_at = d.get("createdAt", time.time() * 1000)
+            ts = int(created_at / 1000) if isinstance(created_at, (int, float)) else int(
+                time.time()
             )
             games.append(
                 {
@@ -76,47 +88,44 @@ def get_latest_deployments():
                     "timestamp": ts,
                 }
             )
-        return sorted(games, key=lambda x: x["timestamp"], reverse=True)
+        games.sort(key=lambda x: x["timestamp"], reverse=True)
+        return games
     except Exception as e:
         print("Vercel API 오류:", e)
         return []
 
 # ────────────────────────────────────────────────────────────────────────────────
-# 5. 페이지네이션 헬퍼
-def paginate(lst, page):
+# 5. 페이지네이션
+def paginate(lst: list, page: int):
     start = (page - 1) * GAMES_PER_PAGE
     end   = start + GAMES_PER_PAGE
     total = (len(lst) + GAMES_PER_PAGE - 1) // GAMES_PER_PAGE
     return lst[start:end], total
 
 # ────────────────────────────────────────────────────────────────────────────────
-# 6. 갤러리 HTML (사이트 미러링 스타일)
-def generate_gallery_html(games, page, total_pages, tab_name):
+# 6. 갤러리 HTML (iframe 미러링)
+def generate_gallery_html(games: list, page: int, total_pages: int, tab_name: str) -> str:
     if not games:
-        return (
-            "<div style='text-align:center;padding:60px;'>표시할 게임이 없습니다.</div>"
-        )
+        return "<div style='text-align:center;padding:60px;'>표시할 게임이 없습니다.</div>"
 
-    # CSS (필요 최소만 인라인 - reference 스타일 재구성)
     css = """
     <style>
     .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:24px;margin-bottom:40px}
-    .item{background:white;border-radius:14px;overflow:hidden;box-shadow:0 4px 15px rgba(0,0,0,.1);transition:.3s}
+    .item{background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 4px 15px rgba(0,0,0,.1);transition:.3s}
     .item:hover{transform:translateY(-6px);box-shadow:0 12px 30px rgba(0,0,0,.15)}
     .hdr{padding:14px 18px;background:rgba(255,255,255,.8);backdrop-filter:blur(6px);border-bottom:1px solid #eee}
-    .ttl{font-size:1.1rem;font-weight:700;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
-    .meta{font-size:.85rem;color:#666;margin-top:4px;display:flex;justify-content:space-between;align-items:center}
+    .ttl{margin:0;font-size:1.1rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+    .meta{font-size:.85rem;color:#666;margin-top:4px}
     .iframe-box{position:relative;width:100%;padding-top:60%;overflow:hidden}
     .iframe-box iframe{position:absolute;top:0;left:0;width:142.857%;height:142.857%;
                        transform:scale(.7);transform-origin:top left;border:0}
     .footer{padding:10px 16px;background:rgba(255,255,255,.85);backdrop-filter:blur(6px);text-align:right}
     .footer a{font-size:.85rem;font-weight:600;color:#2c5282;text-decoration:none}
     .pg{display:flex;justify-content:center;gap:10px;margin-top:10px}
-    .pg button{border:1px solid #ddd;background:white;padding:6px 14px;border-radius:8px;cursor:pointer}
-    .pg button.active,.pg button:hover{background:#9c89b8;color:white;border-color:#9c89b8}
+    .pg button{border:1px solid #ddd;background:#fff;padding:6px 14px;border-radius:8px;cursor:pointer}
+    .pg button.active,.pg button:hover{background:#9c89b8;color:#fff;border-color:#9c89b8}
     </style>
     """
-
     html = css + "<div class='grid'>"
     for g in games:
         date = datetime.datetime.fromtimestamp(g["timestamp"]).strftime("%Y-%m-%d")
@@ -124,44 +133,16 @@ def generate_gallery_html(games, page, total_pages, tab_name):
         <div class='item'>
           <div class='hdr'>
             <p class='ttl'>{g['title']}</p>
-            <div class='meta'><span>{date}</span></div>
-          </div>
-          <div class='iframe-box'>
-            <iframe src="{g['url']}" loading="lazy"
-              allow="accelerometer; camera; encrypted-media; gyroscope;"></iframe>
-          </div>
-          <div class='footer'>
-            <a href="{g['url']}" target="_blank">원본 사이트 열기 ↗</a>
+            <div class='meta'>{date}</div>
           </div>
+          <div class='iframe-box'><iframe src="{g['url']}" loading="lazy"
+            allow="accelerometer; camera; encrypted-media; gyroscope;"></iframe></div>
+          <div class='footer'><a href="{g['url']}" target="_blank">원본 사이트 열기 ↗</a></div>
         </div>
         """
-
-    # 페이지네이션
     html += "</div>"
-    if total_pages > 1:
-        html += "<div class='pg'>"
-        if page > 1:
-            html += (
-                f"<button onclick=\"refreshGallery('{tab_name}',{page-1})\">이전</button>"
-            )
-        for p in range(max(1, page - 2), min(total_pages, page + 2) + 1):
-            active = "active" if p == page else ""
-            html += (
-                f"<button class='{active}' onclick=\"refreshGallery('{tab_name}',{p})\">{p}</button>"
-            )
-        if page < total_pages:
-            html += (
-                f"<button onclick=\"refreshGallery('{tab_name}',{page+1})\">다음</button>"
-            )
-        html += "</div>"
-
-    # refreshGallery JS (탭 버튼 재사용)
-    html += """
-    <script>
-    function refreshGallery(t,p){document.getElementById(t+'-btn').click();
-                                 window.setTimeout(()=>window.__setPage&&__setPage(t,p),50);}
-    </script>
-    """
+    # 페이지 번호(읽기 전용) – Prev/Next 는 Gradio에서 처리
+    html += f"<div style='text-align:center;margin-top:4px;font-size:.85rem;color:#666;'>Page {page} / {total_pages}</div>"
     return html
 
 # ────────────────────────────────────────────────────────────────────────────────
@@ -169,20 +150,23 @@ def generate_gallery_html(games, page, total_pages, tab_name):
 def create_gallery_interface():
     initialize_best_games()
 
-    with gr.Blocks() as demo:
+    with gr.Blocks(title="Vibe Game Craft") as demo:
         gr.HTML("<h1 style='text-align:center;'>🎮 Vibe Game Craft</h1>")
 
         with gr.Row():
             new_btn  = gr.Button("NEW", elem_id="new-btn")
             best_btn = gr.Button("BEST", elem_id="best-btn")
             refresh  = gr.Button("🔄 새로고침")
+            prev_btn = gr.Button("⬅️ Prev")
+            next_btn = gr.Button("Next ➡️")
 
-        tab_state   = gr.State("new")
-        page_state  = gr.State(1)   # NEW 탭 현재 페이지
-        page_state2 = gr.State(1)   # BEST 탭 현재 페이지
-        gallery_out = gr.HTML()
+        # 상태
+        current_tab   = gr.State("new")   # "new" or "best"
+        new_page      = gr.State(1)
+        best_page     = gr.State(1)
+        gallery_html  = gr.HTML()
 
-        # 각 탭 렌더 함수
+        # NEW / BEST 렌더 함수
         def render_new(page=1):
             games, total = paginate(get_latest_deployments(), page)
             return generate_gallery_html(games, page, total, "new"), "new", page
@@ -191,35 +175,61 @@ def create_gallery_interface():
             games, total = paginate(load_best_games(), page)
             return generate_gallery_html(games, page, total, "best"), "best", page
 
-        new_btn.click(fn=render_new,  outputs=[gallery_out, tab_state, page_state])
-        best_btn.click(fn=render_best, outputs=[gallery_out, tab_state, page_state2])
+        # 버튼 이벤트
+        new_btn.click(fn=render_new,
+                      outputs=[gallery_html, current_tab, new_page])
 
-        # 새로고침
-        def do_refresh(tab, p1, p2):
-            if tab == "new":
-                return render_new(p1)[0]
-            return render_best(p2)[0]
+        best_btn.click(fn=render_best,
+                       outputs=[gallery_html, current_tab, best_page])
 
-        refresh.click(fn=do_refresh,
-                      inputs=[tab_state, page_state, page_state2],
-                      outputs=[gallery_out])
-
-        # 페이지네이션을 위한 JS 콜백용 숨은 함수
-        def set_page(tab, p):
+        def refresh_gallery(tab, p_new, p_best):
             if tab == "new":
-                return render_new(p)
-            return render_best(p)
+                return render_new(p_new)[0]
+            return render_best(p_best)[0]
 
-        # 초기 NEW
-        demo.load(fn=render_new, outputs=[gallery_out, tab_state, page_state])
+        refresh.click(fn=refresh_gallery,
+                      inputs=[current_tab, new_page, best_page],
+                      outputs=[gallery_html])
 
-        # JS 에서 호출될 수 있도록 함수 노출
-        demo.set_event_trigger("__setPage", set_page, [tab_state, page_state, page_state2], [gallery_out, tab_state, page_state, page_state2])
+        # Prev / Next
+        def prev_page(tab, p_new, p_best):
+            if tab == "new":
+                p_new = max(1, p_new - 1)
+                html, _, _ = render_new(p_new)
+                return html, p_new, p_best
+            p_best = max(1, p_best - 1)
+            html, _, _ = render_best(p_best)
+            return html, p_new, p_best
+
+        def next_page(tab, p_new, p_best):
+            if tab == "new":
+                games_total = len(get_latest_deployments())
+                max_pages   = (games_total + GAMES_PER_PAGE - 1) // GAMES_PER_PAGE
+                p_new = min(max_pages, p_new + 1)
+                html, _, _ = render_new(p_new)
+                return html, p_new, p_best
+            games_total = len(load_best_games())
+            max_pages   = (games_total + GAMES_PER_PAGE - 1) // GAMES_PER_PAGE
+            p_best = min(max_pages, p_best + 1)
+            html, _, _ = render_best(p_best)
+            return html, p_new, p_best
+
+        prev_btn.click(fn=prev_page,
+                       inputs=[current_tab, new_page, best_page],
+                       outputs=[gallery_html, new_page, best_page])
+
+        next_btn.click(fn=next_page,
+                       inputs=[current_tab, new_page, best_page],
+                       outputs=[gallery_html, new_page, best_page])
+
+        # 초기 NEW 탭 표시
+        demo.load(fn=render_new,
+                  outputs=[gallery_html, current_tab, new_page])
 
     return demo
 
 # ────────────────────────────────────────────────────────────────────────────────
-# 8. 실행 (Gradio Spaces 자동 감지를 위해 전역 app 변수 노출)
+# 8. 전역 app (Spaces 자동 감지)
 app = create_gallery_interface()
 
 if __name__ == "__main__":