resolve merge issues (#141)

Author: charlenehuang1

package.json

@@ -18,6 +18,7 @@
     "url": "https://github.com/uclaacm/bias-by-us/issues"
   },
   "devDependencies": {
-    "husky": "^7.0.0"
+    "husky": "^7.0.0",
+    "lint-staged": "^16.2.6"
   }
 }

website/src/assets/FacialRecognition/AccuracyChart.js

@@ -0,0 +1,104 @@
+import React, { useEffect, useRef } from "react";
+import {
+  Chart as ChartJS,
+  BarController,
+  BarElement,
+  CategoryScale,
+  LinearScale,
+  Tooltip,
+  Legend,
+} from "chart.js";
+
+ChartJS.register(
+  BarController,
+  BarElement,
+  CategoryScale,
+  LinearScale,
+  Tooltip,
+  Legend,
+);
+
+export default function AccuracyChart() {
+  const canvasRef = useRef(null);
+  const chartInstanceRef = useRef(null);
+
+  useEffect(() => {
+    const ctx = canvasRef.current.getContext("2d");
+
+    if (chartInstanceRef.current) {
+      chartInstanceRef.current.destroy();
+    }
+
+    const data = {
+      labels: ["Microsoft", "Face++", "IBM", "Amazon", "Kairos"],
+      datasets: [
+        {
+          label: "Darker female",
+          backgroundColor: "#e58a84",
+          data: [79.2, 65.5, 65.3, 68.63, 77.5],
+        },
+        {
+          label: "Darker male",
+          backgroundColor: "#b39ce4",
+          data: [94, 99.3, 88, 98.74, 98.7],
+        },
+        {
+          label: "Lighter female",
+          backgroundColor: "#8cb492",
+          data: [98.3, 90.2, 92.9, 92.88, 93.6],
+        },
+        {
+          label: "Lighter male",
+          backgroundColor: "#f7c795",
+          data: [100, 99.2, 99.7, 100, 100],
+        },
+      ],
+    };
+
+    const chart = new ChartJS(ctx, {
+      type: "bar",
+      data,
+      options: {
+        responsive: true,
+        plugins: {
+          legend: {
+            position: "bottom",
+          },
+          tooltip: {
+            callbacks: {
+              label: (context) =>
+                `${context.dataset.label}: ${context.parsed.y}%`,
+            },
+          },
+          title: {
+            display: true,
+            text: "Accuracy of Face Recognition Technologies",
+          },
+        },
+        scales: {
+          y: {
+            beginAtZero: true,
+            title: {
+              display: true,
+              text: "Accuracy (%)",
+            },
+          },
+        },
+      },
+    });
+
+    chartInstanceRef.current = chart;
+
+    return () => {
+      if (chartInstanceRef.current) {
+        chartInstanceRef.current.destroy();
+      }
+    };
+  }, []);
+
+  return (
+    <div style={{ width: "100%", maxWidth: "800px", margin: "0 auto" }}>
+      <canvas ref={canvasRef} />
+    </div>
+  );
+}

website/src/caseStudies/FacialRecognition.js

@@ -3,6 +3,7 @@ import "../main.css";
 import teachLogo from "../assets/teachla-logo.svg";
 import PostsList from "../components/mainContent/PostsList";
 import CategorizationGame from "../components/posts/FacialRecognition/CategorizationGame";
+import AccuracyChart from "../components/posts/FacialRecognition/AccuracyChart";
 import { VisibilityProvider } from "../components/mainContent/commonLogic";
 
 export default function FacialRecognition() {
@@ -105,7 +106,7 @@ const FacialRecognitionInfo = [
       ],
     },
   },
-
+ 
   {
     post: {
       profilePic: teachLogo,