Enzymax AI - Biomass Prediction System

A React-based web application for predicting biomass glucose and xylose yields using machine learning.

Features

• Biomass Type Selection: Choose from 21+ predefined feedstocks (corn stover, bamboo, rice straw, etc.)
• Process Parameter Input: Configure enzyme loading, hydrolysis temperature, time, pH, and more
• Real-time Predictions: ML-powered glucose and xylose yield predictions via HuggingFace
• PDF Report Generation: Export detailed reports of predictions and analysis
• Responsive UI: Beautiful, mobile-friendly interface with Tailwind CSS

Tech Stack

• Frontend: React 19 + TypeScript + Vite
• Styling: Tailwind CSS + Radix UI
• State Management: React Context API + Zustand
• API: HuggingFace Spaces (Python/Scikit-learn backend)
• PDF Export: jsPDF
• Charts: Recharts + Framer Motion

Getting Started

Prerequisites

• Node.js >= 18.0.0
• npm >= 9.0.0

Installation

# Install dependencies
npm install

# Set up environment variables
# Copy .env.local to src/frontend/.env.local if needed

Development

npm run dev

The app will start at http://localhost:5173

Build for Production

npm run build

Output will be in src/frontend/dist/

Preview Production Build

npm run preview

Environment Variables

The following environment variables can be set in .env.local:

VITE_API_URL=https://iayaanhere-enzymax-ai-api.hf.space
NEXT_PUBLIC_API_URL=https://iayaanhere-enzymax-ai-api.hf.space
STORAGE_GATEWAY_URL=https://iayaanhere-enzymax-ai-api.hf.space

API Integration

• Prediction Endpoint: POST /predict at the configured API URL
• Expected Response: JSON with glucose_yield_pct and xylose_yield_pct fields

Deployment to Vercel

1. Push code to GitHub
2. Connect to Vercel
3. Set build command: npm run build
4. Set public directory: src/frontend/dist
5. Deploy

The Vite build output is compatible with Vercel's static hosting.

Code Structure

src/
├── frontend/
│   ├── src/
│   │   ├── App.tsx              # Main application component
│   │   ├── config.ts            # Configuration loading
│   │   ├── components/          # React components
│   │   ├── context/             # BiomassContext for state management
│   │   ├── hooks/               # Custom hooks (useCustomBiomass, etc.)
│   │   ├── utils/               # Utilities (generateReport, StorageClient)
│   │   └── declarations/        # Generated type definitions
│   ├── vite.config.js           # Vite configuration
│   └── package.json
└── backend/
    └── main.mo                   # Minimal Motoko backend (optional)

Mass Balance Calculation

The application implements:

1. Client-side heuristic: Saeman model approximation in useCustomBiomass.ts
2. ML predictions: Python/Scikit-learn model on HuggingFace Spaces

Critical calculations are preserved unchanged during deployment.

License

See LICENSE file for details.