Upload 8 files

app.py

@@ -0,0 +1,70 @@
+from flask import Flask, render_template, request
+import joblib
+import numpy as np
+from sklearn import datasets
+import os
+
+app = Flask(__name__)
+
+# Load the model and iris dataset for target names
+print("Starting Iris Flower Classification Application...")
+try:
+    # Try loading the new model first, then fall back to the original model
+    if os.path.exists('new_iris_model.pkl'):
+        model = joblib.load('new_iris_model.pkl')
+        print("Successfully loaded new_iris_model.pkl")
+    else:
+        model = joblib.load('iris_model.pkl')
+        print("Successfully loaded iris_model.pkl")
+    
+    # Load iris dataset to get target names
+    iris = datasets.load_iris()
+    class_names = iris.target_names
+    print(f"Class names: {class_names}")
+    
+except Exception as e:
+    print(f"Error loading model or dataset: {e}")
+    # Fallback to class names if model fails to load
+    class_names = ['setosa', 'versicolor', 'virginica']
+    model = None
+
+@app.route('/')
+def form():
+    return render_template('form.html')
+
+@app.route('/predict', methods=['POST'])
+def predict():
+    try:
+        if model is None:
+            raise Exception("Model failed to load")
+            
+        # Get form values as float
+        features = [
+            float(request.form['sepal_length']),
+            float(request.form['sepal_width']),
+            float(request.form['petal_length']),
+            float(request.form['petal_width'])
+        ]
+        
+        # Make prediction
+        prediction = model.predict([features])[0]
+        
+        # Get the class name (flower species)
+        species = class_names[prediction]
+        
+        # Capitalize the species name for display
+        species_display = f"Iris {species}"
+        
+        # Print debug info
+        print(f"Input features: {features}")
+        print(f"Prediction: {prediction}, Species: {species_display}")
+        
+        return render_template('result.html', prediction=species_display)
+    
+    except Exception as e:
+        error_message = f"Error making prediction: {str(e)}"
+        print(error_message)
+        return render_template('result.html', prediction="Error: Could not make prediction", error=error_message)
+
+if __name__ == '__main__':
+    app.run(host="0.0.0.0", port=5000, debug=True)

iris_model.pkl

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

new_iris_model.pkl

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

requirements.txt

@@ -0,0 +1,3 @@
+flask
+numpy
+scikit-learn

static/flower-animation.css

@@ -0,0 +1,79 @@
+/* CSS for flower background animations */
+.flower-background {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: -2;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    opacity: 0.1;
+}
+
+.flower-particles {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: -1;
+    pointer-events: none;
+}
+
+.flower-particles::before {
+    content: '🌸';
+    position: absolute;
+    top: 10%;
+    left: 5%;
+    font-size: 1.5em;
+    animation: float 8s ease-in-out infinite;
+}
+
+.flower-particles::after {
+    content: '🌺';
+    position: absolute;
+    top: 70%;
+    right: 10%;
+    font-size: 1.2em;
+    animation: float 6s ease-in-out infinite reverse;
+}
+
+/* Additional floating flowers */
+.flower-extra {
+    position: fixed;
+    top: 40%;
+    left: 80%;
+    font-size: 1.8em;
+    animation: float 7s ease-in-out infinite;
+    z-index: -1;
+    pointer-events: none;
+}
+
+.flower-extra::before {
+    content: '🌷';
+}
+
+.flower-extra2 {
+    position: fixed;
+    top: 80%;
+    left: 20%;
+    font-size: 1.3em;
+    animation: float 5s ease-in-out infinite reverse;
+    z-index: -1;
+    pointer-events: none;
+}
+
+.flower-extra2::before {
+    content: '🌻';
+}
+
+@keyframes float {
+    0%, 100% { 
+        transform: translateY(0px) rotate(0deg); 
+        opacity: 0.7;
+    }
+    50% { 
+        transform: translateY(-20px) rotate(180deg); 
+        opacity: 1;
+    }
+}

templates/form.html

@@ -0,0 +1,174 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Iris Predictor</title>
+    <link rel="stylesheet" href="{{ url_for('static', filename='flower-animation.css') }}">
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            max-width: 600px;
+            margin: 0 auto;
+            padding: 20px;
+            background-color: #f5f5f5;
+            position: relative;
+            min-height: 100vh;
+        }
+        
+        .video-background {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            z-index: -1;
+            overflow: hidden;
+        }
+        
+        .video-background video {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+            opacity: 0.3;
+        }
+        
+        .video-background::after {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: rgba(255, 255, 255, 0.7);
+        }
+        h2 {
+            color: #4CAF50;
+            text-align: center;
+        }
+        form {
+            background-color: rgba(255, 255, 255, 0.95);
+            padding: 20px;
+            border-radius: 10px;
+            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
+            backdrop-filter: blur(10px);
+            border: 1px solid rgba(255, 255, 255, 0.2);
+        }
+        input[type="text"] {
+            width: 100%;
+            padding: 10px;
+            margin: 8px 0;
+            display: inline-block;
+            border: 1px solid #ccc;
+            border-radius: 4px;
+            box-sizing: border-box;
+        }
+        input[type="submit"] {
+            width: 100%;
+            background-color: #4CAF50;
+            color: white;
+            padding: 14px 20px;
+            margin: 8px 0;
+            border: none;
+            border-radius: 4px;
+            cursor: pointer;
+        }
+        input[type="submit"]:hover {
+            background-color: #45a049;
+        }
+        .note {
+            margin-top: 20px;
+            font-size: 0.9em;
+            color: #666;
+            background-color: rgba(255, 255, 255, 0.9);
+            padding: 15px;
+            border-radius: 8px;
+            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+        }
+        
+        .flower-animation {
+            position: absolute;
+            top: 20px;
+            right: 20px;
+            width: 60px;
+            height: 60px;
+            background: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIHZpZXdCb3g9IjAgMCA2MCA2MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGNpcmNsZSBjeD0iMzAiIGN5PSIzMCIgcj0iOCIgZmlsbD0iI0ZGRjIwMCIvPgo8cGF0aCBkPSJNMjIgMzBDMjIgMzQuNDE4IDI1LjU4MiAzOCAzMCAzOEMzNC40MTggMzggMzggMzQuNDE4IDM4IDMwIiBzdHJva2U9IiNGRjY5QjQiIHN0cm9rZS13aWR0aD0iNCIvPgo8cGF0aCBkPSJNMzAgMjJDMjUuNTgyIDIyIDIyIDI1LjU4MiAyMiAzMCIgc3Ryb2tlPSIjRkY2OUI0IiBzdHJva2Utd2lkdGg9IjQiLz4KPHBhdGggZD0iTTM4IDMwQzM4IDI1LjU4MiAzNC40MTggMjIgMzAgMjIiIHN0cm9rZT0iI0ZGNjlCNCIgc3Ryb2tlLXdpZHRoPSI0Ii8+CjxwYXRoIGQ9Ik0zMCAzOEMzNCA0MiAzNyA0MiAzOSA0MiIgc3Ryb2tlPSIjNENBRjUwIiBzdHJva2Utd2lkdGg9IjMiLz4KPC9zdmc+') no-repeat center center;
+            background-size: contain;
+            animation: rotate 3s linear infinite;
+        }
+        
+        @keyframes rotate {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+        
+        .floating-flowers {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            pointer-events: none;
+            z-index: -1;
+        }
+        
+        .floating-flowers::before {
+            content: '🌸';
+            position: absolute;
+            top: 20%;
+            left: 10%;
+            font-size: 2em;
+            animation: float 6s ease-in-out infinite;
+        }
+        
+        .floating-flowers::after {
+            content: '🌺';
+            position: absolute;
+            top: 60%;
+            right: 15%;
+            font-size: 1.5em;
+            animation: float 4s ease-in-out infinite reverse;
+        }
+        
+        @keyframes float {
+            0%, 100% { transform: translateY(0px); }
+            50% { transform: translateY(-20px); }
+        }
+    </style>
+</head>
+<body>
+    <!-- Background video -->
+    <div class="video-background">
+        <video autoplay muted loop>
+            <source src="{{ url_for('static', filename='videos/flowers.mp4') }}" type="video/mp4">
+            <source src="https://cdn.pixabay.com/video/2019/06/10/24170-342584456_large.mp4" type="video/mp4">
+            <!-- Fallback for browsers that don't support video -->
+            <source src="https://media.giphy.com/media/3o7TKQkJJj8PJMJJhK/giphy.gif" type="video/gif">
+        </video>
+    </div>
+    
+    <!-- Flower background -->
+    <div class="flower-background"></div>
+    
+    <!-- Floating flowers animation -->
+    <div class="floating-flowers"></div>
+    <div class="flower-extra"></div>
+    <div class="flower-extra2"></div>
+    
+    <!-- Animated flower icon -->
+    <div class="flower-animation"></div>
+    
+    <h2>🌸 Iris Flower Prediction 🌸</h2>
+    <form action="/predict" method="POST">
+        <input type="text" name="sepal_length" placeholder="Sepal Length (cm)" required><br>
+        <input type="text" name="sepal_width" placeholder="Sepal Width (cm)" required><br>
+        <input type="text" name="petal_length" placeholder="Petal Length (cm)" required><br>
+        <input type="text" name="petal_width" placeholder="Petal Width (cm)" required><br>
+        <input type="submit" value="Predict Flower Species">
+    </form>
+    <div class="note">
+        <p><strong>Example values:</strong></p>
+        <p>Setosa: Sepal Length=5.1, Sepal Width=3.5, Petal Length=1.4, Petal Width=0.2</p>
+        <p>Versicolor: Sepal Length=6.0, Sepal Width=2.7, Petal Length=4.2, Petal Width=1.3</p>
+        <p>Virginica: Sepal Length=6.8, Sepal Width=3.0, Petal Length=5.5, Petal Width=2.1</p>
+    </div>
+</body>
+</html>

templates/result.html

@@ -0,0 +1,188 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Prediction Result</title>
+    <link rel="stylesheet" href="{{ url_for('static', filename='flower-animation.css') }}">
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            max-width: 600px;
+            margin: 0 auto;
+            padding: 20px;
+            background-color: #f5f5f5;
+            position: relative;
+            min-height: 100vh;
+        }
+        
+        .video-background {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            z-index: -1;
+            overflow: hidden;
+        }
+        
+        .video-background video {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+            opacity: 0.3;
+        }
+        
+        .video-background::after {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: rgba(255, 255, 255, 0.7);
+        }
+        
+        .result-container {
+            background-color: rgba(255, 255, 255, 0.95);
+            padding: 20px;
+            border-radius: 10px;
+            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
+            text-align: center;
+            backdrop-filter: blur(10px);
+            border: 1px solid rgba(255, 255, 255, 0.2);
+        }
+        h2 {
+            color: #4CAF50;
+        }
+        .prediction {
+            font-size: 24px;
+            color: #333;
+            margin: 20px 0;
+        }
+        .back-btn {
+            display: inline-block;
+            background-color: #4CAF50;
+            color: white;
+            padding: 10px 20px;
+            text-decoration: none;
+            border-radius: 4px;
+            margin-top: 20px;
+        }
+        .back-btn:hover {
+            background-color: #45a049;
+        }
+        .flower-info {
+            margin-top: 20px;
+            text-align: left;
+            padding: 15px;
+            background-color: rgba(249, 249, 249, 0.9);
+            border-radius: 8px;
+        }
+        .error {
+            color: #D8000C;
+            background-color: rgba(255, 210, 210, 0.9);
+            padding: 10px;
+            border-radius: 5px;
+            margin: 10px 0;
+            text-align: left;
+        }
+        
+        .floating-flowers {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            pointer-events: none;
+            z-index: -1;
+        }
+        
+        .floating-flowers::before {
+            content: '🌸';
+            position: absolute;
+            top: 20%;
+            left: 10%;
+            font-size: 2em;
+            animation: float 6s ease-in-out infinite;
+        }
+        
+        .floating-flowers::after {
+            content: '🌺';
+            position: absolute;
+            top: 60%;
+            right: 15%;
+            font-size: 1.5em;
+            animation: float 4s ease-in-out infinite reverse;
+        }
+        
+        @keyframes float {
+            0%, 100% { transform: translateY(0px); }
+            50% { transform: translateY(-20px); }
+        }
+    </style>
+</head>
+<body>
+    <!-- Background video -->
+    <div class="video-background">
+        <video autoplay muted loop>
+            <source src="{{ url_for('static', filename='videos/flowers.mp4') }}" type="video/mp4">
+            <source src="https://cdn.pixabay.com/video/2019/06/10/24170-342584456_large.mp4" type="video/mp4">
+            <!-- Fallback for browsers that don't support video -->
+            <source src="https://media.giphy.com/media/3o7TKQkJJj8PJMJJhK/giphy.gif" type="video/gif">
+        </video>
+    </div>
+    
+    <!-- Flower background -->
+    <div class="flower-background"></div>
+    
+    <!-- Floating flowers animation -->
+    <div class="floating-flowers"></div>
+    <div class="flower-extra"></div>
+    <div class="flower-extra2"></div>
+    
+    <div class="result-container">
+        <h2>🌸 Prediction Result 🌸</h2>
+        
+        {% if error %}
+        <div class="error">
+            <p>{{ error }}</p>
+            <p>Please try again with different values or contact support.</p>
+        </div>
+        {% else %}
+        <div class="prediction">
+            The predicted flower is: <strong>{{ prediction }}</strong>
+        </div>
+        
+        {% if 'setosa' in prediction.lower() %}
+        <div class="flower-info">
+            <p><strong>Iris setosa</strong> is known for its:</p>
+            <ul>
+                <li>Small petal size</li>
+                <li>Distinctive blue-green foliage</li>
+                <li>Native to North America and eastern Asia</li>
+            </ul>
+        </div>
+        {% elif 'versicolor' in prediction.lower() %}
+        <div class="flower-info">
+            <p><strong>Iris versicolor</strong> is known for its:</p>
+            <ul>
+                <li>Medium-sized flowers</li>
+                <li>Blue to purple coloration</li>
+                <li>Native to eastern North America</li>
+            </ul>
+        </div>
+        {% elif 'virginica' in prediction.lower() %}
+        <div class="flower-info">
+            <p><strong>Iris virginica</strong> is known for its:</p>
+            <ul>
+                <li>Large petal size</li>
+                <li>Violet blue to purple coloration</li>
+                <li>Native to eastern North America</li>
+            </ul>
+        </div>
+        {% endif %}
+        {% endif %}
+        
+        <a href="/" class="back-btn">Make Another Prediction</a>
+    </div>
+</body>
+</html>