Update app.py

app.py

@@ -667,19 +667,188 @@ with gr.Blocks(css_paths=["app.css"], theme=theme) as demo:
         <h1>🎮 Vibe Game Craft</h1>
         <p>설명을 입력하면 웹 기반 HTML5, JavaScript, CSS 게임을 생성합니다. 직관적인 인터페이스로 쉽게 게임을 만들고, 실시간으로 미리보기를 확인하세요.</p>
     </div>
-    """)
     
-    # 배포 결과 배너 - 별도 컴포넌트로 추가
-    deploy_banner = gr.HTML("""
-    <div class="deploy-banner">
+    <!-- 배포 결과 박스 - 헤더 바로 아래 위치 -->
+    <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 class="deploy-banner-title">배포 준비됨</div>
-                <div 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>
+                <button onclick="copyBannerUrl()" class="deploy-banner-copy-btn">복사</button>
             </div>
         </div>
     </div>
+    
+    <style>
+    /* 전체 앱 스타일 */
+    :root {
+        --primary-color: #9c89b8;
+        --secondary-color: #f0a6ca;
+        --accent-color: #b8bedd;
+        --background-color: #f9f7fd;
+        --panel-color: #ffffff;
+        --text-color: #3a3042;
+        --button-hover: #efc3e6;
+        --shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);
+        --radius: 12px;
+    }
+    
+    body {
+        background-color: var(--background-color);
+        color: var(--text-color);
+        font-family: 'Poppins', sans-serif;
+    }
+    
+    /* 헤더 스타일 */
+    .app-header {
+        text-align: center;
+        padding: 1.5rem 1rem;
+        margin-bottom: 0.5rem;
+        background: linear-gradient(to right, var(--primary-color), var(--secondary-color));
+        border-radius: var(--radius);
+        box-shadow: var(--shadow);
+        color: white;
+    }
+    
+    .app-header h1 {
+        font-size: 2.5rem;
+        font-weight: 700;
+        margin-bottom: 0.5rem;
+        text-shadow: 0 2px 4px rgba(0,0,0,0.1);
+    }
+    
+    .app-header p {
+        font-size: 1.1rem;
+        opacity: 0.9;
+        max-width: 800px;
+        margin: 0 auto;
+    }
+    
+    /* 배포 배너 스타일 - 헤더 바로 아래에 표시 */
+    .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-banner.success {
+        border-left: 5px solid #34c759;
+    }
+    
+    .deploy-banner.error {
+        border-left: 5px solid #ff3b30;
+    }
+    
+    .deploy-banner.loading {
+        border-left: 5px solid #007aff;
+    }
+    
+    .deploy-banner-content {
+        display: flex;
+        align-items: center;
+        padding: 15px 20px;
+    }
+    
+    .deploy-banner-icon {
+        font-size: 24px;
+        margin-right: 15px;
+    }
+    
+    .deploy-banner-info {
+        flex: 1;
+    }
+    
+    .deploy-banner-title {
+        font-weight: bold;
+        font-size: 16px;
+        margin-bottom: 5px;
+    }
+    
+    .deploy-banner-message {
+        color: #666;
+    }
+    
+    .deploy-banner-url-container {
+        background: #f5f8ff;
+        padding: 10px 15px;
+        border-radius: 8px;
+        margin-left: 20px;
+        max-width: 400px;
+        display: flex;
+        align-items: center;
+    }
+    
+    .deploy-banner-url {
+        color: #0066cc;
+        text-decoration: none;
+        font-weight: 500;
+        word-break: break-all;
+        flex: 1;
+    }
+    
+    .deploy-banner-copy-btn {
+        background: #0066cc;
+        color: white;
+        border: none;
+        border-radius: 4px;
+        padding: 5px 10px;
+        margin-left: 10px;
+        cursor: pointer;
+        font-size: 12px;
+    }
+    
+    .deploy-banner-copy-btn:hover {
+        background: #0052a3;
+    }
+    </style>
+    
+    <script>
+    // 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 = '복사됨!';
+                setTimeout(() => {
+                    copyBtn.textContent = originalText;
+                }, 1000);
+            });
+    }
+    
+    // 배포 배너 표시 함수
+    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;
+        bannerTitle.textContent = title;
+        bannerMessage.textContent = message;
+        
+        if (url) {
+            bannerUrl.href = url;
+            bannerUrl.textContent = url;
+            bannerUrlContainer.style.display = 'flex';
+        } else {
+            bannerUrlContainer.style.display = 'none';
+        }
+        
+        banner.style.display = 'block';
+    }
+    </script>
     """)
 
     history = gr.State([])
@@ -772,7 +941,7 @@ with gr.Blocks(css_paths=["app.css"], theme=theme) as demo:
                             """
                             <div class="deploy-section">
                                 <div class="deploy-header">📤 배포 결과</div>
-                                <div class="deploy-result-box">
+                                <div id="deploy-result-box" class="deploy-result-box">
                                     <div class="no-deploy">아직 배포된 게임이 없습니다.</div>
                                 </div>
                             </div>
@@ -850,191 +1019,178 @@ with gr.Blocks(css_paths=["app.css"], theme=theme) as demo:
                 outputs=[sandbox, state_tab]
             )
 
-            # 배포 함수
+            # 실제 배포 로직
+            def deploy_to_vercel(code: str):
+                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)}"}
+
+            # handle_deploy
             def handle_deploy(code, deploy_status):
                 if not code:
-                    banner_html = """
-                    <div class="deploy-banner error">
-                        <div class="deploy-banner-content">
-                            <div class="deploy-banner-icon">⚠️</div>
-                            <div class="deploy-banner-info">
-                                <div class="deploy-banner-title">배포 실패</div>
-                                <div class="deploy-banner-message">배포할 코드가 없��니다. 먼저 게임 코드를 생성해주세요.</div>
-                            </div>
-                        </div>
-                    </div>
-                    """
-                    result_html = """
-                    <div class="deploy-section">
-                        <div class="deploy-header">📤 배포 결과</div>
-                        <div class="deploy-result-box">
-                            <div class="deploy-error">
-                                <div class="error-icon">⚠️</div>
-                                <div class="error-message">배포할 코드가 없습니다.</div>
-                            </div>
+                    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>
                         </div>
-                    </div>
+                    `;
+                    </script>
                     """
-                    return banner_html, result_html, deploy_status
+                    return js_code, {
+                        "is_deployed": False,
+                        "status": "error",
+                        "message": "배포할 코드가 없습니다.",
+                        "url": ""
+                    }
                 
                 try:
-                    # 로딩 상태 표시
-                    banner_loading_html = """
-                    <div class="deploy-banner loading">
-                        <div class="deploy-banner-content">
-                            <div class="deploy-banner-icon">🔄</div>
-                            <div class="deploy-banner-info">
-                                <div class="deploy-banner-title">배포 진행 중</div>
-                                <div class="deploy-banner-message">Vercel에 게임을 배포하고 있습니다. 잠시만 기다려주세요.</div>
-                            </div>
-                        </div>
-                    </div>
-                    """
-                    result_loading_html = """
-                    <div class="deploy-section">
-                        <div class="deploy-header">📤 배포 결과</div>
-                        <div class="deploy-result-box">
-                            <div class="deploy-loading">
-                                <div class="loading-spinner"></div>
-                                <div class="loading-message">Vercel에 배포 중입니다...</div>
-                            </div>
+                    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>
                         </div>
-                    </div>
+                    `;
+                    </script>
                     """
+                    yield loading_js, deploy_status
                     
-                    # 로딩 상태 반환
-                    yield banner_loading_html, result_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")
-                        banner_success_html = f"""
-                        <div class="deploy-banner success">
-                            <div class="deploy-banner-content">
-                                <div class="deploy-banner-icon">✅</div>
-                                <div class="deploy-banner-info">
-                                    <div class="deploy-banner-title">배포 완료!</div>
-                                    <div class="deploy-banner-message">게임이 성공적으로 Vercel에 배포되었습니다.</div>
-                                </div>
-                                <div class="deploy-banner-url-container" style="display:flex;">
-                                    <a href="{url}" target="_blank" class="deploy-banner-url">{url}</a>
-                                    <button onclick="navigator.clipboard.writeText('{url}')" class="deploy-banner-copy-btn">복사</button>
+                        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>
                                 </div>
                             </div>
-                        </div>
+                        `;
+                        </script>
                         """
-                        
-                        result_success_html = f"""
-                        <div class="deploy-section">
-                            <div class="deploy-header">📤 배포 결과</div>
-                            <div 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>
-                        """
-                        
-                        updated_status = {
+                        return success_js, {
                             "is_deployed": True,
                             "status": "success",
                             "url": url,
                             "message": "배포 완료!"
                         }
-                        
-                        return banner_success_html, result_success_html, updated_status
-                    
-                    # 배포 실패
                     else:
                         error_msg = result.get("message", "알 수 없는 오류")
-                        banner_error_html = f"""
-                        <div class="deploy-banner error">
-                            <div class="deploy-banner-content">
-                                <div class="deploy-banner-icon">⚠️</div>
-                                <div class="deploy-banner-info">
-                                    <div class="deploy-banner-title">배포 실패</div>
-                                    <div class="deploy-banner-message">{error_msg}</div>
-                                </div>
-                            </div>
-                        </div>
-                        """
-                        
-                        result_error_html = f"""
-                        <div class="deploy-section">
-                            <div class="deploy-header">📤 배포 결과</div>
-                            <div class="deploy-result-box">
-                                <div class="deploy-error">
-                                    <div class="error-icon">⚠️</div>
-                                    <div class="error-message">배포 실패: {error_msg}</div>
-                                </div>
+                        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>
-                        </div>
+                        `;
+                        </script>
                         """
-                        
-                        updated_status = {
+                        return error_js, {
                             "is_deployed": False,
                             "status": "error",
                             "message": error_msg,
                             "url": ""
                         }
                         
-                        return banner_error_html, result_error_html, updated_status
-                        
                 except Exception as e:
                     error_msg = str(e)
-                    banner_exception_html = f"""
-                    <div class="deploy-banner error">
-                        <div class="deploy-banner-content">
-                            <div class="deploy-banner-icon">⚠️</div>
-                            <div class="deploy-banner-info">
-                                <div class="deploy-banner-title">시스템 오류</div>
-                                <div class="deploy-banner-message">{error_msg}</div>
-                            </div>
-                        </div>
-                    </div>
-                    """
-                    
-                    result_exception_html = f"""
-                    <div class="deploy-section">
-                        <div class="deploy-header">📤 배포 결과</div>
-                        <div class="deploy-result-box">
-                            <div class="deploy-error">
-                                <div class="error-icon">⚠️</div>
-                                <div class="error-message">시스템 오류: {error_msg}</div>
-                            </div>
+                    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>
                         </div>
-                    </div>
+                    `;
+                    </script>
                     """
-                    
-                    updated_status = {
+                    return exception_js, {
                         "is_deployed": False,
                         "status": "error",
                         "message": error_msg,
                         "url": ""
                     }
-                    
-                    return banner_exception_html, result_exception_html, updated_status
 
-            # 배포 버튼 클릭 - 수정된 부분
+            # 배포 버튼 클릭
             deploy_btn.click(
                 fn=handle_deploy,
                 inputs=[code_output, deploy_status],
-                outputs=[deploy_banner, deploy_result_container, deploy_status]
+                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