Spaces:
Running
Running
Update AB/index.html
Browse files- AB/index.html +29 -2
AB/index.html
CHANGED
|
@@ -4,12 +4,31 @@
|
|
| 4 |
<meta charset="UTF-8">
|
| 5 |
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 6 |
<title>Upload and Process Image</title>
|
| 7 |
-
<style>
|
| 8 |
#processedImage img {
|
| 9 |
max-width: 100%;
|
| 10 |
max-height: 400px; /* Adjust the maximum height as needed */
|
| 11 |
}
|
| 12 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 13 |
</head>
|
| 14 |
<body>
|
| 15 |
<h1>Upload and Process Image</h1>
|
|
@@ -32,6 +51,7 @@
|
|
| 32 |
<button type="submit" onclick="uploadAndProcessImage()">Upload and Process Image</button>
|
| 33 |
</form>
|
| 34 |
|
|
|
|
| 35 |
<div id="processedImage"></div>
|
| 36 |
|
| 37 |
<script>
|
|
@@ -41,11 +61,18 @@
|
|
| 41 |
const form = document.getElementById('uploadForm');
|
| 42 |
const formData = new FormData(form);
|
| 43 |
|
|
|
|
|
|
|
|
|
|
|
|
|
| 44 |
const response = await fetch('/upload/', {
|
| 45 |
method: 'POST',
|
| 46 |
body: formData
|
| 47 |
});
|
| 48 |
|
|
|
|
|
|
|
|
|
|
| 49 |
if (response.ok) {
|
| 50 |
const processedImage = await response.blob();
|
| 51 |
const imageUrl = URL.createObjectURL(processedImage);
|
|
|
|
| 4 |
<meta charset="UTF-8">
|
| 5 |
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 6 |
<title>Upload and Process Image</title>
|
| 7 |
+
<style>
|
| 8 |
#processedImage img {
|
| 9 |
max-width: 100%;
|
| 10 |
max-height: 400px; /* Adjust the maximum height as needed */
|
| 11 |
}
|
| 12 |
+
|
| 13 |
+
#loadingSpinner {
|
| 14 |
+
display: none;
|
| 15 |
+
}
|
| 16 |
+
|
| 17 |
+
.loader {
|
| 18 |
+
border: 4px solid #f3f3f3; /* Light grey */
|
| 19 |
+
border-top: 4px solid #3498db; /* Blue */
|
| 20 |
+
border-radius: 50%;
|
| 21 |
+
width: 30px;
|
| 22 |
+
height: 30px;
|
| 23 |
+
animation: spin 1s linear infinite;
|
| 24 |
+
margin: 20px auto;
|
| 25 |
+
}
|
| 26 |
+
|
| 27 |
+
@keyframes spin {
|
| 28 |
+
0% { transform: rotate(0deg); }
|
| 29 |
+
100% { transform: rotate(360deg); }
|
| 30 |
+
}
|
| 31 |
+
</style>
|
| 32 |
</head>
|
| 33 |
<body>
|
| 34 |
<h1>Upload and Process Image</h1>
|
|
|
|
| 51 |
<button type="submit" onclick="uploadAndProcessImage()">Upload and Process Image</button>
|
| 52 |
</form>
|
| 53 |
|
| 54 |
+
<div id="loadingSpinner" class="loader"></div>
|
| 55 |
<div id="processedImage"></div>
|
| 56 |
|
| 57 |
<script>
|
|
|
|
| 61 |
const form = document.getElementById('uploadForm');
|
| 62 |
const formData = new FormData(form);
|
| 63 |
|
| 64 |
+
// Show loading spinner
|
| 65 |
+
document.getElementById('loadingSpinner').style.display = 'block';
|
| 66 |
+
document.getElementById('processedImage').innerHTML = '';
|
| 67 |
+
|
| 68 |
const response = await fetch('/upload/', {
|
| 69 |
method: 'POST',
|
| 70 |
body: formData
|
| 71 |
});
|
| 72 |
|
| 73 |
+
// Hide loading spinner
|
| 74 |
+
document.getElementById('loadingSpinner').style.display = 'none';
|
| 75 |
+
|
| 76 |
if (response.ok) {
|
| 77 |
const processedImage = await response.blob();
|
| 78 |
const imageUrl = URL.createObjectURL(processedImage);
|