Update app.py

app.py

@@ -667,186 +667,19 @@ with gr.Blocks(css_paths=["app.css"], theme=theme) as demo:
         <h1>🎮 Vibe Game Craft</h1>
         <p>설명을 입력하면 웹 기반 HTML5, JavaScript, CSS 게임을 생성합니다. 직관적인 인터페이스로 쉽게 게임을 만들고, 실시간으로 미리보기를 확인하세요.</p>
     </div>
+    """)
     
-    <!-- 배포 결과 배너 - 헤더 바로 아래 위치, display:none 제거 -->
-    <div id="deploy-banner" class="deploy-banner">
+    # 배포 결과 배너 - 별도 컴포넌트로 추가
+    deploy_banner = gr.HTML("""
+    <div 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 class="deploy-banner-title">배포 준비됨</div>
+                <div class="deploy-banner-message">배포 버튼을 클릭하여 게임을 배포하세요.</div>
             </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 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');
-        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';
-        }
-    }
-    </script>
     """)
 
     history = gr.State([])
@@ -939,7 +772,7 @@ with gr.Blocks(css_paths=["app.css"], theme=theme) as demo:
                             """
                             <div class="deploy-section">
                                 <div class="deploy-header">📤 배포 결과</div>
-                                <div id="deploy-result-box" class="deploy-result-box">
+                                <div class="deploy-result-box">
                                     <div class="no-deploy">아직 배포된 게임이 없습니다.</div>
                                 </div>
                             </div>
@@ -1017,63 +850,7 @@ 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)}"}
-
-
-# 이 함수만 교체하세요
+            # 배포 함수
             def handle_deploy(code, deploy_status):
                 if not code:
                     banner_html = """
@@ -1088,184 +865,170 @@ with gr.Blocks(css_paths=["app.css"], theme=theme) as demo:
                     </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>
-            </div>
-        </div>
-        """
-                    return banner_html, result_html, {
-                        "is_deployed": False,
-                        "status": "error",
-                        "message": "배포할 코드가 없습니다.",
-                        "url": ""
-                    }
-    
+                    <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>
+                        </div>
+                    </div>
+                    """
+                    return banner_html, result_html, deploy_status
+                
                 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>
-        """
+                    <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>
-            </div>
-        </div>
-        """
+                    <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>
+                        </div>
+                    </div>
+                    """
+                    
+                    # 로딩 상태 반환
                     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">
-                        <a href="{url}" target="_blank" class="deploy-banner-url">{url}</a>
-                        <button onclick="navigator.clipboard.writeText('{url}')" class="deploy-banner-copy-btn">복사</button>
-                    </div>
-                </div>
-            </div>
-            """
-            
+                        <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>
+                                </div>
+                            </div>
+                        </div>
+                        """
+                        
                         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 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>
-                    </div>
-                </div>
-            </div>
-            """
-            
-                        return banner_success_html, result_success_html, {
+                        """
+                        
+                        updated_status = {
                             "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>
-            """
-            
+                        <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>
-                </div>
-            </div>
-            """
-            
-                        return banner_error_html, result_error_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">배포 실패: {error_msg}</div>
+                                </div>
+                            </div>
+                        </div>
+                        """
+                        
+                        updated_status = {
                             "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>
-        """
-        
+                    <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>
-            </div>
-        </div>
-        """
-        
-                    return banner_exception_html, result_exception_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">시스템 오류: {error_msg}</div>
+                            </div>
+                        </div>
+                    </div>
+                    """
+                    
+                    updated_status = {
                         "is_deployed": False,
                         "status": "error",
                         "message": error_msg,
                         "url": ""
                     }
+                    
+                    return banner_exception_html, result_exception_html, updated_status
 
-
-# 헤더 HTML 추가 (기존 헤더 HTML 대신 사용)
-            header_banner = gr.HTML("""
-<div class="app-header">
-    <h1>🎮 Vibe Game Craft</h1>
-    <p>설명을 입력하면 웹 기반 HTML5, JavaScript, CSS 게임을 생성합니다. 직관적인 인터페이스로 쉽게 게임을 만들고, 실시간으로 미리보기를 확인하세요.</p>
-</div>
-""")
-
-            deploy_banner = gr.HTML("""
-<div 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>
-    </div>
-</div>
-""")
-
-# 배포 버튼 클릭 - 이 부분을 변경하세요
+            # 배포 버튼 클릭 - 수정된 부분
             deploy_btn.click(
                 fn=handle_deploy,
                 inputs=[code_output, deploy_status],
-                outputs=[header_html, deploy_result_container, deploy_status]
+                outputs=[deploy_banner, deploy_result_container, deploy_status]
             )
 
 if __name__ == "__main__":