Spaces:

rein0421
/

AIdentify

Runtime error

App Files Files

rein0421 commited on Nov 11, 2024

Commit

4e8d134

verified ·

1 Parent(s): e3bb217

Update app.py

Browse files

Files changed (1) hide show

app.py +348 -136

app.py CHANGED Viewed

@@ -903,170 +903,382 @@ async def read_root():
     <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; }
         #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">
-            <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">
-            <label for="processingType">処理方法を選択:</label>
-            <select id="processingType" class="custom-select">
-                <option value="opencv">OpenCVインペイント</option>
-                <option value="simple_lama">Simple Lamaインペイント</option>
-                <option value="stamp">stampインペイント</option>
-                <option value="mosaic">mosaicインペイント</option>
-            </select>
-        </div>
-        <div class="slider-container">
-            <label for="riskLevel" class="slider-label">リスクレベル (0-100): <span id="riskLevelLabel">50</span></label>
-            <div id="slider"></div>
-        </div>
-        <button class="btn btn-primary mt-4" onclick="processImage()">処理開始</button>
-        <div id="result" class="mt-5">
-            <h2>処理結果:</h2>
-            <img id="processedImage" class="processed-preview" src="" alt="">
-            <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,
-            min: 0,
-            max: 100,
-            slide: function(event, ui) {
-                $("#riskLevelLabel").text(ui.value);
-            }
         });
-    });
-    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');
                 };
-                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;
         }
-        // ローディングスピナーを表示
-        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)

     <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;
+            padding: 40px 20px;
+        }
+        h1 {
+            color: #555;
+            margin-bottom: 30px;
+            font-weight: bold;
+            text-align: center;
+        }
+        .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;
+        }
+        .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);
+        }
+        .nav-tabs {
+            margin-bottom: 30px;
+            border-bottom: 2px solid #007bff;
+        }
+        .nav-tabs .nav-link {
+            border: none;
+            color: #555;
+            font-size: 1.1rem;
+            padding: 12px 25px;
+            border-radius: 10px 10px 0 0;
+        }
+        .nav-tabs .nav-link.active {
+            background-color: #007bff;
+            color: white;
+        }
+        .tab-content {
+            padding: 20px;
+            background: white;
+            border-radius: 0 0 10px 10px;
+            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+        }
         #loadingSpinner {
             position: fixed;
             top: 50%;
             left: 50%;
             transform: translate(-50%, -50%);
+            background: rgba(255,255,255,0.9);
+            padding: 20px;
+            border-radius: 10px;
+            box-shadow: 0 0 15px rgba(0,0,0,0.2);
             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>
+        <ul class="nav nav-tabs" role="tablist">
+            <li class="nav-item">
+                <a class="nav-link active" id="general-tab" data-toggle="tab" href="#general" role="tab">
+                    <i class="fas fa-magic"></i> 一般処理モード
+                </a>
+            </li>
+            <li class="nav-item">
+                <a class="nav-link" id="face-tab" data-toggle="tab" href="#face" role="tab">
+                    <i class="fas fa-user-circle"></i> 顔照合モード
+                </a>
+            </li>
+        </ul>
+        <div class="tab-content">
+            <!-- 一般処理モード -->
+            <div class="tab-pane fade show active" id="general" role="tabpanel">
+                <div class="form-group">
+                    <label for="uploadImage1">画像をアップロード:</label>
+                    <input type="file" id="uploadImage1" class="form-control-file" accept="image/*" onchange="previewAndResizeImage('uploadImage1', 'uploadedImage1')">
+                </div>
+                <img id="uploadedImage1" class="image-preview" src="#" alt="アップロードされた画像" style="display: none;">
+                <div class="form-group mt-4">
+                    <label for="processingType">処理方法を選択:</label>
+                    <select id="processingType" class="custom-select">
+                        <option value="opencv">OpenCVインペイント</option>
+                        <option value="simple_lama">Simple Lamaインペイント</option>
+                        <option value="stamp">stampインペイント</option>
+                        <option value="mosaic">mosaicインペイント</option>
+                    </select>
+                </div>
+                <div class="slider-container">
+                    <label for="riskLevel1" class="slider-label">リスクレベル (0-100): <span id="riskLevelLabel1">50</span></label>
+                    <div id="slider1"></div>
+                </div>
+                <button class="btn btn-primary mt-4" onclick="processGeneralImage()">処理開始</button>
+            </div>
+            <!-- 顔照合モード -->
+            <div class="tab-pane fade" id="face" role="tabpanel">
+                <div class="form-group">
+                    <label for="uploadImage2">処理する画像をアップロード:</label>
+                    <input type="file" id="uploadImage2" class="form-control-file" accept="image/*" onchange="previewAndResizeImage('uploadImage2', 'uploadedImage2')">
+                </div>
+                <img id="uploadedImage2" class="image-preview" src="#" alt="アップロードされた画像" style="display: none;">
+                <div class="form-group mt-4">
+                    <label for="faceOption">自分の顔の入力方法を選択:</label>
+                    <select id="faceOption" class="custom-select" onchange="toggleFaceInput()">
+                        <option value="upload">ファイルからアップロード</option>
+                        <option value="camera">カメラで撮影</option>
+                    </select>
+                </div>
+                <div class="form-group" id="uploadFaceGroup">
+                    <label for="uploadFace">顔画像をアップロード:</label>
+                    <input type="file" id="uploadFace" class="form-control-file" accept="image/*" onchange="previewFaceImage()">
+                    <img id="facePreview" class="image-preview" src="#" alt="顔画像のプレビュー" style="display: none;">
+                </div>
+                <div class="form-group" id="cameraFaceGroup" style="display: none;">
+                    <video id="cameraStream" width="100%" autoplay></video>
+                    <button class="btn btn-secondary mt-2" onclick="captureFaceImage()">顔をキャプチャ</button>
+                    <canvas id="cameraCanvas" style="display: none;"></canvas>
+                </div>
+                <div class="slider-container">
+                    <label for="riskLevel2" class="slider-label">リスクレベル (0-100): <span id="riskLevelLabel2">50</span></label>
+                    <div id="slider2"></div>
+                </div>
+                <button class="btn btn-primary mt-4" onclick="processFaceImage()">処理開始</button>
+            </div>
+            <!-- 処理結果（共通） -->
+            <div id="result" class="mt-5">
+                <h2>��理結果:</h2>
+                <img id="processedImage" class="processed-preview" src="" alt="">
+                <a id="downloadLink" class="btn btn-success mt-3" href="#" download="processed_image.jpg">処理された画像をダウンロード</a>
+            </div>
         </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() {
+            $("#slider1, #slider2").slider({
+                range: "min",
+                value: 50,
+                min: 0,
+                max: 100,
+                slide: function(event, ui) {
+                    const labelId = $(this).attr('id') === 'slider1' ? 'riskLevelLabel1' : 'riskLevelLabel2';
+                    $("#" + labelId).text(ui.value);
+                }
+            });
         });
+        let resizedImageBlob1 = null;
+        let resizedImageBlob2 = null;
+        let faceImageBlob = null;
+        function previewAndResizeImage(inputId, imageId) {
+            const fileInput = document.getElementById(inputId);
+            const uploadedImage = document.getElementById(imageId);
+            if (fileInput.files && fileInput.files[0]) {
+                const reader = new FileReader();
+                reader.onload = function(e) {
+                    const img = new Image();
+                    img.onload = function() {
+                        const maxWidth = 1200;
+                        const maxHeight = 1200;
+                        let width = img.width;
+                        let height = img.height;
+                        if (width > maxWidth || height > maxHeight) {
+                            const ratio = Math.min(maxWidth / width, maxHeight / height);
+                            width *= ratio;
+                            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';
+                        canvas.toBlob((blob) => {
+                            if (inputId === 'uploadImage1') {
+                                resizedImageBlob1 = blob;
+                            } else {
+                                resizedImageBlob2 = blob;
+                            }
+                        }, 'image/jpeg');
+                    };
+                    img.src = e.target.result;
                 };
+                reader.readAsDataURL(fileInput.files[0]);
+            }
         }
+        function previewFaceImage() {
+            const fileInput = document.getElementById('uploadFace');
+            if (fileInput.files && fileInput.files[0]) {
+                const reader = new FileReader();
+                reader.onload = function(e) {
+                    document.getElementById('facePreview').src = e.target.result;
+                    document.getElementById('facePreview').style.display = 'block';
+                };
+                reader.readAsDataURL(fileInput.files[0]);
+                faceImageBlob = fileInput.files[0];
+            }
         }
+        function toggleFaceInput() {
+            const faceOption = document.getElementById('faceOption').value;
+            document.getElementById('uploadFaceGroup').style.display = faceOption === 'upload' ? 'block' : 'none';
+            document.getElementById('cameraFaceGroup').style.display = faceOption === 'camera' ? 'block' : 'none';
+            if (faceOption === 'camera') {
+                startCamera();
+            } else {
+                stopCamera();
+            }
+        }
+        function startCamera() {
+            const video = document.getElementById('cameraStream');
+            navigator.mediaDevices.getUserMedia({ video: true })
+                .then(stream => video.srcObject = stream)
+                .catch(error => console.error('カメラの起動に失敗しました:', error));
+        }
+        function stopCamera() {
+            const video = document.getElementById('cameraStream');
+            const stream = video.srcObject;
+            if (stream) {
+                stream.getTracks().forEach(track => track.stop());
+                video.srcObject = null;
+            }
+        }
+        function captureFaceImage() {
+            const video = document.getElementById('cameraStream');
+            const canvas = document.getElementById('cameraCanvas');
+            const context = canvas.getContext('2d');
+            canvas.width = video.videoWidth;
+            canvas.height = video.videoHeight;
+            context.drawImage(video, 0, 0, canvas.width, canvas.height);
+            canvas.toBlob(blob => faceImageBlob = blob, 'image/jpeg');
+            stopCamera();
+        }
+        function processGeneralImage() {
+            if (!resizedImageBlob1) {
+                alert("画像を選択してください。");
+                return;
+            }
+            const processingType = document.getElementById('processingType').value;
+            const riskLevel = $("#slider1").slider("value");
+            showLoadingSpinner();
+            const formData = new FormData();
+            formData.append('image', resizedImageBlob1, '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";
+            }
+            processImageRequest(formData, "https://rein0421-aidentify.hf.space" + apiEndpoint);
         }
+        function processFaceImage() {
+            if (!resizedImageBlob2 || !faceImageBlob) {
+                alert("処理する画像と顔画像の両方を設定してください。");
+                return;
             }
+           const riskLevel = $("#slider2").slider("value");
+            showLoadingSpinner();
+            const formData = new FormData();
+            formData.append('reference_image', faceImageBlob, 'reference_image.jpg');
+            formData.append('test_image', resizedImageBlob2, 'test_image.jpg');
+            formData.append('risk_level', riskLevel);
+            processImageRequest(formData, "https://rein0421-aidentify.hf.space/mosaic_faces");
+        }
+        function processImageRequest(formData, url) {
+            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);
+                document.getElementById('processedImage').src = objectURL;
+                document.getElementById('downloadLink').href = objectURL;
+                document.getElementById('result').style.display = "block";
+            })
+            .catch(error => {
+                console.error("画像処理に失敗しました。", error);
+                alert("画像処理に失敗しました。");
+            })
+            .finally(() => {
+                hideLoadingSpinner();
+            });
+        }
+        function showLoadingSpinner() {
+            document.getElementById('loadingSpinner').style.display = 'block';
+        }
+        function hideLoadingSpinner() {
             document.getElementById('loadingSpinner').style.display = 'none';
+        }
+        // タブ切り替え時の処理
+        $('.nav-tabs a').on('shown.bs.tab', function (e) {
+            // 結果表示をリセット
+            document.getElementById('result').style.display = 'none';
+            document.getElementById('processedImage').src = '';
+            document.getElementById('downloadLink').href = '#';
         });
     </script>
 </body>
 </html>
     """
     return HTMLResponse(content=html_content)