Enjoying The Show

Real-time AI facial expression gathering with Amplify GraphQL and TensorFlow.js

This app uses face-api to gauge your facial expression, and then sends all faces in a particular URL or (room) to a "Watch" page. The watch page summarizes all the faces to a single Victory Pie chart.

Live at enjoyingthe.show · Watch the talk on YouTube

How to use it

• Speaker: open https://enjoyingthe.show/watch/<room-name> for a live pie chart of the room's mood.
• Audience: share https://enjoyingthe.show/room/<room-name>. Each person allows webcam access; expressions are detected in their browser and only the emotion word is sent.

Stack

• React 19 + React Router, built with Vite. The homepage is prerendered at build time (scripts/prerender.js) so search engines and LLM agents see real content without running JavaScript.
• @vladmandic/face-api (TensorFlow.js) for face detection + expressions, lazy-loaded only on /room/*. Model weights are served from public/.
• AWS AppSync GraphQL (API key auth) + DynamoDB, originally created with Amplify Gen 1 (amplify/ holds the schema), hosted on AWS Amplify Hosting.
• public/llms.txt, sitemap.xml, JSON-LD structured data and Open Graph tags for discoverability.

Develop

npm install
npm run dev     # http://localhost:3000
npm test
npm run build   # outputs dist/ with the prerendered homepage

Deploy

Amplify Hosting builds every push to master using amplify.yml (frontend only: npm ci && npm run build, publishing dist/). The backend is already deployed and is no longer pushed from CI.

Single-page-app rewrites live in the Amplify console: everything that isn't a static file rewrites to /index.html (200).

The AppSync API key

The site authenticates to AppSync with a public API key (src/aws-exports.js). AppSync keys expire after at most 365 days, which is what took the site down in 2023. infra/renew-api-key.sh installs a small Lambda plus a monthly EventBridge rule that keeps pushing the key's expiry out a year. Re-run it from AWS CloudShell any time; it is idempotent.

If the key ever does lapse, create a new one and update src/aws-exports.js:

aws appsync create-api-key --api-id f6gwcwcbmbazflkwwr3h6uypne \
  --expires $(( ($(date +%s) + 364*86400) / 3600 * 3600 ))

Your own copy

To stand up your own backend, install the Amplify CLI (npm i -g @aws-amplify/cli), run amplify init and amplify push to create the AppSync API from amplify/backend/api/facefun/schema.graphql, then point src/aws-exports.js at it.