Merge branch 'master' into qingxin-xia/issue124

Author: charlenehuang1

website/src/caseStudies/FacialRecognition.js

@@ -30,7 +30,25 @@ const FacialRecognitionInfo = [
       subheader: "Stay Tuned For More!",
       bodyText: [
         {
-          body: <p className="bold">We Will Work On This Case Study!</p>,
+          body: (
+            <p>
+              Facial recognition technology is often used to identify crime
+              suspects. However, research has shown that this technology is
+              often inaccurate when identifying certain groups of people. A
+              study by MIT found that facial recognition systems can be up to
+              35% less accurate when identifying women or people of color. This
+              can lead law enforcement to arrest or accuse the wrong people.
+            </p>
+          ),
+        },
+        {
+          body: (
+            <p className="bold">
+              In this case study, we explore how humans’ biases when identifying
+              people can affect how we train our facial recognition
+              systems.{" "}
+            </p>
+          ),
         },
       ],
     },
@@ -88,6 +106,20 @@ const FacialRecognitionInfo = [
     },
   },
 
+  {
+    post: {
+      profilePic: teachLogo,
+      profilePicName: "Profile Picture - Frame 3",
+      header: "Accuracy of Face Recognition Technologies",
+      subheader: "Hover to See Group Performance",
+      bodyText: [
+        {
+          body: <AccuracyChart />,
+        },
+      ],
+    },
+  },
+
   {
     post: {
       profilePic: teachLogo,
@@ -274,29 +306,26 @@ const FacialRecognitionInfo = [
         {
           body: (
             <p className="bold">
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-              eiusmod tempor incididunt ut labore et dolore magna aliqua.
+              The Consequences of Bias in Facial Recognition
             </p>
           ),
         },
         {
           body: (
             <p>
-              Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
-              nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
-              reprehenderit in voluptate velit esse cillum dolore eu fugiat
-              nulla pariatur.
+              Facial recognition technology has repeatedly been shown to exhibit
+              various biases against certain groups, leading to real-world
+              consequences such as wrongful identification of suspects or
+              determining healthcare. To address these issues, researchers are
+              actively working on debiasing facial recognition models as well as
+              the data sets they rely on. This involves creating more balanced
+              training data and adjusting algorithms so they learn to make
+              accurate predictions.
             </p>
           ),
         },
         {
-          body: (
-            <p>
-              <mark className="bold">{`TODO: `} </mark>Excepteur sint occaecat
-              cupidatat non proident, sunt in culpa qui officia deserunt mollit
-              anim id est laborum.
-            </p>
-          ),
+          body: <p></p>,
         },
       ],
     },

website/src/components/AboutUsPage.js

@@ -30,8 +30,100 @@ const aboutUsInfo = [
         {
           body: (
             <p className="bold">
-              This will be a page with information about TeachLA as a whole, and
-              what Learning Labs aim to do!
+              "Empowering students to understand technology — and how it impacts
+              the world around them."
+            </p>
+          ),
+        },
+      ],
+    },
+  },
+  {
+    post: {
+      profilePic: teachLogo,
+      profilePicName: "Teach LA Logo",
+      header: "Who We Are",
+      subheader: "About Teach LA",
+      bodyText: [
+        {
+          body: (
+            <p>
+              Teach LA is a student-run organization at UCLA dedicated to making
+              computer science education accessible, engaging, and inclusive for
+              all.
+            </p>
+          ),
+        },
+        {
+          body: (
+            <p>
+              We believe that computer science isn't just about coding — it's
+              about creativity, collaboration, and understanding the technology
+              that shapes our everyday lives.
+            </p>
+          ),
+        },
+        {
+          body: (
+            <p>
+              Through free lessons, interactive projects, and community
+              outreach, our members design and teach programming content to K–12
+              students and beyond.
+            </p>
+          ),
+        },
+        {
+          body: (
+            <p>
+              Our mission is simple: to help everyone, regardless of background,
+              learn how to think critically about technology and use it to make
+              a positive impact.
+            </p>
+          ),
+        },
+      ],
+    },
+  },
+  {
+    post: {
+      profilePic: teachLogo,
+      profilePicName: "Teach LA Logo",
+      header: "What Are Learning Labs?",
+      subheader: "Interactive Education, Made Fun",
+      bodyText: [
+        {
+          body: (
+            <p>
+              Learning Labs are interactive educational experiences designed and
+              built by Teach LA members.
+            </p>
+          ),
+        },
+        {
+          body: (
+            <p>
+              Each lab turns a complex or abstract computer science topic into
+              something you can <em>see</em>, <em>play with</em>, and{" "}
+              <em>understand</em> hands-on.
+            </p>
+          ),
+        },
+        {
+          body: (
+            <p>
+              From exploring the logic behind artificial intelligence to
+              understanding bias in algorithms, our labs invite you to
+              experiment, learn, and reflect on how technology connects to the
+              real world.
+            </p>
+          ),
+        },
+        {
+          body: (
+            <p>
+              Whether you're a beginner or an experienced coder, Learning Labs
+              are here to spark curiosity and deepen understanding — one
+              interactive lesson at a time.
             </p>
           ),
         },

website/src/components/posts/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>
+  );
+}