Modifed contents to match AACessTalk

Author: yghokim

app/App.tsx

@@ -11,15 +11,14 @@ export function App() {
   return (<>
     <main className="container mx-auto px-4 sm:px-12 pt-6">
       <div>
-        <div className="font-bold text-lg text-[#ff9164] mb-3">Research Work</div>
-        <div className="text-4xl mb-2 font-bold text-[#f45e9b]">AACessTalk</div> 
+        <div className="font-bold text-lg text-[#4592ec] mb-3">Research Work</div>
+        <img className="mb-2 h-[110px] ml-[-37px]" src={require("../public/images/logos/aacesstalk-logo.svg")}/> 
         <div className="font-light leading-8 sm:leading-[2.5rem] text-2xl sm:text-3xl">Fostering Communication between <strong>Minimally Verbal Autistic Children</strong> and <strong>Parents</strong> with Contextual Guidance and Card Recommendation</div>
       </div>
 
       <Demo/>
       <Abstract/>
       <Members/>
-      <Architecture/>
       <Cite/>
       <Acknowledgments/>
     </main><Footer/></>

app/components/Section.tsx

@@ -5,7 +5,7 @@ export const Section = (props: {
     children?: any
 }) => {
     return <div className={`${props.remove_top_padding === true ? "" : "pt-12"} pb-8 ${props.className}`}>
-        <div className="section-title text-3xl font-light text-[#4592ec] mb-4">{props.title}</div>
+        <div className="section-title text-3xl text-[#4592ec] mb-4">{props.title}</div>
         {
             props.children
         }

app/sections/Abstract.tsx

@@ -8,7 +8,7 @@ export const Abstract = () => {
         As minimally verbal autistic (MVA) children communicate with parents through few words and nonverbal cues, parents often struggle to encourage their children to express subtle emotions and needs and to grasp their nuanced signals. We present AACessTalk, a tablet-based, AI-mediated communication system that facilitates meaningful exchanges between an MVA child and a parent. AACessTalk provides real-time guides to the parent to engage the child in conversation and, in turn, recommends contextual vocabulary cards to the child. Through a two-week deployment study with 11 MVA child-parent dyads, we examine how AACessTalk fosters everyday conversation practice and mutual engagement. Our findings show high engagement from all dyads, leading to increased frequency of conversation and turn-taking. AACessTalk also encouraged parents to explore their own interaction strategies and empowered the children to have more agency in communication. We discuss the implications of designing technologies for balanced communication dynamics in parent-MVA child interaction.
         </p>
         <div className="flex flex-wrap gap-4 mt-4">
-            <a className="icon-label-button bg-teal-500 pl-4" aria-disabled={true} href={"./public/chacha-chi24-preprint-240219.pdf"} target="_blank">
+            <a className="icon-label-button bg-teal-500 pl-4" aria-disabled={true} href={"./public/aacesstalk-arxiv24.pdf"} target="_blank">
                 <NewspaperIcon className="w-6 h-6 text-white"/>
                 <span>Paper</span>
             </a>

app/sections/Acknowledgments.tsx

@@ -4,6 +4,7 @@ export const Acknowledgments = () => {
     return <Section title="Acknowledgments">
         <ul className="list-disc list-outside ml-4">
             <li>This work was supported as a research internship at NAVER AI Lab of NAVER Cloud.</li>
+            <li>AACessTalk leverages symbol images from <a className="underline" href="http://symbol.ksaac.or.kr/searchsymbols/index.jsp">KAAC Symbol Database</a> by Eun-Hye Park (Ewha Women's Univ.), Young Tae Kim (Ewha Womans Univ.), and Ki-Hyung Hong (Sungshin Women's Univ.).</li>
             <li>We used OpenAI&apos;s GPT APIs to run the chatbot.</li>
         </ul>
     </Section>

app/sections/Architecture.tsx

@@ -1,6 +1,6 @@
 import { Section } from "../components/Section"
 export const Architecture = () => {
-    return <Section title="How ChaCha Works">
+    return <Section title="How AACessTalk Works">
         <p className="mb-4">
             ChaCha&apos;s conversational flow is designed as a state machine, where the system stays in one state and proceeds to the next one when meeting the state goal:
         </p>

app/sections/Cite.tsx

@@ -12,14 +12,14 @@ const bibTex = "@misc{choi2024aacesstalk,<br/>\n\
 
 export const Cite = () => {
     return <Section title="Citing This Work">
-        <div className="border-y-[1px] border-slate-400 py-3">
+        <div className="border-y-2 border-purple-500/30 py-3">
             <div>Dasom Choi, SoHyun Park, Kyungah Lee, Hwajung Hong, and Young-Ho Kim. 2024.</div>
             <div className="font-bold">AACessTalk: Fostering Communication between Minimally Verbal Autistic Children and Parents with Contextual Guidance and Card Recommendation.</div>
             <div>https://doi.org/10.48550/arXiv.2409.09641</div>
         </div>
         <div className="mt-4">
             <div className="font-bold mb-1">BibTeX</div>
-            <p className={"p-3 font-mono text-xs sm:text-sm border-[1px] rounded-lg border-slate-300 decoration-none"} dangerouslySetInnerHTML={{__html: bibTex}}/>
+            <p className={"p-3 font-mono text-xs sm:text-sm border-2 rounded-lg border-purple-500/30 decoration-none"} dangerouslySetInnerHTML={{__html: bibTex}}/>
         </div>
 
     </Section>

app/sections/Footer.tsx

@@ -1,7 +1,7 @@
 export const Footer = () => {
-    return <div className="p-4 border-t-[1px] border-slate-300">
+    return <div className="p-4 border-t-2 border-purple-600/30">
         <div className="container mx-auto">
-            <div className="text-sm text-center text-gray-500">Copyright © 2024 NAVER AI Lab. All Rights Reserved.</div>
+            <div className="text-sm text-center text-black">Copyright © 2024 NAVER AI Lab. All Rights Reserved.</div>
         </div>
     </div>
 }

app/sections/Members.tsx

@@ -20,7 +20,7 @@ const members = [
         name: "Kyungah Lee",
         affiliation: "Dodakim Child Development Center",
         role: "Licensed Counselor",
-        thumb: require("../../public/images/thumb-dschoi.jpg"),
+        thumb: require("../../public/images/thumb-kalee.jpg"),
     },
     {
         name: "Hwajung Hong",
@@ -57,7 +57,7 @@ export const Members = () => {
 
                         <div className="font-light">{member.role}</div>
                         <div className="font-light">{member.affiliation}</div>
-                        {member.note != null ? <div className="font-light italic text-sm text-orange-500">{member.note}</div> : null }
+                        {member.note != null ? <div className="font-light italic text-sm text-purple-500">{member.note}</div> : null }
                     </div>
                 </div>
             })
@@ -66,6 +66,7 @@ export const Members = () => {
         <div className="mt-8 flex items-center gap-6 gap-y-8 flex-wrap">
             <a href="https://clova.ai/en/ai-research" target="_black"><img className="w-[200px]" alt="NAVER logo" src={require("../../public/images/logos/ai_lab_logo_vertical.png")} width={1728} height={552}/></a>
             <a href="https://www.kaist.ac.kr/en/" target="_blank"><img className="w-[200px]" alt="KAIST logo" src={require("../../public/images/logos/kaist_logo_trans.png")}/></a>
+            <a href="https://www.navercloudcorp.com/" target="_blank"><img className="w-[135px]" alt="NAVER Cloud logo" src={require("../../public/images/logos/naver-cloud-logo-vertical.png")}/></a>
 
         </div>
     </Section>

index.css

@@ -19,12 +19,13 @@
 
 body {
   color: var(--foreground-rgb);
-  background: linear-gradient(
+  /*background: linear-gradient(
       to bottom,
       transparent,
       var(--background-end-rgb)
     )
-    var(--background-start-rgb);
+    var(--background-start-rgb);*/
+  background: #ffcf68;
 }
 
 @layer base{