Update app.py

app.py

@@ -105,7 +105,7 @@ def get_image_base64(image_path):
             return encoded_string
     except:
         return IMAGE_CACHE.get('default.png', '')
-        
+
 def history_to_messages(history: History, system: str) -> Messages:
     messages = [{'role': Role.SYSTEM, 'content': system}]
     for h in history:
@@ -121,7 +121,6 @@ def messages_to_history(messages: Messages) -> History:
     return history
 
 # API 클라이언트 초기화
-
 YOUR_ANTHROPIC_TOKEN = os.getenv('ANTHROPIC_API_KEY', '').strip()
 YOUR_OPENAI_TOKEN    = os.getenv('OPENAI_API_KEY',     '').strip()
 
@@ -178,9 +177,30 @@ class Demo:
     def __init__(self):
         pass
 
-    async def generation_code(self, query: Optional[str], _setting: Dict[str, str], _history: Optional[History]):
-        if not query or query.strip() == '':
-            query = random.choice(DEMO_LIST)['description']
+    async def generation_code(self, 
+                              user_prompt: str,
+                              _setting: Dict[str, str], 
+                              _history: Optional[History],
+                              genre_option: str,
+                              genre_custom: str,
+                              difficulty_option: str,
+                              difficulty_custom: str,
+                              graphic_option: str,
+                              graphic_custom: str,
+                              mechanic_option: str,
+                              mechanic_custom: str,
+                              view_option: str,
+                              view_custom: str):
+        # 1) 최종 프롬프트 결합
+        final_prompt = self.combine_options(user_prompt,
+                                            genre_option, genre_custom,
+                                            difficulty_option, difficulty_custom,
+                                            graphic_option, graphic_custom,
+                                            mechanic_option, mechanic_custom,
+                                            view_option, view_custom)
+        
+        if not final_prompt.strip():
+            final_prompt = random.choice(DEMO_LIST)['description']
         
         if _history is None:
             _history = []
@@ -190,7 +210,7 @@ class Demo:
         
         claude_messages = [
             {"role": msg["role"] if msg["role"] != "system" else "user", "content": msg["content"]} 
-            for msg in messages[1:] + [{'role': Role.USER, 'content': query}]
+            for msg in messages[1:] + [{'role': Role.USER, 'content': final_prompt}]
             if msg["content"].strip() != ''
         ]
         
@@ -200,7 +220,7 @@ class Demo:
                 "role": msg["role"],
                 "content": msg["content"]
             })
-        openai_messages.append({"role": "user", "content": query})
+        openai_messages.append({"role": "user", "content": final_prompt})
         
         try:
             yield [
@@ -263,6 +283,52 @@ class Demo:
 
     def clear_history(self):
         return []
+    
+    def combine_options(self,
+                        base_prompt,
+                        genre_opt, genre_custom,
+                        difficulty_opt, difficulty_custom,
+                        graphic_opt, graphic_custom,
+                        mechanic_opt, mechanic_custom,
+                        view_opt, view_custom):
+        """
+        사용자가 선택한 옵션 및 커스텀 내용을 base_prompt에 합쳐서 최종 프롬프트를 생성.
+        옵션이 '선택안함'이 아닐 경우 그 내용을 추가하고,
+        커스텀 입력이 비어있지 않을 경우도 추가.
+        """
+        final_prompt = base_prompt.strip()
+        
+        # 게임 장르
+        if genre_opt and genre_opt != "선택안함":
+            final_prompt += f"\n[장르]: {genre_opt}"
+        if genre_custom.strip():
+            final_prompt += f"\n[장르 추가설명]: {genre_custom}"
+        
+        # 난이도
+        if difficulty_opt and difficulty_opt != "선택안함":
+            final_prompt += f"\n[난이도]: {difficulty_opt}"
+        if difficulty_custom.strip():
+            final_prompt += f"\n[난이도 추가설명]: {difficulty_custom}"
+        
+        # 그래픽
+        if graphic_opt and graphic_opt != "선택안함":
+            final_prompt += f"\n[그래픽]: {graphic_opt}"
+        if graphic_custom.strip():
+            final_prompt += f"\n[그래픽 추가설명]: {graphic_custom}"
+        
+        # 게임 메커닉
+        if mechanic_opt and mechanic_opt != "선택안함":
+            final_prompt += f"\n[게임 메커닉]: {mechanic_opt}"
+        if mechanic_custom.strip():
+            final_prompt += f"\n[게임 메커닉 추가설명]: {mechanic_custom}"
+        
+        # 게임 관점(뷰)
+        if view_opt and view_opt != "선택안함":
+            final_prompt += f"\n[게임 관점(뷰)]: {view_opt}"
+        if view_custom.strip():
+            final_prompt += f"\n[게임 관점(뷰) 추가설명]: {view_custom}"
+        
+        return final_prompt
 
 def remove_code_block(text):
     pattern = r'```html\n(.+?)\n```'
@@ -544,175 +610,6 @@ def create_template_html(title, items):
     </div>
     """
     return gr.HTML(value=html_content)
-    
-# 전역 변수로 템플릿 데이터 캐시
-TEMPLATE_CACHE = None
-
-def load_session_history(template_type="best"):
-    global TEMPLATE_CACHE
-    
-    try:
-        json_data = load_json_data()
-        
-        # 데이터를 세 섹션으로 나누기
-        templates = {
-            "best": json_data[:12],
-            "trending": json_data[12:24],
-            "new": json_data[24:44]
-        }
-        
-        titles = {
-            "best": "🏆 베스트 게임 템플릿",
-            "trending": "🔥 트렌딩 게임 템플릿",
-            "new": "✨ NEW 게임 템플릿"
-        }
-        
-        html_content = """
-        <style>
-            .template-nav {
-                display: flex;
-                gap: 10px;
-                margin: 20px;
-                position: sticky;
-                top: 0;
-                background: white;
-                z-index: 100;
-                padding: 10px 0;
-                border-bottom: 1px solid #eee;
-            }
-            .template-btn {
-                padding: 8px 16px;
-                border: 1px solid #1890ff;
-                border-radius: 4px;
-                cursor: pointer;
-                background: white;
-                color: #1890ff;
-                font-weight: bold;
-                transition: all 0.3s;
-            }
-            .template-btn:hover {
-                background: #1890ff;
-                color: white;
-            }
-            .template-btn.active {
-                background: #1890ff;
-                color: white;
-            }
-            .prompt-grid {
-                display: grid;
-                grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-                gap: 20px;
-                padding: 20px;
-            }
-            .prompt-card {
-                background: white;
-                border: 1px solid #eee;
-                border-radius: 8px;
-                padding: 15px;
-                cursor: pointer;
-                box-shadow: 0 2px 5px rgba(0,0,0,0.1);
-            }
-            .prompt-card:hover {
-                transform: translateY(-2px);
-                transition: transform 0.2s;
-            }
-            .card-image {
-                width: 100%;
-                height: 180px;
-                object-fit: cover;
-                border-radius: 4px;
-                margin-bottom: 10px;
-            }
-            .card-name {
-                font-weight: bold;
-                margin-bottom: 8px;
-                font-size: 16px;
-                color: #333;
-            }
-            .card-prompt {
-                font-size: 11px;
-                line-height: 1.4;
-                color: #666;
-                display: -webkit-box;
-                -webkit-line-clamp: 6;
-                -webkit-box-orient: vertical;
-                overflow: hidden;
-                height: 90px;
-                background-color: #f8f9fa;
-                padding: 8px;
-                border-radius: 4px;
-            }
-            .template-section {
-                display: none;
-            }
-            .template-section.active {
-                display: block;
-            }
-        </style>
-        <div class="template-nav">
-            <button class="template-btn" onclick="showTemplate('best')">🏆 베스트</button>
-            <button class="template-btn" onclick="showTemplate('trending')">🔥 트렌딩</button>
-            <button class="template-btn" onclick="showTemplate('new')">✨ NEW</button>
-        </div>
-        """
-
-        # 각 섹션의 템플릿 생성
-        for section, items in templates.items():
-            html_content += f"""
-            <div class="template-section" id="{section}-templates">
-                <div class="prompt-grid">
-            """
-            for item in items:
-                html_content += f"""
-                <div class="prompt-card" onclick="copyToInput(this)" data-prompt="{html.escape(item.get('prompt', ''))}">
-                    <img src="{item.get('image_url', '')}" class="card-image" loading="lazy" alt="{html.escape(item.get('name', ''))}">
-                    <div class="card-name">{html.escape(item.get('name', ''))}</div>
-                    <div class="card-prompt">{html.escape(item.get('prompt', ''))}</div>
-                </div>
-                """
-            html_content += "</div></div>"
-
-        html_content += """
-        <script>
-        function copyToInput(card) {
-            const prompt = card.dataset.prompt;
-            const textarea = document.querySelector('.ant-input-textarea-large textarea');
-            if (textarea) {
-                textarea.value = prompt;
-                textarea.dispatchEvent(new Event('input', { bubbles: true }));
-                document.querySelector('.session-drawer .close-btn').click();
-            }
-        }
-        
-        function showTemplate(type) {
-            // 모든 섹션 숨기기
-            document.querySelectorAll('.template-section').forEach(section => {
-                section.style.display = 'none';
-            });
-            // 모든 버튼 비활성화
-            document.querySelectorAll('.template-btn').forEach(btn => {
-                btn.classList.remove('active');
-            });
-            
-            // 선택된 섹션 보이기
-            document.getElementById(type + '-templates').style.display = 'block';
-            // 선택된 버튼 활성화
-            event.target.classList.add('active');
-        }
-        
-        // 초기 로드시 베스트 템플릿 표시
-        document.addEventListener('DOMContentLoaded', function() {
-            showTemplate('best');
-            document.querySelector('.template-btn').classList.add('active');
-        });
-        </script>
-        """
-        
-        return gr.HTML(value=html_content)
-        
-    except Exception as e:
-        print(f"Error in load_session_history: {str(e)}")
-        return gr.HTML("Error loading templates")
 
 def generate_space_name():
     """6자리 랜덤 영문 이름 생성"""
@@ -725,9 +622,7 @@ def deploy_to_vercel(code: str):
         if not token:
             return "Vercel 토큰이 설정되지 않았습니다."
 
-        # 6자리 영문 프로젝트 이름 생성
         project_name = ''.join(random.choice(string.ascii_lowercase) for i in range(6))
-
         deploy_url = "https://api.vercel.com/v13/deployments"
 
         headers = {
@@ -861,57 +756,80 @@ with gr.Blocks(css_paths="app.css", theme=theme) as demo:
 
     with ms.Application() as app:
         with antd.ConfigProvider():
-            with antd.Drawer(open=False, title="code", placement="left", width="750px") as code_drawer:
-                code_output = legacy.Markdown()
-    
-            with antd.Drawer(open=False, title="history", placement="left", width="900px") as history_drawer:
-                history_output = legacy.Chatbot(show_label=False, flushing=False, height=960, elem_classes="history_chatbot")
-
-            with antd.Drawer(
-                open=False, 
-                title="Templates", 
-                placement="right",
-                width="900px",
-                elem_classes="session-drawer"
-            ) as session_drawer:
-                with antd.Flex(vertical=True, gap="middle"):
-                    gr.Markdown("### Available Game Templates")
-                    session_history = gr.HTML(
-                        elem_classes="session-history"
+            # -- 좌측 상단 설명 박스 제거: 기존 header 부분 삭제 --
+
+            # -- 상단에 "옵션" 구성 추가 --
+            with antd.Collapse(
+                accordion=True,
+                default_active_key=[],
+                title="옵션 설정 (선택 시 프롬프트에 자동 반영)",
+                ghost=True
+            ) as options_panel:
+                with antd.CollapsePanel(header="게임 장르", key="genre"):
+                    genre_option = antd.RadioGroup(
+                        choices=["선택안함", "아케이드", "퍼즐", "액션", "전략", "캐주얼"],
+                        default_value="선택안함"
+                    )
+                    genre_custom = antd.Input(
+                        placeholder="장르에 대한 추가 요구사항을 입력해보세요 (선택)",
+                        allow_clear=True,
+                        size="small"
+                    )
+
+                with antd.CollapsePanel(header="난이도", key="difficulty"):
+                    difficulty_option = antd.RadioGroup(
+                        choices=["선택안함", "고정", "진행", "선택", "레벨"],
+                        default_value="선택안함"
+                    )
+                    difficulty_custom = antd.Input(
+                        placeholder="난이도에 대한 추가 요구사항을 입력해보세요 (선택)",
+                        allow_clear=True,
+                        size="small"
+                    )
+
+                with antd.CollapsePanel(header="그래픽", key="graphic"):
+                    graphic_option = antd.RadioGroup(
+                        choices=["선택안함", "미니멀", "픽셀", "카툰", "플랫"],
+                        default_value="선택안함"
+                    )
+                    graphic_custom = antd.Input(
+                        placeholder="그래픽 스타일에 대한 추가 요구사항 (선택)",
+                        allow_clear=True,
+                        size="small"
                     )
-                    close_btn = antd.Button(
-                        "Close",
-                        type="default",
-                        elem_classes="close-btn"
+
+                with antd.CollapsePanel(header="게임 메커닉", key="mechanic"):
+                    mechanic_option = antd.RadioGroup(
+                        choices=["선택안함", "타이밍", "충돌", "타일", "물리"],
+                        default_value="선택안함"
+                    )
+                    mechanic_custom = antd.Input(
+                        placeholder="게임 메커닉 추가 요구사항 (선택)",
+                        allow_clear=True,
+                        size="small"
+                    )
+
+                with antd.CollapsePanel(header="게임 관점(뷰)", key="view"):
+                    view_option = antd.RadioGroup(
+                        choices=["선택안함", "탑다운", "사이드뷰", "아이소메트릭", "1인칭", "고정 화면"],
+                        default_value="선택안함"
+                    )
+                    view_custom = antd.Input(
+                        placeholder="게임 뷰에 대한 추가 요구사항 (선택)",
+                        allow_clear=True,
+                        size="small"
                     )
 
             with antd.Row(gutter=[32, 12]) as layout:    
                 with antd.Col(span=24, md=8):
                     with antd.Flex(vertical=True, gap="middle", wrap=True):
-                        header = gr.HTML(f"""
-                            <div class="left_header">
-                                <img src="data:image/gif;base64,{get_image_base64('gamelogo.gif')}" width="360px" />
-                                <h1 style="font-size: 18px;">MOUSE-I: Web Game Creator & Deployer</h1>
-                                <h1 style="font-size: 10px;">
-                                    게임 템플릿의 프롬프트를 복사하고 SEND를 클릭하면 코드가 생성됩니다.
-                                    생성된 코드로 '배포' 버튼을 누르면 글로벌 클라우드(VERCEL)에 자동 배포됩니다. 
-                                    생성된 코드만 프롬프트에 붙여넣고 'Code실행'을 누르면 즉시 게임을 미리보기로 실행할 수 있습니다.
-                                    문의: [email protected]
-                                </h1>
-                                <h1 style="font-size: 12px; margin-top: 10px;">
-                                    <a href="https://discord.gg/openfreeai" target="_blank" style="color: #0084ff; text-decoration: none; transition: color 0.3s;" onmouseover="this.style.color='#00a3ff'" onmouseout="this.style.color='#0084ff'">
-                                        🎨 커뮤니티 바로가기 클릭
-                                    </a>
-                                </h1>
-                            </div>
-                        """)
-
-                        input = antd.InputTextarea(
+                        # 메인 프롬프트 입력
+                        input_prompt = antd.InputTextarea(
                             size="large", 
                             allow_clear=True, 
                             placeholder=random.choice(DEMO_LIST)['description']
                         )
-        
+
                         with antd.Flex(gap="small", justify="space-between"):
                             btn = antd.Button("Send", type="primary", size="large")
                             boost_btn = antd.Button("Boost", type="default", size="large")
@@ -957,7 +875,7 @@ with gr.Blocks(css_paths="app.css", theme=theme) as demo:
 
             execute_btn.click(
                 fn=execute_code,
-                inputs=[input],
+                inputs=[input_prompt],
                 outputs=[sandbox, state_tab]
             )
 
@@ -1015,7 +933,16 @@ with gr.Blocks(css_paths="app.css", theme=theme) as demo:
 
             btn.click(
                 demo_instance.generation_code,
-                inputs=[input, setting, history],
+                inputs=[
+                    input_prompt, 
+                    setting, 
+                    history,
+                    genre_option, genre_custom,
+                    difficulty_option, difficulty_custom,
+                    graphic_option, graphic_custom,
+                    mechanic_option, mechanic_custom,
+                    view_option, view_custom
+                ],
                 outputs=[code_output, history, sandbox, state_tab, code_drawer]
             )
 
@@ -1027,8 +954,8 @@ with gr.Blocks(css_paths="app.css", theme=theme) as demo:
 
             boost_btn.click(
                 fn=handle_boost,
-                inputs=[input],
-                outputs=[input, state_tab]
+                inputs=[input_prompt],
+                outputs=[input_prompt, state_tab]
             )
 
             deploy_btn.click(