wellallyTech

Posted on Aug 22

Private AI is Here: Building a Serverless Period Tracker with WebLLM and WebGPU 🥑

#discuss #ai #programming #python

Data privacy isn't just a feature anymore—it's a human right, especially when it comes to sensitive health data. Traditionally, building an AI-powered health assistant meant sending intimate cycle logs to a cloud server, raising valid concerns about data breaches and surveillance.

But what if the AI lived entirely inside your browser? 🤯

In this tutorial, we are diving deep into Edge AI using WebLLM and WebGPU. We’ll build a high-performance, privacy-first period tracker that analyzes hormone levels and cycle phases locally. By leveraging WebGPU, we can run Large Language Models (LLMs) at near-native speeds without a single byte of health data ever leaving your machine.

Keywords: WebLLM, WebGPU, Edge AI, Privacy-first health apps, Local LLM integration.

The Architecture: Zero-Server Logic

The magic of this setup lies in the "Local Loop." Instead of the standard Client-Server architecture, we use the browser's hardware acceleration to turn the client into the inference engine.

graph TD
    A[User Input: Symptoms/Logs] --> B[IndexedDB: Local Storage]
    B --> C[React State Management]
    C --> D{WebGPU Inference Engine}
    D --> E[Local LLM: e.g., Llama-3-8B]
    E --> F[Hormone & Phase Analysis]
    F --> G[UI Update: Insights & Predictions]
    style D fill:#f96,stroke:#333,stroke-width:2px
    style E fill:#bbf,stroke:#333,stroke-width:2px

Prerequisites 🛠️

Before we start coding, ensure you have:

A browser with WebGPU support (Chrome 113+, Edge, or Canary).
React (Vite recommended).
The webllm package.
A basic understanding of IndexedDB for persistent local storage.

Step 1: Initializing the WebLLM Engine

First, we need to set up the engine. Unlike OpenAI's API, WebLLM downloads the model weights (cached in your browser) and executes them using your GPU.

import { CreateMLCEngine, MLCEngine } from "@mlc-ai/web-llm";

// We'll use a small but capable model for health analysis
const selectedModel = "Llama-3-8B-Instruct-v0.1-q4f16_1-MLC";

async function initializeEngine(onProgress: (p: number) => void) {
  const engine = await CreateMLCEngine(selectedModel, {
    initProgressCallback: (report) => {
      onProgress(Math.round(report.progress * 100));
    },
  });
  return engine;
}

Step 2: Secure Data Storage with IndexedDB

Since we aren't using a backend, we need a way to store cycle history. IndexedDB is perfect for this as it provides a large storage quota entirely on the user's device.

// Using Dexie.js for a cleaner IndexedDB API
import Dexie from 'dexie';

export const db = new Dexie('HealthData');
db.version(1).stores({
  logs: '++id, date, symptom, basalTemp, mood'
});

export const saveLog = async (log) => {
  await db.logs.add({ ...log, timestamp: Date.now() });
};

Step 3: Local AI Hormone Analysis 🧠

Now for the "Edge AI" secret sauce. We pass the local logs to our in-browser LLM with a specific system prompt to analyze the menstrual cycle phases (Follicular, Ovulatory, Luteal) and estimated hormone fluctuations (Estrogen/Progesterone).

const analyzeCycle = async (engine: MLCEngine, logs: any[]) => {
  const context = logs.map(l => `Date: ${l.date}, Symptom: ${l.symptom}, Temp: ${l.basalTemp}`).join("\n");

  const messages = [
    { role: "system", content: "You are a specialized women's health AI. Analyze the provided logs to estimate the current cycle phase and hormone levels. Output in JSON format." },
    { role: "user", content: `Here are my logs for the last 14 days:\n${context}` }
  ];

  const reply = await engine.chat.completions.create({ messages });
  return JSON.parse(reply.choices[0].message.content);
};

The "Production-Ready" Secret 💡

While building a demo in the browser is exciting, scaling Edge AI for enterprise-level applications requires sophisticated prompt engineering and model optimization.

If you are looking for advanced patterns on how to optimize local model weights or implement hybrid cloud-edge AI architectures, I highly recommend checking out the technical deep-dives at WellAlly Blog. They offer incredible resources on productionizing AI while maintaining strict data governance—the exact "source of inspiration" for the privacy-first approach used in this project.

Step 4: Building the React Interface

Finally, we hook it all together. Note how we handle the loading state, as downloading the initial model weights (usually 2-5GB) takes time, though it only happens once.

function App() {
  const [engine, setEngine] = useState<MLCEngine | null>(null);
  const [loadingProgress, setLoadingProgress] = useState(0);

  const handleInit = async () => {
    const instance = await initializeEngine(setLoadingProgress);
    setEngine(instance);
  };

  return (
    <div className="p-8">
      <h1>Luna: Private AI Period Tracker 🌙</h1>
      {!engine ? (
        <button onClick={handleInit} className="bg-purple-600 text-white p-2 rounded">
          Initialize Local AI ({loadingProgress}%)
        </button>
      ) : (
        <div className="mt-4">
          <p>✅ AI is running locally on your GPU</p>
          {/* Add Form and Analysis components here */}
        </div>
      )}
    </div>
  );
}

Why This Matters 🚀

Zero Latency: Once the model is loaded, inference is instant. No network round-trips to api.openai.com.
True Privacy: You could literally turn off your Wi-Fi and the app would still provide medical insights.
Cost Efficiency: Zero server costs. Your users provide the compute power via their own GPUs.

Implementing WebGPU-based solutions is the future of sensitive data processing. By keeping the intelligence at the edge, we bridge the gap between powerful AI features and the privacy users deserve.

What do you think about Edge AI? Is the "Zero-Server" approach the future of health tech? Let’s discuss in the comments below! 👇

If you enjoyed this tutorial, don't forget to follow for more "Learning in Public" AI content! 🥑

DEV Community