Inspiration

ImageJ can analyze a microplate image, but the workflow takes many manual steps: open the image, define and align regions of interest, repeat measurements across 96 wells, export values, reorganize the table, and calculate the titration endpoint. PlateView was created to make this process faster, transparent, and practical for teaching laboratories and small research labs.

Microplates also make titration more sustainable. Microliter-scale samples use less juice, indicator, and titrant, reducing reagent consumption and experimental waste.

What it does

PlateView is a bilingual English/Traditional Chinese browser app that:

  • imports laboratory workbooks and microplate titration CSV files;
  • loads a 96-well plate photograph and aligns an adjustable 8 × 12 sampling grid;
  • extracts per-well RGB values locally in the browser;
  • performs blank correction and maps wells to titrant volumes and replicates;
  • groups replicates, sorts NaOH volumes, and detects the maximum-slope endpoint;
  • calculates total titratable acidity using configurable NaOH molarity, sample volume, dilution factor, acid equivalent weight, and units;
  • visualizes curves, replicate endpoints, RSD, quality warnings, and final results;
  • exports analysis-ready results;
  • includes built-in demonstration and laboratory test data so judges can test the workflow without laboratory hardware.

For the current grape-juice laboratory dataset, the confirmed method settings are 0.100 M NaOH, 0.200 mL sample volume, and five-fold dilution. PlateView reports total acidity as tartaric acid and flags high replicate variability rather than hiding it.

The app runs entirely in the browser and requires no account or server upload, helping keep experimental images and measurements local.

How we built it

PlateView uses React, TypeScript, Vite, HTML5 Canvas, and GitHub Pages. Browser APIs handle file decoding, locale-aware number parsing, image loading, RGB sampling, curve processing, visualization, and export.

The analytical workflow was informed by de Oliveira et al., Talanta 206 (2020) 120219. Literature benchmarks, reconstructed demonstration data, public format tests, and laboratory measurements are labeled separately so software verification is not confused with full analytical-method validation.

How Codex and GPT-5.6 helped

Codex with GPT-5.6 was the main engineering collaborator. It accelerated:

  • translating analytical chemistry papers and laboratory calculations into explicit software requirements;
  • designing the bilingual product flow and scientific input controls;
  • implementing robust workbook/CSV parsing and locale-aware number handling;
  • building the adjustable 96-well image-sampling workflow;
  • testing public and laboratory datasets and documenting data boundaries;
  • diagnosing production issues, preparing GitHub Pages deployment, and maintaining the README;
  • producing the technical demo video and accessibility QA.

Key scientific decisions remained human-directed: the target analytical method, confirmed NaOH concentration and sample volume, acid basis, endpoint interpretation, provenance labels, and validation limits. The deployed app is deterministic and does not require an AI API at runtime.

Challenges we ran into

The hardest part was bridging image data, reader exports, and laboratory spreadsheets while preserving units, well order, replicate structure, and locale-specific number formats. A photograph adds another challenge: the 8 × 12 grid must be aligned before RGB values can become an ordered titration series.

A second challenge was scientific honesty. Software calculations can be verified before the analytical method is fully validated, so PlateView exposes data provenance, replicate spread, and RSD warnings instead of presenting every output as definitive.

Accomplishments that we're proud of

  • A working, public, bilingual analytical web app.
  • Automated 96-well image sampling without a long manual ImageJ workflow.
  • Transparent endpoint and total-acidity calculations using confirmed laboratory settings.
  • Replicate-level quality control that flags weak repeatability.
  • A privacy-friendly static architecture with no account or server upload.
  • A microliter-scale workflow that reduces sample and reagent use.
  • Documentation and test data that let judges run the project immediately.

What we learned

Scientific software needs more than a correct formula. It must preserve units, provenance, replicate structure, instrument quirks, and the distinction between software verification and analytical validation. We also learned how effectively Codex and GPT-5.6 can connect literature interpretation, laboratory calculations, front-end engineering, data-format debugging, testing, deployment, and technical communication.

What's next

Next steps are to collect more fruit-juice matrices, compare image-derived endpoints against conventional titration, add calibration and uncertainty reports, improve automated grid alignment, expand import adapters, and package the experience for classroom exercises and routine laboratory use.

Built With

Share this project:

Updates