# Project export: Nurture

This document was generated by HackStack to give an AI agent context about a hackathon project. Sections are labeled with their provenance; content marked as truncated was cut to keep this document small.

## Project metadata

- Hackathon: Cal Hacks 10.0
- Tagline: An AI tool to better understand the needs of special education children in the classroom and at home.
- Devpost: https://devpost.com/software/nurture-m7p5wg
- GitHub: https://github.com/Digvijay-Bokey/nurture-ai
- Result: winner ([MLH - Redis] Most Creative Use of Redis Cloud)
- Team: 0 GitHub contributor(s) — 

## Devpost submission (written by the team)

### Inspiration

The inspiration behind "Nurture AI" stemmed from understanding the unique challenges faced by parents, especially those of special needs children. Recognizing that constant supervision can be both exhausting and impractical, we sought to create a tool that would assist in monitoring their child’s emotional and mental state, especially during times when direct supervision isn't possible. This tool is not only meant to offer peace of mind but also aims to foster independence in children, giving them the confidence to engage in activities like homework or play, knowing they're still under a watchful, caring eye.

### What it does

Nurture AI uses AI-driven facial recognition and emotion detection technology through a simple webcam to analyze a child's emotional state in real-time. The app recognizes a range of emotions – from distress and frustration to joy and contentment. When it detects negative emotional shifts or signs of distress, it promptly notifies the parent or caregiver via text. This feature ensures that the caregiver can intervene quickly when necessary, yet also allows them to manage other tasks without constant physical supervision.

### How we built it

We used both Hume, Reflex, Twillo, and Redis to make this project possible.

### Challenges we ran into

Making the user interface friendly for children who may struggle with autism or epilepsy. Balancing Sensitivity and Specificity: Adjusting the system to correctly interpret emotions without overloading the parent with notifications. User Trust and Privacy: Ensuring the application maintains high standards of user privacy and security, crucial for building trust.

### Accomplishments we're proud of

It works! It very accurately can send texts when someone is stressed or any other emotion. What's Next for Nurture By continuously evolving and adapting, we aim to ensure that Nurture AI not only keeps pace with technological advancements and user expectations but also extends its reach and positive impact on more families and communities. We hope to add more solutions to help children calm down after detection, and make it adult-oriented too so we can check our own emotions.

## README (from the GitHub repository)

# **Nurture**: An AI tool to help bridge the gap between children with special needs and their caretakers.

## Inspiration
The inspiration behind "Nurture AI" stemmed from understanding the unique challenges faced by parents, especially those of special needs children. Recognizing that constant supervision can be both exhausting and impractical, we sought to create a tool that would assist in monitoring their child’s emotional and mental state, especially during times when direct supervision isn't possible. This tool is not only meant to offer peace of mind but also aims to foster independence in children, giving them the confidence to engage in activities like homework or play, knowing they're still under a watchful, caring eye.


## What it does
Nurture AI uses AI-driven facial recognition and emotion detection technology through a simple webcam to analyze a child's emotional state in real time. The app recognizes a range of emotions – from distress and frustration to joy and contentment. When it detects negative emotional shifts or signs of distress, it promptly notifies the parent or caregiver via text. This feature ensures that the caregiver can intervene quickly when necessary, yet also allows them to manage other tasks without constant physical supervision.


## Tools Used
We used both Hume, Reflex, Twillo, and Redis to make this project possible. 


## Prizes
**CalHacks 2023 category winner for:**

Major League Hacking / Most Creative Use of Redis Cloud


## Usage and Requirments

You will need your own Twilio SMS account, Hume API, and Redis setup.

**To use you will need to create a creds.py file with the following format:**

### Format for creds.py
``` python
#twilio
twilio_sid = '[Your Credentials]'
twilio_token = '[Your Credentials]'
twilio_phone = '[Sending Twilio Number]'

#hume
hume_key = '[Your Credentials]'


#redis
redis_host = '[Your Credentials]'
redis_port = '[Your Port Prefrence]'
redis_password = '[Your Credentials]'
```
## Sidenote

This is a cloned version of the private repo used during the actual project in order to hide api keys from repo history. 

## Devpost

[Devpost Link](https://devpost.com/software/nurture-m7p5wg)


## Detected evidence (automated analysis)

Indexed codebase: 35 recognized source files, 85 KB.
- CSS (language) — detected in the code
- JavaScript (language) — detected in the code
- Next.js (technology) — detected in the code
- Python (language) — detected in the code
- React (technology) — detected in the code
- Redis (technology) — detected in the code
- Tailwind CSS (technology) — detected in the code
- AWS (technology) — claimed on Devpost, not found in the code

## Codebase structure (from repository index)

### Files (44 of 44)

```
.gitignore
.web/.gitignore
.web/bun.lockb
.web/components/reflex/chakra_color_mode_provider.js
.web/components/reflex/radix_themes_color_mode_provider.js
.web/env.json
.web/jsconfig.json
.web/next.config.js
.web/package.json
.web/pages/_app.js
.web/pages/_document.js
.web/pages/404.js
.web/pages/dashboard.js
.web/pages/docs.js
.web/pages/index.js
.web/pages/settings.js
.web/postcss.config.js
.web/reflex.json
.web/styles/code/prism.js
.web/styles/styles.css
.web/styles/tailwind.css
.web/tailwind.config.js
.web/utils/client_side_routing.js
.web/utils/components.js
.web/utils/context.js
.web/utils/helpers/dataeditor.js
.web/utils/state.js
.web/utils/theme.js
LICENSE
nurture_ai/__init__.py
nurture_ai/components/__init__.py
nurture_ai/components/sidebar.py
nurture_ai/nurture_ai.py
nurture_ai/pages/__init__.py
nurture_ai/pages/dashboard.py
nurture_ai/pages/index.py
nurture_ai/pages/settings.py
nurture_ai/state.py
nurture_ai/styles.py
nurture_ai/templates/__init__.py
nurture_ai/templates/template.py
README.md
requirements.txt
rxconfig.py
```

### Dependencies

- .web/package.json: @chakra-ui/icons@2.0.19, @chakra-ui/react@2.6.1, @chakra-ui/system@2.5.7, @emotion/react@^11.11.0, @emotion/styled@^11.11.0, autoprefixer@10.4.14, axios@1.4.0, focus-visible@5.2.0, framer-motion@10.16.4, json5@2.2.3, next@14.1.1, next-sitemap@4.1.8, next-themes@0.2.0, postcss@8.4.24, react@18.2.0, react-dom@18.2.0, react-markdown@8.0.7, react-syntax-highlighter@15.5.0, rehype-katex@6.0.3, rehype-raw@6.1.1, remark-gfm@3.0.1, remark-math@5.1.1, socket.io-client@4.6.1, tailwindcss@3.3.2, universal-cookie@4.0.4
- requirements.txt: hume@~=0.4.1, opencv-python@~=4.8.0.76, redis@~=4.6.0, reflex@==0.3.1, twilio@~=8.10.0, websockets@~=10.4

### Recent commits (newest first)

- Merge pull request #2 from Digvijay-Bokey/dependabot/npm_and_yarn/dot-web/next-14.1.1
- Bump next from 13.5.4 to 14.1.1 in /.web
- Update README.md
- Update README.md
- Added Twilio to requirments
- Clean-up
- Clean-up
- Update
- Update README.md
- Update README.md
- initial commit

## Key source files (fetched from GitHub, selected and truncated for size)

### requirements.txt

```
reflex==0.3.1
hume~=0.4.1
opencv-python~=4.8.0.76
websockets~=10.4
redis~=4.6.0
twilio~=8.10.0
```

### .web/package.json

```
{
  "name": "reflex",
  "scripts": {
    "dev": "next dev",
    "export": "next build && next export -o _static",
    "export-sitemap": "next build && next-sitemap && next export -o _static",
    "prod": "next start"
  },
  "dependencies": {
    "@chakra-ui/icons": "2.0.19",
    "@chakra-ui/react": "2.6.1",
    "@chakra-ui/system": "2.5.7",
    "@emotion/react": "^11.11.0",
    "@emotion/styled": "^11.11.0",
    "axios": "1.4.0",
    "focus-visible": "5.2.0",
    "framer-motion": "10.16.4",
    "json5": "2.2.3",
    "next": "14.1.1",
    "next-sitemap": "4.1.8",
    "next-themes": "0.2.0",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-markdown": "8.0.7",
    "react-syntax-highlighter": "15.5.0",
    "rehype-katex": "6.0.3",
    "rehype-raw": "6.1.1",
    "remark-gfm": "3.0.1",
    "remark-math": "5.1.1",
    "socket.io-client": "4.6.1",
    "universal-cookie": "4.0.4"
  },
  "devDependencies": {
    "autoprefixer": "10.4.14",
    "postcss": "8.4.24",
    "tailwindcss": "3.3.2"
  }
}
```

### nurture_ai/pages/index.py

```python
# index.py
from nurture_ai import styles
from nurture_ai.templates import template

import reflex as rx


@template(route="/docs", title="docs", image="/github.svg")
def index() -> rx.Component:
    """The home page.

    Returns:
        The UI for the home page.
    """
    with open("README.md", encoding="utf-8") as readme:
        content = readme.read()
    return rx.markdown(content, component_map=styles.markdown_style)

```

### .web/pages/index.js

```javascript
import { Fragment, useContext, useEffect, useRef, useState } from "react"
import { useRouter } from "next/router"
import { Event, getAllLocalStorageItems, getRefValue, getRefValues, isTrue, preventDefault, refs, set_val, spreadArraysOrObjects, uploadFiles, useEventLoop } from "/utils/state"
import { ColorModeContext, EventLoopContext, initialEvents, StateContext } from "/utils/context.js"
import "focus-visible/dist/focus-visible"
import { Button, FormControl, FormLabel, Input, Modal, ModalBody, ModalContent, ModalHeader, ModalOverlay, Text } from "@chakra-ui/react"
import { getEventURL } from "/utils/state.js"
import NextHead from "next/head"



export default function Component() {
  const form_state = useContext(StateContext)
  const router = useRouter()
  const [ colorMode, toggleColorMode ] = useContext(ColorModeContext)
  const focusRef = useRef();
  
  // Main event loop.
  const [addEvents, connectError] = useContext(EventLoopContext)

  // Set focus to the specified element.
  useEffect(() => {
    if (focusRef.current) {
      focusRef.current.focus();
    }
  })

  // Route after the initial page hydration.
  useEffect(() => {
    const change_complete = () => addEvents(initialEvents())
    router.events.on('routeChangeComplete', change_complete)
    return () => {
      router.events.off('routeChangeComplete', change_complete)
    }
  }, [router])


  return (
    <Fragment>
  <Fragment>
  {isTrue(connectError !== null) ? (
  <Fragment>
  <Modal isOpen={connectError !== null}>
  <ModalOverlay>
  <ModalContent>
  <ModalHeader>
  {`Connection Error`}
</ModalHeader>
  <ModalBody>
  <Text>
  {`Cannot connect to server: `}
  {(connectError !== null) ? connectError.message : ''}
  {`. Check if server is reachable at `}
  {getEventURL().href}
</Text>
</ModalBody>
</ModalContent>
</ModalOverlay>
</Modal>
</Fragment>
) : (
  <Fragment/>
)}
</Fragment>
  <Fragment>
  <FormControl>
  <FormLabel htmlFor={`name`}>
  {`Name`}
</FormLabel>
  <Input onChange={(_e0) => addEvents([Event("form_state.set_name", {value:_e0.target.value})], (_e0))} placeholder={`Enter your name`} type={`text`}/>
</FormControl>
  <FormControl>
  <FormLabel htmlFor={`phone`}>
  {`Phone Number`}
</FormLabel>
  <Input onChange={(_e0) => addEvents([Event("form_state.set_phone", {value:_e0.target.value})], (_e0))} placeholder={`Enter your phone number`} sx={{"type": "tel"}} type={`text`}/>
</FormControl>
  <Button onClick={(_e) => addEvents([Event("_redirect", {path:`/dashboard`,external:false})], (_e))}>
  {`Start`}
</Button>
</Fragment>
  <NextHead>
  <title>
  {`Nurture`}
</title>
  <meta content={`A Reflex app.`} name={`description`}/>
  <meta content={`favicon.ico`} property={`og:image`}/>
</NextHead>
</Fragment>
  )
}

```

### rxconfig.py

```python
import reflex as rx

config = rx.Config(
    app_name="nurture_ai",
)
```

### nurture_ai/__init__.py

```python
"""Base template for Reflex."""
```

### .web/postcss.config.js

```javascript
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

```

### .web/next.config.js

```javascript
module.exports = {
  basePath: "",
  compress: true,
  reactStrictMode: true,
  trailingSlash: true,
};

```

### .web/tailwind.config.js

```javascript
/** @type {import('tailwindcss').Config} */
module.exports = {
	content: ["./pages/**/*.{js,ts,jsx,tsx}"],
	theme: null,
	plugins: [
	],
};
```

### nurture_ai/nurture_ai.py

```python
# nurture_ai.py
import reflex as rx
from nurture_ai.pages import dashboard
import nurture_ai.state as state_module

@rx.page(route="/", title="Nurture")
def index():
    return rx.fragment(
        rx.form_control(
            rx.form_label("Name", html_for="name"),
            rx.input(
                placeholder="Enter your name",
                on_change=state_module.FormState.set_name,
            ),
        ),
        rx.form_control(
            rx.form_label("Phone Number", html_for="phone"),
            rx.input(
                type="tel",
                placeholder="Enter your phone number",
                on_change=state_module.FormState.set_phone,
            ),
        ),
        rx.button(
            "Start",
            on_click=rx.redirect("/dashboard"),   # Use rx.redirect to dashboard
        ),
    )

app = rx.App()
app.add_page(index)
app.add_page(dashboard)
app.compile()
```

[25 more indexed source files omitted to keep this export small. The full file list is in the Codebase structure section above.]