diff --git a/.env b/.env new file mode 100644 index 0000000..a2bd88d --- /dev/null +++ b/.env @@ -0,0 +1 @@ +KEYMORPH=e8228c7fa5a635e3e3de90ec8872c717bbedaa641d00 \ No newline at end of file diff --git a/.gitignore b/.gitignore index 4d29575..48ff308 100644 --- a/.gitignore +++ b/.gitignore @@ -21,3 +21,6 @@ npm-debug.log* yarn-debug.log* yarn-error.log* + +# Local Netlify folder +.netlify diff --git a/package-lock.json b/package-lock.json index fc74640..3eb2f56 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12,9 +12,7 @@ "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", "async-mutex": "^0.4.0", - "chart.js": "^3.9.1", "react": "^18.2.0", - "react-chartjs-2": "^4.3.1", "react-dom": "^18.2.0", "react-scripts": "5.0.1", "web-vitals": "^2.1.4" @@ -4699,6 +4697,8 @@ "version": "8.11.0", "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.11.0.tgz", "integrity": "sha512-wGgprdCvMalC0BztXvitD2hC04YffAvtsUn93JbGXYLAtCUO4xd17mCCZQxUOItiBwZvJScWo8NIvQMQ71rdpg==", + "optional": true, + "peer": true, "dependencies": { "fast-deep-equal": "^3.1.1", "json-schema-traverse": "^1.0.0", @@ -4713,7 +4713,9 @@ "node_modules/ajv-formats/node_modules/json-schema-traverse": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz", - "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==" + "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==", + "optional": true, + "peer": true }, "node_modules/ajv-keywords": { "version": "3.5.2", @@ -5562,11 +5564,6 @@ "node": ">=10" } }, - "node_modules/chart.js": { - "version": "3.9.1", - "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-3.9.1.tgz", - "integrity": "sha512-Ro2JbLmvg83gXF5F4sniaQ+lTbSv18E+TIf2cOeiH1Iqd2PGFOtem+DUufMZsCJwFE7ywPOpfXFBwRTGq7dh6w==" - }, "node_modules/check-types": { "version": "11.1.2", "resolved": "https://registry.npmjs.org/check-types/-/check-types-11.1.2.tgz", @@ -14022,15 +14019,6 @@ "node": ">=14" } }, - "node_modules/react-chartjs-2": { - "version": "4.3.1", - "resolved": "https://registry.npmjs.org/react-chartjs-2/-/react-chartjs-2-4.3.1.tgz", - "integrity": "sha512-5i3mjP6tU7QSn0jvb8I4hudTzHJqS8l00ORJnVwI2sYu0ihpj83Lv2YzfxunfxTZkscKvZu2F2w9LkwNBhj6xA==", - "peerDependencies": { - "chart.js": "^3.5.0", - "react": "^16.8.0 || ^17.0.0 || ^18.0.0" - } - }, "node_modules/react-dev-utils": { "version": "12.0.1", "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-12.0.1.tgz", @@ -20280,14 +20268,13 @@ "version": "2.1.1", "resolved": "https://registry.npmjs.org/ajv-formats/-/ajv-formats-2.1.1.tgz", "integrity": "sha512-Wx0Kx52hxE7C18hkMEggYlEifqWZtYaRgouJor+WMdPnQyEK13vgEWyVNup7SoeeoLMsr4kf5h6dOW11I15MUA==", - "requires": { - "ajv": "^8.0.0" - }, + "requires": {}, "dependencies": { "ajv": { - "version": "8.11.0", - "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.11.0.tgz", + "version": "https://registry.npmjs.org/ajv/-/ajv-8.11.0.tgz", "integrity": "sha512-wGgprdCvMalC0BztXvitD2hC04YffAvtsUn93JbGXYLAtCUO4xd17mCCZQxUOItiBwZvJScWo8NIvQMQ71rdpg==", + "optional": true, + "peer": true, "requires": { "fast-deep-equal": "^3.1.1", "json-schema-traverse": "^1.0.0", @@ -20298,7 +20285,9 @@ "json-schema-traverse": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz", - "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==" + "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==", + "optional": true, + "peer": true } } }, @@ -20918,11 +20907,6 @@ "resolved": "https://registry.npmjs.org/char-regex/-/char-regex-1.0.2.tgz", "integrity": "sha512-kWWXztvZ5SBQV+eRgKFeh8q5sLuZY2+8WUIzlxWVTg+oGwY14qylx1KbKzHd8P6ZYkAg0xyIDU9JMHhyJMZ1jw==" }, - "chart.js": { - "version": "3.9.1", - "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-3.9.1.tgz", - "integrity": "sha512-Ro2JbLmvg83gXF5F4sniaQ+lTbSv18E+TIf2cOeiH1Iqd2PGFOtem+DUufMZsCJwFE7ywPOpfXFBwRTGq7dh6w==" - }, "check-types": { "version": "11.1.2", "resolved": "https://registry.npmjs.org/check-types/-/check-types-11.1.2.tgz", @@ -26862,12 +26846,6 @@ "whatwg-fetch": "^3.6.2" } }, - "react-chartjs-2": { - "version": "4.3.1", - "resolved": "https://registry.npmjs.org/react-chartjs-2/-/react-chartjs-2-4.3.1.tgz", - "integrity": "sha512-5i3mjP6tU7QSn0jvb8I4hudTzHJqS8l00ORJnVwI2sYu0ihpj83Lv2YzfxunfxTZkscKvZu2F2w9LkwNBhj6xA==", - "requires": {} - }, "react-dev-utils": { "version": "12.0.1", "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-12.0.1.tgz", @@ -27969,7 +27947,6 @@ "normalize-path": "^3.0.0", "object-hash": "^3.0.0", "picocolors": "^1.0.0", - "postcss": "^8.4.17", "postcss-import": "^14.1.0", "postcss-js": "^4.0.0", "postcss-load-config": "^3.1.4", diff --git a/src/App.js b/src/App.js index 59149ce..4e7fb6a 100644 --- a/src/App.js +++ b/src/App.js @@ -2,7 +2,7 @@ import { useEffect, useRef } from "react"; import { useExternalScript } from "./helpers/ai-sdk/externalScriptsLoader"; import { getAiSdkControls } from "./helpers/ai-sdk/loader"; -import './App.css'; +import "./App.css"; import GenderComponent from "./components/GenderComponent"; import AgeComponent from "./components/AgeComponent"; @@ -14,23 +14,24 @@ import MoodComponent from "./components/MoodComponent"; import EmotionBarsComponent from "./components/EmotionBarsComponent"; function App() { - - const mphToolsState = useExternalScript("https://sdk.morphcast.com/mphtools/v1.0/mphtools.js"); - const aiSdkState = useExternalScript("https://ai-sdk.morphcast.com/v1.16/ai-sdk.js"); - const videoEl = useRef(undefined) + const mphToolsState = useExternalScript( + "https://sdk.morphcast.com/mphtools/v1.0/mphtools.js" + ); + const aiSdkState = useExternalScript( + "https://ai-sdk.morphcast.com/v1.16/ai-sdk.js" + ); + const videoEl = useRef(undefined); useEffect(() => { videoEl.current = document.getElementById("videoEl"); - async function getAiSdk (){ - if(aiSdkState === "ready" && mphToolsState === "ready"){ + async function getAiSdk() { + if (aiSdkState === "ready" && mphToolsState === "ready") { const { source, start } = await getAiSdkControls(); - await source.useCamera({ - toVideoElement: document.getElementById("videoEl"), - }); + await source.useCamera({ + toVideoElement: document.getElementById("videoEl"), + }); await start(); - } - } getAiSdk(); }, [aiSdkState, mphToolsState]); @@ -38,26 +39,35 @@ function App() { return (
-
-
- - +
+
+
+ + +
+
-
+
-
+
-
+
-
+
-
+
-
- -
- +
+
diff --git a/src/helpers/ai-sdk/loader.js b/src/helpers/ai-sdk/loader.js index ac3d8a3..2e24a83 100644 --- a/src/helpers/ai-sdk/loader.js +++ b/src/helpers/ai-sdk/loader.js @@ -19,10 +19,11 @@ async function initAiSdk() { throw new Error("An instance of the AI-SDK is already running."); } source = new Source(); + console.log(process.env.KEYMORPH) aiSdkInstance = await globalThis.CY.loader() // TODO INSERT YOUR LICENSE KEY HERE - .licenseKey("insert-here-your-license-key") // <--- ############## + .licenseKey("e8228c7fa5a635e3e3de90ec8872c717bbedaa641d00") // <--- ############## .source(source) .addModule(globalThis.CY.modules().FACE_DETECTOR.name) .addModule(globalThis.CY.modules().FACE_EMOTION.name, {