Update app.py

app.py

@@ -457,7 +457,8 @@ def get_random_placeholder():
 
 def update_placeholder():
     return gr.update(placeholder=get_random_placeholder())
-    
+
+
 def create_main_interface():
     """메인 인터페이스 생성 함수"""
     
@@ -480,19 +481,112 @@ def create_main_interface():
     with open('app.css', 'r', encoding='utf-8') as f:
         custom_css = f.read()
 
-    demo = gr.Blocks(css=custom_css, theme=theme)
+    demo = gr.Blocks(css=custom_css + """
+        .container {
+            background: #f0f0f0;
+            min-height: 100vh;
+            padding: 20px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            font-family: -apple-system, BlinkMacSystemFont, sans-serif;
+        }
+        
+        .app-window {
+            background: white;
+            border-radius: 10px;
+            box-shadow: 0 20px 40px rgba(0,0,0,0.1);
+            width: 100%;
+            max-width: 1400px;
+            overflow: hidden;
+        }
+        
+        .window-header {
+            background: #f0f0f0;
+            padding: 12px 16px;
+            display: flex;
+            align-items: center;
+            border-bottom: 1px solid #e0e0e0;
+        }
+        
+        .window-controls {
+            display: flex;
+            gap: 8px;
+        }
+        
+        .control {
+            width: 12px;
+            height: 12px;
+            border-radius: 50%;
+            cursor: pointer;
+        }
+        
+        .control.close { background: #ff5f57; }
+        .control.minimize { background: #febc2e; }
+        .control.maximize { background: #28c840; }
+        
+        .window-title {
+            flex: 1;
+            text-align: center;
+            color: #333;
+            font-size: 14px;
+            font-weight: 500;
+        }
+        
+        .main-content {
+            display: flex;
+            height: calc(100vh - 100px);
+        }
+        
+        .left-panel {
+            width: 40%;
+            border-right: 1px solid #e0e0e0;
+            padding: 20px;
+            display: flex;
+            flex-direction: column;
+        }
+        
+        .right-panel {
+            width: 60%;
+            background: #fff;
+            position: relative;
+        }
+        
+        .input-area {
+            background: #f8f9fa;
+            border-radius: 10px;
+            padding: 20px;
+            margin-top: 20px;
+        }
+        
+        .button-group {
+            display: flex;
+            gap: 10px;
+            margin-top: 20px;
+        }
+        
+        .custom-button {
+            background: #007aff;
+            color: white;
+            border: none;
+            padding: 10px 20px;
+            border-radius: 6px;
+            cursor: pointer;
+            transition: all 0.2s;
+        }
+        
+        .custom-button:hover {
+            background: #0056b3;
+        }
+    """, theme=theme)
 
     with demo:
         with gr.Tabs(elem_classes="main-tabs") as tabs:
             with gr.Tab("Visual AI Assistant", elem_id="mouse-tab", elem_classes="mouse-tab"):
-                history = gr.State([])
-                setting = gr.State({
-                    "system": SystemPrompt,
-                })
-
                 with ms.Application() as app:
                     with antd.ConfigProvider():
-                        # Drawer 컴포넌트들    
+
+# Drawer 컴포넌트
                         with antd.Drawer(open=False, title="AI is Creating...", placement="left", width="750px") as code_drawer:
                             gr.HTML("""
                                 <div class="thinking-container">
@@ -502,7 +596,7 @@ def create_main_interface():
                                             padding: 20px;
                                             background: #f8f9fa;
                                             border-radius: 15px;
-                                            font-family: 'Arial', sans-serif;
+                                            font-family: -apple-system, BlinkMacSystemFont, sans-serif;
                                         }
                                         
                                         .progress-bar {
@@ -517,7 +611,7 @@ def create_main_interface():
                                         .progress-bar-inner {
                                             width: 30%;
                                             height: 100%;
-                                            background: linear-gradient(90deg, #1890ff, #52c41a);
+                                            background: linear-gradient(90deg, #007aff, #28c840);
                                             animation: progress 2s ease-in-out infinite;
                                         }
                                         
@@ -536,13 +630,8 @@ def create_main_interface():
                                             transition: all 0.3s ease;
                                         }
                                         
-                                        .tip-box:hover {
-                                            transform: translateY(-5px);
-                                            box-shadow: 0 6px 16px rgba(0,0,0,0.15);
-                                        }
-                                        
                                         .status-text {
-                                            color: #1890ff;
+                                            color: #007aff;
                                             font-size: 18px;
                                             margin: 15px 0;
                                             animation: fade 1.5s ease infinite;
@@ -557,7 +646,7 @@ def create_main_interface():
                                         
                                         .icon-item {
                                             padding: 10px;
-                                            background: rgba(24,144,255,0.1);
+                                            background: rgba(0,122,255,0.1);
                                             border-radius: 8px;
                                             animation: pulse 2s ease infinite;
                                         }
@@ -585,22 +674,18 @@ def create_main_interface():
                                     </style>
                                     
                                     <div class="thinking-icon">🎨</div>
-                                    
                                     <div class="status-text">Creating Your Visualization...</div>
-                                    
                                     <div class="progress-bar">
                                         <div class="progress-bar-inner"></div>
                                     </div>
-                                    
                                     <div class="icon-grid">
                                         <div class="icon-item">📊</div>
                                         <div class="icon-item">🎯</div>
                                         <div class="icon-item">💡</div>
                                         <div class="icon-item">✨</div>
                                     </div>
-                                    
                                     <div class="tip-box">
-                                        <h3 style="color: #1890ff; margin-bottom: 10px;">Did You Know?</h3>
+                                        <h3 style="color: #007aff; margin-bottom: 10px;">Did You Know?</h3>
                                         <div id="tip-content" style="font-size: 16px; line-height: 1.6;"></div>
                                     </div>
                                     
@@ -637,86 +722,132 @@ def create_main_interface():
                             code_output = legacy.Markdown(visible=False)
 
 
-                
-                        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="history", placement="left", width="900px") as history_drawer:
-                            history_output = legacy.Chatbot(show_label=False, flushing=False, height=960, elem_classes="history_chatbot")
-
-                        # 메인 컨텐츠를 위한 Row
+# 메인 컨텐츠를 위한 Row
                         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('mouse.gif')}" width="360px" />
-                                            <h1 style="font-size: 18px;">MOUSE-Chat: Visual AI Assistant</h1>
-                                            <h1 style="font-size: 10px;">Transform your questions into stunning visual presentations. Every response is crafted with beautiful graphics, charts, and interactive elements.</h1>
+                                    # macOS 스타일 윈도우 헤더
+                                    header = gr.HTML("""
+                                        <div class="window-frame">
+                                            <div class="window-header">
+                                                <div class="window-controls">
+                                                    <div class="control close"></div>
+                                                    <div class="control minimize"></div>
+                                                    <div class="control maximize"></div>
+                                                </div>
+                                                <div class="window-title">
+                                                    <div class="window-address">
+                                                        <div class="secure-icon">🔒</div>
+                                                        <div class="url-bar">mouse-i.visualization.app</div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                            <div class="app-content">
+                                                <img src="data:image/gif;base64,{}" width="360px" />
+                                                <h1 class="app-title">MOUSE-I: Visual AI Assistant</h1>
+                                                <p class="app-description">Transform your ideas into stunning visual presentations</p>
+                                            </div>
                                         </div>
-                                    """)
-                                    
-
+                                    """.format(get_image_base64('mouse.gif')))
 
                                     # 입력 영역
                                     input = antd.InputTextarea(
                                         size="large", 
-                                        allow_clear=True, 
-
-                                        placeholder=get_random_placeholder() 
+                                        allow_clear=True,
+                                        placeholder=get_random_placeholder(),
+                                        style={
+                                            "background": "#f8f9fa",
+                                            "border": "1px solid #e0e0e0",
+                                            "borderRadius": "10px",
+                                            "padding": "15px",
+                                            "minHeight": "150px",
+                                            "fontFamily": "-apple-system, BlinkMacSystemFont, sans-serif"
+                                        }
                                     )
  
                                     # 버튼 그룹
-                                    with antd.Flex(gap="small", justify="space-between"):
-                                        btn = antd.Button("Generate", type="primary", size="large")
-                                        boost_btn = antd.Button("Enhance", type="default", size="large")
-                                        deploy_btn = antd.Button("Share", type="default", size="large")
-                                        clear_btn = antd.Button("Clear", type="default", size="large")
-                                        historyBtn = antd.Button("📜 History", type="default")
-                                        
-
+                                    with antd.Flex(gap="small", justify="flex-start"):
+                                        btn = antd.Button(
+                                            "Generate", 
+                                            type="primary", 
+                                            size="large",
+                                            style={
+                                                "background": "#007aff",
+                                                "borderRadius": "8px",
+                                                "boxShadow": "0 2px 4px rgba(0,0,0,0.1)"
+                                            }
+                                        )
+                                        boost_btn = antd.Button(
+                                            "Enhance", 
+                                            type="default", 
+                                            size="large",
+                                            style={
+                                                "borderRadius": "8px",
+                                                "border": "1px solid #007aff",
+                                                "color": "#007aff"
+                                            }
+                                        )
+                                        deploy_btn = antd.Button(
+                                            "Share", 
+                                            type="default", 
+                                            size="large",
+                                            style={
+                                                "borderRadius": "8px",
+                                                "border": "1px solid #28c840",
+                                                "color": "#28c840"
+                                            }
+                                        )
 
-                                    deploy_result = gr.HTML(label="배포 결과")
+                                    deploy_result = gr.HTML(
+                                        label="Share Result",
+                                        elem_classes="deploy-result"
+                                    )
 
                             # 우측 패널
                             with antd.Col(span=24, md=16):
                                 with ms.Div(elem_classes="right_panel"):
-                                    # 상단 버튼들
-                                    with antd.Flex(gap="small", elem_classes="setting-buttons"):
-                                        historyBtn = antd.Button("📜 히스토리", type="default")
-
-                                    gr.HTML('<div class="render_header"><span class="header_btn"></span><span class="header_btn"></span><span class="header_btn"></span></div>')
+                                    # macOS 스타일 윈도우 헤더
+                                    gr.HTML("""
+                                        <div class="window-frame">
+                                            <div class="window-header">
+                                                <div class="window-controls">
+                                                    <div class="control close"></div>
+                                                    <div class="control minimize"></div>
+                                                    <div class="control maximize"></div>
+                                                </div>
+                                                <div class="window-title">Preview</div>
+                                            </div>
+                                        </div>
+                                    """)
 
                                     # 탭 컨텐츠
                                     with antd.Tabs(active_key="empty", render_tab_bar="() => null") as state_tab:
                                         with antd.Tabs.Item(key="empty"):
-
-                                            empty = antd.Empty(description="Enter your question to begin", elem_classes="right_content")
-                            
+                                            empty = antd.Empty(
+                                                description="Enter your question to begin",
+                                                elem_classes="right_content",
+                                                style={
+                                                    "padding": "40px",
+                                                    "background": "#f8f9fa",
+                                                    "borderRadius": "10px",
+                                                    "margin": "20px"
+                                                }
+                                            )
+                                        
                                         with antd.Tabs.Item(key="loading"):
-                                            loading = antd.Spin(True, tip="Creating visual presentation...", size="large", elem_classes="right_content")
+                                            loading = antd.Spin(
+                                                True,
+                                                tip="Creating visual presentation...",
+                                                size="large",
+                                                elem_classes="right_content"
+                                            )
+                                        
                                         with antd.Tabs.Item(key="render"):
                                             sandbox = gr.HTML(elem_classes="html_content")
+                            
 
-
-
-                        
-                        # 이벤트 핸들러 연결
-                        historyBtn.click(
-                            history_render,
-                            inputs=[history],
-                            outputs=[history_drawer, history_output]
-                        )
-
-                        history_drawer.close(
-                            lambda: gr.update(open=False),
-                            inputs=[],
-                            outputs=[history_drawer]
-                        )
-
+# 이벤트 핸들러 연결
                         btn.click(
                             demo_instance.generation_code,
                             inputs=[input, setting, history],
@@ -726,18 +857,6 @@ def create_main_interface():
                             inputs=[],
                             outputs=[input]
                         )
-                        
-
-
-                        clear_btn.click(
-                            fn=lambda: (
-                            demo_instance.clear_history(),  # history 초기화
-                            update_placeholder()  # placeholder 업데이트
-                        ),
-                        inputs=[],
-                        outputs=[history, input]  # input도 출력에 추가
-                        )
-
 
                         boost_btn.click(
                             fn=handle_boost,
@@ -746,11 +865,67 @@ def create_main_interface():
                         )
 
                         deploy_btn.click(
-                            fn=lambda code: deploy_to_vercel(remove_code_block(code)) if code else "코드가 없습니다.",
+                            fn=lambda code: deploy_to_vercel(remove_code_block(code)) if code else "No code to share.",
                             inputs=[code_output],
                             outputs=[deploy_result]
                         )
 
+    # 추가 스타일 적용
+    gr.HTML("""
+        <style>
+            .app-content {
+                padding: 20px;
+                text-align: center;
+            }
+            
+            .app-title {
+                font-size: 24px;
+                color: #333;
+                margin: 20px 0 10px;
+                font-weight: 600;
+            }
+            
+            .app-description {
+                color: #666;
+                font-size: 14px;
+                margin-bottom: 30px;
+            }
+            
+            .deploy-result {
+                margin-top: 20px;
+                padding: 15px;
+                background: #f8f9fa;
+                border-radius: 8px;
+                font-family: -apple-system, BlinkMacSystemFont, sans-serif;
+            }
+            
+            .deploy-result a {
+                color: #007aff;
+                text-decoration: none;
+                font-weight: 500;
+            }
+            
+            .deploy-result a:hover {
+                text-decoration: underline;
+            }
+            
+            /* 반응형 디자인을 위한 미디어 쿼리 */
+            @media (max-width: 768px) {
+                .window-frame {
+                    border-radius: 0;
+                }
+                
+                .left-panel, .right-panel {
+                    width: 100%;
+                }
+                
+                .main-content {
+                    flex-direction: column;
+                }
+            }
+        </style>
+    """)
+
     return demo
 
 # 메인 실행 부분
@@ -758,7 +933,19 @@ if __name__ == "__main__":
     try:
         demo_instance = Demo()  # Demo 인스턴스 생성
         demo = create_main_interface()  # 인터페이스 생성
-        demo.queue(default_concurrency_limit=20).launch(server_name="0.0.0.0", server_port=7860)  # 서버 설정 추가
+        demo.queue(
+            concurrency_count=20,
+            status_update_rate=10,
+            api_open=False
+        ).launch(
+            server_name="0.0.0.0",
+            server_port=7860,
+            share=False,
+            debug=False
+        )
     except Exception as e:
         print(f"Initialization error: {e}")
-        raise
+        raise
+
+
+