Empathy

README.md

@@ -1,23 +1,17 @@
 <p align="center">
-    <br/>
-    <a href="https://noora.stanford.edu" target="_blank"><img width="100px" style="margin-bottom:-20px; margin-left:20px" src="./public/img/logos/noora/lamp.png" /></a>
-    <h2 align="center"><b>Noora</b></h2>
-    <p align="center">Use AI to improve your social skills.</p>
+    <h1 align="center"><b>Noora</b></h1>
+    <p align="center">Use AI to improve your social conversation.</p>
     <p align="center">
-    A platform utilizing conversational AI to improve the social skills of individuals with Autism Spectrum Disorder (ASD).
+    A platform utilizing conversational AI to improve the social conversation of individuals with Autism Spectrum Disorder (ASD).
     </p>
     <p align="center" style="align: center;">
-        <a href="https://med.stanford.edu/" target="_blank">
-            <img src="./public/img/logos/stanford/medicine.png" width="140px" alt="Stanford Medicine" style="margin-bottom:5px" />
-        </a>
-        <span style="visibility: hidden">x</span>
         <a href="https://stanford.edu" target="_blank">
             <img src="./public/img/logos/stanford/university.png" width="140px" alt="Stanford University" />
         </a>
     </p>
     <p align="center" style="align: center;">
         <a href="https://vercel.com/?utm_source=[stanford-oval]&utm_campaign=oss" target="_blank">
-            <img src="./public/img/logos/vercel/powered-by.svg" width="120px" alt="Powered by Vercel" />
+            <img src="./public/img/logos/vercel/powered-by.svg" width="150px" alt="Powered by Vercel" />
         </a>
     </p>
 </p>
@@ -26,9 +20,9 @@
 
 ## Overview
 
-Noora is is a research project led by Prof. Monica Lam, from Stanford University, with the goal of improving the social skills of people with Autism Spectrum Disorder (ASD). The project is a collaboration between <a href="https://oval.cs.stanford.edu" target="_blank">Stanford's Open Virtual Assistant Lab</a> and <a href="https://profiles.stanford.edu/lynn-koegel" target="_blank">Dr. Lynn Koegel</a> in Stanford's Dept. of Psychiatry and Behavioral Sciences.
+Noora is is a research project led by Prof. Monica Lam, from Stanford University, with the goal of improving the social conversation of people with Autism Spectrum Disorder (ASD). The project is a collaboration between <a href="https://oval.cs.stanford.edu" target="_blank">Stanford's Open Virtual Assistant Lab</a> and <a href="https://profiles.stanford.edu/lynn-koegel" target="_blank">Dr. Lynn Koegel</a> from Stanford's Dept. of Psychiatry and Behavioral Sciences.
 
-Dr. Koegel's intervention method, pivotal response training, has been shown to help individuals make friends, have romantic relationships, collaborate in the workplace, and engage in leisure activities. Because pivotal response training's applicability is restricted by the lack of trained professionals, Noora's goal is to automate the intervention, the success of which can have a great impact on society, as 1 in 54 children is currently diagnosed with ASD. 
+<!-- Dr. Koegel's intervention method, pivotal response training, has been shown to help individuals make friends, have romantic relationships, collaborate in the workplace, and engage in leisure activities. Because pivotal response training's applicability is restricted by the lack of trained professionals, Noora's goal is to automate the intervention, the success of which can have a great impact on society, as 1 in 54 children is currently diagnosed with ASD.  -->
 
 This project built with Next.js, Tailwind CSS, OpenAI's GPT-3, and Microsoft Azure.
 
@@ -52,4 +46,22 @@ For the speech-to-text and text-to-speech functionality, create an Azure speech
 OPENAI_API_KEY=[your API key]
 SPEECH_KEY=[your API key]
 SPEECH_REGION=[your API key]
-```
+```
+
+## Repo Structure
+
+**`pages`**: all of the Next.js app's paths (e.g., `noora.tsx`, `_404.tsx`). These files simply return components, typically wrapped by the `<Page>` component.
+
+**`components`**: the bulk of the website code. Folders under this directory reference the pages of the website, with the exception of `components/global` and `components/interfaces`.
+- `components/interfaces` contains the code behind the Noora Chat feature and the Ask Noora feature.
+
+**`data`**: all static or pre-written data, such as GPT-3 prompts, statement banks, routes.
+
+**`scripts`**: code that is called by components.
+- `/scripts/noora-chat` (and, more specifically, `get-reply.ts`) contains the logic and flow for Noora's replies, and is used in `MessageBox.tsx` (where users submit their message in the Noora Chat). 
+
+**`pages/api`**: the REST API endpoints. Rate limiting is in place for endpoints (implementation found in `scripts/rate-limit.ts`). 
+- `api/openai` calls OpenAI's Completion endpoint and returns the resulting `text` and `logprobs`. 
+- `api/get-speech-token.ts` retrieves an ephemeral authentication token for Microsoft Azure's speech service.
+
+**`public`**: the public assets including images and static files.

package.json

@@ -16,19 +16,26 @@
     "@headlessui/react": "^1.6.6",
     "@heroicons/react": "^1.0.6",
     "@tailwindcss/forms": "^0.5.2",
+    "@types/dateformat": "^5.0.0",
     "@types/uuid": "^8.3.4",
     "clsx": "^1.2.1",
+    "dateformat": "^5.0.3",
     "fs": "^0.0.1-security",
+    "heroicons": "^2.0.10",
     "lru-cache": "^7.13.1",
     "microsoft-cognitiveservices-speech-sdk": "^1.22.0",
     "next": "12.2.2",
     "openai": "^3.0.0",
     "openai-api": "^1.3.1",
     "react": "18.2.0",
     "react-anchor-link-smooth-scroll": "^1.0.12",
+    "react-circular-progressbar": "^2.1.0",
+    "react-device-detect": "^2.2.2",
     "react-dom": "18.2.0",
     "react-joyride": "^2.5.0",
     "react-spinners": "^0.13.3",
+    "reactjs-percentage-circle": "^1.0.0",
+    "swr": "^1.3.0",
     "universal-cookie": "^4.0.4",
     "uuid": "^8.3.2"
   },

src/components/ask-noora/AskNoora.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import AskNooraComponent from "../interfaces/ask-noora-interface/AskNooraComponent";
+import AskNooraComponent from "../interfaces/ask-noora/AskNooraComponent";
 
 export default function AskNoora() {
   const [q, setQ] = useState("");

src/components/dashboard/AttemptHistory.tsx

@@ -0,0 +1,70 @@
+import React from "react";
+import useSWR from 'swr'
+import dateFormat from "dateformat";
+import { CircularProgressbarWithChildren } from 'react-circular-progressbar';
+import 'react-circular-progressbar/dist/styles.css';
+import clsx from "clsx";
+import Progress from "../interfaces/noora-chat/menu/sections/Progress";
+
+export default function AttemptHistory() {
+    const { data } = useSWR("progress", key => {
+        const value = localStorage.getItem(key);
+        return !!value ? JSON.parse(value) : undefined;
+    })
+
+    return (
+        <div className="grid grid-cols-12 pt-3 gap-y-3">
+            {data && data.map((attempt: any, idx: number) => {
+                let dateStr = dateFormat(new Date(attempt.timeCompleted), "mmmm dS, h:MM TT");
+                return (
+                    <div key={idx} className="col-span-12 flex gap-y-4 flex-col md:flex-row rounded-lg justify-between items-center text-noora-secondary  px-5 py-6 bg-gray-100 border-2 border-gray-200">
+                        <div className="text-center sm:text-left">
+                            <p className="text-sm text-slate-500">
+                                {dateStr}
+                            </p>
+                            <h1 className="text-2xl font-medium">Attempt {data.length - idx}</h1>
+                        </div>
+                        <div className="flex items-stretch flex-wrap justify-center flex-row gap-x-4 gap-y-3">
+                            <ProgressCircle num={attempt.scores.total[0]} denom={attempt.scores.total[1]} title="total" />
+                            <div className="border-gray-300 bg-gray-300 border-1 hidden sm:block"></div>
+                            {Object.keys(attempt.scores).map((k: any) => {
+                                k = k as keyof typeof attempt.scores
+                                if (k == "total" || attempt.scores[k][1] == 0) return <div key={k}></div>
+                                return <ProgressCircle key={k} num={attempt.scores[k][0]} denom={attempt.scores[k][1]} title={k} />
+                            })}
+                        </div>
+                    </div>)
+            })
+            }
+        </div >
+    );
+}
+
+function ProgressCircle({ num, denom, title }: any) {
+    return <div className="w-24 h-24 text-xl">
+        <CircularProgressbarWithChildren styles={{
+            // Customize the root svg element
+            root: {},
+            // Customize the path, i.e. the "completed progress"
+            path: {
+                // Path color
+                stroke: `rgba(${title == "total" ? "105, 64, 182" : "62, 152, 199"}, ${num / denom})`,
+                // Whether to use rounded or flat corners on the ends - can use 'butt' or 'round'
+                strokeLinecap: 'butt',
+            },
+            // Customize the circle behind the path, i.e. the "total progress"
+            trail: {
+                // Trail color
+                stroke: '#dbdbdb',
+                // Whether to use rounded or flat corners on the ends - can use 'butt' or 'round'
+                strokeLinecap: 'butt',
+                // Rotate the trail
+                transform: 'rotate(0.25turn)',
+                transformOrigin: 'center center',
+            },
+        }} value={num} maxValue={denom} strokeWidth={12}>
+            <div className={clsx("text-xl", title == "total" ? "font-bold text-noora-primary-dark" : "text-noora-secondary")}>{`${num}/${denom}`}</div>
+            <div className={clsx("text-xs -mt-1 text-gray-600", title)}>{title}</div>
+        </CircularProgressbarWithChildren>
+    </div>
+}

src/components/dashboard/ProgressSummary.tsx

@@ -1,22 +1,23 @@
 import React from "react";
 import { ArrowSmRightIcon } from "@heroicons/react/solid";
 import Link from "next/link";
+import AttemptHistory from "./AttemptHistory";
 
 export default function ProgressSummary() {
   return (
     <div>
       <div className="pb-4 text-slate-700 flex flex-col gap-y-2">
         <h1 className="inline font-bold text-noora-secondary font-display text-3xl tracking-tight">
           Practice your{" "}
-          <span className="special-underline">social skills</span>.
+          <span className="special-underline">social conversation</span>.
         </h1>
         <p>
           Noora helps you practice challenging aspects of social conversation, such as{" "}
           <b>responding empathetically and positively to others</b>.
         </p>
       </div>
-      <div className="grid grid-cols-12">
-        <div className="col-span-12 flex justify-between items-center text-white  px-5 py-6 bg-noora-primary rounded-lg bg-gradient-to-br from-noora-primary-light via-noora-primary to-noora-secondary-bright">
+      <div id="progress" className="grid grid-cols-12">
+        <div className="col-span-12 flex flex-col sm:flex-row gap-y-4 text-center sm:text-left justify-between items-center text-white  px-5 py-6 bg-noora-primary rounded-lg bg-gradient-to-br from-noora-primary-light via-noora-primary to-noora-secondary-bright">
           <div>
             <h1 className="text-2xl font-bold">Up Next</h1>
             <p className="text-lg">
@@ -33,6 +34,7 @@ export default function ProgressSummary() {
           </div>
         </div>
       </div>
+      <AttemptHistory />
     </div>
   );
 }

src/components/utility/Page.tsx → src/components/global/utility/Page.tsx

@@ -1,6 +1,6 @@
 import React from "react";
-import Header from "../global/header/Header";
-import Footer from "../global/footer/Footer";
+import Header from "../../global/header/Header";
+import Footer from "../../global/footer/Footer";
 import Head from "next/head";
 
 export default function Page({ fullTitle, title, desc, children }: PageProps) {