Update app-backup1.py

app-backup1.py

@@ -1,5 +1,6 @@
 import os
 import re
+import random
 from http import HTTPStatus
 from typing import Dict, List, Optional, Tuple
 import base64
@@ -12,7 +13,6 @@ import modelscope_studio.components.legacy as legacy
 import modelscope_studio.components.antd as antd
 from config import DEMO_LIST, SystemPrompt
 
-# 파일 상단의 import 문 아래에 추가
 def get_image_base64(image_path):
     with open(image_path, "rb") as image_file:
         encoded_string = base64.b64encode(image_file.read()).decode()
@@ -62,17 +62,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>"
 
-
-
-DEMO_CACHE = {}
-
-def demo_card_click(e: gr.EventData):
-    index = e._data['component']['index']
-    if index not in DEMO_CACHE:
-        DEMO_CACHE[index] = DEMO_LIST[index]['description']
-    return DEMO_CACHE[index]
-
-
 with gr.Blocks(css_paths="app.css") as demo:
     history = gr.State([])
     setting = gr.State({
@@ -80,8 +69,9 @@ with gr.Blocks(css_paths="app.css") as demo:
     })
 
     def generation_code(query: Optional[str], _setting: Dict[str, str], _history: Optional[History]):
-        if query is None:
-            query = ''
+        if not query or query.strip() == '':
+            query = random.choice(DEMO_LIST)['description']  # 빈 쿼리일 경우 랜덤 예제 사용
+        
         if _history is None:
             _history = []
         
@@ -91,19 +81,18 @@ with gr.Blocks(css_paths="app.css") as 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}]
+            if msg["content"].strip() != ''  # 빈 메시지 필터링
         ]
         
         try:
-            # 중간 상태 표시
             yield [
-                "Generating code...",  # code_output
-                _history,              # history
-                None,                  # sandbox
-                gr.update(active_key="loading"),  # state_tab
-                gr.update(open=True)   # code_drawer
+                "Generating code...",
+                _history,
+                None,
+                gr.update(active_key="loading"),
+                gr.update(open=True)
             ]
-
-            # 스트리밍 응답 사용
+    
             with client.messages.stream(
                 model="claude-3-5-sonnet-20241022",
                 max_tokens=7800,
@@ -117,38 +106,39 @@ with gr.Blocks(css_paths="app.css") as demo:
                         collected_content += delta
                         
                         yield [
-                            collected_content,  # code_output
-                            _history,          # history
-                            None,              # sandbox (아직 완성되지 않았으므로 None)
-                            gr.update(active_key="loading"),  # state_tab
-                            gr.update(open=True)  # code_drawer
+                            collected_content,
+                            _history,
+                            None,
+                            gr.update(active_key="loading"),
+                            gr.update(open=True)
                         ]
-                
-                # 최종 결과 반환
+            
                 _history = messages_to_history([
                     {'role': Role.SYSTEM, 'content': system_message}
                 ] + claude_messages + [{
                     'role': Role.ASSISTANT,
-                    'content': collected_content
+                'content': collected_content
                 }])
-                
+            
                 yield [
-                    collected_content,  # code_output
-                    _history,          # history
-                    send_to_sandbox(remove_code_block(collected_content)),  # sandbox
-                    gr.update(active_key="render"),  # state_tab
-                    gr.update(open=True)  # code_drawer
+                    collected_content,
+                    _history,
+                    send_to_sandbox(remove_code_block(collected_content)),
+                    gr.update(active_key="render"),
+                    gr.update(open=True)
                 ]
-            
+        
         except Exception as e:
+            print(f"Error details: {str(e)}")  # 디버깅을 위한 에러 출력
             raise ValueError(f'Error calling Claude API: {str(e)}')
-
+    
+   
 
     with ms.Application() as app:
         with antd.ConfigProvider():
-            # 메인 컨텐츠를 위한 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"""
@@ -160,13 +150,27 @@ with gr.Blocks(css_paths="app.css") as demo:
                         input = antd.InputTextarea(
                             size="large", 
                             allow_clear=True, 
-                            placeholder="Please enter what kind of application you want"
+                            placeholder=random.choice(DEMO_LIST)['description']
                         )
 
                         btn = antd.Button("send", type="primary", size="large")
                         clear_btn = antd.Button("clear history", type="default", size="large")
 
-                    # Modal과 Drawer 컴포넌트들
+        # Examples 버튼 추가
+                        antd.Divider("Try this example")
+                        example_btn = antd.Button(
+                            "다이나믹 차트 대쉬보드", 
+                            type="default",
+                            block=True,  # 전체 너비 사용
+                            size="large"
+                        )
+                        example_btn.click(
+                            fn=lambda: "Create an interactive dashboard with Chart.js showing different types of charts (line, bar, pie) with smooth animations. Include buttons to switch between different data views.",
+                            inputs=[],
+                            outputs=[input]
+                        )
+
+
                     with antd.Modal(open=False, title="set system Prompt", width="800px") as system_prompt_modal:
                         systemPromptInput = antd.InputTextarea(
                             SystemPrompt, auto_size=True)
@@ -177,7 +181,6 @@ with gr.Blocks(css_paths="app.css") as demo:
                     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.Col(span=24, md=16):
                     with ms.Div(elem_classes="right_panel"):
                         with antd.Flex(gap="small", elem_classes="setting-buttons"):
@@ -190,23 +193,11 @@ with gr.Blocks(css_paths="app.css") as demo:
                         with antd.Tabs(active_key="empty", render_tab_bar="() => null") as state_tab:
                             with antd.Tabs.Item(key="empty"):
                                 empty = antd.Empty(description="empty input", elem_classes="right_content")
-                                with antd.Tabs.Item(key="loading"):
-                                    loading = antd.Spin(True, tip="coding...", size="large", elem_classes="right_content")
-                                with antd.Tabs.Item(key="render"):
-                                    sandbox = gr.HTML(elem_classes="html_content")
-
-            # Examples 섹션을 별도의 Row로 추가 (전체 화면 하단)
-            with antd.Row(gutter=[0, 24], elem_classes="examples-section"):
-                with antd.Col(span=24):
-                    antd.Divider("examples")
-                    with antd.Row(gutter=[16, 16]):
-                        with ms.Each(DEMO_LIST):
-                            with antd.Col(span=8):  # 한 줄에 3개씩 (24/3 = 8)
-                                with antd.Card(hoverable=True, as_item="card") as demoCard:
-                                    antd.CardMeta()
-                                demoCard.click(demo_card_click, outputs=[input])
-                                
-            # 버튼 이벤트 핸들러
+                            with antd.Tabs.Item(key="loading"):
+                                loading = antd.Spin(True, tip="coding...", size="large", elem_classes="right_content")
+                            with antd.Tabs.Item(key="render"):
+                                sandbox = gr.HTML(elem_classes="html_content")
+
             settingPromptBtn.click(lambda: gr.update(
                 open=True), inputs=[], outputs=[system_prompt_modal])
             system_prompt_modal.ok(lambda input: ({"system": input}, gr.update(
@@ -231,6 +222,5 @@ with gr.Blocks(css_paths="app.css") as demo:
             
             clear_btn.click(clear_history, inputs=[], outputs=[history])
 
-
 if __name__ == "__main__":
     demo.queue(default_concurrency_limit=20).launch(ssr_mode=False)