Sookjai Health (สุขใจ เฮลท์): hackathon MVP

Sookjai Health is a single-page Thai web app for basic health guidance, designed for older adults. Its mascot is น้องสุขใจ, a chipmunk drawn from Character_Design.jpg. The app has five parts: a camera pulse estimate (PPG), a rule-based symptom checker, a chat with the animated mascot, Thai text-to-speech, and emergency information (1669).

Live demo: https://chaiporn2005.github.io/sookjai-health/ (open it on a phone to use the camera pulse measurement)

Prototype, not a medical device. No part of this app has been clinically validated. Pulse values are estimates. Symptom guidance is general information, not a diagnosis, and has not yet been reviewed by a clinician.

Files

File	Purpose
index.html	The whole app: HTML, CSS and JavaScript in one file. It has no external requests and no dependencies. The mascot is inline SVG, so the image file is not needed at runtime.
Character_Design.jpg	The character design sheet the theme and mascot are based on (reference only).
ppg_validation_template.csv	A blank paired-measurement table with Excel/Sheets formulas for absolute error, MAE, bias and the share of readings within ±5 BPM.
README.md	This file.

How to run

Symptom checker, TTS and demo mode: double-click index.html. It works offline in any modern browser.

Camera pulse measurement on a phone: browsers only allow the camera on HTTPS or localhost. Use one of these:

1. GitHub Pages: push index.html to a repo and enable Pages. Then open https://<user>.github.io/<repo>/ on the phone.
2. Netlify Drop: drag the folder onto app.netlify.com/drop and open the HTTPS link it gives you.
3. Laptop only: run npx serve . or python -m http.server, then open http://localhost:…. A phone that loads the laptop's LAN IP over plain HTTP is not a secure context, so the camera will be blocked there.

Android Chrome works best, because it is the only common browser that lets a web page turn on the flash. iPhone Safari runs the measurement with ambient light only.

What is real, simulated and unvalidated

Feature	Status	Notes
Camera PPG pulse estimate	Functional, unvalidated	Processes real camera frames on the device and runs signal-quality gates before showing a number. It has not been compared against a reference device on real people.
PPG demo mode	Simulated	Generates a synthetic pulse waveform (target 62–86 BPM) and runs it through the same algorithm. It is labeled "ข้อมูลจำลอง" (simulated data) everywhere, and its rows are excluded from MAE.
Symptom checker	Functional, not clinically reviewed	Covers 14 symptoms, 9 red flags and 5 context modifiers (age, pregnancy, chronic disease, severity), plus duration. Uses keyword matching on free text. It does not diagnose or recommend medication.
Chat with น้องสุขใจ	Functional, rule-based	Keyword intents, with emergency and self-harm checks always run first. Not an LLM, so it only understands phrases it was given. Text input only.
Thai TTS	Functional, device-dependent	Uses the Web Speech API. It needs a Thai voice installed, and the app shows a status message when none is found.
Validation table	Functional	Kept in memory only. Computes |error| and MAE, and exports to CSV.
History, accounts, SpO₂, AI chat	Not built	Deliberately out of scope, to keep the privacy risk low.

Features

Theme and mascot (from Character_Design.jpg)

• The palette comes from the sheet: cream paper with a dot texture, chipmunk browns, a cream belly, orange inner ears and peach cheeks. Acorn and leaf doodles echo the sheet's title. Section badges are acorn-shaped.
• น้องสุขใจ is hand-built inline SVG with every pose and expression from the sheet:
  • Front/Wave: waves on page load, on a greeting, and when you say goodbye.
  • Side/Walk: walks into the chat panel when it opens.
  • Excited: hops while holding an acorn after a good result, a thank-you or a compliment.
  • Happy / Surprised / Curious: surprised jump at an emergency, head-tilt while "thinking", plus a worried face for urgent results.
  • Idle: breathing, tail sway, blinking and ear twitch.
  • Talking: the mouth moves in sync with speech.
• Tap the mascot on the home screen for a random friendly line and reaction.
• A head-only version is used in the header and the chat button. Every animation stops under prefers-reduced-motion; expressions still change.

Chat: "คุยกับน้องสุขใจ"

• A floating button opens a chat panel. Type a message or tap a quick reply (pulse, symptoms, emergency, tips, privacy, who are you).
• Replies show a typing indicator. They are spoken in Thai when a voice exists; otherwise the mouth animates silently. Some replies include action buttons: call 1669 or 1323, go to a section, run the full symptom check on what you typed, start demo mode, or enlarge text.
• Safety order:
  1. Self-harm phrases → 1323 and 1669.
  2. Emergency symptoms or red flags → urgent red reply with a 1669 button.
  3. Other symptoms → one self-care hint plus an offer to run the full rule-based check.
  4. Small-talk and how-to intents.
  5. A fallback that mentions 1669.
• The chat never recommends medicine or names a diagnosis. Messages stay in page memory.
• No voice input on purpose. Chrome's Web Speech recognition streams audio to Google's servers, which would break the "health data never leaves the device" promise.

This is the beginning of the README. Read the rest at the original. Read the full README ↗