dotenvの問題の解決2

requirements.txt

@@ -1,77 +1,95 @@
-annotated-types==0.7.0
-easyocr
-anyio==4.6.2.post1
-certifi==2024.8.30
-charset-normalizer==3.4.0
-click==8.1.7
-colorama==0.4.6
-contourpy==1.3.0
-cycler==0.12.1
-diffusers==0.31.0
-fastapi==0.115.4
-filelock==3.16.1
-fire==0.5.0
-fonttools==4.54.1
-fsspec==2024.10.0
-futures==3.0.5
-h11==0.14.0
-huggingface-hub==0.26.2
-idna==3.10
-importlib_metadata==8.5.0
-Jinja2==3.1.4
-joblib==1.4.2
-kiwisolver==1.4.7
-MarkupSafe==3.0.2
-matplotlib==3.9.2
-mpmath==1.3.0
-nest-asyncio==1.6.0
-networkx==3.4.2
-numpy==1.26.4
-opencv-python==4.10.0.84
-opencv-python-headless==4.10.0.84
-packaging==24.1
-pandas==2.2.3
-Pillow==9.5.0
-psutil==6.1.0
-py-cpuinfo==9.0.0
-pycocotools==2.0.8
-pydantic==2.9.2
-pydantic_core==2.23.4
-pyngrok==7.2.1
-pyparsing==3.2.0
-python-dateutil==2.9.0.post0
-python-multipart==0.0.17
-pytz==2024.2
-PyYAML==6.0.2
-regex==2024.9.11
-requests==2.32.3
-safetensors==0.4.5
-scikit-learn==1.5.2
-scipy==1.14.1
-seaborn==0.13.2
-setuptools==75.3.0
-simple-lama-inpainting==0.1.2
-six==1.16.0
-sniffio==1.3.1
-starlette==0.41.2
-supervision==0.9.0
-sympy==1.13.1
-termcolor==2.5.0
-threadpoolctl==3.5.0
-tokenizers==0.20.3
-torch==2.5.1
-torchvision==0.20.1
-tqdm==4.66.6
-transformers==4.46.2
-typing_extensions==4.12.2
-tzdata==2024.2
-ultralytics==8.3.23
-ultralytics-thop==2.0.10
-urllib3==2.2.3
-uvicorn==0.32.0
-zipp==3.20.2
-supervision
-onnxruntime
-google-genai
-python-dotenv
-moondream
+[cite_start]annotated-types==0.7.0 [cite: 1]
+# easyocr はコメントアウトまたは削除し、新しいバージョンを試すか、依存関係の調整を試みます。
+# easyocr # バージョン指定なしで最新版を試すか、Pillow/opencv-python-headlessと互換性のある特定のバージョンを指定する
+# 例: easyocr==0.1.0 (ただし、これは古いバージョンで、他の依存関係と衝突する可能性あり)
+
+[cite_start]anyio==4.6.2.post1 [cite: 1]
+[cite_start]certifi==2024.8.30 [cite: 1]
+[cite_start]charset-normalizer==3.4.0 [cite: 1]
+[cite_start]click==8.1.7 [cite: 1]
+[cite_start]colorama==0.4.6 [cite: 1]
+[cite_start]contourpy==1.3.0 [cite: 1]
+[cite_start]cycler==0.12.1 [cite: 1]
+[cite_start]diffusers==0.31.0 [cite: 1]
+[cite_start]fastapi==0.115.4 [cite: 1]
+[cite_start]filelock==3.16.1 [cite: 1]
+[cite_start]fire==0.5.0 [cite: 1]
+[cite_start]fonttools==4.54.1 [cite: 1]
+[cite_start]fsspec==2024.10.0 [cite: 1]
+[cite_start]futures==3.0.5 [cite: 1]
+[cite_start]h11==0.14.0 [cite: 1]
+[cite_start]huggingface-hub==0.26.2 [cite: 1]
+[cite_start]idna==3.10 [cite: 1]
+[cite_start]importlib_metadata==8.5.0 [cite: 1]
+[cite_start]Jinja2==3.1.4 [cite: 1]
+[cite_start]joblib==1.4.2 [cite: 1]
+[cite_start]kiwisolver==1.4.7 [cite: 1]
+[cite_start]MarkupSafe==3.0.2 [cite: 1]
+[cite_start]matplotlib==3.9.2 [cite: 1]
+[cite_start]mpmath==1.3.0 [cite: 1]
+[cite_start]nest-asyncio==1.6.0 [cite: 1]
+[cite_start]networkx==3.4.2 [cite: 1]
+[cite_start]numpy==1.26.4 [cite: 1]
+
+# opencv-python と opencv-python-headless の両方が指定されているのは冗長です。
+# どちらか一方（headless推奨、GUI不要なため）のみを残します。
+# opencv-python-headless のバージョンは easyocr との互換性を考慮して調整が必要。
+# 最新の easyocr (例えば 1.7.0 以上) はより新しい OpenCV に対応している可能性があります。
+# ここでは一旦、衝突しない可能性のある新しい opencv-python-headless を残し、easyocr の調整で対応します。
+# もし easyocr が動かない場合は、opencv-python-headless のバージョンを下げる必要があります。
+# opencv-python==4.10.0.84 # コメントアウトまたは削除 (headlessを使用するため)
+[cite_start]opencv-python-headless==4.10.0.84 [cite: 1]
+
+[cite_start]packaging==24.1 [cite: 1]
+[cite_start]pandas==2.2.3 [cite: 1]
+
+# Pillow のバージョンも easyocr との競合が発生しています。
+# easyocr のバージョンを更新することで解決を目指します。
+[cite_start]Pillow==9.5.0 [cite: 1]
+
+[cite_start]psutil==6.1.0 [cite: 1]
+[cite_start]py-cpuinfo==9.0.0 [cite: 1]
+[cite_start]pycocotools==2.0.8 [cite: 1]
+[cite_start]pydantic==2.9.2 [cite: 1]
+[cite_start]pydantic_core==2.23.4 [cite: 1]
+[cite_start]pyngrok==7.2.1 [cite: 1]
+[cite_start]pyparsing==3.2.0 [cite: 1]
+[cite_start]python-dateutil==2.9.0.post0 [cite: 1]
+[cite_start]python-multipart==0.0.17 [cite: 1]
+[cite_start]pytz==2024.2 [cite: 1]
+[cite_start]PyYAML==6.0.2 [cite: 1]
+[cite_start]regex==2024.9.11 [cite: 1]
+[cite_start]requests==2.32.3 [cite: 1]
+[cite_start]safetensors==0.4.5 [cite: 1]
+[cite_start]scikit-learn==1.5.2 [cite: 1]
+[cite_start]scipy==1.14.1 [cite: 1]
+[cite_start]seaborn==0.13.2 [cite: 1]
+[cite_start]setuptools==75.3.0 [cite: 1]
+[cite_start]simple-lama-inpainting==0.1.2 [cite: 1]
+[cite_start]six==1.16.0 [cite: 1]
+[cite_start]sniffio==1.3.1 [cite: 1]
+[cite_start]starlette==0.41.2 [cite: 1]
+[cite_start]supervision==0.9.0 [cite: 1] # 最後に重複しているので、ここではコ���ントアウトまたは削除
+[cite_start]sympy==1.13.1 [cite: 1]
+[cite_start]termcolor==2.5.0 [cite: 1]
+[cite_start]threadpoolctl==3.5.0 [cite: 1]
+[cite_start]tokenizers==0.20.3 [cite: 1]
+[cite_start]torch==2.5.1 [cite: 1]
+[cite_start]torchvision==0.20.1 [cite: 1]
+[cite_start]tqdm==4.66.6 [cite: 1]
+[cite_start]transformers==4.46.2 [cite: 1]
+[cite_start]typing_extensions==4.12.2 [cite: 1]
+[cite_start]tzdata==2024.2 [cite: 1]
+[cite_start]ultralytics==8.3.23 [cite: 1]
+[cite_start]ultralytics-thop==2.0.10 [cite: 1]
+[cite_start]urllib3==2.2.3 [cite: 1]
+[cite_start]uvicorn==0.32.0 [cite: 1]
+[cite_start]zipp==3.20.2 [cite: 1]
+
+# 重複を解消し、easyocr の依存関係を考慮して最後に配置
+[cite_start]easyocr [cite: 1] # ここでeasyocrを最新版でインストールすることを試みる
+[cite_start]supervision [cite: 1] # 重複を解消
+[cite_start]onnxruntime [cite: 1]
+[cite_start]google-genai [cite: 1]
+[cite_start]python-dotenv [cite: 1] # dotenv ではなく python-dotenv に修正
+[cite_start]moondream [cite: 1]

templates/index.html

@@ -0,0 +1,500 @@
+<!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>