Update app.py

app.py

@@ -854,102 +854,117 @@ async def read_root():
     <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,
-                min: 0,
-                max: 100,
-                slide: function(event, ui) {
-                    $("#riskLevelLabel").text(ui.value);
-                }
-            });
+   <script>
+    $(function() {
+        $("#slider").slider({
+            range: "min",
+            value: 50,
+            min: 0,
+            max: 100,
+            slide: function(event, ui) {
+                $("#riskLevelLabel").text(ui.value);
+            }
         });
-
-        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 = 640;
-                        const maxHeight = 640;
-                        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;
+    });
+
+    let resizedImageBlob = null; // 縮小された画像データを保持
+
+    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 = 600;
+                    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;
+                    const ctx = canvas.getContext('2d');
+                    ctx.drawImage(img, 0, 0, width, height);
+                    
+                    // 縮小された画像のプレビュー表示
+                    uploadedImage.src = canvas.toDataURL('image/jpeg');
+                    uploadedImage.style.display = 'block';
+
+                    // Blobに変換してサーバーに送信できるように保存
+                    canvas.toBlob((blob) => {
+                        resizedImageBlob = blob; // サーバー送信用の縮小画像データを保存
+                    }, 'image/jpeg');
                 };
-                reader.readAsDataURL(fileInput.files[0]);
-            }
+                img.src = e.target.result;
+            };
+            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;
         }
 
-        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("画像処理に失敗しました。");
-            });
+        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";
         }
-    </script>
+
+        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__":