Update app.py

app.py

@@ -1,5 +1,6 @@
 import os
 import re
+import random
 from http import HTTPStatus
 from typing import Dict, List, Optional, Tuple
 import base64
@@ -11,9 +12,7 @@ import modelscope_studio.components.base as ms
 import modelscope_studio.components.legacy as legacy
 import modelscope_studio.components.antd as antd
 from config import DEMO_LIST, SystemPrompt
-import random  # 추가
 
-# 파일 상단의 import 문 아래에 추가
 def get_image_base64(image_path):
     with open(image_path, "rb") as image_file:
         encoded_string = base64.b64encode(image_file.read()).decode()
@@ -63,18 +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({
@@ -82,13 +69,69 @@ with gr.Blocks(css_paths="app.css") as demo:
     })
 
     def generation_code(query: Optional[str], _setting: Dict[str, str], _history: Optional[History]):
-        [... generation_code 함수 내용 동일 ...]
+        if query is None:
+            query = ''
+        if _history is None:
+            _history = []
+        
+        messages = history_to_messages(_history, _setting['system'])
+        system_message = messages[0]['content']
+        
+        claude_messages = [
+            {"role": msg["role"] if msg["role"] != "system" else "user", "content": msg["content"]} 
+            for msg in messages[1:] + [{'role': Role.USER, 'content': query}]
+        ]
+        
+        try:
+            yield [
+                "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,
+                system=system_message,
+                messages=claude_messages
+            ) as stream:
+                collected_content = ""
+                for chunk in stream:
+                    if chunk.type == "content_block_delta":
+                        delta = chunk.delta.text
+                        collected_content += delta
+                        
+                        yield [
+                            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
+                }])
+                
+                yield [
+                    collected_content,
+                    _history,
+                    send_to_sandbox(remove_code_block(collected_content)),
+                    gr.update(active_key="render"),
+                    gr.update(open=True)
+                ]
+            
+        except Exception as 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"""
@@ -97,7 +140,6 @@ with gr.Blocks(css_paths="app.css") as demo:
                                      <h1 style="font-size: 20px;">AI 코딩 코파일럿: MOUSE(WEB)</h2>
                                     </div>
                                      """)
-                        # 랜덤 예제를 placeholder로 사용
                         input = antd.InputTextarea(
                             size="large", 
                             allow_clear=True, 
@@ -107,7 +149,6 @@ with gr.Blocks(css_paths="app.css") as demo:
                         btn = antd.Button("send", type="primary", size="large")
                         clear_btn = antd.Button("clear history", type="default", size="large")
 
-                    # Modal과 Drawer 컴포넌트들
                     with antd.Modal(open=False, title="set system Prompt", width="800px") as system_prompt_modal:
                         systemPromptInput = antd.InputTextarea(
                             SystemPrompt, auto_size=True)
@@ -118,7 +159,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"):
@@ -136,9 +176,6 @@ with gr.Blocks(css_paths="app.css") as demo:
                             with antd.Tabs.Item(key="render"):
                                 sandbox = gr.HTML(elem_classes="html_content")
 
-            # Examples 섹션 제거
-
-            # 버튼 이벤트 핸들러
             settingPromptBtn.click(lambda: gr.update(
                 open=True), inputs=[], outputs=[system_prompt_modal])
             system_prompt_modal.ok(lambda input: ({"system": input}, gr.update(
@@ -163,6 +200,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)