├── .gitignore ├── README.md ├── config └── db.js ├── controller └── plantController.js ├── frontend ├── .gitignore ├── README.md ├── package-lock.json ├── package.json ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo.png │ ├── logo192.png │ ├── manifest.json │ ├── model │ │ ├── group1-shard1of3.bin │ │ ├── group1-shard2of3.bin │ │ ├── group1-shard3of3.bin │ │ └── model.json │ └── robots.txt ├── src │ ├── App.css │ ├── App.js │ ├── App.test.js │ ├── Assets │ │ ├── HTML.png │ │ ├── Logo.png │ │ ├── React.png │ │ ├── background1.jpeg │ │ ├── background2.jpeg │ │ ├── css.png │ │ ├── flowchart.png │ │ ├── javaScript.png │ │ ├── mongoDB.png │ │ ├── nodeJS.jpg │ │ ├── python.jpg │ │ ├── tensorFlow.png │ │ ├── title_background.jpeg │ │ ├── upload_image.png │ │ └── website.jpeg │ ├── data │ │ └── plantClasses.js │ ├── index.css │ ├── index.js │ ├── logo.svg │ ├── pages │ │ ├── Dragdrop.js │ │ ├── Feedback.js │ │ ├── FeedbackPage.js │ │ ├── Home.js │ │ ├── Result.js │ │ ├── Typewriter.js │ │ └── footer.js │ ├── reportWebVitals.js │ ├── routes │ │ └── MLRouting.js │ ├── setupTests.js │ ├── spinner.js │ └── style │ │ ├── dragDropStyle.css │ │ ├── footerStyle.js │ │ └── responseModel.css └── tailwind.config.js ├── models ├── feedbackModel.js └── plantModel.js ├── package-lock.json ├── package.json ├── public └── uploads │ └── plant-features.csv ├── routes └── plantRoute.js └── server.js /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | 3 | .env -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Team-43 Tech Tenets 2 | ## Switch to 'finalTake' branch to see the final project. 3 |
4 | 5 | 6 | # Project:Medicinal Plant Detection Using Machine Learning 7 | The project aims to develop a machine learning model for the identification and classification of medicinal plants from images and create a user-friendly web application to provide valuable information about these plants. 8 | 9 | # Problem Statement 10 | India, with a rich heritage of floral diversity, is well-known for its medicinal plant wealth, but their identification is one of the major burning issues in Ayurvedic Pharmaceutics. Several crude drugs are being sold under the same name in the market leading to confusion and their misidentification. Even the collectors and traders are not completely aware of the exact morphological appearance or differentiating attributes of the many drugs owing to seasonal and geographical availability, and similar characteristics. Moreover, the extensive consumption to meet demand-supply ratio exerts a heavy strain on the existing resources. It further leads to the practice of adulteration, substitution, and disbelief in the curative capability of the system eventually.This project addresses the need for a reliable tool to identify and learn about medicinal plants. 11 | 12 | # Data Collection: 13 | Gather a diverse dataset of images of medicinal plants. The dataset should include various species of medicinal plant. 14 | 15 | # Machine Learning Model: 16 | Train a machine learning model (e.g., convolutional neural network) using the collected dataset. The model's primary task is to classify images of medicinal plants into their respective species or categories. 17 | 18 | 19 | 20 | 21 | # Web Application Development: 22 | Create a web application that allows users to upload images of medicinal plants or enter descriptions. The application should offer the following features: 23 | 24 | * Plant Identification: The ML model should classify the uploaded images and provide information about the identified plant, including its scientific name, common name, medicinal properties, and uses. 25 | * Plant Information: Include a database of medicinal plants with detailed information, including images, descriptions Users can browse this database. 26 | * Search and Filter: Implement search and filter options to help users find specific plants or information quickly. 27 | * User Interaction: Allow users to submit feedback, ask questions, or contribute their own plant observations. 28 | * Compatibility: Ensure that the web application is responsive and accessible on desktop. 29 | # User Interface Design: 30 | Design an intuitive and user-friendly interface for the web application. Focus on ease of use, accessibility, and a visually appealing layout. 31 | # Testing and Evaluation: 32 | Thoroughly test the machine learning model and web application to ensure accuracy, reliability, and performance. Collect user feedback and make improvements accordingly. 33 | # User Education: 34 | Provide educational resources on the web application to help users learn about medicinal plants, their uses, and the importance of conservation. 35 | 36 | This project not only serves as a valuable tool for plant enthusiasts, herbalists, and researchers but also contributes to the conservation and sustainable use of medicinal plants. 37 | 38 | # Website: 39 | 40 | 41 | # Tech Stack Used: 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | -------------------------------------------------------------------------------- /config/db.js: -------------------------------------------------------------------------------- 1 | import mongoose from "mongoose"; 2 | 3 | const connectDB = async () => { 4 | try { 5 | const conn = await mongoose.connect(process.env.MONGO_URL); 6 | console.log( 7 | `Connected to mongodb host : ${conn.connection.host}`.bgMagenta.white 8 | ); 9 | } catch (error) { 10 | console.log(`Error in mongodb : ${error}`.bgRed.white); 11 | } 12 | }; 13 | 14 | export default connectDB; 15 | -------------------------------------------------------------------------------- /controller/plantController.js: -------------------------------------------------------------------------------- 1 | import plantModel from "../models/plantModel.js"; 2 | import fs from "fs"; 3 | import csv from "csvtojson"; 4 | import feedbackModel from "../models/feedbackModel.js"; 5 | 6 | export const getPlantController = async (req, res) => { 7 | try { 8 | const { name } = req.params; 9 | console.log(name); 10 | const plant = await plantModel.findOne({ scientificName: name }); 11 | res.status(201).send({ 12 | success: true, 13 | message: "Plant retrived sucessfully", 14 | plant, 15 | }); 16 | } catch (error) { 17 | console.log(error); 18 | res.status(500).send({ 19 | success: false, 20 | error, 21 | message: "error in getting plant details", 22 | }); 23 | } 24 | }; 25 | 26 | export const uploadPlantController = async (req, res) => { 27 | try { 28 | var plantData = []; 29 | const filePath = req.file.path; 30 | csv() 31 | .fromFile(filePath) 32 | .then(async (response) => { 33 | for (var x = 0; x < response.length; x++) { 34 | plantData.push({ 35 | scientificName: response[x].scientificName, 36 | localName: response[x].localName, 37 | features: response[x].features, 38 | photo: response[x].photo, 39 | }); 40 | } 41 | await plantModel.insertMany(plantData); 42 | }); 43 | res.status(200).send({ 44 | success: true, 45 | message: "upload successful", 46 | }); 47 | } catch (error) { 48 | console.log(error); 49 | res.status(500).send({ 50 | success: false, 51 | error, 52 | message: "error in getting plant details", 53 | }); 54 | } 55 | }; 56 | export const postFeedback = async (req, res) => { 57 | try { 58 | const { score, description } = req.body; //req.fileds 59 | if (!score) { 60 | return res.send({ message: "Score is required!" }); 61 | } 62 | if (!description) { 63 | return res.send({ message: "Description is required!" }); 64 | } 65 | const feed = await new feedbackModel({ 66 | score, 67 | description, 68 | }).save(); 69 | res.status(200).send({ 70 | success: true, 71 | message: "review posted successfully", 72 | feed, 73 | }); 74 | } catch (error) { 75 | console.log(error); 76 | res.status(500).send({ 77 | success: false, 78 | error, 79 | message: "error in posting review", 80 | }); 81 | } 82 | }; 83 | 84 | export const getFeedback = async (req, res) => { 85 | try { 86 | const feed = await feedbackModel.find({}).sort({ createdAt: -1 }); 87 | res.status(201).send({ 88 | success: true, 89 | totalCount: feed.length, 90 | message: "Feedback", 91 | feed, 92 | }); 93 | } catch (error) { 94 | console.log(error); 95 | res.status(500).send({ 96 | success: false, 97 | error, 98 | message: "error in getting feedback", 99 | }); 100 | } 101 | }; 102 | export const getResultName = async (req, res) => { 103 | try { 104 | async function loadImage(file) { 105 | return new Promise((resolve) => { 106 | const reader = new FileReader(); 107 | reader.onload = (event) => { 108 | const img = new Image(); 109 | img.onload = () => resolve(tf.browser.fromPixels(img)); 110 | img.src = event.target.result; 111 | }; 112 | reader.readAsDataURL(file); 113 | }); 114 | } 115 | 116 | function preprocessImage(image) { 117 | const resizedImage = tf.image.resizeBilinear(image, [128, 128]); // Adjust size if necessary 118 | return resizedImage; 119 | } 120 | 121 | // Setting up tfjs with the model we downloaded 122 | tf.loadGraphModel("model1/model.json").then(function (model) { 123 | window.model = model; 124 | }); 125 | 126 | var predict = function (input) { 127 | if (window.model) { 128 | window.model 129 | .predict([tf.tensor(input).reshape([28, 28, 1])]) 130 | .array() 131 | .then(function (scores) { 132 | scores = scores[0]; 133 | predicted = scores.indexOf(Math.max(...scores)); 134 | }); 135 | } else { 136 | // The model takes a bit to load, 137 | // if we are too fast, wait 138 | setTimeout(function () { 139 | predict(input); 140 | }, 50); 141 | } 142 | }; 143 | const file = req.body; 144 | if (file) { 145 | // Read and preprocess the selected image 146 | const image = await loadImage(file); 147 | let tensor = preprocessImage(image); 148 | 149 | // let tensor = image; 150 | tensor = tf.expandDims(tensor, 0); 151 | 152 | // Make predictions using the model 153 | // console.log(model); 154 | const predictions = await model.predict(tensor); 155 | let scores = await tf.softmax(predictions).data(); 156 | index = scores.indexOf(Math.max(...scores)); 157 | const name = plantClasses[index]; 158 | 159 | res.status(201).send({ 160 | success: true, 161 | totalCount: feed.length, 162 | message: "Feedback", 163 | name, 164 | }); 165 | } 166 | } catch (error) { 167 | console.log(error); 168 | res.status(500).send({ 169 | success: false, 170 | error, 171 | message: "error in getting feedback", 172 | }); 173 | } 174 | }; 175 | -------------------------------------------------------------------------------- /frontend/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /frontend/README.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /frontend/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "frontend", 3 | "proxy": "http://localhost:8080", 4 | "version": "0.1.0", 5 | "private": true, 6 | "dependencies": { 7 | "@fortawesome/fontawesome-svg-core": "^6.4.2", 8 | "@fortawesome/free-brands-svg-icons": "^6.4.2", 9 | "@fortawesome/free-regular-svg-icons": "^6.4.2", 10 | "@fortawesome/free-solid-svg-icons": "^6.4.2", 11 | "@fortawesome/react-fontawesome": "^0.2.0", 12 | "@mantine/core": "^6.0.20", 13 | "@tensorflow/tfjs": "^4.11.0", 14 | "@testing-library/jest-dom": "^5.17.0", 15 | "@testing-library/react": "^13.4.0", 16 | "@testing-library/user-event": "^13.5.0", 17 | "axios": "^1.5.0", 18 | "bootstrap": "^5.3.2", 19 | "react": "^18.2.0", 20 | "react-dom": "^18.2.0", 21 | "react-dropzone": "^14.2.3", 22 | "react-router-dom": "^6.16.0", 23 | "react-scripts": "5.0.1", 24 | "slugify": "^1.6.6", 25 | "web-vitals": "^2.1.4" 26 | }, 27 | "scripts": { 28 | "start": "react-scripts start", 29 | "build": "react-scripts build", 30 | "test": "react-scripts test", 31 | "eject": "react-scripts eject" 32 | }, 33 | "eslintConfig": { 34 | "extends": [ 35 | "react-app", 36 | "react-app/jest" 37 | ] 38 | }, 39 | "browserslist": { 40 | "production": [ 41 | ">0.2%", 42 | "not dead", 43 | "not op_mini all" 44 | ], 45 | "development": [ 46 | "last 1 chrome version", 47 | "last 1 firefox version", 48 | "last 1 safari version" 49 | ] 50 | }, 51 | "devDependencies": { 52 | "tailwindcss": "^3.3.3" 53 | } 54 | } 55 | -------------------------------------------------------------------------------- /frontend/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hacktoberfest-codex/Medicinal-Plant-Detection/7a06717567feb8e9dc577fa606383d9323552dc3/frontend/public/favicon.ico -------------------------------------------------------------------------------- /frontend/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 14 | 15 | 19 | 20 | 29 | React App 30 | 31 | 37 | 43 | 48 | 49 | 50 | 51 |
52 | 62 | 63 | 68 | 73 | 78 | 79 | 80 | -------------------------------------------------------------------------------- /frontend/public/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hacktoberfest-codex/Medicinal-Plant-Detection/7a06717567feb8e9dc577fa606383d9323552dc3/frontend/public/logo.png -------------------------------------------------------------------------------- /frontend/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hacktoberfest-codex/Medicinal-Plant-Detection/7a06717567feb8e9dc577fa606383d9323552dc3/frontend/public/logo192.png -------------------------------------------------------------------------------- /frontend/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /frontend/public/model/group1-shard1of3.bin: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hacktoberfest-codex/Medicinal-Plant-Detection/7a06717567feb8e9dc577fa606383d9323552dc3/frontend/public/model/group1-shard1of3.bin -------------------------------------------------------------------------------- /frontend/public/model/group1-shard2of3.bin: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hacktoberfest-codex/Medicinal-Plant-Detection/7a06717567feb8e9dc577fa606383d9323552dc3/frontend/public/model/group1-shard2of3.bin -------------------------------------------------------------------------------- /frontend/public/model/group1-shard3of3.bin: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hacktoberfest-codex/Medicinal-Plant-Detection/7a06717567feb8e9dc577fa606383d9323552dc3/frontend/public/model/group1-shard3of3.bin -------------------------------------------------------------------------------- /frontend/public/model/model.json: -------------------------------------------------------------------------------- 1 | {"format": "graph-model", "generatedBy": "2.13.0", "convertedBy": "TensorFlow.js Converter v4.11.0", "signature": {"inputs": {"sequential_input": {"name": "sequential_input:0", "dtype": "DT_FLOAT", "tensorShape": {"dim": [{"size": "-1"}, {"size": "128"}, {"size": "128"}, {"size": "3"}]}}}, "outputs": {"outputs": {"name": "Identity:0", "dtype": "DT_FLOAT", "tensorShape": {"dim": [{"size": "-1"}, {"size": "200"}]}}}}, "modelTopology": {"node": [{"name": "StatefulPartitionedCall/sequential_1/rescaling_1/Cast/x", "op": "Const", "attr": {"value": {"tensor": {"dtype": "DT_FLOAT", "tensorShape": {}}}, "dtype": {"type": "DT_FLOAT"}}}, {"name": "StatefulPartitionedCall/sequential_1/rescaling_1/Cast_1/x", "op": "Const", "attr": {"value": {"tensor": {"dtype": "DT_FLOAT", "tensorShape": {}}}, "dtype": {"type": "DT_FLOAT"}}}, {"name": "StatefulPartitionedCall/sequential_1/conv2d/Conv2D/ReadVariableOp", "op": "Const", "attr": {"value": {"tensor": {"dtype": "DT_FLOAT", "tensorShape": {"dim": [{"size": "3"}, {"size": "3"}, {"size": "3"}, {"size": "32"}]}}}, "dtype": {"type": "DT_FLOAT"}}}, {"name": "StatefulPartitionedCall/sequential_1/conv2d/BiasAdd/ReadVariableOp", "op": "Const", "attr": {"dtype": {"type": "DT_FLOAT"}, "value": {"tensor": {"dtype": "DT_FLOAT", "tensorShape": {"dim": [{"size": "32"}]}}}}}, {"name": "StatefulPartitionedCall/sequential_1/conv2d_1/Conv2D/ReadVariableOp", "op": "Const", "attr": {"value": {"tensor": {"dtype": "DT_FLOAT", "tensorShape": {"dim": [{"size": "3"}, {"size": "3"}, {"size": "32"}, {"size": "32"}]}}}, "dtype": {"type": "DT_FLOAT"}}}, {"name": "StatefulPartitionedCall/sequential_1/conv2d_1/BiasAdd/ReadVariableOp", "op": "Const", "attr": {"dtype": {"type": "DT_FLOAT"}, "value": {"tensor": {"dtype": "DT_FLOAT", "tensorShape": {"dim": [{"size": "32"}]}}}}}, {"name": "StatefulPartitionedCall/sequential_1/conv2d_2/Conv2D/ReadVariableOp", "op": "Const", "attr": {"dtype": {"type": "DT_FLOAT"}, "value": {"tensor": {"dtype": "DT_FLOAT", "tensorShape": {"dim": [{"size": "3"}, {"size": "3"}, {"size": "32"}, {"size": "64"}]}}}}}, {"name": "StatefulPartitionedCall/sequential_1/conv2d_2/BiasAdd/ReadVariableOp", "op": "Const", "attr": {"value": {"tensor": {"dtype": "DT_FLOAT", "tensorShape": {"dim": [{"size": "64"}]}}}, "dtype": {"type": "DT_FLOAT"}}}, {"name": "StatefulPartitionedCall/sequential_1/flatten/Const", "op": "Const", "attr": {"value": {"tensor": {"dtype": "DT_INT32", "tensorShape": {"dim": [{"size": "2"}]}}}, "dtype": {"type": "DT_INT32"}}}, {"name": "StatefulPartitionedCall/sequential_1/dense/MatMul/ReadVariableOp", "op": "Const", "attr": {"value": {"tensor": {"dtype": "DT_FLOAT", "tensorShape": {"dim": [{"size": "16384"}, {"size": "128"}]}}}, "dtype": {"type": "DT_FLOAT"}}}, {"name": "StatefulPartitionedCall/sequential_1/dense/BiasAdd/ReadVariableOp", "op": "Const", "attr": {"dtype": {"type": "DT_FLOAT"}, "value": {"tensor": {"dtype": "DT_FLOAT", "tensorShape": {"dim": [{"size": "128"}]}}}}}, {"name": "StatefulPartitionedCall/sequential_1/outputs/MatMul/ReadVariableOp", "op": "Const", "attr": {"dtype": {"type": "DT_FLOAT"}, "value": {"tensor": {"dtype": "DT_FLOAT", "tensorShape": {"dim": [{"size": "128"}, {"size": "200"}]}}}}}, {"name": "StatefulPartitionedCall/sequential_1/outputs/BiasAdd/ReadVariableOp", "op": "Const", "attr": {"dtype": {"type": "DT_FLOAT"}, "value": {"tensor": {"dtype": "DT_FLOAT", "tensorShape": {"dim": [{"size": "200"}]}}}}}, {"name": "sequential_input", "op": "Placeholder", "attr": {"dtype": {"type": "DT_FLOAT"}, "shape": {"shape": {"dim": [{"size": "-1"}, {"size": "128"}, {"size": "128"}, {"size": "3"}]}}}}, {"name": "StatefulPartitionedCall/sequential_1/rescaling_1/mul", "op": "Mul", "input": ["sequential_input", "StatefulPartitionedCall/sequential_1/rescaling_1/Cast/x"], "attr": {"T": {"type": "DT_FLOAT"}}}, {"name": "StatefulPartitionedCall/sequential_1/rescaling_1/add", "op": "AddV2", "input": ["StatefulPartitionedCall/sequential_1/rescaling_1/mul", "StatefulPartitionedCall/sequential_1/rescaling_1/Cast_1/x"], "attr": {"T": {"type": "DT_FLOAT"}}}, {"name": "StatefulPartitionedCall/sequential_1/conv2d/Relu", "op": "_FusedConv2D", "input": ["StatefulPartitionedCall/sequential_1/rescaling_1/add", "StatefulPartitionedCall/sequential_1/conv2d/Conv2D/ReadVariableOp", "StatefulPartitionedCall/sequential_1/conv2d/BiasAdd/ReadVariableOp"], "device": "/device:CPU:0", "attr": {"filter_format": {"s": "SFdJTw=="}, "leakyrelu_alpha": {"f": 0.2}, "explicit_paddings": {"list": {}}, "strides": {"list": {"i": ["1", "1", "1", "1"]}}, "epsilon": {"f": 0.0}, "use_cudnn_on_gpu": {"b": true}, "num_host_args": {"i": "0"}, "TArgs": {"list": {"type": ["DT_FLOAT"]}}, "T": {"type": "DT_FLOAT"}, "fused_ops": {"list": {"s": ["Qmlhc0FkZA==", "UmVsdQ=="]}}, "data_format": {"s": "TkhXQw=="}, "dilations": {"list": {"i": ["1", "1", "1", "1"]}}, "padding": {"s": "U0FNRQ=="}, "num_args": {"i": "1"}}}, {"name": "StatefulPartitionedCall/sequential_1/max_pooling2d/MaxPool", "op": "MaxPool", "input": ["StatefulPartitionedCall/sequential_1/conv2d/Relu"], "attr": {"explicit_paddings": {"list": {}}, "data_format": {"s": "TkhXQw=="}, "ksize": {"list": {"i": ["1", "2", "2", "1"]}}, "strides": {"list": {"i": ["1", "2", "2", "1"]}}, "padding": {"s": "VkFMSUQ="}, "T": {"type": "DT_FLOAT"}}}, {"name": "StatefulPartitionedCall/sequential_1/conv2d_1/Relu", "op": "_FusedConv2D", "input": ["StatefulPartitionedCall/sequential_1/max_pooling2d/MaxPool", "StatefulPartitionedCall/sequential_1/conv2d_1/Conv2D/ReadVariableOp", "StatefulPartitionedCall/sequential_1/conv2d_1/BiasAdd/ReadVariableOp"], "device": "/device:CPU:0", "attr": {"dilations": {"list": {"i": ["1", "1", "1", "1"]}}, "leakyrelu_alpha": {"f": 0.2}, "data_format": {"s": "TkhXQw=="}, "explicit_paddings": {"list": {}}, "padding": {"s": "U0FNRQ=="}, "epsilon": {"f": 0.0}, "num_host_args": {"i": "0"}, "T": {"type": "DT_FLOAT"}, "strides": {"list": {"i": ["1", "1", "1", "1"]}}, "filter_format": {"s": "SFdJTw=="}, "num_args": {"i": "1"}, "TArgs": {"list": {"type": ["DT_FLOAT"]}}, "use_cudnn_on_gpu": {"b": true}, "fused_ops": {"list": {"s": ["Qmlhc0FkZA==", "UmVsdQ=="]}}}}, {"name": "StatefulPartitionedCall/sequential_1/max_pooling2d_1/MaxPool", "op": "MaxPool", "input": ["StatefulPartitionedCall/sequential_1/conv2d_1/Relu"], "attr": {"T": {"type": "DT_FLOAT"}, "data_format": {"s": "TkhXQw=="}, "padding": {"s": "VkFMSUQ="}, "explicit_paddings": {"list": {}}, "ksize": {"list": {"i": ["1", "2", "2", "1"]}}, "strides": {"list": {"i": ["1", "2", "2", "1"]}}}}, {"name": "StatefulPartitionedCall/sequential_1/conv2d_2/Relu", "op": "_FusedConv2D", "input": ["StatefulPartitionedCall/sequential_1/max_pooling2d_1/MaxPool", "StatefulPartitionedCall/sequential_1/conv2d_2/Conv2D/ReadVariableOp", "StatefulPartitionedCall/sequential_1/conv2d_2/BiasAdd/ReadVariableOp"], "device": "/device:CPU:0", "attr": {"dilations": {"list": {"i": ["1", "1", "1", "1"]}}, "num_host_args": {"i": "0"}, "epsilon": {"f": 0.0}, "filter_format": {"s": "SFdJTw=="}, "fused_ops": {"list": {"s": ["Qmlhc0FkZA==", "UmVsdQ=="]}}, "num_args": {"i": "1"}, "use_cudnn_on_gpu": {"b": true}, "padding": {"s": "U0FNRQ=="}, "data_format": {"s": "TkhXQw=="}, "T": {"type": "DT_FLOAT"}, "TArgs": {"list": {"type": ["DT_FLOAT"]}}, "explicit_paddings": {"list": {}}, "strides": {"list": {"i": ["1", "1", "1", "1"]}}, "leakyrelu_alpha": {"f": 0.2}}}, {"name": "StatefulPartitionedCall/sequential_1/max_pooling2d_2/MaxPool", "op": "MaxPool", "input": ["StatefulPartitionedCall/sequential_1/conv2d_2/Relu"], "attr": {"explicit_paddings": {"list": {}}, "padding": {"s": "VkFMSUQ="}, "data_format": {"s": "TkhXQw=="}, "ksize": {"list": {"i": ["1", "2", "2", "1"]}}, "T": {"type": "DT_FLOAT"}, "strides": {"list": {"i": ["1", "2", "2", "1"]}}}}, {"name": "StatefulPartitionedCall/sequential_1/flatten/Reshape", "op": "Reshape", "input": ["StatefulPartitionedCall/sequential_1/max_pooling2d_2/MaxPool", "StatefulPartitionedCall/sequential_1/flatten/Const"], "attr": {"T": {"type": "DT_FLOAT"}, "Tshape": {"type": "DT_INT32"}}}, {"name": "StatefulPartitionedCall/sequential_1/dense/Relu", "op": "_FusedMatMul", "input": ["StatefulPartitionedCall/sequential_1/flatten/Reshape", "StatefulPartitionedCall/sequential_1/dense/MatMul/ReadVariableOp", "StatefulPartitionedCall/sequential_1/dense/BiasAdd/ReadVariableOp"], "device": "/device:CPU:0", "attr": {"T": {"type": "DT_FLOAT"}, "fused_ops": {"list": {"s": ["Qmlhc0FkZA==", "UmVsdQ=="]}}, "transpose_b": {"b": false}, "epsilon": {"f": 0.0}, "num_args": {"i": "1"}, "leakyrelu_alpha": {"f": 0.2}, "transpose_a": {"b": false}}}, {"name": "StatefulPartitionedCall/sequential_1/outputs/BiasAdd", "op": "_FusedMatMul", "input": ["StatefulPartitionedCall/sequential_1/dense/Relu", "StatefulPartitionedCall/sequential_1/outputs/MatMul/ReadVariableOp", "StatefulPartitionedCall/sequential_1/outputs/BiasAdd/ReadVariableOp"], "device": "/device:CPU:0", "attr": {"transpose_a": {"b": false}, "fused_ops": {"list": {"s": ["Qmlhc0FkZA=="]}}, "leakyrelu_alpha": {"f": 0.2}, "T": {"type": "DT_FLOAT"}, "transpose_b": {"b": false}, "epsilon": {"f": 0.0}, "num_args": {"i": "1"}}}, {"name": "StatefulPartitionedCall/sequential_1/outputs/Softmax", "op": "Softmax", "input": ["StatefulPartitionedCall/sequential_1/outputs/BiasAdd"], "attr": {"T": {"type": "DT_FLOAT"}}}, {"name": "Identity", "op": "Identity", "input": ["StatefulPartitionedCall/sequential_1/outputs/Softmax"], "attr": {"T": {"type": "DT_FLOAT"}}}], "library": {}, "versions": {"producer": 1482}}, "weightsManifest": [{"paths": ["group1-shard1of3.bin", "group1-shard2of3.bin", "group1-shard3of3.bin"], "weights": [{"name": "StatefulPartitionedCall/sequential_1/rescaling_1/Cast/x", "shape": [], "dtype": "float32"}, {"name": "StatefulPartitionedCall/sequential_1/rescaling_1/Cast_1/x", "shape": [], "dtype": "float32"}, {"name": "StatefulPartitionedCall/sequential_1/conv2d/Conv2D/ReadVariableOp", "shape": [3, 3, 3, 32], "dtype": "float32"}, {"name": "StatefulPartitionedCall/sequential_1/conv2d/BiasAdd/ReadVariableOp", "shape": [32], "dtype": "float32"}, {"name": "StatefulPartitionedCall/sequential_1/conv2d_1/Conv2D/ReadVariableOp", "shape": [3, 3, 32, 32], "dtype": "float32"}, {"name": "StatefulPartitionedCall/sequential_1/conv2d_1/BiasAdd/ReadVariableOp", "shape": [32], "dtype": "float32"}, {"name": "StatefulPartitionedCall/sequential_1/conv2d_2/Conv2D/ReadVariableOp", "shape": [3, 3, 32, 64], "dtype": "float32"}, {"name": "StatefulPartitionedCall/sequential_1/conv2d_2/BiasAdd/ReadVariableOp", "shape": [64], "dtype": "float32"}, {"name": "StatefulPartitionedCall/sequential_1/flatten/Const", "shape": [2], "dtype": "int32"}, {"name": "StatefulPartitionedCall/sequential_1/dense/MatMul/ReadVariableOp", "shape": [16384, 128], "dtype": "float32"}, {"name": "StatefulPartitionedCall/sequential_1/dense/BiasAdd/ReadVariableOp", "shape": [128], "dtype": "float32"}, {"name": "StatefulPartitionedCall/sequential_1/outputs/MatMul/ReadVariableOp", "shape": [128, 200], "dtype": "float32"}, {"name": "StatefulPartitionedCall/sequential_1/outputs/BiasAdd/ReadVariableOp", "shape": [200], "dtype": "float32"}]}]} -------------------------------------------------------------------------------- /frontend/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /frontend/src/App.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hacktoberfest-codex/Medicinal-Plant-Detection/7a06717567feb8e9dc577fa606383d9323552dc3/frontend/src/App.css -------------------------------------------------------------------------------- /frontend/src/App.js: -------------------------------------------------------------------------------- 1 | import { Routes, Route } from "react-router-dom"; 2 | import "./App.css"; 3 | import Home from "./pages/Home"; 4 | import Result from "./pages/Result"; 5 | import Dragdrop from "./pages/Dragdrop"; 6 | import Feedback from "./pages/Feedback"; 7 | import FeedbackPage from "./pages/FeedbackPage"; 8 | 9 | function App() { 10 | return ( 11 | <> 12 | 13 | } /> 14 | } /> 15 | } /> 16 | } /> 17 | 18 | 19 | ); 20 | } 21 | 22 | export default App; 23 | -------------------------------------------------------------------------------- /frontend/src/App.test.js: -------------------------------------------------------------------------------- 1 | import { render, screen } from "@testing-library/react"; 2 | import App from "./App"; 3 | 4 | test("renders learn react link", () => { 5 | render(); 6 | const linkElement = screen.getByText(/learn react/i); 7 | expect(linkElement).toBeInTheDocument(); 8 | }); 9 | -------------------------------------------------------------------------------- /frontend/src/Assets/HTML.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hacktoberfest-codex/Medicinal-Plant-Detection/7a06717567feb8e9dc577fa606383d9323552dc3/frontend/src/Assets/HTML.png -------------------------------------------------------------------------------- /frontend/src/Assets/Logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hacktoberfest-codex/Medicinal-Plant-Detection/7a06717567feb8e9dc577fa606383d9323552dc3/frontend/src/Assets/Logo.png -------------------------------------------------------------------------------- /frontend/src/Assets/React.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hacktoberfest-codex/Medicinal-Plant-Detection/7a06717567feb8e9dc577fa606383d9323552dc3/frontend/src/Assets/React.png -------------------------------------------------------------------------------- /frontend/src/Assets/background1.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hacktoberfest-codex/Medicinal-Plant-Detection/7a06717567feb8e9dc577fa606383d9323552dc3/frontend/src/Assets/background1.jpeg -------------------------------------------------------------------------------- /frontend/src/Assets/background2.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hacktoberfest-codex/Medicinal-Plant-Detection/7a06717567feb8e9dc577fa606383d9323552dc3/frontend/src/Assets/background2.jpeg -------------------------------------------------------------------------------- /frontend/src/Assets/css.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hacktoberfest-codex/Medicinal-Plant-Detection/7a06717567feb8e9dc577fa606383d9323552dc3/frontend/src/Assets/css.png -------------------------------------------------------------------------------- /frontend/src/Assets/flowchart.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hacktoberfest-codex/Medicinal-Plant-Detection/7a06717567feb8e9dc577fa606383d9323552dc3/frontend/src/Assets/flowchart.png -------------------------------------------------------------------------------- /frontend/src/Assets/javaScript.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hacktoberfest-codex/Medicinal-Plant-Detection/7a06717567feb8e9dc577fa606383d9323552dc3/frontend/src/Assets/javaScript.png -------------------------------------------------------------------------------- /frontend/src/Assets/mongoDB.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hacktoberfest-codex/Medicinal-Plant-Detection/7a06717567feb8e9dc577fa606383d9323552dc3/frontend/src/Assets/mongoDB.png -------------------------------------------------------------------------------- /frontend/src/Assets/nodeJS.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hacktoberfest-codex/Medicinal-Plant-Detection/7a06717567feb8e9dc577fa606383d9323552dc3/frontend/src/Assets/nodeJS.jpg -------------------------------------------------------------------------------- /frontend/src/Assets/python.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hacktoberfest-codex/Medicinal-Plant-Detection/7a06717567feb8e9dc577fa606383d9323552dc3/frontend/src/Assets/python.jpg -------------------------------------------------------------------------------- /frontend/src/Assets/tensorFlow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hacktoberfest-codex/Medicinal-Plant-Detection/7a06717567feb8e9dc577fa606383d9323552dc3/frontend/src/Assets/tensorFlow.png -------------------------------------------------------------------------------- /frontend/src/Assets/title_background.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hacktoberfest-codex/Medicinal-Plant-Detection/7a06717567feb8e9dc577fa606383d9323552dc3/frontend/src/Assets/title_background.jpeg -------------------------------------------------------------------------------- /frontend/src/Assets/upload_image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hacktoberfest-codex/Medicinal-Plant-Detection/7a06717567feb8e9dc577fa606383d9323552dc3/frontend/src/Assets/upload_image.png -------------------------------------------------------------------------------- /frontend/src/Assets/website.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hacktoberfest-codex/Medicinal-Plant-Detection/7a06717567feb8e9dc577fa606383d9323552dc3/frontend/src/Assets/website.jpeg -------------------------------------------------------------------------------- /frontend/src/data/plantClasses.js: -------------------------------------------------------------------------------- 1 | export const plantClasses = [ 2 | "Abelmoschus sagittifolius", 3 | "Abrus precatorius", 4 | "Abutilon indicum", 5 | "Acanthus integrifolius", 6 | "Acorus tatarinowii", 7 | "Agave americana", 8 | "Ageratum conyzoides", 9 | "Allium ramosum", 10 | "Alocasia macrorrhizos", 11 | "Aloe vera", 12 | "Alpinia officinarum", 13 | "Amomum longiligulare", 14 | "Ampelopsis cantoniensis", 15 | "Andrographis paniculata", 16 | "Angelica dahurica", 17 | "Ardisia sylvestris", 18 | "Artemisia vulgaris", 19 | "Artocarpus altilis", 20 | "Artocarpus heterophyllus", 21 | "Artocarpus lakoocha", 22 | "Asparagus cochinchinensis", 23 | "Asparagus officinalis", 24 | "Averrhoa carambola", 25 | "Baccaurea sp", 26 | "Barleria lupulina", 27 | "Bengal Arum", 28 | "Berchemia lineata", 29 | "Bidens pilosa", 30 | "Bischofia trifoliata", 31 | "Blackberry Lily", 32 | "Blumea balsamifera", 33 | "Boehmeria nivea", 34 | "Breynia vitis", 35 | "Caesalpinia sappan", 36 | "Callerya speciosa", 37 | "Callisia fragrans", 38 | "Calophyllum inophyllum", 39 | "Calotropis gigantea", 40 | "Camellia chrysantha", 41 | "Caprifoliaceae", 42 | "Capsicum annuum", 43 | "Carica papaya", 44 | "Catharanthus roseus", 45 | "Celastrus hindsii", 46 | "Celosia argentea", 47 | "Centella asiatica", 48 | "Citrus aurantifolia", 49 | "Citrus hystrix", 50 | "Clausena indica", 51 | "Cleistocalyx operculatus", 52 | "Clerodendrum inerme", 53 | "Clinacanthus nutans", 54 | "Clycyrrhiza uralensis fish", 55 | "Coix lacryma-jobi", 56 | "Cordyline fruticosa", 57 | "Costus speciosus", 58 | "Crescentia cujete Lin", 59 | "Crinum asiaticum", 60 | "Crinum latifolium", 61 | "Croton oblongifolius", 62 | "Croton tonkinensis", 63 | "Curculigo gracilis", 64 | "Curculigo orchioides", 65 | "Cymbopogon", 66 | "Datura metel", 67 | "Derris elliptica", 68 | "Dianella ensifolia", 69 | "Dicliptera chinensis", 70 | "Dimocarpus longan", 71 | "Dioscorea persimilis", 72 | "Eichhoriaceae crassipes", 73 | "Eleutherine bulbosa", 74 | "Erythrina variegata", 75 | "Eupatorium fortunei", 76 | "Eupatorium triplinerve", 77 | "Euphorbia hirta", 78 | "Euphorbia pulcherrima", 79 | "Euphorbia tirucalli", 80 | "Euphorbia tithymaloides", 81 | "Eurycoma longifolia", 82 | "Excoecaria cochinchinensis", 83 | "Excoecaria sp", 84 | "Fallopia multiflora", 85 | "Ficus auriculata", 86 | "Ficus racemosa", 87 | "Fructus lycii", 88 | "Glochidion eriocarpum", 89 | "Glycosmis pentaphylla", 90 | "Gonocaryum lobbianum", 91 | "Gymnema sylvestre", 92 | "Gynura divaricata", 93 | "Hemerocallis fulva", 94 | "Hemigraphis glaucescens", 95 | "Hibiscus mutabilis", 96 | "Hibiscus rosa sinensis", 97 | "Hibiscus sabdariffa", 98 | "Holarrhena pubescens", 99 | "Homalomena occulta", 100 | "Houttuynia cordata", 101 | "Imperata cylindrica", 102 | "Iris domestica", 103 | "Ixora coccinea", 104 | "Jasminum sambac", 105 | "Jatropha gossypiifolia", 106 | "Jatropha multifida", 107 | "Jatropha podagrica", 108 | "Justicia gendarussa", 109 | "Kalanchoe pinnata", 110 | "Lactuca indica", 111 | "Lantana camara", 112 | "Lawsonia inermis", 113 | "Leea rubra", 114 | "Litsea Glutinosa", 115 | "Lonicera dasystyla", 116 | "Lpomoea sp", 117 | "Maesa", 118 | "Mallotus barbatus", 119 | "Mangifera", 120 | "Melastoma malabathricum", 121 | "Mentha Spicata", 122 | "Microcos tomentosa", 123 | "Micromelum falcatum", 124 | "Millettia pulchra", 125 | "Mimosa pudica", 126 | "Morinda citrifolia", 127 | "Moringa oleifera", 128 | "Morus alba", 129 | "Mussaenda philippica", 130 | "Nelumbo nucifera", 131 | "Ocimum basilicum", 132 | "Ocimum gratissimum", 133 | "Ocimum sanctum", 134 | "Oenanthe javanica", 135 | "Ophiopogon japonicus", 136 | "Paederia lanuginosa", 137 | "Pandanus amaryllifolius", 138 | "Pandanus sp", 139 | "Pandanus tectorius", 140 | "Parameria Laevigata", 141 | "Passiflora foetida", 142 | "Pereskia Sacharosa", 143 | "Persicaria odorata", 144 | "Phlogacanthus turgidus", 145 | "Phrynium placentarium", 146 | "Phyllanthus Reticulatus Poir", 147 | "Piper betle", 148 | "Piper sarmentosum", 149 | "Plantago", 150 | "Platycladus orientalis", 151 | "Plectranthus amboinicus", 152 | "Pluchea pteropoda Hemsl", 153 | "Plukenetia volubilis", 154 | "Plumbago indica", 155 | "Plumeria rubra", 156 | "Polyginum cuspidatum", 157 | "Polyscias fruticosa", 158 | "Polyscias guilfoylei", 159 | "Polyscias scutellaria", 160 | "Pouzolzia zeylanica", 161 | "Premna serratifolia", 162 | "Pseuderanthemum latifolium", 163 | "Psidium guajava", 164 | "Psychotria reevesii Wall", 165 | "Psychotria rubra", 166 | "Quisqualis indica", 167 | "Rauvolfia", 168 | "Rauvolfia tetraphylla", 169 | "Rhinacanthus nasutus", 170 | "Rhodomyrtus tomentosa", 171 | "Ruellia tuberosa", 172 | "Sanseviera canaliculata Carr", 173 | "Sansevieria hyacinthoides", 174 | "Sarcandra glabra", 175 | "Sauropus androgynus", 176 | "Schefflera heptaphylla", 177 | "Schefflera venulosa", 178 | "Senna alata", 179 | "Sida acuta Burm", 180 | "Solanum Mammosum", 181 | "Solanum torvum", 182 | "Spilanthes acmella", 183 | "Spondias dulcis", 184 | "Stachytarpheta jamaicensis", 185 | "Stephania dielsiana", 186 | "Stereospermum chelonoides", 187 | "Streptocaulon juventas", 188 | "Syzygium nervosum", 189 | "Tabernaemontana divaricata", 190 | "Tacca subflabellata", 191 | "Tamarindus indica", 192 | "Terminalia catappa", 193 | "Tradescantia discolor", 194 | "Trichanthera gigantea", 195 | "Vernonia amygdalina", 196 | "Vitex negundo", 197 | "Xanthium strumarium", 198 | "Zanthoxylum avicennae", 199 | "Zingiber officinale", 200 | "Ziziphus mauritiana", 201 | "helicteres hirsuta", 202 | ]; -------------------------------------------------------------------------------- /frontend/src/index.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | 5 | body { 6 | margin: 0; 7 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 8 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 9 | sans-serif; 10 | -webkit-font-smoothing: antialiased; 11 | -moz-osx-font-smoothing: grayscale; 12 | background-image: url("./Assets/background1.jpeg"); 13 | background-size: cover; 14 | } 15 | 16 | code { 17 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 18 | monospace; 19 | } 20 | 21 | /*------------------------------------------------------------------------*/ 22 | /*-------------------Home Page--------------------------------------------*/ 23 | .Home { 24 | padding: 60px; 25 | display: flex; 26 | justify-content: center; 27 | align-items: center; 28 | 29 | } 30 | 31 | .content { 32 | border: 35px solid #D9D9D9; 33 | border-radius: 1.5%; 34 | 35 | background-color: #D1FFBD; 36 | box-shadow: -10px 5px 10px black; 37 | box-shadow: inset; 38 | width: 1000px; 39 | height: auto; 40 | padding: 20px; 41 | } 42 | 43 | .title h1 { 44 | font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; 45 | background-image: url("https://rare-gallery.com/uploads/posts/582448-banana-leaf.jpg"); 46 | background-size: cover; 47 | padding: 20px; 48 | font-size: 70px; 49 | border-radius: 1.5%; 50 | 51 | } 52 | 53 | .content img { 54 | width: 930px; 55 | height: 350px; 56 | 57 | } 58 | 59 | .para { 60 | font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; 61 | font-size: larger; 62 | padding: 20px 20px 0px; 63 | } 64 | 65 | .foot { 66 | padding: 0px 50px; 67 | display: flex; 68 | justify-content: space-between; 69 | align-items: center; 70 | } 71 | 72 | .foot img { 73 | margin-left: 150px; 74 | } -------------------------------------------------------------------------------- /frontend/src/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom/client"; 3 | import "./index.css"; 4 | import App from "./App"; 5 | import reportWebVitals from "./reportWebVitals"; 6 | import { BrowserRouter } from "react-router-dom"; 7 | 8 | const root = ReactDOM.createRoot(document.getElementById("root")); 9 | root.render( 10 | 11 | 12 | 13 | ); 14 | 15 | // If you want to start measuring performance in your app, pass a function 16 | // to log results (for example: reportWebVitals(console.log)) 17 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 18 | reportWebVitals(); 19 | -------------------------------------------------------------------------------- /frontend/src/logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /frontend/src/pages/Dragdrop.js: -------------------------------------------------------------------------------- 1 | import { useEffect, useState } from "react"; 2 | import { useDropzone } from "react-dropzone"; 3 | import upload from "../Assets/upload_image.png"; 4 | import "../style/dragDropStyle.css"; 5 | import Footer from "./footer"; 6 | import { useNavigate } from "react-router-dom"; 7 | import axios from "axios"; 8 | import * as tf from "@tensorflow/tfjs"; 9 | import { plantClasses } from "../data/plantClasses"; 10 | // import "../Assets/model/model.json"; 11 | 12 | // Function to load an image and convert it to a tensor 13 | async function loadImage(file) { 14 | return new Promise((resolve) => { 15 | const reader = new FileReader(); 16 | reader.onload = (event) => { 17 | const img = new Image(); 18 | img.onload = () => resolve(tf.browser.fromPixels(img)); 19 | img.src = event.target.result; 20 | }; 21 | reader.readAsDataURL(file); 22 | }); 23 | } 24 | 25 | function preprocessImage(image) { 26 | const resizedImage = image.resizeBilinear([128, 128]); // Adjust size if necessary 27 | return resizedImage; 28 | } 29 | 30 | 31 | const thumbsContainer = { 32 | display: "flex", 33 | flexDirection: "row", 34 | flexWrap: "wrap", 35 | }; 36 | 37 | const thumb = { 38 | display: "inline-flex", 39 | borderRadius: 2, 40 | border: "1px solid #eaeaea", 41 | marginBottom: 8, 42 | marginRight: 8, 43 | // marginLeft: '100px', 44 | width: "100px", 45 | height: "100px", 46 | padding: "10px", 47 | boxSizing: "border-box", 48 | }; 49 | 50 | const thumbInner = { 51 | display: "flex", 52 | minWidth: 0, 53 | overflow: "hidden", 54 | }; 55 | 56 | const img = { 57 | display: "block", 58 | width: "auto", 59 | height: "100%", 60 | }; 61 | 62 | const container = { 63 | width: "900px", 64 | marginTop: "50px", 65 | marginBottom: "50px", 66 | }; 67 | 68 | const box = { 69 | border: "1px solid lightblue", 70 | }; 71 | 72 | function Dragdrop(props) { 73 | const [files, setFiles] = useState([]); 74 | const [modelLoading, setModelLoading] = useState(true); 75 | const [model, setModel] = useState(null); 76 | const navigate = useNavigate(); 77 | let modelLoad; 78 | tf.loadGraphModel("model/model.json").then(function (model) { 79 | window.model = model; 80 | setModelLoading(false); 81 | }); 82 | 83 | const getPlantName = async (files) => { 84 | try { 85 | console.log(files); 86 | const image = await loadImage(files[0]); 87 | let tensor = preprocessImage(image); 88 | tensor = tensor.expandDims(0); 89 | console.log(tensor); 90 | console.log(window.model); 91 | const predictions = await window.model.predict(tensor).data(); 92 | // console.log(predictions); 93 | let index = predictions.indexOf(Math.max(...predictions)); 94 | // console.log(plantClasses[index]); 95 | navigate(`/result/${plantClasses[index]}`); 96 | } catch (error) { 97 | console.log(error); 98 | } 99 | }; 100 | const { getRootProps, getInputProps } = useDropzone({ 101 | accept: { 102 | "image/*": [], 103 | }, 104 | onDrop: (acceptedFiles) => { 105 | // setFiles( 106 | // acceptedFiles.map((file) => 107 | // Object.assign(file, { 108 | // preview: URL.createObjectURL(file), 109 | // }) 110 | // ) 111 | // ); 112 | getPlantName(acceptedFiles); 113 | }, 114 | }); 115 | 116 | const thumbs = files.map((file) => ( 117 |
118 |
119 | { 124 | // URL.revokeObjectURL(file.preview); 125 | // }} 126 | alt={file.name} 127 | /> 128 |
129 |
130 | )); 131 | 132 | return ( 133 | <> 134 | {!modelLoading && ( 135 | <> 136 |
137 |
138 | 139 | upload 140 |

141 | Click here to add files
142 | or 143 |
Drag & Drop files here 144 |

145 | 148 |
149 | 150 |
151 |