Update app.py

app.py

@@ -456,37 +456,82 @@ def html(cards, pg, total):
 # ───────────────────── 7. Gradio Blocks UI ─────────────────────
 def build():
     _init_best()
-    with gr.Blocks(title="Vibe Game Craft", css="""
-        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;
-        }
-        
-        .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:
+
+    # --- 1) 헤더용 HTML 정의 ---------------------------------
+    header_html_snippet = """
+    <style>
+      .app-header{ text-align:center; margin-bottom:24px; }
+      .badge-row{
+          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">
+            </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">
+            </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">
+            </a>
+        </div>
+
+        <p>프롬프트 입력만으로 최신 LLM들과 Agent가 협업하여 웹 기반 HTML5, JavaScript, CSS 게임을 생성합니다. 실시간 미리보기와 배포 기능도 지원됩니다.</p>
+    </div>
+    """
+
+    # --- 2) Gradio Blocks 시작 --------------------------------
+    with gr.Blocks(
+        title="Vibe Game Craft",
+        css="""
+            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;
+            }
+
+            .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:
+
+        # (1) ✨ 헤더를 가장 먼저 렌더링
+        gr.HTML(header_html_snippet)
+
+
         # 상태 및 출력
         bp = gr.State(1) 
         out = gr.HTML()