Update app.py

app.py

@@ -122,7 +122,7 @@ def messages_to_history(messages: Messages) -> History:
 
 # API 클라이언트 초기화
 YOUR_ANTHROPIC_TOKEN = os.getenv('ANTHROPIC_API_KEY', '').strip()
-YOUR_OPENAI_TOKEN    = os.getenv('OPENAI_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)
@@ -146,9 +146,7 @@ async def try_claude_api(system_message, claude_messages, timeout=15):
                     collected_content += chunk.delta.text
                     yield collected_content
                     await asyncio.sleep(0)
-                
                 start_time = current_time
-                
     except Exception as e:
         print(f"Claude API error: {str(e)}")
         raise e
@@ -168,7 +166,6 @@ 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
-                
     except Exception as e:
         print(f"OpenAI API error: {str(e)}")
         raise e
@@ -191,6 +188,10 @@ class Demo:
                               mechanic_custom: str,
                               view_option: str,
                               view_custom: str):
+        """
+        옵션(장르/난이도/그래픽/메커닉/뷰)과 메인 프롬프트를 합쳐 최종 명령을 구성한 뒤,
+        Claude -> OpenAI 순으로 코드 생성을 시도합니다.
+        """
         # 1) 최종 프롬프트 결합
         final_prompt = self.combine_options(user_prompt,
                                             genre_option, genre_custom,
@@ -199,6 +200,7 @@ class Demo:
                                             mechanic_option, mechanic_custom,
                                             view_option, view_custom)
         
+        # 기본 입력이 비어 있으면 임의 DEMO_LIST 중 하나를 사용
         if not final_prompt.strip():
             final_prompt = random.choice(DEMO_LIST)['description']
         
@@ -209,7 +211,7 @@ class Demo:
         system_message = messages[0]['content']
         
         claude_messages = [
-            {"role": msg["role"] if msg["role"] != "system" else "user", "content": msg["content"]} 
+            {"role": msg["role"] if msg["role"] != "system" else "user", "content": msg["content"]}
             for msg in messages[1:] + [{'role': Role.USER, 'content': final_prompt}]
             if msg["content"].strip() != ''
         ]
@@ -223,6 +225,7 @@ class Demo:
         openai_messages.append({"role": "user", "content": final_prompt})
         
         try:
+            # 첫 yield (로딩 상태)
             yield [
                 "Generating code...",
                 _history,
@@ -234,6 +237,7 @@ class Demo:
 
             collected_content = None
             try:
+                # Claude 시도
                 async for content in try_claude_api(system_message, claude_messages):
                     yield [
                         content,
@@ -248,6 +252,7 @@ class Demo:
             except Exception as claude_error:
                 print(f"Falling back to OpenAI API due to Claude error: {str(claude_error)}")
                 
+                # OpenAI 시도
                 async for content in try_openai_api(openai_messages):
                     yield [
                         content,
@@ -260,6 +265,7 @@ class Demo:
                 collected_content = content
 
             if collected_content:
+                # 히스토리 업데이트
                 _history = messages_to_history([
                     {'role': Role.SYSTEM, 'content': system_message}
                 ] + claude_messages + [{
@@ -267,6 +273,7 @@ class Demo:
                     'content': collected_content
                 }])
                 
+                # 최종 결과 yield
                 yield [
                     collected_content,
                     _history,
@@ -292,9 +299,7 @@ class Demo:
                         mechanic_opt, mechanic_custom,
                         view_opt, view_custom):
         """
-        사용자가 선택한 옵션 및 커스텀 내용을 base_prompt에 합쳐서 최종 프롬프트를 생성.
-        옵션이 '선택안함'이 아닐 경우 그 내용을 추가하고,
-        커스텀 입력이 비어있지 않을 경우도 추가.
+        사용자가 선택한 옵션 + 커스텀 내용 -> base_prompt에 합쳐 최종 프롬프트로 만든다.
         """
         final_prompt = base_prompt.strip()
         
@@ -346,8 +351,6 @@ def send_to_sandbox(code):
     data_uri = f"data:text/html;charset=utf-8;base64,{encoded_html}"
     return f"<iframe src=\"{data_uri}\" width=\"100%\" height=\"920px\"></iframe>"
 
-theme = gr.themes.Soft()
-
 def load_json_data():
     # 하드코딩된 데이터 반환 (게임 목록)
     return [
@@ -677,7 +680,6 @@ def deploy_to_vercel(code: str):
         deployment_url = f"{project_name}.vercel.app"
         
         time.sleep(5)
-
         return f"""배포 완료! <a href="https://{deployment_url}" target="_blank" style="color: #1890ff; text-decoration: underline; cursor: pointer;">https://{deployment_url}</a>"""
 
     except Exception as e:
@@ -756,69 +758,69 @@ with gr.Blocks(css_paths="app.css", theme=theme) as demo:
 
     with ms.Application() as app:
         with antd.ConfigProvider():
-            # -- 좌측 상단 설명 박스 제거: 기존 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"
-                    )
-
-                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"
-                    )
+            # (1) 상단 설명 박스 제거, 대신 단순 안내 문구
+            gr.Markdown("### [옵션을 선택하면 자동으로 프롬프트에 포함됩니다.]")
+
+            # (2) Collapse에 'title' 대신 Panel을 직접 구성
+            with antd.Collapse(accordion=True, default_active_key=[], ghost=True) as options_panel:
+                # 전체 옵션 제목용 Panel
+                with antd.CollapsePanel(header="옵션 설정 (선택 시 프롬프트에 자동 반영)", key="option_header"):
+                    # 세부 패널은 필요시 추가 (현재는 바로 RadioGroup 등을 사용)
+                    with antd.Collapse(accordion=True, default_active_key=[]):
+                        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"
+                            )
+
+                        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):
@@ -861,7 +863,6 @@ with gr.Blocks(css_paths="app.css", theme=theme) as demo:
             def execute_code(query: str):
                 if not query or query.strip() == '':
                     return None, gr.update(active_key="empty")
-                
                 try:
                     if '```html' in query and '```' in query:
                         code = remove_code_block(query)
@@ -885,6 +886,9 @@ with gr.Blocks(css_paths="app.css", theme=theme) as demo:
                 outputs=[code_drawer]
             )
     
+            with antd.Drawer(open=False, placement="left", width="750px") as code_drawer:
+                code_output = legacy.Markdown()
+            
             code_drawer.close(
                 lambda: gr.update(open=False),
                 inputs=[], 
@@ -894,9 +898,12 @@ with gr.Blocks(css_paths="app.css", theme=theme) as demo:
             historyBtn.click(
                 history_render,
                 inputs=[history],
-                outputs=[history_drawer, history_output]
+                outputs=[history_drawer, None]
             )
 
+            with antd.Drawer(open=False, placement="left", width="900px") as history_drawer:
+                history_output = legacy.Chatbot(show_label=False, flushing=False, height=960, elem_classes="history_chatbot")
+
             history_drawer.close(
                 lambda: gr.update(open=False),
                 inputs=[],
@@ -921,6 +928,11 @@ with gr.Blocks(css_paths="app.css", theme=theme) as demo:
                 queue=False
             )
 
+            with antd.Drawer(open=False, placement="right", width="900px", elem_classes="session-drawer") as session_drawer:
+                with antd.Flex(vertical=True, gap="middle"):
+                    session_history = gr.HTML(elem_classes="session-history")
+                    close_btn = antd.Button("Close", type="default", elem_classes="close-btn")
+
             session_drawer.close(
                 lambda: (gr.update(open=False), gr.HTML("")),
                 outputs=[session_drawer, session_history]
@@ -934,8 +946,8 @@ with gr.Blocks(css_paths="app.css", theme=theme) as demo:
             btn.click(
                 demo_instance.generation_code,
                 inputs=[
-                    input_prompt, 
-                    setting, 
+                    input_prompt,
+                    setting,
                     history,
                     genre_option, genre_custom,
                     difficulty_option, difficulty_custom,