app.py

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

class Role:
    SYSTEM = "system"
    USER = "user"
    ASSISTANT = "assistant"

DEMO_LIST = [
    {"description": "블록이 위에서 떨어지는 클래식 테트리스 게임을 개발해주세요..."},
    {"description": "두 명이 번갈아가며 플레이할 수 있는 체스 게임을 만들어주세요..."},
    # ... 중략 (게임 템플릿) ...
]

SystemPrompt = """# GameCraft 시스템 프롬프트
(중략)
"""

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

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-2",
            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="gpt-4",
            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

def load_json_data():
    data_list = []
    for item in DEMO_LIST:
        data_list.append({
            "name": f"[게임] {item['description'][:20]}...",
            "prompt": item['description']
        })
    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"""
</div>
<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 }));
        // 템플릿 Drawer 닫기
        document.querySelector('.session-drawer .close-btn').click();
    }
}
</script>
"""
    return gr.HTML(value=html_content)

def load_all_templates():
    return create_template_html("🎮 모든 게임 템플릿", load_json_data())

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 ""
    boost_system_prompt = """당신은 웹 게임 개발 프롬프트 전문가입니다.
(중략)
"""
    try:
        # 시도1: Claude
        try:
            response = claude_client.messages.create(
                model="claude-2",
                max_tokens=10000,
                temperature=0.3,
                messages=[{
                    "role": "user",
                    "content": f"다음 게임 프롬프트를 분석하고 증강하되, 간결함을 유지하세요: {prompt}"
                }],
                system=boost_system_prompt
            )
            if hasattr(response, 'content') and len(response.content) > 0:
                return response.content[0].text
            raise Exception("Claude 응답 형식 오류")
        except Exception:
            # 시도2: OpenAI
            completion = openai_client.chat.completions.create(
                model="gpt-4",
                messages=[
                    {"role": "system", "content": boost_system_prompt},
                    {"role": "user", "content": f"다음 게임 프롬프트를 증강: {prompt}"}
                ],
                max_tokens=10000,
                temperature=0.3
            )
            if completion.choices and len(completion.choices) > 0:
                return completion.choices[0].message.content
            raise Exception("OpenAI 응답 형식 오류")
    except Exception:
        return prompt

def handle_boost(prompt: str):
    try:
        boosted_prompt = boost_prompt(prompt)
        return boosted_prompt, gr.update(active_key="empty")
    except:
        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">
    <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")

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"""
다음 게임을 제작해주세요.
(중략)
게임 요청: {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}줄)** 
(중략)
"""
                    collected_content = warning_msg
                    yield [
                        collected_content,
                        _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 generated.")
        except Exception as e:
            raise ValueError(f'Error calling APIs: {str(e)}')

    def clear_history(self):
        return []

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:
    header_html = gr.HTML("""
    <div class="app-header">
        <h1>🎮 Vibe Game Craft</h1>
        <p>설명을 입력하면 웹 기반 HTML5, JavaScript, CSS 게임을 생성합니다...</p>
    </div>
    
    <!-- 배포 결과 배너 - 헤더 바로 아래 위치 -->
    <div id="deploy-banner" style="display:none;" class="deploy-banner">
        <div class="deploy-banner-content">
            <div class="deploy-banner-icon">🚀</div>
            <div class="deploy-banner-info">
                <div id="deploy-banner-title" class="deploy-banner-title">배포 상태</div>
                <div id="deploy-banner-message" class="deploy-banner-message"></div>
            </div>
            <div id="deploy-banner-url-container" class="deploy-banner-url-container" style="display:none;">
                <a id="deploy-banner-url" href="#" target="_blank" class="deploy-banner-url"></a>
                <button onclick="copyBannerUrl()" class="deploy-banner-copy-btn">복사</button>
            </div>
        </div>
    </div>
    
    <script>
    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');
      banner.className = 'deploy-banner '+type;
      document.getElementById('deploy-banner-title').textContent = title;
      document.getElementById('deploy-banner-message').textContent = message;
      const urlContainer = document.getElementById('deploy-banner-url-container');
      const bannerUrl = document.getElementById('deploy-banner-url');
      if(url){
        bannerUrl.href=url; bannerUrl.textContent=url;
        urlContainer.style.display='flex';
      } else { urlContainer.style.display='none'; }
      banner.style.display='block';
    }
    </script>
    """)

    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():
            with antd.Drawer(open=False, title="코드 보기", placement="left", width="750px") as code_drawer:
                code_output = legacy.Markdown()

            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")

            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("""
<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="예) 테트리스 게임 만들기...",
                            max_length=100000
                        )
                        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)

            # 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(handle_boost, inputs=[input_text], outputs=[input_text, state_tab])
            execute_btn.click(execute_code, inputs=[input_text], outputs=[sandbox, state_tab])

            def deploy_to_vercel(code: str):
                try:
                    token = "YOUR_VERCEL_TOKEN"  # 실제 토큰
                    if not token:
                        return {"status": "error", "message": "Vercel 토큰이 설정되지 않았습니다."}
                    project_name = ''.join(random.choice(string.ascii_lowercase) for _ 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
                    }
                    r = requests.post(deploy_url, headers=headers, json=deploy_data)
                    if r.status_code != 200:
                        return {"status":"error","message":f"배포 실패: {r.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"배포 중 오류: {e}"}

            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["url"]
                        success_js = f"""
                        <script>
                        showDeployBanner('success','✅ 배포 완료','게임이 성공적으로 배포되었습니다.','{url}');
                        document.getElementById('deploy-result-box').innerHTML = `
                            <div class="deploy-success">
                                <div class="success-icon">✅</div>
                                <div>배포 성공!</div>
                                <div><a href="{url}" target="_blank">{url}</a></div>
                            </div>
                        `;
                        </script>
                        """
                        return success_js, {
                            "is_deployed": True,
                            "status":"success","url":url,"message":"배포 완료"
                        }
                    else:
                        msg = result.get("message","알 수 없는 오류")
                        error_js = f"""
                        <script>
                        showDeployBanner('error','⚠️ 배포 실패','{msg}','');
                        document.getElementById('deploy-result-box').innerHTML=`
                            <div class="deploy-error">
                                <div class="error-icon">⚠️</div>
                                <div class="error-message">배포 실패: {msg}</div>
                            </div>
                        `;
                        </script>
                        """
                        return error_js, {"is_deployed":False,"status":"error","url":"","message":msg}
                except Exception as e:
                    err_msg = str(e)
                    exception_js = f"""
                    <script>
                    showDeployBanner('error','⚠️ 시스템 오류','{err_msg}','');
                    document.getElementById('deploy-result-box').innerHTML=`
                        <div class="deploy-error">
                            <div class="error-icon">⚠️</div>
                            <div class="error-message">시스템 오류: {err_msg}</div>
                        </div>
                    `;
                    </script>
                    """
                    return exception_js, {"is_deployed":False,"status":"error","url":"","message":err_msg}

            deploy_btn.click(
                fn=handle_deploy,
                inputs=[code_output, deploy_status],
                outputs=[deploy_result_container, deploy_status]
            )

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