Create app.py

app.py

@@ -0,0 +1,759 @@
+import os
+import re
+import random
+import time
+import html
+import base64
+import string
+import json
+import asyncio
+import requests
+import anthropic
+import openai
+
+from http import HTTPStatus
+from typing import Dict, List, Optional, Tuple
+from functools import partial
+
+import gradio as gr
+import modelscope_studio.components.base as ms
+import modelscope_studio.components.legacy as legacy
+import modelscope_studio.components.antd as antd
+
+
+# ------------------------
+# 1) DEMO_LIST 및 SystemPrompt
+# ------------------------
+
+DEMO_LIST = [
+    {"description": "블록이 위에서 떨어지는 클래식 테트리스 게임을 개발해주세요. 화살표 키로 조작하며, 가로줄이 채워지면 해당 줄이 제거되고 점수가 올라가는 메커니즘이 필요합니다. 난이도는 시간이 지날수록 블록이 빨라지도록 구현하고, 게임오버 조건과 점수 표시 기능을 포함해주세요."},
+    {"description": "두 명이 번갈아가며 플레이할 수 있는 체스 게임을 만들어주세요. 기본적인 체스 규칙(킹, 퀸, 룩, 비숍, 나이트, 폰의 이동 규칙)을 구현하고, 체크와 체크메이트 감지 기능이 필요합니다. 드래그 앤 드롭으로 말을 움직일 수 있게 하며, 이동 기록도 표시해주세요."},
+    # ...
+]
+
+SystemPrompt = """
+# GameCraft 시스템 프롬프트
+(중략 - 동일)
+"""
+
+# ------------------------
+# 2) 공통 상수, 함수, 클래스
+# ------------------------
+
+class Role:
+    SYSTEM = "system"
+    USER = "user"
+    ASSISTANT = "assistant"
+
+History = List[Tuple[str, str]]
+Messages = List[Dict[str, str]]
+
+IMAGE_CACHE = {}
+
+def get_image_base64(image_path):
+    if image_path in IMAGE_CACHE:
+        return IMAGE_CACHE[image_path]
+    try:
+        with open(image_path, "rb") as image_file:
+            encoded_string = base64.b64encode(image_file.read()).decode()
+            IMAGE_CACHE[image_path] = encoded_string
+            return encoded_string
+    except:
+        return IMAGE_CACHE.get('default.png', '')
+
+def history_to_messages(history: History, system: str) -> Messages:
+    messages = [{'role': Role.SYSTEM, 'content': system}]
+    for h in history:
+        messages.append({'role': Role.USER, 'content': h[0]})
+        messages.append({'role': Role.ASSISTANT, 'content': h[1]})
+    return messages
+
+def messages_to_history(messages: Messages) -> History:
+    assert messages[0]['role'] == Role.SYSTEM
+    history = []
+    for q, r in zip(messages[1::2], messages[2::2]):
+        history.append([q['content'], r['content']])
+    return history
+
+
+# ------------------------
+# 3) API 연동 설정
+# ------------------------
+
+YOUR_ANTHROPIC_TOKEN = os.getenv('ANTHROPIC_API_KEY', '').strip()
+YOUR_OPENAI_TOKEN    = os.getenv('OPENAI_API_KEY',     '').strip()
+
+claude_client = anthropic.Anthropic(api_key=YOUR_ANTHROPIC_TOKEN)
+openai_client = openai.OpenAI(api_key=YOUR_OPENAI_TOKEN)
+
+async def try_claude_api(system_message, claude_messages, timeout=15):
+    try:
+        system_message_with_limit = system_message + "\n\n추가 중요 지침: 생성하는 코드는 절대로 200줄을 넘지 마세요..."
+        start_time = time.time()
+        with claude_client.messages.stream(
+            model="claude-3-7-sonnet-20250219",
+            max_tokens=19800,
+            system=system_message_with_limit,
+            messages=claude_messages,
+            temperature=0.3
+        ) as stream:
+            collected_content = ""
+            for chunk in stream:
+                current_time = time.time()
+                if current_time - start_time > timeout:
+                    raise TimeoutError("Claude API timeout")
+                if chunk.type == "content_block_delta":
+                    collected_content += chunk.delta.text
+                    yield collected_content
+                    await asyncio.sleep(0)
+                start_time = current_time
+    except Exception as e:
+        raise e
+
+async def try_openai_api(openai_messages):
+    try:
+        if openai_messages and openai_messages[0]["role"] == "system":
+            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
+        )
+        collected_content = ""
+        for chunk in stream:
+            if chunk.choices[0].delta.content is not None:
+                collected_content += chunk.choices[0].delta.content
+                yield collected_content
+    except Exception as e:
+        raise e
+
+
+# ------------------------
+# 4) 템플릿(하나로 통합)
+# ------------------------
+
+def load_json_data():
+    data_list = [
+        {
+            "name": "[게임] 테트리스 클론",
+            "prompt": "블록이 위에서 떨어지는 클래식 테���리스 게임을 개발해주세요..."
+        },
+        # ...
+    ]
+    return data_list
+
+def create_template_html(title, items):
+    import html as html_lib
+    html_content = r"""
+<style>
+.prompt-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+    gap: 16px;
+    padding: 12px;
+}
+.prompt-card {
+    background: white;
+    border: 1px solid #eee;
+    border-radius: 12px;
+    padding: 12px;
+    cursor: pointer;
+    box-shadow: 0 4px 8px rgba(0,0,0,0.05);
+    transition: all 0.3s ease;
+}
+.prompt-card:hover {
+    transform: translateY(-4px);
+    box-shadow: 0 6px 12px rgba(0,0,0,0.1);
+}
+.card-name {
+    font-weight: bold;
+    margin-bottom: 8px;
+    font-size: 13px;
+    color: #444;
+}
+.card-prompt {
+    font-size: 11px;
+    line-height: 1.4;
+    color: #666;
+    display: -webkit-box;
+    -webkit-line-clamp: 7;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    height: 84px;
+    background-color: #f8f9fa;
+    padding: 8px;
+    border-radius: 6px;
+}
+</style>
+<div class="prompt-grid">
+"""
+    for item in items:
+        card_html = f"""
+<div class="prompt-card" onclick="copyToInput(this)" data-prompt="{html_lib.escape(item.get('prompt', ''))}">
+    <div class="card-name">{html_lib.escape(item.get('name', ''))}</div>
+    <div class="card-prompt">{html_lib.escape(item.get('prompt', ''))}</div>
+</div>
+"""
+        html_content += card_html
+    html_content += r"""
+<script>
+function copyToInput(card) {
+    const prompt = card.dataset.prompt;
+    const textarea = document.querySelector('.ant-input-textarea-large textarea');
+    if (textarea) {
+        textarea.value = prompt;
+        textarea.dispatchEvent(new Event('input', { bubbles: true }));
+        document.querySelector('.session-drawer .close-btn').click();
+    }
+}
+</script>
+</div>
+"""
+    return gr.HTML(value=html_content)
+
+def load_all_templates():
+    return create_template_html("🎮 모든 게임 템플릿", load_json_data())
+
+# ------------------------
+# 5) 배포/부스트/기타 유틸
+# ------------------------
+
+def remove_code_block(text):
+    pattern = r'```html\s*([\s\S]+?)\s*```'
+    match = re.search(pattern, text, re.DOTALL)
+    if match:
+        return match.group(1).strip()
+    
+    pattern = r'```(?:\w+)?\s*([\s\S]+?)\s*```'
+    match = re.search(pattern, text, re.DOTALL)
+    if match:
+        return match.group(1).strip()
+    
+    text = re.sub(r'```html\s*', '', text)
+    text = re.sub(r'\s*```', '', text)
+    return text.strip()
+
+def optimize_code(code: str) -> str:
+    if not code or len(code.strip()) == 0:
+        return code
+    lines = code.split('\n')
+    if len(lines) <= 200:
+        return code
+
+    comment_patterns = [
+        r'/\*[\s\S]*?\*/',
+        r'//.*?$',
+        r'<!--[\s\S]*?-->'
+    ]
+    cleaned_code = code
+    for pattern in comment_patterns:
+        cleaned_code = re.sub(pattern, '', cleaned_code, flags=re.MULTILINE)
+
+    cleaned_lines = []
+    empty_line_count = 0
+    for line in cleaned_code.split('\n'):
+        if line.strip() == '':
+            empty_line_count += 1
+            if empty_line_count <= 1:
+                cleaned_lines.append('')
+        else:
+            empty_line_count = 0
+            cleaned_lines.append(line)
+    cleaned_code = '\n'.join(cleaned_lines)
+    cleaned_code = re.sub(r'console\.log\(.*?\);', '', cleaned_code, flags=re.MULTILINE)
+    cleaned_code = re.sub(r' {2,}', ' ', cleaned_code)
+    return cleaned_code
+
+def send_to_sandbox(code):
+    clean_code = remove_code_block(code)
+    clean_code = optimize_code(clean_code)
+    if clean_code.startswith('```html'):
+        clean_code = clean_code[7:].strip()
+    if clean_code.endswith('```'):
+        clean_code = clean_code[:-3].strip()
+
+    if not clean_code.strip().startswith('<!DOCTYPE') and not clean_code.strip().startswith('<html'):
+        clean_code = f"""<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Game Preview</title>
+</head>
+<body>
+{clean_code}
+</body>
+</html>"""
+    encoded_html = base64.b64encode(clean_code.encode('utf-8')).decode('utf-8')
+    data_uri = f"data:text/html;charset=utf-8;base64,{encoded_html}"
+    return f'<iframe src="{data_uri}" width="100%" height="920px" style="border:none;"></iframe>'
+
+def boost_prompt(prompt: str) -> str:
+    if not prompt:
+        return ""
+    # (생략)
+    # 이 부분은 동일
+
+def handle_boost(prompt: str):
+    try:
+        boosted_prompt = boost_prompt(prompt)
+        return boosted_prompt, gr.update(active_key="empty")
+    except Exception:
+        return prompt, gr.update(active_key="empty")
+
+def history_render(history: History):
+    return gr.update(open=True), history
+
+def execute_code(query: str):
+    if not query or query.strip() == '':
+        return None, gr.update(active_key="empty")
+    try:
+        clean_code = remove_code_block(query)
+        if clean_code.startswith('```html'):
+            clean_code = clean_code[7:].strip()
+        if clean_code.endswith('```'):
+            clean_code = clean_code[:-3].strip()
+        if not clean_code.strip().startswith('<!DOCTYPE') and not clean_code.strip().startswith('<html'):
+            if not ('<body' in clean_code and '</body>' in clean_code):
+                clean_code = f"""<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Game Preview</title>
+</head>
+<body>
+{clean_code}
+</body>
+</html>"""
+        return send_to_sandbox(clean_code), gr.update(active_key="render")
+    except Exception as e:
+        print(f"Execute code error: {str(e)}")
+        return None, gr.update(active_key="empty")
+
+
+# ------------------------
+# 6) 데모 클래스
+# ------------------------
+
+class Demo:
+    def __init__(self):
+        pass
+        
+    async def generation_code(self, query: Optional[str], _setting: Dict[str, str], _history: Optional[History]):
+        if not query or query.strip() == '':
+            query = random.choice(DEMO_LIST)['description']
+        
+        if _history is None:
+            _history = []
+        
+        query = f"""
+다음 게임을 제작해주세요.
+중요 요구사항:
+1. 코드는 가능한 한 간결하게 작성할 것
+2. 불필요한 주석이나 설명은 제외할 것
+3. 코드는 600줄을 넘지 않을 것
+4. 모든 코드는 하나의 HTML 파일에 통합할 것
+5. 핵심 기능만 구현하고 부가 기능은 생략할 것
+게임 요청: {query}
+"""
+        messages = history_to_messages(_history, _setting['system'])
+        system_message = messages[0]['content']
+
+        claude_messages = [
+            {"role": msg["role"] if msg["role"] != "system" else "user", "content": msg["content"]}
+            for msg in messages[1:] + [{'role': Role.USER, 'content': query}]
+            if msg["content"].strip() != ''
+        ]
+        
+        openai_messages = [{"role": "system", "content": system_message}]
+        for msg in messages[1:]:
+            openai_messages.append({"role": msg["role"], "content": msg["content"]})
+        openai_messages.append({"role": "user", "content": query})
+        
+        try:
+            yield [
+                "Generating code...",
+                _history,
+                None,
+                gr.update(active_key="loading"),
+                gr.update(open=True)
+            ]
+            await asyncio.sleep(0)
+            collected_content = None
+            try:
+                async for content in try_claude_api(system_message, claude_messages):
+                    yield [
+                        content,
+                        _history,
+                        None,
+                        gr.update(active_key="loading"),
+                        gr.update(open=True)
+                    ]
+                    await asyncio.sleep(0)
+                collected_content = content
+            except Exception:
+                async for content in try_openai_api(openai_messages):
+                    yield [
+                        content,
+                        _history,
+                        None,
+                        gr.update(active_key="loading"),
+                        gr.update(open=True)
+                    ]
+                    await asyncio.sleep(0)
+                collected_content = content
+
+            if collected_content:
+                clean_code = remove_code_block(collected_content)
+                code_lines = clean_code.count('\n') + 1
+                if code_lines > 700:
+                    warning_msg = f"""
+⚠️ **경고: 생성된 코드가 너무 깁니다 ({code_lines}줄)** ...
+"""
+                    yield [warning_msg, _history, None, gr.update(active_key="empty"), gr.update(open=True)]
+                else:
+                    _history = messages_to_history([
+                        {'role': Role.SYSTEM, 'content': system_message}
+                    ] + claude_messages + [{
+                        'role': Role.ASSISTANT, 'content': collected_content
+                    }])
+                    yield [
+                        collected_content,
+                        _history,
+                        send_to_sandbox(clean_code),
+                        gr.update(active_key="render"),
+                        gr.update(open=True)
+                    ]
+            else:
+                raise ValueError("No content was generated from either API")
+        except Exception as e:
+            raise ValueError(f'Error calling APIs: {str(e)}')
+            
+    def clear_history(self):
+        return []
+
+
+# ------------------------
+# 7) Gradio / Modelscope UI 빌드
+# ------------------------
+
+demo_instance = Demo()
+theme = gr.themes.Soft(
+    primary_hue="blue",
+    secondary_hue="purple",
+    neutral_hue="slate",
+    spacing_size=gr.themes.sizes.spacing_md,
+    radius_size=gr.themes.sizes.radius_md,
+    text_size=gr.themes.sizes.text_md,
+)
+
+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>
+    </div>
+    """)
+    
+    history = gr.State([])
+    setting = gr.State({"system": SystemPrompt})
+    
+    deploy_status = gr.State({
+        "is_deployed": False,
+        "status": "",
+        "url": "",
+        "message": ""
+    })
+
+    with ms.Application() as app:
+        with antd.ConfigProvider():
+
+            # 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"
+                )
+
+            # templates Drawer
+            with antd.Drawer(
+                open=False,
+                title="게임 템플릿",
+                placement="right",
+                width="900px",
+                elem_classes="session-drawer"
+            ) as session_drawer:
+                with antd.Flex(vertical=True, gap="middle"):
+                    gr.Markdown("### 사용 가능한 게임 템플릿")
+                    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:
+
+                # 좌측 미리보기
+                with antd.Col(span=24, md=16, elem_classes="equal-height-col"):
+                    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>
+</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"
+                                )
+                            with antd.Tabs.Item(key="render"):
+                                sandbox = gr.HTML(elem_classes="html_content")
+
+                # 우측 입력/버튼/배포
+                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")
+                            execute_btn = antd.Button("코드", type="default", size="large", elem_classes="execute-btn")
+                            deploy_btn = antd.Button("배포", type="default", size="large", elem_classes="deploy-btn")
+                            clear_btn = antd.Button("클리어", type="default", size="large", elem_classes="clear-btn")
+
+                    with antd.Flex(vertical=True, gap="middle", wrap=True, elem_classes="input-panel"):
+                        input_text = antd.InputTextarea(
+                            size="large",
+                            allow_clear=True,
+                            placeholder=random.choice(DEMO_LIST)['description'],
+                            max_length=100000
+                        )
+                        gr.HTML('<div class="help-text">💡 원하는 게임의 설명을 입력하세요. 예: "테트리스 게임 제작해줘."</div>')
+
+                        # 순수 HTML만 넣을 컨테이너
+                        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)
+
+            # ─── 버튼 / Drawer 이벤트 ───
+            codeBtn.click(
+                lambda: gr.update(open=True),
+                inputs=[],
+                outputs=[code_drawer]
+            )
+            code_drawer.close(
+                lambda: gr.update(open=False),
+                inputs=[],
+                outputs=[code_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_btn.click(
+                fn=lambda: (gr.update(open=True), load_all_templates()),
+                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]
+            )
+
+            btn.click(
+                demo_instance.generation_code,
+                inputs=[input_text, setting, history],
+                outputs=[code_output, history, sandbox, state_tab, code_drawer]
+            )
+
+            clear_btn.click(
+                demo_instance.clear_history,
+                inputs=[],
+                outputs=[history]
+            )
+
+            boost_btn.click(
+                fn=handle_boost,
+                inputs=[input_text],
+                outputs=[input_text, state_tab]
+            )
+
+            execute_btn.click(
+                fn=execute_code,
+                inputs=[input_text],
+                outputs=[sandbox, state_tab]
+            )
+
+            def deploy_to_vercel(code: str):
+                """
+                배포 로직 (API 호출) - 스크립트 없이
+                """
+                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)}"}
+
+            # ─── 스크립트 없이 순수 HTML만 반환하는 handle_deploy ───
+            def handle_deploy(code, deploy_status):
+                if not code:
+                    # 코드가 없으면 바로 실패
+                    error_html = """
+                    <div style="border-left:5px solid #ff3b30; padding:10px; background:#ffecec; margin-top:10px;">
+                        <strong>⚠️ 배포 실패</strong><br>
+                        배포할 코드가 없습니다. 먼저 게임 코드를 생성해주세요.
+                    </div>
+                    """
+                    return error_html, {
+                        "is_deployed": False,
+                        "status": "error",
+                        "message": "배포할 코드가 없습니다.",
+                        "url": ""
+                    }
+                
+                try:
+                    # 배포 실행
+                    clean_code = remove_code_block(code)
+                    result = deploy_to_vercel(clean_code)
+
+                    if result.get("status") == "success":
+                        # 성공 시 URL을 순수 HTML로 표시
+                        url = result["url"]
+                        success_html = f"""
+                        <div style="border-left:5px solid #34c759; padding:10px; background:#e8f5e9; margin-top:10px;">
+                            <strong>✅ 배포 완료!</strong><br>
+                            <p>아래 주소에서 게임을 확인할 수 있습니다:</p>
+                            <a href="{url}" target="_blank" style="color:#1976d2;">{url}</a>
+                        </div>
+                        """
+                        return success_html, {
+                            "is_deployed": True,
+                            "status": "success",
+                            "url": url,
+                            "message": "배포 완료!"
+                        }
+                    else:
+                        error_msg = result.get("message", "알 수 없는 오류")
+                        error_html = f"""
+                        <div style="border-left:5px solid #ff3b30; padding:10px; background:#ffecec; margin-top:10px;">
+                            <strong>⚠️ 배포 실패</strong><br>{error_msg}
+                        </div>
+                        """
+                        return error_html, {
+                            "is_deployed": False,
+                            "status": "error",
+                            "message": error_msg,
+                            "url": ""
+                        }
+                except Exception as e:
+                    # 시스템 오류
+                    err = str(e)
+                    error_html = f"""
+                    <div style="border-left:5px solid #ff3b30; padding:10px; background:#ffecec; margin-top:10px;">
+                        <strong>⚠️ 시스템 오류</strong><br>{err}
+                    </div>
+                    """
+                    return error_html, {
+                        "is_deployed": False,
+                        "status": "error",
+                        "message": err,
+                        "url": ""
+                    }
+
+            deploy_btn.click(
+                fn=handle_deploy,
+                inputs=[code_output, 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