Update app.py

app.py

@@ -650,9 +650,11 @@ class Demo:
 # ------------------------
 # 7) 실제 배포 함수를 수정하여 화면 표시
 # ------------------------
+###############################################
+# 1) deploy_to_vercel 함수 (로깅 및 HTML 반환)
+###############################################
 def deploy_to_vercel(code: str):
     print("[DEBUG] deploy_to_vercel() 시작. code 길이:", len(code) if code else 0)
-    
     try:
         if not code or len(code.strip()) < 10:
             print("[DEBUG] code가 짧아서 배포할 수 없음.")
@@ -662,7 +664,7 @@ def deploy_to_vercel(code: str):
             </div>
             <script>console.log('[DEBUG] 배포 실패: code가 너무 짧습니다.');</script>
             """
-    
+
         token = "A8IFZmgW2cqA4yUNlLPnci0N"
         if not token:
             print("[DEBUG] Vercel 토큰이 없음.")
@@ -672,7 +674,7 @@ def deploy_to_vercel(code: str):
             </div>
             <script>console.log('[DEBUG] 배포 실패: Vercel 토큰 없음');</script>
             """
-    
+
         project_name = ''.join(random.choice(string.ascii_lowercase) for i in range(6))
         deploy_url = "https://api.vercel.com/v13/deployments"
         print(f"[DEBUG] 생성된 project_name: {project_name}")
@@ -708,12 +710,12 @@ def deploy_to_vercel(code: str):
             "target": "production",
             "projectSettings": project_settings
         }
-    
+
         print("[DEBUG] Vercel API 요청 전송중...")
         deploy_response = requests.post(deploy_url, headers=headers, json=deploy_data)
         print("[DEBUG] 응답 status_code:", deploy_response.status_code)
         print("[DEBUG] 응답 body:", deploy_response.text[:300], "..." if len(deploy_response.text) > 300 else "")
-        
+
         if deploy_response.status_code != 200:
             return f"""
             <div style='color:red; padding:10px; border:1px solid red; border-radius:5px;'>
@@ -721,11 +723,11 @@ def deploy_to_vercel(code: str):
             </div>
             <script>console.log('[DEBUG] 배포 실패: {html.escape(deploy_response.text)}');</script>
             """
-    
+
         deployment_url = f"https://{project_name}.vercel.app"
         print("[DEBUG] 배포 성공 추정. 3초 대기 후 최종 안내...")
         time.sleep(3)
-    
+
         success_html = f"""
         <div style='padding: 15px; background-color: #f0fff4; border: 1px solid #34c759; border-radius: 8px;'>
             <h3 style='margin-top: 0; color: #34c759;'>✅ 배포 완료!</h3>
@@ -766,13 +768,13 @@ def deploy_to_vercel(code: str):
         """
 
 
-# ------------------------
-# "handle_deploy" 수정: 실제로 사용하여 결과 표시
-# ------------------------
+###############################################
+# 2) handle_deploy 함수 (로깅 + 반환 HTML)
+###############################################
 def handle_deploy(code, deploy_status):
     print("[DEBUG] handle_deploy() 함수가 호출되었습니다.")
-    print("[DEBUG] 전달된 code:", repr(code[:300] if code else code))  # 코드 일부만 출력
-    
+    print("[DEBUG] 전달된 code:", repr(code[:300] if code else code))
+
     if not code:
         js_code = """
         <script>
@@ -795,30 +797,251 @@ def handle_deploy(code, deploy_status):
         }
 
     try:
-        # 로딩 상태 표시
-        # (스트리밍을 쓰지 않고, 한꺼번에 HTML 반환)
         print("[DEBUG] 배포 로딩 상태 HTML 생성 중...")
-        
         clean_code = remove_code_block(code)
         print("[DEBUG] remove_code_block 후 clean_code 길이:", len(clean_code))
-        
-        # 실제 배포
+
         print("[DEBUG] deploy_to_vercel() 호출 시작")
         result_html = deploy_to_vercel(clean_code)
         print("[DEBUG] deploy_to_vercel() 결과 수신:")
         print(result_html[:500], "..." if len(result_html) > 500 else "")
+
+        debug_injection = """
+        <script>
+        console.log('[DEBUG] 배포 후 결과 HTML:', %s);
+        </script>
+        """ % (json.dumps(result_html[:300]) if len(result_html) > 300 else json.dumps(result_html))
+
+        final_html = result_html + debug_injection
         
-        # 브라우저 console.log로도 표시
+        if "✅ 배포 완료!" in result_html:
+            print("[DEBUG] 배포 성공으로 판단")
+            return final_html, {
+                "is_deployed": True,
+                "status": "success",
+                "url": "",
+                "message": "배포 성공"
+            }
+        else:
+            print("[DEBUG] 배포 실패 또는 오류")
+            return final_html, {
+                "is_deployed": False,
+                "status": "error",
+                "url": "",
+                "message": "배포 실패"
+            }
+
+    except Exception as e:
+        error_msg = str(e)
+        print("[ERROR] handle_deploy에서 예외 발생:", error_msg)
+        exception_js = f"""
+        <script>
+        console.log('[DEBUG] handle_deploy 예외: {error_msg}');
+        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": ""
+        }
+
+
+#################################################
+# 3) deploy_result = gr.HTML(unsafe_allow_html=True)
+#################################################
+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>
+    """,
+    unsafe_allow_html=True  # <--- 핵심: 스크립트 실행 허용
+)
+
+
+#################################################
+# 4) deploy_btn 클릭 이벤트
+#################################################
+deploy_btn.click(
+    fn=handle_deploy,
+    inputs=[code_output, deploy_status],
+    outputs=[deploy_result_container, deploy_status]
+)
+###############################################
+# 1) deploy_to_vercel 함수 (로깅 및 HTML 반환)
+###############################################
+def deploy_to_vercel(code: str):
+    print("[DEBUG] deploy_to_vercel() 시작. code 길이:", len(code) if code else 0)
+    try:
+        if not code or len(code.strip()) < 10:
+            print("[DEBUG] code가 짧아서 배포할 수 없음.")
+            return """
+            <div style='color:red; padding:10px; border:1px solid red; border-radius:5px;'>
+                배포할 코드가 없습니다. 먼저 게임 코드를 생성해주세요.
+            </div>
+            <script>console.log('[DEBUG] 배포 실패: code가 너무 짧습니다.');</script>
+            """
+
+        token = "A8IFZmgW2cqA4yUNlLPnci0N"
+        if not token:
+            print("[DEBUG] Vercel 토큰이 없음.")
+            return """
+            <div style='color:red; padding:10px; border:1px solid red; border-radius:5px;'>
+                Vercel 토큰이 설정되지 않았습니다.
+            </div>
+            <script>console.log('[DEBUG] 배포 실패: Vercel 토큰 없음');</script>
+            """
+
+        project_name = ''.join(random.choice(string.ascii_lowercase) for i in range(6))
+        deploy_url = "https://api.vercel.com/v13/deployments"
+        print(f"[DEBUG] 생성된 project_name: {project_name}")
+
+        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
+        }
+
+        print("[DEBUG] Vercel API 요청 전송중...")
+        deploy_response = requests.post(deploy_url, headers=headers, json=deploy_data)
+        print("[DEBUG] 응답 status_code:", deploy_response.status_code)
+        print("[DEBUG] 응답 body:", deploy_response.text[:300], "..." if len(deploy_response.text) > 300 else "")
+
+        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>
+            <script>console.log('[DEBUG] 배포 실패: {html.escape(deploy_response.text)}');</script>
+            """
+
+        deployment_url = f"https://{project_name}.vercel.app"
+        print("[DEBUG] 배포 성공 추정. 3초 대기 후 최종 안내...")
+        time.sleep(3)
+
+        success_html = 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>
+        console.log('[DEBUG] 배포 성공, deployment_url: {deployment_url}');
+        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>
+        """
+        print("[DEBUG] 최종 리턴 HTML 생성 완료")
+        return success_html
+
+    except Exception as e:
+        print("[ERROR] deploy_to_vercel() 예외:", e)
+        return f"""
+        <div style='color:red; padding:10px; border:1px solid red; border-radius:5px;'>
+            오류 발생: {html.escape(str(e))}
+        </div>
+        <script>
+        console.log('[DEBUG] deploy_to_vercel 내부 예외: {html.escape(str(e))}');
+        showDeployBanner('error','⚠️ 시스템 오류','{html.escape(str(e))}');
+        </script>
+        """
+
+
+###############################################
+# 2) handle_deploy 함수 (로깅 + 반환 HTML)
+###############################################
+def handle_deploy(code, deploy_status):
+    print("[DEBUG] handle_deploy() 함수가 호출되었습니다.")
+    print("[DEBUG] 전달된 code:", repr(code[:300] if code else code))
+
+    if not code:
+        js_code = """
+        <script>
+        console.log('[DEBUG] 배포할 코드가 없어 에러 처리');
+        showDeployBanner('error', '⚠️ 배포 실패', '배포할 코드가 없습니다. 먼저 게임 코드를 생성해주세요.');
+        document.getElementById('deploy-result-box').innerHTML = `
+            <div class="deploy-error">
+                <div class="error-icon">⚠️</div>
+                <div class="error-message">배포할 코드가 없습니다.</div>
+            </div>
+        `;
+        </script>
+        """
+        print("[DEBUG] code가 없으므로 에러 HTML 반환")
+        return js_code, {
+            "is_deployed": False,
+            "status": "error",
+            "message": "배포할 코드가 없습니다.",
+            "url": ""
+        }
+
+    try:
+        print("[DEBUG] 배포 로딩 상태 HTML 생성 중...")
+        clean_code = remove_code_block(code)
+        print("[DEBUG] remove_code_block 후 clean_code 길이:", len(clean_code))
+
+        print("[DEBUG] deploy_to_vercel() 호출 시작")
+        result_html = deploy_to_vercel(clean_code)
+        print("[DEBUG] deploy_to_vercel() 결과 수신:")
+        print(result_html[:500], "..." if len(result_html) > 500 else "")
+
         debug_injection = """
         <script>
         console.log('[DEBUG] 배포 후 결과 HTML:', %s);
         </script>
         """ % (json.dumps(result_html[:300]) if len(result_html) > 300 else json.dumps(result_html))
 
-        # 배포 결과를 종합한 HTML
         final_html = result_html + debug_injection
         
-        # 성공/실패 판단
         if "✅ 배포 완료!" in result_html:
             print("[DEBUG] 배포 성공으로 판단")
             return final_html, {
@@ -858,6 +1081,8 @@ def handle_deploy(code, deploy_status):
             "url": ""
         }
 
+
+
 # ------------------------
 # 8) Gradio / Modelscope UI 빌드
 # ------------------------
@@ -1124,7 +1349,11 @@ with gr.Blocks(css_paths=["app.css"], theme=theme) as demo:
                         )
                         gr.HTML('<div class="help-text">💡 원하는 게임의 설명을 입력하세요. 예: "테트리스 게임 제작해줘."</div>')
 
-                        # 배포 결과를 보여줄 HTML 박스
+
+
+#################################################
+# 3) deploy_result = gr.HTML(unsafe_allow_html=True)
+#################################################
                         deploy_result_container = gr.HTML(
                             """
                             <div class="deploy-section">
@@ -1133,10 +1362,10 @@ with gr.Blocks(css_paths=["app.css"], theme=theme) as demo:
                                     <div class="no-deploy">아직 배포된 게임이 없습니다.</div>
                                 </div>
                             </div>
-                            """
+                            """,
+                            unsafe_allow_html=True  # <--- 핵심: 스크립트 실행 허용
                         )
-                        
-                        js_trigger = gr.HTML(elem_id="js-trigger", visible=False)
+
 
             # 이벤트 / 콜백
             # Code Drawer
@@ -1206,13 +1435,19 @@ with gr.Blocks(css_paths=["app.css"], theme=theme) as demo:
                 outputs=[sandbox, state_tab]
             )
 
-            # **핵심: 배포 버튼 -> handle_deploy 사용**
+
+
+#################################################
+# 4) deploy_btn 클릭 이벤트
+#################################################
             deploy_btn.click(
                 fn=handle_deploy,
-                inputs=[code_output, deploy_status],   # code, deploy_status
+                inputs=[code_output, deploy_status],
                 outputs=[deploy_result_container, deploy_status]
             )
 
+
+
 # ------------------------
 # 9) 실행
 # ------------------------