Create app-backup.py

app-backup.py

@@ -34,73 +34,29 @@ def get_logs():
 
 import re
 
-def get_deployment_update(code):
-    logger.debug(f"[get_deployment_update] 받은 code 길이: {len(code) if code else 0}")
-    if not code or len(code.strip()) < 10:
-        logger.info("[get_deployment_update] 코드가 너무 짧아 배포를 진행하지 않습니다.")
-        return gr.update(
-            value='<div style="color: orange;">⚠️ 배포할 코드가 없습니다. 먼저 게임을 생성하거나 코드를 입력해주세요.</div>',
-            visible=True
-        )
+deploying_flag = False            # 전역 플래그
 
-    clean_code = remove_code_block(code)
-    logger.debug(f"[get_deployment_update] 코드 블록 제거 후 code 길이: {len(clean_code)}")
-    
-    # 배포 중임을 알리는 메시지 표시
-    yield gr.update(
-        value='<div class="deploy-loading"><div class="loading-spinner"></div> <span class="loading-message">🚀 Vercel에 배포 중입니다... 잠시만 기다려주세요...</span></div>',
-        visible=True
-    )
-    
-    # 실제 배포 함수 호출 (시간이 걸릴 수 있으므로 비동기적으로 처리되거나, Gradio의 yield를 통해 중간 업데이트)
-    # deploy_to_vercel이 동기 함수이므로, 이 부분에서 UI가 멈출 수 있습니다.
-    # 더 나은 사용자 경험을 위해서는 deploy_to_vercel을 비동기화하거나 별도 스레드에서 실행해야 하지만,
-    # 현재 구조에서는 일단 동기 호출로 진행합니다.
-    result = deploy_to_vercel(clean_code)
-    logger.info(f"[get_deployment_update] deploy_to_vercel 결과: {result}")
-    
-    # 배포 URL 추출
-    match = re.search(r'https?://[\\w\\-]+\\.vercel\\.app', result)
-    if match:
-        url = match.group(0)
-        logger.info(f"[get_deployment_update] 배포 URL 추출 성공: {url}")
-        # HTML 앵커로 링크 표시
-        final_html = f"""
-        <div class="deploy-success">
-            <span class="success-icon">✅</span>
-            <span class="success-message">배포 성공! 앱이 준비되었습니다.</span>
-        </div>
-        <div class="url-box">
-            <a href="{url}" target="_blank">{url}</a>
-            <button class="copy-btn" onclick="navigator.clipboard.writeText('{url}')">복사</button>
-        </div>
-        """
-        yield gr.update(
-            value=final_html,
-            visible=True
+
+def get_deployment_update(code_md: str):
+    clean = remove_code_block(code_md)
+    result = deploy_to_vercel(clean)
+
+    m = re.search(r"https?://[\w\.-]+\.vercel\.app", result)
+    if m:                                         # ── 성공 ──
+        url = m.group(0)
+        md = (
+            "✅ **배포 완료!**\n\n"
+            f"➡️ [배포된 앱 열기]({url})"
         )
-    else:
-        logger.warning("[get_deployment_update] 배포 URL을 찾을 수 없습니다.")
-        error_message = html.escape(result)
-        # 오류 메시지에 Vercel 로그가 포함될 수 있으므로, 너무 길지 않게 자릅니다.
-        if len(error_message) > 500:
-            error_message = error_message[:500] + "..."
-        
-        final_html = f"""
-        <div class="deploy-error">
-            <span class="error-icon">❌</span>
-            <span class="error-message">배포 URL을 찾을 수 없습니다.</span>
-        </div>
-        <div style="font-size: 0.9em; color: var(--text-secondary); margin-top: 5px;">
-            <strong>Vercel 응답:</strong><br>
-            <pre style="white-space: pre-wrap; word-break: break-all; max-height: 100px; overflow-y: auto; background-color: #f0f0f0; padding: 5px; border-radius: 4px;">{error_message}</pre>
-        </div>
-        """
-        yield gr.update(
-            value=final_html,
-            visible=True
+    else:                                         # ── 실패 ──
+        md = (
+            "❌ **배포 실패**\n\n"
+            f"```\n{result}\n```"
         )
 
+    # Markdown 컴포넌트이므로 gr.update 로 값/표시 전환
+    return gr.update(value=md, visible=True)
+
 
 # ------------------------
 # 1) DEMO_LIST 및 SystemPrompt
@@ -293,8 +249,8 @@ async def try_claude_api(system_message, claude_messages, timeout=15):
         
         start_time = time.time()
         with claude_client.messages.stream(
-            model="claude-3-opus-20240229", # Sonnet 대신 Opus 사용 또는 최신 Sonnet 모델명 확인
-            max_tokens=4096, # Claude-3 모델의 최대 토큰 수에 맞게 조정
+            model="claude-3-7-sonnet-20250219",
+            max_tokens=19800,
             system=system_message_with_limit,
             messages=claude_messages,
             temperature=0.3,
@@ -307,16 +263,9 @@ async def try_claude_api(system_message, claude_messages, timeout=15):
                 if chunk.type == "content_block_delta":
                     collected_content += chunk.delta.text
                     yield collected_content
-                    await asyncio.sleep(0) # CPU 양보
-                # stream.text_stream 사용 시 아래와 같이 처리 가능
-                # for text in stream.text_stream:
-                #    collected_content += text
-                #    yield collected_content
-                #    await asyncio.sleep(0)
-            # 마지막으로 수집된 전체 콘텐츠 반환 (필요시)
-            # yield collected_content 
+                    await asyncio.sleep(0)
+                start_time = current_time
     except Exception as e:
-        logger.error(f"Claude API Error: {e}")
         raise e
 
 async def try_openai_api(openai_messages):
@@ -328,10 +277,10 @@ async def try_openai_api(openai_messages):
             openai_messages[0]["content"] += "\n\n추가 중요 지침: 생성하는 코드는 절대로 200줄을 넘지 마세요. 코드 간결성이 최우선입니다. 주석은 최소화하고, 핵심 기능만 구현하세요."
 
         stream = openai_client.chat.completions.create(
-            model="gpt-4o", # 또는 "gpt-4-turbo" 등 최신/적절한 모델
+            model="o3",
             messages=openai_messages,
             stream=True,
-            max_tokens=4096, # 모델 최대 토큰 수에 맞게 조정
+            max_tokens=19800,
             temperature=0.2
         )
         collected_content = ""
@@ -339,9 +288,7 @@ async def try_openai_api(openai_messages):
             if chunk.choices[0].delta.content is not None:
                 collected_content += chunk.choices[0].delta.content
                 yield collected_content
-                await asyncio.sleep(0) # CPU 양보
     except Exception as e:
-        logger.error(f"OpenAI API Error: {e}")
         raise e
 
 
@@ -415,45 +362,19 @@ def create_template_html(title, items):
 """
         html_content += card_html
     html_content += r"""
-</div>
 <script>
 function copyToInput(card) {
     const prompt = card.dataset.prompt;
-    // Gradio 3.x / 4.x 에서 textarea 선택자 변경 가능성 고려
-    // 우선 .ant-input-textarea-large textarea 시도, 없으면 일반 textarea 시도
-    let textarea = document.querySelector('.ant-input-textarea-large textarea');
-    if (!textarea) {
-        // 일반적인 Gradio textarea 선택자 (버전에 따라 다를 수 있음)
-        const textareas = document.querySelectorAll('textarea');
-        // 여러 textarea 중 올바른 것을 특정하기 어려우므로, 좀 더 구체적인 ID나 클래스 필요
-        // 여기서는 첫 번째 textarea를 사용하거나, ID 기반으로 찾아야 함.
-        // 예: textarea = document.querySelector('#input_text_area_id textarea');
-        // 지금은 antd 컴포넌트 기반으로 유지
-        if (textareas.length > 0) {
-             // input_text 컴포넌트에 ID를 부여하고 해당 ID로 찾는 것이 더 안정적
-             // 예: input_text = antd.InputTextarea(..., elem_id="main_prompt_input")
-             // textarea = document.querySelector('#main_prompt_input textarea');
-             // 임시로 첫번째 textarea 사용 (주의: 다른 textarea가 있을 경우 문제 발생 가능)
-             // textarea = textareas[0];
-        }
-    }
-
+    const textarea = document.querySelector('.ant-input-textarea-large textarea');
     if (textarea) {
         textarea.value = prompt;
-        // Gradio 입력값 업데이트를 위해 'input' 이벤트 트리거
-        const event = new Event('input', { bubbles: true });
-        textarea.dispatchEvent(event);
-        
-        // 템플릿 Drawer 닫기 (Drawer 닫기 버튼의 클래스나 ID로 정확히 선택)
-        const closeButton = document.querySelector('.session-drawer .ant-drawer-close, .session-drawer .close-btn'); // antd Drawer의 기본 닫기 버튼 또는 커스텀 버튼
-        if (closeButton) {
-            closeButton.click();
-        }
-    } else {
-        console.warn('Prompt textarea not found.');
+        textarea.dispatchEvent(new Event('input', { bubbles: true }));
+        // 템플릿 Drawer 닫기
+        document.querySelector('.session-drawer .close-btn').click();
     }
 }
 </script>
+</div>
 """
     return gr.HTML(value=html_content)
 
@@ -466,117 +387,77 @@ def load_all_templates():
 # ------------------------
 
 def remove_code_block(text):
-    if not text: return ""
-    # HTML 주석 제거 (코드 블록 제거 전에 하는 것이 좋을 수 있음)
-    text = re.sub(r'<!--.*?-->', '', text, flags=re.DOTALL)
-    
-    # ```html ... ``` 패턴
-    pattern_html = r'```html\s*([\s\S]+?)\s*```'
-    match_html = re.search(pattern_html, text, re.DOTALL)
-    if match_html:
-        return match_html.group(1).strip()
-    
-    # ``` ... ``` 일반 코드 블록 패턴
-    pattern_general = r'```(?:\w+)?\s*([\s\S]+?)\s*```'
-    match_general = re.search(pattern_general, text, re.DOTALL)
-    if match_general:
-        return match_general.group(1).strip()
+    pattern = r'```html\s*([\s\S]+?)\s*```'
+    match = re.search(pattern, text, re.DOTALL)
+    if match:
+        return match.group(1).strip()
     
-    # 코드 블록 마커가 없는 경우, 원본 텍스트가 순수 HTML 코드일 수 있다고 가정
-    # 또는 마커가 깨진 경우를 대비해 간단히 마커만 제거 시도
-    text_no_markers = re.sub(r'^```html\s*', '', text, flags=re.MULTILINE).strip()
-    text_no_markers = re.sub(r'\s*```$', '', text_no_markers, flags=re.MULTILINE).strip()
+    pattern = r'```(?:\w+)?\s*([\s\S]+?)\s*```'
+    match = re.search(pattern, text, re.DOTALL)
+    if match:
+        return match.group(1).strip()
     
-    # 만약 마커 제거 후에도 변화가 없다면 원본 텍스트 반환 (이미 순수 코드일 가능성)
-    if text_no_markers == text.strip():
-        return text.strip()
-    return text_no_markers
-
+    text = re.sub(r'```html\s*', '', text)
+    text = re.sub(r'\s*```', '', text)
+    return text.strip()
 
 def optimize_code(code: str) -> str:
     if not code or len(code.strip()) == 0:
         return code
     
     lines = code.split('\n')
-    # 코드 길이 제한은 LLM에게 맡기는 것이 더 효과적일 수 있음
-    # if len(lines) <= 200:
-    #     return code 
-    
-    # 주석 제거 (HTML, CSS, JS)
-    # HTML 주석
-    cleaned_code = re.sub(r'<!--[\s\S]*?-->', '', code, flags=re.MULTILINE)
-    # CSS 주석
-    cleaned_code = re.sub(r'/\*[\s\S]*?\*/', '', cleaned_code, flags=re.MULTILINE)
-    # JS 한 줄 주석 (주의: URL 등에서 //가 사용될 수 있으므로, 정교한 패턴 필요)
-    # cleaned_code = re.sub(r'(?<!:)//.*?$', '', cleaned_code, flags=re.MULTILINE) # Positive lookbehind for : to avoid http://
+    if len(lines) <= 200:
+        return code
     
-    # JS 주석은 LLM이 생성 시 최소화하도록 유도하는 것이 더 안전
+    comment_patterns = [
+        r'/\*[\s\S]*?\*/',
+        r'//.*?$',
+        r'<!--[\s\S]*?-->'
+    ]
+    cleaned_code = code
+    for pattern in comment_patterns:
+        cleaned_code = re.sub(pattern, '', cleaned_code, flags=re.MULTILINE)
     
-    # 빈 줄 제거 (연속된 빈 줄은 하나로)
     cleaned_lines = []
     empty_line_count = 0
     for line in cleaned_code.split('\n'):
-        stripped_line = line.strip()
-        if stripped_line == '':
+        if line.strip() == '':
             empty_line_count += 1
-            if empty_line_count <= 1: # 연속된 빈 줄 중 첫 번째는 유지 (가독성 위해)
+            if empty_line_count <= 1:
                 cleaned_lines.append('')
         else:
             empty_line_count = 0
-            cleaned_lines.append(line) # 원본 줄 유지 (들여쓰기 보존)
+            cleaned_lines.append(line)
     
     cleaned_code = '\n'.join(cleaned_lines)
-    
-    # console.log 제거 (주의: 프로덕션 코드에서는 필요할 수 있음)
-    # cleaned_code = re.sub(r'console\.log\(.*?\);?', '', cleaned_code, flags=re.MULTILINE)
-    
-    # 연속된 공백을 하나로 (주의: 문자열 내부 공백에 영향 줄 수 있음, HTML 태그 속성 등)
-    # 이 부분은 매우 신중해야 하며, 보통은 적용하지 않는 것이 안전
-    # cleaned_code = re.sub(r' {2,}', ' ', cleaned_code)
-    
-    return cleaned_code.strip()
-
+    cleaned_code = re.sub(r'console\.log\(.*?\);', '', cleaned_code, flags=re.MULTILINE)
+    cleaned_code = re.sub(r' {2,}', ' ', cleaned_code)
+    return cleaned_code
 
 def send_to_sandbox(code):
-    if not code:
-        return '<div style="color:red;">미리보기를 위한 코드가 없습니다.</div>'
-        
-    clean_code = remove_code_block(code) # 코드 블록 제거
-    # clean_code = optimize_code(clean_code) # 최적화는 선택 사항, LLM이 이미 최적화된 코드를 주도록 유도
+    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()
     
-    # 이미 완전한 HTML 문서인지 확인
-    is_full_html = clean_code.strip().lower().startswith('<!doctype html>') or \
-                   clean_code.strip().lower().startswith('<html')
-
-    if not is_full_html:
-        # 기본적인 HTML 구조로 감싸기
-        # CSS나 JS만 있는 경우를 고려하여 <style>이나 <script> 태그가 있다면 head나 body에 적절히 배치
-        # 여기서는 단순화를 위해 body에 모두 넣음
+    if not clean_code.strip().startswith('<!DOCTYPE') and not clean_code.strip().startswith('<html'):
         clean_code = f"""<!DOCTYPE html>
-<html lang="ko">
+<html>
 <head>
-    <meta charset="UTF-AF">
+    <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; background-color: #f0f0f0; }}
-        /* Add any default iframe styling here */
-    </style>
 </head>
 <body>
 {clean_code}
 </body>
 </html>"""
-
-    # Data URI 생성
-    # b64encode는 bytes를 받으므로, 문자열을 utf-8로 인코딩
     encoded_html = base64.b64encode(clean_code.encode('utf-8')).decode('utf-8')
     data_uri = f"data:text/html;charset=utf-8;base64,{encoded_html}"
-    
-    # iframe으로 반환
-    # sandbox 속성으로 보안 강화 (필요에 따라 조정)
-    return f'<iframe src="{data_uri}" width="100%" height="920px" style="border:none;" sandbox="allow-scripts allow-same-origin allow-popups allow-forms"></iframe>'
-
+    return f'<iframe src="{data_uri}" width="100%" height="920px" style="border:none;"></iframe>'
 
 def boost_prompt(prompt: str) -> str:
     if not prompt:
@@ -585,98 +466,128 @@ def boost_prompt(prompt: str) -> str:
 주어진 프롬프트를 분석하여 더 명확하고 간결한 요구사항으로 변환하되,
 원래 의도와 목적은 그대로 유지하면서 다음 관점들을 고려하여 증강하십시오:
 
-1. 게임플레이 핵심 메커니즘 명확히 정의 (예: 테트리스 - 블록 낙하, 회전, 줄 제거)
-2. 필수적인 상호작용 요소만 포함 (예: 키보드 화살표 키 조작)
-3. 핵심 UI 요소 간략히 기술 (예: 점수판, 다음 블록 표시)
-4. 코드 간결성 유지를 위한 우선순위 설정 (예: 그래픽 최소화, 사운드 제외)
-5. 기본적인 게임 규칙과 승리/패배 조건 명시 (예: 화면 상단까지 블록 쌓이면 게임 오버)
+1. 게임플레이 핵심 메커니즘 명확히 정의
+2. 필수적인 상호작용 요소만 포함
+3. 핵심 UI 요소 간략히 기술
+4. 코드 간결성 유지를 위한 우선순위 설정
+5. 기본적인 게임 규칙과 승리/패배 조건 명시
 
 다음 중요 지침을 반드시 준수하세요:
-- 불필요한 세부 사항이나 부가 기능은 제외 (예: 멀티플레이어, 사용자 정의 테마)
-- 생성될 코드가 HTML 단일 파일 기준 200줄을 넘지 않도록 기능을 제한 (매우 중요)
+- 불필요한 세부 사항이나 부가 기능은 제외
+- 생성될 코드가 600줄을 넘지 않도록 기능을 제한
 - 명확하고 간결한 언어로 요구사항 작성
-- 최소한의 필수 게임 요소만 포함 (MVP - Minimum Viable Product)
-- "HTML, CSS, JavaScript를 사용하여 단일 파일로 만들어주세요." 라는 문구를 명시적으로 포함.
-- "코드는 200줄 이내로 매우 간결해야 합니다." 라는 문구를 명시적으로 포함.
+- 최소한의 필수 게임 요소만 포함
 """
     try:
-        # Claude 우선 시도
         try:
             response = claude_client.messages.create(
-                model="claude-3-opus-20240229", # 또는 claude-3-sonnet-20240229
-                max_tokens=1024, # 증강된 프롬프트는 길지 않으므로 토큰 수 줄임
-                temperature=0.2, # 일관된 결과 선호
+                model="claude-3-7-sonnet-20250219",
+                max_tokens=10000,
+                temperature=0.3,
                 messages=[{
                     "role": "user",
-                    "content": f"다음 게임 프롬프트를 분석하고 증강하여, 200줄 이내의 단일 HTML 파일 게임 코드를 생성할 수 있도록 매우 간결하게 만들어주세요: {prompt}"
+                    "content": f"다음 게임 프롬프트를 분석하고 증강하되, 간결함을 유지하세요: {prompt}"
                 }],
                 system=boost_system_prompt
             )
-            if hasattr(response, 'content') and len(response.content) > 0 and hasattr(response.content[0], 'text'):
-                return response.content[0].text.strip()
-            logger.warning("Claude API 응답 형식 오류 또는 내용 없음 (boost_prompt)")
-        except Exception as e_claude:
-            logger.warning(f"Claude API 호출 실패 (boost_prompt): {e_claude}. OpenAI로 재시도합니다.")
-
-        # OpenAI 재시도
-        completion = openai_client.chat.completions.create(
-            model="gpt-4o", # 또는 gpt-4-turbo
-            messages=[
-                {"role": "system", "content": boost_system_prompt},
-                {"role": "user", "content": f"다음 게임 프롬프트를 분석하고 증강하여, 200줄 이내의 단일 HTML 파일 게임 코드를 생성할 수 있도록 매우 간결하게 만들어주세요: {prompt}"}
-            ],
-            max_tokens=1024,
-            temperature=0.2
-        )
-        if completion.choices and len(completion.choices) > 0 and completion.choices[0].message:
-            return completion.choices[0].message.content.strip()
-        logger.warning("OpenAI API 응답 형식 오류 또는 내용 없음 (boost_prompt)")
-        
-        # 두 API 모두 실패 시 원본 프롬프트 반환
-        return prompt 
-    except Exception as e_general:
-        logger.error(f"Boost prompt 중 일반 오류 발생: {e_general}")
-        return prompt # 예외 발생 시 원본 프롬프트 반환
+            if hasattr(response, 'content') and len(response.content) > 0:
+                return response.content[0].text
+            raise Exception("Claude API 응답 형식 오류")
+        except Exception:
+            completion = openai_client.chat.completions.create(
+                model="gpt-4",
+                messages=[
+                    {"role": "system", "content": boost_system_prompt},
+                    {"role": "user", "content": f"다음 게임 프롬프트를 분석하고 증강하되, 간결함을 유지하세요: {prompt}"}
+                ],
+                max_tokens=10000,
+                temperature=0.3
+            )
+            if completion.choices and len(completion.choices) > 0:
+                return completion.choices[0].message.content
+            raise Exception("OpenAI API 응답 형식 오류")
+    except Exception:
+        return prompt
 
 def handle_boost(prompt: str):
-    if not prompt or prompt.strip() == "":
-        return gr.update(value="증강할 내용이 없습니다. 먼저 게임 설명을 입력해주세요."), gr.update(active_key="empty")
     try:
         boosted_prompt = boost_prompt(prompt)
-        return boosted_prompt, gr.update(active_key="empty") # 증강 후에는 미리보기 탭을 비움
-    except Exception as e:
-        logger.error(f"Handle_boost error: {str(e)}")
-        return gr.update(value=f"증강 중 오류 발생: {str(e)}"), gr.update(active_key="empty")
-
+        return boosted_prompt, gr.update(active_key="empty")
+    except Exception:
+        return prompt, gr.update(active_key="empty")
 
 def history_render(history: History):
-    # history가 비어있으면 Drawer를 열지 않거나, 비어있다는 메시지를 Chatbot에 표시
-    if not history:
-        # Chatbot에 "히스토리가 없습니다" 메시지 표시하는 방법은 Gradio 버전에 따라 다를 수 있음
-        # 여기서는 Drawer는 열되, Chatbot은 비어있게 됨
-        return gr.update(open=True), [] # 빈 히스토리 전달
     return gr.update(open=True), history
 
-
-def execute_code(query: str): # query는 코드 문자열을 받음
+def execute_code(query: str):
     if not query or query.strip() == '':
-        return None, gr.update(active_key="empty") # 코드가 없으면 아무것도 안 함
+        return None, gr.update(active_key="empty")
     try:
-        # query는 이미 코드 문자열이므로 remove_code_block은 필요 없을 수 있으나,
-        # 사용자가 입력창에 ```html ... ``` 형식으로 넣을 수도 있으므로 안전하게 호출
         clean_code = remove_code_block(query)
-        
-        # send_to_sandbox 함수는 이미 내부적으로 HTML 구조를 완성시켜줌
+        if clean_code.startswith('```html'):
+            clean_code = clean_code[7:].strip()
+        if clean_code.endswith('```'):
+            clean_code = clean_code[:-3].strip()
+        if not clean_code.strip().startswith('<!DOCTYPE') and not clean_code.strip().startswith('<html'):
+            if not ('<body' in clean_code and '</body>' in clean_code):
+                clean_code = f"""<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Game Preview</title>
+</head>
+<body>
+{clean_code}
+</body>
+</html>"""
         return send_to_sandbox(clean_code), gr.update(active_key="render")
     except Exception as e:
-        logger.error(f"Execute code error: {str(e)}")
-        error_html = f"<div style='color:red; padding:10px;'>코드 실행 중 오류 발생: {html.escape(str(e))}</div>"
-        return error_html, gr.update(active_key="render") # 오류도 HTML로 렌더링
+        print(f"Execute code error: {str(e)}")
+        return None, gr.update(active_key="empty")
 
 
 # ------------------------
 # 6) 데모 클래스
 # ------------------------
+# ── deploy 버튼용 함수 새로 작성 ─────────────────────────────
+def deploy_and_show(code_md: str):
+    global deploying_flag
+
+    # ① 중복 클릭 차단 ---------------------------------
+    if deploying_flag:
+        return (gr.update(value="⏳ 이미 배포 중입니다...", visible=True),
+                None,
+                gr.update(active_key="empty"))
+    deploying_flag = True
+
+    # ② 코드 정리 & 배포 --------------------------------
+    clean = remove_code_block(code_md)
+    result = deploy_to_vercel(clean)
+
+    # ③ 결과 해석 ---------------------------------------
+
+    url_match = re.search(r"https?://[\w\.-]+\.vercel\.app", result)
+    if url_match:
+        url = url_match.group(0)
+
+        md_out = f"✅ **배포 완료!**\n\n➡️ [열기]({url})"
+        iframe  = (f"<iframe src='{url}' width='100%' height='920px' "
+                   "style='border:none;'></iframe>")
+
+        deploying_flag = False
+        return (gr.update(value=md_out, visible=True),
+                iframe,
+                gr.update(active_key="render"))
+
+    # ④ 실패 처리 ---------------------------------------
+    md_err = f"❌ **배포 실패**\n\n```\n{result}\n```"
+    deploying_flag = False
+    return (gr.update(value=md_err, visible=True),
+            None,
+            gr.update(active_key="empty"))
+
+
 
 class Demo:
     def __init__(self):
@@ -684,177 +595,133 @@ class Demo:
         
     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'] # 랜덤 프롬프트 대신 사용자 입력 유도
-            yield [
-                gr.update(value="게임 설명을 입력해주세요."), # code_output에 메시지
-                _history if _history else [],
-                gr.update(value='<div style="padding: 20px; text-align: center; color: grey;">생성할 게임 설명을 입력하고 "전송" 버튼을 클릭하세요.</div>'), # sandbox
-                gr.update(active_key="empty"), # state_tab
-                gr.update(open=False) # code_drawer (열지 않음)
-            ]
-            return
-
+            query = random.choice(DEMO_LIST)['description']
         
         if _history is None:
             _history = []
         
-        # LLM에게 전달할 최종 프롬프트 구성
-        # 시스템 프롬프트에서 코드 길이 제한 등을 이미 강조하고 있으므로, query에는 게임 요청만 명확히 전달
-        # query_prefix = """
-# 다음 게임을 제작해주세요.
-# 중요 요구사항:
-# 1. 모든 코드는 하나의 HTML 파일에 통합해주세요.
-# 2. 코드는 극도로 간결해야 하며, 200줄을 넘지 않도록 해주세요. (매우 중요)
-# 3. 불필요한 주석, 설명, 외부 라이브러리 사용은 피해주세요.
-# 4. 핵심 게임 기능만 구현하고, 부가 기능은 생략해주세요.
-# ---
-# 게임 요청:
-# """
-        # final_query = query_prefix + query
-        # SystemPrompt에 이미 상세 지침이 있으므로, 사용자 query는 그대로 사용
-        final_query = query
+        query = f"""
+다음 게임을 제작해주세요. 
+중요 요구사항: 
+1. 코드는 가능한 한 간결하게 작성할 것
+2. 불필요한 주석이나 설명은 제외할 것
+3. 코드는 600줄을 넘지 않을 것
+4. 모든 코드는 하나의 HTML 파일에 통합할 것
+5. 핵심 기능만 구현하고 부가 기능은 생략할 것
+게임 요청: {query}
+"""
         
         messages = history_to_messages(_history, _setting['system'])
-        system_message = messages[0]['content'] # SystemPrompt
+        system_message = messages[0]['content']
         
-        # Claude API용 메시지 준비 (System role을 messages list 밖으로 빼는 방식)
-        claude_messages_for_api = [
-            msg for msg in messages[1:] if msg["content"].strip() != ''
+        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() != ''
         ]
-        claude_messages_for_api.append({'role': Role.USER, 'content': final_query})
         
-        # OpenAI API용 메시지 준비 (System role을 messages list 안에 포함)
-        openai_messages_for_api = [{"role": "system", "content": system_message}]
-        openai_messages_for_api.extend([
-            msg for msg in messages[1:] if msg["content"].strip() != ''
-        ])
-        openai_messages_for_api.append({"role": "user", "content": final_query})
+        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})
         
-        # 초기 UI 업데이트: 로딩 시작
-        yield [
-            gr.update(value="코드를 생성하고 있습니다... 🎮"), # code_output
-            _history,
-            gr.update(value=None), # sandbox (로딩 중에는 비움)
-            gr.update(active_key="loading"), # state_tab
-            gr.update(open=False) # code_drawer (로딩 중에는 닫음)
-        ]
-        await asyncio.sleep(0.01) # UI 업데이트를 위한 짧은 지연
-
-        collected_content = None
-        error_occurred = False
-        error_message = ""
-
-        # API 호출 시도 (Claude 우선)
         try:
-            logger.info("Claude API 호출 시도...")
-            async for content_chunk in try_claude_api(system_message, claude_messages_for_api):
-                collected_content = content_chunk
-                yield [
-                    gr.update(value=collected_content + "\n\nClaude API로부터 스트리밍 중..."),
-                    _history, None, gr.update(active_key="loading"), gr.update(open=False)
-                ]
-            logger.info(f"Claude API 호출 성공. 내용 길이: {len(collected_content if collected_content else '')}")
-        except Exception as e_claude:
-            logger.warning(f"Claude API 실패: {e_claude}. OpenAI API로 재시도합니다.")
-            collected_content = None # Claude 실패 시 내용 초기화
-            # OpenAI 시도 전, 사용자에게 알림 (선택 사항)
-            # yield [
-            #     gr.update(value=f"Claude API 호출에 실패했습니다. OpenAI API로 재시도합니다...\n에러: {str(e_claude)[:100]}..."),
-            #     _history, None, gr.update(active_key="loading"), gr.update(open=False)
-            # ]
-            # await asyncio.sleep(1) # 메시지 확인 시간
-
-            try:
-                logger.info("OpenAI API 호출 시도...")
-                async for content_chunk in try_openai_api(openai_messages_for_api):
-                    collected_content = content_chunk
-                    yield [
-                        gr.update(value=collected_content + "\n\nOpenAI API로부터 스트리밍 중..."),
-                        _history, None, gr.update(active_key="loading"), gr.update(open=False)
-                    ]
-                logger.info(f"OpenAI API 호출 성공. 내용 길이: {len(collected_content if collected_content else '')}")
-            except Exception as e_openai:
-                logger.error(f"OpenAI API도 실패: {e_openai}")
-                error_occurred = True
-                error_message = f"Claude와 OpenAI API 모두 호출에 실패했습니다.\nClaude: {str(e_claude)}\nOpenAI: {str(e_openai)}"
-                collected_content = None
-
-
-        if error_occurred or not collected_content:
-            final_error_message = error_message if error_message else "API로부터 응답을 받지 못했습니다. 네트워크 연결 또는 API 키 설정을 확인해주세요."
-            yield [
-                gr.update(value=final_error_message),
-                _history,
-                gr.update(value=f'<div style="color:red; padding:10px;">{html.escape(final_error_message)}</div>'),
-                gr.update(active_key="empty"),
-                gr.update(open=True) # 오류 메시지 확인을 위해 코드 보기 창 열기
-            ]
-            return
-
-        # API 호출 성공 후 처리
-        clean_code_from_llm = remove_code_block(collected_content) # LLM 응답에서 코드만 추출
-        
-        # 코드 길이 경고 (LLM이 생성한 코드 기준)
-        # 이 부분은 SystemPrompt에서 이미 강력하게 요청하고 있으므로, LLM이 잘 지켰을 것으로 기대
-        code_lines = clean_code_from_llm.count('\n') + 1
-        if code_lines > 250: # SystemPrompt는 200줄 요청, 약간의 여유
-            warning_msg = f"""⚠️ **경고: 생성된 코드가 너무 깁니다 ({code_lines}줄).**
-요청하신 게임의 복잡도 때문일 수 있습니다. SystemPrompt는 200줄 이내를 요청했습니다.
-코드가 너무 길면 실행이 느리거나, 브라우저에서 오류가 발생할 수 있습니다.
-더 간단한 게임을 요청하시거나, "코드" 버튼으로 직접 실행해보세요.
-
---- 코드 시작 (일부만 표시) ---
-{html.escape(clean_code_from_llm[:1500])} 
-... (코드가 너무 길어 일부만 표시) ...
-"""
-            # sandbox_content = send_to_sandbox(clean_code_from_llm) # 긴 코드도 일단 실행 시도
-            sandbox_content = f'<div style="padding:10px; background-color:#fff3cd; color:#664d03; border:1px solid #ffe69c; border-radius:5px;">{warning_msg.replace("--- 코드 시작 (일부만 표시) ---", "").replace("... (코드가 너무 길어 일부만 표시) ...","").replace("⚠️ **경고: 생성된 코드가 너무 깁니다", "⚠️ 경고: 생성된 코드가 너무 깁니다")} <br><br>그래도 미리보기를 시도합니다...</div>' + send_to_sandbox(clean_code_from_llm)
-
-            yield [
-                gr.update(value=warning_msg), # code_output에 경고와 코드 표시
-                _history, # 히스토리는 업데이트하지 않음 (긴 코드는 저장하지 않거나, 사용자 선택)
-                sandbox_content, # sandbox에는 경고와 함께 미리보기 시도
-                gr.update(active_key="render"), # state_tab
-                gr.update(open=True) # code_drawer 열어서 경고 확인
-            ]
-        else:
-            # 정상적인 길이의 코드 처리
-            # 히스토리 업데이트
-            # final_query (사용자 입력)과 collected_content (LLM 응답)을 히스토리에 추가
-            _history.append((final_query, collected_content))
-
             yield [
-                gr.update(value=collected_content), # code_output에 전체 LLM 응답 (코드블록 포함)
+                "Generating code...",
                 _history,
-                send_to_sandbox(clean_code_from_llm), # sandbox에는 순수 코드 미리보기
-                gr.update(active_key="render"), # state_tab
-                gr.update(open=False) # code_drawer (성공 시 자동으로 열지 않음, 사용자가 원할 때 열도록)
+                None,
+                gr.update(active_key="loading"),
+                gr.update(open=True)
             ]
+            await asyncio.sleep(0)
+            collected_content = None
+            try:
+                async for content in try_claude_api(system_message, claude_messages):
+                    yield [
+                        content,
+                        _history,
+                        None,
+                        gr.update(active_key="loading"),
+                        gr.update(open=True)
+                    ]
+                    await asyncio.sleep(0)
+                collected_content = content
+            except Exception:
+                async for content in try_openai_api(openai_messages):
+                    yield [
+                        content,
+                        _history,
+                        None,
+                        gr.update(active_key="loading"),
+                        gr.update(open=True)
+                    ]
+                    await asyncio.sleep(0)
+                collected_content = content
+
+            if collected_content:
+                clean_code = remove_code_block(collected_content)
+                code_lines = clean_code.count('\n') + 1
+                if code_lines > 700:
+                    warning_msg = f"""
+⚠️ **경고: 생성된 코드가 너무 깁니다 ({code_lines}줄)**
+이로 인해 실행 시 오류가 발생할 수 있습니다. 다음과 같이 시도해 보세요:
+1. 더 간단한 게임을 요청하세요
+2. 특정 기능만 명시하여 요청하세요 (예: "간단한 Snake 게임, 점수 시스템 없이")
+3. "코드" 버튼을 사용하여 직접 실행해 보세요
+```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)
+                    ]
+            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 [], gr.update(value="히스토리가 초기화되었습니다."), None, gr.update(active_key="empty") # Chatbot, code_output, sandbox, state_tab 순서로 가정
+        return []
 
 
 ####################################################
 # 1) deploy_to_vercel 함수
 ####################################################
 def deploy_to_vercel(code: str):
-    logger.debug(f"[VercelDeploy] 시작. 코드 길이: {len(code) if code else 0}")
+    print(f"[DEBUG] deploy_to_vercel() 시작. code 길이: {len(code) if code else 0}")
     try:
-        if not code or len(code.strip()) < 10: # HTML 기본 구조보다 짧으면 배포 의미 없음
-            logger.info("[VercelDeploy] 배포 불가: 코드가 너무 짧습니다.")
-            return "배포할 코드가 너무 짧습니다. 최소한의 HTML 구조를 포함해야 합니다."
+        if not code or len(code.strip()) < 10:
+            print("[DEBUG] 배포 불가: code가 짧음")
+            return "No code to deploy."
 
-        # Vercel API 토큰 (환경 변수 또는 직접 설정)
-        # token = os.getenv("VERCEL_API_TOKEN")
-        token = "A8IFZmgW2cqA4yUNlLPnci0N" # 제공된 토큰 사용 (보안상 환경변수 사용 권장)
+        token = "A8IFZmgW2cqA4yUNlLPnci0N"
         if not token:
-            logger.error("[VercelDeploy] Vercel API 토큰이 설정되지 않았습니다.")
-            return "Vercel API 토큰이 설정되지 않았습니다. 서버 환경 설정을 확인해주세요."
+            print("[DEBUG] Vercel 토큰이 없음.")
+            return "Vercel token is not set."
 
-        # 프로젝트 이름 랜덤 생성 (충돌 방지)
-        project_name = "gamecraft-" + ''.join(random.choice(string.ascii_lowercase + string.digits) for _ in range(8))
-        logger.info(f"[VercelDeploy] 생성된 프로젝트 이름: {project_name}")
+        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 = {
@@ -862,94 +729,99 @@ def deploy_to_vercel(code: str):
             "Content-Type": "application/json"
         }
 
-        # Vercel 배포를 위한 package.json (Vite 사용 예시, 정적 HTML이므로 간단하게)
-        # Vite를 사용하지 않고 순수 정적 파일만 배포할 경우, buildCommand 등이 필요 없을 수 있음
-        # Vercel은 index.html을 자동으로 인식함
-        package_json_content = {
+        package_json = {
             "name": project_name,
             "version": "1.0.0",
             "private": True,
-            # "scripts": { # 순수 HTML만 있다면 빌드 스크립트 불필요
-            #     "build": "echo 'No build needed, deploying static HTML.' && mkdir -p dist && cp index.html dist/"
-            # }
+            "dependencies": {"vite": "^5.0.0"},
+            "scripts": {
+                "dev": "vite",
+                "build": "echo 'No build needed' && mkdir -p dist && cp index.html dist/",
+                "preview": "vite preview"
+            }
         }
 
-        # 배포할 파일 목록
-        files_to_deploy = [
+        files = [
             {"file": "index.html", "data": code},
-            # {"file": "package.json", "data": json.dumps(package_json_content, indent=2)} # 순수 HTML만 있다면 package.json 불필요
+            {"file": "package.json", "data": json.dumps(package_json, indent=2)}
         ]
-        
-        # 프로젝트 설정 (순수 HTML의 경우 framework: null 또는 생략 가능)
         project_settings = {
-            # "buildCommand": "npm run build", # 빌드 명령 불필요
-            # "outputDirectory": "dist",      # 빌드 결과 디렉토리 불필요
-            # "installCommand": "npm install", # 의존성 설치 불필요
-            "framework": None # 정적 사이트로 명시
+            "buildCommand": "npm run build",
+            "outputDirectory": "dist",
+            "installCommand": "npm install",
+            "framework": None
         }
 
-        # 배포 요청 데이터
         deploy_data = {
-            "name": project_name, # 프로젝트 이름 (Vercel 대시보드에 표시될 이름)
-            "files": files_to_deploy,
-            "target": "production", # 배포 환경 (production 또는 staging)
+            "name": project_name,
+            "files": files,
+            "target": "production",
             "projectSettings": project_settings
         }
-        
-        logger.info("[VercelDeploy] Vercel API에 배포 요청 전송 중...")
-        # 타임아웃 설정 (예: 60초)
-        try:
-            deploy_response = requests.post(deploy_url, headers=headers, json=deploy_data, timeout=60)
-            deploy_response.raise_for_status() # 오류 발생 시 예외 발생
-        except requests.exceptions.RequestException as req_err:
-            logger.error(f"[VercelDeploy] Vercel API 요청 실패: {req_err}")
-            logger.error(f"[VercelDeploy] 응답 내용: {req_err.response.text if req_err.response else 'No response'}")
-            return f"Vercel API 요청 실패: {req_err}. 응답: {req_err.response.text if req_err.response else 'No response'}"
-
-
-        response_data = deploy_response.json()
-        logger.debug(f"[VercelDeploy] Vercel API 응답 상태 코드: {deploy_response.status_code}")
-        logger.debug(f"[VercelDeploy] Vercel API 응답 내용 (일부): {str(response_data)[:200]}...")
-
-        # 응답에서 배포 URL 확인 (Vercel 응답 구조에 따라 다를 수 있음)
-        # 일반적으로 response_data['url'] 또는 response_data['alias'][0] 등에 URL이 포함됨
-        # Vercel API v13에서는 생성된 URL이 응답에 바로 포함됨
-        deployment_final_url = response_data.get("url")
-        if not deployment_final_url:
-            # 때로는 project_name 기반으로 URL을 구성해야 할 수 있음
-            # Vercel은 보통 <project_name>.vercel.app 또는 <project_name>-<unique_hash>.vercel.app 형식
-            # 응답에 alias가 있다면 그것을 사용
-            if response_data.get("alias") and len(response_data["alias"]) > 0:
-                deployment_final_url = response_data["alias"][0]
-            else: # 최후의 수단으로 project_name 사용 (정확하지 않을 수 있음)
-                 deployment_final_url = f"{project_name}.vercel.app"
-        
-        # URL에 https 스키마 추가 (Vercel은 항상 https)
-        if not deployment_final_url.startswith("https://"):
-             deployment_final_url = "https://" + deployment_final_url
 
+        print("[DEBUG] Vercel API 요청 전송중...")
+        deploy_response = requests.post(deploy_url, headers=headers, json=deploy_data)
+        print("[DEBUG] 응답 status_code:", deploy_response.status_code)
 
-        logger.info(f"[VercelDeploy] 배포 성공! 앱 URL: {deployment_final_url}")
-        
-        # 배포 후 DNS 전파 등을 위해 약간의 시간 대기 (선택 사항)
-        # time.sleep(5) # 실제 서비스에서는 비동기 폴링 등으로 상태 확인 권장
+        if deploy_response.status_code != 200:
+            print("[DEBUG] 배포 실패:", deploy_response.text)
+            return f"Deployment failed: {deploy_response.text}"
+
+        deployment_url = f"https://{project_name}.vercel.app"
+        print(f"[DEBUG] 배포 성공 -> URL: {deployment_url}")
+        time.sleep(5)
 
         return (
-            f"✅ **배포 완료!**\n"
-            f"앱이 다음 주소에서 실행 중입니다:\n"
-            f"[{deployment_final_url}]({deployment_final_url})" # 마크다운 링크 형식
+            "✅ **Deployment complete!**  \n"
+            "Your app is live at:  \n"
+            f"[**{deployment_url}**]({deployment_url})"
         )
 
+
+    
     except Exception as e:
-        logger.error(f"[VercelDeploy] 배포 중 예기치 않은 오류 발생: {e}", exc_info=True)
-        return f"배포 중 오류 발생: {str(e)}"
+        print("[ERROR] deploy_to_vercel() 예외:", e)
+        return f"Error during deployment: {str(e)}"
+
 
 
 # ------------------------
-# (3) handle_deploy_legacy - 이 함수는 get_deployment_update로 대체되었으므로 주석 처리 또는 삭제 가능
+# (3) handle_deploy_legacy
 # ------------------------
-# def handle_deploy_legacy(code):
-#     # ... (이전 코드) ...
+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>"
+
+    # 1) 코드 블록 제거
+    clean_code = remove_code_block(code)
+
+    # 2) Vercel에 배포
+    result = deploy_to_vercel(clean_code)
+    logger.debug(f"[handle_deploy_legacy] deploy_to_vercel 결과: {result}")
+
+    # 3) 배포 URL 추출
+    import re
+
+    match = re.search(r'https?://[\w.-]+\.vercel\.app', result)
+    if match:
+        deployment_url = match.group(0)
+        # 4) iframe으로 직접 렌더링
+        iframe_html = (
+            f'<iframe src="{deployment_url}" '
+            'width="100%" height="600px" style="border:none;" '
+            'sandbox="allow-scripts allow-same-origin allow-popups"></iframe>'
+        )
+        logger.debug("[handle_deploy_legacy] iframe_html 반환")
+        return iframe_html
+
+    # 5) URL 못 찾으면 오류 메시지
+    logger.warning("[handle_deploy_legacy] 배포 URL을 찾을 수 없음")
+    safe_result = html.escape(result)
+    return f"<div style='color:red;'>배포 URL을 찾을 수 없습니다.<br>결과: {safe_result}</div>"
+
+
 
 
 # ------------------------
@@ -957,128 +829,121 @@ def deploy_to_vercel(code: str):
 # ------------------------
 demo_instance = Demo()
 theme = gr.themes.Soft(
-    primary_hue=gr.themes.colors.blue,   # 직접 색상 객체 사용
-    secondary_hue=gr.themes.colors.purple,
-    neutral_hue=gr.themes.colors.slate,
+    primary_hue="blue",
+    secondary_hue="purple",
+    neutral_hue="slate",
     spacing_size=gr.themes.sizes.spacing_md,
     radius_size=gr.themes.sizes.radius_md,
     text_size=gr.themes.sizes.text_md,
 )
 
-with gr.Blocks(css="app.css", theme=theme) as demo: # css 파일명 직접 전달
-    # header_html = gr.HTML(""" ... """) # 기존 HTML 사용 또는 Python에서 동적 생성
-
-    gr.HTML("""
+with gr.Blocks(css_paths=["app.css"], theme=theme) as demo:
+    header_html = gr.HTML("""
     <div class="app-header">
         <h1>🎮 Vibe Game Craft</h1>
-        <p>설명을 입력하면 웹 기반 HTML5, JavaScript, CSS 게임을 생성합니다. 실시간 미리보기와 원클릭 배포 기능도 지원됩니다!</p>
+        <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>
     """)
-    
+
     history = gr.State([])
     setting = gr.State({"system": SystemPrompt})
-    # deploy_status = gr.State(...) # 현재 사용되지 않으므로 제거 또는 필요시 재활성화
+    deploy_status = gr.State({"is_deployed": False,"status": "","url": "","message": ""})
 
-    with ms.Application() as app: # ModelScope Studio 컴포넌트 사용 시
-        with antd.ConfigProvider(): # Ant Design 컴포넌트 사용 시
+    with ms.Application() as app:
+        with antd.ConfigProvider():
 
-            with antd.Drawer(open=False, title="💻 생성된 코드 보기", placement="left", width="50%") as code_drawer:
-                code_output = legacy.Markdown(elem_classes="code-markdown-output", संतति_rendering=False) # संतति_rendering 옵션 확인
+            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="60%") as history_drawer:
-                history_output = legacy.Chatbot(
-                    show_label=False, 
-                    flushing=False, # 실시간 스트리밍 시 flushing 동작 방식 확인
-                    height=700, # 높이 조정
-                    elem_classes="history_chatbot",
-                    show_copy_button=True
-                )
+            with antd.Drawer(open=False, title="히스토리", placement="left", width="900px") as history_drawer:
+                history_output = legacy.Chatbot(show_label=False, flushing=False, height=960, elem_classes="history_chatbot")
 
             with antd.Drawer(
                 open=False,
-                title="🎲 게임 템플릿 선택",
+                title="게임 템플릿",
                 placement="right",
-                width="60%", # 너비 조정
+                width="900px",
                 elem_classes="session-drawer"
             ) as session_drawer:
                 with antd.Flex(vertical=True, gap="middle"):
-                    # gr.Markdown("### 사용 가능한 게임 템플릿") # 제목은 Drawer title로 충분
-                    session_history_html_output = gr.HTML(elem_classes="session-history-grid") # CSS 클래스명 변경 및 그리드 레이아웃용
-                    close_btn_template_drawer = antd.Button("닫기", type="default", elem_classes="close-btn-template-drawer")
+                    gr.Markdown("### 사용 가능한 게임 템플릿")
+                    session_history = gr.HTML(elem_classes="session-history")
+                    close_btn = antd.Button("닫기", type="default", elem_classes="close-btn")
 
+            with antd.Row(gutter=[32, 12], align="top", elem_classes="equal-height-container") as layout:
 
-            with antd.Row(gutter=[16, 16], align="top", elem_classes="main-layout-row"): # gutter 값 조정
-
-                # 왼쪽 Col: 게임 미리보기
-                with antd.Col(xs=24, sm=24, md=14, lg=15, xl=16, elem_classes="preview-column"): # 반응형 컬럼 크기 조정
-                    with ms.Div(elem_classes="preview-panel panel"): # 클래스명 변경
+                # 왼쪽 Col
+                with antd.Col(span=24, md=16, elem_classes="equal-height-col"):
+                    with ms.Div(elem_classes="right_panel panel"):
                         gr.HTML(r"""
 <div class="render_header">
-    <span class="header_btn red"></span><span class="header_btn yellow"></span><span class="header_btn green"></span>
-    <span class="header_title">Game Preview</span>
+    <span class="header_btn"></span><span class="header_btn"></span><span class="header_btn"></span>
 </div>
 """)
-                        with antd.Tabs(active_key="empty", render_tab_bar="() => null", elem_classes="preview-tabs-content") as state_tab:
+                        with antd.Tabs(active_key="empty", render_tab_bar="() => null") as state_tab:
                             with antd.Tabs.Item(key="empty"):
-                                empty = antd.Empty(description="게임 설명을 입력하고 '전송' 버튼을 누르면 여기에 미리보기가 나타납니다.", elem_classes="right_content empty-state")
+                                empty = antd.Empty(description="게임을 만들려면 설명을 입력하세요", elem_classes="right_content")
                             with antd.Tabs.Item(key="loading"):
-                                loading = antd.Spin(True, tip="게임 코드 생성 중... 잠시만 기다려주세요...", size="large", elem_classes="right_content loading-state")
+                                loading = antd.Spin(True, tip="게임 코드 생성 중...", size="large", elem_classes="right_content")
                             with antd.Tabs.Item(key="render"):
-                                sandbox = gr.HTML(elem_classes="html_content sandbox-iframe-container")
-
-
-                # 오른쪽 Col: 입력 및 컨트롤
-                with antd.Col(xs=24, sm=24, md=10, lg=9, xl=8, elem_classes="control-column"): # 반응형 컬럼 크기 조정
-                    with antd.Flex(vertical=True, gap="middle", elem_classes="control-panel-flex"):
-                        with antd.Flex(gap="small", elem_classes="setting-buttons-flex", justify="space-between"):
-                            codeBtn = antd.Button("코드", type="default", icon="💻", elem_classes="control-button code-btn") # 아이콘 추가 (antd 아이콘 문자열 또는 컴포넌트)
-                            historyBtn = antd.Button("히스토리", type="default", icon="📜", elem_classes="control-button history-btn")
-                            template_btn = antd.Button("템플릿", type="default", icon="🎲", elem_classes="control-button template-btn")
-                        
-                        # 입력창을 위로 배치
-                        with antd.Flex(vertical=True, gap="small", elem_classes="input-area-flex"):
-                            input_text = antd.InputTextarea(
-                                size="large",
-                                allow_clear=True,
-                                placeholder="예시: 벽돌깨기 게임을 만들어주세요. 공을 튕겨 벽돌을 맞추고, 패들은 마우스로 조작합니다.", # 플레이스홀더 개선
-                                max_length=500, # 사용자 입력 길이 제한 (너무 길면 LLM 처리 어려움)
-                                auto_size={"minRows": 5, "maxRows": 10}, # 자동 높이 조절
-                                elem_id="main_prompt_input" # JS에서 선택하기 위한 ID
-                            )
-                            gr.HTML('<div class="help-text">💡 만들고 싶은 게임을 설명해주세요. 간결하고 명확할수록 좋아요!</div>')
-
-                        with antd.Flex(gap="small", justify="space-between", wrap="wrap", elem_classes="action-buttons-flex"): # wrap 추가
-                            btn = antd.Button("🚀 전송", type="primary", size="large", elem_classes="action-button send-btn")
-                            boost_btn = antd.Button("✨ 증강", type="default", size="large", elem_classes="action-button boost-btn")
-                            execute_btn = antd.Button("🎮 코드 실행", type="default", size="large", elem_classes="action-button execute-btn")
-                            deploy_btn = antd.Button("☁️ 배포", type="default", size="large", elem_classes="action-button deploy-btn")
-                            clear_btn = antd.Button("🧹 클리어", type="default", size="large", elem_classes="action-button clear-btn")
+                                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")
                         
-                        # 배포 결과 표시 컨테이너
-                        deploy_result_container = gr.HTML(
-                            value='<div class="no-deploy">아직 배포된 게임이 없습니다. "배포" 버튼을 클릭하여 게임을 공유하세요!</div>', # 초기 메시지 개선
-                            visible=True, # 항상 보이도록 설정 (CSS로 내용 없을 때 스타일링)
-                            elem_id="deploy_result_container",
-                            elem_classes="deploy-output-container" # CSS 스타일링용 클래스
+                        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"):
+    # ── 배포 결과 메시지가 가장 위에 오도록 ──
+                        deploy_result_container = gr.Markdown(value="", visible=False)
+                        input_text = antd.InputTextarea(
+                            size="large",
+                            allow_clear=True,
+                            placeholder=random.choice(DEMO_LIST)['description'],
+                            max_length=100000
                         )
+                        gr.HTML('<div class="help-text">💡 원하는 게임의 설명을 입력하세요. 예: "테트리스 게임 제작해줘."</div>')
+
 
             
-            # Event Handlers
+            # Code Drawer 열기/닫기
             codeBtn.click(lambda: gr.update(open=True), inputs=[], outputs=[code_drawer])
-            # code_drawer.close(...) # antd Drawer는 자체 닫기 버튼 있음
+            code_drawer.close(lambda: gr.update(open=False), inputs=[], outputs=[code_drawer])
 
+            # History Drawer 열기/닫기
             historyBtn.click(history_render, inputs=[history], outputs=[history_drawer, history_output])
-            # history_drawer.close(...)
+            history_drawer.close(lambda: gr.update(open=False), inputs=[], outputs=[history_drawer])
 
+            # Template Drawer
             template_btn.click(
                 fn=lambda: (gr.update(open=True), load_all_templates()),
-                outputs=[session_drawer, session_history_html_output], # session_history -> session_history_html_output
-                queue=False # 빠른 UI 업데이트
+                outputs=[session_drawer, session_history],
+                queue=False
             )
-            close_btn_template_drawer.click(lambda: gr.update(open=False), outputs=[session_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])
 
-            # 전송 버튼 (코드 생성)
+            # 전송 버튼
             btn.click(
                 demo_instance.generation_code,
                 inputs=[input_text, setting, history],
@@ -1086,54 +951,38 @@ with gr.Blocks(css="app.css", theme=theme) as demo: # css 파일명 직접 전
             )
 
             # 클리어 버튼
-            clear_btn.click(
-                demo_instance.clear_history, 
-                inputs=[], 
-                outputs=[history, code_output, sandbox, state_tab] # 초기화할 출력들 명시
-            ).then(
-                lambda: ( # 추가로 입력창과 배포 결과도 초기화
-                    gr.update(value=""), # input_text
-                    gr.update(value='<div class="no-deploy">아직 배포된 게임이 없습니다.</div>') # deploy_result_container
-                ),
-                outputs=[input_text, deploy_result_container]
-            )
-
+            clear_btn.click(demo_instance.clear_history, inputs=[], outputs=[history])
 
             # 증강 버튼
             boost_btn.click(
                 fn=handle_boost,
                 inputs=[input_text],
-                outputs=[input_text, state_tab] # state_tab 업데이트는 증강 결과에 따라 필요 없을 수 있음
+                outputs=[input_text, state_tab]
             )
 
-            # 코드 실행 버튼 (입력창의 코드를 직접 실행)
+            # 코드 실행 버튼
             execute_btn.click(
                 fn=execute_code,
-                inputs=[input_text], # 입력창의 내용을 코드로 간주하고 실행
+                inputs=[input_text],
                 outputs=[sandbox, state_tab]
             )
 
-            # 배포 버튼 (생성된 코드(code_output)를 배포)
             deploy_btn.click(
-                fn=get_deployment_update, # 제너레이터 함수이므로 outputs를 적절히 처리해야 함
-                inputs=[code_output], # code_output (Markdown 컴포넌트의 값)을 입력으로 사용
-                outputs=[deploy_result_container]
-            )
-
-
+                fn=deploy_and_show,          # ← 반드시 이 함수
+                inputs=[code_output],
+                outputs=[
+                    deploy_result_container, # 오른쪽 메시지
+                    sandbox,                 # 왼쪽 iframe
+                    state_tab                # 탭 전환
+                ]
+            )       
 # ------------------------
 # 9) 실행
 # ------------------------
 if __name__ == "__main__":
     try:
-        # demo_instance = Demo() # 이미 위에서 생성됨
-        demo.queue(default_concurrency_limit=10, max_batch_size=4).launch(
-            ssr_mode=False, 
-            # share=True, # 필요시 외부 공유 활성화
-            # server_name="0.0.0.0" # 모든 인터페이스에서 접속 허용
-            # auth=("user", "password") # 필요시 인증 추가
-        )
+        demo_instance = Demo()
+        demo.queue(default_concurrency_limit=20).launch(ssr_mode=False)
     except Exception as e:
-        print(f"Gradio App 실행 중 오류 발생: {e}")
-        # logger 사용 가능하면 logger.critical(f"Gradio App 실행 중 오류 발생: {e}", exc_info=True)
-        raise
+        print(f"Initialization error: {e}")
+        raise