(null);
31 |
32 | if (observed) {
33 | const ctx = canvasRef.current!.getContext("2d");
34 |
35 | ctx!.font = "18px serif";
36 | ctx!.fillStyle = "#ff0000";
37 | ctx!.strokeStyle = "#ff0000";
38 |
39 | ctx!.drawImage(image, 0, 0, image.width * ratio, image.height * ratio);
40 |
41 | ctx!.beginPath();
42 |
43 | predictions.forEach((element) => {
44 | ctx!.fillText(
45 | element.classScore.toFixed(2),
46 | element.box.x * ratio,
47 | element.box.y * ratio - 10
48 | );
49 |
50 | ctx!.rect(
51 | element.box.x * ratio,
52 | element.box.y * ratio,
53 | element.box.width * ratio,
54 | element.box.height * ratio
55 | );
56 | });
57 | ctx!.stroke();
58 | }
59 |
60 | return (
61 | <>
62 |
63 | {predictions.length === 0 &&
No faces detected
}
64 |
65 |
66 |
84 |
85 | );
86 | };
87 |
88 | export default Canvas;
89 |
--------------------------------------------------------------------------------
/src/index.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import ReactDOM from "react-dom";
3 | import App from "./App";
4 | import "bootstrap/dist/css/bootstrap.css";
5 |
6 | ReactDOM.render(
7 |
8 |
9 | ,
10 | document.getElementById("root")
11 | );
12 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "es6",
4 | "lib": [
5 | "dom",
6 | "dom.iterable",
7 | "esnext"
8 | ],
9 | "allowJs": true,
10 | "skipLibCheck": true,
11 | "esModuleInterop": true,
12 | "allowSyntheticDefaultImports": true,
13 | "strict": true,
14 | "forceConsistentCasingInFileNames": true,
15 | "noFallthroughCasesInSwitch": true,
16 | "module": "esnext",
17 | "moduleResolution": "node",
18 | "resolveJsonModule": true,
19 | "isolatedModules": true,
20 | "noEmit": true,
21 | "jsx": "react-jsx"
22 | },
23 | "include": [
24 | "src"
25 | ]
26 | }
27 |
--------------------------------------------------------------------------------