Update app.py

app.py

@@ -95,6 +95,98 @@ def stream_chat(message: str, history: list, temperature: float, max_new_tokens:
 
 chatbot = gr.Chatbot(height=500)
 
+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;
+}
+
+/* 입력 필드 스타일링 */
+"""
+
 with gr.Blocks(css=CSS) as demo:
     gr.HTML(TITLE)
     gr.HTML(DESCRIPTION)