Skip to content

Commit 5464b4e

Browse files
yghokimyghokim
committed
Customizing contents
1 parent 7b2f343 commit 5464b4e

25 files changed

+55
-8909
lines changed

‎README.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
# ChaCha Project Website
1+
# AACessTalk Project Website
22

33
https://naver-ai.github.io/aacesstalk/
44

@@ -29,7 +29,7 @@ https://naver-ai.github.io/aacesstalk/
2929
```json
3030
"build": "rm -rf dist && rm -rf .parcel-cache && rm -rf .cache && parcel build index.html ./public/*.pdf --public-url https://naver-ai.github.io/aacesstalk",
3131
```
32-
Replace the public-url argument value 'https://naver-ai.github.io/chacha' with the domain you are using.
32+
Replace the public-url argument value 'https://naver-ai.github.io/aacesstalk' with the domain you are using.
3333
2. Run deployment script:
3434
```sh
3535
> npm run deploy

‎app/App.tsx

+7-7
Original file line numberDiff line numberDiff line change
@@ -5,19 +5,19 @@ import { Abstract } from "./sections/Abstract";
55
import { Footer } from "./sections/Footer";
66
import { Architecture } from "./sections/Architecture";
77
import { Mockup } from "./sections/Mockup";
8+
import { Demo } from "./sections/Demo";
89

910
export function App() {
1011
return (<>
1112
<main className="container mx-auto px-4 sm:px-12 pt-6">
1213
<div>
13-
<div className="font-bold text-lg text-[#ff9164] mb-3">ACM CHI 2024 Paper</div>
14-
<div className="text-4xl mb-2 font-bold text-[#f45e9b]">ChaCha</div>
15-
<div className="font-light leading-8 sm:leading-[2.5rem] text-2xl sm:text-3xl">Leveraging <strong>Large Language Models</strong> to Prompt <strong>Children</strong> to Share Their <strong>Emotions</strong> about <strong>Personal Events</strong></div>
16-
</div>
17-
<div className="flex flex-col items-center md:flex-row md:items-start gap-12">
18-
<Mockup/>
19-
<Abstract/>
14+
<div className="font-bold text-lg text-[#ff9164] mb-3">Research Work</div>
15+
<div className="text-4xl mb-2 font-bold text-[#f45e9b]">AACessTalk</div>
16+
<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>
2017
</div>
18+
19+
<Demo/>
20+
<Abstract/>
2121
<Members/>
2222
<Architecture/>
2323
<Cite/>

‎app/sections/Abstract.tsx

+4-4
Original file line numberDiff line numberDiff line change
@@ -5,20 +5,20 @@ import { NewspaperIcon } from "@heroicons/react/20/solid"
55
export const Abstract = () => {
66
return <Section title="Abstract" className="flex-1 pt-0 md:pt-12">
77
<p>
8-
Children typically learn to identify and express emotions through sharing their stories and feelings with others, particularly their family. However, it is challenging for parents or siblings to have emotional communication with children since children are still developing their communication skills. We present <b>ChaCha</b>, a chatbot that encourages and guides children to share personal events and associated emotions. <strong>ChaCha combines a state machine and large language models (LLMs) to keep the dialogue on track while carrying on free-form conversations.</strong> Through an exploratory study with 20 children (aged 8-12), we examine how ChaCha prompts children to share personal events and guides them to describe associated emotions. Participants perceived ChaCha as a close friend and shared their stories on various topics, such as family trips and personal achievements. Based on the findings, we discuss opportunities for leveraging LLMs to design child-friendly chatbots to support children in sharing emotions.
8+
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.
99
</p>
1010
<div className="flex flex-wrap gap-4 mt-4">
1111
<a className="icon-label-button bg-teal-500 pl-4" aria-disabled={true} href={"./public/chacha-chi24-preprint-240219.pdf"} target="_blank">
1212
<NewspaperIcon className="w-6 h-6 text-white"/>
1313
<span>Paper</span>
1414
</a>
15-
<a className="icon-label-button bg-red-400 pl-4" href="https://arxiv.org/abs/2309.12244" target="_blank">
15+
<a className="icon-label-button bg-red-400 pl-4" href="https://arxiv.org/abs/2409.09641" target="_blank">
1616
<ArxivIcon size={20}/>
1717
<span>arXiv</span>
1818
</a>
19-
<a className="icon-label-button" href="https://github.com/naver-ai/chacha-chatbot" target="_blank">
19+
<a className="icon-label-button" href="#">
2020
<GithubIcon size={28}/>
21-
<span>Source code</span>
21+
<span>Source code (Coming Soon)</span>
2222
</a>
2323
</div>
2424
</Section>

‎app/sections/Acknowledgments.tsx

+1-2
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,7 @@ import { Section } from "../components/Section"
33
export const Acknowledgments = () => {
44
return <Section title="Acknowledgments">
55
<ul className="list-disc list-outside ml-4">
6-
<li>This work was supported as a research internship at NAVER AI Lab.</li>
7-
<li>The conversational flow design was shaped in National Science Foundation CAREER Grant #1942547 (PI: Sun Young Park).</li>
6+
<li>This work was supported as a research internship at NAVER AI Lab of NAVER Cloud.</li>
87
<li>We used OpenAI&apos;s GPT APIs to run the chatbot.</li>
98
</ul>
109
</Section>

‎app/sections/Architecture.tsx

-3
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,9 @@ export const Architecture = () => {
44
<p className="mb-4">
55
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:
66
</p>
7-
<img alt="phases figure" className="w-full my-8 hidden md:block" src={require('../../public/images/phases.svg')}/>
8-
<img alt="phases figure" className="w-full my-8 block md:hidden" src={require('../../public/images/phases-vertical.svg')}/>
97
<p className="my-4 mt-20">
108
Based on the conversational flow and the current dialogue, an LLM is prompted dynamically. For example, receiving the child&apos;s message in the <span className="p-3 py-0.5 rounded-full bg-[#85c038] text-white">Label</span> phase, (1) the conversation analyzer <span className="circle-digit">A</span> analyzes the current dialogue <span className="circle-digit">B</span> and extracts a structured summary <span className="circle-digit">C</span> of what emotions are identified and whether ChaCha has acknowledged them. Combining the incomplete piece of the summary <span className="circle-digit">D</span> as well as the summary data from the previous phase <span className="circle-digit">E</span>, (2) the system formulates a new instruction <span className="circle-digit">F</span> for the response generation. (3) That way, the LLM <span className="circle-digit">G</span> generates a response <span className="circle-digit">H</span> explicitly steered to empathize with the child&apos;s regretful event.
119
</p>
12-
<img alt="prompting figure" className="w-full my-8" src={require('../../public/images/prompting.svg')}/>
1310

1411
</Section>
1512
}

‎app/sections/Cite.tsx

+12-14
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,21 @@
11
import { Section } from "../components/Section"
22

3-
const bibTex = "@inproceedings{seo2024chacha,<br/>\n\
4-
&emsp;&emsp;author = {Seo, Woosuk and Yang, Chanmo and Kim, Young-Ho},<br/>\n\
5-
&emsp;&emsp;title = {ChaCha: Leveraging Large Language Models to Prompt Children to Share Their Emotions about Personal Events},<br/>\n\
6-
&emsp;&emsp;year = {2024},<br/>\n\
7-
&emsp;&emsp;doi = {10.1145/3613904.3642152},<br/>\n\
8-
&emsp;&emsp;publisher = {Association for Computing Machinery},<br/>\n\
9-
&emsp;&emsp;address = {New York, NY, USA},<br/>\n\
10-
&emsp;&emsp;booktitle = {Proceedings of the CHI Conference on Human Factors in Computing Systems},<br/>\n\
11-
&emsp;&emsp;location = {Honolulu, HI, USA},<br/>\n\
12-
&emsp;&emsp;series = {CHI'24}<br/>\n\
13-
}"
3+
const bibTex = "@misc{choi2024aacesstalk,<br/>\n\
4+
&emsp;&emsp;title={AACessTalk: Fostering Communication between Minimally Verbal Autistic Children and Parents with Contextual Guidance and Card Recommendation},<br/>\n\
5+
&emsp;&emsp;author={Dasom Choi and SoHyun Park and Kyungah Lee and Hwajung Hong and Young-Ho Kim},<br/>\n\
6+
&emsp;&emsp;year={2024},<br/>\n\
7+
&emsp;&emsp;eprint={2409.09641},<br/>\n\
8+
&emsp;&emsp;archivePrefix={arXiv},<br/>\n\
9+
&emsp;&emsp;primaryClass={cs.HC},<br/>\n\
10+
&emsp;&emsp;url={https://arxiv.org/abs/2409.09641},<br/>\n\
11+
}"
1412

1513
export const Cite = () => {
1614
return <Section title="Citing This Work">
1715
<div className="border-y-[1px] border-slate-400 py-3">
18-
<div>Woosuk Seo, Chanmo Yang, and Young-Ho Kim. 2024.</div>
19-
<div className="font-bold">ChaCha: Leveraging Large Language Models to Prompt Children to Share Their Emotions about Personal Events.</div>
20-
<div>In <i>Proceedings of ACM CHI Conference on Human Factors in Computing Systems</i> (CHI&apos;24). To appear.</div>
16+
<div>Dasom Choi, SoHyun Park, Kyungah Lee, Hwajung Hong, and Young-Ho Kim. 2024.</div>
17+
<div className="font-bold">AACessTalk: Fostering Communication between Minimally Verbal Autistic Children and Parents with Contextual Guidance and Card Recommendation.</div>
18+
<div>https://doi.org/10.48550/arXiv.2409.09641</div>
2119
</div>
2220
<div className="mt-4">
2321
<div className="font-bold mb-1">BibTeX</div>

‎app/sections/Demo.tsx

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
export const Demo = () => {
2+
return <div className="mt-10">
3+
<iframe src="https://drive.google.com/file/d/1mTnPr7D0XJdSBrYoH2pVJWRsAEJUCFcM/preview" allow="autoplay" className="aspect-video w-full"></iframe>
4+
</div>
5+
}

‎app/sections/Footer.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
export const Footer = () => {
22
return <div className="p-4 border-t-[1px] border-slate-300">
33
<div className="container mx-auto">
4-
<div className="text-sm text-center text-gray-500">Copyright © 2024 The ChaCha Team. All Rights Reserved.</div>
4+
<div className="text-sm text-center text-gray-500">Copyright © 2024 NAVER AI Lab. All Rights Reserved.</div>
55
</div>
66
</div>
77
}

‎app/sections/Members.tsx

+20-22
Original file line numberDiff line numberDiff line change
@@ -3,32 +3,31 @@ import { HomeIcon } from '@heroicons/react/20/solid'
33

44
const members = [
55
{
6-
name: "Woosuk Seo",
7-
affiliation: "Univ. of Michigan, Ann Arbor",
8-
role: "PhD candidate",
9-
thumb: require("../../public/images/thumb-wsseo.jpg"),
10-
web: "https://seowoosuk.wixsite.com/home",
6+
name: "Dasom Choi",
7+
affiliation: "KAIST",
8+
role: "PhD Candidate",
9+
thumb: require("../../public/images/thumb-dschoi.jpg"),
10+
web: "https://dasomchoi.com/",
1111
note: "*Research intern at NAVER AI Lab"
1212
},
1313
{
14-
name: "Chanmo Yang",
15-
affiliation: "Wonkwang Univ. Hospital",
16-
role: "Child and Adolescent Psychiatrist",
17-
thumb: require("../../public/images/thumb-cmyang.jpg"),
14+
name: "SoHyun Park",
15+
affiliation: "NAVER Cloud",
16+
role: "Researcher",
17+
thumb: require("../../public/images/thumb-shpark.jpg")
1818
},
1919
{
20-
name: "Sun Young Park",
21-
affiliation: "Univ. of Michigan, Ann Arbor",
22-
role: "Associate Professor",
23-
thumb: require("../../public/images/thumb-sypark.jpg"),
24-
web: "http://sunyoungpark.weebly.com/",
20+
name: "Kyungah Lee",
21+
affiliation: "Dodakim Child Development Center",
22+
role: "Licensed Counselor",
23+
thumb: require("../../public/images/thumb-dschoi.jpg"),
2524
},
2625
{
27-
name: "Mark S. Ackerman",
28-
affiliation: "Univ. of Michigan, Ann Arbor",
29-
role: "Professor",
30-
thumb: require("../../public/images/thumb-mackerman.jpg"),
31-
web: "https://www.socialworldsresearch.org/si/ackerm"
26+
name: "Hwajung Hong",
27+
affiliation: "KAIST",
28+
role: "Associate Professor",
29+
thumb: require("../../public/images/thumb-hjhong.jpg"),
30+
web: "https://galaxytourist.notion.site/Hwajung-Hong-cc10b0291bbe4ca38dbf4882cd687423"
3231
},
3332
{
3433
name: "Young-Ho Kim",
@@ -65,9 +64,8 @@ export const Members = () => {
6564
}
6665
</div>
6766
<div className="mt-8 flex items-center gap-6 gap-y-8 flex-wrap">
68-
<img className="w-[200px]" alt="NAVER logo" src={require("../../public/images/logos/ai_lab_logo_vertical.png")} width={1728} height={552}/>
69-
<a href="https://www.si.umich.edu/" target="_blank"><img className="w-20" alt="UMSI logo" src={require("../../public/images/logos/umsi-logo.svg")}/></a>
70-
<a href="https://global.wkuh.org/" target="_blank"><img className="w-[250px]" alt="Wonkwang logo" src={require("../../public/images/logos/wonkwang-logo.svg")}/></a>
67+
<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>
68+
<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>
7169

7270
</div>
7371
</Section>

‎index.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
<link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:opsz,[email protected],300;6..12,400;6..12,600;6..12,700&display=swap" rel="stylesheet">
99
<link href="./index.css" rel="stylesheet">
1010
<link rel="icon" href="./app/favicon.ico" />
11-
<title>ChaCha - Chatbot for Children's Events and Emotion Sharing</title>
11+
<title>AACessTalk - a tablet app that fosters communication between minimally-verbal austistic children and parents</title>
1212
</head>
1313
<body>
1414
<div id="app"></div>

‎package.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
{
2-
"name": "chacha-web",
2+
"name": "aacesstalk-web",
33
"version": "0.1.0",
44
"private": true,
55
"scripts": {
66
"dev": "rm -rf dist && parcel index.html --port 3000 --open",
7-
"build": "rm -rf dist && rm -rf .parcel-cache && rm -rf .cache && parcel build index.html ./public/*.pdf --public-url https://naver-ai.github.io/chacha",
7+
"build": "rm -rf dist && rm -rf .parcel-cache && rm -rf .cache && parcel build index.html ./public/*.pdf --public-url https://naver-ai.github.io/aacesstalk",
88
"predeploy": "npm run build",
99
"deploy": "gh-pages -f -d dist"
1010
},

‎public/images/chacha-screen.jpg

-137 KB
Binary file not shown.

‎public/images/logos/kaist_logo_trans.png

6.29 KB
Loading

‎public/images/logos/umsi-logo.svg

-39
This file was deleted.

‎public/images/logos/wonkwang-logo.svg

-1
This file was deleted.

0 commit comments

Comments
 (0)