Integrate trained DenseNet model with modular Flask application

.gitattributes

@@ -33,3 +33,4 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+model/model_dense121.keras filter=lfs diff=lfs merge=lfs -text

app.py

@@ -0,0 +1,78 @@
+import os
+from flask import Flask , render_template, request, redirect, url_for, flash
+from tensorflow.keras.models import load_model
+from tensorflow.keras.preprocessing.image import load_img, img_to_array
+from tensorflow.keras.applications.densenet import preprocess_input
+from utils.allowed_file import allowed_file
+from utils.upload_file import upload_file
+
+import numpy as np
+
+
+app  =  Flask(__name__)
+
+app.config['UPLOAD_FOLDER'] = 'static/uploads'
+os.makedirs(app.config['UPLOAD_FOLDER'], exist_ok=True)
+
+
+MODEL_PATH = os.path.join('model', 'model_dense121.keras')
+model = load_model(MODEL_PATH)
+
+
+CLASSES_NAME = [
+    'Downdog',
+    'Goddess', 
+    'Plank', 
+    'Tree', 
+    'Warrior2'
+]
+
+
+# routes
+
+@app.route('/', methods = ['GET', 'POST'])
+
+def index():
+    if request.method == 'POST':
+        file = request.files.get('file')
+        if file and allowed_file(file.filename):
+            filepath = os.path.join(app.config['UPLOAD_FOLDER'], file.filename)
+            file.save(filepath)
+            
+            
+            # preprocess
+            img = load_img(filepath, target_size=(224, 224))
+            x = img_to_array(img)
+            x = np.expand_dims(x, axis=0)
+            x = preprocess_input(x)
+            # predict
+            preds = model.predict(x)
+            idx = np.argmax(preds[0])
+            label = CLASSES_NAME[idx]
+            confidence = preds[0][idx]
+
+
+            return render_template('index.html',
+                                    filename = file.filename,
+                                    label = label,
+                                    confidence = f"{confidence*100:.1f}%"
+
+                                   )
+        
+        return redirect(request.url)
+    
+    return render_template('index.html')
+
+
+@app.route('/uploads/<filename>')
+
+def uploaded_file(filename):
+    return upload_file(filename)
+
+
+
+if __name__ == '__main__':
+    app.run(host='0.0.0.0', port = 8080, debug = True)
+
+
+

model/model_dense121.keras

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:a22c36fc84c250f407e5b711cd6a5dcb354d1814fa3da92a50ccd2919b6c83c1
+size 68209499

requirement.txt

@@ -0,0 +1,4 @@
+tensorflow
+Flask
+numpy
+pillow

static/css/style.css

@@ -0,0 +1,174 @@
+/* ========== GLOBAL ========== */
+body {
+    font-family: 'Poppins', sans-serif;
+    background: radial-gradient(circle at top, #1a1a1a, #000);
+    color: #eee;
+    margin: 0;
+    padding: 0;
+    text-align: center;
+}
+
+html, body {
+    height: 100%;
+    margin: 0;
+    padding: 0;
+}
+
+/* Flex container for sticky footer */
+.page-container {
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh; /* full viewport height */
+}
+
+/* Content area grows and pushes footer down */
+.content-wrap {
+    flex: 1;
+}
+
+/* ========== HEADER ========== */
+header {
+    background: linear-gradient(90deg, #6a00f4, #b300ff);
+    color: white;
+    padding: 30px 10px;
+    box-shadow: 0 4px 10px rgba(0,0,0,0.5);
+}
+
+header h1 {
+    font-size: 2.2em;
+    margin-bottom: 5px;
+}
+
+header p {
+    font-size: 1.1em;
+    opacity: 0.9;
+}
+
+/* ========== UPLOAD SECTION ========== */
+.upload-container {
+    margin-top: 40px;
+}
+
+.upload-label {
+    background-color: #2e2e2e;
+    border: 2px dashed #6a00f4;
+    border-radius: 10px;
+    padding: 20px;
+    display: inline-block;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    color: #aaa;
+}
+
+.upload-label:hover {
+    background-color: #3b3b3b;
+    border-color: #b300ff;
+    color: white;
+}
+
+.upload-label span {
+    display: block;
+    margin-bottom: 10px;
+    font-size: 1.1em;
+}
+
+input[type="file"] {
+    display: none;
+}
+
+button {
+    margin-top: 20px;
+    background: linear-gradient(90deg, #6a00f4, #b300ff);
+    color: white;
+    border: none;
+    padding: 12px 30px;
+    border-radius: 30px;
+    font-size: 1em;
+    cursor: pointer;
+    transition: 0.3s ease;
+    box-shadow: 0 0 10px #6a00f4;
+}
+
+button:hover {
+    transform: scale(1.05);
+    box-shadow: 0 0 20px #b300ff;
+}
+
+/* ========== RESULT SECTION ========== */
+.result-container {
+    margin-top: 50px;
+    padding: 20px;
+    background-color: #121212;
+    border-radius: 15px;
+    display: inline-block;
+    box-shadow: 0 0 20px rgba(106,0,244,0.4);
+}
+
+.uploaded-img {
+    max-width: 300px;
+    border-radius: 15px;
+    margin-top: 15px;
+    box-shadow: 0 0 15px rgba(179,0,255,0.6);
+}
+
+.result-text, .result-confidence {
+    margin-top: 15px;
+    font-size: 1.2em;
+    color: #c59fff;
+}
+
+/* ========== FOOTER ========== */
+footer {
+    background: #111;
+    color: #888;
+    padding: 20px;
+    font-size: 0.9em;
+    text-align: center;
+}
+
+/* ========== TOAST NOTIFICATION ========== */
+.toast {
+    visibility: hidden;
+    min-width: 250px;
+    background-color: #6a00f4;
+    color: white;
+    text-align: center;
+    border-radius: 8px;
+    padding: 15px 20px;
+    position: fixed;
+    top: 20px;
+    right: 20px;
+    z-index: 1000;
+    font-size: 1em;
+    box-shadow: 0 0 15px rgba(179, 0, 255, 0.6);
+    opacity: 0;
+    transform: translateY(-30px);
+    transition: opacity 0.5s, transform 0.5s;
+}
+
+.toast.show {
+    visibility: visible;
+    opacity: 1;
+    transform: translateY(0);
+}
+
+
+/* Clear button styles, explicitly matching Predict button */
+#clearBtn {
+    margin-top: 20px;
+    background: #3e3e3e; /* Greyish background, only difference */
+    color: white;
+    border: none;
+    padding: 12px 30px;
+    border-radius: 30px;
+    font-size: 1em;
+    cursor: pointer;
+    transition: 0.3s ease;
+    box-shadow: 0 0 10px #6a00f4;
+}
+
+
+#clearBtn:hover {
+    transform: scale(1.05);
+    box-shadow: 0 0 20px #b300ff;
+}

templates/index.html

@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Yoga Pose Classifier</title>
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
+</head>
+<body>
+    <div class="page-container">
+
+        <!-- Toast Notification -->
+        <div id="toast" class="toast">✅ Image selected successfully!</div>
+
+        <header>
+            <h1>🧘 Yoga Pose Classifier</h1>
+            <p>Upload your yoga pose image to identify its type.</p>
+        </header>
+
+
+        <main class="content-wrap">
+
+            <div class="upload-container">
+                <form method="POST" enctype="multipart/form-data" id="uploadForm">
+                    <label class="upload-label">
+                        <span id="choose-text">Choose an Image</span>
+                        <input type="file" name="file" accept="image/*" required id="fileInput">
+                    </label>
+                    <p id="upload-msg" style="color: #6a00f4; margin-top: 10px; display: none;">
+                        ✅ Image selected!
+                    </p>
+                    <button type="submit"  style="margin-left: 5px;">Predict Pose</button>
+                </form>
+            </div>
+
+            {% if filename %}
+            <div class="result-container">
+                <h2>Prediction Result</h2>
+                <img src="{{ url_for('static', filename='uploads/' + filename) }}" alt="Uploaded Image" class="uploaded-img">
+                <p class="result-text"><strong>Pose:</strong> {{ label }}</p>
+                <p class="result-confidence"><strong>Confidence:</strong> {{ confidence }}</p>
+            </div>
+            {% endif %}
+            <p> </p>
+            <p> </p>
+        </main>
+
+        <footer>
+            <p>Made with 💜 using DenseNet121 | © 2025 Yoga Pose Classifier</p>
+        </footer>
+    </div>
+
+    <script>
+        const fileInput = document.getElementById('fileInput');
+        const toast = document.getElementById('toast');
+
+        fileInput.addEventListener('change', () => {
+            if (fileInput.files.length > 0) {
+                toast.classList.add('show');
+
+                // Hide after 3 seconds
+                setTimeout(() => {
+                    toast.classList.remove('show');
+                }, 3000);
+            }
+        });
+    </script>
+</body>
+</html>

utils/allowed_file.py

@@ -0,0 +1,4 @@
+def allowed_file(filename):
+    return '.' in filename and \
+            filename.rsplit('.',1)[1].lower() in {'png', 'jpg', 'jpeg', 'gif'}
+

utils/upload_file.py

@@ -0,0 +1,4 @@
+from flask import redirect, url_for
+
+def upload_file(filename):
+    return redirect(url_for('static', filename= f'uploads/{filename}'))