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