with video

shuja-shah-dev · Jun 20, 2024 · bf1b948 · bf1b948
1 parent 6f1b818
commit bf1b948
Show file tree

Hide file tree

Showing 15 changed files with 241 additions and 216 deletions.
diff --git a/flask/Temp/temp_image.jpg b/flask/Temp/temp_image.jpg
diff --git a/flask/Temp/temp_image_1.jpg b/flask/Temp/temp_image_1.jpg
diff --git a/flask/Temp/temp_image_2.jpg b/flask/Temp/temp_image_2.jpg
diff --git a/flask/Temp/temp_image_3.jpg b/flask/Temp/temp_image_3.jpg
diff --git a/flask/app.py b/flask/app.py
@@ -17,7 +17,7 @@
 app = Flask(__name__)
 CORS(app, origins=['*'])
 
-
+model2 = YOLO('./yolov8n.pt')
 
 def rotation(image):
     model = load_model('orientation_model.h5')

diff --git a/src/nodes/NodeSelect.jsx b/src/nodes/NodeSelect.jsx
@@ -1,27 +1,56 @@
 import { useReactFlow } from 'reactflow';
 import { useState } from 'react';
 import 'tailwindcss/tailwind.css';
+import { useMyContext } from '../utils/MyContext';
 
-const model_NODES = [
+const NODES = [
   { code: 'Od', name: 'Object Detection' },
   { code: 'Ad', name: 'Anomaly Detection' },
   { code: 'Sw', name: 'Switcher' },
   { code: 'Oc', name: 'Orientation Correction' },
+  { code: 'Vi', name: 'Webcam' },
 ];
 
 export default function NodeSelect() {
   const { setNodes } = useReactFlow();
   const [menuOpen, setMenuOpen] = useState(false);
+  const { setVideoStream } = useMyContext();
+  // const targetCode = 'Od';
 
-  const onProviderClick = ({ name, code, image, detectedImage }) => {
+  const handleVideoUpload = (video) => {
+    // setNodes((nds) =>
+    //   nds.map((node) => {
+    //     if (node.data.code === targetCode) {
+    //       node.data = { ...node.data, video };
+    //     }
+    //     return node;
+    //   }),
+    // );
+    setVideoStream(video);
+  };
+
+  const onProviderClick = ({ name, code, image, detectedImage, video }) => {
     const location = Math.random() * 500;
     const data = {
       name,
       code,
+      ...(code === 'Od' ? { video } : null),
       ...(code === 'Sw' || code === 'Oc' ? { detectedImage } : { image }), // Conditionally include detectedImage or image
+      ...(code === 'Vi'
+        ? { onVideoUpload: (video) => handleVideoUpload(video) }
+        : {}), // Conditionally include onVideoUpload
     };
 
-    const type = `${code === 'Sw' ? 'switcher' : code === 'Oc' ? 'orientation' : 'modelProvider'}`;
+    const type = `${
+      // eslint-disable-next-line no-nested-ternary
+      code === 'Vi'
+        ? 'VideoInput'
+        : code === 'Sw'
+          ? 'switcher'
+          : code === 'Oc'
+            ? 'orientation'
+            : 'modelProvider'
+    }`;
 
     setNodes((prevNodes) => [
       ...prevNodes,
@@ -52,9 +81,17 @@ export default function NodeSelect() {
       </div>
 
       {menuOpen && (
-        <div className="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg ring-1 ring-black ring-opacity-5"   style={{ backgroundColor: 'aliceblue' }}>
-          <div className="py-1" role="menu" aria-orientation="vertical" aria-labelledby="options-menu">
-            {model_NODES.map((provider) => (
+        <div
+          className="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg ring-1 ring-black ring-opacity-5"
+          style={{ backgroundColor: 'aliceblue' }}
+        >
+          <div
+            className="py-1"
+            role="menu"
+            aria-orientation="vertical"
+            aria-labelledby="options-menu"
+          >
+            {NODES.map((provider) => (
               <button
                 key={provider.code}
                 onClick={() => onProviderClick(provider)}

diff --git a/src/nodes/OutputNode.jsx b/src/nodes/OutputNode.jsx
@@ -1,41 +1,6 @@
 import { Handle, Position } from 'reactflow';
 
 function OutputNode() {
-  // const canvasRef = useRef(null);
-  // const lastFrameIndexRef = useRef(0);
-
-  //   const hasConnectionFromVideoInput = data.edges.some(
-  //     (edge) => edge.source === "2" && edge.target === "3"
-  // );
-
-  // useEffect(() => {
-  //   if (!hasConnectionFromVideoInput) return;
-
-  //   const canvas = canvasRef.current;
-  //   const ctx = canvas.getContext("2d");
-  //   let animationFrameId;
-
-  //   const drawFrame = () => {
-  //     if (data.processedFrames.length > lastFrameIndexRef.current) {
-  //       const frameData = data.processedFrames[lastFrameIndexRef.current];
-  //       const img = new Image();
-  //       img.onload = () => {
-  //         ctx.clearRect(0, 0, canvas.width, canvas.height);
-  //         ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
-  //         lastFrameIndexRef.current++;
-  //       };
-  //       img.src = `data:image/jpeg;base64,${frameData}`;
-  //     }
-  //     animationFrameId = requestAnimationFrame(drawFrame);
-  //   };
-
-  //   drawFrame();
-
-  //   return () => {
-  //     cancelAnimationFrame(animationFrameId);
-  //   };
-  // }, [data.processedFrames]);
-
   return (
     <div
       style={{
@@ -45,34 +10,10 @@ function OutputNode() {
       className=" flex justify-center items-center  text-center p-4  border border-1 border-[#FFF] text-2xl font-semibold  w-52 h-40"
     >
       <p className="mb-2 ">Output</p>
-      {/* {data.detectedImage && (
-        <img
-          src={data.detectedImage}
-          alt="Detected"
-          width={300}
-         className="h-[300px] mb-2"
-        />
-      )} */}
-      {/* {data.processedFrames && (
-        <div className="">
-          <canvas
-            ref={canvasRef}
-            style={{ maxWidth: "100%" }}
-            height="300"
-          ></canvas>
-        </div>
-      )} */}
+
       <Handle type="target" position={Position.Left} />
     </div>
   );
 }
 
-// OutputNode.propTypes = {
-//   data: PropTypes.shape({
-//     processedFrames: PropTypes.arrayOf(PropTypes.string).isRequired,
-//     detectedImage: PropTypes.string,
-//     edges: PropTypes.array.isRequired,
-//   }).isRequired,
-// };
-
 export default OutputNode;
diff --git a/src/nodes/Switcher.jsx b/src/nodes/Switcher.jsx
@@ -7,7 +7,7 @@ function Switcher() {
       style={{
         background: 'linear-gradient(180deg, #4CCAFF 0%, #2E7999 100%)',
       }}
-      className="flex justify-center items-center text-center  text-center p-4 border border-1 border-[#FFF] text-black text-2xl font-semibold rounded-3xl w-52 h-52"
+      className="flex justify-center items-center text-center  p-4 border border-1 border-[#FFF] text-black text-2xl font-semibold rounded-3xl w-52 h-52"
     >
       <p className="">Switcher</p>
       {/* {data.detectedImage && (

diff --git a/src/nodes/WebcamNode.jsx b/src/nodes/WebcamNode.jsx
@@ -1,10 +1,9 @@
-import { useRef, useEffect, useState } from "react";
-import PropTypes from "prop-types";
-import { Handle, Position } from "reactflow";
+import { useRef, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { Handle, Position } from 'reactflow';
 
-const WebcamInputNode = ({ data }) => {
+function WebcamInputNode({ data }) {
   const videoRef = useRef(null);
-  const [showVideo, setShowVideo] = useState(false);
 
   useEffect(() => {
     let stream;
@@ -19,49 +18,33 @@ const WebcamInputNode = ({ data }) => {
           data.onVideoUpload(stream);
         }
       } catch (error) {
-        console.error("Error accessing webcam:", error);
+        console.error('Error accessing webcam:', error);
       }
     };
 
-    if (showVideo) {
-      initializeWebcam();
-    }
+    initializeWebcam();
 
     return () => {
       if (stream) {
         stream.getTracks().forEach((track) => track.stop());
       }
     };
-  }, [data, showVideo]);
-
-  const handleStartClick = () => {
-    setShowVideo(true);
-  };
-
-  const handleVideoClick = () => {
-    setShowVideo((prevShowVideo) => !prevShowVideo);
-  };
+  }, [data]);
 
   return (
-    <div className="w-[400px] bg-gradient-to-br from-blue-100 to-purple-200 p-6 rounded-3xl">
+    <div className="  p-6 rounded-3xl border border-1 border-[#FFF]"   style={{
+      background: 'linear-gradient(180deg, #4CCAFF 0%, #2E7999 100%)',
+    }}>
       <h3 className="mb-2 text-black text-2xl font-semibold text-center">
         Webcam
       </h3>
-      <div className="flex justify-center" onClick={handleStartClick}>
-        <button className=" bg-gradient-to-br from-blue-400 to-purple-300 text-white font-bold py-2 px-4 rounded mb-2">
-          Start
-        </button>
+      <div style={{width: '220px'}}>
+        <video ref={videoRef} autoPlay playsInline />
       </div>
-
-      {showVideo && (
-        <div onClick={handleVideoClick}>
-          <video ref={videoRef} autoPlay playsInline />
-        </div>
-      )}
       <Handle type="source" position={Position.Right} />
     </div>
   );
-};
+}
 
 WebcamInputNode.propTypes = {
   data: PropTypes.shape({

diff --git a/src/nodes/modelProvider.jsx b/src/nodes/modelProvider.jsx
@@ -10,7 +10,7 @@ function ModelProvider({ data: { name } }) {
           background: 'linear-gradient(180deg, #876EE6 0%, #4B3D80 100%)',
           borderRadius: '20px',
         }}
-        className="flex justify-center items-center text-center text-center border border-1 border-[#FFF] w-52 h-52  p-6 "
+        className="flex justify-center items-center text-center border border-1 border-[#FFF] w-52 h-52  p-6 "
       >
         <h3 className="text-white text-2xl  ">{name}</h3>
       </div>
@@ -23,9 +23,11 @@ function ModelProvider({ data: { name } }) {
 ModelProvider.propTypes = {
   data: PropTypes.shape({
     name: PropTypes.string.isRequired,
-    image: PropTypes.instanceOf(File),
+    image: PropTypes.oneOfType([
+      PropTypes.instanceOf(File), // Accepts a File object
+      PropTypes.string,
+    ]),
   }).isRequired,
-  id: PropTypes.string.isRequired,
 };
 
 export default ModelProvider;
diff --git a/src/renderer/App.tsx b/src/renderer/App.tsx
@@ -6,6 +6,7 @@ import React, { useState } from 'react';
 import 'reactflow/dist/style.css';
 import Theme from '../utils/theme';
 import Landing from './Landing';
+import { ContextProvider } from '../utils/MyContext';
 
 function App() {
   const [parentProjectType, setParentProjectType] = useState(null);
@@ -15,6 +16,7 @@ function App() {
   };
 
   return (
+    <ContextProvider>
     <Router>
       <Theme />
       <Routes>
@@ -28,6 +30,7 @@ function App() {
         />
       </Routes>
     </Router>
+    </ContextProvider>
   );
 }