Spaces:
Runtime error
Runtime error
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>AJ API - Test Interface</title> | |
| <style> | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| min-height: 100vh; | |
| padding: 20px; | |
| } | |
| .container { | |
| max-width: 800px; | |
| margin: 0 auto; | |
| background: white; | |
| border-radius: 20px; | |
| box-shadow: 0 20px 60px rgba(0,0,0,0.3); | |
| overflow: hidden; | |
| } | |
| .header { | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| color: white; | |
| padding: 30px; | |
| text-align: center; | |
| } | |
| .header h1 { | |
| font-size: 2.5em; | |
| margin-bottom: 10px; | |
| } | |
| .header p { | |
| font-size: 1.1em; | |
| opacity: 0.9; | |
| } | |
| .content { | |
| padding: 30px; | |
| } | |
| .input-group { | |
| margin-bottom: 20px; | |
| } | |
| .input-group label { | |
| display: block; | |
| margin-bottom: 8px; | |
| font-weight: 600; | |
| color: #333; | |
| } | |
| .input-group input { | |
| width: 100%; | |
| padding: 12px; | |
| border: 2px solid #e0e0e0; | |
| border-radius: 8px; | |
| font-size: 1em; | |
| transition: border-color 0.3s; | |
| } | |
| .input-group input:focus { | |
| outline: none; | |
| border-color: #667eea; | |
| } | |
| .input-group textarea { | |
| width: 100%; | |
| padding: 12px; | |
| border: 2px solid #e0e0e0; | |
| border-radius: 8px; | |
| font-size: 1em; | |
| min-height: 100px; | |
| resize: vertical; | |
| font-family: inherit; | |
| transition: border-color 0.3s; | |
| } | |
| .input-group textarea:focus { | |
| outline: none; | |
| border-color: #667eea; | |
| } | |
| .btn { | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| color: white; | |
| padding: 15px 40px; | |
| border: none; | |
| border-radius: 8px; | |
| font-size: 1.1em; | |
| font-weight: 600; | |
| cursor: pointer; | |
| transition: transform 0.2s, box-shadow 0.2s; | |
| width: 100%; | |
| } | |
| .btn:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 10px 20px rgba(102, 126, 234, 0.3); | |
| } | |
| .btn:active { | |
| transform: translateY(0); | |
| } | |
| .btn:disabled { | |
| opacity: 0.6; | |
| cursor: not-allowed; | |
| } | |
| .response { | |
| margin-top: 20px; | |
| padding: 20px; | |
| background: #f5f5f5; | |
| border-radius: 8px; | |
| border-left: 4px solid #667eea; | |
| display: none; | |
| } | |
| .response.show { | |
| display: block; | |
| } | |
| .response h3 { | |
| margin-bottom: 10px; | |
| color: #333; | |
| } | |
| .response pre { | |
| background: white; | |
| padding: 15px; | |
| border-radius: 5px; | |
| overflow-x: auto; | |
| white-space: pre-wrap; | |
| word-wrap: break-word; | |
| } | |
| .loading { | |
| text-align: center; | |
| padding: 20px; | |
| display: none; | |
| } | |
| .loading.show { | |
| display: block; | |
| } | |
| .spinner { | |
| border: 4px solid #f3f3f3; | |
| border-top: 4px solid #667eea; | |
| border-radius: 50%; | |
| width: 40px; | |
| height: 40px; | |
| animation: spin 1s linear infinite; | |
| margin: 0 auto; | |
| } | |
| @keyframes spin { | |
| 0% { transform: rotate(0deg); } | |
| 100% { transform: rotate(360deg); } | |
| } | |
| .endpoints { | |
| margin-top: 30px; | |
| padding: 20px; | |
| background: #f9f9f9; | |
| border-radius: 8px; | |
| } | |
| .endpoints h3 { | |
| margin-bottom: 15px; | |
| color: #333; | |
| } | |
| .endpoint { | |
| margin-bottom: 10px; | |
| padding: 10px; | |
| background: white; | |
| border-radius: 5px; | |
| font-family: monospace; | |
| } | |
| .method { | |
| display: inline-block; | |
| padding: 3px 8px; | |
| border-radius: 4px; | |
| font-weight: 600; | |
| margin-right: 10px; | |
| } | |
| .method.get { | |
| background: #4caf50; | |
| color: white; | |
| } | |
| .method.post { | |
| background: #2196f3; | |
| color: white; | |
| } | |
| .footer { | |
| background: #f5f5f5; | |
| padding: 20px; | |
| text-align: center; | |
| color: #666; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <div class="header"> | |
| <h1>🤖 AJ API</h1> | |
| <p>Test Your Deployed API</p> | |
| <p style="font-size: 0.9em; margin-top: 10px;">Created by AJ STUDIOZ</p> | |
| </div> | |
| <div class="content"> | |
| <div class="input-group"> | |
| <label for="apiUrl">API URL</label> | |
| <input type="text" id="apiUrl" placeholder="https://your-api-url.com" value=""> | |
| </div> | |
| <div class="input-group"> | |
| <label for="message">Your Message</label> | |
| <textarea id="message" placeholder="Type your message here...">Hello AJ, who are you?</textarea> | |
| </div> | |
| <button class="btn" id="sendBtn" onclick="sendMessage()">Send Message</button> | |
| <div class="loading" id="loading"> | |
| <div class="spinner"></div> | |
| <p style="margin-top: 10px;">Waiting for response...</p> | |
| </div> | |
| <div class="response" id="response"> | |
| <h3>Response:</h3> | |
| <pre id="responseText"></pre> | |
| </div> | |
| <div class="endpoints"> | |
| <h3>Available Endpoints:</h3> | |
| <div class="endpoint"> | |
| <span class="method get">GET</span> | |
| <code>/health</code> - Health check | |
| </div> | |
| <div class="endpoint"> | |
| <span class="method get">GET</span> | |
| <code>/api/info</code> - Model information | |
| </div> | |
| <div class="endpoint"> | |
| <span class="method post">POST</span> | |
| <code>/api/chat</code> - Chat with AJ | |
| </div> | |
| <div class="endpoint"> | |
| <span class="method get">GET</span> | |
| <code>/</code> - API homepage | |
| </div> | |
| </div> | |
| </div> | |
| <div class="footer"> | |
| <p><strong>AJ API</strong> - Created by AJ STUDIOZ</p> | |
| <p style="margin-top: 5px;">🌐 <a href="https://ajstudioz.co.in" target="_blank">ajstudioz.co.in</a></p> | |
| </div> | |
| </div> | |
| <script> | |
| // Auto-detect API URL if running locally | |
| if (window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1') { | |
| document.getElementById('apiUrl').value = 'http://localhost:5000'; | |
| } | |
| async function sendMessage() { | |
| const apiUrl = document.getElementById('apiUrl').value.trim(); | |
| const message = document.getElementById('message').value.trim(); | |
| if (!apiUrl) { | |
| alert('Please enter your API URL'); | |
| return; | |
| } | |
| if (!message) { | |
| alert('Please enter a message'); | |
| return; | |
| } | |
| const sendBtn = document.getElementById('sendBtn'); | |
| const loading = document.getElementById('loading'); | |
| const response = document.getElementById('response'); | |
| const responseText = document.getElementById('responseText'); | |
| // Show loading | |
| sendBtn.disabled = true; | |
| loading.classList.add('show'); | |
| response.classList.remove('show'); | |
| try { | |
| const res = await fetch(`${apiUrl}/api/chat`, { | |
| method: 'POST', | |
| headers: { | |
| 'Content-Type': 'application/json', | |
| }, | |
| body: JSON.stringify({ message: message }) | |
| }); | |
| const data = await res.json(); | |
| // Show response | |
| loading.classList.remove('show'); | |
| response.classList.add('show'); | |
| responseText.textContent = JSON.stringify(data, null, 2); | |
| } catch (error) { | |
| loading.classList.remove('show'); | |
| response.classList.add('show'); | |
| responseText.textContent = `Error: ${error.message}\n\nMake sure:\n1. API URL is correct\n2. API is running\n3. CORS is enabled`; | |
| } finally { | |
| sendBtn.disabled = false; | |
| } | |
| } | |
| // Allow Enter key to send (Ctrl+Enter for newline in textarea) | |
| document.getElementById('message').addEventListener('keydown', function(e) { | |
| if (e.key === 'Enter' && e.ctrlKey) { | |
| sendMessage(); | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> | |