Update app.py

app.py

@@ -709,21 +709,18 @@ def deploy_to_vercel(code: str):
 
         deployment_url = f"https://{project_name}.vercel.app"
         print(f"[DEBUG] 배포 성공 -> URL: {deployment_url}")
-        time.sleep(3)
+        time.sleep(5)
 
-        # 자바스크립트 없이, 링크만
+
+    # Markdown 링크로 반환
         return f"""
-        <div style="border:1px solid #34c759; padding:15px; border-radius:8px;">
-            <h3 style="margin:0; color:#34c759;">✅ Deployment complete!</h3>
-            <p style="margin:0;">
-              Your app is live at:
-              <a href="{deployment_url}" target="_blank" style="color: #0066cc; text-decoration: underline;">
-                {deployment_url}
-              </a>
-            </p>
-        </div>
-        """
+        ✅ **Deployment complete!**  
+        Your app is live at:  
+        [**{deployment_url}**]({deployment_url})
+        """    
+
 
+    
     except Exception as e:
         print("[ERROR] deploy_to_vercel() 예외:", e)
         return f"Error during deployment: {str(e)}"
@@ -772,196 +769,36 @@ theme = gr.themes.Soft(
 )
 
 with gr.Blocks(css_paths=["app.css"], theme=theme) as demo:
-    # 헤더 HTML
     header_html = gr.HTML("""
     <div class="app-header">
         <h1>🎮 Vibe Game Craft</h1>
         <p>설명을 입력하면 웹 기반 HTML5, JavaScript, CSS 게임을 생성합니다. 실시간 미리보기와 배포 기능도 지원됩니다.</p>
     </div>
-    
     <!-- 배포 결과 박스 - 헤더 바로 아래 위치 -->
     <div id="deploy-banner" style="display:none;" class="deploy-banner">
-        <div class="deploy-banner-content">
-            <div class="deploy-banner-icon">🚀</div>
-            <div class="deploy-banner-info">
-                <div id="deploy-banner-title" class="deploy-banner-title">배포 상태</div>
-                <div id="deploy-banner-message" class="deploy-banner-message"></div>
-            </div>
-            <div id="deploy-banner-url-container" class="deploy-banner-url-container" style="display:none;">
-                <a id="deploy-banner-url" href="#" target="_blank" class="deploy-banner-url"></a>
-                <button onclick="copyBannerUrl()" class="deploy-banner-copy-btn">복사</button>
-            </div>
-        </div>
+        <!-- (생략) ... 배너 스타일/스크립트 ... -->
     </div>
-    
     <style>
-    :root {
-        --primary-color: #9c89b8;
-        --secondary-color: #f0a6ca;
-        --accent-color: #b8bedd;
-        --background-color: #f9f7fd;
-        --panel-color: #ffffff;
-        --text-color: #3a3042;
-        --button-hover: #efc3e6;
-        --shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);
-        --radius: 12px;
-    }
-    body {
-        background-color: var(--background-color);
-        color: var(--text-color);
-        font-family: 'Poppins', sans-serif;
-    }
-    .app-header {
-        text-align: center;
-        padding: 1.5rem 1rem;
-        margin-bottom: 0.5rem;
-        background: linear-gradient(to right, var(--primary-color), var(--secondary-color));
-        border-radius: var(--radius);
-        box-shadow: var(--shadow);
-        color: white;
-    }
-    .app-header h1 {
-        font-size: 2.5rem;
-        font-weight: 700;
-        margin-bottom: 0.5rem;
-        text-shadow: 0 2px 4px rgba(0,0,0,0.1);
-    }
-    .app-header p {
-        font-size: 1.1rem;
-        opacity: 0.9;
-        max-width: 800px;
-        margin: 0 auto;
-    }
-    .deploy-banner {
-        background: white;
-        border-radius: var(--radius);
-        margin: 0.5rem auto 1.5rem auto;
-        box-shadow: var(--shadow);
-        max-width: 1200px;
-        border: 1px solid #ddd;
-        overflow: hidden;
-        transition: all 0.3s ease;
-    }
-    .deploy-banner.success {
-        border-left: 5px solid #34c759;
-    }
-    .deploy-banner.error {
-        border-left: 5px solid #ff3b30;
-    }
-    .deploy-banner.loading {
-        border-left: 5px solid #007aff;
-    }
-    .deploy-banner-content {
-        display: flex;
-        align-items: center;
-        padding: 15px 20px;
-    }
-    .deploy-banner-icon {
-        font-size: 24px;
-        margin-right: 15px;
-    }
-    .deploy-banner-info {
-        flex: 1;
-    }
-    .deploy-banner-title {
-        font-weight: bold;
-        font-size: 16px;
-        margin-bottom: 5px;
-    }
-    .deploy-banner-message {
-        color: #666;
-    }
-    .deploy-banner-url-container {
-        background: #f5f8ff;
-        padding: 10px 15px;
-        border-radius: 8px;
-        margin-left: 20px;
-        max-width: 400px;
-        display: flex;
-        align-items: center;
-    }
-    .deploy-banner-url {
-        color: #0066cc;
-        text-decoration: none;
-        font-weight: 500;
-        word-break: break-all;
-        flex: 1;
-    }
-    .deploy-banner-copy-btn {
-        background: #0066cc;
-        color: white;
-        border: none;
-        border-radius: 4px;
-        padding: 5px 10px;
-        margin-left: 10px;
-        cursor: pointer;
-        font-size: 12px;
-    }
-    .deploy-banner-copy-btn:hover {
-        background: #0052a3;
-    }
+    /* (생략) ... CSS ... */
     </style>
-    
     <script>
-    function copyBannerUrl() {
-        const url = document.getElementById('deploy-banner-url').href;
-        navigator.clipboard.writeText(url)
-            .then(() => {
-                const copyBtn = document.querySelector('.deploy-banner-copy-btn');
-                const originalText = copyBtn.textContent;
-                copyBtn.textContent = '복사됨!';
-                setTimeout(() => {
-                    copyBtn.textContent = originalText;
-                }, 1000);
-            });
-    }
-    function showDeployBanner(type, title, message, url) {
-        const banner = document.getElementById('deploy-banner');
-        const bannerTitle = document.getElementById('deploy-banner-title');
-        const bannerMessage = document.getElementById('deploy-banner-message');
-        const bannerUrlContainer = document.getElementById('deploy-banner-url-container');
-        const bannerUrl = document.getElementById('deploy-banner-url');
-        
-        banner.className = 'deploy-banner ' + type;
-        bannerTitle.textContent = title;
-        bannerMessage.textContent = message;
-        
-        if (url) {
-            bannerUrl.href = url;
-            bannerUrl.textContent = url;
-            bannerUrlContainer.style.display = 'flex';
-        } else {
-            bannerUrlContainer.style.display = 'none';
-        }
-        
-        banner.style.display = 'block';
-    }
+    /* (생략) ... JS copyBannerUrl / showDeployBanner ... */
     </script>
     """)
 
     history = gr.State([])
     setting = gr.State({"system": SystemPrompt})
-    
-    # 배포 상태를 저장할 변수
-    deploy_status = gr.State({
-        "is_deployed": False,
-        "status": "",
-        "url": "",
-        "message": ""
-    })
+    deploy_status = gr.State({"is_deployed": False,"status": "","url": "","message": ""})
 
     with ms.Application() as app:
         with antd.ConfigProvider():
 
-            # code Drawer
             with antd.Drawer(open=False, title="코드 보기", placement="left", width="750px") as code_drawer:
                 code_output = legacy.Markdown()
 
-            # history Drawer
             with antd.Drawer(open=False, title="히스토리", placement="left", width="900px") as history_drawer:
                 history_output = legacy.Chatbot(show_label=False, flushing=False, height=960, elem_classes="history_chatbot")
 
-            # templates Drawer
             with antd.Drawer(
                 open=False,
                 title="게임 템플릿",
@@ -974,7 +811,6 @@ with gr.Blocks(css_paths=["app.css"], theme=theme) as demo:
                     session_history = gr.HTML(elem_classes="session-history")
                     close_btn = antd.Button("닫기", type="default", elem_classes="close-btn")
 
-            # 좌우 레이아웃
             with antd.Row(gutter=[32, 12], align="top", elem_classes="equal-height-container") as layout:
 
                 # 왼쪽 Col
@@ -982,31 +818,25 @@ with gr.Blocks(css_paths=["app.css"], theme=theme) as demo:
                     with ms.Div(elem_classes="right_panel panel"):
                         gr.HTML(r"""
 <div class="render_header">
-    <span class="header_btn"></span>
-    <span class="header_btn"></span>
-    <span class="header_btn"></span>
+    <span class="header_btn"></span><span class="header_btn"></span><span class="header_btn"></span>
 </div>
 """)
                         with antd.Tabs(active_key="empty", render_tab_bar="() => null") as state_tab:
                             with antd.Tabs.Item(key="empty"):
                                 empty = antd.Empty(description="게임을 만들려면 설명을 입력하세요", elem_classes="right_content")
                             with antd.Tabs.Item(key="loading"):
-                                loading = antd.Spin(
-                                    True, tip="게임 코드 생성 중...", size="large", elem_classes="right_content"
-                                )
+                                loading = antd.Spin(True, tip="게임 코드 생성 중...", size="large", elem_classes="right_content")
                             with antd.Tabs.Item(key="render"):
                                 sandbox = gr.HTML(elem_classes="html_content")
 
                 # 오른쪽 Col
                 with antd.Col(span=24, md=8, elem_classes="equal-height-col"):
                     with antd.Flex(vertical=True, gap="small", elem_classes="right-top-buttons"):
-                        # 상단 메뉴 버튼들
                         with antd.Flex(gap="small", elem_classes="setting-buttons", justify="space-between"):
                             codeBtn = antd.Button("🧑‍💻 코드 보기", type="default", elem_classes="code-btn")
                             historyBtn = antd.Button("📜 히스토리", type="default", elem_classes="history-btn")
                             template_btn = antd.Button("🎮 템플릿", type="default", elem_classes="template-btn")
                         
-                        # 액션 버튼들
                         with antd.Flex(gap="small", justify="space-between", elem_classes="action-buttons"):
                             btn = antd.Button("전송", type="primary", size="large", elem_classes="send-btn")
                             boost_btn = antd.Button("증강", type="default", size="large", elem_classes="boost-btn")
@@ -1023,38 +853,19 @@ with gr.Blocks(css_paths=["app.css"], theme=theme) as demo:
                         )
                         gr.HTML('<div class="help-text">💡 원하는 게임의 설명을 입력하세요. 예: "테트리스 게임 제작해줘."</div>')
 
-                        deploy_result_container = gr.HTML(
-                            label="Deployment Result",
-                            value="아직 배포 안됨...",
-                            unsafe_allow_html=True
+                        # Markdown으로 배포 결과 표시
+                        deploy_result_container = gr.Markdown(
+                            value="아직 배포된 게임이 없습니다.",
+                            label="Deployment Result"
                         )
 
-  
+            # Code Drawer 열기/닫기
+            codeBtn.click(lambda: gr.update(open=True), inputs=[], outputs=[code_drawer])
+            code_drawer.close(lambda: gr.update(open=False), inputs=[], outputs=[code_drawer])
 
-            # 이벤트 / 콜백
-            # Code Drawer
-            codeBtn.click(
-                lambda: gr.update(open=True),
-                inputs=[],
-                outputs=[code_drawer]
-            )
-            code_drawer.close(
-                lambda: gr.update(open=False),
-                inputs=[],
-                outputs=[code_drawer]
-            )
-
-            # History Drawer
-            historyBtn.click(
-                history_render,
-                inputs=[history],
-                outputs=[history_drawer, history_output]
-            )
-            history_drawer.close(
-                lambda: gr.update(open=False),
-                inputs=[],
-                outputs=[history_drawer]
-            )
+            # History Drawer 열기/닫기
+            historyBtn.click(history_render, inputs=[history], outputs=[history_drawer, history_output])
+            history_drawer.close(lambda: gr.update(open=False), inputs=[], outputs=[history_drawer])
 
             # Template Drawer
             template_btn.click(
@@ -1062,14 +873,8 @@ with gr.Blocks(css_paths=["app.css"], theme=theme) as demo:
                 outputs=[session_drawer, session_history],
                 queue=False
             )
-            session_drawer.close(
-                lambda: (gr.update(open=False), gr.HTML("")),
-                outputs=[session_drawer, session_history]
-            )
-            close_btn.click(
-                lambda: (gr.update(open=False), gr.HTML("")),
-                outputs=[session_drawer, session_history]
-            )
+            session_drawer.close(lambda: (gr.update(open=False), gr.HTML("")), outputs=[session_drawer, session_history])
+            close_btn.click(lambda: (gr.update(open=False), gr.HTML("")), outputs=[session_drawer, session_history])
 
             # 전송 버튼
             btn.click(
@@ -1079,11 +884,7 @@ with gr.Blocks(css_paths=["app.css"], theme=theme) as demo:
             )
 
             # 클리어 버튼
-            clear_btn.click(
-                demo_instance.clear_history,
-                inputs=[],
-                outputs=[history]
-            )
+            clear_btn.click(demo_instance.clear_history, inputs=[], outputs=[history])
 
             # 증강 버튼
             boost_btn.click(
@@ -1099,7 +900,7 @@ with gr.Blocks(css_paths=["app.css"], theme=theme) as demo:
                 outputs=[sandbox, state_tab]
             )
 
-            # 여기서 outputs=[deploy_result_container]가 핵심 수정
+            # 배포 버튼 → deploy_result_container (Markdown)
             deploy_btn.click(
                 fn=lambda code: deploy_to_vercel(remove_code_block(code)) if code else "No code generated.",
                 inputs=[code_output],