Spaces:

Yuchan5386
/

Kossistant-1

Sleeping

App Files Files Community

Yuchan5386 commited on Apr 20

Commit

33edad8

verified ·

1 Parent(s): 43a3069

Update app.py

Browse files

Files changed (1) hide show

app.py +261 -177

app.py CHANGED Viewed

@@ -1,191 +1,275 @@
-<!DOCTYPE html>
-<html lang="ko">
-<head>
-    <meta charset="UTF-8" />
-    <title>Kossistant Chat</title>
-    <style>
-        body {
-            background-color: #121212;
-            color: #e0e0e0;
-            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            justify-content: center;
-            height: 100vh;
-            margin: 0;
-            padding: 20px;
-            animation: fadeIn 1s ease-in-out;
-        }
-        @keyframes fadeIn {
-            0% { opacity: 0; }
-            100% { opacity: 1; }
-        }
-        .container {
-            width: 100%;
-            max-width: 600px;
-            background-color: #1e1e1e;
-            border-radius: 8px;
-            padding: 24px;
-            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.7);
-            display: flex;
-            flex-direction: column;
-            animation: slideUp 0.5s ease-out;
-            height: 90vh;
-            max-height: 800px; /* 최대 높이 제한 */
-        }
-        @keyframes slideUp {
-            0% { transform: translateY(20px); opacity: 0; }
-            100% { transform: translateY(0); opacity: 1; }
-        }
-        #response-container {
-            margin-bottom: 20px;
             padding: 16px;
-            background-color: #1e1e1e;
-            border-radius: 8px;
-            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
-            white-space: pre-wrap;
-            line-height: 1.6;
-            color: #e0e0e0;
-            font-size: 14px;
-            flex-grow: 1;
-            animation: fadeInText 1s ease-in-out;
-            overflow-y: auto; /* 스크롤 가능하게 설정 */
-            max-height: 60vh; /* 최대 높이 설정 */
-        }
-        @keyframes fadeInText {
-            0% { opacity: 0; }
-            100% { opacity: 1; }
-        }
-        .input-container {
-            display: flex;
-            flex-direction: column;
-            gap: 12px;
-        }
-        #userInput {
-            padding: 12px 16px;
-            font-size: 16px;
-            border: 1px solid #333;
-            border-radius: 8px;
-            background-color: #1e1e1e;
-            color: #fff;
-            transition: background-color 0.3s ease;
-            animation: fadeInInput 1s ease-in-out;
-        }
-        @keyframes fadeInInput {
-            0% { opacity: 0; }
-            100% { opacity: 1; }
         }
-        #userInput:focus {
-            outline: none;
-            background-color: #333;
-        }
-        #sendBtn {
-            padding: 12px 20px;
-            font-size: 16px;
-            background-color: #ff9800; /* 버튼 색상 변경 */
-            color: #fff;
-            border: none;
-            border-radius: 8px;
-            cursor: pointer;
-            transition: background-color 0.2s ease, transform 0.2s ease;
-            animation: fadeInButton 1s ease-in-out;
-        }
-        @keyframes fadeInButton {
-            0% { opacity: 0; transform: scale(0.8); }
-            100% { opacity: 1; transform: scale(1); }
-        }
-        #sendBtn:hover {
-            background-color: #fb8c00;
-            transform: scale(1.05);
         }
-        #sendBtn:active {
-            transform: scale(0.95);
         }
-        /* 로딩 스피너 */
-        .spinner {
-            width: 24px;
-            height: 24px;
-            border: 4px solid #f3f3f3;
-            border-top: 4px solid #ff9800;
-            border-radius: 50%;
-            animation: spin 1s linear infinite;
-            margin: 0 auto;
         }
-        @keyframes spin {
-            0% { transform: rotate(0deg); }
-            100% { transform: rotate(360deg); }
         }
-        /* 반응형 디자인 */
-        @media (max-width: 768px) {
-            .container {
-                width: 100%;
-                padding: 16px;
-            }
-            #userInput, #sendBtn {
-                width: 100%;
-                max-width: 100%;
-            }
         }
-    </style>
-</head>
-<body>
-    <div class="container">
-        <div id="response-container"></div>
-        <div class="input-container">
-            <input id="userInput" type="text" placeholder="질문을 입력하세요" />
-            <button id="sendBtn">보내기</button>
-        </div>
-    </div>
-    <script type="module">
-        import { Client } from "https://cdn.jsdelivr.net/npm/@gradio/client/dist/index.min.js";
-        (async () => {
-            const client = await Client.connect("Yuchan5386/Kossistant-1");
-            const sendMessage = async () => {
-                const userInput = document.querySelector("#userInput").value;
-                if (!userInput.trim()) return;
-                // 로딩 스피너 추가
-                document.querySelector("#response-container").innerHTML = '<div class="spinner"></div>';
-                try {
-                    const result = await client.predict("/chat_respond", [userInput]);
-                    document.querySelector("#response-container").innerHTML = result.data[0].replace(/\n/g, "<br>");
-                    document.querySelector("#userInput").value = ''; // 입력창 초기화
-                } catch (error) {
-                    document.querySelector("#response-container").innerHTML = "오류가 발생했습니다. 다시 시도해 주세요.";
-                }
-            };
-            // 엔터키로 메시지 전송
-            document.querySelector("#sendBtn").addEventListener("click", sendMessage);
-            document.querySelector("#userInput").addEventListener("keypress", (e) => {
-                if (e.key === "Enter") sendMessage();
-            });
-            // 페이지 로딩 후 자동 포커스
-            document.querySelector("#userInput").focus();
-        })();
-    </script>
-</body>
-</html>

+import gradio as gr
+from chatbot import respond
+def chat_respond(message, history):
+    response = respond(message)
+    history.append(f"User: {message}")
+    history.append(f"Kossistant: {response}")
+    return format_history(history), history, ""
+def format_history(history):
+    html = "<div class='chat-container'>"
+    for i in range(0, len(history) - 1, 2):
+        user = history[i].replace("User: ", "")
+        bot = history[i+1].replace("Kossistant: ", "")
+        html += f"""
+        <div class='message user'>
+            <div class='bubble user-bubble'>{user}</div>
+        </div>
+        <div class='message bot'>
+            <div class='bubble bot-bubble'>{bot}</div>
+        </div>
+        """
+    html += "</div>"
+    return html
+with gr.Blocks(css="""
+    * {
+        box-sizing: border-box;
+        -webkit-tap-highlight-color: transparent;
+    }
+    body {
+        margin: 0;
+        padding: 0;
+        font-family: 'Pretendard', 'Segoe UI', 'Apple SD Gothic Neo', sans-serif;
+        background-color: #121212;
+        color: #FFF;
+        overflow-x: hidden;
+        transition: background-color 0.3s ease;
+    }
+    .gradio-container {
+        background-color: #121212 !important;
+        color: white;
+    }
+    h1 {
+        text-align: center;
+        font-size: 2rem;
+        color: #00f7ff;
+        margin: 30px 0;
+        text-transform: uppercase;
+        letter-spacing: 1px;
+        animation: fadeIn 1.5s ease-in-out;
+    }
+    .chat-wrapper {
+        background-color: #1A1A1A;
+        border-radius: 20px;
+        padding: 30px 35px;
+        max-width: 768px;
+        margin: auto;
+        box-shadow: 0 0 20px rgba(0,0,0,0.3);
+        height: 75vh;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        transition: background-color 0.3s ease, box-shadow 0.3s ease;
+    }
+    .chat-wrapper:hover {
+        box-shadow: 0 0 30px rgba(0,0,0,0.5);
+    }
+    .chat-container {
+        overflow-y: auto;
+        flex-grow: 1;
+        padding-right: 10px;
+        margin-bottom: 30px;
+        scrollbar-width: thin;
+        scrollbar-color: #444 #1A1A1A;
+    }
+    .chat-container::-webkit-scrollbar {
+        width: 6px;
+    }
+    .chat-container::-webkit-scrollbar-thumb {
+        background-color: #444;
+        border-radius: 3px;
+    }
+    .message {
+        margin-bottom: 14px;
+        display: flex;
+        animation: slideIn 0.3s ease-in-out;
+    }
+    .user {
+        justify-content: flex-end;
+    }
+    .bot {
+        justify-content: flex-start;
+    }
+    .bubble {
+        max-width: 80%;
+        padding: 12px 16px;
+        border-radius: 20px;
+        line-height: 1.6;
+        font-size: 0.98rem;
+        position: relative;
+        animation: fadeIn 0.5s ease-in-out;
+        word-break: break-word;
+        white-space: pre-wrap;
+        transition: background-color 0.3s ease, box-shadow 0.3s ease;
+    }
+    .user-bubble {
+        background-color: #00796B;
+        color: white;
+        border-bottom-right-radius: 0;
+        align-self: flex-end;
+        box-shadow: 0 4px 8px rgba(0, 121, 107, 0.3);
+    }
+    .bot-bubble {
+        background-color: #2F3136;
+        color: white;
+        border-bottom-left-radius: 0;
+        align-self: flex-start;
+        box-shadow: 0 4px 8px rgba(255, 255, 255, 0.1);
+    }
+    .bot-bubble:after {
+        content: '';
+        position: absolute;
+        left: -10px;
+        top: 10px;
+        border: 6px solid transparent;
+        border-right-color: #2F3136;
+    }
+    .user-bubble:after {
+        content: '';
+        position: absolute;
+        right: -10px;
+        top: 10px;
+        border: 6px solid transparent;
+        border-left-color: #00796B;
+    }
+    textarea, input[type="text"] {
+        background-color: #2C2C2C !important;
+        color: white !important;
+        border: 1px solid #555 !important;
+        border-radius: 14px !important;
+        padding: 12px 14px !important;
+        font-size: 1rem;
+        width: 100%;
+        transition: all 0.2s ease-in-out;
+    }
+    textarea:focus, input[type="text"]:focus {
+        outline: none;
+        border-color: #00f7ff !important;
+        box-shadow: 0 0 5px #00f7ff55;
+    }
+    button {
+        background-color: #00C896 !important;
+        color: white !important;
+        font-weight: bold;
+        border: none !important;
+        border-radius: 14px !important;
+        padding: 12px 18px !important;
+        font-size: 1rem;
+        transition: all 0.2s ease-in-out;
+    }
+    button:hover {
+        background-color: #00a67e !important;
+        transform: scale(1.05);
+    }
+    @media screen and (max-width: 768px) {
+        .chat-wrapper {
             padding: 16px;
+            border-radius: 0;
         }
+        .bubble {
+            font-size: 0.95rem;
         }
+    }
+    ::selection {
+        background: #00f7ff;
+        color: #000;
+    }
+    @keyframes slideIn {
+        0% { transform: translateY(10px); opacity: 0; }
+        100% { transform: translateY(0); opacity: 1; }
+    }
+    @keyframes fadeIn {
+        0% { opacity: 0; }
+        100% { opacity: 1; }
+    }
+    /* 추가적인 요소들 */
+    .message {
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+    }
+    .user-bubble {
+        background-color: #00796B;
+        color: white;
+        padding: 14px 18px;
+        border-radius: 18px;
+        box-shadow: 0 4px 6px rgba(0, 121, 107, 0.3);
+        transition: all 0.3s ease-in-out;
+    }
+    .user-bubble:hover {
+        background-color: #004d40;
+        transform: scale(1.05);
+    }
+    .bot-bubble {
+        background-color: #2F3136;
+        color: white;
+        padding: 14px 18px;
+        border-radius: 18px;
+        box-shadow: 0 4px 6px rgba(255, 255, 255, 0.1);
+        transition: all 0.3s ease-in-out;
+    }
+    .bot-bubble:hover {
+        background-color: #1a1a1a;
+        transform: scale(1.05);
+    }
+    /* 메시지 입력 스타일 */
+    .gradio-textbox input, .gradio-textbox textarea {
+        background-color: #2C2C2C;
+        color: white;
+        border-radius: 14px;
+        padding: 12px 16px;
+        border: 1px solid #444;
+    }
+    .gradio-textbox input:focus, .gradio-textbox textarea:focus {
+        border-color: #00f7ff;
+        outline: none;
+        box-shadow: 0 0 5px rgba(0, 247, 255, 0.5);
+    }
+    .gradio-button {
+        background-color: #00C896;
+        color: white;
+        padding: 12px 18px;
+        border-radius: 14px;
+        font-size: 1rem;
+        transition: all 0.2s ease;
+    }
+    .gradio-button:hover {
+        background-color: #00a67e;
+        transform: scale(1.05);
+    }
+    /* 미디어 쿼리 ��선 */
+    @media (max-width: 1024px) {
+        .chat-wrapper {
+            padding: 20px 25px;
         }
+        .message {
+            gap: 12px;
         }
+    }
+    @media (max-width: 768px) {
+        .chat-wrapper {
+            padding: 15px 20px;
+            border-radius: 0;
         }
+        .message {
+            gap: 8px;
         }
+    }
+""") as demo:
+    gr.HTML("<h1>Kossistant 챗봇</h1>")
+    with gr.Column(elem_classes="chat-wrapper"):
+        chatbox = gr.HTML(value="", label="대화")
+        with gr.Row():
+            msg = gr.Textbox(placeholder="메시지를 입력하세요", lines=1, scale=8)
+            send_button = gr.Button("전송", scale=2)
+    state = gr.State([])
+    send_button.click(chat_respond, inputs=[msg, state], outputs=[chatbox, state, msg])
+    msg.submit(chat_respond, inputs=[msg, state], outputs=[chatbox, state, msg])
+demo.launch(share=True)