| | <!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> |
