🏆 Winner – Most Socially Useful Hack
Available at: unfound.cloud 🥰 api key removed
A few months after this project. google came up with a similar feature as one in this project (https://gemini.google/overview/storybook/), ours is geared towards individuals with ASD - allowing stories that include their interests to be included in the stories.
# 1. Set up environment
# Create .env file in project root with your OpenAI key:
echo "openaikey=your-api-key-here" > .env
# 2. Install dependencies
npm install
# 3. Start the development server
npm run dev
---
## **Our Solution: Storybook**
**Storybook** is built on *scientific evidence* and designed to help users develop social skills in a safe, engaging, and personalized way.
**3 core components**
### **1. Read**
- Create your own story and answer guided follow-up questions to process the narrative.
- Context-aware emoji backgrounds that adapt based on user interests/hyperfixations
- Uses **simple words**, **emojis**, and **careful coloring** to prevent overstimulation and sensory overload.
### **2. Write**
- Acts as an *emotion journal*.
- Detect user interests for personalized backgrounds
- Suggests solutions and helps identify feelings.
### **3. Emotion**
- Builds emotion recognition skills through quizzes.
- Shows images of facial expressions and asks the user to identify the emotion.
- Directly supports cognitive skill development practiced in therapy, now accessible online.
Dashboard with CanvasJS charts for progress tracking
---
## **Why It Matters**
Storybook boosts cognitive skills using **scientifically proven methods**:
- Generating engaging stories.
- Live journaling with emotional analysis.
- Facial expression training.
- **Progress dashboard** for tracking development over time.
---
## **Tech Stack**
- **Frontend:** Astro 5.1.7, TypeScript, JavaScript
- **AI/ML:** Google Gemini 2.5 Flash API (@google/generative-ai) for story generation, emotion analysis, and context detection.
- **Charts:** CanvasJS for dashboard visualizations.
- **Image Generation:** Satori, satori-html, @resvg/resvg-js for dynamic OG images.
- **Storage:** Browser localStorage for user context persistence.
---
PS - Website is purposefully made with important yet minimal details. We prioritised UX designs with our users with ASD in mind to prevent overstimulation or visual overload for users :)
