Update app.py

app.py

@@ -194,88 +194,7 @@ def read_uploaded_file(file):
 
 
 
-CSS = """
-/* 전체 페이지 스타일링 */
-body {
-    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-    min-height: 100vh;
-    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-}
-/* 메인 컨테이너 */
-.container {
-    max-width: 1200px;
-    margin: 0 auto;
-    padding: 2rem;
-    background: rgba(255, 255, 255, 0.95);
-    border-radius: 20px;
-    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
-    backdrop-filter: blur(10px);
-    transform: perspective(1000px) translateZ(0);
-    transition: all 0.3s ease;
-}
-/* 제목 스타일링 */
-h1 {
-    color: #2d3436;
-    font-size: 2.5rem;
-    text-align: center;
-    margin-bottom: 2rem;
-    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
-    transform: perspective(1000px) translateZ(20px);
-}
-h3 {
-    text-align: center;
-    color: #2d3436;
-    font-size: 1.5rem;
-    margin: 1rem 0;
-}
-/* 채팅박스 스타일링 */
-.chatbox {
-    background: white;
-    border-radius: 15px;
-    box-shadow: 0 8px 32px rgba(31, 38, 135, 0.15);
-    backdrop-filter: blur(4px);
-    border: 1px solid rgba(255, 255, 255, 0.18);
-    padding: 1rem;
-    margin: 1rem 0;
-    transform: translateZ(0);
-    transition: all 0.3s ease;
-}
-/* 메시지 스타일링 */
-.chatbox .messages .message.user {
-    background: linear-gradient(145deg, #e1f5fe, #bbdefb);
-    border-radius: 15px;
-    padding: 1rem;
-    margin: 0.5rem;
-    box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.05);
-    transform: translateZ(10px);
-    animation: messageIn 0.3s ease-out;
-}
-.chatbox .messages .message.bot {
-    background: linear-gradient(145deg, #f5f5f5, #eeeeee);
-    border-radius: 15px;
-    padding: 1rem;
-    margin: 0.5rem;
-    box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.05);
-    transform: translateZ(10px);
-    animation: messageIn 0.3s ease-out;
-}
-/* 버튼 스타일링 */
-.duplicate-button {
-    background: linear-gradient(145deg, #24292e, #1a1e22) !important;
-    color: white !important;
-    border-radius: 100vh !important;
-    padding: 0.8rem 1.5rem !important;
-    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2) !important;
-    transition: all 0.3s ease !important;
-    border: none !important;
-    cursor: pointer !important;
-}
-.duplicate-button:hover {
-    transform: translateY(-2px) !important;
-    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3) !important;
-}
-/* 입력 필드 스타일링 */
-"""
+
 
 @spaces.GPU
 def stream_chat(message: str, history: list, uploaded_file, temperature: float, max_new_tokens: int, top_p: float, top_k: int, penalty: float):
@@ -337,42 +256,239 @@ def stream_chat(message: str, history: list, uploaded_file, temperature: float,
         error_message = f"오류가 발생했습니다: {str(e)}"
         yield "", history + [[message, error_message]]
 
-# UI 부분 수정
+CSS = """
+/* 3D 스타일 CSS */
+:root {
+    --primary-color: #2196f3;
+    --secondary-color: #1976d2;
+    --background-color: #f0f2f5;
+    --card-background: #ffffff;
+    --text-color: #333333;
+    --shadow-color: rgba(0, 0, 0, 0.1);
+}
+
+body {
+    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+    min-height: 100vh;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+}
+
+.container {
+    transform-style: preserve-3d;
+    perspective: 1000px;
+}
+
+.chatbot {
+    background: var(--card-background);
+    border-radius: 20px;
+    box-shadow: 
+        0 10px 20px var(--shadow-color),
+        0 6px 6px var(--shadow-color);
+    transform: translateZ(0);
+    transition: transform 0.3s ease;
+    backdrop-filter: blur(10px);
+}
+
+.chatbot:hover {
+    transform: translateZ(10px);
+}
+
+/* 메시지 입력 영역 */
+.input-area {
+    background: var(--card-background);
+    border-radius: 15px;
+    padding: 15px;
+    margin-top: 20px;
+    box-shadow: 
+        0 5px 15px var(--shadow-color),
+        0 3px 3px var(--shadow-color);
+    transform: translateZ(0);
+    transition: all 0.3s ease;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+
+.input-area:hover {
+    transform: translateZ(5px);
+}
+
+/* 버튼 스타일 */
+.custom-button {
+    background: linear-gradient(145deg, var(--primary-color), var(--secondary-color));
+    color: white;
+    border: none;
+    border-radius: 10px;
+    padding: 10px 20px;
+    font-weight: 600;
+    cursor: pointer;
+    transform: translateZ(0);
+    transition: all 0.3s ease;
+    box-shadow: 
+        0 4px 6px var(--shadow-color),
+        0 1px 3px var(--shadow-color);
+}
+
+.custom-button:hover {
+    transform: translateZ(5px) translateY(-2px);
+    box-shadow: 
+        0 7px 14px var(--shadow-color),
+        0 3px 6px var(--shadow-color);
+}
+
+/* 파일 업로드 버튼 */
+.file-upload-button {
+    background: linear-gradient(145deg, #64b5f6, #42a5f5);
+    color: white;
+    border: none;
+    border-radius: 10px;
+    padding: 8px 15px;
+    margin-right: 10px;
+    cursor: pointer;
+    transform: translateZ(0);
+    transition: all 0.3s ease;
+}
+
+.file-upload-button:hover {
+    transform: translateZ(5px) translateY(-2px);
+}
+
+/* 메시지 스타일 */
+.message {
+    background: var(--card-background);
+    border-radius: 15px;
+    padding: 15px;
+    margin: 10px 0;
+    box-shadow: 
+        0 4px 6px var(--shadow-color),
+        0 1px 3px var(--shadow-color);
+    transform: translateZ(0);
+    transition: all 0.3s ease;
+}
+
+.message:hover {
+    transform: translateZ(5px);
+}
+
+/* 설정 패널 */
+.settings-panel {
+    background: var(--card-background);
+    border-radius: 15px;
+    padding: 15px;
+    margin-top: 20px;
+    box-shadow: 
+        0 5px 15px var(--shadow-color),
+        0 3px 3px var(--shadow-color);
+    transform: translateZ(0);
+    transition: all 0.3s ease;
+}
+
+.settings-panel:hover {
+    transform: translateZ(5px);
+}
+
+/* 슬라이더 스타일 */
+.slider-container {
+    margin: 10px 0;
+}
+
+.slider {
+    -webkit-appearance: none;
+    width: 100%;
+    height: 5px;
+    border-radius: 5px;
+    background: #ddd;
+    outline: none;
+}
+
+.slider::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    appearance: none;
+    width: 15px;
+    height: 15px;
+    border-radius: 50%;
+    background: var(--primary-color);
+    cursor: pointer;
+    transition: all 0.3s ease;
+}
+
+.slider::-webkit-slider-thumb:hover {
+    transform: scale(1.2);
+}
+"""
+
+# UI 구성 수정
 with gr.Blocks(css=CSS) as demo:
-    with gr.Row():
-        with gr.Column(scale=2):
-            chatbot = gr.Chatbot(
-                value=[],
-                height=500,
-                label="대화창",
-                show_label=True
+    with gr.Column():
+        chatbot = gr.Chatbot(
+            value=[],
+            height=500,
+            label="GiniGEN AI Assistant",
+            elem_classes="chatbot"
+        )
+        
+        with gr.Row(elem_classes="input-area"):
+            file_upload = gr.File(
+                label="📎 파일 첨부",
+                type="filepath",
+                scale=0.15,
+                min_width=50,
+                elem_classes="file-upload-button"
             )
-            
             msg = gr.Textbox(
-                label="메시지 입력",
                 show_label=False,
-                placeholder="무엇이든 물어보세요... 💭",
+                placeholder="메시지를 입력하세요... 💭",
+                scale=0.7,
                 container=False
             )
-            
-            with gr.Row():
-                clear = gr.ClearButton([msg, chatbot], value="대화내용 지우기")
-                send = gr.Button("보내기 📤")
-        
-        with gr.Column(scale=1):
-            gr.Markdown("### 파일 업로드 📁")
-            file_upload = gr.File(
-                label="파일 선택",
-                file_types=["text", ".csv", ".parquet"],
-                type="filepath"
+            send = gr.Button(
+                "전송",
+                scale=0.15,
+                min_width=50,
+                elem_classes="custom-button"
             )
-            
-            with gr.Accordion("고급 설정 ⚙️", open=False):
-                temperature = gr.Slider(minimum=0, maximum=1, step=0.1, value=0.8, label="온도")
-                max_new_tokens = gr.Slider(minimum=128, maximum=8000, step=1, value=4000, label="최대 토큰 수")
-                top_p = gr.Slider(minimum=0.0, maximum=1.0, step=0.1, value=0.8, label="상위 확률")
-                top_k = gr.Slider(minimum=1, maximum=20, step=1, value=20, label="상위 K")
-                penalty = gr.Slider(minimum=0.0, maximum=2.0, step=0.1, value=1.0, label="반복 패널티")
+        
+        with gr.Accordion("🎮 고급 설정", open=False, elem_classes="settings-panel"):
+            with gr.Row():
+                with gr.Column(scale=1):
+                    temperature = gr.Slider(
+                        minimum=0, maximum=1, step=0.1, value=0.8,
+                        label="창의성 수준 🎨",
+                        elem_classes="slider"
+                    )
+                    max_new_tokens = gr.Slider(
+                        minimum=128, maximum=8000, step=1, value=4000,
+                        label="최대 토큰 수 📝",
+                        elem_classes="slider"
+                    )
+                with gr.Column(scale=1):
+                    top_p = gr.Slider(
+                        minimum=0.0, maximum=1.0, step=0.1, value=0.8,
+                        label="다양성 조절 🎯",
+                        elem_classes="slider"
+                    )
+                    top_k = gr.Slider(
+                        minimum=1, maximum=20, step=1, value=20,
+                        label="선택 범위 📊",
+                        elem_classes="slider"
+                    )
+                    penalty = gr.Slider(
+                        minimum=0.0, maximum=2.0, step=0.1, value=1.0,
+                        label="반복 억제 🔄",
+                        elem_classes="slider"
+                    )
+
+        gr.Examples(
+            examples=[
+                ["한국의 전통 절기와 24절기에 대해 자세히 설명해주세요."],
+                ["우리나라 전통 음식 중 건강에 좋은 발효음식 5가지를 추천하고 그 효능을 설명해주세요."],
+                ["한국의 대표적인 산들을 소개하고, 각 산의 특징과 등산 코스를 추천해주세요."],
+                ["사물놀이의 악기 구성과 장단에 대해 초보자도 이해하기 쉽게 설명해주세요."],
+                ["한국의 전통 건축물에 담긴 과학적 원리를 현대적 관점에서 분석해주세요."],
+            ],
+            inputs=msg,
+            elem_classes="examples-panel"
+        )
 
     # 이벤트 바인딩
     msg.submit(
@@ -390,7 +506,6 @@ with gr.Blocks(css=CSS) as demo:
     def init_msg():
         return "파일 분석을 시작합니다..."
 
-    # 파일 업로드시 자동 분석
     file_upload.change(
         init_msg,
         outputs=msg