Update app-backup.py

app-backup.py

@@ -10,6 +10,8 @@ import asyncio
 import requests
 import anthropic
 import openai
+import io
+import logging
 
 from http import HTTPStatus
 from typing import Dict, List, Optional, Tuple
@@ -20,11 +22,23 @@ import modelscope_studio.components.base as ms
 import modelscope_studio.components.legacy as legacy
 import modelscope_studio.components.antd as antd
 
+# === [1] 로거 설정 ===
+log_stream = io.StringIO()
+handler = logging.StreamHandler(log_stream)
+logger = logging.getLogger()
+logger.setLevel(logging.DEBUG)   # 원하는 레벨로 설정
+logger.addHandler(handler)
+
+def get_logs():
+    """StringIO에 쌓인 로그를 문자열로 반환"""
+    return log_stream.getvalue()
+
 
 # ------------------------
 # 1) DEMO_LIST 및 SystemPrompt
 # ------------------------
 
+
 DEMO_LIST = [
     {"description": "블록이 위에서 떨어지는 클래식 테트리스 게임을 개발해주세요. 화살표 키로 조작하며, 가로줄이 채워지면 해당 줄이 제거되고 점수가 올라가는 메커니즘이 필요합니다. 난이도는 시간이 지날수록 블록이 빨라지도록 구현하고, 게임오버 조건과 점수 표시 기능을 포함해주세요."},
     {"description": "두 명이 번갈아가며 플레이할 수 있는 체스 게임을 만들어주세요. 기본적인 체스 규칙(킹, 퀸, 룩, 비숍, 나이트, 폰의 이동 규칙)을 구현하고, 체크와 체크메이트 감지 기능이 필요합니다. 드래그 앤 드롭으로 말을 움직일 수 있게 하며, 이동 기록도 표시해주세요."},
@@ -62,6 +76,7 @@ DEMO_LIST = [
     {"description": "탑다운 뷰의 간단한 액션 RPG 게임을 개발해주세요. WASD로 이동하고, 마우스 클릭으로 기본 공격, 1-4 키로 특수 스킬을 사용합니다. 플레이어는 몬스터를 처치하며 경험치와 아이템을 획득하고, 레벨업 시 능력치(공격력, 체력, 속도 등)를 향상시킵니다. 다양한 무기와 방어구를 착용할 수 있으며, 스킬 트리 시스템으로 캐릭터를 특화시킬 수 있습니다. 여러 지역과 보스 몬스터, 간단한 퀘스트 시스템도 구현해주세요."},
 ]
 
+
 SystemPrompt = """
 # GameCraft 시스템 프롬프트
 
@@ -203,11 +218,10 @@ openai_client = openai.OpenAI(api_key=YOUR_OPENAI_TOKEN)
 
 async def try_claude_api(system_message, claude_messages, timeout=15):
     """
-    Claude API 호출 (스트리밍) - 간결한 코드 생성 요청 추가
+    Claude API 호출 (스트리밍)
     """
     try:
-        # 시스템 프롬프트에 코드 길이 제한 강화
-        system_message_with_limit = system_message + "\n\n추가 중요 지침: 생성하는 코드는 절대로 200줄을 넘지 마세요. 코드 간결성이 최우선입니다. 주석을 최소화하고, 핵심 기능만 구현하세요. 불필요한 UI 요소나 장식은 제외하세요. 모든 코드는 하나의 HTML 파일에 포함되어야 합니다."
+        system_message_with_limit = system_message + "\n\n추가 중요 지침: 생성하는 코드는 절대로 200줄을 넘지 마세요. 코드 간결성이 최우선입니다. 주석을 최소화하고, 핵심 기능만 구현하세요."
         
         start_time = time.time()
         with claude_client.messages.stream(
@@ -215,7 +229,7 @@ async def try_claude_api(system_message, claude_messages, timeout=15):
             max_tokens=19800,
             system=system_message_with_limit,
             messages=claude_messages,
-            temperature=0.3,  # 온도 낮게 설정하여 일관된 결과 유도
+            temperature=0.3,
         ) as stream:
             collected_content = ""
             for chunk in stream:
@@ -235,16 +249,15 @@ async def try_openai_api(openai_messages):
     OpenAI API 호출 (스트리밍) - 코드 길이 제한 강화
     """
     try:
-        # 첫 번째 시스템 메시지에 코드 길이 제한 추가
         if openai_messages and openai_messages[0]["role"] == "system":
-            openai_messages[0]["content"] += "\n\n추가 중요 지침: 생성하는 코드는 절대로 200줄을 넘지 마세요. 코드 간결성이 최우선입니다. 주석을 최소화하고, 핵심 기능만 구현하세요. 불필요한 UI 요소나 장식은 제외하세요. 모든 코드는 하나의 HTML 파일에 포함되어야 합니다."
-        
+            openai_messages[0]["content"] += "\n\n추가 중요 지침: 생성하는 코드는 절대로 200줄을 넘지 마세요. 코드 간결성이 최우선입니다. 주석은 최소화하고, 핵심 기능만 구현하세요."
+
         stream = openai_client.chat.completions.create(
             model="o3",
             messages=openai_messages,
             stream=True,
             max_tokens=19800,
-            temperature=0.2  # 온도 낮게 설정
+            temperature=0.2
         )
         collected_content = ""
         for chunk in stream:
@@ -253,14 +266,13 @@ async def try_openai_api(openai_messages):
                 yield collected_content
     except Exception as e:
         raise e
-        
+
 
 # ------------------------
 # 4) 템플릿(하나로 통합)
 # ------------------------
 
 def load_json_data():
-    # 실제 DEMO_LIST의 모든 항목을 반환하도록 수정
     data_list = []
     for item in DEMO_LIST:
         data_list.append({
@@ -343,9 +355,6 @@ function copyToInput(card) {
     return gr.HTML(value=html_content)
 
 def load_all_templates():
-    """
-    모든 템플릿을 하나로 보여주는 함수
-    """
     return create_template_html("🎮 모든 게임 템플릿", load_json_data())
 
 
@@ -354,10 +363,6 @@ def load_all_templates():
 # ------------------------
 
 def remove_code_block(text):
-    """
-    More robust function to extract code from markdown code blocks
-    텍스트에서 ```html 및 ``` 태그를 완전히 제거하는 함수
-    """
     pattern = r'```html\s*([\s\S]+?)\s*```'
     match = re.search(pattern, text, re.DOTALL)
     if match:
@@ -373,10 +378,6 @@ def remove_code_block(text):
     return text.strip()
 
 def optimize_code(code: str) -> str:
-    """
-    AI가 생성한 코드를 최적화하여 크기를 줄이는 함수
-    불필요한 주석, 공백, 장황한 코드 등을 제거
-    """
     if not code or len(code.strip()) == 0:
         return code
     
@@ -410,9 +411,6 @@ def optimize_code(code: str) -> str:
     return cleaned_code
 
 def send_to_sandbox(code):
-    """
-    iframe으로 렌더링
-    """
     clean_code = remove_code_block(code)
     clean_code = optimize_code(clean_code)
     
@@ -457,7 +455,6 @@ def boost_prompt(prompt: str) -> str:
 - 최소한의 필수 게임 요소만 포함
 """
     try:
-        # Claude API
         try:
             response = claude_client.messages.create(
                 model="claude-3-7-sonnet-20250219",
@@ -646,10 +643,119 @@ class Demo:
         return []
 
 
+####################################################
+# 1) deploy_to_vercel 함수
+####################################################
+def deploy_to_vercel(code: str):
+    print(f"[DEBUG] deploy_to_vercel() 시작. code 길이: {len(code) if code else 0}")
+    try:
+        if not code or len(code.strip()) < 10:
+            print("[DEBUG] 배포 불가: code가 짧음")
+            return "No code to deploy."
+
+        token = "A8IFZmgW2cqA4yUNlLPnci0N"
+        if not token:
+            print("[DEBUG] Vercel 토큰이 없음.")
+            return "Vercel token is not set."
+
+        project_name = ''.join(random.choice(string.ascii_lowercase) for _ in range(6))
+        print(f"[DEBUG] 생성된 project_name: {project_name}")
+
+        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
+        }
+
+        print("[DEBUG] Vercel API 요청 전송중...")
+        deploy_response = requests.post(deploy_url, headers=headers, json=deploy_data)
+        print("[DEBUG] 응답 status_code:", deploy_response.status_code)
+
+        if deploy_response.status_code != 200:
+            print("[DEBUG] 배포 실패:", deploy_response.text)
+            return f"Deployment failed: {deploy_response.text}"
+
+        deployment_url = f"https://{project_name}.vercel.app"
+        print(f"[DEBUG] 배포 성공 -> URL: {deployment_url}")
+        time.sleep(5)
+
+
+    # Markdown 링크로 반환
+        return f"""
+        ✅ **Deployment complete!**  
+        Your app is live at:  
+        [**{deployment_url}**]({deployment_url})
+        """    
+
+
+    
+    except Exception as e:
+        print("[ERROR] deploy_to_vercel() 예외:", e)
+        return f"Error during deployment: {str(e)}"
+
+
+
 # ------------------------
-# 7) Gradio / Modelscope UI 빌드
+# (3) handle_deploy_legacy
 # ------------------------
+def handle_deploy_legacy(code):
+    logger.debug(f"[handle_deploy_legacy] code 길이: {len(code) if code else 0}")
+    if not code or len(code.strip()) < 10:
+        logger.info("[handle_deploy_legacy] 코드가 짧음.")
+        return "<div style='color:red;'>배포할 코드가 없습니다.</div>"
 
+    clean_code = remove_code_block(code)
+    logger.debug(f"[handle_deploy_legacy] remove_code_block 후 길이: {len(clean_code)}")
+
+    result_html = deploy_to_vercel(clean_code)
+    logger.debug(f"[handle_deploy_legacy] 배포 결과 HTML 길이: {len(result_html)}")
+
+    encoded_html = base64.b64encode(result_html.encode('utf-8')).decode()
+    data_uri = f"data:text/html;charset=utf-8;base64,{encoded_html}"
+
+    iframe_html = f"""
+    <iframe src="{data_uri}"
+            style="width:100%; height:600px; border:none;"
+            sandbox="allow-scripts allow-same-origin allow-popups">
+    </iframe>
+    """
+    logger.debug("[handle_deploy_legacy] iframe_html 반환")
+    return iframe_html
+
+
+# ------------------------
+# 8) Gradio / Modelscope UI 빌드
+# ------------------------
 demo_instance = Demo()
 theme = gr.themes.Soft(
     primary_hue="blue",
@@ -661,221 +767,36 @@ theme = gr.themes.Soft(
 )
 
 with gr.Blocks(css_paths=["app.css"], theme=theme) as demo:
-    # 헤더 HTML
     header_html = gr.HTML("""
     <div class="app-header">
         <h1>🎮 Vibe Game Craft</h1>
-        <p>설명을 입력하면 웹 기반 HTML5, JavaScript, CSS 게임을 생성합니다. 직관적인 인터페이스로 쉽게 게임을 만들고, 실시간으로 미리보기를 확인하세요.</p>
+        <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 {
-        --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;
-    }
+    /* (생략) ... CSS ... */
     </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';
-    }
+    /* (생략) ... JS copyBannerUrl / showDeployBanner ... */
     </script>
     """)
 
     history = gr.State([])
     setting = gr.State({"system": SystemPrompt})
-    
-    # 배포 상태를 저장할 변수
-    deploy_status = gr.State({
-        "is_deployed": False,
-        "status": "",
-        "url": "",
-        "message": ""
-    })
+    deploy_status = gr.State({"is_deployed": False,"status": "","url": "","message": ""})
 
     with ms.Application() as app:
         with antd.ConfigProvider():
 
-            # code Drawer
             with antd.Drawer(open=False, title="코드 보기", placement="left", width="750px") as code_drawer:
                 code_output = legacy.Markdown()
 
-            # history Drawer
             with antd.Drawer(open=False, title="히스토리", placement="left", width="900px") as history_drawer:
-                history_output = legacy.Chatbot(
-                    show_label=False, flushing=False, height=960, elem_classes="history_chatbot"
-                )
+                history_output = legacy.Chatbot(show_label=False, flushing=False, height=960, elem_classes="history_chatbot")
 
-            # templates Drawer
             with antd.Drawer(
                 open=False,
                 title="게임 템플릿",
@@ -888,7 +809,6 @@ with gr.Blocks(css_paths=["app.css"], theme=theme) as demo:
                     session_history = gr.HTML(elem_classes="session-history")
                     close_btn = antd.Button("닫기", type="default", elem_classes="close-btn")
 
-            # 좌우 레이아웃
             with antd.Row(gutter=[32, 12], align="top", elem_classes="equal-height-container") as layout:
 
                 # 왼쪽 Col
@@ -896,31 +816,25 @@ with gr.Blocks(css_paths=["app.css"], theme=theme) as demo:
                     with ms.Div(elem_classes="right_panel panel"):
                         gr.HTML(r"""
 <div class="render_header">
-    <span class="header_btn"></span>
-    <span class="header_btn"></span>
-    <span class="header_btn"></span>
+    <span class="header_btn"></span><span class="header_btn"></span><span class="header_btn"></span>
 </div>
 """)
                         with antd.Tabs(active_key="empty", render_tab_bar="() => null") as state_tab:
                             with antd.Tabs.Item(key="empty"):
                                 empty = antd.Empty(description="게임을 만들려면 설명을 입력하세요", elem_classes="right_content")
                             with antd.Tabs.Item(key="loading"):
-                                loading = antd.Spin(
-                                    True, tip="게임 코드 생성 중...", size="large", elem_classes="right_content"
-                                )
+                                loading = antd.Spin(True, tip="게임 코드 생성 중...", size="large", elem_classes="right_content")
                             with antd.Tabs.Item(key="render"):
                                 sandbox = gr.HTML(elem_classes="html_content")
 
                 # 오른쪽 Col
                 with antd.Col(span=24, md=8, elem_classes="equal-height-col"):
                     with antd.Flex(vertical=True, gap="small", elem_classes="right-top-buttons"):
-                        # 상단 메뉴 버튼들
                         with antd.Flex(gap="small", elem_classes="setting-buttons", justify="space-between"):
                             codeBtn = antd.Button("🧑‍💻 코드 보기", type="default", elem_classes="code-btn")
                             historyBtn = antd.Button("📜 히스토리", type="default", elem_classes="history-btn")
                             template_btn = antd.Button("🎮 템플릿", type="default", elem_classes="template-btn")
                         
-                        # 액션 버튼들
                         with antd.Flex(gap="small", justify="space-between", elem_classes="action-buttons"):
                             btn = antd.Button("전송", type="primary", size="large", elem_classes="send-btn")
                             boost_btn = antd.Button("증강", type="default", size="large", elem_classes="boost-btn")
@@ -937,44 +851,19 @@ with gr.Blocks(css_paths=["app.css"], theme=theme) as demo:
                         )
                         gr.HTML('<div class="help-text">💡 원하는 게임의 설명을 입력하세요. 예: "테트리스 게임 제작해줘."</div>')
 
-                        deploy_result_container = 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>
-                            """
-                        )                        
-   
-                        
-                        js_trigger = gr.HTML(elem_id="js-trigger", visible=False)
-
-            # 이벤트 / 콜백
-            # Code Drawer
-            codeBtn.click(
-                lambda: gr.update(open=True),
-                inputs=[],
-                outputs=[code_drawer]
-            )
-            code_drawer.close(
-                lambda: gr.update(open=False),
-                inputs=[],
-                outputs=[code_drawer]
-            )
+                        # Markdown으로 배포 결과 표시
+                        deploy_result_container = gr.Markdown(
+                            value="아직 배포된 게임이 없습니다.",
+                            label="Deployment Result"
+                        )
 
-            # History Drawer
-            historyBtn.click(
-                history_render,
-                inputs=[history],
-                outputs=[history_drawer, history_output]
-            )
-            history_drawer.close(
-                lambda: gr.update(open=False),
-                inputs=[],
-                outputs=[history_drawer]
-            )
+            # Code Drawer 열기/닫기
+            codeBtn.click(lambda: gr.update(open=True), inputs=[], outputs=[code_drawer])
+            code_drawer.close(lambda: gr.update(open=False), inputs=[], outputs=[code_drawer])
+
+            # History Drawer 열기/닫기
+            historyBtn.click(history_render, inputs=[history], outputs=[history_drawer, history_output])
+            history_drawer.close(lambda: gr.update(open=False), inputs=[], outputs=[history_drawer])
 
             # Template Drawer
             template_btn.click(
@@ -982,14 +871,8 @@ with gr.Blocks(css_paths=["app.css"], theme=theme) as demo:
                 outputs=[session_drawer, session_history],
                 queue=False
             )
-            session_drawer.close(
-                lambda: (gr.update(open=False), gr.HTML("")),
-                outputs=[session_drawer, session_history]
-            )
-            close_btn.click(
-                lambda: (gr.update(open=False), gr.HTML("")),
-                outputs=[session_drawer, session_history]
-            )
+            session_drawer.close(lambda: (gr.update(open=False), gr.HTML("")), outputs=[session_drawer, session_history])
+            close_btn.click(lambda: (gr.update(open=False), gr.HTML("")), outputs=[session_drawer, session_history])
 
             # 전송 버튼
             btn.click(
@@ -999,11 +882,7 @@ with gr.Blocks(css_paths=["app.css"], theme=theme) as demo:
             )
 
             # 클리어 버튼
-            clear_btn.click(
-                demo_instance.clear_history,
-                inputs=[],
-                outputs=[history]
-            )
+            clear_btn.click(demo_instance.clear_history, inputs=[], outputs=[history])
 
             # 증강 버튼
             boost_btn.click(
@@ -1019,174 +898,16 @@ 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:
-                    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>
-                    `;
-                    </script>
-                    """
-                    return js_code, {
-                        "is_deployed": False,
-                        "status": "error",
-                        "message": "배포할 코드가 없습니다.",
-                        "url": ""
-                    }
-                
-                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>
-                        </div>
-                    `;
-                    </script>
-                    """
-                    yield loading_js, 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>
-                                </div>
-                            </div>
-                        `;
-                        </script>
-                        """
-                        return success_js, {
-                            "is_deployed": True,
-                            "status": "success",
-                            "url": url,
-                            "message": "배포 완료!"
-                        }
-                    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>
-                            </div>
-                        `;
-                        </script>
-                        """
-                        return error_js, {
-                            "is_deployed": False,
-                            "status": "error",
-                            "message": error_msg,
-                            "url": ""
-                        }
-                        
-                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>
-                        </div>
-                    `;
-                    </script>
-                    """
-                    return exception_js, {
-                        "is_deployed": False,
-                        "status": "error",
-                        "message": error_msg,
-                        "url": ""
-                    }
-
-            # 배포 버튼 클릭
+            # 배포 버튼 → deploy_result_container (Markdown)
             deploy_btn.click(
-                fn=handle_deploy,
-                inputs=[code_output, deploy_status],
-                outputs=[deploy_result_container, deploy_status]
+                fn=lambda code: deploy_to_vercel(remove_code_block(code)) if code else "No code generated.",
+                inputs=[code_output],
+                outputs=[deploy_result_container]
             )
 
-
 # ------------------------
-# 8) 실제 실행
+# 9) 실행
 # ------------------------
-
 if __name__ == "__main__":
     try:
         demo_instance = Demo()