diff --git a/digit-recognition/frontend/src/components/recognition/Recognition.tsx b/digit-recognition/frontend/src/components/recognition/Recognition.tsx index 151ffb5..b9e99c6 100644 --- a/digit-recognition/frontend/src/components/recognition/Recognition.tsx +++ b/digit-recognition/frontend/src/components/recognition/Recognition.tsx @@ -1,4 +1,4 @@ -import { DigitRecognizer, CatDogIdentifier } from "@/features"; +import { DigitRecognizer, CatIdentifier } from "@/features"; import { Layout } from "@/components"; import styles from "./Recognition.module.scss"; @@ -10,14 +10,14 @@ export const Recognition = () => {

//_Draw a digit or upload an image to experience the power of AI. Gear.EXE recognition model identifies handwritten numbers (0–9) or - determines if an image contains cats or dogs. Submit, see results + determines if an image contains cats. Submit, see results instantly, and start again.

- +
); diff --git a/digit-recognition/frontend/src/features/cat-dog-identifier/api/mirrorAbi.ts b/digit-recognition/frontend/src/features/cat-dog-identifier/api/mirrorAbi.ts deleted file mode 100644 index 628f870..0000000 --- a/digit-recognition/frontend/src/features/cat-dog-identifier/api/mirrorAbi.ts +++ /dev/null @@ -1,92 +0,0 @@ -export const mirrorAbi = [ - { - inputs: [{ internalType: "address", name: "_router", type: "address" }], - stateMutability: "nonpayable", - type: "constructor", - }, - { stateMutability: "payable", type: "fallback" }, - { - inputs: [{ internalType: "bytes32", name: "claimedId", type: "bytes32" }], - name: "claimValue", - outputs: [], - stateMutability: "nonpayable", - type: "function", - }, - { - inputs: [], - name: "decoder", - outputs: [{ internalType: "address", name: "", type: "address" }], - stateMutability: "view", - type: "function", - }, - { - inputs: [{ internalType: "uint128", name: "value", type: "uint128" }], - name: "executableBalanceTopUp", - outputs: [], - stateMutability: "nonpayable", - type: "function", - }, - { - inputs: [], - name: "inheritor", - outputs: [{ internalType: "address", name: "", type: "address" }], - stateMutability: "view", - type: "function", - }, - { - inputs: [], - name: "initializer", - outputs: [{ internalType: "address", name: "", type: "address" }], - stateMutability: "view", - type: "function", - }, - { - inputs: [], - name: "nonce", - outputs: [{ internalType: "uint256", name: "", type: "uint256" }], - stateMutability: "view", - type: "function", - }, - { - inputs: [], - name: "router", - outputs: [{ internalType: "address", name: "", type: "address" }], - stateMutability: "view", - type: "function", - }, - { - inputs: [ - { internalType: "bytes", name: "payload", type: "bytes" }, - { internalType: "uint128", name: "value", type: "uint128" }, - ], - name: "sendMessage", - outputs: [], - stateMutability: "nonpayable", - type: "function", - }, - { - inputs: [ - { internalType: "bytes32", name: "repliedTo", type: "bytes32" }, - { internalType: "bytes", name: "payload", type: "bytes" }, - { internalType: "uint128", name: "value", type: "uint128" }, - ], - name: "sendReply", - outputs: [], - stateMutability: "nonpayable", - type: "function", - }, - { - inputs: [], - name: "stateHash", - outputs: [{ internalType: "bytes32", name: "", type: "bytes32" }], - stateMutability: "view", - type: "function", - }, - { - inputs: [], - name: "transferLockedValueToInheritor", - outputs: [], - stateMutability: "nonpayable", - type: "function", - }, -]; diff --git a/digit-recognition/frontend/src/features/cat-dog-identifier/CatDogIdentifier.module.scss b/digit-recognition/frontend/src/features/cat-identifier/CatIdentifier.module.scss similarity index 89% rename from digit-recognition/frontend/src/features/cat-dog-identifier/CatDogIdentifier.module.scss rename to digit-recognition/frontend/src/features/cat-identifier/CatIdentifier.module.scss index c9cba27..cb128c8 100644 --- a/digit-recognition/frontend/src/features/cat-dog-identifier/CatDogIdentifier.module.scss +++ b/digit-recognition/frontend/src/features/cat-identifier/CatIdentifier.module.scss @@ -14,3 +14,7 @@ .footerButton { width: 100%; } + +.result { + font-weight: 700; +} \ No newline at end of file diff --git a/digit-recognition/frontend/src/features/cat-dog-identifier/CatDogIdentifier.tsx b/digit-recognition/frontend/src/features/cat-identifier/CatIdentifier.tsx similarity index 74% rename from digit-recognition/frontend/src/features/cat-dog-identifier/CatDogIdentifier.tsx rename to digit-recognition/frontend/src/features/cat-identifier/CatIdentifier.tsx index 57eca45..8d712f5 100644 --- a/digit-recognition/frontend/src/features/cat-dog-identifier/CatDogIdentifier.tsx +++ b/digit-recognition/frontend/src/features/cat-identifier/CatIdentifier.tsx @@ -3,41 +3,35 @@ import { useRef, useState } from "react"; import { handleImageToPixels } from "./utils"; import { useReadRpcState } from "./api/readRpcState"; import { getFloatingPoint } from "@/lib/utils"; -import { useCatsDogsPredictPredict } from "./api/useCatsDogsPredictPredict"; +import { useCatsPredictPredict } from "./api/useCatsPredictPredict"; import { PROBABILITY_EDGE } from "./consts"; -import styles from "./CatDogIdentifier.module.scss"; +import styles from "./CatIdentifier.module.scss"; -export const CatDogIdentifier = () => { +export const CatIdentifier = () => { const [image, setImage] = useState(null); const [isSubmited, setIsSubmited] = useState(false); const [isSubmiting, setIsSubmiting] = useState(false); const fileInputRef = useRef(null); - const { rpcState, rpcStatePending, retryWhileDataChanged } = - useReadRpcState(); - console.log("🚀 ~ CatDogIdentifier ~ rpcState:", rpcState); - - const onSuccess = () => - // ! TODO: same image can get same result - retryWhileDataChanged().then(() => { - setIsSubmiting(false); - setIsSubmited(true); - }); + const onSuccess = () => { + setIsSubmiting(false); + setIsSubmited(true); + }; const onError = () => setIsSubmiting(false); - const { isPredictPending, catsDogsPredict, reset } = - useCatsDogsPredictPredict({ onSuccess, onError }); + const { rpcState, rpcStatePending } = useReadRpcState({ onSuccess }); + const { catsPredict, reset } = useCatsPredictPredict({ onError }); const probability = isSubmited && rpcState && rpcState.calculated ? getFloatingPoint(rpcState.probability) : null; - const isPending = rpcStatePending || isPredictPending || isSubmiting; + const isPending = rpcStatePending || isSubmiting; console.log( - "🚀 ~ CatDogIdentifier ~ probability:", + "🚀 ~ CatIdentifier ~ probability:", rpcState && rpcState.calculated ? getFloatingPoint(rpcState.probability) : null @@ -48,21 +42,14 @@ export const CatDogIdentifier = () => { return null; } - let isCat = "False"; - let isDog = "False"; - - if (probability < PROBABILITY_EDGE) { - isCat = "True"; - } - if (probability > 1 - PROBABILITY_EDGE) { - isDog = "True"; - } - return ( - <> -
Cat = {isCat}
-
Dog = {isDog}
- +
+ Cat in the image:{" "} + + {probability < PROBABILITY_EDGE ? "recognized" : "not recognized "} + {" "} + (confidence score {(1 - probability * 100).toFixed(2)}%). +
); })(); @@ -96,7 +83,7 @@ export const CatDogIdentifier = () => { if (!image) return; setIsSubmiting(true); const pixels = await handleImageToPixels(image); - catsDogsPredict(pixels); + catsPredict(pixels); }; const onReset = () => { @@ -106,10 +93,10 @@ export const CatDogIdentifier = () => { return ( { if (!mirrorId) return; @@ -61,7 +62,11 @@ export const readRpcState = async (mirrorId?: HexString) => { return data; }; -export const useReadRpcState = () => { +type Params = { + onSuccess: () => void; +}; + +export const useReadRpcState = ({ onSuccess }: Params) => { const { data: mirrorId } = useReadContract({ abi: catDogIdentifierAbi, address: CAT_IDENTIFIER_CONTRACT_ADDRESS, @@ -74,30 +79,21 @@ export const useReadRpcState = () => { enabled: !!mirrorId, }); - const retryWhileDataChanged = () => - new Promise((resolve) => { - const prevData = JSON.stringify(data); - - const retry = async (atempt = 0) => { - const response = await refetch(); - const isSameData = JSON.stringify(response.data) === prevData; - - if (isSameData) { - setTimeout(() => { - retry(atempt + 1); - }, 1000); - } else { - resolve(); - } - }; - - retry(); - }); + useWatchContractEvent({ + abi: mirrorAbi, + eventName: "StateChanged", + address: mirrorId as HexString, + onLogs() { + console.log("success reply"); + onSuccess(); + refetch(); + }, + enabled: !!mirrorId, + }); return { rpcState: data, rpcStatePending: isPending, refetch, - retryWhileDataChanged, }; }; diff --git a/digit-recognition/frontend/src/features/cat-dog-identifier/api/useCatsDogsPredictPredict.ts b/digit-recognition/frontend/src/features/cat-identifier/api/useCatsPredictPredict.ts similarity index 75% rename from digit-recognition/frontend/src/features/cat-dog-identifier/api/useCatsDogsPredictPredict.ts rename to digit-recognition/frontend/src/features/cat-identifier/api/useCatsPredictPredict.ts index 3390569..62b8f93 100644 --- a/digit-recognition/frontend/src/features/cat-dog-identifier/api/useCatsDogsPredictPredict.ts +++ b/digit-recognition/frontend/src/features/cat-identifier/api/useCatsPredictPredict.ts @@ -1,8 +1,4 @@ -import { - useReadContract, - useWatchContractEvent, - useWriteContract, -} from "wagmi"; +import { useReadContract, useWriteContract } from "wagmi"; import { catDogIdentifierAbi } from "./catDogIdentifierAbi"; import { CAT_IDENTIFIER_CONTRACT_ADDRESS } from "@/consts"; import { mirrorAbi } from "./mirrorAbi"; @@ -11,11 +7,10 @@ import { TypeRegistry } from "@polkadot/types"; import { numberArrayToHex } from "../utils"; type Params = { - onSuccess: () => void; onError: () => void; }; -export const useCatsDogsPredictPredict = ({ onSuccess, onError }: Params) => { +export const useCatsPredictPredict = ({ onError }: Params) => { const { writeContract, reset, data, isPending } = useWriteContract(); const { data: mirrorId } = useReadContract({ @@ -24,17 +19,7 @@ export const useCatsDogsPredictPredict = ({ onSuccess, onError }: Params) => { functionName: "mirror", }); - useWatchContractEvent({ - abi: catDogIdentifierAbi, - eventName: "CnnCatsDogsPredictReply", - address: CAT_IDENTIFIER_CONTRACT_ADDRESS, - onLogs() { - console.log("success reply"); - onSuccess(); - }, - }); - - const catsDogsPredict = async (pixels: number[]) => { + const catsPredict = async (pixels: number[]) => { // TODO: use fnCnnCatsDogsPredict when contract fixed // debugEncodedData(pixels); // const bytes = numberArrayToHex(pixels); @@ -74,7 +59,7 @@ export const useCatsDogsPredictPredict = ({ onSuccess, onError }: Params) => { }; return { - catsDogsPredict, + catsPredict, reset, data, isPredictPending: isPending, diff --git a/digit-recognition/frontend/src/features/cat-dog-identifier/consts.ts b/digit-recognition/frontend/src/features/cat-identifier/consts.ts similarity index 100% rename from digit-recognition/frontend/src/features/cat-dog-identifier/consts.ts rename to digit-recognition/frontend/src/features/cat-identifier/consts.ts diff --git a/digit-recognition/frontend/src/features/cat-dog-identifier/types.ts b/digit-recognition/frontend/src/features/cat-identifier/types.ts similarity index 100% rename from digit-recognition/frontend/src/features/cat-dog-identifier/types.ts rename to digit-recognition/frontend/src/features/cat-identifier/types.ts diff --git a/digit-recognition/frontend/src/features/cat-dog-identifier/utils.ts b/digit-recognition/frontend/src/features/cat-identifier/utils.ts similarity index 100% rename from digit-recognition/frontend/src/features/cat-dog-identifier/utils.ts rename to digit-recognition/frontend/src/features/cat-identifier/utils.ts diff --git a/digit-recognition/frontend/src/features/index.ts b/digit-recognition/frontend/src/features/index.ts index 7143705..c0dc485 100644 --- a/digit-recognition/frontend/src/features/index.ts +++ b/digit-recognition/frontend/src/features/index.ts @@ -1,2 +1,2 @@ -export { CatDogIdentifier } from "./cat-dog-identifier/CatDogIdentifier"; +export { CatIdentifier } from "./cat-identifier/CatIdentifier"; export { DigitRecognizer } from "./digit-recognizer/DigitRecognizer";