Spaces:

lenzcom
/

Email

Running

App Files Files Community

lenzcom commited on about 16 hours ago

Commit

5639fcf

verified ·

1 Parent(s): 32cf8db

Upload folder using huggingface_hub

Browse files

Files changed (1) hide show

public/public/index.html +209 -0

public/public/index.html ADDED Viewed

	@@ -0,0 +1,209 @@

+<!DOCTYPE html>
+<html lang="vi">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Dạ Hành AI Studio</title>
+    <style>
+        :root {
+            --primary-color: #00ff88;
+            --bg-color: #121212;
+            --chat-bg: #1e1e1e;
+            --user-msg-bg: #2a2a2a;
+            --ai-msg-bg: #0a3a2a;
+        }
+        body {
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            background-color: var(--bg-color);
+            color: white;
+            margin: 0;
+            display: flex;
+            height: 100vh;
+        }
+        .sidebar {
+            width: 250px;
+            background-color: #000;
+            padding: 20px;
+            border-right: 1px solid #333;
+            display: flex;
+            flex-direction: column;
+        }
+        .main {
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+            padding: 20px;
+        }
+        h1 { font-size: 1.2rem; color: var(--primary-color); margin-bottom: 20px; }
+        .bot-selector {
+            margin-bottom: 20px;
+        }
+        select {
+            width: 100%;
+            padding: 10px;
+            background: #333;
+            color: white;
+            border: 1px solid #555;
+            border-radius: 5px;
+        }
+        #chat-box {
+            flex: 1;
+            overflow-y: auto;
+            border: 1px solid #333;
+            background: var(--chat-bg);
+            border-radius: 10px;
+            padding: 20px;
+            margin-bottom: 20px;
+            display: flex;
+            flex-direction: column;
+            gap: 15px;
+        }
+        .message {
+            max-width: 80%;
+            padding: 10px 15px;
+            border-radius: 15px;
+            line-height: 1.5;
+        }
+        .message.ai {
+            align-self: flex-start;
+            background-color: var(--ai-msg-bg);
+            border-bottom-left-radius: 2px;
+        }
+        .message.user {
+            align-self: flex-end;
+            background-color: var(--user-msg-bg);
+            border-bottom-right-radius: 2px;
+            color: #ddd;
+        }
+        .input-area {
+            display: flex;
+            gap: 10px;
+        }
+        input[type="text"] {
+            flex: 1;
+            padding: 15px;
+            border-radius: 25px;
+            border: 1px solid #444;
+            background: #222;
+            color: white;
+            outline: none;
+        }
+        button {
+            padding: 10px 25px;
+            border-radius: 25px;
+            border: none;
+            background: var(--primary-color);
+            color: black;
+            font-weight: bold;
+            cursor: pointer;
+            transition: 0.2s;
+        }
+        button:hover { background: #00cc6a; }
+        .loading { font-style: italic; color: #888; font-size: 0.9rem; }
+    </style>
+</head>
+<body>
+<div class="sidebar">
+    <h1>DẠ HÀNH STUDIO</h1>
+    <div class="bot-selector">
+        <label>Chọn Bot:</label>
+        <select id="role-select">
+            <option value="talk2people">Talk2People (Đạo diễn)</option>
+            <option value="coder">Coder Expert</option>
+            <option value="default">Trợ lý cơ bản</option>
+        </select>
+    </div>
+    <div style="margin-top: auto; font-size: 0.8rem; color: #666;">
+        Running on Qwen 1.7B<br>Local Privacy First
+    </div>
+</div>
+<div class="main">
+    <div id="chat-box">
+        <!-- Messages go here -->
+    </div>
+    <div class="input-area">
+        <input type="text" id="user-input" placeholder="Nhập tin nhắn..." autocomplete="off">
+        <button onclick="sendMessage()">Gửi</button>
+    </div>
+</div>
+<script>
+    const chatBox = document.getElementById('chat-box');
+    const userInput = document.getElementById('user-input');
+    const roleSelect = document.getElementById('role-select');
+    let chatHistory = [];
+    // Load Welcome Message
+    async function init() {
+        try {
+            const res = await fetch('/info');
+            const data = await res.json();
+            addMessage('ai', data.welcome);
+        } catch (e) {
+            addMessage('ai', "Xin chào đây là hệ thống bot AI hoạt động riêng tư được đào tạo bởi Dạ Hành Studio , Ko phụ thuộc vào Google");
+        }
+    }
+    function addMessage(role, text) {
+        const div = document.createElement('div');
+        div.className = `message ${role}`;
+        div.textContent = text; // Safe text
+        chatBox.appendChild(div);
+        chatBox.scrollTop = chatBox.scrollHeight;
+    }
+    async function sendMessage() {
+        const text = userInput.value.trim();
+        if (!text) return;
+        addMessage('user', text);
+        userInput.value = '';
+        chatHistory.push({ role: 'user', content: text });
+        // Show loading
+        const loadingDiv = document.createElement('div');
+        loadingDiv.className = 'message ai loading';
+        loadingDiv.textContent = 'Đang suy nghĩ...';
+        chatBox.appendChild(loadingDiv);
+        try {
+            const response = await fetch('/chat', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({
+                    message: text,
+                    history: chatHistory.slice(-10), // Keep last 10 messages
+                    role: roleSelect.value
+                })
+            });
+            const data = await response.json();
+            chatBox.removeChild(loadingDiv); // Remove loading
+            addMessage('ai', data.reply);
+            chatHistory.push({ role: 'ai', content: data.reply });
+        } catch (error) {
+            chatBox.removeChild(loadingDiv);
+            addMessage('ai', 'Lỗi kết nối: ' + error.message);
+        }
+    }
+    userInput.addEventListener('keypress', (e) => {
+        if (e.key === 'Enter') sendMessage();
+    });
+    // Reset history when role changes
+    roleSelect.addEventListener('change', () => {
+        chatHistory = [];
+        chatBox.innerHTML = '';
+        init(); // Show welcome again
+    });
+    init();
+</script>
+</body>
+</html>