fixed inference disruption problem

client/src/views/ModelInference.js

@@ -5,14 +5,15 @@ import { startModelInference, stopModelInference } from '../utils/api'
 import Configurator from '../components/Configurator'
 import { AppContext } from '../contexts/GlobalContext'
 
-function ModelInference () {
+function ModelInference ({ isInferring, setIsInferring }) {
   const context = useContext(AppContext)
-  const [isInference, setIsInference] = useState(false)
+  // const [isInference, setIsInference] = useState(false)
   const handleStartButton = async () => {
     try {
       const inferenceConfig = localStorage.getItem('inferenceConfig')
 
-      const res = startModelInference(
+      // const res = startModelInference(
+      const res = await startModelInference(
         context.uploadedYamlFile.name,
         inferenceConfig,
         context.outputPath,
@@ -22,17 +23,19 @@ function ModelInference () {
     } catch (e) {
       console.log(e)
     } finally {
-      setIsInference(true)
+      // setIsInference(true)
+      setIsInferring(true)
     }
   }
 
   const handleStopButton = async () => {
     try {
-      stopModelInference()
+      await stopModelInference()
     } catch (e) {
       console.log(e)
     } finally {
-      setIsInference(false)
+      // setIsInference(false)
+      setIsInferring(false)
     }
   }
 
@@ -49,13 +52,13 @@ function ModelInference () {
         <Space wrap style={{ marginTop: 12 }} size={componentSize}>
           <Button
             onClick={handleStartButton}
-            disabled={isInference} // Disables the button when inference is running
+            disabled={isInferring} // Disables the button when inference is running
           >
             Start Inference
           </Button>
           <Button
             onClick={handleStopButton}
-            disabled={!isInference} // Disables the button when inference is not running
+            disabled={!isInferring} // Disables the button when inference is not running
           >
             Stop Inference
           </Button>

client/src/views/Views.js

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React, { useState, useEffect } from 'react'
 import DataLoader from './DataLoader'
 import Visualization from '../views/Visualization'
 import ModelTraining from '../views/ModelTraining'
@@ -13,6 +13,7 @@ function Views () {
   const [current, setCurrent] = useState('visualization')
   const [viewers, setViewers] = useState([])
   const [isLoading, setIsLoading] = useState(false)
+  const [isInferring, setIsInferring] = useState(false)
   console.log(viewers)
 
   const onClick = (e) => {
@@ -34,7 +35,7 @@ function Views () {
     } else if (current === 'monitoring') {
       return <Monitoring />
     } else if (current === 'inference') {
-      return <ModelInference />
+      return <ModelInference isInferring={isInferring} setIsInferring={setIsInferring} />
     }
   }
 
@@ -80,6 +81,12 @@ function Views () {
     }
   }
 
+  useEffect(() => { // This function makes sure that the inferring will continue when current tab changes
+    if (current === 'inference' && isInferring) {
+      console.log('Inference process is continuing...')
+    }
+  }, [current, isInferring])
+
   return (
     <Layout
       style={{