Update app.py

app.py

@@ -415,6 +415,69 @@ body {
 .slider::-webkit-slider-thumb:hover {
     transform: scale(1.2);
 }
+
+
+.chat-container {
+    height: 700px !important;  /* 채팅창 높이 증가 */
+    margin-bottom: 10px;
+}
+
+.input-container {
+    height: 45px !important;   /* 입력창 높이 감소 */
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    margin-top: 5px;
+}
+
+.file-upload-icon {
+    background: linear-gradient(145deg, #64b5f6, #42a5f5);
+    color: white;
+    border-radius: 8px;
+    padding: 8px 12px;
+    font-size: 0.9em;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    gap: 5px;
+    height: 35px;
+    transition: all 0.3s ease;
+    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
+}
+
+.file-upload-icon:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
+}
+
+.file-upload-icon svg {
+    width: 20px;
+    height: 20px;
+}
+
+.input-textbox {
+    height: 35px !important;
+    border-radius: 8px !important;
+}
+
+.send-button {
+    height: 35px !important;
+    min-width: 60px !important;
+}
+
+/* 파일 업로드 버튼 컨테이너 */
+.file-upload-container {
+    display: flex;
+    align-items: center;
+    height: 35px;
+}
+
+/* 파일 업로드 텍스트 */
+.file-upload-text {
+    font-size: 0.8em;
+    margin-left: 5px;
+    color: #ffffff;
+}
 """
 
 # UI 구성 수정
@@ -422,31 +485,41 @@ with gr.Blocks(css=CSS) as demo:
     with gr.Column():
         chatbot = gr.Chatbot(
             value=[],
-            height=500,
+            height=700,  # 채팅창 높이 증가
             label="GiniGEN AI Assistant",
-            elem_classes="chatbot"
+            elem_classes="chat-container"
         )
         
-        with gr.Row(elem_classes="input-area"):
-            file_upload = gr.File(
-                label="📎 파일 첨부",
-                type="filepath",
-                scale=1,  # 정수값으로 수정
-                min_width=50,
-                elem_classes="file-upload-button"
-            )
-            msg = gr.Textbox(
-                show_label=False,
-                placeholder="메시지를 입력하세요... 💭",
-                scale=4,  # 정수값으로 수정
-                container=False
-            )
-            send = gr.Button(
-                "전송",
-                scale=1,  # 정수값으로 수정
-                min_width=50,
-                elem_classes="custom-button"
-            )
+        with gr.Row(elem_classes="input-container"):
+            with gr.Column(scale=1, min_width=150):
+                file_upload = gr.File(
+                    label="📁",
+                    type="filepath",
+                    elem_classes="file-upload-icon",
+                    scale=1,
+                    container=True,
+                    interactive=True,
+                )
+                gr.Markdown(
+                    "Txt/Csv/Parquet",
+                    elem_classes="file-upload-text"
+                )
+            
+            with gr.Column(scale=4):
+                msg = gr.Textbox(
+                    show_label=False,
+                    placeholder="메시지를 입력하세요... 💭",
+                    container=False,
+                    elem_classes="input-textbox",
+                    scale=1
+                )
+            
+            with gr.Column(scale=1, min_width=60):
+                send = gr.Button(
+                    "전송",
+                    elem_classes="send-button custom-button",
+                    scale=1
+                )
         
         with gr.Accordion("🎮 고급 설정", open=False, elem_classes="settings-panel"):
             with gr.Row():
@@ -478,7 +551,6 @@ with gr.Blocks(css=CSS) as demo:
                         elem_classes="slider"
                     )
 
-        # Examples 컴포넌트 수정
         gr.Examples(
             examples=[
                 ["한국의 전통 절기와 24절기에 대해 자세히 설명해주세요."],
@@ -516,4 +588,4 @@ with gr.Blocks(css=CSS) as demo:
     )
 
 if __name__ == "__main__":
-    demo.launch()
+    demo.launch()