update UI/UX

app.py

@@ -65,20 +65,16 @@ def respond(
 def reset_chat():
     return None
 
-def show_settings_changed_modal(agent_type, personality, expertise_level, language):
-    return gr.Modal.update(
-        visible=True,
-        title="설정이 변경되었습니다",
-        value=f"""
-        새로운 Agent 설정:
-        - 유형: {agent_type}
-        - 성격: {personality}
-        - 설명 수준: {expertise_level}
-        - 응답 언어: {language}
-        
-        대화가 초기화되었습니다. 새로운 설정으로 대화를 시작해주세요.
-        """
-    )
+def show_settings_changed_info(agent_type, personality, expertise_level, language):
+    return f"""
+    새로운 Agent 설정:
+    - 유형: {agent_type}
+    - 성격: {personality}
+    - 설명 수준: {expertise_level}
+    - 응답 언어: {language}
+    
+    대화가 초기화되었습니다. 새로운 설정으로 대화를 시작해주세요.
+    """
 
 """
 For information on how to customize the ChatInterface, peruse the gradio docs: https://www.gradio.app/docs/chatinterface
@@ -203,14 +199,6 @@ input[type="range"] {
     width: 100%;
     margin: 10px 0;
 }
-
-/* 모달 스타일 */
-.modal {
-    background: #ffffff;
-    border-radius: 10px;
-    padding: 20px;
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-}
 """
 
 with gr.Blocks(css=custom_css) as demo:
@@ -303,20 +291,12 @@ with gr.Blocks(css=custom_css) as demo:
                     label="Top-p"
                 )
 
-    # 설정 변경 알림을 위한 Modal
-    settings_modal = gr.Modal(
-        title="설정이 변경되었습니다",
-        visible=False,
-        interactive=False,
-        elem_classes="modal"
-    )
-
-    # 설정 변경 시 채팅 초기화 및 Modal 표시
+    # 설정 변경 시 채팅 초기화 및 알림 표시
     for component in [agent_type, personality, expertise_level, language]:
         component.change(
-            fn=show_settings_changed_modal,
+            fn=show_settings_changed_info,
             inputs=[agent_type, personality, expertise_level, language],
-            outputs=settings_modal
+            outputs=gr.Info()
         ).then(
             fn=reset_chat,
             outputs=chatbot