Update app.py

app.py

@@ -646,8 +646,200 @@ class Demo:
         return []
 
 
+
 # ------------------------
-# 7) Gradio / Modelscope UI 빌드
+# 7) 실제 배포 함수를 수정하여 화면 표시
+# ------------------------
+
+def deploy_to_vercel(code: str):
+    try:
+        if not code or len(code.strip()) < 10:
+            # 반환할 HTML: "배포할 코드가 없습니다."
+            return """
+            <div style='color:red; padding:10px; border:1px solid red; border-radius:5px;'>
+                배포할 코드가 없습니다. 먼저 게임 코드를 생성해주세요.
+            </div>
+            """
+    
+        token = "A8IFZmgW2cqA4yUNlLPnci0N"
+        if not token:
+            return """
+            <div style='color:red; padding:10px; border:1px solid red; border-radius:5px;'>
+                Vercel 토큰이 설정되지 않았습니다.
+            </div>
+            """
+    
+        project_name = ''.join(random.choice(string.ascii_lowercase) for i in range(6))
+        deploy_url = "https://api.vercel.com/v13/deployments"
+        headers = {
+            "Authorization": f"Bearer {token}",
+            "Content-Type": "application/json"
+        }
+        package_json = {
+            "name": project_name,
+            "version": "1.0.0",
+            "private": True,
+            "dependencies": {"vite": "^5.0.0"},
+            "scripts": {
+                "dev": "vite",
+                "build": "echo 'No build needed' && mkdir -p dist && cp index.html dist/",
+                "preview": "vite preview"
+            }
+        }
+        files = [
+            {"file": "index.html", "data": code},
+            {"file": "package.json", "data": json.dumps(package_json, indent=2)}
+        ]
+        project_settings = {
+            "buildCommand": "npm run build",
+            "outputDirectory": "dist",
+            "installCommand": "npm install",
+            "framework": None
+        }
+        deploy_data = {
+            "name": project_name,
+            "files": files,
+            "target": "production",
+            "projectSettings": project_settings
+        }
+    
+        deploy_response = requests.post(deploy_url, headers=headers, json=deploy_data)
+        if deploy_response.status_code != 200:
+            return f"""
+            <div style='color:red; padding:10px; border:1px solid red; border-radius:5px;'>
+                배포 실패: {html.escape(deploy_response.text)}
+            </div>
+            """
+    
+        deployment_url = f"https://{project_name}.vercel.app"
+        time.sleep(3)
+    
+        return f"""
+        <div style='padding: 15px; background-color: #f0fff4; border: 1px solid #34c759; border-radius: 8px;'>
+            <h3 style='margin-top: 0; color: #34c759;'>✅ 배포 완료!</h3>
+            <p>게임이 성공적으로 배포되었습니다.</p>
+            <div style='margin-top: 10px; padding: 10px; background: #f8fafc; border-radius: 6px; display: flex; justify-content: space-between; align-items: center;'>
+                <a href="{deployment_url}" target="_blank" style='color: #0066cc; text-decoration: none; word-break: break-all;'>{deployment_url}</a>
+                <button onclick="navigator.clipboard.writeText('{deployment_url}')" style='background: #0066cc; color: white; border: none; border-radius: 4px; padding: 5px 10px; cursor: pointer;'>복사</button>
+            </div>
+        </div>
+        <script>
+        showDeployBanner('success','✅ 배포 완료!','게임이 성공적으로 배포되었습니다.','{deployment_url}');
+        document.getElementById('deploy-result-box').innerHTML = `
+            <div class="deploy-success">
+                <div class="success-icon">✅</div>
+                <div class="success-message">배포 완료!</div>
+                <div class="url-box">
+                    <a href="{deployment_url}" target="_blank">{deployment_url}</a>
+                    <button class="copy-btn" onclick="navigator.clipboard.writeText('{deployment_url}')">복사</button>
+                </div>
+            </div>
+        `;
+        </script>
+        """
+    except Exception as e:
+        return f"""
+        <div style='color:red; padding:10px; border:1px solid red; border-radius:5px;'>
+            오류 발생: {html.escape(str(e))}
+        </div>
+        <script>
+        showDeployBanner('error','⚠️ 시스템 오류','{html.escape(str(e))}');
+        </script>
+        """
+
+
+# ------------------------
+# "handle_deploy" 수정: 실제로 사용하여 결과 표시
+# ------------------------
+def handle_deploy(code, deploy_status):
+    """
+    이 함수를 호출하면:
+    1) 로딩 상태를 먼저 반환 (yield)
+    2) 실제 deploy_to_vercel() 실행 후 성공/실패 결과 HTML 반환
+    """
+    if not code:
+        # 코드가 없는 경우 즉시 에러 메시지
+        js_code = """
+        <script>
+        showDeployBanner('error', '⚠️ 배포 실패', '배포할 코드가 없습니다. 먼저 게임 코드를 생성해주세요.');
+        document.getElementById('deploy-result-box').innerHTML = `
+            <div class="deploy-error">
+                <div class="error-icon">⚠️</div>
+                <div class="error-message">배포할 코드가 없습니다.</div>
+            </div>
+        `;
+        </script>
+        """
+        return js_code, {
+            "is_deployed": False,
+            "status": "error",
+            "message": "배포할 코드가 없습니다.",
+            "url": ""
+        }
+
+    try:
+        # 1) 로딩 상태 표시
+        loading_js = """
+        <script>
+        showDeployBanner('loading', '🔄 배포 진행 중', 'Vercel에 게임을 배포하고 있습니다. 잠시만 기다려주세요.');
+        document.getElementById('deploy-result-box').innerHTML = `
+            <div class="deploy-loading">
+                <div class="loading-spinner"></div>
+                <div class="loading-message">Vercel에 배포 중입니다...</div>
+            </div>
+        `;
+        </script>
+        """
+        # Gradio에서는 "yield"를 사용하면 스트리밍 가능하지만,
+        # 간단히 한 번에 반환해도 됨. 여기서는 예시로 스트리밍 없이 진행.
+        # yield loading_js, deploy_status
+        
+        # 2) 실제 배포 실행
+        clean_code = remove_code_block(code)
+        result_html = deploy_to_vercel(clean_code)
+        
+        # 배포 결과를 화면에 표시
+        # 배포 성공 시 'success', 실패 시 해당 메시지
+        if "✅ 배포 완료!" in result_html:
+            # 성공
+            return result_html, {
+                "is_deployed": True,
+                "status": "success",
+                "url": "",
+                "message": "배포 성공"
+            }
+        else:
+            # 실패 또는 오류
+            return result_html, {
+                "is_deployed": False,
+                "status": "error",
+                "url": "",
+                "message": "배포 실패"
+            }
+
+    except Exception as e:
+        error_msg = str(e)
+        exception_js = f"""
+        <script>
+        showDeployBanner('error', '⚠️ 시스템 오류', '{error_msg}');
+        document.getElementById('deploy-result-box').innerHTML = `
+            <div class="deploy-error">
+                <div class="error-icon">⚠️</div>
+                <div class="error-message">시스템 오류: {error_msg}</div>
+            </div>
+        `;
+        </script>
+        """
+        return exception_js, {
+            "is_deployed": False,
+            "status": "error",
+            "message": error_msg,
+            "url": ""
+        }
+
+
+# ------------------------
+# 8) Gradio / Modelscope UI 빌드
 # ------------------------
 
 demo_instance = Demo()
@@ -665,7 +857,7 @@ with gr.Blocks(css_paths=["app.css"], theme=theme) as demo:
     header_html = gr.HTML("""
     <div class="app-header">
         <h1>🎮 Vibe Game Craft</h1>
-        <p>설명을 입력하면 웹 기반 HTML5, JavaScript, CSS 게임을 생성합니다. 직관적인 인터페이스로 쉽게 게임을 만들고, 실시간으로 미리보기를 확인하세요.</p>
+        <p>설명을 입력하면 웹 기반 HTML5, JavaScript, CSS 게임을 생성합니다. 실시간 미리보기와 배포 기능도 지원됩니다.</p>
     </div>
     
     <!-- 배포 결과 박스 - 헤더 바로 아래 위치 -->
@@ -684,7 +876,6 @@ with gr.Blocks(css_paths=["app.css"], theme=theme) as demo:
     </div>
     
     <style>
-    /* 전체 앱 스타일 */
     :root {
         --primary-color: #9c89b8;
         --secondary-color: #f0a6ca;
@@ -696,14 +887,11 @@ with gr.Blocks(css_paths=["app.css"], theme=theme) as demo:
         --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;
@@ -713,22 +901,18 @@ with gr.Blocks(css_paths=["app.css"], theme=theme) as demo:
         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);
@@ -739,44 +923,35 @@ with gr.Blocks(css_paths=["app.css"], theme=theme) as demo:
         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;
@@ -786,7 +961,6 @@ with gr.Blocks(css_paths=["app.css"], theme=theme) as demo:
         display: flex;
         align-items: center;
     }
-    
     .deploy-banner-url {
         color: #0066cc;
         text-decoration: none;
@@ -794,7 +968,6 @@ with gr.Blocks(css_paths=["app.css"], theme=theme) as demo:
         word-break: break-all;
         flex: 1;
     }
-    
     .deploy-banner-copy-btn {
         background: #0066cc;
         color: white;
@@ -805,14 +978,12 @@ with gr.Blocks(css_paths=["app.css"], theme=theme) as demo:
         cursor: pointer;
         font-size: 12px;
     }
-    
     .deploy-banner-copy-btn:hover {
         background: #0052a3;
     }
     </style>
     
     <script>
-    // URL 복사 함수
     function copyBannerUrl() {
         const url = document.getElementById('deploy-banner-url').href;
         navigator.clipboard.writeText(url)
@@ -825,8 +996,6 @@ with gr.Blocks(css_paths=["app.css"], theme=theme) as demo:
                 }, 1000);
             });
     }
-    
-    // 배포 배너 표시 함수
     function showDeployBanner(type, title, message, url) {
         const banner = document.getElementById('deploy-banner');
         const bannerTitle = document.getElementById('deploy-banner-title');
@@ -871,9 +1040,7 @@ with gr.Blocks(css_paths=["app.css"], theme=theme) as demo:
 
             # 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"
-                )
+                history_output = legacy.Chatbot(show_label=False, flushing=False, height=960, elem_classes="history_chatbot")
 
             # templates Drawer
             with antd.Drawer(
@@ -936,17 +1103,18 @@ with gr.Blocks(css_paths=["app.css"], theme=theme) as demo:
                             max_length=100000
                         )
                         gr.HTML('<div class="help-text">💡 원하는 게임의 설명을 입력하세요. 예: "테트리스 게임 제작해줘."</div>')
+
+                        # 배포 결과를 보여줄 HTML 박스
                         deploy_result_container = gr.HTML(
                             """
                             <div class="deploy-section">
                                 <div class="deploy-header">📤 배포 결과</div>
                                 <div id="deploy-result-box" class="deploy-result-box">
-                                <div class="no-deploy">아직 배포된 게임이 없습니다.</div>
+                                    <div class="no-deploy">아직 배포된 게임이 없습니다.</div>
                                 </div>
                             </div>
                             """
                         )
-       
                         
                         js_trigger = gr.HTML(elem_id="js-trigger", visible=False)
 
@@ -1018,195 +1186,15 @@ with gr.Blocks(css_paths=["app.css"], theme=theme) as demo:
                 outputs=[sandbox, state_tab]
             )
 
-            def deploy_to_vercel(code: str):
-                try:
-                    if not code or len(code.strip()) < 10:
-                        return "<div style='color:red; padding:10px; border:1px solid red; border-radius:5px;'>배포할 코드가 없습니다. 먼저 게임 코드를 생성해주세요.</div>"
-            
-                    token = "A8IFZmgW2cqA4yUNlLPnci0N"
-                    if not token:
-                        return "<div style='color:red; padding:10px; border:1px solid red; border-radius:5px;'>Vercel 토큰이 설정되지 않았습니다.</div>"
-            
-        # 프로젝트 이름 생성
-                    project_name = ''.join(random.choice(string.ascii_lowercase) for i in range(6))
-        
-        # Vercel API 요청 준비
-                    deploy_url = "https://api.vercel.com/v13/deployments"
-                    headers = {
-                        "Authorization": f"Bearer {token}",
-                        "Content-Type": "application/json"
-                    }
-        
-        # 패키지 정보
-                    package_json = {
-                        "name": project_name,
-                        "version": "1.0.0",
-                        "private": True,
-                        "dependencies": {"vite": "^5.0.0"},
-                        "scripts": {
-                            "dev": "vite",
-                            "build": "echo 'No build needed' && mkdir -p dist && cp index.html dist/",
-                            "preview": "vite preview"
-                        }
-                    }
-        
-        # 배포할 파일들
-                    files = [
-                        {"file": "index.html", "data": code},
-                        {"file": "package.json", "data": json.dumps(package_json, indent=2)}
-                    ]
-        
-        # 프로젝트 설정
-                    project_settings = {
-                        "buildCommand": "npm run build",
-                        "outputDirectory": "dist",
-                        "installCommand": "npm install",
-                        "framework": None
-                    }
-        
-        # 배포 데이터
-                    deploy_data = {
-                        "name": project_name,
-                        "files": files,
-                        "target": "production",
-                        "projectSettings": project_settings
-                    }
-        
-        # API 요청 및 응답 처리
-                    deploy_response = requests.post(deploy_url, headers=headers, json=deploy_data)
-                    if deploy_response.status_code != 200:
-                        return f"<div style='color:red; padding:10px; border:1px solid red; border-radius:5px;'>배포 실패: {deploy_response.text}</div>"
-        
-        # 배포 URL 생성 
-                    deployment_url = f"https://{project_name}.vercel.app"
-        
-        # 배포 완료 기다리기
-                    time.sleep(3)
-        
-        # 결과 반환
-                    return f"""
-                    <div style='padding: 15px; background-color: #f0fff4; border: 1px solid #34c759; border-radius: 8px;'>
-                        <h3 style='margin-top: 0; color: #34c759;'>✅ 배포 완료!</h3>
-                        <p>게임이 성공적으로 배포되었습니다.</p>
-                        <div style='margin-top: 10px; padding: 10px; background: #f8fafc; border-radius: 6px; display: flex; justify-content: space-between; align-items: center;'>
-                            <a href="{deployment_url}" target="_blank" style='color: #0066cc; text-decoration: none; word-break: break-all;'>{deployment_url}</a>
-                            <button onclick="navigator.clipboard.writeText('{deployment_url}')" style='background: #0066cc; color: white; border: none; border-radius: 4px; padding: 5px 10px; cursor: pointer;'>복사</button>
-                        </div>
-                    </div>
-                    """
-                except Exception as e:
-                    return f"<div style='color:red; padding:10px; border:1px solid red; border-radius:5px;'>오류 발생: {str(e)}</div>"
-
-
-            # handle_deploy
-            def handle_deploy(code, deploy_status):
-                if not code:
-                    js_code = """
-                    <script>
-                    showDeployBanner('error', '⚠️ 배포 실패', '배포할 코드가 없습니다. 먼저 게임 코드를 생성해주세요.');
-                    document.getElementById('deploy-result-box').innerHTML = `
-                        <div class="deploy-error">
-                            <div class="error-icon">⚠️</div>
-                            <div class="error-message">배포할 코드가 없습니다.</div>
-                        </div>
-                    `;
-                    </script>
-                    """
-                    return js_code, {
-                        "is_deployed": False,
-                        "status": "error",
-                        "message": "배포할 코드가 없습니다.",
-                        "url": ""
-                    }
-                
-                try:
-                    loading_js = """
-                    <script>
-                    showDeployBanner('loading', '🔄 배포 진행 중', 'Vercel에 게임을 배포하고 있습니다. 잠시만 기다려주세요.');
-                    document.getElementById('deploy-result-box').innerHTML = `
-                        <div class="deploy-loading">
-                            <div class="loading-spinner"></div>
-                            <div class="loading-message">Vercel에 배포 중입니다...</div>
-                        </div>
-                    `;
-                    </script>
-                    """
-                    yield loading_js, deploy_status
-                    
-                    clean_code = remove_code_block(code)
-                    result = deploy_to_vercel(clean_code)
-                    
-                    if result.get("status") == "success":
-                        url = result.get("url")
-                        success_js = f"""
-                        <script>
-                        showDeployBanner('success', '✅ 배포 완료!', '게임이 성공적으로 Vercel에 배포되었습니다.', '{url}');
-                        document.getElementById('deploy-result-box').innerHTML = `
-                            <div class="deploy-success">
-                                <div class="success-icon">✅</div>
-                                <div class="success-message">배포 완료!</div>
-                                <div class="url-box">
-                                    <a href="{url}" target="_blank">{url}</a>
-                                    <button class="copy-btn" onclick="navigator.clipboard.writeText('{url}')">복사</button>
-                                </div>
-                            </div>
-                        `;
-                        </script>
-                        """
-                        return success_js, {
-                            "is_deployed": True,
-                            "status": "success",
-                            "url": url,
-                            "message": "배포 완료!"
-                        }
-                    else:
-                        error_msg = result.get("message", "알 수 없는 오류")
-                        error_js = f"""
-                        <script>
-                        showDeployBanner('error', '⚠️ 배포 실패', '{error_msg}');
-                        document.getElementById('deploy-result-box').innerHTML = `
-                            <div class="deploy-error">
-                                <div class="error-icon">⚠️</div>
-                                <div class="error-message">배포 실패: {error_msg}</div>
-                            </div>
-                        `;
-                        </script>
-                        """
-                        return error_js, {
-                            "is_deployed": False,
-                            "status": "error",
-                            "message": error_msg,
-                            "url": ""
-                        }
-                        
-                except Exception as e:
-                    error_msg = str(e)
-                    exception_js = f"""
-                    <script>
-                    showDeployBanner('error', '⚠️ 시스템 오류', '{error_msg}');
-                    document.getElementById('deploy-result-box').innerHTML = `
-                        <div class="deploy-error">
-                            <div class="error-icon">⚠️</div>
-                            <div class="error-message">시스템 오류: {error_msg}</div>
-                        </div>
-                    `;
-                    </script>
-                    """
-                    return exception_js, {
-                        "is_deployed": False,
-                        "status": "error",
-                        "message": error_msg,
-                        "url": ""
-                    }
-
-            # deploy_btn.click 함수를 찾아 다음으로 완전히 교체하세요
+            # **핵심: 배포 버튼 -> handle_deploy 사용**
             deploy_btn.click(
-                fn=lambda code: deploy_to_vercel(remove_code_block(code)),
-                inputs=[code_output],
-                outputs=[deploy_result_container]
-)
+                fn=handle_deploy,
+                inputs=[code_output, deploy_status],   # code, deploy_status
+                outputs=[deploy_result_container, deploy_status]
+            )
+
 # ------------------------
-# 8) 실제 실행
+# 9) 실행
 # ------------------------
 
 if __name__ == "__main__":
@@ -1215,4 +1203,4 @@ if __name__ == "__main__":
         demo.queue(default_concurrency_limit=20).launch(ssr_mode=False)
     except Exception as e:
         print(f"Initialization error: {e}")
-        raise
+        raise