Python Code
HTML CODE
# -*- coding: utf-8 -*- """ Created on Fri Mar 17 23:34:05 2023 @author: UBED """ ''' from tensorflow.keras.preprocessing import image from tensorflow.keras.utils import load_img from keras.models import load_model import os from flask import Flask, flash, request, redirect, url_for,jsonify from werkzeug.utils import secure_filename import numpy as np from PIL import Image from flask import Flask, render_template, request result = { 0: 'Amaranthus Green', 1: 'Amaranthus Red', 2: 'Balloon vine', 3: 'Betel Leaves', 4: 'Black Night Shade', 5: 'Celery', 6: 'Chinese Spinach', 7: 'Coriander Leaves', 8: 'Curry Leaf', 9: 'Dwarf Copperleaf (Green)', 10: 'Dwarf copperleaf (Red)', 11: 'False Amarnath', 12: 'Fenugreek Leaves', 13: 'Giant Pigweed', 14: 'Gongura', 15: 'Indian pennywort', 16: 'Lagos Spinach', 17: 'Lambs Quarters', 18: 'Lettuce Tree', 19: 'Malabar Spinach (Green)', 20: 'Mint Leaves', 21: 'Mustard', 22: 'Palak', 23: 'Siru Keerai', 24: 'Water Spinach' } #Predicting Image MODEL_PATH = 'CNN_model.h5' model_dl = load_model(MODEL_PATH) app = Flask(__name__) @app.route("/") def hello_world(): return render_template("index.html") # return "<p>Hello, World!</p>" @app.route('/upload', methods=['POST']) def upload(): if 'file' not in request.files: return 'No file uploaded.', 400 file = request.files['file'] if file.filename == '': return 'No file selected.', 400 # Save the file to the "image" folder file.save(os.path.join('image', file.filename)) temp_path = os.path.join('image',file.filename) # Preprocess the image for the model img = image.load_img(temp_path, target_size=(224, 224)) img_arr = np.expand_dims(img, axis=0) img_arr = image.img_to_array(img) img_arr = np.vstack([img_arr]) # Make a prediction with the model Result = model_dl.predict(img_arr) prediction_index = np.argmax(Result) # print(Result,prediction_index) prediction = result[prediction_index] # Remove the temporary file # os.remove(temp_path) # Return the prediction as a JSON response response = {'prediction': str(prediction)} return jsonify(response) if __name__ == '__main__': app.run() ''' from tensorflow.keras.preprocessing import image from tensorflow.keras.utils import load_img from keras.models import load_model import os from flask import Flask, flash, request, redirect, url_for,jsonify from werkzeug.utils import secure_filename import numpy as np from PIL import Image from flask import Flask, render_template, request import tempfile app=Flask(__name__) result = {0: 'Amaranthus Green', 1: 'Amaranthus Red', 2: 'Balloon vine', 3: 'Betel Leaves', 4: 'Black Night Shade', 5: 'Celery', 6: 'Chinese Spinach', 7: 'Coriander Leaves', 8: 'Curry Leaf', 9: 'Dwarf Copperleaf (Green)', 10: 'Dwarf copperleaf (Red)', 11: 'False Amarnath', 12: 'Fenugreek Leaves', 13: 'Giant Pigweed', 14: 'Gongura', 15: 'Indian pennywort', 16: 'Lagos Spinach', 17: 'Lambs Quarters', 18: 'Lettuce Tree', 19: 'Malabar Spinach (Green)', 20: 'Mint Leaves', 21: 'Mustard', 22: 'Palak', 23: 'Siru Keerai', 24: 'Water Spinach'} MODEL_PATH = 'CNN_model.h5' model_dl = load_model(MODEL_PATH) @app.route('/predict', methods=['GET', 'POST']) def predict(): if request.method == 'POST': img_file = request.files['image'] # Save the temporary file with tempfile.NamedTemporaryFile(delete=False) as temp: img_file.save(temp.name) temp_path = temp.name # Preprocess the image for the model img = image.load_img(temp_path, target_size=(224, 224)) img_arr = image.img_to_array(img) img_arr = np.expand_dims(img_arr, axis=0) img_arr = np.vstack([img_arr]) # Make a prediction with the model Result = model_dl.predict(img_arr) prediction_index = np.argmax(Result) prediction = result[prediction_index] # Remove the temporary file os.remove(temp_path) # Return the prediction as a JSON response response = {'prediction': str(prediction)} return jsonify(response) else: return "No image passed UBED" if __name__ == '__main__': app.run()
CSS Code
<head> <meta charset="UTF-8"> <title>TYEDI</title> <link rel="stylesheet" href="{{ url_for('static', filename='css/app.css') }}"> </head> <body> <header> <div id="nav_heading"> MEDICINAL PLANT FINDER? </div> </header> <section> <div class="container"> <div id="heading"> GET THE INFO ABOUT THE PLANT </div> <div id="subheading"> Upload the image the find which type of medicinal plant it is. </div> <div id="uploadDiv">Select the IMAGE</div> </div> </section> <script src="{{ url_for('static', filename='js/app.js') }}"></script> </body> </html>
JavaScript Code
@import url(https://fonts.googleapis.com/css?family=Roboto:300); .sw* { margin: 0; } body{ /* font-family: "Gill Sans Extrabold", sans-serif; */ background-color: #ecfdf3; } #nav_heading { padding:10px; height: 50px; text-align: center; line-height: 50px; font-weight: bolder; font-size: 2.5rem; background-color: #fff; box-shadow: rgba(10, 160, 35, 0.15) 0px 48px 200px 0px; font-family: 'Roboto Slab', serif; } section{ height:calc(100vh - 70px); display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: rgba(42, 8, 234, 0.15) 0px 48px 100px 0px; } section .container{ display: flex; flex-direction: column; align-items: center; justify-content: center; width:500px; height:300px; border-radius: 1rem; background: #2cbc63; border: 2px solid #033510; } #heading{ /* margin-top:-1rem; */ font-size: 1.8rem; } #uploadDiv{ margin-top:2rem; width: 150px; height:70px; background-color:#fff; border: 2px solid #033510; border-radius: 0.5rem; line-height:70px; text-align: center; font-weight: 600; font-family: 'Roboto Slab', serif; box-shadow: rgba(0, 0, 0, 0.25) 0px 0.0625em 0.0625em, rgba(0, 0, 0, 0.25) 0px 0.125em 0.5em, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset; } #uploadDiv:hover{ cursor:pointer; } #uploadDiv:active{ transform: scale(0.95); }
console.log('yes') document.getElementById('uploadDiv').addEventListener('click', function() { let input = document.createElement('input'); input.type = 'file'; input.accept = 'image/*'; input.onchange = function(e) { let file = e.target.files[0]; let formData = new FormData(); formData.append('file', file); fetch('/upload', { method: 'POST', body: formData }) .then(response => response.text()) .then(result => { console.log(result); }) .catch(error => { console.error('Error:', error); }); }; input.click(); });