Update app.py

app.py

@@ -1,306 +1,226 @@
-import os
-import time
-import json
-import requests
-import base64
-import gradio as gr
-import datetime
+import os, time, json, requests, datetime, gradio as gr
 
-# 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"
 HEADERS = {
     "Authorization": f"Bearer {VERCEL_API_TOKEN}",
-    "Content-Type": "application/json"
+    "Content-Type": "application/json",
 }
 
-# 갤러리 설정
+# ────────────────────────────────────────────────────────────────────────────────
+# 2. 갤러리·페이지네이션 기본값
 BEST_GAMES_FILE = "best_games.json"
-GAMES_PER_PAGE = 48
-GAMES_PER_ROW = 3
+GAMES_PER_PAGE  = 48
 
-# BEST 게임 초기화
+# ────────────────────────────────────────────────────────────────────────────────
+# 3. BEST 탭용 샘플 게임 초기화
 def initialize_best_games():
     if not os.path.exists(BEST_GAMES_FILE):
-        best_games = [
+        sample = [
             {
                 "title": "테트리스",
                 "description": "클래식 테트리스 게임",
                 "url": "https://tmkdop.vercel.app",
                 "timestamp": time.time(),
-                "preview_image": "https://via.placeholder.com/300x200?text=Tetris"
             },
             {
-                "title": "스네이크 게임",
+                "title": "스네이크",
                 "description": "전통적인 스네이크 게임",
                 "url": "https://tmkdop.vercel.app",
                 "timestamp": time.time(),
-                "preview_image": "https://via.placeholder.com/300x200?text=Snake"
             },
             {
                 "title": "팩맨",
-                "description": "고전 아케이드 게임 팩맨",
+                "description": "고전 아케이드 게임",
                 "url": "https://tmkdop.vercel.app",
                 "timestamp": time.time(),
-                "preview_image": "https://via.placeholder.com/300x200?text=Pacman"
-            }
+            },
         ]
-        with open(BEST_GAMES_FILE, "w") as f:
-            json.dump(best_games, f)
-    return load_best_games()
+        json.dump(sample, open(BEST_GAMES_FILE, "w"))
 
-# BEST 게임 로드
 def load_best_games():
     try:
-        with open(BEST_GAMES_FILE, "r") as f:
-            return json.load(f)
-    except (FileNotFoundError, json.JSONDecodeError):
+        return json.load(open(BEST_GAMES_FILE))
+    except Exception:
         return []
 
-# Vercel API에서 최신 배포 목록 가져오기
+# ────────────────────────────────────────────────────────────────────────────────
+# 4. 최신 Vercel 배포 → 게임 목록
 def get_latest_deployments():
     try:
-        response = requests.get(
+        r = requests.get(
             f"{VERCEL_API_URL}/deployments",
             headers=HEADERS,
-            params={"limit": 100}
+            params={"limit": 100},
+            timeout=30,
         )
-        if response.status_code != 200:
-            print(f"Vercel API 오류: {response.status_code} - {response.text}")
-            return []
-
-        deployments = response.json().get("deployments", [])
+        r.raise_for_status()
         games = []
-        for deployment in deployments:
-            if deployment.get("state") != "READY":
+        for d in r.json().get("deployments", []):
+            if d.get("state") != "READY":
                 continue
-
-            created_at = deployment.get("createdAt")
-            timestamp = int(time.time())
-            try:
-                # Vercel은 ms 단위 int를 반환하므로 이를 처리
-                if isinstance(created_at, (int, float)):
-                    timestamp = int(created_at / 1000)
-                elif isinstance(created_at, str):
-                    # Python 3.7+ 에서 ISO 파싱
-                    if hasattr(datetime.datetime, "fromisoformat"):
-                        dt = datetime.datetime.fromisoformat(created_at.replace("Z", "+00:00"))
-                    else:
-                        dt = datetime.datetime.strptime(
-                            created_at.split(".")[0], "%Y-%m-%dT%H:%M:%S"
-                        )
-                    timestamp = int(dt.timestamp())
-            except Exception as e:
-                print(f"날짜 변환 오류: {str(e)}")
-
+            ts = (
+                int(d["createdAt"] / 1000)
+                if isinstance(d["createdAt"], (int, float))
+                else int(time.time())
+            )
             games.append(
                 {
-                    "title": deployment.get("name", "게임"),
-                    "description": f"배포된 게임: {deployment.get('name')}",
-                    "url": f"https://{deployment.get('url')}",
-                    "timestamp": timestamp,
-                    "preview_image": (
-                        f"https://via.placeholder.com/300x200?text="
-                        f"{deployment.get('name', 'Game').replace(' ', '+')}"
-                    ),
+                    "title": d.get("name", "게임"),
+                    "description": f"배포된 게임: {d.get('name')}",
+                    "url": f"https://{d.get('url')}",
+                    "timestamp": ts,
                 }
             )
-
-        games.sort(key=lambda x: x["timestamp"], reverse=True)
-        return games
+        return sorted(games, key=lambda x: x["timestamp"], reverse=True)
     except Exception as e:
-        print(f"배포 목록 가져오기 오류: {str(e)}")
+        print("Vercel API 오류:", e)
         return []
 
-# 페이지네이션
-def paginate_games(games, page=1):
-    start_idx = (page - 1) * GAMES_PER_PAGE
-    end_idx = start_idx + GAMES_PER_PAGE
-    total_pages = (len(games) + GAMES_PER_PAGE - 1) // GAMES_PER_PAGE
-    return games[start_idx:end_idx], total_pages
-
-# 갤러리 HTML 생성
-def generate_gallery_html(games, current_page=1, total_pages=1, gallery_type="NEW"):
+# ────────────────────────────────────────────────────────────────────────────────
+# 5. 페이지네이션 헬퍼
+def paginate(lst, page):
+    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):
     if not games:
         return (
-            "<div style='text-align:center;padding:50px;color:#666;background:white;"
-            "border-radius:10px;box-shadow:0 2px 10px rgba(0,0,0,0.1);'>"
-            "<h3>아직 게임이 없습니다</h3>"
-            f"<p>{gallery_type} 탭에 표시할 게임이 없습니다.</p></div>"
+            "<div style='text-align:center;padding:60px;'>표시할 게임이 없습니다.</div>"
         )
 
-    html = """
+    # CSS (필요 최소만 인라인 - reference 스타일 재구성)
+    css = """
     <style>
-    .gallery-container{font-family:'Poppins',-apple-system,BlinkMacSystemFont,sans-serif;}
-    .gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:30px;}
-    .game-card{background:white;border-radius:12px;overflow:hidden;box-shadow:0 4px 15px rgba(0,0,0,0.1);
-               transition:transform .3s ease,box-shadow .3s ease;cursor:pointer;}
-    .game-card:hover{transform:translateY(-8px);box-shadow:0 10px 25px rgba(0,0,0,0.15);}
-    .game-preview{position:relative;height:200px;overflow:hidden;}
-    .game-preview img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease;}
-    .game-card:hover .game-preview img{transform:scale(1.05);}
-    .game-preview-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.3);
-                          display:flex;align-items:center;justify-content:center;opacity:0;
-                          transition:opacity .3s ease;}
-    .game-card:hover .game-preview-overlay{opacity:1;}
-    .play-btn{background-color:#9c89b8;color:white;padding:8px 16px;border-radius:50px;text-decoration:none;
-              font-weight:500;font-size:14px;transition:background-color .3s ease;}
-    .play-btn:hover{background-color:#f0a6ca;}
-    .game-info{padding:20px;}
-    .game-info h3{margin:0 0 10px;font-size:18px;color:#333;}
-    .game-desc{color:#666;margin-bottom:15px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
-               overflow:hidden;font-size:14px;line-height:1.5;}
-    .game-meta{display:flex;justify-content:space-between;align-items:center;font-size:13px;}
-    .game-date{color:#888;}
-    .game-pagination{display:flex;justify-content:center;gap:10px;margin-top:30px;}
-    .page-btn{background-color:white;border:1px solid #ddd;color:#333;padding:8px 16px;border-radius:8px;
-              cursor:pointer;transition:all .3s ease;font-size:14px;}
-    .page-btn:hover,.page-btn.active{background-color:#9c89b8;color:white;border-color:#9c89b8;}
-    @media (max-width:768px){.gallery-grid{grid-template-columns:repeat(2,1fr);}}
-    @media (max-width:480px){.gallery-grid{grid-template-columns:1fr;}}
+    .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: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}
+    .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}
     </style>
-    <div class="gallery-container"><div class="gallery-grid">
     """
 
-    for game in games:
-        formatted_date = datetime.datetime.fromtimestamp(game["timestamp"]).strftime("%Y-%m-%d")
+    html = css + "<div class='grid'>"
+    for g in games:
+        date = datetime.datetime.fromtimestamp(g["timestamp"]).strftime("%Y-%m-%d")
         html += f"""
-        <div class="game-card">
-            <div class="game-preview">
-                <img src="{game['preview_image']}" alt="{game['title']}">
-                <div class="game-preview-overlay">
-                    <a href="{game['url']}" target="_blank" class="play-btn">플레이하기</a>
-                </div>
-            </div>
-            <div class="game-info">
-                <h3><a href="{game['url']}" target="_blank" style="text-decoration:none;color:inherit;">{game['title']}</a></h3>
-                <p class="game-desc">{game['description']}</p>
-                <div class="game-meta">
-                    <span class="game-date">{formatted_date}</span>
-                    <a href="{game['url']}" target="_blank" class="play-btn">플레이</a>
-                </div>
-            </div>
+        <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>
         </div>
         """
 
+    # 페이지네이션
     html += "</div>"
-
     if total_pages > 1:
-        html += '<div class="game-pagination">'
-        if current_page > 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="page-btn prev" '
-                f'onclick="refreshGallery(\'{gallery_type.lower()}\',{current_page-1})">이전</button>'
+                f"<button class='{active}' onclick=\"refreshGallery('{tab_name}',{p})\">{p}</button>"
             )
-        start_page = max(1, current_page - 2)
-        end_page = min(total_pages, start_page + 4)
-        for i in range(start_page, end_page + 1):
-            if i == current_page:
-                html += f'<button class="page-btn active">{i}</button>'
-            else:
-                html += (
-                    f'<button class="page-btn" '
-                    f'onclick="refreshGallery(\'{gallery_type.lower()}\',{i})">{i}</button>'
-                )
-        if current_page < total_pages:
+        if page < total_pages:
             html += (
-                f'<button class="page-btn next" '
-                f'onclick="refreshGallery(\'{gallery_type.lower()}\',{current_page+1})">다음</button>'
+                f"<button onclick=\"refreshGallery('{tab_name}',{page+1})\">다음</button>"
             )
         html += "</div>"
+
+    # refreshGallery JS (탭 버튼 재사용)
     html += """
     <script>
-    function refreshGallery(type,page){
-        if(type==='new'){document.getElementById('new-btn').click();}
-        else{document.getElementById('best-btn').click();}
-    }
-    </script></div>"""
+    function refreshGallery(t,p){document.getElementById(t+'-btn').click();
+                                 window.setTimeout(()=>window.__setPage&&__setPage(t,p),50);}
+    </script>
+    """
     return html
 
-# 탭 인터페이스
+# ────────────────────────────────────────────────────────────────────────────────
+# 7. Gradio UI
 def create_gallery_interface():
     initialize_best_games()
 
-    css = """
-    .gallery-header{text-align:center;margin-bottom:30px;}
-    .gallery-header h1{color:#333;font-size:2.5rem;margin-bottom:10px;}
-    .gallery-header p{color:#666;font-size:1.1rem;}
-    .tabs-container{margin-bottom:30px;}
-    .tab-buttons{display:flex;gap:10px;margin-bottom:20px;}
-    .tab-button{padding:10px 20px;background-color:#f0f0f0;border:none;border-radius:8px;cursor:pointer;
-                font-size:16px;font-weight:500;transition:all .3s ease;}
-    .tab-button.active{background-color:#9c89b8;color:white;}
-    .refresh-btn{background-color:#b8bedd;color:white;border:none;border-radius:8px;padding:8px 16px;cursor:pointer;
-                 font-size:14px;margin-left:10px;transition:background-color .3s ease;}
-    .refresh-btn:hover{background-color:#9c89b8;}
-    """
+    with gr.Blocks() as demo:
+        gr.HTML("<h1 style='text-align:center;'>🎮 Vibe Game Craft</h1>")
 
-    with gr.Blocks(css=css) as demo:
-        gr.HTML(
-            "<div class='gallery-header'><h1>🎮 Vibe Game Craft 갤러리</h1>"
-            "<p>AI로 생성된 게임들을 탐색하고 플레이해보세요</p></div>"
-        )
+        with gr.Row():
+            new_btn  = gr.Button("NEW", elem_id="new-btn")
+            best_btn = gr.Button("BEST", elem_id="best-btn")
+            refresh  = gr.Button("🔄 새로고침")
 
-        with gr.Row(elem_id="tab-buttons", elem_classes="tab-buttons"):
-            new_tab_btn = gr.Button("NEW", elem_classes="tab-button active", elem_id="new-btn")
-            best_tab_btn = gr.Button("BEST", elem_classes="tab-button", elem_id="best-btn")
-            refresh_btn = gr.Button("🔄 새로고침", elem_classes="refresh-btn")
+        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_page = gr.State(1)
-        best_page = gr.State(1)
-        gallery_html = gr.HTML(elem_id="gallery-content")
+        # 각 탭 렌더 함수
+        def render_new(page=1):
+            games, total = paginate(get_latest_deployments(), page)
+            return generate_gallery_html(games, page, total, "new"), "new", page
 
-        # NEW 탭
-        def show_new_tab():
-            games = get_latest_deployments()
-            page_games, total_pages = paginate_games(games, 1)
-            return generate_gallery_html(page_games, 1, total_pages, "NEW"), "new", 1
+        def render_best(page=1):
+            games, total = paginate(load_best_games(), page)
+            return generate_gallery_html(games, page, total, "best"), "best", page
 
-        new_tab_btn.click(
-            fn=show_new_tab,
-            outputs=[gallery_html, current_tab, new_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])
 
-        # BEST 탭
-        def show_best_tab():
-            games = load_best_games()
-            page_games, total_pages = paginate_games(games, 1)
-            return generate_gallery_html(page_games, 1, total_pages, "BEST"), "best", 1
+        # 새로고침
+        def do_refresh(tab, p1, p2):
+            if tab == "new":
+                return render_new(p1)[0]
+            return render_best(p2)[0]
 
-        best_tab_btn.click(
-            fn=show_best_tab,
-            outputs=[gallery_html, current_tab, best_page]
-        )
+        refresh.click(fn=do_refresh,
+                      inputs=[tab_state, page_state, page_state2],
+                      outputs=[gallery_out])
 
-        # 새로고침
-        def refresh_gallery(current_tab_state, new_page_state, best_page_state):
-            if current_tab_state == "new":
-                games = get_latest_deployments()
-                page_games, total_pages = paginate_games(games, new_page_state)
-                return generate_gallery_html(page_games, new_page_state, total_pages, "NEW")
-            games = load_best_games()
-            page_games, total_pages = paginate_games(games, best_page_state)
-            return generate_gallery_html(page_games, best_page_state, total_pages, "BEST")
+        # 페이지네이션을 위한 JS 콜백용 숨은 함수
+        def set_page(tab, p):
+            if tab == "new":
+                return render_new(p)
+            return render_best(p)
 
-        refresh_btn.click(
-            fn=refresh_gallery,
-            inputs=[current_tab, new_page, best_page],
-            outputs=[gallery_html]
-        )
+        # 초기 NEW
+        demo.load(fn=render_new, outputs=[gallery_out, tab_state, page_state])
 
-        # 초기 로드
-        demo.load(
-            fn=show_new_tab,
-            outputs=[gallery_html, current_tab, new_page]
-        )
+        # JS 에서 호출될 수 있도록 함수 노출
+        demo.set_event_trigger("__setPage", set_page, [tab_state, page_state, page_state2], [gallery_out, tab_state, page_state, page_state2])
 
     return demo
 
-# 실행
+# ────────────────────────────────────────────────────────────────────────────────
+# 8. 실행 (Gradio Spaces 자동 감지를 위해 전역 app 변수 노출)
+app = create_gallery_interface()
+
 if __name__ == "__main__":
-    gallery = create_gallery_interface()
-    gallery.launch()
+    app.launch()