Templates/lasso.html

{% extends "layout.html" %}

{% block content %}

<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>

<link rel="stylesheet" href="{{ url_for('static', filename='output.css') }}">
 <script src="https://cdn.tailwindcss.com"></script>
<script id="MathJax-script" async
  src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<div class="max-w-3xl mx-auto mt-12 p-8 bg-white rounded-2xl shadow-xl border border-gray-100">
    <h1 class="text-4xl font-extrabold text-gray-900 mb-6 flex items-center">
        <span class="mr-3 text-blue-600">🧲</span> Lasso Regression Predictions
    </h1>

    <p class="text-lg text-gray-700 mb-8 leading-relaxed">
        Unlock the power of <strong>Lasso Regression (L1 Regularization)</strong> to make accurate predictions.
        This technique helps prevent overfitting and performs <strong>automatic feature selection</strong>, leading to simpler and more robust models.
    </p>

    <form method="POST" class="space-y-6 bg-gray-50 p-6 rounded-lg shadow-inner" id="predictionForm">
        <h2 class="text-2xl font-semibold text-gray-800 mb-4">Input Features</h2>
        {% for field in ['OverallQual', 'GrLivArea', 'GarageCars', 'TotalBsmtSF', 'YearBuilt'] %}
        <div>
            <label for="{{ field }}" class="block text-md font-medium text-gray-700 mb-1">
                {{ field | replace('OverallQual', 'Overall Quality') | replace('GrLivArea', 'Above Ground Living Area (sq ft)') | replace('GarageCars', 'Size of Garage (cars)') | replace('TotalBsmtSF', 'Total Basement Area (sq ft)') | replace('YearBuilt', 'Year Built') }}:
            </label>
            <input type="number" step="any" id="{{ field }}" name="{{ field }}" required
                   class="w-full border-gray-300  input-glow rounded-md shadow-sm focus:border-blue-500 focus:ring-blue-500 text-lg p-2.5 transition duration-200 ease-in-out hover:border-blue-400"
                   placeholder="Enter value for {{ field | replace('OverallQual', 'Overall Quality') | replace('GrLivArea', 'sq ft') | replace('GarageCars', 'cars') | replace('TotalBsmtSF', 'sq ft') | replace('YearBuilt', 'year') }}">
        </div>
        
        {% endfor %}
        <button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-4 rounded-lg transition duration-300 ease-in-out transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
            <span class="mr-2">🔍</span> Predict House Price
        </button>
        <div id="loadingSpinner" class="hidden text-center mt-4">
            <span class="loader"></span> Processing...
        </div>
    </form>

    {% if prediction %}
    <div class="mt-8 bg-green-50 border border-green-200 text-green-800 font-extrabold text-2xl p-5 rounded-lg flex items-center justify-center animate-fadeIn">
        <span class="mr-3">🏠</span> Predicted Price: <span class="text-green-700 ml-2">${{ "%.2f" | format(prediction | float) }}</span>
    </div>
    {% elif error %}
    <div class="mt-8 bg-red-50 border border-red-200 text-red-800 font-semibold text-lg p-5 rounded-lg flex items-center justify-center animate-shake">
        <span class="mr-3">⚠️</span> Error: {{ error }} Please check your inputs.
    </div>
    {% endif %}
</div>

<div class="max-w-3xl mx-auto mt-12 p-8 bg-blue-50 rounded-2xl shadow-xl border border-blue-200">
    <h2 class="text-3xl font-extrabold text-blue-900 mb-6 flex items-center">
        <span class="mr-3 text-blue-600">📚</span> Deep Dive into Lasso Regression
    </h2>

    <p class="text-blue-800 mb-4 leading-relaxed">
        Lasso Regression, or <strong>Least Absolute Shrinkage and Selection Operator</strong>, is a powerful extension of linear regression. It introduces <strong>L1 Regularization</strong> to penalize large coefficients, making models more interpretable and robust.
    </p>

    <div class="bg-blue-100 p-5 rounded-lg mb-6 border border-blue-200">
        <h3 class="text-xl font-semibold text-blue-900 mb-3">🎯 Objective Function:</h3>
        <p class="text-blue-800 text-lg mb-2">
            The cost function that Lasso tries to minimize is:
        </p>
        <strong class="text-blue-900 text-xl bg-blue-200 px-4 py-3 rounded-md font-mono text-center mb-4 block">
            $$ J(\theta) = \frac{1}{2n} \sum_{i=1}^{n} (h_{\theta}(x^{(i)}) - y^{(i)})^2 + \lambda \sum_{j=1}^{p} |\theta_j| $$
        </strong>
        <ul class="list-disc list-inside text-blue-800 mt-4 pl-6 space-y-3">
            <li><strong>Mean Squared Error (MSE):</strong><br>
                <strong class="text-blue-900 text-xl bg-blue-200 px-4 py-3 rounded-md font-mono text-center mb-2 inline-block">
                    $$ \frac{1}{2n} \sum_{i=1}^{n} (h_{\theta}(x^{(i)}) - y^{(i)})^2 $$
                </strong>
                Measures how well the model's predictions align with true values.
            </li>
            <li><strong>L1 Regularization:</strong><br>
                <strong class="text-blue-900 text-xl bg-blue-200 px-4 py-3 rounded-md font-mono text-center mb-2 inline-block">
                    $$ \lambda \sum_{j=1}^{p} |\theta_j| $$
                </strong>
                Penalizes model complexity. Encourages sparsity by setting some coefficients exactly to zero.
            </li>
        </ul>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
        <div class="bg-blue-100 p-5 rounded-lg border border-blue-200">
            <h3 class="text-xl font-semibold text-blue-900 mb-3 flex items-center">
                <span class="mr-2 text-green-600">🌱</span> Benefits of Lasso
            </h3>
            <ul class="list-disc list-inside text-blue-800 space-y-2">
                <li><strong>Feature Selection:</strong> Sets irrelevant feature coefficients to 0</li>
                <li><strong>Prevents Overfitting:</strong> Penalizes large weights</li>
                <li><strong>Simplifies Models:</strong> Creates more interpretable solutions</li>
            </ul>
        </div>
        <div class="bg-blue-100 p-5 rounded-lg border border-blue-200">
            <h3 class="text-xl font-semibold text-blue-900 mb-3 flex items-center">
                <span class="mr-2 text-yellow-500">⚖️</span> Lasso vs Ridge
            </h3>
            <ul class="list-disc list-inside text-blue-800 space-y-2">
                <li><strong>Ridge (L2):</strong> Shrinks coefficients but rarely to zero</li>
                <li><strong>Lasso (L1):</strong> Shrinks some coefficients to exact zero</li>
                <li><strong>Elastic Net:</strong> Combines L1 + L2 regularization</li>
            </ul>
        </div>
    </div>

    <p class="text-blue-800 mb-4 leading-relaxed">
        Lasso shines in high-dimensional spaces with many features, especially when many of them are irrelevant. It's widely used in finance, bioinformatics, real estate, and more.
    </p>

    <h3 class="text-2xl font-semibold text-blue-900 mt-8 mb-4 flex items-center">
        <span class="mr-2 text-purple-600">📊</span> Suggested Visualizations:
    </h3>
    <p class="text-blue-800 mb-6">
        While direct implementation here is limited, these are powerful visualizations to understand Lasso:
    </p>
    <ul class="list-disc list-inside text-blue-800 space-y-3 pl-4">
        <li><strong>Coefficient Path Plot:</strong> Shows how coefficients shrink as $ \lambda $ increases.</li>
        <li><strong>Prediction vs Actual:</strong> Scatter plot to visualize accuracy.</li>
        <li><strong>Residuals Plot:</strong> Diagnoses model bias.</li>
        <li><strong>Interactive $ \lambda $ Slider:</strong> Great for learning effect of regularization.</li>
    </ul>
    <p class="text-blue-800 mt-4 italic">
        (Visualizations would require integration with JavaScript libraries like Chart.js/D3.js in separate `.js` files, receiving data from your backend.)
    </p>
</div>
<div class="max-w-3xl mx-auto mt-12 p-8 bg-white rounded-2xl shadow-lg border border-gray-200">
    <h2 class="text-3xl font-extrabold text-blue-900 mb-6 flex items-center">
        <span class="mr-3 text-blue-600">🔄</span> How Lasso Treats Your Data
    </h2>

    <p class="text-blue-800 mb-6 leading-relaxed">
        Lasso applies <strong>L1 regularization</strong> to shrink some feature coefficients all the way to <code>0</code>. 
        This means those features are <strong>completely ignored</strong> in the final prediction! Here's how it flows:
    </p>

    <!-- Flow visualization -->
    <div class="grid gap-8 md:grid-cols-5 items-center text-center text-blue-700 font-semibold text-sm">
        <!-- Step 1: Input -->
        <div class="p-4 bg-blue-100 border rounded-lg shadow">
            <div class="text-4xl mb-2">📥</div>
            <div>Input Features</div>
            <div class="text-xs mt-1 text-blue-500">GrLivArea, GarageCars, etc.</div>
        </div>

        <!-- Arrow -->
        <div class="text-2xl text-blue-400 hidden md:block">➡️</div>

        <!-- Step 2: Cost Function -->
        <div class="p-4 bg-blue-100 border rounded-lg shadow">
            <div class="text-4xl mb-2">⚙️</div>
            <div>Cost Function</div>
            <div class="text-xs mt-1 text-blue-500">MSE + λ × ∑|θᵢ|</div>
        </div>

        <!-- Arrow -->
        <div class="text-2xl text-blue-400 hidden md:block">➡️</div>

        <!-- Step 3: Shrink Coefficients -->
        <div class="p-4 bg-yellow-100 border rounded-lg shadow">
            <div class="text-4xl mb-2">📉</div>
            <div>Shrinks Weights</div>
            <div class="text-xs mt-1 text-yellow-600">Some θᵢ → 0</div>
        </div>

        <!-- Arrow -->
        <div class="text-2xl text-blue-400 hidden md:block">➡️</div>

        <!-- Step 4: Sparse Model -->
        <div class="p-4 bg-green-100 border rounded-lg shadow">
            <div class="text-4xl mb-2">🧹</div>
            <div>Sparse Output</div>
            <div class="text-xs mt-1 text-green-600">Only key features used</div>
        </div>
    </div>

    <p class="text-blue-800 mt-6 leading-relaxed text-sm">
        This process leads to a <strong>simpler model</strong> by automatically performing feature selection.
        Irrelevant or less important features will have <code>zero</code> weight and won't impact the prediction.
    </p>
</div>
<div class="bg-white mt-12 p-8 rounded-2xl shadow-xl border border-yellow-300">
    <h2 class="text-3xl font-extrabold text-yellow-800 mb-6 flex items-center">
        <span class="mr-3">✂️</span> Lasso Regression Made Easy (Story Style)
    </h2>

    <p class="text-yellow-900 leading-relaxed text-lg mb-6">
        Imagine again you're predicting house price, and you have 5 friends giving opinions:<br>
        <strong>Quality, Living Area, Garage, Basement, and Year Built.</strong>  
        But this time, you're tired of too much noise. You want only the <em>really useful voices</em>.
    </p>

    <div class="grid md:grid-cols-3 gap-6 text-center text-yellow-800 text-base font-medium">
        <div class="bg-yellow-50 p-4 rounded-lg border border-yellow-200 shadow hover:shadow-lg transition">
            <div class="text-4xl mb-2">🗣️</div>
            <p><strong>Without Lasso</strong><br>All friends talk — some help, some just add noise.</p>
        </div>

        <div class="text-4xl text-yellow-400 hidden md:block animate-pulse">➡️</div>

        <div class="bg-yellow-50 p-4 rounded-lg border border-yellow-200 shadow hover:shadow-lg transition">
            <div class="text-4xl mb-2">✂️</div>
            <p><strong>With Lasso</strong><br>Lasso listens carefully, then <strong>mutes unhelpful friends</strong> (sets their coefficient to 0).</p>
        </div>

        <div class="text-4xl text-yellow-400 hidden md:block animate-pulse">➡️</div>

        <div class="bg-green-50 p-4 rounded-lg border border-green-200 shadow hover:shadow-lg transition">
            <div class="text-4xl mb-2">✅</div>
            <p><strong>Result</strong><br>You get a <strong>simpler model</strong> using only the most useful features. Less noise, better clarity.</p>
        </div>
    </div>

    <p class="mt-6 text-yellow-800 leading-relaxed text-base">
        🔍 Lasso helps with **feature selection**: It completely removes less useful features by giving them a weight (coefficient) of exactly <code>0</code>.<br>
        🎯 This is perfect when you want a **sparse, focused model**.
    </p>

    <p class="mt-4 text-sm italic text-yellow-600">
        (Unlike Ridge, Lasso doesn't shrink everyone — it just *removes* the ones that don’t matter!)
    </p>
</div>



<!-- 📈 Interactive Visualizations -->
<div class="max-w-4xl mx-auto mt-12 space-y-12">
    
    <!-- Coefficient Path Plot -->
    <div class="bg-white p-6 rounded-lg shadow-md border border-gray-200 ">
        <h3 class="text-2xl font-semibold mb-4 text-gray-800">📉 Coefficient Path</h3>
        <div class="h-[600px]">
            <canvas id="coefficientPathChart" height="600"></canvas>
        </div>
    </div>

    <!-- Feature Importance Chart -->
    <div class="bg-white p-6 rounded-lg shadow-md border border-gray-200">
        <h3 class="text-2xl font-semibold mb-4 text-gray-800">💡 Feature Importance</h3>
        <div class="h-[600px]">
            <canvas id="featureImportanceChart"height="600"></canvas>
        </div>
    </div>

    <!-- Predicted vs Actual Chart -->
    <div class="bg-white p-6 rounded-lg shadow-md border border-gray-200">
        <h3 class="text-2xl font-semibold mb-4 text-gray-800">🎯 Predicted vs Actual</h3>
        <div class="h-[600px]">
            <canvas id="predictionActualChart" height="600"></canvas>
        </div>
    </div>

</div>



<script src="{{ url_for('static', filename='js/lasso_charts.js') }}"></script>

{% endblock %}

<style>
/* Custom animations for better user feedback */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
.animate-fadeIn {
    animation: fadeIn 0.5s ease-out forwards;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
    20%, 40%, 60%, 80% { transform: translateX(5px); }
}
.animate-shake {
    animation: shake 0.5s ease-in-out;
}

.loader {
    border: 4px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top: 4px solid #3498db;
    width: 30px;
    height: 30px;
    animation: spin 1s linear infinite;
    display: inline-block; /* To align with text */
    vertical-align: middle; /* To align with text */
    margin-right: 8px; /* Space between spinner and text */
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
</style>