Herbify

Overview

Herbify is an AI-powered web application that solves a uniquely Moroccan problem: telling the difference between Coriander (Qazbor) and Parsley (Maadanous). These two herbs look nearly identical to the untrained eye, and confusing them while grocery shopping is a shared cultural experience across Morocco.

Built as a team project with my colleague Adnane Miliari, Herbify uses a convolutional neural network (CNN) trained on hundreds of herb images to classify uploaded photos with high accuracy. I led the frontend development, building the React-based interface that makes the AI model accessible through a simple, intuitive upload-and-identify flow.

The Challenge

The inspiration came from our own daily frustration. Coriander and parsley have nearly identical leaf shapes and colors, especially when bundled together at Moroccan markets. The visual differences are subtle — coriander leaves are slightly more rounded with a softer texture, while parsley has more pointed, serrated edges. But when you're shopping quickly, these distinctions blur.

The challenge was twofold:

• Train a machine learning model that could reliably distinguish between two visually similar herbs using phone-quality images taken in real-world conditions (variable lighting, angles, and backgrounds)
• Build a web interface simple enough that anyone — regardless of technical background — could upload a photo and get an instant answer

Technical Approach

AI Model

The classification engine is a convolutional neural network (CNN) built with deep learning frameworks. The model was trained on a custom dataset of several hundred labeled images of coriander and parsley, captured in various conditions to improve generalization. After training, the model achieved classification accuracy above 90% on our test set.

Frontend Application

The web application was built with React, designed around a single-purpose flow:

• Upload or capture a photo of the herb
• The CNN processes the image and returns a classification with a confidence score
• The result is displayed instantly with the herb name, confidence percentage, and botanical details

I focused on making the interface feel effortless. The upload component supports both camera capture (for mobile users at the market) and file upload (for desktop users). Image preprocessing happens client-side to reduce server load and speed up classification.

My Role

I led the frontend development on this two-person team, while Adnane focused on the machine learning model and data pipeline.

My contributions included:

• Designing and building the complete React frontend with an intuitive upload-and-classify flow
• Implementing client-side image preprocessing (resizing, format conversion) to optimize API calls
• Building the results display with confidence scores and botanical reference information
• Creating a responsive design that works seamlessly on mobile (the primary use case — identifying herbs at the market)
• Deploying the application on Vercel for fast, globally distributed access

Key Features

• AI-powered herb classification with 90%+ accuracy on coriander vs. parsley identification
• Camera capture support for instant identification at the market
• Confidence score display so users understand the certainty of the classification
• Botanical reference information for each herb (local names, common uses, visual distinguishing features)
• Fully responsive design optimized for mobile-first usage

Outcome

Herbify started as a fun side project but resonated with a real cultural pain point. The app demonstrated that even a focused, single-purpose AI tool can deliver genuine value when it solves a specific, everyday problem. It also served as a practical exploration of deploying machine learning models to the web — bridging the gap between a trained model and a usable product.

Special thanks to Adnane Miliari for his work on the CNN model and data pipeline. His expertise in machine learning was essential to achieving the classification accuracy that makes Herbify genuinely useful.