update UI/UX

app.py

@@ -88,22 +88,128 @@ For information on how to customize the ChatInterface, peruse the gradio docs: h
 custom_css = """
 .gradio-container {
     font-family: 'Helvetica Neue', Arial, sans-serif;
+    max-width: 1200px;
+    margin: auto;
+    padding: 20px;
 }
+
 .container {
     max-width: 800px;
     margin: auto;
     padding: 20px;
 }
+
+/* 채팅 컨테이너 스타일 */
+.chat-container {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    background: #ffffff;
+    border-radius: 10px;
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
+}
+
+/* 채팅 메시지 스타일 */
 .chat-message {
-    padding: 15px;
+    padding: 20px;
+    margin: 10px;
     border-radius: 10px;
-    margin-bottom: 10px;
+    max-width: 85%;
+    line-height: 1.5;
+    position: relative;
+    animation: fadeIn 0.3s ease-in-out;
 }
+
+@keyframes fadeIn {
+    from { opacity: 0; transform: translateY(10px); }
+    to { opacity: 1; transform: translateY(0); }
+}
+
+/* 사용자 메시지 스타일 */
 .user-message {
     background-color: #f0f2f5;
+    margin-left: auto;
+    border-bottom-right-radius: 0;
 }
+
+/* 봇 메시지 스타일 */
 .bot-message {
     background-color: #e3f2fd;
+    margin-right: auto;
+    border-bottom-left-radius: 0;
+}
+
+/* 입력 영역 스타일 */
+.input-container {
+    display: flex;
+    gap: 10px;
+    padding: 20px;
+    background: #ffffff;
+    border-top: 1px solid #e0e0e0;
+    position: sticky;
+    bottom: 0;
+}
+
+/* 입력 필드 스타일 */
+input[type="text"] {
+    flex: 1;
+    padding: 12px;
+    border: 1px solid #e0e0e0;
+    border-radius: 8px;
+    font-size: 16px;
+    transition: border-color 0.3s ease;
+}
+
+input[type="text"]:focus {
+    border-color: #2196f3;
+    outline: none;
+}
+
+/* 버튼 스타일 */
+button {
+    padding: 12px 24px;
+    border: none;
+    border-radius: 8px;
+    background-color: #2196f3;
+    color: white;
+    font-weight: 600;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+}
+
+button:hover {
+    background-color: #1976d2;
+}
+
+/* 설정 패널 스타일 */
+.settings-panel {
+    background: #ffffff;
+    padding: 20px;
+    border-radius: 10px;
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
+}
+
+/* 드롭다운 스타일 */
+select {
+    width: 100%;
+    padding: 8px;
+    border: 1px solid #e0e0e0;
+    border-radius: 6px;
+    margin-bottom: 10px;
+}
+
+/* 슬라이더 스타일 */
+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);
 }
 """
 
@@ -117,23 +223,27 @@ with gr.Blocks(css=custom_css) as demo:
     
     with gr.Row():
         with gr.Column(scale=2):
-            chatbot = gr.Chatbot(
-                height=600,
-                show_copy_button=True,
-                avatar_images=("👤", "🎬"),
-                bubble_full_width=False,
-            )
-            msg = gr.Textbox(
-                placeholder="어떤 영화를 찾고 계신가요?",
-                show_label=False,
-                container=False
-            )
-            with gr.Row():
-                submit = gr.Button("추천 받기", variant="primary")
-                clear = gr.Button("대화 초기화")
+            with gr.Group(elem_classes="chat-container"):
+                chatbot = gr.Chatbot(
+                    height=600,
+                    show_copy_button=True,
+                    avatar_images=("👤", "🎬"),
+                    bubble_full_width=False,
+                    elem_classes=["chat-message"],
+                )
+                with gr.Group(elem_classes="input-container"):
+                    msg = gr.Textbox(
+                        placeholder="어떤 영화를 찾고 계신가요?",
+                        show_label=False,
+                        container=False,
+                        scale=8
+                    )
+                    with gr.Row(scale=2):
+                        submit = gr.Button("추천 받기", variant="primary", size="sm")
+                        clear = gr.Button("대화 초기화", size="sm")
         
         with gr.Column(scale=1):
-            with gr.Group():
+            with gr.Group(elem_classes="settings-panel"):
                 gr.Markdown("### 🎯 추천 설정")
                 genre = gr.Dropdown(
                     choices=["액션", "코미디", "드라마", "로맨스", "스릴러", "SF", "판타지", "애니메이션"],
@@ -146,7 +256,7 @@ with gr.Blocks(css=custom_css) as demo:
                     multiselect=True
                 )
             
-            with gr.Group():
+            with gr.Group(elem_classes="settings-panel"):
                 gr.Markdown("### 🤖 Agent 설정")
                 agent_type = gr.Dropdown(
                     choices=["전문가", "친구", "영화 평론가", "큐레이터"],
@@ -169,7 +279,7 @@ with gr.Blocks(css=custom_css) as demo:
                     value="한국어"
                 )
             
-            with gr.Group():
+            with gr.Group(elem_classes="settings-panel"):
                 gr.Markdown("### ⚙️ 고급 설정")
                 max_tokens = gr.Slider(
                     minimum=1,
@@ -197,7 +307,8 @@ with gr.Blocks(css=custom_css) as demo:
     settings_modal = gr.Modal(
         title="설정이 변경되었습니다",
         visible=False,
-        interactive=False
+        interactive=False,
+        elem_classes="modal"
     )
 
     # 설정 변경 시 채팅 초기화 및 Modal 표시