Spaces:

openfree
/

Vibe-Game

Paused

App Files Files Community

openfree commited on Apr 23

Commit

fb325e8

verified ·

1 Parent(s): 0bfb168

Update app.py

Browse files

Files changed (1) hide show

app.py +424 -421

app.py CHANGED Viewed

@@ -1,93 +1,28 @@
-<!DOCTYPE html>
-<html>
-<head>
-<style>
-/* app.css 내용이 이미 포함되어 있다고 가정 */
-body {
-    margin: 0;
-    padding: 0;
-    font-family: sans-serif;
-}
-.left_header {
-    text-align: center;
-    margin-bottom: 10px;
-}
-.header_btn {
-    width: 12px;
-    height: 12px;
-    border-radius: 50%;
-    background-color: #ff5f56;
-    display: inline-block;
-    margin-right: 8px;
-}
-.header_btn:nth-child(2) {
-    background-color: #ffbd2e;
-}
-.header_btn:nth-child(3) {
-    background-color: #27c93f;
-}
-.render_header {
-    background: #f3f3f3;
-    padding: 8px;
-    margin-top: 10px;
-    border-radius: 4px;
-    display: inline-block;
-}
-.right_content {
-    width: 100%;
-    height: 900px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-.html_content iframe {
-    border: none;
-    overflow: hidden;
-}
-</style>
-</head>
-<body>
-<script>
-"use strict";
-/* 원본 코드 그대로 유지, 단 layout 부분 수정 */
-</script>
-<script src="https://cdn.jsdelivr.net/npm/[email protected]/base64js.min.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/[email protected]/marked.min.js"></script>
-<!-- Gradio/Modelscope/antd 라이브러리가 이미 깔려 있다고 가정 -->
-<script>
-/* 원본 파이썬 코드에서 JS로 변환되는 부분이 아니라,
-   Gradio/Modelscope 통합 환경에서 파이썬 코드 그대로 동작한다고 가정. */
-</script>
-<!-- Python code (for Gradio/Modelscope) -->
-<script type="module">
 import os
 import re
 import random
-from http import HTTPStatus
-from typing import Dict, List, Optional, Tuple
 import base64
 import anthropic
 import openai
-import asyncio
-import time
 from functools import partial
-import json
 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
-import html
-import urllib.parse
-from huggingface_hub import HfApi, create_repo
-import string
-import requests
 DEMO_LIST = [
     {"description": "Create a Tetris-like puzzle game with arrow key controls, line-clearing mechanics, and increasing difficulty levels."},
     {"description": "Build an interactive Chess game with a basic AI opponent and drag-and-drop piece movement. Keep track of moves and detect check/checkmate."},
@@ -125,6 +60,7 @@ DEMO_LIST = [
     {"description": "Create a small action RPG with WASD movement, an attack button, special moves, leveling, and item drops."},
 ]
 SystemPrompt = """너의 이름은 'MOUSE'이다. You are an expert web game developer with a strong focus on gameplay mechanics, interactive design, and performance optimization.
 Your mission is to create compelling, modern, and fully interactive web-based games using HTML, JavaScript, and CSS.
 This code will be rendered directly in the browser.
@@ -157,9 +93,13 @@ class Role:
 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:
@@ -184,6 +124,7 @@ def messages_to_history(messages: Messages) -> History:
         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()
@@ -191,6 +132,9 @@ 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:
         start_time = time.time()
         with claude_client.messages.stream(
@@ -213,6 +157,9 @@ async def try_claude_api(system_message, claude_messages, timeout=15):
         raise e
 async def try_openai_api(openai_messages):
     try:
         stream = openai_client.chat.completions.create(
             model="gpt-4o",
@@ -229,93 +176,10 @@ async def try_openai_api(openai_messages):
     except Exception as e:
         raise e
-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 = []
-        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 as claude_error:
-                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:
-                _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(remove_code_block(collected_content)),
-                    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 []
 def remove_code_block(text):
     pattern = r'```html\n(.+?)\n```'
     match = re.search(pattern, text, re.DOTALL)
     if match:
@@ -323,17 +187,26 @@ def remove_code_block(text):
     else:
         return text.strip()
-def history_render(history: History):
-    return gr.update(open=True), history
 def send_to_sandbox(code):
     encoded_html = base64.b64encode(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\"></iframe>"
-theme = gr.themes.Soft()
 def load_json_data():
     return [
         {
             "name": "[게임] 테트리스 클론",
@@ -520,84 +393,90 @@ def load_new_templates():
     return create_template_html("✨ NEW 게임 템플릿", json_data)
 def create_template_html(title, items):
-    html_content = """
-    <style>
-        .prompt-grid {
-            display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-            gap: 20px;
-            padding: 20px;
-        }
-        .prompt-card {
-            background: white;
-            border: 1px solid #eee;
-            border-radius: 8px;
-            padding: 15px;
-            cursor: pointer;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
-        }
-        .prompt-card:hover {
-            transform: translateY(-2px);
-            transition: transform 0.2s;
-        }
-        .card-image {
-            width: 100%;
-            height: 180px;
-            object-fit: cover;
-            border-radius: 4px;
-            margin-bottom: 10px;
-        }
-        .card-name {
-            font-weight: bold;
-            margin-bottom: 8px;
-            font-size: 16px;
-            color: #333;
-        }
-        .card-prompt {
-            font-size: 11px;
-            line-height: 1.4;
-            color: #666;
-            display: -webkit-box;
-            -webkit-line-clamp: 6;
-            -webkit-box-orient: vertical;
-            overflow: hidden;
-            height: 90px;
-            background-color: #f8f9fa;
-            padding: 8px;
-            border-radius: 4px;
-        }
-    </style>
-    <div class="prompt-grid">
     """
     for item in items:
-        html_content += f"""
-        <div class="prompt-card" onclick="copyToInput(this)" data-prompt="{html.escape(item.get('prompt', ''))}">
-            <img src="{item.get('image_url', '')}" class="card-image" loading="lazy" alt="{html.escape(item.get('name', ''))}">
-            <div class="card-name">{html.escape(item.get('name', ''))}</div>
-            <div class="card-prompt">{html.escape(item.get('prompt', ''))}</div>
-        </div>
-        """
-    html_content += """
-    <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)
 TEMPLATE_CACHE = None
 def load_session_history(template_type="best"):
-    global TEMPLATE_CACHE
     try:
         json_data = load_json_data()
         templates = {
@@ -611,148 +490,162 @@ def load_session_history(template_type="best"):
             "new": "✨ NEW 게임 템플릿"
         }
-        html_content = """
-        <style>
-            .template-nav {
-                display: flex;
-                gap: 10px;
-                margin: 20px;
-                position: sticky;
-                top: 0;
-                background: white;
-                z-index: 100;
-                padding: 10px 0;
-                border-bottom: 1px solid #eee;
-            }
-            .template-btn {
-                padding: 8px 16px;
-                border: 1px solid #1890ff;
-                border-radius: 4px;
-                cursor: pointer;
-                background: white;
-                color: #1890ff;
-                font-weight: bold;
-                transition: all 0.3s;
-            }
-            .template-btn:hover {
-                background: #1890ff;
-                color: white;
-            }
-            .template-btn.active {
-                background: #1890ff;
-                color: white;
-            }
-            .prompt-grid {
-                display: grid;
-                grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-                gap: 20px;
-                padding: 20px;
-            }
-            .prompt-card {
-                background: white;
-                border: 1px solid #eee;
-                border-radius: 8px;
-                padding: 15px;
-                cursor: pointer;
-                box-shadow: 0 2px 5px rgba(0,0,0,0.1);
-            }
-            .prompt-card:hover {
-                transform: translateY(-2px);
-                transition: transform 0.2s;
-            }
-            .card-image {
-                width: 100%;
-                height: 180px;
-                object-fit: cover;
-                border-radius: 4px;
-                margin-bottom: 10px;
-            }
-            .card-name {
-                font-weight: bold;
-                margin-bottom: 8px;
-                font-size: 16px;
-                color: #333;
-            }
-            .card-prompt {
-                font-size: 11px;
-                line-height: 1.4;
-                color: #666;
-                display: -webkit-box;
-                -webkit-line-clamp: 6;
-                -webkit-box-orient: vertical;
-                overflow: hidden;
-                height: 90px;
-                background-color: #f8f9fa;
-                padding: 8px;
-                border-radius: 4px;
-            }
-            .template-section {
-                display: none;
-            }
-            .template-section.active {
-                display: block;
-            }
-        </style>
-        <div class="template-nav">
-            <button class="template-btn" onclick="showTemplate('best')">🏆 베스트</button>
-            <button class="template-btn" onclick="showTemplate('trending')">🔥 트렌딩</button>
-            <button class="template-btn" onclick="showTemplate('new')">✨ NEW</button>
-        </div>
-        """
         for section, items in templates.items():
             html_content += f"""
-            <div class="template-section" id="{section}-templates">
-                <div class="prompt-grid">
-            """
             for item in items:
-                html_content += f"""
-                <div class="prompt-card" onclick="copyToInput(this)" data-prompt="{html.escape(item.get('prompt', ''))}">
-                    <img src="{item.get('image_url', '')}" class="card-image" loading="lazy" alt="{html.escape(item.get('name', ''))}">
-                    <div class="card-name">{html.escape(item.get('name', ''))}</div>
-                    <div class="card-prompt">{html.escape(item.get('prompt', ''))}</div>
-                </div>
-                """
-            html_content += "</div></div>"
-        html_content += """
-        <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();
-            }
-        }
-        function showTemplate(type) {
-            document.querySelectorAll('.template-section').forEach(section => {
-                section.style.display = 'none';
-            });
-            document.querySelectorAll('.template-btn').forEach(btn => {
-                btn.classList.remove('active');
-            });
-            document.getElementById(type + '-templates').style.display = 'block';
-            event.target.classList.add('active');
-        }
-        document.addEventListener('DOMContentLoaded', function() {
-            showTemplate('best');
-            document.querySelector('.template-btn').classList.add('active');
-        });
-        </script>
-        """
         return gr.HTML(value=html_content)
-    except Exception as e:
         return gr.HTML("Error loading templates")
 def generate_space_name():
     letters = string.ascii_lowercase
     return ''.join(random.choice(letters) for i in range(6))
 def deploy_to_vercel(code: str):
     try:
-        token = "A8IFZmgW2cqA4yUNlLPnci0N"
         if not token:
             return "Vercel 토큰이 설정되지 않았습니다."
         project_name = ''.join(random.choice(string.ascii_lowercase) for i in range(6))
         deploy_url = "https://api.vercel.com/v13/deployments"
         headers = {
@@ -804,22 +697,25 @@ def deploy_to_vercel(code: str):
         return f"배포 중 오류 발생: {str(e)}"
 def boost_prompt(prompt: str) -> str:
     if not prompt:
         return ""
-    boost_system_prompt = """
-    당신은 웹 게임 개발 프롬프트 전문가입니다.
-    주어진 프롬프트를 분석하여 더 상세하고 전문적인 요구사항으로 확장하되,
-    원래 의도와 목적은 그대로 유지하면서 다음 관점들을 고려하여 증강하십시오:
-    1. 게임 플레이 재미와 난이도 밸런스
-    2. 인터랙티브 그래픽 및 애니메이션
-    3. 사용자 경험 최적화 (UI/UX)
-    4. 성능 최적화
-    5. 접근성과 호환성
-    기존 SystemPrompt의 모든 규칙을 준수하면서 증강된 프롬프트를 생성하십시오.
-    """
     try:
         try:
             response = claude_client.messages.create(
                 model="claude-3-7-sonnet-20250219",
@@ -832,7 +728,8 @@ def boost_prompt(prompt: str) -> str:
             if hasattr(response, 'content') and len(response.content) > 0:
                 return response.content[0].text
             raise Exception("Claude API 응답 형식 오류")
-        except Exception as claude_error:
             completion = openai_client.chat.completions.create(
                 model="gpt-4",
                 messages=[
@@ -845,32 +742,132 @@ def boost_prompt(prompt: str) -> str:
             if completion.choices and len(completion.choices) > 0:
                 return completion.choices[0].message.content
             raise Exception("OpenAI API 응답 형식 오류")
-    except Exception as e:
         return prompt
 def handle_boost(prompt: str):
     try:
         boosted_prompt = boost_prompt(prompt)
         return boosted_prompt, gr.update(active_key="empty")
-    except Exception as e:
         return prompt, gr.update(active_key="empty")
 demo_instance = Demo()
 with gr.Blocks(css_paths="app.css", theme=theme) as demo:
     history = gr.State([])
-    setting = gr.State({
-        "system": SystemPrompt,
-    })
     with ms.Application() as app:
         with antd.ConfigProvider():
             with antd.Drawer(open=False, title="code", placement="left", width="750px") as code_drawer:
                 code_output = legacy.Markdown()
             with antd.Drawer(open=False, title="history", 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="Templates",
@@ -880,19 +877,13 @@ with gr.Blocks(css_paths="app.css", theme=theme) as demo:
             ) as session_drawer:
                 with antd.Flex(vertical=True, gap="middle"):
                     gr.Markdown("### Available Game Templates")
-                    session_history = gr.HTML(
-                        elem_classes="session-history"
-                    )
-                    close_btn = antd.Button(
-                        "Close",
-                        type="default",
-                        elem_classes="close-btn"
-                    )
-            # 여기서부터 레이아웃 순서를 변경 (좌측: 미리보기 / 우측: 입력 및 버튼)
             with antd.Row(gutter=[32, 12]) as layout:
-                # 왼쪽 Col (미리보기)
                 with antd.Col(span=24, md=16):
                     with ms.Div(elem_classes="right_panel"):
                         with antd.Flex(gap="small", elem_classes="setting-buttons"):
@@ -902,24 +893,30 @@ with gr.Blocks(css_paths="app.css", theme=theme) as demo:
                             trending_btn = antd.Button("🔥 트렌딩 템플릿", type="default")
                             new_btn = antd.Button("✨ NEW 템플릿", type="default")
-                        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="empty input", elem_classes="right_content")
                             with antd.Tabs.Item(key="loading"):
-                                loading = antd.Spin(True, tip="coding...", 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):
                     with antd.Flex(vertical=True, gap="middle", wrap=True):
-                        # 제거 요청된 상단 박스(로고 등)를 완전히 삭제
-                        input = antd.InputTextarea(
-                            size="large",
-                            allow_clear=True,
                             placeholder=random.choice(DEMO_LIST)['description']
                         )
@@ -932,7 +929,9 @@ with gr.Blocks(css_paths="app.css", theme=theme) as demo:
                         deploy_result = gr.HTML(label="배포 결과")
-            # 이벤트 연결
             def execute_code(query: str):
                 if not query or query.strip() == '':
                     return None, gr.update(active_key="empty")
@@ -942,97 +941,101 @@ with gr.Blocks(css_paths="app.css", theme=theme) as demo:
                     else:
                         code = query.strip()
                     return send_to_sandbox(code), gr.update(active_key="render")
-                except Exception as e:
                     return None, gr.update(active_key="empty")
             execute_btn.click(
                 fn=execute_code,
-                inputs=[input],
                 outputs=[sandbox, state_tab]
             )
             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]
             )
             best_btn.click(
                 fn=lambda: (gr.update(open=True), load_best_templates()),
                 outputs=[session_drawer, session_history],
                 queue=False
             )
             trending_btn.click(
                 fn=lambda: (gr.update(open=True), load_trending_templates()),
                 outputs=[session_drawer, session_history],
                 queue=False
             )
             new_btn.click(
                 fn=lambda: (gr.update(open=True), load_new_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, 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],
-                outputs=[input, state_tab]
             )
             deploy_btn.click(
                 fn=lambda code: deploy_to_vercel(remove_code_block(code)) if code else "코드가 없습니다.",
                 inputs=[code_output],
                 outputs=[deploy_result]
             )
 if __name__ == "__main__":
     try:
         demo_instance = Demo()
         demo.queue(default_concurrency_limit=20).launch(ssr_mode=False)
     except Exception as e:
         raise
-</script>
-</body>
-</html>

+# 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
+# DEMO_LIST 직접 정의
 DEMO_LIST = [
     {"description": "Create a Tetris-like puzzle game with arrow key controls, line-clearing mechanics, and increasing difficulty levels."},
     {"description": "Build an interactive Chess game with a basic AI opponent and drag-and-drop piece movement. Keep track of moves and detect check/checkmate."},
     {"description": "Create a small action RPG with WASD movement, an attack button, special moves, leveling, and item drops."},
 ]
+# SystemPrompt 정의
 SystemPrompt = """너의 이름은 'MOUSE'이다. You are an expert web game developer with a strong focus on gameplay mechanics, interactive design, and performance optimization.
 Your mission is to create compelling, modern, and fully interactive web-based games using HTML, JavaScript, and CSS.
 This code will be rendered directly in the browser.
 History = List[Tuple[str, str]]
 Messages = List[Dict[str, str]]
+# 이미지 캐싱
 IMAGE_CACHE = {}
 def get_image_base64(image_path):
+    """
+    이미지 파일을 base64로 읽어서 캐싱
+    """
     if image_path in IMAGE_CACHE:
         return IMAGE_CACHE[image_path]
     try:
         history.append([q['content'], r['content']])
     return history
+# API 토큰
 YOUR_ANTHROPIC_TOKEN = os.getenv('ANTHROPIC_API_KEY', '').strip()
 YOUR_OPENAI_TOKEN    = os.getenv('OPENAI_API_KEY',     '').strip()
 openai_client = openai.OpenAI(api_key=YOUR_OPENAI_TOKEN)
 async def try_claude_api(system_message, claude_messages, timeout=15):
+    """
+    Claude API 호출 (스트리밍)
+    """
     try:
         start_time = time.time()
         with claude_client.messages.stream(
         raise e
 async def try_openai_api(openai_messages):
+    """
+    OpenAI API 호출 (스트리밍)
+    """
     try:
         stream = openai_client.chat.completions.create(
             model="gpt-4o",
     except Exception as e:
         raise e
 def remove_code_block(text):
+    """
+    메시지 내의 ```html ... ``` 부분만 추출하여 반환
+    """
     pattern = r'```html\n(.+?)\n```'
     match = re.search(pattern, text, re.DOTALL)
     if match:
     else:
         return text.strip()
 def send_to_sandbox(code):
+    """
+    HTML 코드를 iframe으로 렌더링하기 위한 data URI 생성
+    """
     encoded_html = base64.b64encode(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 history_render(history: History):
+    """
+    히스토리 Drawer 열고, Chatbot UI에 히스토리 반영
+    """
+    return gr.update(open=True), history
+# ------------------
+# Template Data 관련
+# ------------------
 def load_json_data():
+    # 하드코딩된 템플릿 데이터
     return [
         {
             "name": "[게임] 테트리스 클론",
     return create_template_html("✨ NEW 게임 템플릿", json_data)
 def create_template_html(title, items):
     """
+    카드형 UI로 템플릿 목록을 표시하는 HTML
+    """
+    # 모든 CSS/HTML을 문자열로 안전하게 감싸기
+    html_content = r"""
+<style>
+.prompt-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    gap: 20px;
+    padding: 20px;
+}
+.prompt-card {
+    background: white;
+    border: 1px solid #eee;
+    border-radius: 8px;
+    padding: 15px;
+    cursor: pointer;
+    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
+}
+.prompt-card:hover {
+    transform: translateY(-2px);
+    transition: transform 0.2s;
+}
+.card-image {
+    width: 100%;
+    height: 180px;
+    object-fit: cover;
+    border-radius: 4px;
+    margin-bottom: 10px;
+}
+.card-name {
+    font-weight: bold;
+    margin-bottom: 8px;
+    font-size: 16px;
+    color: #333;
+}
+.card-prompt {
+    font-size: 11px;
+    line-height: 1.4;
+    color: #666;
+    display: -webkit-box;
+    -webkit-line-clamp: 6;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    height: 90px;
+    background-color: #f8f9fa;
+    padding: 8px;
+    border-radius: 4px;
+}
+</style>
+<div class="prompt-grid">
+"""
     for item in items:
+        card_html = f"""
+<div class="prompt-card" onclick="copyToInput(this)" data-prompt="{html.escape(item.get('prompt', ''))}">
+    <img src="{item.get('image_url', '')}" class="card-image" loading="lazy" alt="{html.escape(item.get('name', ''))}">
+    <div class="card-name">{html.escape(item.get('name', ''))}</div>
+    <div class="card-prompt">{html.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)
 TEMPLATE_CACHE = None
 def load_session_history(template_type="best"):
+    """
+    오른쪽 Drawer에 표시할 템플릿들(베스트/트렌딩/NEW)을 보여주는 HTML
+    """
     try:
         json_data = load_json_data()
         templates = {
             "new": "✨ NEW 게임 템플릿"
         }
+        html_content = r"""
+<style>
+.template-nav {
+    display: flex;
+    gap: 10px;
+    margin: 20px;
+    position: sticky;
+    top: 0;
+    background: white;
+    z-index: 100;
+    padding: 10px 0;
+    border-bottom: 1px solid #eee;
+}
+.template-btn {
+    padding: 8px 16px;
+    border: 1px solid #1890ff;
+    border-radius: 4px;
+    cursor: pointer;
+    background: white;
+    color: #1890ff;
+    font-weight: bold;
+    transition: all 0.3s;
+}
+.template-btn:hover {
+    background: #1890ff;
+    color: white;
+}
+.template-btn.active {
+    background: #1890ff;
+    color: white;
+}
+.prompt-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    gap: 20px;
+    padding: 20px;
+}
+.prompt-card {
+    background: white;
+    border: 1px solid #eee;
+    border-radius: 8px;
+    padding: 15px;
+    cursor: pointer;
+    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
+}
+.prompt-card:hover {
+    transform: translateY(-2px);
+    transition: transform 0.2s;
+}
+.card-image {
+    width: 100%;
+    height: 180px;
+    object-fit: cover;
+    border-radius: 4px;
+    margin-bottom: 10px;
+}
+.card-name {
+    font-weight: bold;
+    margin-bottom: 8px;
+    font-size: 16px;
+    color: #333;
+}
+.card-prompt {
+    font-size: 11px;
+    line-height: 1.4;
+    color: #666;
+    display: -webkit-box;
+    -webkit-line-clamp: 6;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    height: 90px;
+    background-color: #f8f9fa;
+    padding: 8px;
+    border-radius: 4px;
+}
+.template-section {
+    display: none;
+}
+.template-section.active {
+    display: block;
+}
+</style>
+<div class="template-nav">
+    <button class="template-btn" onclick="showTemplate('best')">🏆 베스트</button>
+    <button class="template-btn" onclick="showTemplate('trending')">🔥 트렌딩</button>
+    <button class="template-btn" onclick="showTemplate('new')">✨ NEW</button>
+</div>
+"""
+        # 섹션별 템플릿 생성
         for section, items in templates.items():
             html_content += f"""
+<div class="template-section" id="{section}-templates">
+    <div class="prompt-grid">
+"""
             for item in items:
+                card_html = f"""
+<div class="prompt-card" onclick="copyToInput(this)" data-prompt="{html.escape(item.get('prompt', ''))}">
+    <img src="{item.get('image_url', '')}" class="card-image" loading="lazy" alt="{html.escape(item.get('name', ''))}">
+    <div class="card-name">{html.escape(item.get('name', ''))}</div>
+    <div class="card-prompt">{html.escape(item.get('prompt', ''))}</div>
+</div>
+"""
+                html_content += card_html
+            html_content += """
+    </div>
+</div>
+"""
+        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();
+    }
+}
+function showTemplate(type) {
+    // 모든 섹션 숨기기
+    document.querySelectorAll('.template-section').forEach(section => {
+        section.style.display = 'none';
+    });
+    // 모든 버튼 비활성화
+    document.querySelectorAll('.template-btn').forEach(btn => {
+        btn.classList.remove('active');
+    });
+    // 선택된 섹션 보이기
+    document.getElementById(type + '-templates').style.display = 'block';
+    // 선택된 버튼 활성화
+    event.target.classList.add('active');
+}
+document.addEventListener('DOMContentLoaded', function() {
+    showTemplate('best');
+    document.querySelector('.template-btn').classList.add('active');
+});
+</script>
+"""
         return gr.HTML(value=html_content)
+    except Exception:
         return gr.HTML("Error loading templates")
 def generate_space_name():
+    """6자리 랜덤 영문 이름 생성"""
     letters = string.ascii_lowercase
     return ''.join(random.choice(letters) for i in range(6))
 def deploy_to_vercel(code: str):
+    """
+    Vercel에 배포하는 함수 (예시)
+    """
     try:
+        token = "A8IFZmgW2cqA4yUNlLPnci0N"  # 실제 토큰 필요
         if not token:
             return "Vercel 토큰이 설정되지 않았습니다."
         project_name = ''.join(random.choice(string.ascii_lowercase) for i in range(6))
         deploy_url = "https://api.vercel.com/v13/deployments"
         headers = {
         return f"배포 중 오류 발생: {str(e)}"
 def boost_prompt(prompt: str) -> str:
+    """
+    'Boost' 버튼 눌렀을 때 프롬프트를 좀 더 풍부하게 생성하는 함수 (예시)
+    """
     if not prompt:
         return ""
+    boost_system_prompt = """당신은 웹 게임 개발 프롬프트 전문가입니다.
+주어진 프롬프트를 분석하여 더 상세하고 전문적인 요구사항으로 확장하되,
+원래 의도와 목적은 그대로 유지하면서 다음 관점들을 고려하여 증강하십시오:
+1. 게임 플레이 재미와 난이도 밸런스
+2. 인터랙티브 그래픽 및 애니메이션
+3. 사용자 경험 최적화 (UI/UX)
+4. 성능 최적화
+5. 접근성과 호환성
+기존 SystemPrompt의 모든 규칙을 준수하면서 증강된 프롬프트를 생성하십시오.
+"""
     try:
+        # Claude API 시도
         try:
             response = claude_client.messages.create(
                 model="claude-3-7-sonnet-20250219",
             if hasattr(response, 'content') and len(response.content) > 0:
                 return response.content[0].text
             raise Exception("Claude API 응답 형식 오류")
+        except Exception:
+            # OpenAI API로 fallback
             completion = openai_client.chat.completions.create(
                 model="gpt-4",
                 messages=[
             if completion.choices and len(completion.choices) > 0:
                 return completion.choices[0].message.content
             raise Exception("OpenAI API 응답 형식 오류")
+    except Exception:
+        # 실패 시 원본 그대로 반환
         return prompt
 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")
+class Demo:
+    """
+    Main 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 = []
+        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:
+            # 우선 "Generating code..." 출력
+            yield [
+                "Generating code...",
+                _history,
+                None,
+                gr.update(active_key="loading"),
+                gr.update(open=True)
+            ]
+            await asyncio.sleep(0)
+            collected_content = None
+            try:
+                # Claude API 시도
+                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:
+                # OpenAI fallback
+                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:
+                _history = messages_to_history([
+                    {'role': Role.SYSTEM, 'content': system_message}
+                ] + claude_messages + [{
+                    'role': Role.ASSISTANT,
+                    'content': collected_content
+                }])
+                # 최종 결과 출력 (sandbox 렌더링)
+                yield [
+                    collected_content,
+                    _history,
+                    send_to_sandbox(remove_code_block(collected_content)),
+                    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 []
+# ----------- Gradio / Modelscope UI 빌드 -----------
 demo_instance = Demo()
+theme = gr.themes.Soft()
 with gr.Blocks(css_paths="app.css", theme=theme) as demo:
     history = gr.State([])
+    setting = gr.State({"system": SystemPrompt})
     with ms.Application() as app:
         with antd.ConfigProvider():
+            # code Drawer
             with antd.Drawer(open=False, title="code", placement="left", width="750px") as code_drawer:
                 code_output = legacy.Markdown()
+            # history Drawer
             with antd.Drawer(open=False, title="history", 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="Templates",
             ) as session_drawer:
                 with antd.Flex(vertical=True, gap="middle"):
                     gr.Markdown("### Available Game Templates")
+                    session_history = gr.HTML(elem_classes="session-history")
+                    close_btn = antd.Button("Close", type="default", elem_classes="close-btn")
+            # 레이아웃(좌측: 미리보기 / 우측: 입력 + 버튼들)
             with antd.Row(gutter=[32, 12]) as layout:
+                # 왼쪽 Col: 미리보기
                 with antd.Col(span=24, md=16):
                     with ms.Div(elem_classes="right_panel"):
                         with antd.Flex(gap="small", elem_classes="setting-buttons"):
                             trending_btn = antd.Button("🔥 트렌딩 템플릿", type="default")
                             new_btn = antd.Button("✨ NEW 템플릿", type="default")
+                        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="empty input", elem_classes="right_content")
                             with antd.Tabs.Item(key="loading"):
+                                loading = antd.Spin(
+                                    True, tip="coding...", 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):
                     with antd.Flex(vertical=True, gap="middle", wrap=True):
+                        input_text = antd.InputTextarea(
+                            size="large",
+                            allow_clear=True,
                             placeholder=random.choice(DEMO_LIST)['description']
                         )
                         deploy_result = gr.HTML(label="배포 결과")
+            # ---- 이벤트 / 콜백 등록 ----
+            # 'Code실행' 버튼: 입력창에 있는 내용을 iframe 실행
             def execute_code(query: str):
                 if not query or query.strip() == '':
                     return None, gr.update(active_key="empty")
                     else:
                         code = query.strip()
                     return send_to_sandbox(code), gr.update(active_key="render")
+                except Exception:
                     return None, gr.update(active_key="empty")
             execute_btn.click(
                 fn=execute_code,
+                inputs=[input_text],
                 outputs=[sandbox, state_tab]
             )
+            # 코드 Drawer 열기 / 닫기
             codeBtn.click(
                 lambda: gr.update(open=True),
                 inputs=[],
                 outputs=[code_drawer]
             )
             code_drawer.close(
                 lambda: gr.update(open=False),
+                inputs=[],
                 outputs=[code_drawer]
             )
+            # 히스토리 Drawer 열기 / 닫기
             historyBtn.click(
                 history_render,
                 inputs=[history],
                 outputs=[history_drawer, history_output]
             )
             history_drawer.close(
                 lambda: gr.update(open=False),
                 inputs=[],
                 outputs=[history_drawer]
             )
+            # 템플릿 Drawer 열기 (베스트/트렌딩/NEW)
             best_btn.click(
                 fn=lambda: (gr.update(open=True), load_best_templates()),
                 outputs=[session_drawer, session_history],
                 queue=False
             )
             trending_btn.click(
                 fn=lambda: (gr.update(open=True), load_trending_templates()),
                 outputs=[session_drawer, session_history],
                 queue=False
             )
             new_btn.click(
                 fn=lambda: (gr.update(open=True), load_new_templates()),
                 outputs=[session_drawer, session_history],
                 queue=False
             )
+            # 템플릿 Drawer 닫기
             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]
             )
+            # 'Send' 버튼: 코드 생성 (Claude/OpenAI)
             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' 버튼: 프롬프트 보강
             boost_btn.click(
                 fn=handle_boost,
+                inputs=[input_text],
+                outputs=[input_text, state_tab]
             )
+            # '배포' 버튼: Vercel 배포
             deploy_btn.click(
                 fn=lambda code: deploy_to_vercel(remove_code_block(code)) if code else "코드가 없습니다.",
                 inputs=[code_output],
                 outputs=[deploy_result]
             )
+# 실제 실행부
 if __name__ == "__main__":
     try:
         demo_instance = Demo()
+        # Gradio/Modelscope 앱 실행
+        # 포트나 설정은 환경에 맞게 수정 가능
         demo.queue(default_concurrency_limit=20).launch(ssr_mode=False)
     except Exception as e:
+        print(f"Initialization error: {e}")
         raise