Update app.py

app.py

@@ -654,15 +654,9 @@ with gr.Blocks(css_paths=["app.css"], theme=theme) as demo:
                         )
                         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>
-                        </div>
-                        """)
+                        # 배포 결과 표시 - 수정된 부분
+                        deploy_status_text = gr.Markdown("", elem_id="deploy-status-text")
+                        deploy_url_link = gr.HTML("", elem_id="deploy-url-link")
 
                         # 더 이상 자바스크립트 삽입 없음
                         js_trigger = gr.HTML(elem_id="js-trigger", visible=False)
@@ -728,96 +722,35 @@ with gr.Blocks(css_paths=["app.css"], theme=theme) as demo:
                 outputs=[sandbox, state_tab]
             )
 
-            def deploy_to_vercel(code: str):
-                """
-                배포 로직 (API 호출) - 스크립트 없이
-                """
-                try:
-                    token = "A8IFZmgW2cqA4yUNlLPnci0N"  # 실제 토큰
-                    if not token:
-                        return {"status": "error", "message": "Vercel 토큰이 설정되지 않았습니다."}
-
-                    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 {"status": "error", "message": f"배포 실패: {deploy_response.text}"}
-                    
-                    deployment_url = f"https://{project_name}.vercel.app"
-                    time.sleep(5)
-                    
-                    return {
-                        "status": "success",
-                        "url": deployment_url,
-                        "project_name": project_name
-                    }
-                except Exception as e:
-                    return {"status": "error", "message": f"배포 중 오류 발생: {str(e)}"}
-
-            # ─── 스크립트 없이 순수 HTML만 반환하는 handle_deploy ───
-            def handle_deploy(code, deploy_status):
+            # 수정된 handle_deploy 함수
+            async def handle_deploy(code, deploy_status):
                 if not code:
-                    # 코드가 없으면 바로 실패
-                    error_html = """
-                    <div style="border-left:5px solid #ff3b30; padding:10px; background:#ffecec; margin-top:10px;">
-                        <strong>⚠️ 배포 실패</strong><br>
-                        배포할 코드가 없습니다. 먼저 게임 코드를 생성해주세요.
-                    </div>
-                    """
-                    return error_html, {
+                    return "⚠️ **배포 실패**: 배포할 코드가 없습니다.", "", {
                         "is_deployed": False,
                         "status": "error",
                         "message": "배포할 코드가 없습니다.",
                         "url": ""
                     }
                 
+                # 로딩 상태 표시
+                yield "⏳ **배포 중**... 잠시만 기다려주세요.", "", {
+                    "is_deployed": False,
+                    "status": "loading",
+                    "message": "배포 중...",
+                    "url": ""
+                }
+                
+                # 비동기 환경에서 UI 업데이트 보장
+                await asyncio.sleep(0.5)
+                
                 try:
-                    # 배포 실행
                     clean_code = remove_code_block(code)
                     result = deploy_to_vercel(clean_code)
-
+                    
                     if result.get("status") == "success":
-                        # 성공 시 URL을 순수 HTML로 표시
-                        url = result["url"]
-                        success_html = f"""
-                        <div style="border-left:5px solid #34c759; padding:10px; background:#e8f5e9; margin-top:10px;">
-                            <strong>✅ 배포 완료!</strong><br>
-                            <p>아래 주소에서 게임을 확인할 수 있습니다:</p>
-                            <a href="{url}" target="_blank" style="color:#1976d2;">{url}</a>
-                        </div>
-                        """
-                        return success_html, {
+                        url = result.get("url", "")
+                        url_html = f'<a href="{url}" target="_blank" class="deploy-url">{url}</a>'
+                        return "✅ **배포 완료!** 아래 주소에서 게임을 확인할 수 있습니다:", url_html, {
                             "is_deployed": True,
                             "status": "success",
                             "url": url,
@@ -825,36 +758,28 @@ with gr.Blocks(css_paths=["app.css"], theme=theme) as demo:
                         }
                     else:
                         error_msg = result.get("message", "알 수 없는 오류")
-                        error_html = f"""
-                        <div style="border-left:5px solid #ff3b30; padding:10px; background:#ffecec; margin-top:10px;">
-                            <strong>⚠️ 배포 실패</strong><br>{error_msg}
-                        </div>
-                        """
-                        return error_html, {
+                        return f"⚠️ **배포 실패**: {error_msg}", "", {
                             "is_deployed": False,
                             "status": "error",
                             "message": error_msg,
                             "url": ""
                         }
                 except Exception as e:
-                    # 시스템 오류
                     err = str(e)
-                    error_html = f"""
-                    <div style="border-left:5px solid #ff3b30; padding:10px; background:#ffecec; margin-top:10px;">
-                        <strong>⚠️ 시스템 오류</strong><br>{err}
-                    </div>
-                    """
-                    return error_html, {
+                    return f"⚠️ **시스템 오류**: {err}", "", {
                         "is_deployed": False,
                         "status": "error",
                         "message": err,
                         "url": ""
                     }
 
+            # 수정된 배포 버튼 이벤트
             deploy_btn.click(
                 fn=handle_deploy,
                 inputs=[code_output, deploy_status],
-                outputs=[deploy_result_container, deploy_status]
+                outputs=[deploy_status_text, deploy_url_link, deploy_status],
+                api_name="deploy",
+                queue=True
             )