feat: ✨ Finishing writing code to analyze image

.env

@@ -0,0 +1 @@
+VISION_KEY=2222

package.json

@@ -12,6 +12,8 @@
   "dependencies": {
     "@azure/cognitiveservices-face": "^5.0.0",
     "@azure/ms-rest-js": "^2.7.0",
+    "@types/node": "^20.4.5",
+    "dotenv": "^16.3.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-webcam": "^7.1.1",

src/components/webcamComponents.tsx

@@ -28,7 +28,7 @@ const CustomWebcam = () => {
             {/* if isCapture is true, show button to upload to Azure */}
             {isCapture[0] ? (
                 <div className="button-container">
-                    <button onClick={uploadAzure}>Upload to Azure</button>
+                    <button onClick={async () => imgSrc && await uploadAzure(imgSrc)}>Upload to Azure</button>
                 </div>
             ) : (
                 <></>

src/scripts/uploadAzure.ts

@@ -1,6 +1,31 @@
-const uploadAzure = () => {
+import { ApiKeyCredentials } from "@azure/ms-rest-js";
-    console.log('Uploading to Azure...');
+import { FaceClient } from "@azure/cognitiveservices-face";
-    //TODO: Create Azure upload script
-};
 
-export default uploadAzure;
+
+const key = import.meta.env.VITE_VISION_KEY;
+const endpoint = import.meta.env.VITE_VISION_ENDPOINT;
+
+console.log(key, endpoint)
+
+if (!key || !endpoint) {
+    if (!key || !endpoint) {
+        throw new Error("Missing VISION_KEY or VISION_ENDPOINT environment variable");
+    }
+}
+
+    const credentials = new ApiKeyCredentials({ inHeader: { 'Ocp-Apim-Subscription-Key': key! } });
+    const client = new FaceClient(credentials, endpoint!);
+
+const uploadAzure = async (image: string) => {
+    console.warn(image)
+    const faces = await client.face.detectWithUrl(image, {
+        detectionModel: "detection_01",
+        returnFaceAttributes: ["age"]
+    });
+    if (faces.length === 0) {
+        throw new Error("No faces detected");
+    }
+}
+
+
+export default uploadAzure;

yarn.lock

@@ -473,6 +473,11 @@
   resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.12.tgz#d70faba7039d5fca54c83c7dbab41051d2b6f6cb"
   integrity sha512-Hr5Jfhc9eYOQNPYO5WLDq/n4jqijdHNlDXjuAQkkt+mWdQR+XJToOHrsD4cPaMXpn6KO7y2+wM8AZEs8VpBLVA==
 
+"@types/node@^20.4.5":
+  version "20.4.5"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-20.4.5.tgz#9dc0a5cb1ccce4f7a731660935ab70b9c00a5d69"
+  integrity sha512-rt40Nk13II9JwQBdeYqmbn2Q6IVTA5uPhvSO+JVqdXw/6/4glI6oR9ezty/A9Hg5u7JH4OmYmuQ+XvjKm0Datg==
+
 "@types/prop-types@*":
   version "15.7.5"
   resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.5.tgz#5f19d2b85a98e9558036f6a3cacc8819420f05cf"
@@ -804,6 +809,11 @@ doctrine@^3.0.0:
   dependencies:
     esutils "^2.0.2"
 
+dotenv@^16.3.1:
+  version "16.3.1"
+  resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-16.3.1.tgz#369034de7d7e5b120972693352a3bf112172cc3e"
+  integrity sha512-IPzF4w4/Rd94bA9imS68tZBaYyBWSCE47V1RGuMrB94iyTOIEwRmVL2x/4An+6mETpLrKJ5hQkB8W4kFAadeIQ==
+
 electron-to-chromium@^1.4.431:
   version "1.4.473"
   resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.473.tgz#4853de13a335c70fe1f9df8d4029be54068767d1"