Plant Analysis Tool using Gemini AI and Express.js Part 2

Previously, Gemini and Node.js have created the plant analysis for an uploaded image of a plant.

GITHUB REPO REFERENCE: https://github.com/tweneboah/Full-Stack-Web-Development-Bootcamp-Course/tree/main/PROJECTS/AI-PROJECTS/PLANT-ANALYSIS-TOOL/public

 

1. Now, create the front end for our project. Update our INDEX.HTML

2. The focus of INDEX.HTML shall be the form for UPLOADFORM

3. This is the code for UPLOAD using DRAG AND DROP OF IMAGE. INDEX.HTML is written as:

 

4. This is the EVENT for UPLOAD BUTTON in INDEX.HTML:

The LOGIC is performed in APPS.JS:

5. This is the code for DOWLOAD REPORT in INDEX.HTML

This is the logic in APPS.JS

 

6. When we run our code, type this in your terminal:

$ node --watch app

When you run in your browser:

See the attached PDF for its sample output.

When we run our app and upload an image for plant analysis, we show our JSON data in our terminal:

We uninstall NODE.JS after this project to give way to Django projects.

 

 

Open the attached PDF file here.