Spaces:

Felguk
/

gpt-4.5-preview

Running

App Files Files Community

Felguk commited on 25 days ago

Commit

02e9fed

verified ·

1 Parent(s): 55cfbc2

Update index.html

Browse files

Files changed (1) hide show

index.html +276 -19

index.html CHANGED Viewed

@@ -1,19 +1,276 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!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
+        </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 (faster)
+            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();
+            }
+            // Check if the message contains code
+            if (botMessage.includes('```')) {
+                const [textBeforeCode, codeSnippet] = botMessage.split('```');
+                const codeElement = document.createElement('code');
+                codeElement.style.display = 'block'; // Ensure code block is displayed properly
+                // Display text before code
+                typeWriter(textBeforeCode, botMessageElement);
+                // Display code snippet after a short delay
+                setTimeout(() => {
+                    codeElement.textContent = codeSnippet;
+                    botMessageElement.appendChild(codeElement);
+                }, textBeforeCode.length * 20 + 500); // Adjusted delay based on faster typing
+            } else {
+                // Display plain text with typewriter effect
+                typeWriter(botMessage, botMessageElement);
+            }
+            // Scroll to bottom
+            chatBox.scrollTop = chatBox.scrollHeight;
+        }
+    </script>
+</body>
+</html>