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