.gif)
Build an image classifier web app with Flask using our step-by-step guide. Boost your coding and machine learning skills now!
Book a call with an Expert
Starting a new venture? Need to upgrade your web app? RapidDev builds application with your growth in mind.
.png)
.png)
app.py file for the Flask server logic, a folder called templates for the HTML files, and a folder called static for any CSS, JavaScript, or image assets.
model.h5 that has been pre-trained on your data.
// Import necessary modules for AI/ML functionality
from tensorflow.keras.models import load\_model
import numpy as np
import cv2 // OpenCV for image processing
// Load the pre-trained model once
model = load\_model('model.h5')
// Import necessary modules from Flask
from flask import Flask, render_template, request, redirect, url_for
app = Flask(**name**)
// Home route to render upload page
@app.route('/')
def index():
return render\_template('index.html')
// POST route to process the uploaded image
@app.route('/predict', methods=['POST'])
def predict():
if 'file' not in request.files:
return redirect(url\_for('index'))
file = request.files['file']
if file.filename == '':
return redirect(url\_for('index'))
// Read the image file in memory and convert to array
file\_bytes = np.asarray(bytearray(file.read()), dtype=np.uint8)
img = cv2.imdecode(file_bytes, cv2.IMREAD_COLOR)
// Pre-process the image: Resize and normalize
img\_resized = cv2.resize(img, (224, 224)) // Assuming model requires 224x224 input
img_array = np.expand_dims(img\_resized, axis=0) / 255.0 // Normalize pixel values
// Get the prediction from the model
prediction = model.predict(img\_array)
// Convert the prediction to a readable class label.
// For example, if your model is a classifier with multiple classes:
class\_index = np.argmax(prediction)
confidence = prediction\[0]\[class\_index]
return render_template('result.html', prediction=class_index, confidence=confidence)
if **name** == '**main**':
app.run(debug=True)
/_ File: templates/index.html _/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Classifier</title>
</head>
<body>
<h2>Upload an Image to Classify</h2>
<form action="/predict" method="POST" enctype="multipart/form-data">
<input type="file" name="file" accept="image/\*" required>
<input type="submit" value="Classify">
</form>
</body>
</html>
/_ File: templates/result.html _/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Prediction Results</title>
</head>
<body>
<h2>Prediction Results</h2>
<p>Predicted Class: <b>{{ prediction }}</b></p>
<p>Confidence: <b>{{ confidence \* 100 | round(2) }}%</b></p>
<a href="{{ url\_for('index') }}">Try Another Image</a>
</body>
</html>
index.html template includes form attributes such as enctype="multipart/form-data" which is required for file uploads.result.html uses Jinja templating to display variables passed from the Flask route.
imdecode function.np.argmax from the model's output array.
img\_array.shape) and ensure it matches the input dimensions expected by the model.
// Example of logging intermediate output
print("Image shape:", img\_array.shape)
print("Prediction output:", prediction)
From startups to enterprises and everything in between, see for yourself our incredible impact.
They do complex work on extremely fast timelines and effectively manage the testing and pre-launch process to deliver the best possible product. I'm extremely impressed with their execution ability.
