Update app.py

app.py

@@ -24,10 +24,25 @@ import modelscope_studio.components.antd as antd
 
 # === [1] 로거 설정 ===
 log_stream = io.StringIO()
-handler = logging.StreamHandler(log_stream)
+# Use StreamHandler to output to console *and* capture in StringIO
+console_handler = logging.StreamHandler()
+stringio_handler = logging.StreamHandler(log_stream)
+
+# Configure root logger
 logger = logging.getLogger()
-logger.setLevel(logging.DEBUG)   # 원하는 레벨로 설정
-logger.addHandler(handler)
+logger.setLevel(logging.DEBUG) # Set level for root logger
+logger.handlers.clear() # Clear existing handlers if any
+logger.addHandler(console_handler) # Add console output
+logger.addHandler(stringio_handler) # Add StringIO capture
+
+# Configure specific loggers if needed (optional)
+logging.getLogger("httpx").setLevel(logging.WARNING)
+logging.getLogger("httpcore").setLevel(logging.WARNING)
+logging.getLogger("openai").setLevel(logging.WARNING)
+logging.getLogger("anthropic").setLevel(logging.WARNING)
+logging.getLogger("requests").setLevel(logging.WARNING)
+logging.getLogger("urllib3").setLevel(logging.WARNING)
+
 
 def get_logs():
     """StringIO에 쌓인 로그를 문자열로 반환"""
@@ -37,8 +52,7 @@ def get_logs():
 # ------------------------
 # 1) DEMO_LIST 및 SystemPrompt
 # ------------------------
-
-
+# (DEMO_LIST and SystemPrompt remain the same)
 DEMO_LIST = [
     {"description": "블록이 위에서 떨어지는 클래식 테트리스 게임을 개발해주세요. 화살표 키로 조작하며, 가로줄이 채워지면 해당 줄이 제거되고 점수가 올라가는 메커니즘이 필요합니다. 난이도는 시간이 지날수록 블록이 빨라지도록 구현하고, 게임오버 조건과 점수 표시 기능을 포함해주세요."},
     {"description": "두 명이 번갈아가며 플레이할 수 있는 체스 게임을 만들어주세요. 기본적인 체스 규칙(킹, 퀸, 룩, 비숍, 나이트, 폰의 이동 규칙)을 구현하고, 체크와 체크메이트 감지 기능이 필요합니다. 드래그 앤 드롭으로 말을 움직일 수 있게 하며, 이동 기록도 표시해주세요."},
@@ -76,7 +90,6 @@ DEMO_LIST = [
     {"description": "탑다운 뷰의 간단한 액션 RPG 게임을 개발해주세요. WASD로 이동하고, 마우스 클릭으로 기본 공격, 1-4 키로 특수 스킬을 사용합니다. 플레이어는 몬스터를 처치하며 경험치와 아이템을 획득하고, 레벨업 시 능력치(공격력, 체력, 속도 등)를 향상시킵니다. 다양한 무기와 방어구를 착용할 수 있으며, 스킬 트리 시스템으로 캐릭터를 특화시킬 수 있습니다. 여러 지역과 보스 몬스터, 간단한 퀘스트 시스템도 구현해주세요."},
 ]
 
-
 SystemPrompt = """
 # GameCraft 시스템 프롬프트
 
@@ -118,7 +131,7 @@ SystemPrompt = """
 - **간결성 중시**: 코드는 최대한 간결하게 작성하고, 주석은 최소화
 - **모듈화**: 코드 기능별로 분리하되 불필요한 추상화 지양
 - **최적화**: 게임 루프와 렌더링 최적화에 집중
-- **코드 크기 제한**: 전체 코드는 200줄을 넘지 않도록 함
+- **코드 크기 제한**: 전체 코드는 200줄을 넘지 않도록 함 (API 호출 시에는 600줄 제한 고려)
 
 ### 5.2 성능 최적화
 - DOM 조작 최소화
@@ -137,8 +150,8 @@ SystemPrompt = """
 - 핵심 접근성 기능에만 집중
 
 ## 8. 제약사항 및 유의사항
-- 외부 API 호출 금지
-- 코드 크기 최소화에 우선순위 (200줄 이내)
+- 외부 API 호출 금지 (Vercel 배포 제외)
+- 코드 크기 최소화에 우선순위 (API 호출 시 600줄 이내, 최종 목표 200줄)
 - 주석 최소화 - 필수적인 설명만 포함
 - 불필요한 기능 구현 지양
 
@@ -153,20 +166,19 @@ SystemPrompt = """
 - 복잡한 기능보다 작동하는 기본 기능 우선
 - 불필요한 주석이나 장황한 코드 지양
 - 단일 파일에 모든 코드 포함
-- 코드 길이 제한: 완성된 게임 코드는 200줄 이내로 작성
+- 코드 길이 제한: 완성된 게임 코드는 600줄 이내로 작성 (API 호출 시), 최종 목표 200줄
 
 ## 11. 중요: 코드 생성 제한
-- 게임 코드는 반드시 200줄 이내로 제한
+- 게임 코드는 반드시 600줄 이내로 제한 (API 호출 시), 최종 목표 200줄
 - 불필요한 설명이나 주석 제외
 - 핵심 기능만 구현하고 부가 기능은 생략
 - 코드 크기가 커질 경우 기능을 간소화하거나 생략할 것
 """
 
-
 # ------------------------
 # 2) 공통 상수, 함수, 클래스
 # ------------------------
-
+# (Role, History, Messages, IMAGE_CACHE, get_image_base64, history_to_messages, messages_to_history remain the same)
 class Role:
     SYSTEM = "system"
     USER = "user"
@@ -189,89 +201,212 @@ def get_image_base64(image_path):
             IMAGE_CACHE[image_path] = encoded_string
             return encoded_string
     except:
-        return IMAGE_CACHE.get('default.png', '')
+        # Provide a default placeholder if needed, or handle error
+        logger.error(f"Failed to read image: {image_path}")
+        return IMAGE_CACHE.get('default.png', '') # Assuming you might have a default
 
 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]})
+    if history: # Check if history is not None and not empty
+        for h in history:
+            # Ensure h is a tuple/list of length 2
+            if isinstance(h, (list, tuple)) and len(h) == 2:
+                messages.append({'role': Role.USER, 'content': h[0]})
+                messages.append({'role': Role.ASSISTANT, 'content': h[1]})
+            else:
+                logger.warning(f"Skipping invalid history item: {h}")
     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']])
+    # Ensure messages list has the expected structure
+    if not messages or messages[0]['role'] != Role.SYSTEM:
+        logger.error("Invalid messages format for conversion to history.")
+        return history # Return empty history
+
+    # Iterate through pairs of user/assistant messages
+    for i in range(1, len(messages), 2):
+        if i + 1 < len(messages) and messages[i]['role'] == Role.USER and messages[i+1]['role'] == Role.ASSISTANT:
+            history.append([messages[i]['content'], messages[i+1]['content']])
+        else:
+            # Log if the structure is not as expected, but continue if possible
+            logger.warning(f"Skipping unexpected message sequence at index {i} during history conversion.")
+            # break # Option: stop conversion if structure is broken
     return history
 
 
 # ------------------------
 # 3) API 연동 설정
 # ------------------------
-
+# (API clients and functions remain the same)
 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):
+# Add basic error handling for missing keys
+if not YOUR_ANTHROPIC_TOKEN:
+    logger.warning("ANTHROPIC_API_KEY is not set. Claude API calls will fail.")
+    # Optionally disable Claude features or raise an error
+if not YOUR_OPENAI_TOKEN:
+    logger.warning("OPENAI_API_KEY is not set. OpenAI API calls will fail.")
+    # Optionally disable OpenAI features or raise an error
+
+# Initialize clients, handle potential errors during initialization
+try:
+    claude_client = anthropic.Anthropic(api_key=YOUR_ANTHROPIC_TOKEN) if YOUR_ANTHROPIC_TOKEN else None
+except Exception as e:
+    logger.error(f"Failed to initialize Anthropic client: {e}")
+    claude_client = None
+
+try:
+    openai_client = openai.OpenAI(api_key=YOUR_OPENAI_TOKEN) if YOUR_OPENAI_TOKEN else None
+except Exception as e:
+    logger.error(f"Failed to initialize OpenAI client: {e}")
+    openai_client = None
+
+
+async def try_claude_api(system_message, claude_messages, timeout=30): # Increased timeout
     """
-    Claude API 호출 (스트리밍)
+    Claude API 호출 (스트리밍) - 코드 길이 제한 강화 및 에러 핸들링
     """
+    if not claude_client:
+        logger.error("Claude client not initialized. Cannot call API.")
+        raise ConnectionError("Claude client not available.")
+
     try:
-        system_message_with_limit = system_message + "\n\n추가 중요 지침: 생성하는 코드는 절대로 200줄을 넘지 마세요. 코드 간결성이 최우선입니다. 주석을 최소화하고, 핵심 기능만 구현하세요."
-        
+        # Ensure system message has the length constraint
+        system_message_with_limit = system_message + "\n\n추가 중요 지침: 생성하는 코드는 절대로 600줄을 넘지 마세요. 코드 간결성이 최우선입니다. 주석을 최소화하고, 핵심 기능만 구현하세요."
+
         start_time = time.time()
-        with claude_client.messages.stream(
-            model="claude-3-7-sonnet-20250219",
-            max_tokens=19800,
+        logger.debug(f"Calling Claude API. System prompt length: {len(system_message_with_limit)}, Messages count: {len(claude_messages)}")
+
+        # Filter out empty messages just before API call
+        valid_claude_messages = [msg for msg in claude_messages if msg.get("content", "").strip()]
+        if not valid_claude_messages:
+             logger.warning("No valid messages to send to Claude API after filtering.")
+             raise ValueError("No content provided for Claude API call.")
+
+        async with claude_client.messages.stream(
+            model="claude-3-5-sonnet-20240620", # Use the latest Sonnet model
+            max_tokens=4000, # Adjusted max_tokens based on model limits and typical game code size
             system=system_message_with_limit,
-            messages=claude_messages,
+            messages=valid_claude_messages,
             temperature=0.3,
         ) as stream:
             collected_content = ""
-            for chunk in stream:
+            async 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":
+                    logger.warning("Claude API call timed out.")
+                    raise TimeoutError(f"Claude API timeout after {timeout} seconds")
+
+                if chunk.type == "content_block_delta" and hasattr(chunk, 'delta') and hasattr(chunk.delta, 'text'):
                     collected_content += chunk.delta.text
                     yield collected_content
-                    await asyncio.sleep(0)
-                start_time = current_time
+                    # No sleep needed here, await stream handles it
+                elif chunk.type == "message_stop":
+                    logger.debug("Claude stream finished.")
+                    break # Explicitly break on stop event
+                # Add handling for other chunk types if necessary (e.g., errors)
+                elif chunk.type == "error":
+                     logger.error(f"Claude API stream error: {chunk.error}")
+                     raise anthropic.APIError(f"Claude stream error: {chunk.error}")
+
+
+            # Ensure final content is yielded if stream ends without a final delta
+            # yield collected_content # This might yield duplicate final content, handled by loop structure
+
+    except anthropic.APIConnectionError as e:
+        logger.error(f"Claude API connection error: {e}")
+        raise ConnectionError(f"Failed to connect to Anthropic API: {e}")
+    except anthropic.RateLimitError as e:
+        logger.error(f"Claude API rate limit exceeded: {e}")
+        raise ConnectionAbortedError(f"Anthropic API rate limit hit: {e}")
+    except anthropic.APIStatusError as e:
+        logger.error(f"Claude API status error: {e.status_code} - {e.response}")
+        raise ConnectionRefusedError(f"Anthropic API error ({e.status_code}): {e.message}")
+    except TimeoutError as e:
+        # Already logged above
+         raise e
     except Exception as e:
-        raise e
+        logger.error(f"Unexpected error during Claude API call: {e}", exc_info=True)
+        raise RuntimeError(f"An unexpected error occurred with Claude API: {e}")
 
-async def try_openai_api(openai_messages):
+async def try_openai_api(openai_messages, timeout=30): # Added timeout
     """
-    OpenAI API 호출 (스트리밍) - 코드 길이 제한 강화
+    OpenAI API 호출 (스트리밍) - 코드 길이 제한 강화 및 에러 핸들링
     """
+    if not openai_client:
+        logger.error("OpenAI client not initialized. Cannot call API.")
+        raise ConnectionError("OpenAI client not available.")
+
     try:
+        # Ensure system message has the length constraint if present
         if openai_messages and openai_messages[0]["role"] == "system":
-            openai_messages[0]["content"] += "\n\n추가 중요 지침: 생성하는 코드는 절대로 200줄을 넘지 마세요. 코드 간결성이 최우선입니다. 주석은 최소화하고, 핵심 기능만 구현하세요."
+            openai_messages[0]["content"] += "\n\n추가 중요 지침: 생성하는 코드는 절대로 600줄을 넘지 마세요. 코드 간결성이 최우선입니다. 주석은 최소화하고, 핵심 기능만 구현하세요."
+            system_prompt_length = len(openai_messages[0]["content"])
+        else:
+            # Add system message if missing? Or handle differently? Assuming it should exist.
+            logger.warning("OpenAI messages do not start with a system role.")
+            system_prompt_length = 0
+
+
+        logger.debug(f"Calling OpenAI API (gpt-4o-mini). System prompt length: {system_prompt_length}, Messages count: {len(openai_messages)}")
+
+        # Filter out empty messages just before API call
+        valid_openai_messages = [msg for msg in openai_messages if msg.get("content", "").strip()]
+        if not valid_openai_messages:
+             logger.warning("No valid messages to send to OpenAI API after filtering.")
+             raise ValueError("No content provided for OpenAI API call.")
 
-        stream = openai_client.chat.completions.create(
-            model="o3",
-            messages=openai_messages,
+
+        stream = await asyncio.to_thread( # Use asyncio.to_thread for blocking sync call
+            openai_client.chat.completions.create,
+            model="gpt-4o-mini", # Use a faster/cheaper model if appropriate
+            messages=valid_openai_messages,
             stream=True,
-            max_tokens=19800,
-            temperature=0.2
+            max_tokens=4000, # Adjusted
+            temperature=0.2,
+            timeout=timeout # Pass timeout to the API call itself
         )
+
         collected_content = ""
+        # Iterate over the stream (sync iterator needs to be handled carefully in async)
+        # This part might need adjustment depending on how the sync stream behaves in `asyncio.to_thread`
+        # A simple loop might block. Consider processing the stream differently if needed.
+        # For simplicity, assuming the sync iterator works okay here, but watch for blocking.
         for chunk in stream:
-            if chunk.choices[0].delta.content is not None:
+            if chunk.choices and chunk.choices[0].delta and chunk.choices[0].delta.content is not None:
                 collected_content += chunk.choices[0].delta.content
                 yield collected_content
+                # await asyncio.sleep(0) # Allow other tasks to run
+            # Handle finish reason if needed
+            if chunk.choices and chunk.choices[0].finish_reason:
+                 logger.debug(f"OpenAI stream finished. Reason: {chunk.choices[0].finish_reason}")
+                 break
+
+        # yield collected_content # Yield final content if needed (handled by loop)
+
+    except openai.APIConnectionError as e:
+        logger.error(f"OpenAI API connection error: {e}")
+        raise ConnectionError(f"Failed to connect to OpenAI API: {e}")
+    except openai.RateLimitError as e:
+        logger.error(f"OpenAI API rate limit exceeded: {e}")
+        raise ConnectionAbortedError(f"OpenAI API rate limit hit: {e}")
+    except openai.APIStatusError as e:
+        logger.error(f"OpenAI API status error: {e.status_code} - {e.response}")
+        raise ConnectionRefusedError(f"OpenAI API error ({e.status_code}): {e.message}")
+    except openai.APITimeoutError as e:
+         logger.warning(f"OpenAI API call timed out: {e}")
+         raise TimeoutError(f"OpenAI API timeout: {e}")
     except Exception as e:
-        raise e
+        logger.error(f"Unexpected error during OpenAI API call: {e}", exc_info=True)
+        raise RuntimeError(f"An unexpected error occurred with OpenAI API: {e}")
 
 
 # ------------------------
 # 4) 템플릿(하나로 통합)
 # ------------------------
-
+# (load_json_data, create_template_html, load_all_templates remain the same)
 def load_json_data():
     data_list = []
     for item in DEMO_LIST:
@@ -301,6 +436,9 @@ def create_template_html(title, items):
     cursor: pointer;
     box-shadow: 0 4px 8px rgba(0,0,0,0.05);
     transition: all 0.3s ease;
+    height: 150px; /* Fixed height */
+    display: flex; /* Use flexbox for layout */
+    flex-direction: column; /* Stack elements vertically */
 }
 .prompt-card:hover {
     transform: translateY(-4px);
@@ -311,49 +449,83 @@ def create_template_html(title, items):
     margin-bottom: 8px;
     font-size: 13px;
     color: #444;
+    flex-shrink: 0; /* Prevent name from shrinking */
+}
+.card-prompt-wrapper {
+    flex-grow: 1; /* Allow prompt wrapper to take remaining space */
+    overflow: hidden; /* Hide overflow */
+    background-color: #f8f9fa;
+    padding: 8px;
+    border-radius: 6px;
+    height: 100%; /* Ensure it tries to fill parent */
 }
 .card-prompt {
     font-size: 11px;
     line-height: 1.4;
     color: #666;
     display: -webkit-box;
-    -webkit-line-clamp: 7;
+    -webkit-line-clamp: 5; /* Adjust line clamp based on fixed height */
     -webkit-box-orient: vertical;
     overflow: hidden;
-    height: 84px;
-    background-color: #f8f9fa;
-    padding: 8px;
-    border-radius: 6px;
+    /* height: 84px; Removed fixed height here */
+    max-height: 100%; /* Allow it to fill the wrapper */
 }
 </style>
 <div class="prompt-grid">
 """
-    import html as html_lib
+    # Use html.escape for security
     for item in items:
+        escaped_prompt = html.escape(item.get('prompt', ''))
+        escaped_name = html.escape(item.get('name', ''))
         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 class="prompt-card" onclick="copyToInput(this)" data-prompt="{escaped_prompt}">
+    <div class="card-name">{escaped_name}</div>
+    <div class="card-prompt-wrapper">
+        <div class="card-prompt">{escaped_prompt}</div>
+    </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');
+    // More robust selector targeting the specific textarea within the input panel
+    const textarea = document.querySelector('.input-panel .ant-input-textarea-large textarea');
     if (textarea) {
         textarea.value = prompt;
+        // Ensure the input event triggers potential state updates in Gradio/React
         textarea.dispatchEvent(new Event('input', { bubbles: true }));
-        // 템플릿 Drawer 닫기
-        document.querySelector('.session-drawer .close-btn').click();
+        textarea.dispatchEvent(new Event('change', { bubbles: true })); // Add change event too
+
+        // Close the drawer - find the close button more reliably
+        const drawer = card.closest('.ant-drawer'); // Find the parent drawer
+        if (drawer) {
+             // Find the close button *within* that specific drawer's header
+            const closeButton = drawer.querySelector('.ant-drawer-header .ant-drawer-close');
+             if (closeButton) {
+                 closeButton.click();
+             } else {
+                 console.warn('Could not find the close button for the template drawer.');
+                 // Fallback for the original selector if needed, though less reliable
+                 const fallbackCloseBtn = document.querySelector('.session-drawer .close-btn');
+                 if(fallbackCloseBtn) fallbackCloseBtn.click();
+             }
+        } else {
+             console.warn('Could not find the parent drawer for the template card.');
+        }
+    } else {
+        console.error('Could not find the target textarea.');
+        alert('입력 영역을 찾을 수 없습니다.'); // User feedback
     }
 }
 </script>
-</div>
 """
+    # Use gr.HTML to render the content safely
     return gr.HTML(value=html_content)
 
+
 def load_all_templates():
     return create_template_html("🎮 모든 게임 템플릿", load_json_data())
 
@@ -362,165 +534,308 @@ def load_all_templates():
 # 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()
+def remove_code_block(text: Optional[str]) -> str:
+    """Extracts code from Markdown code blocks (html, js, css, or generic)."""
+    if not text:
+        return ""
     
-    text = re.sub(r'```html\s*', '', text)
-    text = re.sub(r'\s*```', '', text)
-    return text.strip()
+    # Pattern for ```html ... ```
+    pattern_html = r'```html\s*([\s\S]+?)\s*```'
+    match_html = re.search(pattern_html, text, re.DOTALL | re.IGNORECASE)
+    if match_html:
+        logger.debug("Extracted code using ```html block.")
+        return match_html.group(1).strip()
+
+    # Pattern for ```javascript ... ``` or ```js ... ```
+    pattern_js = r'```(?:javascript|js)\s*([\s\S]+?)\s*```'
+    match_js = re.search(pattern_js, text, re.DOTALL | re.IGNORECASE)
+    if match_js:
+        logger.debug("Extracted code using ```javascript/js block.")
+        # If it's just JS, wrap it in basic HTML for execution
+        js_code = match_js.group(1).strip()
+        return f"""<!DOCTYPE html>
+<html>
+<head><meta charset="UTF-8"><title>JS Code</title></head>
+<body><script>{js_code}</script></body>
+</html>"""
+
+    # Pattern for ```css ... ```
+    pattern_css = r'```css\s*([\s\S]+?)\s*```'
+    match_css = re.search(pattern_css, text, re.DOTALL | re.IGNORECASE)
+    if match_css:
+        logger.debug("Extracted code using ```css block.")
+        # If it's just CSS, wrap it in basic HTML
+        css_code = match_css.group(1).strip()
+        return f"""<!DOCTYPE html>
+<html>
+<head><meta charset="UTF-8"><title>CSS Code</title><style>{css_code}</style></head>
+<body><p>CSS Only Preview</p></body>
+</html>"""
+
+    # Generic pattern for ``` ... ``` (if specific language blocks fail)
+    pattern_generic = r'```(?:\w+)?\s*([\s\S]+?)\s*```'
+    match_generic = re.search(pattern_generic, text, re.DOTALL)
+    if match_generic:
+        logger.debug("Extracted code using generic ``` block.")
+        # Assume it's HTML if it looks like it, otherwise wrap JS/CSS or return as is?
+        # Let's assume HTML for now if it contains tags
+        potential_code = match_generic.group(1).strip()
+        if '<' in potential_code and '>' in potential_code:
+             return potential_code
+        else:
+             # Could be JS, CSS, or something else. Defaulting to HTML wrap for safety.
+             return f"""<!DOCTYPE html>
+<html>
+<head><meta charset="UTF-8"><title>Code Preview</title></head>
+<body><pre><code>{html.escape(potential_code)}</code></pre></body>
+</html>"""
+
+
+    # If no code blocks found, check if the text itself looks like HTML
+    text_stripped = text.strip()
+    if text_stripped.startswith('<!DOCTYPE') or text_stripped.startswith('<html') or (text_stripped.startswith('<') and text_stripped.endswith('>')):
+        logger.debug("Assuming the entire input is HTML code (no code blocks found).")
+        return text_stripped
+
+    logger.debug("No code blocks found, and input doesn't look like HTML. Returning original text.")
+    # Return empty string if no code is likely present, or the original text?
+    # Returning empty might be safer if the expectation is code extraction.
+    return "" # Or return text if raw text might be intended
+
 
 def optimize_code(code: str) -> str:
+    # (Optimization logic remains the same, ensure it handles empty input)
     if not code or len(code.strip()) == 0:
-        return code
-    
+        return ""
+
+    logger.debug(f"Optimizing code (initial length: {len(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)
-    
+    # No need to check length here, optimize regardless
+
+    # Remove comments more carefully
+    def remove_comments(line):
+        line = re.sub(r'//.*$', '', line) # Remove // comments
+        line = re.sub(r'/\*.*?\*/', '', line) # Remove /* */ comments on same line
+        return line
+
+    # Remove multi-line /* */ comments
+    code = re.sub(r'/\*[\s\S]*?\*/', '', code, flags=re.MULTILINE)
+    # Remove <!-- --> comments
+    code = re.sub(r'<!--[\s\S]*?-->', '', code, flags=re.MULTILINE)
+
     cleaned_lines = []
     empty_line_count = 0
-    for line in cleaned_code.split('\n'):
-        if line.strip() == '':
+    for line in code.split('\n'):
+        line = remove_comments(line).strip() # Remove single-line comments and strip whitespace
+        if line == '':
             empty_line_count += 1
-            if empty_line_count <= 1:
+            if empty_line_count <= 1: # Allow at most one consecutive empty line
                 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)
+            # Remove console.log statements
+            line = re.sub(r'console\.log\(.*?\);?', '', line)
+            # Reduce multiple spaces to single space (be careful not to break strings)
+            # This is risky, might be better to skip unless absolutely necessary
+            # line = re.sub(r' {2,}', ' ', line)
+            if line: # Add line only if it's not empty after cleaning
+                cleaned_lines.append(line)
+
+    cleaned_code = '\n'.join(cleaned_lines).strip()
+    logger.debug(f"Optimized code length: {len(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>
+    """Encodes HTML code for display in an iframe sandbox."""
+    logger.debug(f"Preparing code for sandbox (length: {len(code)})")
+    # No need to call remove_code_block here, assume input is already cleaned code
+    # clean_code = remove_code_block(code) # Remove this line
+    clean_code = optimize_code(code) # Optimize the already extracted code
+
+    if not clean_code.strip():
+        logger.warning("Cannot send empty code to sandbox.")
+        # Return an empty iframe or an error message?
+        return "<p style='color: red;'>No code to display in sandbox.</p>"
+
+    # Basic HTML structure check and wrapping
+    if not re.search(r'<!DOCTYPE html>', clean_code, re.IGNORECASE) and not re.search(r'<html.*?>', clean_code, re.IGNORECASE):
+        logger.debug("Wrapping code in basic HTML structure for sandbox.")
+        # Check if body tags exist, if not, wrap the whole thing
+        if not re.search(r'<body.*?>', clean_code, re.IGNORECASE):
+            clean_code = f"""<!DOCTYPE html>
+<html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Game Preview</title>
+    <style>body {{ margin: 0; overflow: hidden; }}</style> {/* Basic styling */}
 </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>'
+        else:
+             # If body exists, just ensure doctype and html/head are present
+             clean_code = f"""<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Game Preview</title>
+     <style>body {{ margin: 0; overflow: hidden; }}</style>
+</head>
+{clean_code}
+</html>"""
+
+
+    try:
+        # Encode the final 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}"
+        # Define sandbox attributes for security
+        sandbox_attributes = "allow-scripts allow-same-origin allow-forms" # Allow necessary permissions
+        iframe_html = f'<iframe src="{data_uri}" width="100%" height="920px" style="border:none;" sandbox="{sandbox_attributes}"></iframe>'
+        logger.debug("Sandbox iframe HTML generated.")
+        return iframe_html
+    except Exception as e:
+        logger.error(f"Error encoding HTML for sandbox: {e}", exc_info=True)
+        return f"<p style='color: red;'>Error creating sandbox preview: {html.escape(str(e))}</p>"
+
 
 def boost_prompt(prompt: str) -> str:
+    # (Boost prompt logic remains the same, ensure API clients are checked)
     if not prompt:
         return ""
+
     boost_system_prompt = """당신은 웹 게임 개발 프롬프트 전문가입니다.
 주어진 프롬프트를 분석하여 더 명확하고 간결한 요구사항으로 변환하되,
 원래 의도와 목적은 그대로 유지하면서 다음 관점들을 고려하여 증강하십시오:
 
-1. 게임플레이 핵심 메커니즘 명확히 정의
-2. 필수적인 상호작용 요소만 포함
-3. 핵심 UI 요소 간략히 기술
-4. 코드 간결성 유지를 위한 우선순위 설정
-5. 기본적인 게임 규칙과 승리/패배 조건 명시
+1. 게임플레이 핵심 메커니즘 명확히 정의 (1-2 문장)
+2. 필수적인 상호작용 요소만 포함 (예: 키보드 조작, 클릭)
+3. 핵심 UI 요소 간략히 기술 (예: 점수 표시, 게임 영역)
+4. 코드 간결성 유지를 위한 우선순위 설정 (가장 중요한 기능 1-2가지 명시)
+5. 기본적인 게임 규칙과 승리/패배 조건 명시 (간단하게)
 
 다음 중요 지침을 반드시 준수하세요:
-- 불필요한 세부 사항이나 부가 기능은 제외
+- 불필요한 세부 사항이나 부가 기능은 제외 (예: 사운드, 애니메이션, 레벨 디자인 복잡화)
 - 생성될 코드가 600줄을 넘지 않도록 기능을 제한
-- 명확하고 간결한 언어로 요구사항 작성
+- 명확하고 간결한 언어로 요구사항 작성 (총 5-7 문장 이내)
 - 최소한의 필수 게임 요소만 포함
+- 최종 결과는 증강된 프롬프트 텍스트만 반환 (추가 설명 없이)
 """
+    logger.debug(f"Boosting prompt: {prompt[:100]}...")
+    boosted_prompt = prompt # Default to original if APIs fail
+
     try:
-        try:
+        if claude_client:
+            logger.debug("Attempting boost with Claude.")
             response = claude_client.messages.create(
-                model="claude-3-7-sonnet-20250219",
-                max_tokens=10000,
-                temperature=0.3,
+                model="claude-3-haiku-20240307", # Use Haiku for faster/cheaper boosting
+                max_tokens=500, # Reduced max_tokens for concise output
+                temperature=0.2, # Lower temperature for more focused output
                 messages=[{
                     "role": "user",
-                    "content": f"다음 게임 프롬프트를 분석하고 증강하되, 간결함을 유지하세요: {prompt}"
+                    "content": f"다음 게임 프롬프트를 분석하고 위의 지침에 따라 간결하게 증강하세요:\n\n{prompt}"
                 }],
                 system=boost_system_prompt
             )
-            if hasattr(response, 'content') and len(response.content) > 0:
-                return response.content[0].text
-            raise Exception("Claude API 응답 형식 오류")
-        except Exception:
+            if response.content and len(response.content) > 0 and hasattr(response.content[0], 'text'):
+                boosted_prompt = response.content[0].text.strip()
+                logger.debug(f"Claude boosted prompt: {boosted_prompt[:100]}...")
+                return boosted_prompt
+            else:
+                 logger.warning("Claude boost response format unexpected.")
+                 raise anthropic.APIError("Invalid response format from Claude.") # Trigger fallback
+
+        elif openai_client:
+            logger.debug("Claude failed or unavailable, attempting boost with OpenAI.")
             completion = openai_client.chat.completions.create(
-                model="gpt-4",
+                model="gpt-3.5-turbo", # Use a cheaper/faster model for boosting
                 messages=[
                     {"role": "system", "content": boost_system_prompt},
-                    {"role": "user", "content": f"다음 게임 프롬프트를 분석하고 증강하되, 간결함을 유지하세요: {prompt}"}
+                    {"role": "user", "content": f"다음 게임 프롬프트를 분석하고 위의 지침에 따라 간결하게 증강하세요:\n\n{prompt}"}
                 ],
-                max_tokens=10000,
-                temperature=0.3
+                max_tokens=500, # Reduced
+                temperature=0.2 # Lowered
             )
-            if completion.choices and len(completion.choices) > 0:
-                return completion.choices[0].message.content
-            raise Exception("OpenAI API 응답 형식 오류")
-    except Exception:
-        return prompt
+            if completion.choices and len(completion.choices) > 0 and completion.choices[0].message:
+                boosted_prompt = completion.choices[0].message.content.strip()
+                logger.debug(f"OpenAI boosted prompt: {boosted_prompt[:100]}...")
+                return boosted_prompt
+            else:
+                 logger.warning("OpenAI boost response format unexpected.")
+                 # Fall through to return original prompt
+
+        else:
+            logger.warning("Neither Claude nor OpenAI client available for boosting.")
+            # Fall through to return original prompt
+
+    except Exception as e:
+        logger.error(f"Error during prompt boosting: {e}", exc_info=True)
+        # Fall through to return original prompt
+
+    logger.debug("Boosting failed or skipped, returning original prompt.")
+    return boosted_prompt # Return original if all attempts fail
+
 
 def handle_boost(prompt: str):
+    """Handles the boost button click event."""
+    logger.info("Boost button clicked.")
+    if not prompt or not prompt.strip():
+        logger.warning("Boost requested for empty prompt.")
+        # Return original empty prompt and don't change tab state
+        return "", gr.update() # Use gr.update() for no change
+
     try:
-        boosted_prompt = boost_prompt(prompt)
-        return boosted_prompt, gr.update(active_key="empty")
-    except Exception:
-        return prompt, gr.update(active_key="empty")
+        boosted = boost_prompt(prompt)
+        # Return the boosted prompt to the input textarea
+        # Keep the active tab as is (don't switch to empty)
+        return boosted, gr.update() # Use gr.update() for no change to the tab state
+    except Exception as e:
+        logger.error(f"Error in handle_boost: {e}", exc_info=True)
+        # Return the original prompt in case of error, maybe show a notification?
+        # For now, just return original prompt
+        return prompt, gr.update()
+
 
 def history_render(history: History):
+    """Prepares history for display in the chatbot component."""
+    logger.debug(f"Rendering history. Number of turns: {len(history)}")
+    # The history format should already be correct for the legacy.Chatbot
+    # Just need to trigger the drawer opening
     return gr.update(open=True), history
 
+
 def execute_code(query: str):
-    if not query or query.strip() == '':
-        return None, gr.update(active_key="empty")
+    """Handles the 'Code' (Execute) button click."""
+    logger.info("Execute code button clicked.")
+    if not query or not query.strip():
+        logger.warning("Execute code requested for empty input.")
+        return None, gr.update(active_key="empty") # Stay on empty tab
+
     try:
+        # Extract code first
         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")
+        logger.debug(f"Code extracted for execution (length: {len(clean_code)})")
+
+        if not clean_code or not clean_code.strip():
+             logger.warning("No valid code found in input to execute.")
+             # Maybe return an error message in the sandbox?
+             error_html = "<p style='color:orange;'>입력에서 실행할 코드를 찾을 수 없습니다. 코드 블록(```html ... ```) 안에 코드를 넣어보세요.</p>"
+             return error_html, gr.update(active_key="render") # Show error in render tab
+
+        # Send the extracted code to the sandbox
+        sandbox_html = send_to_sandbox(clean_code)
+        logger.debug("Switching tab to 'render' for code execution.")
+        return sandbox_html, gr.update(active_key="render")
+
     except Exception as e:
-        print(f"Execute code error: {str(e)}")
-        return None, gr.update(active_key="empty")
+        logger.error(f"Error during execute_code: {e}", exc_info=True)
+        error_html = f"<p style='color: red;'>코드 실행 중 오류 발생: {html.escape(str(e))}</p>"
+        # Show error message in the render tab
+        return error_html, gr.update(active_key="render")
 
 
 # ------------------------
@@ -529,228 +844,341 @@ def execute_code(query: str):
 
 class Demo:
     def __init__(self):
-        pass
-        
+        pass # No state needed here for now
+
     async def generation_code(self, query: Optional[str], _setting: Dict[str, str], _history: Optional[History]):
-        if not query or query.strip() == '':
+        """Generates game code based on user query and history."""
+        logger.info(f"Generation request received. Query: '{query[:50]}...', History length: {len(_history) if _history else 0}")
+
+        # Handle empty query - use random demo
+        if not query or not query.strip():
+            logger.info("Empty query received, using random demo description.")
             query = random.choice(DEMO_LIST)['description']
-        
+            # Update the input field visually? Might be complex. For now, just use it internally.
+
+        # Initialize history if None
         if _history is None:
             _history = []
-        
-        query = f"""
-다음 게임을 제작해주세요. 
-중요 요구사항: 
-1. 코드는 가능한 한 간결하게 작성할 것
-2. 불필요한 주석이나 설명은 제외할 것
-3. 코드는 600줄을 넘지 않을 것
-4. 모든 코드는 하나의 HTML 파일에 통합할 것
-5. 핵심 기능만 구현하고 부가 기능은 생략할 것
-게임 요청: {query}
+            logger.debug("History was None, initialized to empty list.")
+
+        # Prepare the prompt with constraints
+        # Reduced line count constraint slightly for flexibility
+        constrained_query = f"""
+다음 게임을 제작해주세요.
+중요 요구사항:
+1. 코드는 HTML, CSS, JavaScript 만을 사용하여 단일 HTML 파일로 작성해주세요.
+2. 모든 코드는 `<script>` 와 `<style>` 태그를 포함하여 HTML 파일 내부에 인라인으로 작성해야 합니다. 외부 파일 참조는 금지합니다.
+3. 코드는 가능한 한 간결하게 작성하고, 불필요한 주석, 설명, 공백 라인은 최소화해주세요.
+4. 생성되는 총 코드 라인 수는 **600줄**을 넘지 않도록 엄격히 제한합니다. (HTML, CSS, JS 포함)
+5. 게임의 핵심 기능만 구현하고, 복잡한 애니메이션, 사운드, 여러 레벨 등 부가 기능은 생략해주세요.
+6. 라이브러리나 프레임워크 사용 없이 바닐라 JavaScript (ES6+)를 사용해주세요.
+7. 즉시 실행 가능한 완전한 HTML 코드만 생성하고, 코드 앞뒤에 설명이나 ```html 같은 마크다운 표시는 절대 포함하지 마세요.
+
+게임 요청:
+{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})
-        
+        logger.debug(f"Prepared constrained query for LLM.")
+
+        # Prepare messages for APIs
         try:
+            messages = history_to_messages(_history, _setting.get('system', SystemPrompt)) # Use default if missing
+            system_message = messages[0]['content']
+
+            # Claude messages (User/Assistant roles only)
+            claude_messages = []
+            for msg in messages[1:]: # Skip system message
+                # Ensure content exists before adding
+                if msg.get("content", "").strip():
+                    claude_messages.append({"role": msg["role"], "content": msg["content"]})
+            # Add the current user query
+            claude_messages.append({'role': Role.USER, 'content': constrained_query})
+
+            # OpenAI messages (System + User/Assistant)
+            openai_messages = [{"role": "system", "content": system_message}]
+            for msg in messages[1:]: # Skip system message
+                 if msg.get("content", "").strip():
+                    openai_messages.append({"role": msg["role"], "content": msg["content"]})
+            openai_messages.append({"role": "user", "content": constrained_query})
+
+            logger.debug(f"Prepared messages. Claude: {len(claude_messages)}, OpenAI: {len(openai_messages)}")
+
+        except Exception as e:
+            logger.error(f"Error preparing messages: {e}", exc_info=True)
             yield [
-                "Generating code...",
+                f"Error preparing messages: {html.escape(str(e))}",
                 _history,
                 None,
-                gr.update(active_key="loading"),
-                gr.update(open=True)
+                gr.update(active_key="empty"),
+                gr.update(open=False) # Keep code drawer closed on error
             ]
-            await asyncio.sleep(0)
-            collected_content = None
+            return # Stop generation
+
+        # Initial UI update: Show loading state
+        yield [
+            "⏳ 게임 코드 생성 시작...", # Initial message in code view
+            _history,
+            None, # No sandbox content yet
+            gr.update(active_key="loading"), # Switch to loading tab
+            gr.update(open=True) # Open code drawer to show progress
+        ]
+        await asyncio.sleep(0.1) # Allow UI to update
+
+        collected_content = None
+        error_message = None
+        api_used = None
+
+        # Try Claude first
+        if claude_client:
             try:
-                async for content in try_claude_api(system_message, claude_messages):
+                logger.info("Attempting code generation with Claude...")
+                api_used = "Claude"
+                # Use async for loop correctly
+                async for content_chunk in try_claude_api(system_message, claude_messages):
+                    collected_content = content_chunk # Update collected content with each chunk
                     yield [
-                        content,
+                        f"```html\n{collected_content}\n```", # Show streaming progress in code block
                         _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):
+                    # No sleep needed, handled by async iterator
+                logger.info("Claude generation successful.")
+
+            except Exception as e:
+                logger.warning(f"Claude API failed: {e}", exc_info=False) # Log less verbosely for expected fallbacks
+                error_message = f"Claude API Error: {e}"
+                collected_content = None # Reset content on error
+
+        # Fallback to OpenAI if Claude failed or is unavailable
+        if collected_content is None and openai_client:
+            logger.info("Falling back to OpenAI for code generation...")
+            api_used = "OpenAI"
+            error_message = None # Clear previous error
+            try:
+                 # Use async for loop correctly
+                async for content_chunk in try_openai_api(openai_messages):
+                    collected_content = content_chunk # Update collected content
                     yield [
-                        content,
+                        f"```html\n{collected_content}\n```", # Show streaming progress
                         _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}줄)**
-이로 인해 실행 시 오류가 발생할 수 있습니다. 다음과 같이 시도해 보세요:
-1. 더 간단한 게임을 요청하세요
-2. 특정 기능만 명시하여 요청하세요 (예: "간단한 Snake 게임, 점수 시스템 없이")
-3. "코드" 버튼을 사용하여 직접 실행해 보세요
+                    # No sleep needed
+                logger.info("OpenAI generation successful.")
+
+            except Exception as e:
+                logger.error(f"OpenAI API also failed: {e}", exc_info=True)
+                error_message = f"OpenAI API Error: {e}. Both APIs failed."
+                collected_content = None
+
+        # Process the final result
+        if collected_content:
+            logger.info(f"Code generation completed using {api_used}. Final content length: {len(collected_content)}")
+            # Clean the final generated code (remove potential markdown fences if LLM added them)
+            final_code = remove_code_block(collected_content)
+            if not final_code: # If remove_code_block failed or LLM output was just markdown
+                 final_code = collected_content # Use raw content as fallback
+
+            # Validate code length (using the raw code before optimization for check)
+            code_lines = final_code.count('\n') + 1
+            # Increased limit slightly based on system prompt
+            line_limit = 700
+            if code_lines > line_limit:
+                logger.warning(f"Generated code is too long: {code_lines} lines (limit: {line_limit}).")
+                warning_msg = f"""
+⚠️ **경고: 생성된 코드가 너무 깁니다 ({code_lines}줄 / {line_limit}줄 제한)**
+코드가 너무 길어 브라우저에서 느리거나 오류가 발생할 수 있습니다.
+더 간결한 게임을 요청하거나, "코드" 버튼으로 직접 실행해보세요.
+
 ```html
-{clean_code[:2000]}
-... (코드가 너무 깁니다) ... """
-                    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)
-                    ]
+{html.escape(final_code[:2000])}
+... (코드가 너무 길어 일부만 표시) ...
+```"""
+                # Update history with the failure/warning? Or just show warning?
+                # Let's just show the warning in the code output for now.
+                yield [
+                    warning_msg,
+                    _history, # History remains unchanged on length warning
+                    None, # No sandbox for overly long code
+                    gr.update(active_key="empty"), # Go back to empty state
+                    gr.update(open=True) # Keep code drawer open to show warning
+                ]
             else:
-                raise ValueError("No content was generated from either API")
-        except Exception as e:
-            raise ValueError(f'Error calling APIs: {str(e)}')
-            
+                # Success: Update history and show code + sandbox
+                logger.info("Code length within limits. Preparing final output.")
+                # Prepare messages for history update (use the *original* query, not constrained one)
+                messages_for_history = messages + [{'role': Role.USER, 'content': query}, {'role': Role.ASSISTANT, 'content': final_code}]
+                _updated_history = messages_to_history(messages_for_history)
+
+                # Send final, cleaned code to sandbox
+                sandbox_html = send_to_sandbox(final_code)
+
+                yield [
+                    f"```html\n{final_code}\n```", # Show final code in code block
+                    _updated_history,
+                    sandbox_html, # Render in sandbox
+                    gr.update(active_key="render"), # Switch to render tab
+                    gr.update(open=True) # Keep code drawer open
+                ]
+        else:
+            # Both APIs failed
+            logger.error(f"Code generation failed using both APIs. Last error: {error_message}")
+            yield [
+                f"❌ 코드 생성 실패: {html.escape(error_message)}",
+                _history, # History remains unchanged on failure
+                None,
+                gr.update(active_key="empty"),
+                gr.update(open=False) # Close drawer on total failure
+            ]
+
     def clear_history(self):
-        return []
+        """Clears the conversation history."""
+        logger.info("Clear history called.")
+        # Also clear the code output and sandbox, and reset tabs
+        return (
+            [],                             # Cleared history state
+            "",                             # Clear code output
+            None,                           # Clear sandbox
+            gr.update(active_key="empty"),  # Reset tab to empty
+            gr.update(open=False),          # Close code drawer
+            gr.update(value=""),            # Clear input text
+            gr.update(value="배포 결과가 여기에 표시됩니다.") # Reset deploy result
+        )
 
 
 ####################################################
-# 1) deploy_to_vercel 함수
+# Vercel Deployment Functions
 ####################################################
 def deploy_to_vercel(code: str):
-    print(f"[DEBUG] deploy_to_vercel() 시작. code 길이: {len(code) if code else 0}")
-    try:
-        if not code or len(code.strip()) < 10:
-            print("[DEBUG] 배포 불가: code가 짧음")
-            return "No code to deploy."
-
-        token = "A8IFZmgW2cqA4yUNlLPnci0N"
-        if not token:
-            print("[DEBUG] Vercel 토큰이 없음.")
-            return "Vercel token is not set."
-
-        project_name = ''.join(random.choice(string.ascii_lowercase) for _ in range(6))
-        print(f"[DEBUG] 생성된 project_name: {project_name}")
-
-        deploy_url = "https://api.vercel.com/v13/deployments"
-        headers = {
-            "Authorization": f"Bearer {token}",
-            "Content-Type": "application/json"
-        }
+    """Deploys the given HTML code to Vercel."""
+    logger.info(f"[deploy_to_vercel] Attempting deployment. Code length: {len(code)}")
+    vercel_token = os.getenv("VERCEL_API_TOKEN", "A8IFZmgW2cqA4yUNlLPnci0N") # Use env var first
+
+    if not vercel_token:
+        logger.error("[deploy_to_vercel] Vercel API token (VERCEL_API_TOKEN or hardcoded) not found.")
+        return "⚠️ **배포 실패:** Vercel API 토큰이 설정되지 않았습니다."
+
+    if not code or len(code.strip()) < 50: # Increased minimum length
+        logger.warning("[deploy_to_vercel] Code is too short or empty for deployment.")
+        return "⚠️ **배포 실패:** 배포할 코드가 너무 짧습니다 (최소 50자 필요)."
+
+    # Ensure code is wrapped in basic HTML if it isn't already
+    if not re.search(r'<!DOCTYPE html>', code, re.IGNORECASE) and not re.search(r'<html.*?>', code, re.IGNORECASE):
+        logger.debug("[deploy_to_vercel] Wrapping raw code in basic HTML structure for deployment.")
+        code = f"""<!DOCTYPE html>
+<html lang="en">
+<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Deployed Game</title></head>
+<body>{code}</body>
+</html>"""
 
-        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"
-            }
-        }
+    project_name = 'gamecraft-' + ''.join(random.choices(string.ascii_lowercase + string.digits, k=8))
+    logger.info(f"[deploy_to_vercel] Generated project name: {project_name}")
 
-        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_url = "https://api.vercel.com/v13/deployments"
+    headers = {
+        "Authorization": f"Bearer {vercel_token}",
+        "Content-Type": "application/json"
+    }
+
+    # Define files for deployment (only index.html needed for simple static deployment)
+    files = [
+        {"file": "index.html", "data": code}
+    ]
 
-        deploy_data = {
-            "name": project_name,
-            "files": files,
-            "target": "production",
-            "projectSettings": project_settings
+    # Define deployment data (simpler structure for static deployment)
+    deploy_data = {
+        "name": project_name,
+        "files": files,
+        "target": "production",
+         # Specify project settings to ensure it's treated as static
+        "projectSettings": {
+            "framework": None, # Explicitly set to null for static
+            "outputDirectory": None # Not needed if deploying files directly
         }
+    }
 
-        print("[DEBUG] Vercel API 요청 전송중...")
-        deploy_response = requests.post(deploy_url, headers=headers, json=deploy_data)
-        print("[DEBUG] 응답 status_code:", deploy_response.status_code)
+    try:
+        logger.debug("[deploy_to_vercel] Sending deployment request to Vercel API...")
+        deploy_response = requests.post(deploy_url, headers=headers, json=deploy_data, timeout=90) # Increased timeout
+        logger.debug(f"[deploy_to_vercel] Vercel API response status: {deploy_response.status_code}")
 
-        if deploy_response.status_code != 200:
-            print("[DEBUG] 배포 실패:", deploy_response.text)
-            return f"Deployment failed: {deploy_response.text}"
+        response_data = {}
+        try:
+            response_data = deploy_response.json()
+        except json.JSONDecodeError:
+            logger.warning("[deploy_to_vercel] Vercel response was not valid JSON.")
+
+        if deploy_response.status_code not in [200, 201]: # Vercel might return 201 Created
+            error_message = response_data.get('error', {}).get('message', deploy_response.text)
+            logger.error(f"[deploy_to_vercel] Deployment failed: {deploy_response.status_code} - {error_message}")
+            # Limit error message length shown to user
+            return f"⚠️ **배포 실패:** Vercel API 오류 ({deploy_response.status_code}).\n```\n{html.escape(error_message[:500])}\n```"
+
+        # Extract the deployment URL from the response
+        deployment_url = response_data.get('url')
+        if not deployment_url:
+             logger.error("[deploy_to_vercel] Deployment succeeded but URL not found in response.")
+             return "⚠️ **배포 실패:** 배포는 성공했지만 URL을 가져올 수 없습니다."
+
+        # Vercel usually adds https:// automatically, but ensure it's there
+        if not deployment_url.startswith(('http://', 'https://')):
+             deployment_url = f"https://{deployment_url}"
+
+        logger.info(f"[deploy_to_vercel] Deployment successful! URL: {deployment_url}")
+
+        # Return Markdown link
+        result_markdown = f"""
+✅ **배포 완료!**
+게임이 다음 주소에 배포되었습니다:
+[**{deployment_url}**]({deployment_url})
+
+*참고: 배포된 사이트가 활성화되기까지 몇 분 정도 소요될 수 있습니다.*
+"""
+        logger.debug("[deploy_to_vercel] Returning success Markdown.")
+        return result_markdown.strip() # Strip leading/trailing whitespace
+
+    except requests.exceptions.Timeout:
+        logger.error("[deploy_to_vercel] Request to Vercel API timed out.")
+        return "⚠️ **배포 실패:** Vercel API 요청 시간 초과."
+    except requests.exceptions.RequestException as e:
+        logger.error(f"[deploy_to_vercel] Network or Request Error: {e}", exc_info=True)
+        return f"⚠️ **배포 실패:** 네트워크 또는 요청 오류 발생.\n```\n{html.escape(str(e))}\n```"
+    except Exception as e:
+        logger.error(f"[deploy_to_vercel] Unexpected Error during deployment: {e}", exc_info=True)
+        return f"⚠️ **배포 실패:** 예상치 못한 오류 발생.\n```\n{html.escape(str(e))}\n```"
 
-        deployment_url = f"https://{project_name}.vercel.app"
-        print(f"[DEBUG] 배포 성공 -> URL: {deployment_url}")
-        time.sleep(5)
 
+def handle_deploy_click(code_output_value: Optional[str]):
+    """Handles the deploy button click event."""
+    logger.info("Deploy button clicked.")
 
-    # Markdown 링크로 반환
-        return f"""
-        ✅ **Deployment complete!**  
-        Your app is live at:  
-        [**{deployment_url}**]({deployment_url})
-        """    
+    # Add an immediate feedback message
+    yield "⏳ 배포를 시작합니다... Vercel API 호출 중..."
 
+    if not code_output_value:
+        logger.warning("[handle_deploy_click] No code available in code_output.")
+        yield "⚠️ **배포 실패:** 생성된 코드가 없습니다."
+        return
 
-    
-    except Exception as e:
-        print("[ERROR] deploy_to_vercel() 예외:", e)
-        return f"Error during deployment: {str(e)}"
+    # Extract the actual code from the Markdown component's value
+    # The value might contain ```html ... ```, so remove it.
+    clean_code = remove_code_block(code_output_value)
+    logger.debug(f"[handle_deploy_click] Extracted code for deployment (length: {len(clean_code)}).")
 
+    if not clean_code or len(clean_code.strip()) < 50:
+        logger.warning("[handle_deploy_click] Cleaned code is too short for deployment.")
+        yield "⚠️ **배포 실패:** 배포할 유효한 코드가 부족합니다 (최소 50자 필요)."
+        return
 
+    # Call the deployment function
+    deployment_result = deploy_to_vercel(clean_code)
+    logger.info(f"[handle_deploy_click] Deployment result received.")
 
-# ------------------------
-# (3) handle_deploy_legacy
-# ------------------------
-def handle_deploy_legacy(code):
-    logger.debug(f"[handle_deploy_legacy] code 길이: {len(code) if code else 0}")
-    if not code or len(code.strip()) < 10:
-        logger.info("[handle_deploy_legacy] 코드가 짧음.")
-        return "<div style='color:red;'>배포할 코드가 없습니다.</div>"
-
-    clean_code = remove_code_block(code)
-    logger.debug(f"[handle_deploy_legacy] remove_code_block 후 길이: {len(clean_code)}")
-
-    result_html = deploy_to_vercel(clean_code)
-    logger.debug(f"[handle_deploy_legacy] 배포 결과 HTML 길이: {len(result_html)}")
-
-    encoded_html = base64.b64encode(result_html.encode('utf-8')).decode()
-    data_uri = f"data:text/html;charset=utf-8;base64,{encoded_html}"
-
-    iframe_html = f"""
-    <iframe src="{data_uri}"
-            style="width:100%; height:600px; border:none;"
-            sandbox="allow-scripts allow-same-origin allow-popups">
-    </iframe>
-    """
-    logger.debug("[handle_deploy_legacy] iframe_html 반환")
-    return iframe_html
+    # Yield the final result to update the Markdown component
+    yield deployment_result
 
 
 # ------------------------
@@ -766,152 +1194,188 @@ theme = gr.themes.Soft(
     text_size=gr.themes.sizes.text_md,
 )
 
-with gr.Blocks(css_paths=["app.css"], theme=theme) as demo:
-    header_html = gr.HTML("""
+with gr.Blocks(css="app.css", theme=theme) as demo: # Use css parameter directly
+    # Removed header_html and integrated title/description into gr.Blocks or Markdown
+    gr.Markdown("""
     <div class="app-header">
         <h1>🎮 Vibe Game Craft</h1>
-        <p>설명을 입력하면 웹 기반 HTML5, JavaScript, CSS 게임을 생성합니다. 실시간 미리보기와 배포 기능도 지원됩니다.</p>
+        <p>설명을 입력하면 웹 기반 HTML5, JavaScript, CSS 게임을 생성합니다. 실시간 미리보기와 원클릭 배포 기능을 지원합니다.</p>
     </div>
-    <!-- 배포 결과 박스 - 헤더 바로 아래 위치 -->
-    <div id="deploy-banner" style="display:none;" class="deploy-banner">
-        <!-- (생략) ... 배너 스타일/스크립트 ... -->
-    </div>
-    <style>
-    /* (생략) ... CSS ... */
-    </style>
-    <script>
-    /* (생략) ... JS copyBannerUrl / showDeployBanner ... */
-    </script>
-    """)
+    """, elem_classes="header-markdown") # Added class for potential styling
 
+    # State variables
     history = gr.State([])
     setting = gr.State({"system": SystemPrompt})
-    deploy_status = gr.State({"is_deployed": False,"status": "","url": "","message": ""})
+    # Removed deploy_status state as we display directly in Markdown
 
     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.ConfigProvider(): # Provides context for Ant Design components
+
+            # Drawers for Code and History
+            with antd.Drawer(open=False, title="코드 보기", placement="left", width="50%", name="code_drawer") as code_drawer:
+                 # Use gr.Code for better syntax highlighting if legacy.Markdown causes issues
+                code_output = gr.Code(language="html", label="Generated Code", interactive=False)
+                # code_output = legacy.Markdown(elem_classes="code-output-markdown") # Keep if preferred
+
+            with antd.Drawer(open=False, title="히스토리", placement="left", width="60%", name="history_drawer") as history_drawer:
+                history_output = legacy.Chatbot(
+                    show_label=False,
+                    flushing=False, # Keep flushing false for standard updates
+                    height=800, # Adjust height as needed
+                    elem_classes="history_chatbot",
+                    show_copy_button=True # Add copy button to chat messages
+                )
+
+            # Drawer for Templates
             with antd.Drawer(
                 open=False,
-                title="게임 템플릿",
+                title="🎮 게임 템플릿",
                 placement="right",
-                width="900px",
+                width="60%", # Adjust width
+                name="session_drawer", # Use name for easier selection if needed
                 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")
+                    # Use gr.HTML for the template display
+                    session_history_html = gr.HTML(elem_classes="session-history-html") # Renamed variable
+                    # Button inside the drawer to close it
+                    close_template_btn = antd.Button("닫기", type="default", elem_classes="close-btn")
 
-            with antd.Row(gutter=[32, 12], align="top", elem_classes="equal-height-container") as layout:
+            # Main Layout (Row with two Columns)
+            with antd.Row(gutter=[16, 16], align="top", elem_classes="main-layout-row"): # Reduced gutter
 
-                # 왼쪽 Col
-                with antd.Col(span=24, md=16, elem_classes="equal-height-col"):
-                    with ms.Div(elem_classes="right_panel panel"):
+                # Left Column: Game Preview Area
+                with antd.Col(xs=24, sm=24, md=14, lg=15, xl=16, elem_classes="preview-column"): # Responsive spans
+                    with ms.Div(elem_classes="preview-panel panel"): # Use ms.Div or standard gr.Column/Group
                         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:
+                        <div class="render_header">
+                            <span class="header_btn red"></span><span class="header_btn yellow"></span><span class="header_btn green"></span>
+                            <span class="render-title">Game Preview</span>
+                        </div>
+                        """, elem_classes="preview-header-html")
+                        # Tabs for different preview states
+                        with antd.Tabs(active_key="empty", render_tab_bar="() => null", name="state_tab") as state_tab:
                             with antd.Tabs.Item(key="empty"):
-                                empty = antd.Empty(description="게임을 만들려면 설명을 입력하세요", elem_classes="right_content")
+                                antd.Empty(description="게임을 만들려면 설명을 입력하거나 템플릿을 선택하세요.", elem_classes="right_content")
                             with antd.Tabs.Item(key="loading"):
-                                loading = antd.Spin(True, tip="게임 코드 생성 중...", size="large", elem_classes="right_content")
+                                antd.Spin(True, tip="게임 코드 생성 중...", size="large", elem_classes="right_content")
                             with antd.Tabs.Item(key="render"):
+                                # Use gr.HTML for the sandbox iframe
                                 sandbox = gr.HTML(elem_classes="html_content")
 
-                # 오른쪽 Col
-                with antd.Col(span=24, md=8, elem_classes="equal-height-col"):
-                    with antd.Flex(vertical=True, gap="small", elem_classes="right-top-buttons"):
-                        with antd.Flex(gap="small", elem_classes="setting-buttons", justify="space-between"):
-                            codeBtn = antd.Button("🧑‍💻 코드 보기", type="default", elem_classes="code-btn")
-                            historyBtn = antd.Button("📜 히스토리", type="default", elem_classes="history-btn")
-                            template_btn = antd.Button("🎮 템플릿", type="default", elem_classes="template-btn")
-                        
-                        with antd.Flex(gap="small", justify="space-between", elem_classes="action-buttons"):
-                            btn = antd.Button("전송", type="primary", size="large", elem_classes="send-btn")
-                            boost_btn = antd.Button("증강", type="default", size="large", elem_classes="boost-btn")
-                            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"):
+                # Right Column: Controls and Input
+                with antd.Col(xs=24, sm=24, md=10, lg=9, xl=8, elem_classes="control-column"): # Responsive spans
+                    with antd.Flex(vertical=True, gap="middle", elem_classes="control-panel"): # Use Flex for vertical layout
+
+                        # Top Buttons (Code, History, Templates)
+                        with antd.Flex(gap="small", justify="space-between", elem_classes="top-buttons"):
+                            codeBtn = antd.Button("🧑‍💻 코드", type="default", icon="<i class='fas fa-code'></i>") # Use icon font if available or text
+                            historyBtn = antd.Button("📜 히스토리", type="default", icon="<i class='fas fa-history'></i>")
+                            template_btn = antd.Button("🎮 템플릿", type="default", icon="<i class='fas fa-gamepad'></i>")
+
+                        # Input Textarea
                         input_text = antd.InputTextarea(
                             size="large",
                             allow_clear=True,
-                            placeholder=random.choice(DEMO_LIST)['description'],
-                            max_length=100000
+                            placeholder="예: 벽돌깨기 게임 만들어줘 (간단하게)", # Shorter placeholder
+                            rows=6, # Adjust rows for desired initial height
+                            max_length=2000, # Sensible max length for input
+                            show_count=True, # Show character count
+                            elem_classes="main-input-textarea"
                         )
-                        gr.HTML('<div class="help-text">💡 원하는 게임의 설명을 입력하세요. 예: "테트리스 게임 제작해줘."</div>')
-
-                        # Markdown으로 배포 결과 표시
+                        gr.HTML('<div class="help-text">💡 원하는 게임을 설명하거나 템플릿을 사용하세요. 간결할수록 좋습니다!</div>')
+
+                        # Action Buttons (Send, Boost, Execute, Deploy, Clear)
+                        with antd.Flex(gap="small", wrap='wrap', justify="space-between", elem_classes="action-buttons"): # Allow wrapping
+                            btn = antd.Button("🚀 생성", type="primary", size="middle") # Changed text, adjusted size
+                            boost_btn = antd.Button("✨ 증강", type="default", size="middle")
+                            execute_btn = antd.Button("▶️ 코드 실행", type="default", size="middle") # Changed text
+                            deploy_btn = antd.Button("☁️ 배포", type="default", size="middle")
+                            clear_btn = antd.Button("🧹 클리어", type="default", size="middle", danger=True) # Added danger style
+
+                        # Deployment Result Area
+                        gr.Markdown("---") # Separator
+                        gr.Markdown("### ☁️ 배포 결과", elem_classes="deploy-header")
                         deploy_result_container = gr.Markdown(
-                            value="아직 배포된 게임이 없습니다.",
-                            label="Deployment Result"
+                            value="아직 배포된 게임이 없습니다. '배포' 버튼을 클릭하세요.",
+                            label="Deployment Result", # Label might not be visible depending on theme/CSS
+                            elem_classes="deploy-result-markdown" # Add class for styling
                         )
 
-            # Code Drawer 열기/닫기
+            # --- Event Listeners ---
+
+            # Drawer Controls
             codeBtn.click(lambda: gr.update(open=True), inputs=[], outputs=[code_drawer])
-            code_drawer.close(lambda: gr.update(open=False), inputs=[], outputs=[code_drawer])
+            # code_drawer.change(lambda x: gr.update(open=x), inputs=[code_drawer], outputs=[code_drawer]) # Close via change event if needed
 
-            # History Drawer 열기/닫기
             historyBtn.click(history_render, inputs=[history], outputs=[history_drawer, history_output])
-            history_drawer.close(lambda: gr.update(open=False), inputs=[], outputs=[history_drawer])
+            # history_drawer.change(lambda x: gr.update(open=x), inputs=[history_drawer], outputs=[history_drawer])
 
-            # Template Drawer
+            # Template Drawer Controls
             template_btn.click(
                 fn=lambda: (gr.update(open=True), load_all_templates()),
-                outputs=[session_drawer, session_history],
-                queue=False
+                outputs=[session_drawer, session_history_html], # Target the gr.HTML component
+                queue=False # No queue needed for simple UI update
             )
-            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])
+            # Close button inside the template drawer
+            close_template_btn.click(lambda: gr.update(open=False), outputs=[session_drawer])
+            # Also close when clicking outside (default drawer behavior) or via the 'X' icon
 
-            # 전송 버튼
+            # Main Action: Generate Code
             btn.click(
                 demo_instance.generation_code,
                 inputs=[input_text, setting, history],
-                outputs=[code_output, history, sandbox, state_tab, code_drawer]
+                outputs=[code_output, history, sandbox, state_tab, code_drawer], # Ensure code_drawer is opened
+                concurrency_limit=5 # Limit concurrent requests
             )
 
-            # 클리어 버튼
-            clear_btn.click(demo_instance.clear_history, inputs=[], outputs=[history])
+            # Clear Button
+            clear_btn.click(
+                demo_instance.clear_history,
+                inputs=[],
+                # Outputs: history state, code output, sandbox, state tab, code drawer, input text, deploy result
+                outputs=[history, code_output, sandbox, state_tab, code_drawer, input_text, deploy_result_container]
+            )
 
-            # 증강 버튼
+            # Boost Button
             boost_btn.click(
                 fn=handle_boost,
                 inputs=[input_text],
-                outputs=[input_text, state_tab]
+                outputs=[input_text, state_tab], # Update input text, don't change tab
+                queue=False
             )
 
-            # 코드 실행 버튼
+            # Execute Code Button
             execute_btn.click(
                 fn=execute_code,
-                inputs=[input_text],
-                outputs=[sandbox, state_tab]
+                inputs=[input_text], # Takes code directly from input for execution
+                outputs=[sandbox, state_tab], # Updates sandbox and switches tab
+                queue=False
             )
 
-            # 배포 버튼 → deploy_result_container (Markdown)
+            # Deploy Button
+            # Use the new handle_deploy_click function which is a generator
             deploy_btn.click(
-                fn=lambda code: deploy_to_vercel(remove_code_block(code)) if code else "No code generated.",
-                inputs=[code_output],
-                outputs=[deploy_result_container]
+                fn=handle_deploy_click,
+                inputs=[code_output], # Takes code from the code output drawer
+                outputs=[deploy_result_container], # Updates the deployment result Markdown
+                # queue=True # Enable queue as deployment can take time
             )
 
 # ------------------------
 # 9) 실행
 # ------------------------
 if __name__ == "__main__":
+    logger.info("Starting Gradio application...")
     try:
-        demo_instance = Demo()
-        demo.queue(default_concurrency_limit=20).launch(ssr_mode=False)
+        # demo_instance is already created
+        # Use share=True for public link if needed, debug=True for more logs
+        demo.queue(default_concurrency_limit=10).launch(
+            server_name="0.0.0.0", # Listen on all interfaces for docker/cloud
+            # share=True, # Uncomment for public link
+            debug=True, # Enable Gradio debug mode for more logs
+            # prevent_thread_lock=True # May help in some environments
+        )
     except Exception as e:
-        print(f"Initialization error: {e}")
-        raise
+        logger.critical(f"Failed to launch Gradio demo: {e}", exc_info=True)
+        raise