Update app.py

app.py

@@ -258,7 +258,7 @@ 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']
+            query = get_random_placeholder()
         
         if _history is None:
             _history = []
@@ -281,8 +281,9 @@ class Demo:
         openai_messages.append({"role": "user", "content": query})
         
         try:
+            # 로딩 시작
             yield [
-                "Generating code...",
+                "",  # 빈 문자열로 변경 (코드 출력하지 않음)
                 _history,
                 None,
                 gr.update(active_key="loading"),
@@ -294,28 +295,28 @@ class Demo:
             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
-                
+                    collected_content = content
+                    
             except Exception as claude_error:
                 print(f"Falling back to OpenAI API due to Claude error: {str(claude_error)}")
                 
                 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
+                    collected_content = content
 
             if collected_content:
                 _history = messages_to_history([
@@ -325,13 +326,13 @@ class Demo:
                     'content': collected_content
                 }])
         
-        # code_drawer를 닫도록 수정
+                # 최종 결과만 표시
                 yield [
                     collected_content,
                     _history,
                     send_to_sandbox(remove_code_block(collected_content)),
                     gr.update(active_key="render"),
-                    gr.update(open=False)  # code_drawer를 닫음
+                    gr.update(open=False)
                 ]
 
             else:
@@ -483,9 +484,7 @@ def create_main_interface():
 
     with demo:
         with gr.Tabs(elem_classes="main-tabs") as tabs:
-            # MOUSE 탭
             with gr.Tab("Visual AI Assistant", elem_id="mouse-tab", elem_classes="mouse-tab"):
-
                 history = gr.State([])
                 setting = gr.State({
                     "system": SystemPrompt,
@@ -494,8 +493,89 @@ def create_main_interface():
                 with ms.Application() as app:
                     with antd.ConfigProvider():
                         # Drawer 컴포넌트들      
-                        with antd.Drawer(open=False, title="Thinking", placement="left", width="750px") as code_drawer:
-                            code_output = legacy.Markdown()
+                        with antd.Drawer(open=False, title="AI is Creating...", placement="left", width="750px") as code_drawer:
+                            gr.HTML("""
+                                <div class="thinking-container">
+                                    <div class="thinking-animation">
+                                        <lottie-player
+                                            src="https://assets2.lottiefiles.com/packages/lf20_szviypry.json"
+                                            background="transparent"
+                                            speed="1"
+                                            style="width: 300px; height: 300px;"
+                                            loop
+                                            autoplay>
+                                        </lottie-player>
+                                    </div>
+                                    
+                                    <div class="thinking-tips" id="thinkingTips">
+                                        <h3>Did you know?</h3>
+                                        <div class="tip-content"></div>
+                                    </div>
+                                    
+                                    <style>
+                                        .thinking-container {
+                                            text-align: center;
+                                            padding: 20px;
+                                            font-family: 'Arial', sans-serif;
+                                        }
+                                        
+                                        .thinking-animation {
+                                            margin-bottom: 30px;
+                                        }
+                                        
+                                        .thinking-tips {
+                                            background: #f5f5f5;
+                                            padding: 20px;
+                                            border-radius: 10px;
+                                            margin-top: 20px;
+                                        }
+                                        
+                                        .thinking-tips h3 {
+                                            color: #1890ff;
+                                            margin-bottom: 15px;
+                                        }
+                                        
+                                        .tip-content {
+                                            font-size: 16px;
+                                            line-height: 1.6;
+                                            color: #333;
+                                        }
+                                    </style>
+                                    
+                                    <script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
+                                    <script>
+                                        const tips = [
+                                            "MOUSE-I can create interactive visualizations using Chart.js and D3.js! 📊",
+                                            "Our AI understands and implements modern design principles for better user experience. 🎨",
+                                            "Every visualization is responsive and works on all devices! 📱",
+                                            "We use advanced animations to make your data come alive! ✨",
+                                            "MOUSE-I can create beautiful presentations in multiple styles! 🎯",
+                                            "Your visualization is being crafted with attention to every detail! 🔍",
+                                            "We're adding interactive elements to make your content engaging! 🎮",
+                                            "MOUSE-I is optimizing the layout for the best visual experience! 🎪"
+                                        ];
+                                        
+                                        function updateTip() {
+                                            const tipElement = document.querySelector('.tip-content');
+                                            if (tipElement) {
+                                                const randomTip = tips[Math.floor(Math.random() * tips.length)];
+                                                tipElement.innerHTML = randomTip;
+                                            }
+                                        }
+                                        
+                                        // 초기 팁 설정
+                                        updateTip();
+                                        
+                                        // 3초마다 팁 업데이트
+                                        setInterval(updateTip, 3000);
+                                    </script>
+                                </div>
+                            """)
+                            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")