Update API a little bit to work with JSON

.devcontainer/devcontainer.json

@@ -29,7 +29,7 @@
 		"all"
 	],
 	"hostRequirements": {
-		"gpu": true
+		"gpu": "optional"
 	}
 	// Configure tool-specific properties.
 	// "customizations": {},

backend/sign/main.py

@@ -2,11 +2,9 @@
 from pydantic import BaseModel
 from recogniser.recogniser import Recogniser
 from fastapi.middleware.cors import CORSMiddleware
-
-
+import uvicorn
 
 app = FastAPI()
-
 origins = [
     "http://localhost:3000",
 ]
@@ -26,15 +24,18 @@ class NormalizedLandmark(BaseModel):
     y: float
     z: float | None = None
     visibility: float | None = None
-
-# class NormalizedLandmarks(BaseModel): list[NormalizedLandmark]
+
+class NormalizedLandmarks(BaseModel):
+    data: list[NormalizedLandmark]
 
 @app.get("/hello")
 def read_root():
     return {"Hello": "World"}
 
 
 @app.get("/annotation")
-def get_annotation(landmarks: list[NormalizedLandmark]) -> str:
-    print(landmarks)
-    return {"response": recogniser.get_annotation(landmarks), "landmarks": landmarks}
+async def get_annotation(landmarks: str) -> str:
+    return recogniser.get_annotation(landmarks)
+
+if __name__ == "__main__":
+    uvicorn.run(app, host="localhost", port=8000)

backend/sign/model/keypoint_classifier/keypoint_classifier.py

@@ -17,7 +17,7 @@ def __init__(
         self.input_details = self.interpreter.get_input_details()
         self.output_details = self.interpreter.get_output_details()
 
-    def __call__(self, landmark_list):
+    def __call__(self, landmark_list) -> np.intp:
         input_details_tensor_index = self.input_details[0]['index']
         self.interpreter.set_tensor(
             input_details_tensor_index,

backend/sign/recogniser/recogniser.py

@@ -11,12 +11,8 @@ def __init__(self) -> None:
             keypoint_classifier_labels = csv.reader(f)
             keypoint_classifier_labels = [row[0] for row in keypoint_classifier_labels]
 
-    def get_annotation(self, landmarks):
-        for hand_landmarks in landmarks:
-            # Hand sign classification
-            hand_sign_id = self.keypoint_classifier(landmarks)
+    def get_annotation(self, landmarks) -> str:
+        # Hand sign classification
+        hand_sign_id = self.keypoint_classifier(landmarks)
 
-            # Finger gesture classification
-            finger_gesture_id = 0
-
-            return self.keypoint_classifier_labels[hand_sign_id],
+        return self.keypoint_classifier_labels[hand_sign_id]

frontend/src/api.tsx

@@ -1,32 +1,35 @@
 import axios from "axios";
 import { useState } from "react";
-const baseURL = "http://127.0.0.1:8000/"
+const baseURL = "http://localhost:8000/"
 
 interface GetResponse {
     isGetLoading: boolean,
     isGetError: boolean,
-    getData: <TParams, TResponse>(url: string, params: TParams) => Promise<TResponse>
+    error: any,
+    response: string | undefined,
+    getData: (url: string, params: string) => void
 }
 
 export function useAPIGet(): GetResponse {
     interface State {
         isLoading: boolean,
-        isError: boolean
+        isError: boolean,
+        response: string | undefined,
+        error: any
     }
     const [state, setState] = useState<State>({
         isLoading: false,
         isError: false,
+        response: undefined,
+        error: undefined
     });
-    async function getData<TParams, TResponse>(url: string, params: TParams): Promise<TResponse> {
+    async function getData(url: string, data: string) {
         try {
             // console.log(params)
-            let response = await axios.get<TResponse>(baseURL + url, { data: params });
-            console.log(response.data)
-            setState({ isLoading: false, isError: false });
-            return response.data;
-        } catch (error) {
-            setState({ isLoading: false, isError: true });
-            throw error;
+            let response = await axios.get<string>(baseURL + url, { data });
+            setState({ ...state, isLoading: false, isError: false, response: response.data });
+        } catch (error: any) {
+            setState({ ...state, isLoading: false, isError: true, error: error });
         } finally {
             setState({ ...state, isLoading: false });
         }
@@ -35,6 +38,8 @@ export function useAPIGet(): GetResponse {
     return {
         isGetLoading: state.isLoading,
         isGetError: state.isError,
+        response: state.response,
+        error: state.error,
         getData
     }
 }

frontend/src/components/Canvas.tsx

@@ -56,15 +56,20 @@ export default function Canvas(props?: CanvasHTMLAttributes<HTMLCanvasElement>):
     if (results.multiHandLandmarks) {
       // console.log(results.multiHandLandmarks)
       for (const landmarks of results.multiHandLandmarks) {
-        try {
-          let annotation = await apiGet.getData<NormalizedLandmark[], string>(`annotation`, landmarks);
+        await apiGet.getData(`annotation`, JSON.stringify(landmarks));
+        if (apiGet.isGetLoading || !apiGet.response) {
+          console.log('loading')
+        }
+        else if (apiGet.isGetError && apiGet.error) {
+          console.log(apiGet.error)
+        }
+        else {
+          let annotation = apiGet.response;
           console.log(annotation);
-        } catch (error) {
-          // console.log(error);
+          drawConnectors(canvasCtx, landmarks, HAND_CONNECTIONS,
+            { color: '#00FF00', lineWidth: 2 });
+          drawLandmarks(canvasCtx, landmarks, { color: '#FF0000', lineWidth: 2 });
         }
-        drawConnectors(canvasCtx, landmarks, HAND_CONNECTIONS,
-          { color: '#00FF00', lineWidth: 2 });
-        drawLandmarks(canvasCtx, landmarks, { color: '#FF0000', lineWidth: 2 });
       }
     }
     canvasCtx.restore();