Create app.py

app.py

@@ -0,0 +1,306 @@
+import os
+import time
+import json
+import requests
+import base64
+import gradio as gr
+import datetime
+
+# 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"
+}
+
+# 갤러리 설정
+BEST_GAMES_FILE = "best_games.json"
+GAMES_PER_PAGE = 48
+GAMES_PER_ROW = 3
+
+# BEST 게임 초기화
+def initialize_best_games():
+    if not os.path.exists(BEST_GAMES_FILE):
+        best_games = [
+            {
+                "title": "테트리스",
+                "description": "클래식 테트리스 게임",
+                "url": "https://tmkdop.vercel.app",
+                "timestamp": time.time(),
+                "preview_image": "https://via.placeholder.com/300x200?text=Tetris"
+            },
+            {
+                "title": "스네이크 게임",
+                "description": "전통적인 스네이크 게임",
+                "url": "https://tmkdop.vercel.app",
+                "timestamp": time.time(),
+                "preview_image": "https://via.placeholder.com/300x200?text=Snake"
+            },
+            {
+                "title": "팩맨",
+                "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()
+
+# BEST 게임 로드
+def load_best_games():
+    try:
+        with open(BEST_GAMES_FILE, "r") as f:
+            return json.load(f)
+    except (FileNotFoundError, json.JSONDecodeError):
+        return []
+
+# Vercel API에서 최신 배포 목록 가져오기
+def get_latest_deployments():
+    try:
+        response = requests.get(
+            f"{VERCEL_API_URL}/deployments",
+            headers=HEADERS,
+            params={"limit": 100}
+        )
+        if response.status_code != 200:
+            print(f"Vercel API 오류: {response.status_code} - {response.text}")
+            return []
+
+        deployments = response.json().get("deployments", [])
+        games = []
+        for deployment in deployments:
+            if deployment.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)}")
+
+            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(' ', '+')}"
+                    ),
+                }
+            )
+
+        games.sort(key=lambda x: x["timestamp"], reverse=True)
+        return games
+    except Exception as e:
+        print(f"배포 목록 가져오기 오류: {str(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"):
+    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>"
+        )
+
+    html = """
+    <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;}}
+    </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 += 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>
+        """
+
+    html += "</div>"
+
+    if total_pages > 1:
+        html += '<div class="game-pagination">'
+        if current_page > 1:
+            html += (
+                f'<button class="page-btn prev" '
+                f'onclick="refreshGallery(\'{gallery_type.lower()}\',{current_page-1})">이전</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:
+            html += (
+                f'<button class="page-btn next" '
+                f'onclick="refreshGallery(\'{gallery_type.lower()}\',{current_page+1})">다음</button>'
+            )
+        html += "</div>"
+    html += """
+    <script>
+    function refreshGallery(type,page){
+        if(type==='new'){document.getElementById('new-btn').click();}
+        else{document.getElementById('best-btn').click();}
+    }
+    </script></div>"""
+    return html
+
+# 탭 인터페이스
+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(css=css) as demo:
+        gr.HTML(
+            "<div class='gallery-header'><h1>🎮 Vibe Game Craft 갤러리</h1>"
+            "<p>AI로 생성된 게임들을 탐색하고 플레이해보세요</p></div>"
+        )
+
+        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")
+
+        current_tab = gr.State("new")
+        new_page = gr.State(1)
+        best_page = gr.State(1)
+        gallery_html = gr.HTML(elem_id="gallery-content")
+
+        # 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
+
+        new_tab_btn.click(
+            fn=show_new_tab,
+            outputs=[gallery_html, current_tab, new_page]
+        )
+
+        # 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
+
+        best_tab_btn.click(
+            fn=show_best_tab,
+            outputs=[gallery_html, current_tab, best_page]
+        )
+
+        # 새로고침
+        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")
+
+        refresh_btn.click(
+            fn=refresh_gallery,
+            inputs=[current_tab, new_page, best_page],
+            outputs=[gallery_html]
+        )
+
+        # 초기 로드
+        demo.load(
+            fn=show_new_tab,
+            outputs=[gallery_html, current_tab, new_page]
+        )
+
+    return demo
+
+# 실행
+if __name__ == "__main__":
+    gallery = create_gallery_interface()
+    gallery.launch()