Update app.py

app.py

@@ -945,6 +945,10 @@ class Demo:
 # 7) Gradio / Modelscope UI 빌드
 # ------------------------
 
+# ------------------------
+# 7) Gradio / Modelscope UI 빌드
+# ------------------------
+
 demo_instance = Demo()
 theme = gr.themes.Soft(
     primary_hue="blue",
@@ -956,7 +960,28 @@ theme = gr.themes.Soft(
 )
 
 with gr.Blocks(css_paths=["app.css"], theme=theme) as demo:
-    gr.HTML("""
+    # 헤더 HTML을 동적으로 업데이트 가능하도록 그라디오 HTML 컴포넌트로 변경
+    header_html = gr.HTML("""
+    <div class="app-header">
+        <h1>🎮 Vibe Game Craft</h1>
+        <p>설명을 입력하면 웹 기반 HTML5, JavaScript, CSS 게임을 생성합니다. 직관적인 인터페이스로 쉽게 게임을 만들고, 실시간으로 미리보기를 확인하세요.</p>
+    </div>
+    
+    <!-- 배포 결과 박스 - 헤더 바로 아래 위치 -->
+    <div id="deploy-banner" style="display:none;" 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>
+            <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>
+                <button onclick="copyBannerUrl()" class="deploy-banner-copy-btn">복사</button>
+            </div>
+        </div>
+    </div>
+    
     <style>
     /* 전체 앱 스타일 */
     :root {
@@ -981,7 +1006,7 @@ with gr.Blocks(css_paths=["app.css"], theme=theme) as demo:
     .app-header {
         text-align: center;
         padding: 1.5rem 1rem;
-        margin-bottom: 1.5rem;
+        margin-bottom: 0.5rem;
         background: linear-gradient(to right, var(--primary-color), var(--secondary-color));
         border-radius: var(--radius);
         box-shadow: var(--shadow);
@@ -1002,185 +1027,133 @@ with gr.Blocks(css_paths=["app.css"], theme=theme) as demo:
         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-banner {
+        background: white;
+        border-radius: var(--radius);
+        margin: 0.5rem auto 1.5rem auto;
+        box-shadow: var(--shadow);
+        max-width: 1200px;
+        border: 1px solid #ddd;
+        overflow: hidden;
+        transition: all 0.3s ease;
     }
     
-    .deploy-alert.success {
+    .deploy-banner.success {
         border-left: 5px solid #34c759;
     }
     
-    .deploy-alert.error {
+    .deploy-banner.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-banner.loading {
+        border-left: 5px solid #007aff;
     }
     
-    .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;
+    .deploy-banner-content {
         display: flex;
         align-items: center;
-        justify-content: center;
+        padding: 15px 20px;
     }
     
-    .deploy-status-content {
-        background: #f0f9ff;
-        border-radius: 8px;
-        padding: 10px 15px;
-        display: flex;
-        align-items: center;
-        max-width: 800px;
-        width: 100%;
+    .deploy-banner-icon {
+        font-size: 24px;
+        margin-right: 15px;
     }
     
-    .deploy-status-content.success {
-        background: #f0fff4;
-        border-left: 4px solid #34c759;
+    .deploy-banner-info {
+        flex: 1;
     }
     
-    .deploy-status-content.error {
-        background: #fff0f0;
-        border-left: 4px solid #ff3b30;
+    .deploy-banner-title {
+        font-weight: bold;
+        font-size: 16px;
+        margin-bottom: 5px;
     }
     
-    .status-icon {
-        font-size: 18px;
-        margin-right: 10px;
+    .deploy-banner-message {
+        color: #666;
     }
     
-    .status-message {
-        flex: 1;
+    .deploy-banner-url-container {
+        background: #f5f8ff;
+        padding: 10px 15px;
+        border-radius: 8px;
+        margin-left: 20px;
+        max-width: 400px;
+        display: flex;
+        align-items: center;
     }
     
-    .status-url {
-        font-weight: bold;
+    .deploy-banner-url {
         color: #0066cc;
-        margin-left: 15px;
-        text-decoration: underline;
+        text-decoration: none;
+        font-weight: 500;
         word-break: break-all;
+        flex: 1;
     }
-    </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>
+    .deploy-banner-copy-btn {
+        background: #0066cc;
+        color: white;
+        border: none;
+        border-radius: 4px;
+        padding: 5px 10px;
+        margin-left: 10px;
+        cursor: pointer;
+        font-size: 12px;
+    }
     
-    <!-- 하단 고정 배포 상태 바 - 기본적으로 숨겨져 있음 -->
-    <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>
+    .deploy-banner-copy-btn:hover {
+        background: #0052a3;
+    }
+    </style>
     
     <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);
+    // URL 복사 함수
+    function copyBannerUrl() {
+        const url = document.getElementById('deploy-banner-url').href;
+        navigator.clipboard.writeText(url)
+            .then(() => {
+                // 복사 성공 시 버튼 텍스트 변경
+                const copyBtn = document.querySelector('.deploy-banner-copy-btn');
+                const originalText = copyBtn.textContent;
+                copyBtn.textContent = '복사됨!';
+                
+                // 1초 후 원래 텍스트로 복원
+                setTimeout(() => {
+                    copyBtn.textContent = originalText;
+                }, 1000);
+            });
     }
     
-    // 배포 상태 바 업데이트 함수
-    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');
+    // 배포 배너 표시 함수
+    function showDeployBanner(type, title, message, url) {
+        const banner = document.getElementById('deploy-banner');
+        const bannerTitle = document.getElementById('deploy-banner-title');
+        const bannerMessage = document.getElementById('deploy-banner-message');
+        const bannerUrlContainer = document.getElementById('deploy-banner-url-container');
+        const bannerUrl = document.getElementById('deploy-banner-url');
+        
+        // 배너 클래스 설정
+        banner.className = 'deploy-banner ' + type;
         
-        // 상태 타입에 따른 설정
-        statusContent.className = 'deploy-status-content ' + type;
+        // 타이틀과 메시지 설정
+        bannerTitle.textContent = title;
+        bannerMessage.textContent = message;
         
-        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';
+        // URL이 있으면 표시
+        if (url) {
+            bannerUrl.href = url;
+            bannerUrl.textContent = url;
+            bannerUrlContainer.style.display = 'flex';
         } else {
-            statusIcon.textContent = '🔄';
-            statusUrl.style.display = 'none';
+            bannerUrlContainer.style.display = 'none';
         }
         
-        statusMessage.textContent = message;
-        statusBar.style.display = 'flex';
+        // 배너 표시
+        banner.style.display = 'block';
     }
     </script>
     """)
@@ -1274,8 +1247,8 @@ with gr.Blocks(css_paths=["app.css"], theme=theme) as demo:
                         )
                         gr.HTML('<div class="help-text">💡 원하는 게임의 설명을 입력하세요. 예: "테트리스 게임 제작해줘."</div>')
 
-                        # ── (4) 배포 결과 영역 - 이제 JavaScript로 동적 업데이트 ──
-                        deploy_result_html = gr.HTML("""
+                        # ── (4) 배포 결과 영역 - JavaScript로 동적 업데이트 ──
+                        deploy_result_container = gr.HTML("""
                         <div class="deploy-section">
                             <div class="deploy-header">📤 배포 결과</div>
                             <div id="deploy-result-box" class="deploy-result-box">
@@ -1357,14 +1330,82 @@ with gr.Blocks(css_paths=["app.css"], theme=theme) as demo:
                 outputs=[sandbox, state_tab]
             )
 
-            # (H) '배포' 버튼 => Vercel
-            # 수정된 배포 처리 함수
+            # 수정된 배포 함수
+            def deploy_to_vercel(code: str):
+                """
+                Vercel에 배포하는 함수 - 실제 배포 로직
+                """
+                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)}"}
+
+            # (H) '배포' 버튼 => Vercel - 헤더와 배포 결과 영역 모두 업데이트
             def handle_deploy(code, deploy_status):
                 if not code:
-                    # JavaScript 실행 코드: 상태 업데이트
+                    # JavaScript로 오류 표시
                     js_code = """
                     <script>
-                    showDeployAlert('error', '⚠️ 배포 실패', '배포할 코드가 없습니다. 먼저 게임 코드를 생성해주세요.');
+                    // 헤더 배너에 오류 표시
+                    showDeployBanner('error', '⚠️ 배포 실패', '배포할 코드가 없습니다. 먼저 게임 코드를 생성해주세요.');
+                    
+                    // 결과 영역에도 오류 표시
                     document.getElementById('deploy-result-box').innerHTML = `
                         <div class="deploy-error">
                             <div class="error-icon">⚠️</div>
@@ -1373,7 +1414,6 @@ with gr.Blocks(css_paths=["app.css"], theme=theme) as demo:
                     `;
                     </script>
                     """
-                    
                     return js_code, {
                         "is_deployed": False,
                         "status": "error",
@@ -1382,10 +1422,13 @@ with gr.Blocks(css_paths=["app.css"], theme=theme) as demo:
                     }
                 
                 try:
-                    # 배포 시작을 알리는 JavaScript
-                    yield """
+                    # 로딩 상태 표시
+                    loading_js = """
                     <script>
-                    updateDeployStatus('loading', '게임을 Vercel에 배포 중입니다...', '');
+                    // 헤더 배너에 로딩 상태 표시
+                    showDeployBanner('loading', '🔄 배포 진행 중', 'Vercel에 게임을 배포하고 있습니다. 잠시만 기다려주세요.');
+                    
+                    // 결과 영역에도 로딩 표시
                     document.getElementById('deploy-result-box').innerHTML = `
                         <div class="deploy-loading">
                             <div class="loading-spinner"></div>
@@ -1393,23 +1436,26 @@ with gr.Blocks(css_paths=["app.css"], theme=theme) as demo:
                         </div>
                     `;
                     </script>
-                    """, deploy_status
+                    """
+                    # 로딩 상태를 먼저 업데이트
+                    yield loading_js, 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":
+                    # 성공 시
+                    if result.get("status") == "success":
                         url = result.get("url")
-                        # JavaScript 실행 코드: 배포 성공 표시
-                        js_code = f"""
+                        # 성공 메시지 JavaScript
+                        success_js = f"""
                         <script>
-                        showDeployAlert('success', '✅ 배포 완료!', '게임이 성공적으로 배포되었습니다.', '{url}');
-                        updateDeployStatus('success', '배포 완료!', '{url}');
+                        // 헤더 배너에 성공 표시 및 URL 포함
+                        showDeployBanner('success', '✅ 배포 완료!', '게임이 성공적으로 Vercel에 배포되었습니다.', '{url}');
+                        
+                        // 결과 영역에도 성공 표시
                         document.getElementById('deploy-result-box').innerHTML = `
                             <div class="deploy-success">
                                 <div class="success-icon">✅</div>
@@ -1422,47 +1468,47 @@ with gr.Blocks(css_paths=["app.css"], theme=theme) as demo:
                         `;
                         </script>
                         """
-                        
-                        return js_code, {
+                        return success_js, {
                             "is_deployed": True,
                             "status": "success",
                             "url": url,
                             "message": "배포 완료!"
                         }
                     
-                    # 실패한 경우
-                    error_msg = result.get("message", "알 수 없는 오류")
-                    if isinstance(result, str):
-                        error_msg = result
+                    # 실패 시
+                    else:
+                        error_msg = result.get("message", "알 수 없는 오류")
+                        # 오류 메시지 JavaScript
+                        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": ""
+                        }
                         
-                    # 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"""
+                    # 예외 메시지 JavaScript
+                    exception_js = f"""
                     <script>
-                    showDeployAlert('error', '⚠️ 시스템 오류', '{error_msg}');
-                    updateDeployStatus('error', '시스템 오류: {error_msg}', '');
+                    // 헤더 배너에 오류 표시
+                    showDeployBanner('error', '⚠️ 시스템 오류', '{error_msg}');
+                    
+                    // 결과 영역에도 오류 표시
                     document.getElementById('deploy-result-box').innerHTML = `
                         <div class="deploy-error">
                             <div class="error-icon">⚠️</div>
@@ -1471,15 +1517,14 @@ with gr.Blocks(css_paths=["app.css"], theme=theme) as demo:
                     `;
                     </script>
                     """
-                    
-                    return js_code, {
+                    return exception_js, {
                         "is_deployed": False,
                         "status": "error",
                         "message": error_msg,
                         "url": ""
                     }
 
-            # 배포 버튼 클릭 시 JavaScript 트리거와 상태 업데이트
+            # 배포 버튼 클릭 - JavaScript 트리거 및 상태 업데이트
             deploy_btn.click(
                 fn=handle_deploy,
                 inputs=[code_output, deploy_status],