MEDIREAD-Ai-WEB-APP

Helps people understand clumsy doctor prescriptions.

Comment

MediRead AI

MediRead AI is a responsive AI web application that helps users read and understand handwritten prescriptions and printed medical reports. It uses a Flask backend and Google Gemini Vision to extract only visible text, organise the result into structured sections, and explain the content in simple language.

This project is not a diagnosis engine and does not recommend medicine. It only helps interpret what is already written by the doctor or shown in the report.

Features

  • Modern, mobile-first landing page
  • Drag-and-drop image upload
  • Camera capture with live preview
  • Client-side image compression
  • Gemini Vision powered prescription analysis
  • Structured dashboard with medicine cards and medicine table
  • Plain-language explanation
  • Instant explanation switching for:
    • English
    • Tamil
    • Hindi
    • Telugu
    • Kannada
    • Malayalam
  • Text-to-speech support
  • Dark mode, high contrast mode, and large text mode
  • Copy, print, PDF export via browser print dialog, and share support
  • Local browser-only scan history
  • Offline shell caching with service worker
  • PWA-ready manifest
  • Privacy-friendly design with in-memory image processing only

Folder structure

MediRead-AI/
├── .env.example
├── README.md
├── index.html
├── manifest.webmanifest
├── requirements.txt
├── script.js
├── server.py
├── style.css
└── sw.js

Tech stack

  • Frontend: HTML5, CSS3, Vanilla JavaScript
  • Backend: Python Flask
  • AI: Google Gemini Vision via google-genai
  • Storage: Browser localStorage for result history only

Gemini JSON schema

The backend prompt asks Gemini to return JSON in this structure:

{
  "patient": {
    "name": "",
    "age": "",
    "sex": "",
    "id": ""
  },
  "doctor": {
    "name": "",
    "speciality": "",
    "registration": "",
    "hospital": ""
  },
  "diagnosis": "",
  "document_type": "",
  "medicines": [
    {
      "name": "",
      "purpose": "",
      "dosage": "",
      "frequency": "",
      "timing": "",
      "duration": "",
      "notes": "",
      "confidence": 0
    }
  ],
  "instructions": "",
  "doctor_notes": "",
  "warnings": "",
  "additional_notes": "",
  "simple_explanation": {
    "en": "",
    "ta": "",
    "hi": "",
    "te": "",
    "kn": "",
    "ml": ""
  },
  "unclear_text": [],
  "confidence": {
    "overall": 0,
    "patient": 0,
    "doctor": 0,
    "diagnosis": 0,
    "medicines": 0
  },
  "quality_assessment": "",
  "needs_verification": true
}

Setup

1. Clone or open the project folder

Place the project in your working directory and open a terminal inside the project folder.

2. Create and activate a virtual environment

On macOS or Linux:

python3 -m venv .venv
source .venv/bin/activate

On Windows PowerShell:

python -m venv .venv
.venv\Scripts\Activate.ps1

3. Install dependencies

pip install -r requirements.txt

4. Add your Gemini API key

Copy .env.example to .env:

cp .env.example .env

Then edit .env and set:

GEMINI_API_KEY=your_real_api_key
GEMINI_MODEL=gemini-2.5-flash
MAX_UPLOAD_MB=8
PORT=5000
FLASK_DEBUG=0

Run the app

python server.py

Open:

http://127.0.0.1:5000

API

POST /predict

Accepts:

  • multipart/form-data
  • file field name: image

Validation rules:

  • allowed types: JPG, JPEG, PNG, WEBP
  • rejects empty uploads
  • rejects unsupported formats
  • rejects oversize files

Response:

{
  "success": true,
  "result": {
    "...": "structured JSON from Gemini"
  }
}

Error response:

{
  "success": false,
  "error": {
    "code": "invalid_input",
    "message": "Unsupported file type. Use JPG, JPEG, PNG, or WEBP."
  }
}

Privacy and security

  • Uploaded images are processed in memory only on the backend.
  • The server does not permanently store prescription files.
  • Gemini API keys stay on the server side in .env.
  • Previous scan history is saved only in the user's browser as extracted result data, not raw uploaded images.

Accessibility support

  • Large text mode
  • Dark mode
  • High contrast mode
  • Keyboard-friendly controls
  • Clear focus states
  • Large buttons and readable typography
  • Screen-reader-friendly labels

Export behaviour

  • Copy Text: copies the current result summary
  • Share: uses the Web Share API when supported
  • Print: prints the result dashboard
  • Download PDF: opens the browser print dialog so the user can save as PDF

Camera notes

  • Camera access requires user permission
  • If permission is denied, the app shows a friendly error
  • On unsupported browsers or devices, users can still upload images manually

Progressive Web App

The project includes:

  • manifest.webmanifest
  • sw.js

This lets the app cache its shell for quicker repeat visits and limited offline availability of the interface. AI analysis still requires an internet connection.

Beginner-friendly customisation

Change the color palette

Edit the CSS variables at the top of style.css.

Change the Gemini model

Update GEMINI_MODEL in .env.

Change upload size limit

Update MAX_UPLOAD_MB in .env.

Important disclaimer

Always show this message in the app:

This application helps read and explain medical prescriptions. It does not replace a doctor or pharmacist. If any medicine name or instruction is marked as "Unclear", verify it with your healthcare provider before taking the medication.

Troubleshooting

GEMINI_API_KEY is missing

Make sure .env exists and contains a valid Gemini API key.

Camera does not open

  • Check browser permissions
  • Try HTTPS or localhost
  • Use manual upload if the device blocks camera access

AI response is unclear

  • Upload a brighter and sharper image
  • Avoid shadows and tilted photos
  • Capture the full prescription inside the frame

The result is marked Unclear

That means the text could not be read confidently. The app is designed not to guess. Verify those parts with your doctor or pharmacist.

Demo checklist

For a hackathon demo:

  • Add your Gemini API key to .env
  • Start the Flask server
  • Open the app on desktop or mobile
  • Upload a prescription image
  • Switch language
  • Use text-to-speech
  • Open history
  • Show print and PDF export
Share this project:

Updates