project setup and the webapp logic flow

imrany · Oct 15, 2024 · 4f7f5b6 · 4f7f5b6
1 parent 2849f9d
commit 4f7f5b6
Show file tree

Hide file tree

Showing 5 changed files with 164 additions and 103 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,107 +1,33 @@
-// Import dependencies
-import { useRef, useEffect, useState } from "react";
-import Webcam from "react-webcam";
-import * as tf from "@tensorflow/tfjs";
-//import * as cpu from "@tensorflow/tfjs-backend-cpu";
-//import * as webgl from "@tensorflow/tfjs-backend-webgl";
-import * as cocossd from "@tensorflow-models/coco-ssd";
 import "./App.css";
-import { drawRect } from "./utilities";
-
-function App() {
-  const [isLoading, setIsLoading]=useState(true)
-  const webcamRef:any = useRef(null);
-  const canvasRef:any = useRef(null);
-
-  tf.setBackend("webgl");
-  // Main function
-  const runCoco = async () => {
-    const net = await cocossd.load();
-    console.log("cocossd model loaded.");
-    setIsLoading(false)
-    //  Loop and detect hands
-    setInterval(() => {
-      detect(net);
-    }, 10);
-  };
-
-  const detect = async (net:any) => {
-    // Check data is available
-    if (
-      typeof webcamRef.current !== "undefined" &&
-      webcamRef.current !== null &&
-      webcamRef.current.video.readyState === 4
-    ) {
-      // Get Video Properties
-        const video:any = webcamRef.current.video;
-      const videoWidth = webcamRef.current.video.videoWidth;
-      const videoHeight = webcamRef.current.video.videoHeight;
-
-      // Set video width
-      webcamRef.current.video.width = videoWidth;
-      webcamRef.current.video.height = videoHeight;
-
-      // Set canvas height and width
-      canvasRef.current.width = videoWidth;
-      canvasRef.current.height = videoHeight;
-
-      // Make Detections
-      const obj = await net.detect(video);
-      // console.log(obj)
-      // Draw mesh
-      const ctx = canvasRef.current.getContext("2d");
-      drawRect(obj, ctx); 
+import { useEffect, useState } from "react";
+import { BrowserRouter, Routes, Route, Navigate } from "react-router-dom";
+import MainPage from "./pages/MainPage.tsx";
+import SearchPage from "./pages/SearchPage.tsx";
+import { GlobalContext } from "./context";
+
+export default function App(){
+    const API_URL=`http://127.0.0.1:5000`
+    const [videoConstraints, setVideoConstraints]=useState<any>({
+        /*width: 1280,*/
+        height: 720,
+        facingMode: "user"
+    })
+
+    window.onresize=function(){
+        screen.width>1080?"":setVideoConstraints({height:720, facingMode:"environment"})
     }
-  };
-
-  useEffect(()=>{
-    runCoco()
-  },[]);
 
-  return (
-      <>
-          {isLoading&&isLoading?(
-              <div style={{display:"flex",justifyContent:"center", background:"#252525", alignItems:"center", height:"100vh"}}>
-              <p style={{fontSize:14, color:"white"}}>Loading, please wait...</p>
-              </div>
-          ):(
-                <div className="App">
-                    <header className="App-header">
-                        <Webcam
-                            ref={webcamRef}
-                            muted={true} 
-                            style={{
-                                position: "absolute",
-                                marginLeft: "auto",
-                                marginRight: "auto",
-                                left: 0,
-                                right: 0,
-                                textAlign: "center",
-                                zIndex: 9,
-                                width: "100vw",
-                                height: "100vh",
-                            }}
-                        />
-
-                        <canvas
-                            ref={canvasRef}
-                            style={{
-                                position: "absolute",
-                                marginLeft: "auto",
-                                marginRight: "auto",
-                                left: 0,
-                                right: 0,
-                                textAlign: "center",
-                                zIndex: 8,
-                                width: "100vw",
-                                height: "100vh",
-                            }}
-                        />
-                    </header>
-                </div>
-            )}
-        </>
-    );
+    useEffect(()=>{
+        screen.width>1080?"":setVideoConstraints({height:720, facingMode:"environment"})
+    },[screen.width])
+    return(
+        <BrowserRouter>
+            <GlobalContext.Provider value={{ videoConstraints, API_URL }}>
+                <Routes>
+                    <Route path="/" element={<MainPage/>}/>
+                    <Route path="/search" element={<SearchPage/>}/>
+                </Routes>
+            </GlobalContext.Provider>
+        </BrowserRouter>
+    )
 }
-
-export default App;
diff --git a/src/utilities.ts → src/components/utilities.ts b/src/utilities.ts → src/components/utilities.ts
diff --git a/src/context/index.ts b/src/context/index.ts
@@ -0,0 +1,19 @@
+import { createContext } from 'react'
+
+type ContextType={
+    videoConstraints:{
+        height?:number,
+        weigth?:number,
+        facingMode:string
+    },
+    API_URL:string
+}
+
+export const GlobalContext=createContext<ContextType>({
+    videoConstraints:{
+        /*width: 1280,*/
+        height: 720,
+        facingMode: "user"
+    },
+    API_URL:""
+})
diff --git a/src/pages/MainPage.tsx b/src/pages/MainPage.tsx
@@ -0,0 +1,108 @@
+// Import dependencies
+import { useRef, useEffect, useState, useContext } from "react";
+import Webcam from "react-webcam";
+import * as tf from "@tensorflow/tfjs";
+//import * as cpu from "@tensorflow/tfjs-backend-cpu";
+//import * as webgl from "@tensorflow/tfjs-backend-webgl";
+import * as cocossd from "@tensorflow-models/coco-ssd";
+import { drawRect } from "../components/utilities";
+import { GlobalContext } from "../context";
+
+export default function MainPage() {
+  const { videoConstraints }=useContext(GlobalContext);
+  const [isLoading, setIsLoading]=useState(true)
+  const webcamRef:anyy = useRef(null);
+  const canvasRef:any = useRef(null);
+
+  tf.setBackend("webgl");
+  // Main function
+  const runCoco = async () => {
+    const net = await cocossd.load();
+    console.log("cocossd model loaded.");
+    setIsLoading(false)
+    //  Loop and detect hands
+    setInterval(() => {
+      detect(net);
+    }, 10);
+  };
+
+  const detect = async (net:any) => {
+    // Check data is available
+    if (
+      typeof webcamRef.current !== "undefined" &&
+      webcamRef.current !== null &&
+      webcamRef.current.video.readyState === 4
+    ) {
+      // Get Video Properties
+        const video:any = webcamRef.current.video;
+      const videoWidth = webcamRef.current.video.videoWidth;
+      const videoHeight = webcamRef.current.video.videoHeight;
+
+      // Set video width
+      webcamRef.current.video.width = videoWidth;
+      webcamRef.current.video.height = videoHeight;
+
+      // Set canvas height and width
+      canvasRef.current.width = videoWidth;
+      canvasRef.current.height = videoHeight;
+
+      // Make Detections
+      const obj = await net.detect(video);
+      // console.log(obj)
+      // Draw mesh
+      const ctx = canvasRef.current.getContext("2d");
+      drawRect(obj, ctx); 
+    }
+  };
+
+  useEffect(()=>{
+    runCoco()
+  },[]);
+
+  return (
+      <>
+          {isLoading&&isLoading?(
+              <div style={{display:"flex",justifyContent:"center", background:"#252525", alignItems:"center", height:"100vh"}}>
+                <p style={{fontSize:14, color:"white"}}>Loading, please wait...</p>
+              </div>
+          ):(
+                <div className="App">
+                    <header className="App-header">
+                        <Webcam
+                            ref={webcamRef}
+                            audio={false} 
+                            style={{
+                                position: "absolute",
+                                marginLeft: "auto",
+                                marginRight: "auto",
+                                left: 0,
+                                right: 0,
+                                textAlign: "center",
+                                zIndex: 9,
+                                width: "100vw",
+                                height: "100vh",
+                            }}
+                            height={720}
+                            videoConstraints={videoConstraints}
+                        />
+
+                        <canvas
+                            ref={canvasRef}
+                            style={{
+                                position: "absolute",
+                                marginLeft: "auto",
+                                marginRight: "auto",
+                                left: 0,
+                                right: 0,
+                                textAlign: "center",
+                                zIndex: 10,
+                                width: "100vw",
+                                height: "100vh",
+                            }}
+                        />
+                    </header>
+                </div>
+            )}
+        </>
+    );
+}
diff --git a/src/pages/SearchPage.tsx b/src/pages/SearchPage.tsx
@@ -0,0 +1,8 @@
+
+export default function SearchPage(){
+    return(
+        <>
+            <p>Search page</p>
+        </>
+    )
+}