gpt-4.5-preview / index.html
Felguk's picture
Update index.html
0c6493e verified
<!DOCTYPE html>
<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>