SkillForge45
/

SkillForge-1.2-EN

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Hybrid Chatbot</title>
+    <style>
+        body {
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+            background-color: #f5f5f5;
+        }
+        .chat-container {
+            background: white;
+            border-radius: 10px;
+            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+            height: 500px;
+            overflow-y: auto;
+            padding: 20px;
+            margin-bottom: 20px;
+        }
+        .message {
+            margin-bottom: 15px;
+            padding: 10px 15px;
+            border-radius: 18px;
+            max-width: 70%;
+        }
+        .user-message {
+            background-color: #e3f2fd;
+            margin-left: auto;
+            border-bottom-right-radius: 5px;
+        }
+        .bot-message {
+            background-color: #f1f1f1;
+            margin-right: auto;
+            border-bottom-left-radius: 5px;
+        }
+        .input-area {
+            display: flex;
+            gap: 10px;
+        }
+        input {
+            flex-grow: 1;
+            padding: 10px;
+            border: 1px solid #ddd;
+            border-radius: 20px;
+            outline: none;
+        }
+        button {
+            background-color: #4285f4;
+            color: white;
+            border: none;
+            border-radius: 20px;
+            padding: 10px 20px;
+            cursor: pointer;
+        }
+        button:hover {
+            background-color: #3367d6;
+        }
+        .controls {
+            display: flex;
+            gap: 10px;
+            margin-top: 10px;
+        }
+        .tab {
+            display: none;
+        }
+        .tab.active {
+            display: block;
+        }
+        .tab-buttons {
+            display: flex;
+            margin-bottom: 10px;
+        }
+        .tab-button {
+            padding: 10px 15px;
+            background: #ddd;
+            border: none;
+            cursor: pointer;
+        }
+        .tab-button.active {
+            background: #4285f4;
+            color: white;
+        }
+    </style>
+</head>
+<body>
+    <h1>Hybrid Chatbot</h1>
+    <div class="tab-buttons">
+        <button class="tab-button active" onclick="openTab('chat')">Chat</button>
+        <button class="tab-button" onclick="openTab('teach')">Teach Bot</button>
+        <button class="tab-button" onclick="openTab('search')">Web Search</button>
+    </div>
+    <div id="chat" class="tab active">
+        <div class="chat-container" id="chat-box"></div>
+        <div class="input-area">
+            <input type="text" id="user-input" placeholder="Type your message...">
+            <button onclick="sendMessage()">Send</button>
+        </div>
+        <div class="controls">
+            <button onclick="startVoiceInput()">🎤 Voice Input</button>
+        </div>
+    </div>
+    <div id="teach" class="tab">
+        <h2>Teach the Bot</h2>
+        <div>
+            <input type="text" id="teach-question" placeholder="Enter question" style="width: 100%; margin-bottom: 10px;">
+            <textarea id="teach-answer" placeholder="Enter answer" style="width: 100%; height: 100px; margin-bottom: 10px;"></textarea>
+            <button onclick="teachBot()">Teach</button>
+        </div>
+    </div>
+    <div id="search" class="tab">
+        <h2>Web Search</h2>
+        <div>
+            <input type="text" id="search-query" placeholder="Enter search query" style="width: 100%; margin-bottom: 10px;">
+            <button onclick="performSearch()">Search</button>
+            <div id="search-results" style="margin-top: 20px;"></div>
+        </div>
+    </div>
+    <script>
+        const chatBox = document.getElementById('chat-box');
+        const userInput = document.getElementById('user-input');
+        function addMessage(text, isUser) {
+            const messageDiv = document.createElement('div');
+            messageDiv.classList.add('message');
+            messageDiv.classList.add(isUser ? 'user-message' : 'bot-message');
+            messageDiv.textContent = text;
+            chatBox.appendChild(messageDiv);
+            chatBox.scrollTop = chatBox.scrollHeight;
+        }
+        function sendMessage() {
+            const message = userInput.value.trim();
+            if (message) {
+                addMessage(message, true);
+                userInput.value = '';
+                fetch('/chat', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
+                    body: JSON.stringify({message: message}),
+                })
+                .then(response => response.json())
+                .then(data => {
+                    addMessage(data.response, false);
+                });
+            }
+        }
+        function startVoiceInput() {
+            alert("Voice input would be implemented here with Web Speech API");
+            // Actual implementation would require Web Speech API integration
+        }
+        function teachBot() {
+            const question = document.getElementById('teach-question').value.trim();
+            const answer = document.getElementById('teach-answer').value.trim();
+            if (question && answer) {
+                fetch('/teach', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
+                    body: JSON.stringify({question: question, answer: answer}),
+                })
+                .then(response => response.json())
+                .then(data => {
+                    if (data.success) {
+                        alert("Bot has learned the new response!");
+                        document.getElementById('teach-question').value = '';
+                        document.getElementById('teach-answer').value = '';
+                    }
+                });
+            } else {
+                alert("Please enter both question and answer");
+            }
+        }
+        function performSearch() {
+            const query = document.getElementById('search-query').value.trim();
+            if (query) {
+                fetch('/chat', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
+                    body: JSON.stringify({message: `search the web for ${query}`}),
+                })
+                .then(response => response.json())
+                .then(data => {
+                    document.getElementById('search-results').innerHTML =
+                        `<h3>Search Results for "${query}":</h3><p>${data.response.replace(/\n/g, '<br>')}</p>`;
+                });
+            }
+        }
+        function openTab(tabName) {
+            const tabs = document.getElementsByClassName('tab');
+            for (let tab of tabs) {
+                tab.classList.remove('active');
+            }
+            const tabButtons = document.getElementsByClassName('tab-button');
+            for (let button of tabButtons) {
+                button.classList.remove('active');
+            }
+            document.getElementById(tabName).classList.add('active');
+            event.currentTarget.classList.add('active');
+        }
+        userInput.addEventListener('keypress', function(e) {
+            if (e.key === 'Enter') {
+                sendMessage();
+            }
+        });
+        // Initial greeting
+        addMessage("Hello! How can I help you today?", false);
+    </script>
+</body>
+</html>