with switcher popup for label input

flask/app.py

@@ -76,8 +76,8 @@ def classifier(image):
 
     return output, values
 
-def anomalib_inference(input_img, values):
-    if values == 1:
+def anomalib_inference(input_img, values, label):
+    if label == "front" or label == "Front":
         print("front")
         model_path = "bag_front_anomalib.pt"
 
@@ -99,7 +99,7 @@ def anomalib_inference(input_img, values):
         )
         inference_results = infer(train_args)
 
-    else:
+    elif label == "back" or label == "Back":
         print("back")
         model_path = "bag_back_anomalib.pt"
 
@@ -161,9 +161,10 @@ def detectAnomaly():
         print(image_file)
         input_img = image_file.read()
         values = int(request.form['values'])
+        label = request.form.get('label')
 
 
-        processed_image, results = anomalib_inference(input_img, values)
+        processed_image, results = anomalib_inference(input_img, values, label)
 
 
         return jsonify({'detectedImage': processed_image})

src/renderer/Flow.js

@@ -17,6 +17,7 @@ import OutputNode from '../nodes/OutputNode';
 import Footer from './Footer';
 import NodeSelect from '../nodes/NodeSelect';
 import ModelProvider from '../nodes/modelProvider';
+import Modal from './Modal';
 // import WebcamInputNode from '../nodes/WebcamNode';
 
 const nodeTypes = {
@@ -132,6 +133,8 @@ function Flow({ projectType }) {
   const [shouldTriggerRequest, setShouldTriggerRequest] = useState(false);
   const [currentNodeId, setCurrentNodeId] = useState(null);
   const [values, setValues] = useState(null);
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [userInput, setUserInput] = useState("");
 
   const frameCaptureInterval = useRef(null);
   const updateOutputNodeEdges = useCallback((newEdges) => {
@@ -200,7 +203,7 @@ function Flow({ projectType }) {
           (targetNode.data.code === 'Ad' )
         ) {
 
-          triggerBackendAnomalyRequest(inputImage, targetNode.id);
+          triggerBackendAnomalyRequest(inputImage, targetNode.id, userInput);
 
         }
 
@@ -234,12 +237,13 @@ function Flow({ projectType }) {
           sourceNode.type === 'orientation' &&
           targetNode.type === 'switcher'
         ) {
+          setIsModalOpen(true);
           handleDetection(result, targetNode.id);
         }
 
         if (
           sourceNode.type === 'switcher' &&
-          (targetNode.data.code === 'Ad' || targetNode.type === 'anomaly')
+          (targetNode.data.code === 'Ad' )
         ) {
           // const n = nodes.find((node) => node.id === "4");
           const image = sourceNode?.data.detectedImage;
@@ -248,7 +252,7 @@ function Flow({ projectType }) {
           urlToBlob(image).then((imageBlob) => {
             if (imageBlob) {
               // console.log(imageBlob);
-              triggerBackendAnomalyRequest(imageBlob, targetNode.id);
+              triggerBackendAnomalyRequest(imageBlob, targetNode.id, userInput);
             } else {
               console.error('No image blob received');
             }
@@ -461,11 +465,12 @@ function Flow({ projectType }) {
     }
   };
 
-  const triggerBackendAnomalyRequest = (imageBlob, nodeId) => {
+  const triggerBackendAnomalyRequest = (imageBlob, nodeId, label) => {
     if (imageBlob) {
       const formData = new FormData();
       formData.append('image', imageBlob);
       formData.append('values', values);
+      formData.append('label', label);
       axios
         .post('http://localhost:5000/detectAnomaly', formData, {
           headers: {
@@ -508,6 +513,10 @@ function Flow({ projectType }) {
     [updateOutputNodeEdges],
   );
 
+  const handleModalSubmit = (input) => {
+    setUserInput(input);
+  };
+
   return (
     <>
       <div
@@ -533,6 +542,11 @@ function Flow({ projectType }) {
       </div>
 
       <Footer image={finalResult} />
+      <Modal
+        isOpen={isModalOpen}
+        onClose={() => setIsModalOpen(false)}
+        onSubmit={handleModalSubmit}
+      />
     </>
   );
 }

src/renderer/Modal.jsx

@@ -0,0 +1,52 @@
+// Modal.js
+import React, { useState } from 'react';
+import { Background } from 'reactflow';
+
+function Modal({ isOpen, onClose, onSubmit }) {
+  const [inputValue, setInputValue] = useState('');
+
+  if (!isOpen) return null;
+  console.log('Modal is open');
+
+  const handleInputChange = (e) => {
+    setInputValue(e.target.value);
+  };
+
+  const handleSubmit = () => {
+    onSubmit(inputValue);
+    onClose();
+  };
+
+  return (
+    <div className="fixed inset-0 flex items-center justify-center z-50 bg-gray-800 bg-opacity-75">
+      <div
+        style={{ backgroundColor: 'aliceblue' }}
+        className=" rounded-lg shadow-lg p-6 w-full max-w-md mx-4"
+      >
+        <div className="flex justify-end">
+          <button
+            onClick={onClose}
+            className="text-gray-600 hover:text-gray-900"
+          >
+            &times;
+          </button>
+        </div>
+        <h2 className="text-xl font-semibold mb-4">Label</h2>
+        <input
+          type="text"
+          value={inputValue}
+          onChange={handleInputChange}
+          className="w-full px-3 py-2 border rounded-lg mb-4"
+        />
+        <button
+          onClick={handleSubmit}
+          className="w-full bg-gradient-to-br from-blue-400 to-purple-300 text-white py-2 rounded-lg hover:bg-blue-700"
+        >
+          Submit
+        </button>
+      </div>
+    </div>
+  );
+}
+
+export default Modal;