Spaces:

Felguk
/

gpt-4.5-preview

Running

File size: 8,555 Bytes

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