| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Crypton.Agi - Quantum Chatbot Wizardry</title> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
| <style> |
| :root { |
| --primary: #6e48aa; |
| --secondary: #9d50bb; |
| --accent: #4776E6; |
| --dark: #1a1a2e; |
| --light: #f8f9fa; |
| --success: #4BB543; |
| --warning: #FFCC00; |
| --danger: #FF3333; |
| } |
| |
| * { |
| margin: 0; |
| padding: 0; |
| box-sizing: border-box; |
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; |
| } |
| |
| body { |
| background: linear-gradient(135deg, var(--dark) 0%, #16213e 100%); |
| color: var(--light); |
| min-height: 100vh; |
| display: flex; |
| flex-direction: column; |
| } |
| |
| .container { |
| max-width: 1200px; |
| margin: 0 auto; |
| padding: 2rem; |
| flex: 1; |
| } |
| |
| header { |
| text-align: center; |
| margin-bottom: 2rem; |
| animation: fadeIn 1s ease-out; |
| } |
| |
| h1 { |
| font-size: 2.5rem; |
| margin-bottom: 0.5rem; |
| background: linear-gradient(to right, var(--primary), var(--secondary)); |
| -webkit-background-clip: text; |
| background-clip: text; |
| color: transparent; |
| } |
| |
| .subtitle { |
| font-size: 1.1rem; |
| opacity: 0.8; |
| } |
| |
| .chat-container { |
| background: rgba(255, 255, 255, 0.05); |
| backdrop-filter: blur(10px); |
| border-radius: 1rem; |
| padding: 1.5rem; |
| box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); |
| height: 60vh; |
| display: flex; |
| flex-direction: column; |
| } |
| |
| .chat-messages { |
| flex: 1; |
| overflow-y: auto; |
| padding: 1rem; |
| margin-bottom: 1rem; |
| display: flex; |
| flex-direction: column; |
| gap: 1rem; |
| } |
| |
| .message { |
| max-width: 80%; |
| padding: 0.8rem 1.2rem; |
| border-radius: 1rem; |
| animation: fadeIn 0.3s ease-out; |
| } |
| |
| .user-message { |
| align-self: flex-end; |
| background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%); |
| color: white; |
| border-bottom-right-radius: 0.2rem; |
| } |
| |
| .bot-message { |
| align-self: flex-start; |
| background: rgba(255, 255, 255, 0.1); |
| border-bottom-left-radius: 0.2rem; |
| } |
| |
| .typing-indicator { |
| display: flex; |
| align-items: center; |
| gap: 0.5rem; |
| padding: 0.8rem 1.2rem; |
| background: rgba(255, 255, 255, 0.1); |
| border-radius: 1rem; |
| width: fit-content; |
| margin-bottom: 1rem; |
| } |
| |
| .typing-dot { |
| width: 8px; |
| height: 8px; |
| background-color: var(--light); |
| border-radius: 50%; |
| opacity: 0.6; |
| animation: typingAnimation 1.4s infinite ease-in-out; |
| } |
| |
| .typing-dot:nth-child(1) { animation-delay: 0s; } |
| .typing-dot:nth-child(2) { animation-delay: 0.2s; } |
| .typing-dot:nth-child(3) { animation-delay: 0.4s; } |
| |
| .chat-input { |
| display: flex; |
| gap: 1rem; |
| } |
| |
| #messageInput { |
| flex: 1; |
| padding: 0.8rem 1.2rem; |
| border: none; |
| border-radius: 2rem; |
| background: rgba(255, 255, 255, 0.1); |
| color: var(--light); |
| font-size: 1rem; |
| outline: none; |
| transition: all 0.3s ease; |
| } |
| |
| #messageInput:focus { |
| background: rgba(255, 255, 255, 0.2); |
| box-shadow: 0 0 0 2px var(--primary); |
| } |
| |
| #sendButton { |
| background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%); |
| color: white; |
| border: none; |
| border-radius: 2rem; |
| padding: 0 1.5rem; |
| cursor: pointer; |
| transition: all 0.3s ease; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| } |
| |
| #sendButton:hover { |
| transform: translateY(-2px); |
| box-shadow: 0 5px 15px rgba(110, 72, 170, 0.4); |
| } |
| |
| #sendButton:active { |
| transform: translateY(0); |
| } |
| |
| .model-info { |
| margin-top: 1rem; |
| font-size: 0.9rem; |
| opacity: 0.7; |
| text-align: center; |
| } |
| |
| @keyframes fadeIn { |
| from { opacity: 0; transform: translateY(10px); } |
| to { opacity: 1; transform: translateY(0); } |
| } |
| |
| @keyframes typingAnimation { |
| 0%, 60%, 100% { transform: translateY(0); opacity: 0.6; } |
| 30% { transform: translateY(-5px); opacity: 1; } |
| } |
| |
| |
| @media (max-width: 768px) { |
| .container { |
| padding: 1rem; |
| } |
| |
| h1 { |
| font-size: 2rem; |
| } |
| |
| .chat-container { |
| height: 70vh; |
| } |
| |
| .message { |
| max-width: 90%; |
| } |
| } |
| </style> |
| </head> |
| <body> |
| <div class="container"> |
| <header> |
| <h1>Crypton.Agi</h1> |
| <p class="subtitle">Your quantum-powered AI assistant</p> |
| </header> |
| |
| <div class="chat-container"> |
| <div class="chat-messages" id="chatMessages"> |
| <div class="message bot-message"> |
| Hello! I'm Crypton.Agi, your AI assistant. How can I help you today? |
| </div> |
| </div> |
| |
| <div class="chat-input"> |
| <input type="text" id="messageInput" placeholder="Type your message here..." autocomplete="off"> |
| <button id="sendButton"> |
| <i class="fas fa-paper-plane"></i> |
| </button> |
| </div> |
| |
| <p class="model-info">Powered by Hugging Face Transformers</p> |
| </div> |
| </div> |
|
|
| <script> |
| document.addEventListener('DOMContentLoaded', () => { |
| const chatMessages = document.getElementById('chatMessages'); |
| const messageInput = document.getElementById('messageInput'); |
| const sendButton = document.getElementById('sendButton'); |
| |
| |
| const API_URL = 'https://api-inference.huggingface.co/models/'; |
| const MODEL_NAME = 'gpt2'; |
| |
| |
| function addMessage(text, isUser) { |
| const messageDiv = document.createElement('div'); |
| messageDiv.classList.add('message'); |
| messageDiv.classList.add(isUser ? 'user-message' : 'bot-message'); |
| messageDiv.textContent = text; |
| chatMessages.appendChild(messageDiv); |
| chatMessages.scrollTop = chatMessages.scrollHeight; |
| } |
| |
| |
| function showTyping() { |
| const typingDiv = document.createElement('div'); |
| typingDiv.classList.add('typing-indicator'); |
| typingDiv.id = 'typingIndicator'; |
| |
| for (let i = 0; i < 3; i++) { |
| const dot = document.createElement('div'); |
| dot.classList.add('typing-dot'); |
| typingDiv.appendChild(dot); |
| } |
| |
| chatMessages.appendChild(typingDiv); |
| chatMessages.scrollTop = chatMessages.scrollHeight; |
| } |
| |
| |
| function hideTyping() { |
| const typingIndicator = document.getElementById('typingIndicator'); |
| if (typingIndicator) { |
| typingIndicator.remove(); |
| } |
| } |
| |
| |
| async function sendMessage() { |
| const message = messageInput.value.trim(); |
| if (!message) return; |
| |
| |
| addMessage(message, true); |
| messageInput.value = ''; |
| |
| |
| showTyping(); |
| |
| try { |
| |
| |
| const response = await fetch(`${API_URL}${MODEL_NAME}`, { |
| method: 'POST', |
| headers: { |
| 'Content-Type': 'application/json', |
| 'Authorization': 'Bearer YOUR_HUGGING_FACE_TOKEN' |
| }, |
| body: JSON.stringify({ inputs: message }) |
| }); |
| |
| if (!response.ok) { |
| throw new Error(`API request failed with status ${response.status}`); |
| } |
| |
| const data = await response.json(); |
| |
| |
| hideTyping(); |
| |
| |
| if (data && data[0] && data[0].generated_text) { |
| addMessage(data[0].generated_text.replace(message, '').trim(), false); |
| } else { |
| addMessage("I received your message but couldn't process it properly.", false); |
| } |
| } catch (error) { |
| hideTyping(); |
| addMessage(`Sorry, I encountered an error: ${error.message}`, false); |
| console.error('API Error:', error); |
| } |
| } |
| |
| |
| sendButton.addEventListener('click', sendMessage); |
| messageInput.addEventListener('keypress', (e) => { |
| if (e.key === 'Enter') { |
| sendMessage(); |
| } |
| }); |
| }); |
| </script> |
| </body> |
| </html> |
