Update app.py

app.py

@@ -668,13 +668,13 @@ with gr.Blocks(css_paths=["app.css"], theme=theme) as demo:
         <p>설명을 입력하면 웹 기반 HTML5, JavaScript, CSS 게임을 생성합니다. 직관적인 인터페이스로 쉽게 게임을 만들고, 실시간으로 미리보기를 확인하세요.</p>
     </div>
     
-    <!-- 배포 결과 박스 - 헤더 바로 아래 위치 -->
-    <div id="deploy-banner" style="display:none;" class="deploy-banner">
+    <!-- 배포 결과 배너 - 헤더 바로 아래 위치, display:none 제거 -->
+    <div id="deploy-banner" 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 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>
@@ -826,8 +826,8 @@ with gr.Blocks(css_paths=["app.css"], theme=theme) as demo:
             });
     }
     
-    // 배포 배너 표시 함수
-    function showDeployBanner(type, title, message, url) {
+    // 배포 배너 업데이트 함수
+    function updateDeployBanner(type, title, message, url) {
         const banner = document.getElementById('deploy-banner');
         const bannerTitle = document.getElementById('deploy-banner-title');
         const bannerMessage = document.getElementById('deploy-banner-message');
@@ -845,8 +845,6 @@ with gr.Blocks(css_paths=["app.css"], theme=theme) as demo:
         } else {
             bannerUrlContainer.style.display = 'none';
         }
-        
-        banner.style.display = 'block';
     }
     </script>
     """)
@@ -1074,21 +1072,25 @@ with gr.Blocks(css_paths=["app.css"], theme=theme) as demo:
                 except Exception as e:
                     return {"status": "error", "message": f"배포 중 오류 발생: {str(e)}"}
 
-            # handle_deploy
+            # handle_deploy 함수 수정 - JavaScript 스크립트 대신 HTML을 직접 반환하고 DOM 업데이트
             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>
+                    # HTML 직접 반환 - JavaScript 없이 결과 표시
+                    result_html = """
+                    <div class="deploy-section">
+                        <div class="deploy-header">📤 배포 결과</div>
+                        <div id="deploy-result-box" class="deploy-result-box">
+                            <div class="deploy-error">
+                                <div class="error-icon">⚠️</div>
+                                <div class="error-message">배포할 코드가 없습니다.</div>
+                            </div>
                         </div>
-                    `;
+                    </div>
+                    <script>
+                        updateDeployBanner('error', '⚠️ 배포 실패', '배포할 코드가 없습니다. 먼저 게임 코드를 생성해주세요.');
                     </script>
                     """
-                    return js_code, {
+                    return result_html, {
                         "is_deployed": False,
                         "status": "error",
                         "message": "배포할 코드가 없습니다.",
@@ -1096,40 +1098,47 @@ with gr.Blocks(css_paths=["app.css"], theme=theme) as demo:
                     }
                 
                 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>
+                    # 로딩 상태 표시
+                    loading_html = """
+                    <div class="deploy-section">
+                        <div class="deploy-header">📤 배포 결과</div>
+                        <div id="deploy-result-box" class="deploy-result-box">
+                            <div class="deploy-loading">
+                                <div class="loading-spinner"></div>
+                                <div class="loading-message">Vercel에 배포 중입니다...</div>
+                            </div>
                         </div>
-                    `;
+                    </div>
+                    <script>
+                        updateDeployBanner('loading', '🔄 배포 진행 중', 'Vercel에 게임을 배포하고 있습니다. 잠시만 기다려주세요.');
                     </script>
                     """
-                    yield loading_js, deploy_status
+                    yield loading_html, 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>
+                        success_html = f"""
+                        <div class="deploy-section">
+                            <div class="deploy-header">📤 배포 결과</div>
+                            <div id="deploy-result-box" class="deploy-result-box">
+                                <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>
                             </div>
-                        `;
+                        </div>
+                        <script>
+                            updateDeployBanner('success', '✅ 배포 완료!', '게임이 성공적으로 Vercel에 배포되었습니다.', '{url}');
                         </script>
                         """
-                        return success_js, {
+                        return success_html, {
                             "is_deployed": True,
                             "status": "success",
                             "url": url,
@@ -1137,18 +1146,21 @@ with gr.Blocks(css_paths=["app.css"], theme=theme) as demo:
                         }
                     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>
+                        error_html = f"""
+                        <div class="deploy-section">
+                            <div class="deploy-header">📤 배포 결과</div>
+                            <div id="deploy-result-box" class="deploy-result-box">
+                                <div class="deploy-error">
+                                    <div class="error-icon">⚠️</div>
+                                    <div class="error-message">배포 실패: {error_msg}</div>
+                                </div>
                             </div>
-                        `;
+                        </div>
+                        <script>
+                            updateDeployBanner('error', '⚠️ 배포 실패', '{error_msg}');
                         </script>
                         """
-                        return error_js, {
+                        return error_html, {
                             "is_deployed": False,
                             "status": "error",
                             "message": error_msg,
@@ -1157,18 +1169,21 @@ with gr.Blocks(css_paths=["app.css"], theme=theme) as demo:
                         
                 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>
+                    exception_html = f"""
+                    <div class="deploy-section">
+                        <div class="deploy-header">📤 배포 결과</div>
+                        <div id="deploy-result-box" class="deploy-result-box">
+                            <div class="deploy-error">
+                                <div class="error-icon">⚠️</div>
+                                <div class="error-message">시스템 오류: {error_msg}</div>
+                            </div>
                         </div>
-                    `;
+                    </div>
+                    <script>
+                        updateDeployBanner('error', '⚠️ 시스템 오류', '{error_msg}');
                     </script>
                     """
-                    return exception_js, {
+                    return exception_html, {
                         "is_deployed": False,
                         "status": "error",
                         "message": error_msg,
@@ -1182,15 +1197,10 @@ with gr.Blocks(css_paths=["app.css"], theme=theme) as demo:
                 outputs=[deploy_result_container, deploy_status]
             )
 
-
-# ------------------------
-# 8) 실제 실행
-# ------------------------
-
 if __name__ == "__main__":
     try:
         demo_instance = Demo()
         demo.queue(default_concurrency_limit=20).launch(ssr_mode=False)
     except Exception as e:
         print(f"Initialization error: {e}")
-        raise
+        raise