cat-identifier: fix probability edge (#9)

Author: vraja-nayaka

.github/workflows/CI-CD_digit-recognition-frontend.yaml

@@ -80,6 +80,7 @@ jobs:
             VITE_ETH_NODE_ADDRESS=${{ secrets.VITE_ETH_NODE_ADDRESS }}
             VITE_CONTRACT_ADDRESS_DIGIT_RECOGNITION=${{ secrets.VITE_CONTRACT_ADDRESS_DIGIT_RECOGNITION }}
             VITE_CONTRACT_ADDRESS_CAT_IDENTIFIER=${{ secrets.VITE_CONTRACT_ADDRESS_CAT_IDENTIFIER }}
+            VITE_PROBABILITY_THRESHOLD_CAT_IDENTIFIER=${{ secrets.VITE_PROBABILITY_THRESHOLD_CAT_IDENTIFIER }}
           tags: ${{ needs.prepair.outputs.image_name }}
 
   deploy-to-k8s:

digit-recognition/frontend/.env.example

@@ -2,4 +2,5 @@ VITE_WALLET_CONNECT_PROJECT_ID=
 VITE_GEAR_API_NODE=
 VITE_ETH_NODE_ADDRESS=
 VITE_CONTRACT_ADDRESS_DIGIT_RECOGNITION=
-VITE_CONTRACT_ADDRESS_CAT_IDENTIFIER=
+VITE_CONTRACT_ADDRESS_CAT_IDENTIFIER=
+VITE_PROBABILITY_THRESHOLD_CAT_IDENTIFIER=0.01

digit-recognition/frontend/Dockerfile

@@ -14,11 +14,13 @@ ARG VITE_WALLET_CONNECT_PROJECT_ID \
     VITE_GEAR_API_NODE \
     VITE_ETH_NODE_ADDRESS \
     VITE_CONTRACT_ADDRESS_DIGIT_RECOGNITION \
-    VITE_CONTRACT_ADDRESS_CAT_IDENTIFIER
+    VITE_CONTRACT_ADDRESS_CAT_IDENTIFIER \
+    VITE_PROBABILITY_THRESHOLD_CAT_IDENTIFIER
 
 ENV VITE_WALLET_CONNECT_PROJECT_ID=${VITE_WALLET_CONNECT_PROJECT_ID} \
     VITE_CONTRACT_ADDRESS_DIGIT_RECOGNITION=${VITE_CONTRACT_ADDRESS_DIGIT_RECOGNITION} \
     VITE_CONTRACT_ADDRESS_CAT_IDENTIFIER=${VITE_CONTRACT_ADDRESS_CAT_IDENTIFIER} \
+    VITE_PROBABILITY_THRESHOLD_CAT_IDENTIFIER=${VITE_PROBABILITY_THRESHOLD_CAT_IDENTIFIER} \
     VITE_GEAR_API_NODE=${VITE_GEAR_API_NODE} \
     VITE_ETH_NODE_ADDRESS=${VITE_ETH_NODE_ADDRESS} \
     DISABLE_ESLINT_PLUGIN=true

digit-recognition/frontend/src/components/ui/card/Card.module.scss

@@ -14,7 +14,7 @@
 }
 
 .title {
-  color: #a8f593;
+  color: #fff;
   text-transform: uppercase;
   font-size: 12px;
 }

digit-recognition/frontend/src/consts.ts

@@ -1,12 +1,24 @@
 import { HexString } from "@/lib/types";
 
-export const PROJECT_ID = import.meta.env
-  .VITE_WALLET_CONNECT_PROJECT_ID as string;
-export const GEAR_API_NODE = import.meta.env.VITE_GEAR_API_NODE as string;
-export const ETH_CHAIN_ID = 17000; // (0x4268) Holesky
-export const ETH_NODE_ADDRESS = import.meta.env.VITE_ETH_NODE_ADDRESS;
+const PROJECT_ID = import.meta.env.VITE_WALLET_CONNECT_PROJECT_ID as string;
+const GEAR_API_NODE = import.meta.env.VITE_GEAR_API_NODE as string;
+const ETH_CHAIN_ID = 17000; // (0x4268) Holesky
+const ETH_NODE_ADDRESS = import.meta.env.VITE_ETH_NODE_ADDRESS;
 
-export const DIGIT_RECOGNITION_CONTRACT_ADDRESS = import.meta.env
+const DIGIT_RECOGNITION_CONTRACT_ADDRESS = import.meta.env
   .VITE_CONTRACT_ADDRESS_DIGIT_RECOGNITION as HexString;
-export const CAT_IDENTIFIER_CONTRACT_ADDRESS = import.meta.env
+const CAT_IDENTIFIER_CONTRACT_ADDRESS = import.meta.env
   .VITE_CONTRACT_ADDRESS_CAT_IDENTIFIER as HexString;
+const PROBABILITY_THRESHOLD_CAT_IDENTIFIER = Number(
+  import.meta.env.VITE_PROBABILITY_THRESHOLD_CAT_IDENTIFIER
+);
+
+export {
+  PROJECT_ID,
+  GEAR_API_NODE,
+  ETH_CHAIN_ID,
+  ETH_NODE_ADDRESS,
+  DIGIT_RECOGNITION_CONTRACT_ADDRESS,
+  CAT_IDENTIFIER_CONTRACT_ADDRESS,
+  PROBABILITY_THRESHOLD_CAT_IDENTIFIER,
+};

digit-recognition/frontend/src/features/cat-identifier/CatIdentifier.tsx

@@ -4,7 +4,7 @@ import { handleImageToPixels } from "./utils";
 import { useReadRpcState } from "./api/readRpcState";
 import { getFloatingPoint } from "@/lib/utils";
 import { useCatsPredictPredict } from "./api/useCatsPredictPredict";
-import { PROBABILITY_EDGE } from "./consts";
+import { PROBABILITY_THRESHOLD_CAT_IDENTIFIER } from "@/consts";
 import styles from "./CatIdentifier.module.scss";
 
 export const CatIdentifier = () => {
@@ -30,6 +30,7 @@ export const CatIdentifier = () => {
     isSubmited && rpcState && rpcState.calculated
       ? getFloatingPoint(rpcState.probability)
       : null;
+  console.log("CatIdentifier probability:", probability);
 
   const isPending = rpcStatePending || isSubmiting;
 
@@ -42,9 +43,11 @@ export const CatIdentifier = () => {
       <div>
         Cat in the image:{" "}
         <span className={styles.result}>
-          {probability < PROBABILITY_EDGE ? "recognized" : "not recognized  "}
+          {probability >= PROBABILITY_THRESHOLD_CAT_IDENTIFIER
+            ? "recognized"
+            : "not recognized"}
         </span>{" "}
-        (confidence score {((1 - probability) * 100).toFixed(2)}%).
+        (confidence score {(probability * 100).toFixed(2)}%).
       </div>
     );
   })();

digit-recognition/frontend/src/features/cat-identifier/api/readRpcState.ts

@@ -1,4 +1,5 @@
 import { TypeRegistry } from "@polkadot/types";
+import { RegistryTypes } from "@polkadot/types/types";
 import { useQuery } from "@tanstack/react-query";
 import { useReadContract, useWatchContractEvent } from "wagmi";
 
@@ -7,11 +8,12 @@ import { catDogIdentifierAbi } from "./catDogIdentifierAbi";
 import { CAT_IDENTIFIER_CONTRACT_ADDRESS, GEAR_API_NODE } from "@/consts";
 import { CalcResult } from "../types";
 import { mirrorAbi } from "./mirrorAbi";
+import { retryWhileDataChanged } from "@/lib/utils";
 
 export const readRpcState = async (mirrorId?: HexString) => {
   if (!mirrorId) return;
 
-  const types: Record<string, any> = {
+  const types: RegistryTypes = {
     FixedPoint: { num: "i128", scale: "u32" },
     CalcResult: {
       probability: "FixedPoint",
@@ -57,7 +59,7 @@ export const readRpcState = async (mirrorId?: HexString) => {
     json.result.payload
   );
 
-  let data = result[2].toJSON() as unknown as CalcResult;
+  const data = result[2].toJSON() as unknown as CalcResult;
 
   return data;
 };
@@ -85,13 +87,9 @@ export const useReadRpcState = ({ isSubmiting, onSuccess }: Params) => {
     eventName: "StateChanged",
     address: mirrorId as HexString,
     onLogs() {
-      if (isSubmiting) {
-        console.log("success reply");
-        onSuccess();
-        refetch();
-      }
+      retryWhileDataChanged({ data, refetch }).then(() => onSuccess());
     },
-    enabled: !!mirrorId,
+    enabled: !!mirrorId && isSubmiting,
   });
 
   return {

digit-recognition/frontend/src/features/cat-identifier/consts.ts

@@ -43,6 +43,7 @@ export const DigitCanvas = ({
         ctx.imageSmoothingEnabled = true;
       }
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   const startDrawing = (e: React.MouseEvent) => {

digit-recognition/frontend/src/features/digit-recognizer/DigitCanvas.tsx

@@ -1,6 +1,6 @@
 import { Button, Card } from "@/components";
 import { DigitCanvas } from "./DigitCanvas";
-import { useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { findMaxIndex, getFlattenedPixelArray } from "./utils";
 import { useDigitRecognitionPredict } from "./api/useDigitRecognitionPredict";
 import { useReadRpcState } from "./api/readRpcState";
@@ -52,11 +52,21 @@ export const DigitRecognizer = () => {
       : findMaxIndex(rpcState.map(getFloatingPoint));
 
   const predictedDigit = isSubmited ? currentState : null;
-  console.log("current state:", currentState);
+
+  useEffect(() => {
+    console.log(
+      "current state:",
+      currentState,
+      rpcState?.map(getFloatingPoint),
+      rpcState
+    );
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
 
   const onSubmit = () => {
     setIsSubmiting(true);
     const flattenedPixelArray = getFlattenedPixelArray(canvasRef);
+    console.log("flattenedPixelArray:", flattenedPixelArray.join(", "));
     digitRecognitionPredict(flattenedPixelArray);
   };