Spaces:
Running
Running
<html lang="en"> | |
<head> | |
<meta charset="UTF-8"> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
<title>Chatbot Interface</title> | |
<!-- Load JetBrains Mono font from Google Fonts --> | |
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&display=swap" rel="stylesheet"> | |
<style> | |
/* Global Styles */ | |
body { | |
font-family: 'JetBrains Mono', monospace; | |
margin: 0; | |
padding: 0; | |
display: flex; | |
justify-content: center; | |
align-items: center; | |
height: 100vh; | |
background-color: #000; /* Vercel-like dark background */ | |
color: #fff; | |
} | |
/* Chat Container */ | |
.chat-container { | |
width: 500px; | |
background-color: #111; /* Dark container background */ | |
border-radius: 12px; | |
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); | |
overflow: hidden; | |
display: flex; | |
flex-direction: column; | |
} | |
/* Chat Header */ | |
.chat-header { | |
background-color: #000; /* Vercel-like black header */ | |
padding: 16px; | |
text-align: center; | |
font-size: 18px; | |
font-weight: 700; | |
border-bottom: 1px solid #333; | |
} | |
/* Chat Box */ | |
.chat-box { | |
flex: 1; | |
padding: 16px; | |
overflow-y: auto; | |
background-color: #111; | |
} | |
/* Messages */ | |
.message { | |
margin-bottom: 12px; | |
padding: 12px; | |
border-radius: 8px; | |
max-width: 80%; | |
font-size: 14px; | |
line-height: 1.5; | |
} | |
.user-message { | |
background-color: #007bff; /* Vercel-like blue */ | |
color: #fff; | |
margin-left: auto; | |
} | |
.bot-message { | |
background-color: #222; /* Dark gray for bot messages */ | |
color: #fff; | |
margin-right: auto; | |
} | |
.bot-message code { | |
display: block; | |
background-color: #000; /* Black background for code */ | |
color: #00ff88; /* Vercel-like green for code */ | |
padding: 12px; | |
border-radius: 6px; | |
margin-top: 10px; | |
font-family: 'JetBrains Mono', monospace; | |
white-space: pre-wrap; | |
font-size: 13px; | |
} | |
/* Typing Animation */ | |
.typing-animation { | |
display: inline-block; | |
} | |
.typing-animation span { | |
display: inline-block; | |
width: 8px; | |
height: 8px; | |
background-color: #fff; | |
border-radius: 50%; | |
margin: 0 2px; | |
animation: typing 1s infinite; | |
} | |
.typing-animation span:nth-child(2) { | |
animation-delay: 0.2s; | |
} | |
.typing-animation span:nth-child(3) { | |
animation-delay: 0.4s; | |
} | |
@keyframes typing { | |
0%, 100% { | |
opacity: 0.3; | |
} | |
50% { | |
opacity: 1; | |
} | |
} | |
/* Chat Input */ | |
.chat-input { | |
display: flex; | |
padding: 16px; | |
background-color: #000; /* Black input area */ | |
border-top: 1px solid #333; | |
} | |
.chat-input input { | |
flex: 1; | |
padding: 12px; | |
background-color: #111; /* Dark input field */ | |
border: 1px solid #333; | |
border-radius: 8px; | |
outline: none; | |
color: #fff; | |
font-family: 'JetBrains Mono', monospace; | |
font-size: 14px; | |
} | |
.chat-input input::placeholder { | |
color: #666; | |
} | |
.chat-input button { | |
margin-left: 12px; | |
padding: 12px 16px; | |
background-color: #007bff; /* Vercel-like blue */ | |
color: #fff; | |
border: none; | |
border-radius: 8px; | |
font-family: 'JetBrains Mono', monospace; | |
font-size: 14px; | |
font-weight: 500; | |
cursor: pointer; | |
transition: background-color 0.2s; | |
} | |
.chat-input button:hover { | |
background-color: #005bb5; /* Darker blue on hover */ | |
} | |
</style> | |
</head> | |
<body> | |
<div class="chat-container"> | |
<div class="chat-header"> | |
gpt-4.5-preview(unfinished code generation) | |
</div> | |
<div class="chat-box" id="chat-box"> | |
<!-- Chat messages will appear here --> | |
</div> | |
<div class="chat-input"> | |
<input type="text" id="user-input" placeholder="Type your message..."> | |
<button onclick="sendMessage()">Send</button> | |
</div> | |
</div> | |
<script> | |
const apiKey = 'dad7e44eea25413d881f7866f68d09ef'; | |
const baseURL = 'https://api.aimlapi.com/v1'; | |
async function sendMessage() { | |
const userInput = document.getElementById('user-input').value; | |
if (!userInput) return; | |
// Display user message | |
const chatBox = document.getElementById('chat-box'); | |
const userMessage = document.createElement('div'); | |
userMessage.classList.add('message', 'user-message'); | |
userMessage.textContent = userInput; | |
chatBox.appendChild(userMessage); | |
// Clear input | |
document.getElementById('user-input').value = ''; | |
// Show typing animation | |
const typingAnimation = document.createElement('div'); | |
typingAnimation.classList.add('message', 'bot-message', 'typing-animation'); | |
typingAnimation.innerHTML = ` | |
<span></span> | |
<span></span> | |
<span></span> | |
`; | |
chatBox.appendChild(typingAnimation); | |
// Scroll to bottom | |
chatBox.scrollTop = chatBox.scrollHeight; | |
// Send message to API | |
const response = await fetch(`${baseURL}/chat/completions`, { | |
method: 'POST', | |
headers: { | |
'Content-Type': 'application/json', | |
'Authorization': `Bearer ${apiKey}` | |
}, | |
body: JSON.stringify({ | |
model: 'gpt-4.5-preview', | |
messages: [ | |
{ | |
role: 'system', | |
content: 'You are an AI assistant who knows everything.' | |
}, | |
{ | |
role: 'user', | |
content: userInput | |
} | |
] | |
}) | |
}); | |
const data = await response.json(); | |
const botMessage = data.choices[0].message.content; | |
// Remove typing animation | |
chatBox.removeChild(typingAnimation); | |
// Display bot message with typewriter animation | |
const botMessageElement = document.createElement('div'); | |
botMessageElement.classList.add('message', 'bot-message'); | |
chatBox.appendChild(botMessageElement); | |
// Function to simulate typewriter effect | |
function typeWriter(text, element, delay = 20) { // Reduced delay to 20ms | |
let i = 0; | |
function type() { | |
if (i < text.length) { | |
element.textContent += text.charAt(i); | |
i++; | |
setTimeout(type, delay); | |
} | |
} | |
type(); | |
} | |
// Parse and display the bot message | |
let remainingText = botMessage; | |
while (remainingText.includes('```')) { | |
// Extract text before the code block | |
const [textBeforeCode, rest] = remainingText.split('```', 2); | |
typeWriter(textBeforeCode, botMessageElement); | |
// Extract the code block | |
const [codeSnippet, restAfterCode] = rest.split('```', 2); | |
const codeElement = document.createElement('code'); | |
codeElement.classList.add('code-block'); // Optional: Add a class for styling | |
codeElement.style.display = 'block'; | |
// Simulate typewriter effect for the code block | |
setTimeout(() => { | |
typeWriter(codeSnippet, codeElement); | |
botMessageElement.appendChild(codeElement); | |
}, textBeforeCode.length * 20 + 50); // Adjusted delay | |
// Update remaining text | |
remainingText = restAfterCode || ''; | |
} | |
// Append any remaining text after the last code block | |
if (remainingText) { | |
setTimeout(() => { | |
typeWriter(remainingText, botMessageElement); | |
}, botMessageElement.textContent.length * 20 + 50); // Adjusted delay | |
} | |
// Scroll to bottom | |
chatBox.scrollTop = chatBox.scrollHeight; | |
} | |
</script> | |
</body> | |
</html> |