Spaces:
Sleeping
Sleeping
File size: 6,175 Bytes
1a08f36 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 | <!DOCTYPE html>
<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> |