Spaces:

rein0421
/

AIdentify

Sleeping

App Files Files

syurein commited on Jul 1

Commit

fd6583c

1 Parent(s): f695a59

とりあえず整理

Browse files

Files changed (1) hide show

app.py +5 -509

app.py CHANGED Viewed

@@ -11,7 +11,7 @@
 import os
 import supervision as sv
 from PIL import Image, ImageFilter
@@ -77,7 +77,7 @@ app.add_middleware(
 HOME = "./"
 dangerarray=[10,30,90,50,80,20,40,70,100,60]#ここに各クラスターの危険度を設定しておく
 #ここで認識する精度を上げたり下げたりできる
@@ -754,7 +754,7 @@ async def create_mask_and_inpaint_simple_lama(
     # Save the input image
     input_path = save_image(image.file, "input.jpg")
-    print('1111',point1,point2)
     # Create a mask image (using the new process_image function)
     mask_path = special_process_image_yolo(risk_level, input_path, point1, point2,thresholds=thresholds)
@@ -790,7 +790,7 @@ async def create_mask_sum(image: UploadFile = File(...), risk_level: int = Form(
     input_path = save_image(image.file, f"./input_{timestamp}_{unique_id}.jpg")
     mask_path = special_process_image_yolo(risk_level, input_path, point1, point2,thresholds=thresholds)
     output_path = f"./output_simple_lama_{timestamp}_{unique_id}.jpg"
     # OpenCVでインペイント
     inpaint_image_with_mask1(input_path, mask_path, output_path)
@@ -902,509 +902,5 @@ async def mosaic_faces(reference_image: UploadFile = File(...), test_image: Uplo
 @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;
-            padding: 40px 20px;
-        }
-        /* ... 他の既存のスタイル ... */
-        /* ヘルプボタンのスタイル */
-        .help-button {
-            position: fixed;
-            bottom: 20px;
-            right: 20px;
-            width: 50px;
-            height: 50px;
-            border-radius: 50%;
-            background-color: #007bff;
-            color: white;
-            border: none;
-            box-shadow: 0 2px 10px rgba(0,0,0,0.2);
-            z-index: 1000;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 1.5rem;
-        }
-        .help-button:hover {
-            background-color: #0056b3;
-        }
-        /* モーダル内のスタイル */
-        .help-section {
-            margin-bottom: 30px;
-            padding: 15px;
-            border-radius: 8px;
-            background-color: #f8f9fa;
-        }
-        .help-section h4 {
-            color: #007bff;
-            margin-bottom: 15px;
-        }
-        .step-list {
-            padding-left: 20px;
-        }
-        .step-list li {
-            margin-bottom: 10px;
-        }
-        .modal-body img {
-            max-width: 100%;
-            border-radius: 5px;
-            margin: 10px 0;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
-        }
-    </style>
-    <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> AIデンティファイ</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>
-    <!-- ヘルプボタン -->
-    <button class="help-button" data-toggle="modal" data-target="#helpModal">
-        <i class="fas fa-question"></i>
-    </button>
-    <!-- ヘルプモーダル -->
-    <div class="modal fade" id="helpModal" tabindex="-1" role="dialog" aria-labelledby="helpModalLabel" aria-hidden="true">
-        <div class="modal-dialog modal-lg" role="document">
-            <div class="modal-content">
-                <div class="modal-header">
-                    <h5 class="modal-title" id="helpModalLabel">
-                        <i class="fas fa-question-circle"></i> AIデンティファイの使い方
-                    </h5>
-                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-                        <span aria-hidden="true">&times;</span>
-                    </button>
-                </div>
-                <div class="modal-body">
-                    <!-- 一般処理モードの説明 -->
-                    <div class="help-section">
-                        <h4><i class="fas fa-magic"></i> 個人情報保護モードの使い方</h4>
-                        <ol class="step-list">
-			　　<li>このモードではあなたの個人情報を簡単に保護することができます</li>
-                            <li>「画像をアップロード」ボタンをクリックして、処理したい画像を選択します。</li>
-                            <li>処理方法を以下から選択します：
-                                <ul>
-                                    <li><strong>OpenCVインペイント:</strong> 一般的な画像補正</li>
-                                    <li><strong>Simple Lamaインペイント:</strong> 高度な画像補正</li>
-                                    <li><strong>stampインペイント:</strong> スタンプによる画像加工</li>
-                                    <li><strong>mosaicインペイント:</strong> モザイクによる加工</li>
-                                </ul>
-                            </li>
-                            <li>スライダーでリスクレベルを調整します（0-100）：
-                                <ul>
-                                    <li>値が高いほど、より強い保護が適用されます</li>
-                                    <li>推奨値は30前後です</li>
-                                </ul>
-                            </li>
-                            <li>「処理開始」ボタンをクリックして処理を実行します。</li>
-                        </ol>
-                    </div>
-                    <!-- 顔照合モードの説明 -->
-                    <div class="help-section">
-                        <h4><i class="fas fa-user-circle"></i> 顔保護モードの使い方</h4>
-                        <ol class="step-list">
-			　　<li>このモードではあなたの顔以外を隠すことができます。</li>
-                            <li>「処理する画像をアップロード」から、処理したい画像を選択します。</li>
-                            <li>自分の顔の入力方法を選択します：
-                                <ul>
-                                    <li><strong>ファイルからアップロード:</strong> 既存の顔写真を使用</li>
-                                    <li><strong>カメラで撮影:</strong> Webカメラを使用して顔写真を撮影</li>
-                                </ul>
-                            </li>
-                            <li>選択した方法で顔画像を入力します。</li>
-                            <li>スライダーでリスクレベルを調整します。</li>
-                            <li>「処理開始」ボタンをクリックして処理を実行します。</li>
-                        </ol>
-                    </div>
-                    <!-- 共通の注意事項 -->
-                    <div class="help-section">
-                        <h4><i class="fas fa-exclamation-triangle"></i> 注意事項</h4>
-                        <ul>
-                            <li>アップロードする画像は1200×1200ピクセ���以下に自動でリサイズされます。</li>
-                            <li>処理には数秒から30秒ほどかかる場合があります。</li>
-                            <li>処理が完了すると、処理結果が表示され、画像のダウンロードが可能になります。</li>
-                            <li>ブラウザのプライバシー設定によっては、カメラの使用許可が必要な場合があります。</li>
-                        </ul>
-                    </div>
-                </div>
-                <div class="modal-footer">
-                    <button type="button" class="btn btn-secondary" data-dismiss="modal">閉じる</button>
-                </div>
-            </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 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>
- <script>
-    </script>
-</body>
-</html>
-    """
-    return HTMLResponse(content=html_content)

+from fastapi.templating import Jinja2Templates
 import os
 import supervision as sv
 from PIL import Image, ImageFilter
 HOME = "./"
+templates = Jinja2Templates(directory="templates")
 dangerarray=[10,30,90,50,80,20,40,70,100,60]#ここに各クラスターの危険度を設定しておく
 #ここで認識する精度を上げたり下げたりできる
     # Save the input image
     input_path = save_image(image.file, "input.jpg")
+    print('point1,point2',point1,point2)
     # Create a mask image (using the new process_image function)
     mask_path = special_process_image_yolo(risk_level, input_path, point1, point2,thresholds=thresholds)
     input_path = save_image(image.file, f"./input_{timestamp}_{unique_id}.jpg")
     mask_path = special_process_image_yolo(risk_level, input_path, point1, point2,thresholds=thresholds)
     output_path = f"./output_simple_lama_{timestamp}_{unique_id}.jpg"
+    print('point1,point2',point1,point2)#消去したくない範囲のこと
     # OpenCVでインペイント
     inpaint_image_with_mask1(input_path, mask_path, output_path)
 @app.get("/", response_class=HTMLResponse)
 async def read_root():
+    return templates.TemplateResponse("index.html")