Spaces:

rein0421
/

AIdentify

Running

App Files Files

rein0421 commited on Nov 9, 2024

Commit

bb7504c

verified ·

1 Parent(s): cad90be

Update app.py

Browse files

Files changed (1) hide show

app.py +67 -114

app.py CHANGED Viewed

@@ -798,83 +798,37 @@ async def create_mask_sum(image: UploadFile = File(...), risk_level: int = Form(
 @app.get("/", response_class=HTMLResponse)
 async def read_root():
     html_content = """
 <!DOCTYPE html>
 <html lang="ja">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>画像処理アプリ</title>
-    <!-- Bootstrap CSS -->
     <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
-    <!-- jQuery UI CSS -->
     <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
     <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet">
     <style>
-        body {
-            background-color: #f0f0f5;
-            color: #333;
-            text-align: center;
-            padding: 40px 20px;
-        }
-        h1 {
-            color: #555;
-            margin-bottom: 30px;
-            font-weight: bold;
-        }
-        .image-preview, .processed-preview {
-            max-width: 100%;
-            height: auto;
-            border-radius: 10px;
-            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
-            margin-top: 20px;
-        }
-        #result {
-            margin-top: 40px;
-            display: none;
-        }
-        .slider-container {
-            text-align: left;
-            margin-top: 20px;
-        }
-        .slider-label {
-            font-size: 1.2rem;
-            color: #333;
-        }
-        #slider {
-            margin-top: 10px;
-        }
-        .btn-primary {
-            background-color: #007bff;
-            border-color: #007bff;
-            font-size: 1.2rem;
-            padding: 10px 20px;
-            border-radius: 50px;
-        }
-        .btn-primary:hover {
-            background-color: #0056b3;
-            border-color: #004085;
-        }
-        .form-control, .custom-select {
-            border-radius: 20px;
-            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
-        }
-        .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">
-            <input type="file" id="uploadImage" class="form-control-file" accept="image/*" onchange="previewImage()">
         </div>
         <img id="uploadedImage" class="image-preview" src="#" alt="アップロードされた画像" style="display: none;">
         <div class="form-group mt-4">
@@ -897,14 +851,11 @@ async def read_root():
             <a id="downloadLink" class="btn btn-success mt-3" href="#" download="processed_image.jpg">処理された画像をダウンロード</a>
         </div>
     </div>
-    <!-- jQuery and Bootstrap JS -->
     <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
     <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
-    <!-- jQuery UI -->
     <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
     <script>
         $(function() {
-            // スライダーの設定
             $("#slider").slider({
                 range: "min",
                 value: 50,
@@ -916,22 +867,30 @@ async def read_root():
             });
         });
-        function previewImage() {
             const fileInput = document.getElementById('uploadImage');
             const uploadedImage = document.getElementById('uploadedImage');
             if (fileInput.files && fileInput.files[0]) {
                 const reader = new FileReader();
-                reader.onload = function (e) {
                     const img = new Image();
                     img.onload = function() {
                         const canvas = document.createElement('canvas');
                         const ctx = canvas.getContext('2d');
-                        canvas.width = 640;
-                        canvas.height = 480;
-                        ctx.drawImage(img, 0, 0, 640, 480);
                         uploadedImage.src = canvas.toDataURL('image/jpeg');
                         uploadedImage.style.display = 'block';
-                        uploadedImage.dataset.resizedImage = uploadedImage.src;
                     };
                     img.src = e.target.result;
                 };
@@ -940,63 +899,57 @@ async def read_root():
         }
         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');
-            const resizedImageDataURL = document.getElementById('uploadedImage').dataset.resizedImage;
-            if (!resizedImageDataURL) {
                 alert("画像を選択してください。");
                 return;
             }
-            fetch(resizedImageDataURL)
-                .then(res => res.blob())
-                .then(blob => {
-                    const formData = new FormData();
-                    formData.append('image', blob, '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("画像処理に失敗しました。");
-                    });
-                });
         }
     </script>
 </body>
 </html>
     """
     return HTMLResponse(content=html_content)
 if __name__ == "__main__":

 @app.get("/", response_class=HTMLResponse)
 async def read_root():
     html_content = """
 <!DOCTYPE html>
 <html lang="ja">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>画像処理アプリ</title>
     <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
     <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
     <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet">
     <style>
+        body { background-color: #f0f0f5; color: #333; text-align: center; padding: 40px 20px; }
+        h1 { color: #555; margin-bottom: 30px; font-weight: bold; }
+        .image-preview, .processed-preview { max-width: 100%; height: auto; border-radius: 10px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); margin-top: 20px; }
+        #result { margin-top: 40px; display: none; }
+        .slider-container { text-align: left; margin-top: 20px; }
+        .slider-label { font-size: 1.2rem; color: #333; }
+        #slider { margin-top: 10px; }
+        .btn-primary { background-color: #007bff; border-color: #007bff; font-size: 1.2rem; padding: 10px 20px; border-radius: 50px; }
+        .btn-primary:hover { background-color: #0056b3; border-color: #004085; }
+        .form-control, .custom-select { border-radius: 20px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); }
+        .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">
+            <input type="file" id="uploadImage" class="form-control-file" accept="image/*" onchange="previewAndResizeImage()">
         </div>
         <img id="uploadedImage" class="image-preview" src="#" alt="アップロードされた画像" style="display: none;">
         <div class="form-group mt-4">
             <a id="downloadLink" class="btn btn-success mt-3" href="#" download="processed_image.jpg">処理された画像をダウンロード</a>
         </div>
     </div>
     <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
     <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
     <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
     <script>
         $(function() {
             $("#slider").slider({
                 range: "min",
                 value: 50,
             });
         });
+        function previewAndResizeImage() {
             const fileInput = document.getElementById('uploadImage');
             const uploadedImage = document.getElementById('uploadedImage');
             if (fileInput.files && fileInput.files[0]) {
                 const reader = new FileReader();
+                reader.onload = function(e) {
                     const img = new Image();
                     img.onload = function() {
+                        const maxWidth = 860;
+                        const maxHeight = 860;
+                        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;
                         const ctx = canvas.getContext('2d');
+                        ctx.drawImage(img, 0, 0, width, height);
                         uploadedImage.src = canvas.toDataURL('image/jpeg');
                         uploadedImage.style.display = 'block';
                     };
                     img.src = e.target.result;
                 };
         }
         function processImage() {
+            const fileInput = document.getElementById('uploadImage');
             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 (fileInput.files.length === 0) {
                 alert("画像を選択してください。");
                 return;
             }
+            const file = fileInput.files[0];
+            const formData = new FormData();
+            formData.append('image', file);
+            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("画像処理に失敗しました。");
+            });
         }
     </script>
 </body>
 </html>
     """
     return HTMLResponse(content=html_content)
 if __name__ == "__main__":