Spaces:
Sleeping
Sleeping
| <html lang="en" class="dark"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Health Profiler API Simulator</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <style> | |
| body { font-family: 'Inter', sans-serif; } | |
| @import url('https://rsms.me/inter/inter.css'); | |
| .spinner { | |
| border: 4px solid rgba(0, 0, 0, 0.1); | |
| width: 36px; | |
| height: 36px; | |
| border-radius: 50%; | |
| border-left-color: #09f; | |
| animation: spin 1s ease infinite; | |
| } | |
| @keyframes spin { | |
| 0% { transform: rotate(0deg); } | |
| 100% { transform: rotate(360deg); } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-900 text-gray-200 flex flex-col items-center min-h-screen p-4"> | |
| <div class="w-full max-w-4xl"> | |
| <header class="text-center my-8"> | |
| <h1 class="text-4xl font-bold text-white">Health Risk Profiler API Simulator</h1> | |
| <p class="text-lg text-gray-400 mt-2">Test your FastAPI backend for JSON and Image inputs.</p> | |
| </header> | |
| <main class="grid md:grid-cols-2 gap-8"> | |
| <div class="bg-gray-800 p-6 rounded-xl shadow-lg"> | |
| <h2 class="text-2xl font-semibold mb-4 text-white">Test with JSON Data</h2> | |
| <form id="json-form"> | |
| <label for="json-input" class="block text-sm font-medium text-gray-400 mb-2">JSON Payload:</label> | |
| <textarea id="json-input" rows="8" class="w-full p-3 bg-gray-700 border border-gray-600 rounded-md text-gray-200 focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> | |
| { | |
| "age": 42, | |
| "smoker": true, | |
| "exercise": "rarely", | |
| "diet": "high sugar" | |
| } | |
| </textarea> | |
| <button type="submit" class="w-full mt-4 bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-4 rounded-md transition duration-300"> | |
| Send JSON Request | |
| </button> | |
| </form> | |
| </div> | |
| <div class="bg-gray-800 p-6 rounded-xl shadow-lg"> | |
| <h2 class="text-2xl font-semibold mb-4 text-white">Test with Image Upload</h2> | |
| <form id="image-form" enctype="multipart/form-data"> | |
| <label for="image-input" class="block text-sm font-medium text-gray-400 mb-2">Upload Survey Image:</label> | |
| <input type="file" id="image-input" name="file" accept="image/*" required class="w-full text-sm text-gray-400 file:mr-4 file:py-2 file:px-4 file:rounded-md file:border-0 file:text-sm file:font-semibold file:bg-blue-500 file:text-white hover:file:bg-blue-600"> | |
| <p class="text-xs text-gray-500 mt-2">Tip: Use a clear, high-contrast image for best OCR results.</p> | |
| <button type="submit" class="w-full mt-12 bg-green-600 hover:bg-green-700 text-white font-bold py-3 px-4 rounded-md transition duration-300"> | |
| Send Image Request | |
| </button> | |
| </form> | |
| </div> | |
| </main> | |
| <div class="w-full mt-8 bg-gray-800 p-6 rounded-xl shadow-lg"> | |
| <h2 class="text-2xl font-semibold mb-4 text-white">API Response</h2> | |
| <div id="loading" class="hidden my-4 flex justify-center"> | |
| <div class="spinner"></div> | |
| </div> | |
| <pre id="response-output" class="bg-gray-900 p-4 rounded-md text-sm whitespace-pre-wrap break-all min-h-[100px]"></pre> | |
| </div> | |
| </div> | |
| <script> | |
| const jsonForm = document.getElementById('json-form'); | |
| const imageForm = document.getElementById('image-form'); | |
| const jsonInput = document.getElementById('json-input'); | |
| const imageInput = document.getElementById('image-input'); | |
| const responseOutput = document.getElementById('response-output'); | |
| const loadingIndicator = document.getElementById('loading'); | |
| const apiUrl = 'http://127.0.0.1:8000/analyze'; | |
| const handleRequest = async (requestPromise) => { | |
| loadingIndicator.classList.remove('hidden'); | |
| responseOutput.textContent = ''; | |
| responseOutput.classList.remove('text-red-400', 'text-green-400'); | |
| try { | |
| const response = await requestPromise; | |
| const result = await response.json(); | |
| responseOutput.textContent = JSON.stringify(result, null, 2); | |
| if (response.ok) { | |
| responseOutput.classList.add('text-green-400'); | |
| } else { | |
| responseOutput.classList.add('text-red-400'); | |
| } | |
| } catch (error) { | |
| responseOutput.textContent = `An error occurred: ${error.message}`; | |
| responseOutput.classList.add('text-red-400'); | |
| } finally { | |
| loadingIndicator.classList.add('hidden'); | |
| } | |
| }; | |
| jsonForm.addEventListener('submit', (e) => { | |
| e.preventDefault(); | |
| try { | |
| const jsonData = JSON.parse(jsonInput.value); | |
| handleRequest( | |
| fetch(apiUrl, { | |
| method: 'POST', | |
| headers: { 'Content-Type': 'application/json' }, | |
| body: JSON.stringify(jsonData), | |
| }) | |
| ); | |
| } catch (error) { | |
| responseOutput.textContent = `Invalid JSON: ${error.message}`; | |
| responseOutput.classList.add('text-red-400'); | |
| } | |
| }); | |
| imageForm.addEventListener('submit', (e) => { | |
| e.preventDefault(); | |
| const formData = new FormData(); | |
| formData.append('file', imageInput.files[0]); | |
| handleRequest( | |
| fetch(apiUrl, { | |
| method: 'POST', | |
| body: formData, | |
| }) | |
| ); | |
| }); | |
| </script> | |
| </body> | |
| </html> |