import os import re from http import HTTPStatus from typing import Dict, List, Optional, Tuple import base64 import anthropic from functools import partial import gradio as gr 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 문 아래에 추가 def get_image_base64(image_path): with open(image_path, "rb") as image_file: encoded_string = base64.b64encode(image_file.read()).decode() return encoded_string YOUR_API_TOKEN = os.getenv('ANTHROPIC_API_KEY') client = anthropic.Anthropic(api_key=YOUR_API_TOKEN) class Role: SYSTEM = "system" USER = "user" ASSISTANT = "assistant" History = List[Tuple[str, str]] Messages = List[Dict[str, str]] def history_to_messages(history: History, system: str) -> Messages: messages = [{'role': Role.SYSTEM, 'content': system}] for h in history: messages.append({'role': Role.USER, 'content': h[0]}) messages.append({'role': Role.ASSISTANT, 'content': h[1]}) return messages def messages_to_history(messages: Messages) -> History: assert messages[0]['role'] == Role.SYSTEM history = [] for q, r in zip(messages[1::2], messages[2::2]): history.append([q['content'], r['content']]) return history def remove_code_block(text): pattern = r'```html\n(.+?)\n```' match = re.search(pattern, text, re.DOTALL) if match: return match.group(1).strip() else: return text.strip() def history_render(history: History): return gr.update(open=True), history def clear_history(): return [] def send_to_sandbox(code): encoded_html = base64.b64encode(code.encode('utf-8')).decode('utf-8') data_uri = f"data:text/html;charset=utf-8;base64,{encoded_html}" return f"" 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({ "system": SystemPrompt, }) def generation_code(query: Optional[str], _setting: Dict[str, str], _history: Optional[History]): 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...", # code_output _history, # history None, # sandbox gr.update(active_key="loading"), # state_tab gr.update(open=True) # code_drawer ] # 스트리밍 응답 사용 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, # code_output _history, # history None, # sandbox (아직 완성되지 않았으므로 None) gr.update(active_key="loading"), # state_tab gr.update(open=True) # code_drawer ] # 최종 결과 반환 _history = messages_to_history([ {'role': Role.SYSTEM, 'content': system_message} ] + claude_messages + [{ 'role': Role.ASSISTANT, '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 ] 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"""

AI 코딩 코파일럿: MOUSE(WEB)

""") input = antd.InputTextarea( size="large", allow_clear=True, placeholder="Please enter what kind of application you want" ) 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) with antd.Drawer(open=False, title="code", placement="left", width="750px") as code_drawer: code_output = legacy.Markdown() 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"): settingPromptBtn = antd.Button( "⚙️ set system Prompt", type="default") codeBtn = antd.Button("🧑‍💻 view code", type="default") historyBtn = antd.Button("📜 history", type="default") gr.HTML('
') 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]) # 버튼 이벤트 핸들러 settingPromptBtn.click(lambda: gr.update( open=True), inputs=[], outputs=[system_prompt_modal]) system_prompt_modal.ok(lambda input: ({"system": input}, gr.update( open=False)), inputs=[systemPromptInput], outputs=[setting, system_prompt_modal]) system_prompt_modal.cancel(lambda: gr.update( open=False), outputs=[system_prompt_modal]) codeBtn.click(lambda: gr.update(open=True), inputs=[], outputs=[code_drawer]) code_drawer.close(lambda: gr.update( open=False), inputs=[], outputs=[code_drawer]) 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( generation_code, inputs=[input, setting, history], outputs=[code_output, history, sandbox, state_tab, code_drawer] ) clear_btn.click(clear_history, inputs=[], outputs=[history]) if __name__ == "__main__": demo.queue(default_concurrency_limit=20).launch(ssr_mode=False)