ImageEditor

app.py

@@ -87,7 +87,7 @@ def get_heatmaps(source_num, x_coords, y_coords, uploaded_image):
         
         # アップロード画像の前処理
         if uploaded_image is not None:
-            uploaded_image = preprocess_uploaded_image(uploaded_image, image_size)
+            uploaded_image = preprocess_uploaded_image(uploaded_image['composite'], image_size)
             target_feature_map, _ = model(uploaded_image)
             img = torch.cat((img, uploaded_image))
             feature_map = torch.cat((feature_map, target_feature_map))
@@ -132,77 +132,6 @@ def get_heatmaps(source_num, x_coords, y_coords, uploaded_image):
         plt.close(fig)
         return fig
 
-def process_image(cropped_image_data):
-    # Base64からPILイメージに変換
-    header, base64_data = cropped_image_data.split(',', 1)
-    image_data = base64.b64decode(base64_data)
-    image = Image.open(BytesIO(image_data))
-    return image
-
-# JavaScriptコード
-scripts = """
-async () => {
-    const script = document.createElement("script");
-    script.src = "https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.13/cropper.min.js";
-    document.head.appendChild(script);
-
-    const style = document.createElement("link");
-    style.rel = "stylesheet";
-    style.href = "https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.13/cropper.min.css";
-    document.head.appendChild(style);
-
-    script.onload = () => {
-        let cropper;
-        
-        document.getElementById("input_file_button").onclick = function() {
-            document.querySelector("#input_file").click();
-        };
-
-        document.querySelector("#input_file").addEventListener("change", function(e) {
-            const files = e.target.files;
-            console.log(files);
-            if (files && files.length > 0) {
-                console.log("File selected");
-                document.querySelector("#input_file_button").style.display = "none";
-                document.querySelector("#crop_view").style.display = "block";
-                document.querySelector("#crop_button").style.display = "block";
-                const url = URL.createObjectURL(files[0]);
-                const crop_view = document.getElementById("crop_view");
-                crop_view.src = url;
-
-                if (cropper) {
-                    cropper.destroy();
-                }
-                cropper = new Cropper(crop_view, {
-                    aspectRatio: 1,
-                    viewMode: 1,
-                });
-            }
-        });
-
-        document.getElementById("crop_button").onclick = function() {
-            if (cropper) {
-                const canvas = cropper.getCroppedCanvas();
-                const croppedImageData = canvas.toDataURL();
-                
-                // Gradioにクロップ画像を送信
-                const textbox = document.querySelector("#cropped_image_data textarea");
-                textbox.value = croppedImageData;
-                textbox.dispatchEvent(new Event("input", { bubbles: true }));
-
-                document.getElementById("crop_view").style.display = "none";
-                document.getElementById("crop_button").style.display = "none";
-                document.querySelector("#input_file_button").style.display = "block";
-                
-                cropper.destroy();
-            }
-        };
-        document.getElementById("crop_view").style.display = "none";      
-        document.getElementById("crop_button").style.display = "none";
-    };
-}
-"""
-
 with gr.Blocks() as demo:
     # title
     gr.Markdown("# TripletGeoEncoder Feature Map Visualization")
@@ -214,44 +143,28 @@ with gr.Blocks() as demo:
 
                 "For further information, please contact me on X (formerly Twitter): @Yeq6X.")
 
-    with gr.Row():
-        with gr.Column():
-            source_num = gr.Slider(0, batch_size - 1, step=1, label="Source Image Index")
-            x_coords = gr.Slider(0, image_size - 1, step=1, value=image_size // 2, label="X Coordinate")
-            y_coords = gr.Slider(0, image_size - 1, step=1, value=image_size // 2, label="Y Coordinate")
-
-            # GradioのFileコンポーネントでファイル選択ボタンを追加
-            gr.HTML('<input type="file" id="input_file" style="display:none;">')
-            input_file_button = gr.Button("Upload and Crop Image", elem_id="input_file_button", variant="primary")
-            crop_button = gr.Button("Crop", elem_id="crop_button", variant="primary")
-            gr.HTML('<img id="crop_view" style="max-width:100%;">')
-            cropped_image_data = gr.Textbox(visible=False, elem_id="cropped_image_data")
-            input_image = gr.Image(visible=False, label="Cropped Image", elem_id="input_image")
-            cropped_image_data.change(process_image, inputs=cropped_image_data, outputs=input_image)
-
-            # examples
-            gr.Markdown("# Examples")
-            gr.Examples(
-                examples=[
-                ["resources/examples/2488.jpg"],
-                ["resources/examples/2899.jpg"]
-            ],
-                inputs=[input_image],
-            )
-        with gr.Column():
-            output_plot = gr.Plot()
-
-    # ヒートマップの更新
-    source_num.change(get_heatmaps, inputs=[source_num, x_coords, y_coords, input_image], outputs=output_plot)
-    x_coords.change(get_heatmaps, inputs=[source_num, x_coords, y_coords, input_image], outputs=output_plot)
-    y_coords.change(get_heatmaps, inputs=[source_num, x_coords, y_coords, input_image], outputs=output_plot)
-
-    def change_input_image_hanlder(source_num, x_coords, y_coords, input_image):
-        visible = False if input_image is None else True
-        return get_heatmaps(source_num, x_coords, y_coords, input_image), gr.Image(visible=visible, label="Cropped Image", elem_id="input_image")
-    input_image.change(change_input_image_hanlder, inputs=[source_num, x_coords, y_coords, input_image], outputs=[output_plot, input_image])
-
+    input_image = gr.ImageEditor(label="Cropped Image", elem_id="input_image", crop_size=(112, 112), show_fullscreen_button=True)
+    gr.Interface(
+        get_heatmaps,
+        inputs=[
+            gr.Slider(0, batch_size - 1, step=1, label="Source Image Index"),
+            gr.Slider(0, image_size - 1, step=1, value=image_size // 2, label="X Coordinate"),
+            gr.Slider(0, image_size - 1, step=1, value=image_size // 2, label="Y Coordinate"),
+            input_image
+        ],
+        outputs="plot",
+        live=True,
+    )
+    # examples
+    gr.Markdown("# Examples")
+    gr.Examples(
+        examples=[
+        ["resources/examples/2488.jpg"],
+        ["resources/examples/2899.jpg"]
+    ],
+        inputs=[input_image],
+    )
+            
     # JavaScriptコードをロード
-    demo.load(None, None, None, js=scripts)
     demo.launch()