Update app.py

app.py

@@ -1001,16 +1001,200 @@ with gr.Blocks(css_paths=["app.css"], theme=theme) as demo:
         max-width: 800px;
         margin: 0 auto;
     }
+    
+    /* 배포 알림 스타일 - 상단에 고정 표시 */
+    .deploy-alert {
+        position: fixed;
+        top: 10px;
+        left: 50%;
+        transform: translateX(-50%);
+        z-index: 9999;
+        background: rgba(255, 255, 255, 0.95);
+        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
+        border-radius: 10px;
+        padding: 15px 25px;
+        min-width: 300px;
+        text-align: center;
+        animation: slideDown 0.5s ease-out;
+    }
+    
+    .deploy-alert.success {
+        border-left: 5px solid #34c759;
+    }
+    
+    .deploy-alert.error {
+        border-left: 5px solid #ff3b30;
+    }
+    
+    .deploy-alert h3 {
+        margin: 0 0 10px 0;
+        font-size: 16px;
+    }
+    
+    .deploy-url {
+        background: #f5f8ff;
+        padding: 10px;
+        border-radius: 6px;
+        margin: 10px 0;
+        word-break: break-all;
+        font-weight: bold;
+    }
+    
+    .deploy-url a {
+        color: #0066cc;
+        text-decoration: none;
+    }
+    
+    @keyframes slideDown {
+        from { transform: translate(-50%, -50px); opacity: 0; }
+        to { transform: translate(-50%, 0); opacity: 1; }
+    }
+    
+    /* 하단 고정 배포 상태 바 */
+    .deploy-status-bar {
+        position: fixed;
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        background: rgba(255, 255, 255, 0.95);
+        border-top: 1px solid #ddd;
+        padding: 10px 20px;
+        z-index: 1000;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+    
+    .deploy-status-content {
+        background: #f0f9ff;
+        border-radius: 8px;
+        padding: 10px 15px;
+        display: flex;
+        align-items: center;
+        max-width: 800px;
+        width: 100%;
+    }
+    
+    .deploy-status-content.success {
+        background: #f0fff4;
+        border-left: 4px solid #34c759;
+    }
+    
+    .deploy-status-content.error {
+        background: #fff0f0;
+        border-left: 4px solid #ff3b30;
+    }
+    
+    .status-icon {
+        font-size: 18px;
+        margin-right: 10px;
+    }
+    
+    .status-message {
+        flex: 1;
+    }
+    
+    .status-url {
+        font-weight: bold;
+        color: #0066cc;
+        margin-left: 15px;
+        text-decoration: underline;
+        word-break: break-all;
+    }
     </style>
     
     <div class="app-header">
         <h1>🎮 Vibe Game Craft</h1>
         <p>설명을 입력하면 웹 기반 HTML5, JavaScript, CSS 게임을 생성합니다. 직관적인 인터페이스로 쉽게 게임을 만들고, 실시간으로 미리보기를 확인하세요.</p>
     </div>
+    
+    <!-- 배포 알림 - 기본적으로 숨겨져 있음 -->
+    <div id="deploy-alert" style="display:none;" class="deploy-alert">
+        <h3 id="deploy-alert-title">배포 상태</h3>
+        <div id="deploy-alert-content"></div>
+    </div>
+    
+    <!-- 하단 고정 배포 상태 바 - 기본적으로 숨겨져 있음 -->
+    <div id="deploy-status-bar" style="display:none;" class="deploy-status-bar">
+        <div id="deploy-status-content" class="deploy-status-content">
+            <span id="status-icon" class="status-icon">🔄</span>
+            <span id="status-message" class="status-message">배포 중...</span>
+            <a id="status-url" class="status-url" href="#" target="_blank" style="display:none;"></a>
+        </div>
+    </div>
+    
+    <script>
+    // 배포 알림 표시 함수
+    function showDeployAlert(type, title, content, url) {
+        const alertEl = document.getElementById('deploy-alert');
+        const titleEl = document.getElementById('deploy-alert-title');
+        const contentEl = document.getElementById('deploy-alert-content');
+        
+        // 타입에 따른 스타일 설정
+        alertEl.className = 'deploy-alert ' + type;
+        titleEl.textContent = title;
+        
+        // URL이 있으면 링크 포함
+        if (url) {
+            contentEl.innerHTML = `
+                <p>${content}</p>
+                <div class="deploy-url">
+                    <a href="${url}" target="_blank">${url}</a>
+                </div>
+            `;
+        } else {
+            contentEl.innerHTML = `<p>${content}</p>`;
+        }
+        
+        // 알림 표시
+        alertEl.style.display = 'block';
+        
+        // 5초 후 자동으로 숨김
+        setTimeout(() => {
+            alertEl.style.display = 'none';
+        }, 8000);
+    }
+    
+    // 배포 상태 바 업데이트 함수
+    function updateDeployStatus(type, message, url) {
+        const statusBar = document.getElementById('deploy-status-bar');
+        const statusContent = document.getElementById('deploy-status-content');
+        const statusIcon = document.getElementById('status-icon');
+        const statusMessage = document.getElementById('status-message');
+        const statusUrl = document.getElementById('status-url');
+        
+        // 상태 타입에 따른 설정
+        statusContent.className = 'deploy-status-content ' + type;
+        
+        if (type === 'success') {
+            statusIcon.textContent = '✅';
+            statusUrl.href = url;
+            statusUrl.textContent = url;
+            statusUrl.style.display = 'inline';
+        } else if (type === 'error') {
+            statusIcon.textContent = '❌';
+            statusUrl.style.display = 'none';
+        } else {
+            statusIcon.textContent = '🔄';
+            statusUrl.style.display = 'none';
+        }
+        
+        statusMessage.textContent = message;
+        statusBar.style.display = 'flex';
+    }
+    </script>
     """)
 
     history = gr.State([])
     setting = gr.State({"system": SystemPrompt})
+    
+    # 배포 상태를 저장할 상태 변수
+    deploy_status = gr.State({
+        "is_deployed": False,
+        "status": "",
+        "url": "",
+        "message": ""
+    })
 
     with ms.Application() as app:
         with antd.ConfigProvider():
@@ -1090,10 +1274,18 @@ with gr.Blocks(css_paths=["app.css"], theme=theme) as demo:
                         )
                         gr.HTML('<div class="help-text">💡 원하는 게임의 설명을 입력하세요. 예: "테트리스 게임 제작해줘."</div>')
 
-                        # ── (4) 배포 결과 영역 ──
-                        with antd.Flex(vertical=True, gap="small", elem_classes="deploy-result-container"):
-                            gr.HTML('<div class="deploy-result-title">📤 배포 결과</div>')
-                            deploy_result = gr.HTML(elem_classes="deploy-result-box")
+                        # ── (4) 배포 결과 영역 - 이제 JavaScript로 동적 업데이트 ──
+                        deploy_result_html = 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>
+                        """)
+                        
+                        # JavaScript 실행을 위한 HTML (비출력용)
+                        js_trigger = gr.HTML(elem_id="js-trigger", visible=False)
 
 
             # ---- 이벤트 / 콜백 ----
@@ -1166,10 +1358,132 @@ with gr.Blocks(css_paths=["app.css"], theme=theme) as demo:
             )
 
             # (H) '배포' 버튼 => Vercel
+            # 수정된 배포 처리 함수
+            def handle_deploy(code, deploy_status):
+                if not code:
+                    # JavaScript 실행 코드: 상태 업데이트
+                    js_code = """
+                    <script>
+                    showDeployAlert('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:
+                    # 배포 시작을 알리는 JavaScript
+                    yield """
+                    <script>
+                    updateDeployStatus('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>
+                    """, deploy_status
+                    
+                    # 코드 전처리
+                    clean_code = remove_code_block(code)
+                    
+                    # Vercel에 배포
+                    project_name = ''.join(random.choice(string.ascii_lowercase) for i in range(6))
+                    result = deploy_to_vercel(clean_code)
+                    
+                    # 성공적으로 배포된 경우
+                    if isinstance(result, dict) and result.get("status") == "success":
+                        url = result.get("url")
+                        # JavaScript 실행 코드: ��포 성공 표시
+                        js_code = f"""
+                        <script>
+                        showDeployAlert('success', '✅ 배포 완료!', '게임이 성공적으로 배포되었습니다.', '{url}');
+                        updateDeployStatus('success', '배포 완료!', '{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 js_code, {
+                            "is_deployed": True,
+                            "status": "success",
+                            "url": url,
+                            "message": "배포 완료!"
+                        }
+                    
+                    # 실패한 경우
+                    error_msg = result.get("message", "알 수 없는 오류")
+                    if isinstance(result, str):
+                        error_msg = result
+                        
+                    # JavaScript 실행 코드: 오류 표시
+                    js_code = f"""
+                    <script>
+                    showDeployAlert('error', '⚠️ 배포 실패', '{error_msg}');
+                    updateDeployStatus('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 js_code, {
+                        "is_deployed": False,
+                        "status": "error",
+                        "message": error_msg,
+                        "url": ""
+                    }
+                    
+                except Exception as e:
+                    error_msg = str(e)
+                    # JavaScript 실행 코드: 예외 표시
+                    js_code = f"""
+                    <script>
+                    showDeployAlert('error', '⚠️ 시스템 오류', '{error_msg}');
+                    updateDeployStatus('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 js_code, {
+                        "is_deployed": False,
+                        "status": "error",
+                        "message": error_msg,
+                        "url": ""
+                    }
+
+            # 배포 버튼 클릭 시 JavaScript 트리거와 상태 업데이트
             deploy_btn.click(
-                fn=lambda code: deploy_to_vercel(remove_code_block(code)) if code else "<div class='deploy-error'>코드가 없습니다.</div>",
-                inputs=[code_output],
-                outputs=[deploy_result]
+                fn=handle_deploy,
+                inputs=[code_output, deploy_status],
+                outputs=[js_trigger, deploy_status]
             )
 
 # ------------------------