Spaces:

rein0421
/

AIdentify

Running

App Files Files

rein0421 commited on Nov 10, 2024

Commit

47c0165

verified ·

1 Parent(s): 60c5440

Update app.py

Browse files

Files changed (1) hide show

app.py +68 -12

app.py CHANGED Viewed

@@ -807,9 +807,24 @@ async def read_root():
         .form-control-file { font-size: 1rem; }
         .form-group { margin-bottom: 25px; }
         .btn-success { padding: 10px 20px; border-radius: 50px; }
     </style>
 </head>
 <body>
     <div class="container">
         <h1><i class="fas fa-image"></i> 画像処理アプリ - モザイクとインペイント</h1>
         <div class="form-group">
@@ -851,9 +866,7 @@ async def read_root():
             }
         });
     });
     let resizedImageBlob = null; // 縮小された画像データを保持
     function previewAndResizeImage() {
         const fileInput = document.getElementById('uploadImage');
         const uploadedImage = document.getElementById('uploadedImage');
@@ -867,14 +880,12 @@ async def read_root():
                     const maxHeight = 600;
                     let width = img.width;
                     let height = img.height;
                     // 縦横比を維持して画像を縮小
                     if (width > maxWidth || height > maxHeight) {
                         const ratio = Math.min(maxWidth / width, maxHeight / height);
                         width = width * ratio;
                         height = height * ratio;
                     }
                     const canvas = document.createElement('canvas');
                     canvas.width = width;
                     canvas.height = height;
@@ -884,7 +895,6 @@ async def read_root():
                     // 縮小された画像のプレビュー表示
                     uploadedImage.src = canvas.toDataURL('image/jpeg');
                     uploadedImage.style.display = 'block';
                     // Blobに変換してサーバーに送信できるように保存
                     canvas.toBlob((blob) => {
                         resizedImageBlob = blob; // サーバー送信用の縮小画像データを保存
@@ -895,23 +905,19 @@ async def read_root():
             reader.readAsDataURL(fileInput.files[0]);
         }
     }
     function processImage() {
         const processingType = document.getElementById('processingType').value;
         const riskLevel = $("#slider").slider("value");
         const resultDiv = document.getElementById('result');
         const processedImage = document.getElementById('processedImage');
         const downloadLink = document.getElementById('downloadLink');
         if (!resizedImageBlob) {
             alert("画像を選択して縮小してください。");
             return;
         }
         const formData = new FormData();
         formData.append('image', resizedImageBlob, 'resized_image.jpg'); // 縮小画像を送信
         formData.append('risk_level', riskLevel);
         let apiEndpoint;
         if (processingType === "opencv") {
             apiEndpoint = "/create-mask-and-inpaint-opencv";
@@ -922,9 +928,7 @@ async def read_root():
         } else if (processingType == "mosaic") {
             apiEndpoint = "/create-mask-and-inpaint-mosaic";
         }
         const url = "https://rein0421-aidentify.hf.space" + apiEndpoint;
         fetch(url, {
             method: 'POST',
             body: formData
@@ -946,10 +950,62 @@ async def read_root():
             alert("画像処理に失敗しました。");
         });
     }
 </script>
 </body>
 </html>
     """
     return HTMLResponse(content=html_content)
 if __name__ == "__main__":

         .form-control-file { font-size: 1rem; }
         .form-group { margin-bottom: 25px; }
         .btn-success { padding: 10px 20px; border-radius: 50px; }
+#loadingSpinner {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    color: #007bff;
+    text-align: center;
+    z-index: 9999;
+}
     </style>
 </head>
 <body>
+<div id="loadingSpinner" style="display: none;">
+    <i class="fas fa-spinner fa-spin fa-3x"></i>
+    <p>画像を処理中です。少々お待ちください...</p>
+</div>
     <div class="container">
         <h1><i class="fas fa-image"></i> 画像処理アプリ - モザイクとインペイント</h1>
         <div class="form-group">
             }
         });
     });
     let resizedImageBlob = null; // 縮小された画像データを保持
     function previewAndResizeImage() {
         const fileInput = document.getElementById('uploadImage');
         const uploadedImage = document.getElementById('uploadedImage');
                     const maxHeight = 600;
                     let width = img.width;
                     let height = img.height;
                     // 縦横比を維持して画像を縮小
                     if (width > maxWidth || height > maxHeight) {
                         const ratio = Math.min(maxWidth / width, maxHeight / height);
                         width = width * ratio;
                         height = height * ratio;
                     }
                     const canvas = document.createElement('canvas');
                     canvas.width = width;
                     canvas.height = height;
                     // 縮小された画像のプレビュー表示
                     uploadedImage.src = canvas.toDataURL('image/jpeg');
                     uploadedImage.style.display = 'block';
                     // Blobに変換してサーバーに送信できるように保存
                     canvas.toBlob((blob) => {
                         resizedImageBlob = blob; // サーバー送信用の縮小画像データを保存
             reader.readAsDataURL(fileInput.files[0]);
         }
     }
     function processImage() {
         const processingType = document.getElementById('processingType').value;
         const riskLevel = $("#slider").slider("value");
         const resultDiv = document.getElementById('result');
         const processedImage = document.getElementById('processedImage');
         const downloadLink = document.getElementById('downloadLink');
         if (!resizedImageBlob) {
             alert("画像を選択して縮小してください。");
             return;
         }
         const formData = new FormData();
         formData.append('image', resizedImageBlob, 'resized_image.jpg'); // 縮小画像を送信
         formData.append('risk_level', riskLevel);
         let apiEndpoint;
         if (processingType === "opencv") {
             apiEndpoint = "/create-mask-and-inpaint-opencv";
         } else if (processingType == "mosaic") {
             apiEndpoint = "/create-mask-and-inpaint-mosaic";
         }
         const url = "https://rein0421-aidentify.hf.space" + apiEndpoint;
         fetch(url, {
             method: 'POST',
             body: formData
             alert("画像処理に失敗しました。");
         });
     }
+function processImage() {
+    const processingType = document.getElementById('processingType').value;
+    const riskLevel = $("#slider").slider("value");
+    const resultDiv = document.getElementById('result');
+    const processedImage = document.getElementById('processedImage');
+    const downloadLink = document.getElementById('downloadLink');
+    if (!resizedImageBlob) {
+        alert("画像を選択して縮小してください。");
+        return;
+    }
+    // ローディングスピナーを表示
+    document.getElementById('loadingSpinner').style.display = 'block';
+    const formData = new FormData();
+    formData.append('image', resizedImageBlob, 'resized_image.jpg');
+    formData.append('risk_level', riskLevel);
+    let apiEndpoint;
+    if (processingType === "opencv") {
+        apiEndpoint = "/create-mask-and-inpaint-opencv";
+    } else if (processingType === "simple_lama") {
+        apiEndpoint = "/create-mask-and-inpaint-simple-lama";
+    } else if (processingType === "stamp") {
+        apiEndpoint = "/create-mask-and-inpaint-stamp";
+    } else if (processingType == "mosaic") {
+        apiEndpoint = "/create-mask-and-inpaint-mosaic";
+    }
+    const url = "https://rein0421-aidentify.hf.space" + apiEndpoint;
+    fetch(url, {
+        method: 'POST',
+        body: formData
+    })
+    .then(response => {
+        if (!response.ok) {
+            throw new Error("Network response was not ok");
+        }
+        return response.blob();
+    })
+    .then(blob => {
+        const objectURL = URL.createObjectURL(blob);
+        processedImage.src = objectURL;
+        downloadLink.href = objectURL;
+        resultDiv.style.display = "block";
+    })
+    .catch(error => {
+        console.error("画像処理に失敗しました。", error);
+        alert("画像処理に失敗しました。");
+    })
+    .finally(() => {
+        // ローディングスピナーを非表示にする
+        document.getElementById('loadingSpinner').style.display = 'none';
+    });
+}
 </script>
 </body>
 </html>
     """
     return HTMLResponse(content=html_content)
 if __name__ == "__main__":