Update app.py

app.py

@@ -453,119 +453,123 @@ def html(cards, pg, total):
     
     return h
 
+# ───────────────────── 7. Gradio Blocks UI ─────────────────────
 # ───────────────────── 7. Gradio Blocks UI ─────────────────────
 def build():
     _init_best()
 
-    # --- 1) 헤더용 HTML 정의 ---------------------------------
+    # (1) ── 헤더 HTML (변경 없음) ─────────────────────────────
     header_html_snippet = """
     <style>
       .app-header{ text-align:center; margin-bottom:24px; }
       .badge-row{
-          display:inline-flex;   /* 가로 정렬 */
-          gap:8px;              /* 배지 사이 여백 */
+          display:inline-flex;
+          gap:8px;
           margin:8px 0;
       }
     </style>
-    
+
     <div class="app-header">
         <h1>🎮 Vibe Game Craft</h1>
 
         <div class="badge-row">
-            <!-- ① Vibe-Game 공간 배지 -->
             <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" alt="HF Vibe badge">
+                <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" alt="HF-Vibe">
             </a>
-
-            <!-- ② Game Gallery 배지 -->
             <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" alt="HF Gallery badge">
+                <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" alt="HF-Gallery">
             </a>
-
-            <!-- ③ Discord 배지 -->
             <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" alt="Discord badge">
+                <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" alt="Discord">
             </a>
         </div>
 
-        <p>프롬프트 입력만으로 최신 LLM들과 Agent가 협업하여 웹 기반 HTML5, JavaScript, CSS 게임을 생성합니다. 실시간 미리보기와 배포 기능도 지원됩니다.</p>
+        <p>프롬프트 입력만으로 최신 LLM들과 Agent가 협업하여 웹 기반 게임을 생성하고 배포합니다.</p>
     </div>
     """
 
-    # --- 2) Gradio Blocks 시작 --------------------------------
-    with gr.Blocks(
-        title="Vibe Game Craft",
-        css="""
-            footer{display:none !important;}
+    # (2) ── 전역 CSS (헤더 sticky + 스크롤 영역 재조정) ─────────
+    css_global = """
+        footer{display:none !important;}
 
-            .button-row{
-                position:fixed !important;
-                bottom:0 !important;
-                left:0 !important;
-                right:0 !important;
-                height:60px !important;
-                background:#f0f0f0 !important;
-                padding:10px !important;
-                text-align:center !important;
-                box-shadow:0 -2px 10px rgba(0,0,0,0.05) !important;
-                margin:0 !important;
-                z-index:1000 !important;
-            }
+        /* 상단 헤더를 항상 보이도록 고정 */
+        .app-header{
+            position:sticky;
+            top:0;
+            background:#fff;
+            z-index:1100;
+            padding:16px 0 8px;
+            border-bottom:1px solid #eee;
+        }
 
-            .button-row button{
-                margin:0 10px !important;
-                padding:10px 20px !important;
-                font-size:16px !important;
-                font-weight:bold !important;
-                border-radius:50px !important;
-            }
+        /* 하단 고정 버튼 바 */
+        .button-row{
+            position:fixed !important;
+            bottom:0 !important;
+            left:0 !important;
+            right:0 !important;
+            height:60px !important;
+            background:#f0f0f0 !important;
+            padding:10px !important;
+            text-align:center !important;
+            box-shadow:0 -2px 10px rgba(0,0,0,0.05) !important;
+            margin:0 !important;
+            z-index:1000 !important;
+        }
+        .button-row button{
+            margin:0 10px !important;
+            padding:10px 20px !important;
+            font-size:16px !important;
+            font-weight:bold !important;
+            border-radius:50px !important;
+        }
 
-            /* Allow scrolling in the HTML component */
-            #component-0{
-                overflow-y:auto !important;
-                height:calc(100vh - 60px) !important;
-            }
-        """
-    ) as demo:
+        /* 카드 그리드 스크롤 영역 */
+        #content-area{
+            overflow-y:auto !important;
+            height:calc(100vh - 60px - 160px) !important; /* 전체-높이 - 하단바 - 헤더 */
+            box-sizing:border-box;
+            padding-top:10px;
+        }
+    """
+
+    # (3) ── Gradio Blocks ─────────────────────────────────────
+    with gr.Blocks(title="Vibe Game Craft", css=css_global) as demo:
 
-        # (1) ✨ 헤더를 가장 먼저 렌더링
+        # ① 고정 헤더
         gr.HTML(header_html_snippet)
 
+        # ② 본문(카드 그리드) → 고유 ID 부여
+        out = gr.HTML(elem_id="content-area")
 
-        # 상태 및 출력
-        bp = gr.State(1) 
-        out = gr.HTML()
-        
-        # 페이지 네비게이션 (맨 아래 고정)
+        # ③ 하단 페이지 네비게이션 바
         with gr.Row(elem_classes="button-row"):
             b_prev = gr.Button("◀ 이전", size="lg")
             b_next = gr.Button("다음 ▶", size="lg")
-        
-        def show_best(p=1): 
+
+        # ── 상태 및 헬퍼 ───────────────────────────
+        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 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(prev, inputs=[bp], outputs=[out, bp])
-        b_next.click(nxt, inputs=[bp], outputs=[out, bp])
-        
-        # 초기 로드
-        demo.load(show_best, outputs=[out, bp])
-    
-    return demo
+        b_next.click(nxt,  inputs=[bp], outputs=[out, bp])
 
-app = build()
+        # 최초 로드
+        demo.load(show_best, outputs=[out, bp])
 
-if __name__ == "__main__":
-    app.launch()
+    return demo