Upload 6 files

.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
+static/favicon.png filter=lfs diff=lfs merge=lfs -text

.gitignore

@@ -0,0 +1,4 @@
+MBTI_Report.pdf
+ML_Project_Presentation_Slide_Titles.pdf
+ML_Project_Report_Format.pdf
+vertopal.com_mbti-personality.pdf

static/style.css

@@ -0,0 +1,218 @@
+body {
+    background: #f8f9fa;
+    font-family: 'Montserrat', 'Inter', Arial, sans-serif;
+    color: #222;
+    min-height: 100vh;
+}
+
+.glass-container {
+    background: rgba(255,255,255,0.99);
+    border-radius: 28px;
+    box-shadow: 0 8px 32px 0 rgba(120,116,100,0.08);
+    padding: 3rem 2rem;
+    margin: 4rem auto;
+    max-width: 680px;
+    border: 1.2px solid #ece3c2;
+}
+
+.header h1 {
+    font-family: 'Playfair Display', serif;
+    font-size: 2.2rem;
+    color: #e8c77a;
+    font-weight: 900;
+    margin-bottom: 0.5rem;
+    letter-spacing: 2px;
+}
+.subtitle {
+    color: #565458;
+    font-weight: 600;
+    font-size: 1.17rem;
+    letter-spacing: 1px;
+    margin-bottom: 1.8rem;
+}
+.mcq-section {margin-bottom: 2.2rem;}
+.input-group.mcq-options {
+    margin-bottom: 1.45rem;
+}
+.input-group label {
+    font-family: 'Montserrat', sans-serif;
+    font-size: 1.14rem;
+    color: #222;
+    font-weight: 700;
+    margin-bottom: 8px;
+    display: block;
+}
+.input-group label b {
+    color: #d3a63c;
+    font-weight: 800;
+}
+.mcq-row {
+    display: flex;
+    gap: 1.2rem;
+    margin-top: 0.36rem;
+    justify-content: flex-start;
+}
+.mcq-row label {
+    flex: 1;
+    color: #95702b;
+    font-weight: 500;
+    background: rgba(232,203,84,0.08);
+    border-radius: 12px;
+    padding: 0.8rem 0.4rem;
+    border: 1.3px solid #efecc7;
+    box-shadow: 0 1px 4px #e8c77a18 inset;
+    transition: background 0.15s, box-shadow 0.17s, border 0.15s;
+    text-align: center;
+    cursor: pointer;
+}
+.mcq-row input[type="radio"] {
+    accent-color: #222;
+    width: 18px;
+    height: 18px;
+    vertical-align: middle;
+    margin-right: 0.4em;
+}
+.mcq-row label:hover,
+.mcq-row label:active {
+    background: #fff6db;
+    color: #111;
+    border: 1.8px solid #e8c77a;
+    box-shadow: 0 5px 14px #e8c77a44;
+}
+.mcq-row input[type="radio"]:checked + span,
+.mcq-row input[type="radio"]:checked ~ label {
+    color: #222;
+    font-weight: 700;
+    background: #fffbe6;
+    border: 1.8px solid #b79818;
+}
+
+.next-btn, .predict-btn, .glass-btn {
+    background: linear-gradient(90deg,#fffecd 0%,#e8c77a 100%);
+    color: #3b3020;
+    font-family: 'Montserrat',sans-serif;
+    font-weight: 700;
+    border-radius: 18px;
+    border: none;
+    padding: 1.07rem 2rem;
+    box-shadow: 0 2px 18px #e8c77a38;
+    font-size: 1.13rem;
+    letter-spacing: 1px;
+    margin-top: 18px;
+    margin-bottom: 8px;
+    transition: background 0.14s, box-shadow 0.16s;
+    cursor:pointer;
+}
+.next-btn:hover, .glass-btn:hover, .predict-btn:hover {
+    background: linear-gradient(90deg,#fffbe6 10%, #e8c77a 90%);
+    color: #bf953f;
+    box-shadow: 0 0px 24px #e8c77a39;
+}
+
+.result-card {
+    background: rgba(255,255,255,0.97);
+    border-radius: 18px;
+    box-shadow: 0 6px 28px #ecc16a18;
+    padding: 2.1rem 1.2rem 2.7rem 1.2rem;
+    margin-top: 1.2rem;
+    border: 1.3px solid #ffeecd;
+    text-align: center;
+}
+.mbti-type {
+    font-family: 'Playfair Display', serif;
+    font-size: 2.1rem;
+    color: #e8c77a;
+    font-weight: 900;
+    margin-bottom: 1.3rem;
+    letter-spacing: 2px;
+}
+.mbti-description {
+    color: #222;
+    margin-bottom: 1.4rem;
+    font-size:1.04rem;
+    font-weight: 400;
+    letter-spacing: .8px;
+}
+.prob-bar {
+    background: #f8f3cf;
+    border-radius: 11px;
+    height: 16px;
+    box-shadow: 0 1px 4px #e8c77a18 inset;
+    position: relative;
+    margin: 2px 0;
+}
+.prob-fill {
+    height: 100%;
+    background: linear-gradient(90deg,#ecc16a 80%,#fffecd 100%);
+    border-radius: 11px;
+    transition: width 0.6s;
+}
+.prob-value {
+    font-weight: 700;
+    color: #b79818;
+    text-shadow: 1px 1px 2px #ffeecd55;
+}
+
+.input-group input[type="number"], 
+.input-group select {
+    display: block;
+    width: 100%;
+    padding: 1.06rem 1.2rem;
+    margin-top: 2px;
+    font-size: 1.14rem;
+    font-weight: 500;
+    color: #222;
+    background: rgba(232,203,84,0.08);
+    border: 1.3px solid #efecc7;
+    border-radius: 12px;
+    box-shadow: 0 1px 4px #e8c77a18 inset;
+    transition: background 0.13s, border 0.13s, box-shadow 0.13s;
+}
+.input-group input[type="number"]:focus, 
+.input-group select:focus {
+    background: #fffbe6;
+    outline: none;
+    border: 1.8px solid #e8c77a;
+    box-shadow: 0 4px 13px #e8c77a35;
+}
+.input-group input[type="number"]::placeholder {
+    color: #bbb685;
+    opacity: 1;
+}
+.input-group select {
+    box-shadow: 0 1px 4px #e8c77a11 inset;
+}
+
+input[type="number"], select {
+    background: rgba(232,203,84,0.08);
+    border-radius: 12px;
+    border: 1.3px solid #efecc7;
+    font-size: 1.14rem;
+}
+
+.input-group input[type="number"] {
+    width: 100%;
+    box-sizing: border-box;
+    appearance: none;
+    -webkit-appearance: none;
+    margin: 0;
+    min-width: 0;
+}
+
+@media (max-width: 700px) {
+    .input-group input[type="number"], .input-group select,
+    input[type="number"], select {
+        font-size: 0.99rem;
+        padding: 0.85rem 1rem;
+    }
+}
+@media (max-width: 700px) {
+    .glass-container { max-width:96vw; padding:1.2rem 0.7rem; margin:2vw auto; }
+    .header h1 { font-size: 1.35rem; }
+    .subtitle { font-size:1rem; }
+    input, select { font-size:1rem; padding:0.85rem 1rem;}
+    .next-btn, .predict-btn { font-size:0.97rem; }
+}
+@media (max-width:450px){
+    .glass-container{padding:0.6rem 1vw;}
+}

templates/index.html

@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Personality Predictor | Start</title>
+    <link href="https://fonts.googleapis.com/css?family=Playfair+Display:700,900|Montserrat:600,700&display=swap" rel="stylesheet">
+    <link rel="icon" type="image/png" href="{{ url_for('static', filename='favicon.png') }}">
+    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
+</head>
+<body>
+<div class="glass-container">
+    <div class="header">
+        <h1>🧠 Personality Predictor</h1>
+        <p class="subtitle">Step 1: Enter your demographic information</p>
+    </div>
+    <form method="post" class="personality-form single-step-form">
+        <div class="input-group">
+            <label for="age">Age</label>
+            <input type="number" id="age" name="age" min="1" max="100" placeholder="e.g., 25" required>
+        </div>
+        <div class="input-group">
+            <label for="gender">Gender</label>
+            <select id="gender" name="gender" required>
+                {% for g in gender_classes %}
+                    <option value="{{g}}">{{g}}</option>
+                {% endfor %}
+            </select>
+        </div>
+        <div class="input-group">
+            <label for="education">Education Level</label>
+            <select id="education" name="education" required>
+                {% for e in edu_classes %}
+                    <option value="{{e}}">
+                        {% if e == 0 %}High School/Undergraduate{% else %}Graduate/Postgraduate{% endif %}
+                    </option>
+                {% endfor %}
+            </select>
+        </div>
+        <div class="input-group">
+            <label for="interest">Primary Interest</label>
+            <select id="interest" name="interest" required>
+                {% for i in interest_classes %}
+                    <option value="{{i}}">{{i}}</option>
+                {% endfor %}
+            </select>
+        </div>
+        <button type="submit" class="next-btn glass-btn">Next</button>
+    </form>
+</div>
+</body>
+</html>

templates/mcq_step.html

@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Personality Step {{ step }} of {{ total_steps }}</title>
+    <link rel="icon" type="image/png" href="{{ url_for('static', filename='favicon-removebg.png') }}">
+    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
+    <link href="https://fonts.googleapis.com/css?family=Playfair+Display:800,900|Montserrat:400,600,700&display=swap" rel="stylesheet">
+    <script>
+    function validateForm() {
+        const inputs = document.querySelectorAll('.mcq-options input[type="radio"]:checked');
+        if (inputs.length < 4) {
+            alert("Please answer all 4 questions to continue.");
+            return false;
+        }
+        return true;
+    }
+    </script>
+</head>
+<body class="animated-bg">
+<div class="glass-container fade-in">
+    <div class="header neon-glow">
+        <h1>🧩 Step {{ step }} of {{ total_steps }}</h1>
+        <div class="progress-bar glass-progress">
+            <div class="progress" style="width: {{ (step / total_steps) * 100 }}%"></div>
+        </div>
+        <h2>{{ trait_label }} Questions</h2>
+    </div>
+    <form method="post" action="{{ url_for('mcq', step=step+1) }}" onsubmit="return validateForm();" class="mcq-form">
+        <div class="mcq-section">
+            {% for qtext in questions %}
+            <div class="input-group mcq-options">
+                <label><b>Q{{ loop.index }}:</b> <span>{{ qtext }}</span></label>
+                <div class="mcq-row">
+                    <label>
+                        <input type="radio" name="{{ trait_key }}_q{{ loop.index }}" value="A" required>
+                        <span>Excellent/Always</span>
+                    </label>
+                    <label>
+                        <input type="radio" name="{{ trait_key }}_q{{ loop.index }}" value="B">
+                        <span>Good/Usually</span>
+                    </label>
+                    <label>
+                        <input type="radio" name="{{ trait_key }}_q{{ loop.index }}" value="C">
+                        <span>Fair/Sometimes</span>
+                    </label>
+                    <label>
+                        <input type="radio" name="{{ trait_key }}_q{{ loop.index }}" value="D">
+                        <span>Poor/Rarely</span>
+                    </label>
+                </div>
+            </div>
+            {% endfor %}
+        </div>
+        <button type="submit" class="next-btn glass-btn">{% if step == total_steps %}See Results{% else %}Next{% endif %}</button>
+    </form>
+</div>
+</body>
+</html>

templates/results.html

@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Your Personality Type</title>
+    <link href="https://fonts.googleapis.com/css?family=Playfair+Display:700,900|Montserrat:600,700&display=swap" rel="stylesheet">
+    <link rel="icon" type="image/png" href="{{ url_for('static', filename='favicon-removebg.png') }}">
+    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
+</head>
+<body>
+<div class="glass-container">
+    <div class="header">
+        <h1>🎯 Your Personality Type</h1>
+    </div>
+    {% if mbti_pred %}
+    <div class="result-card">
+        <h2 class="mbti-type">{{ mbti_pred }}</h2>
+        <p class="mbti-description">{{ description }}</p>
+        <h3 style="margin-top:2.1rem; color:#222;">Confidence Breakdown</h3>
+        <div class="prob-grid" style="margin-bottom:2rem;">
+            {% for cls, prob in class_probs.items() %}
+                {% if prob > 0.01 %}
+                <div class="prob-item" style="display:flex;align-items:center;gap:1.2rem;">
+                    <span class="prob-type" style="color:#95702b; min-width:60px; font-weight:500;">{{cls}}</span>
+                    <div class="prob-bar" style="flex:1;position:relative;">
+                        <div class="prob-fill" style="width: {{prob*100}}%;"></div>
+                        <span class="prob-value" style="position:absolute;right:10px;top:50%;transform:translateY(-50%);font-weight:700;color:#b79818;">{{(prob*100)|round(1)}}%</span>
+                    </div>
+                </div>
+                {% endif %}
+            {% endfor %}
+        </div>
+        <div style="text-align:center;">
+            <a href="{{ url_for('demographics') }}" class="predict-btn glass-btn" style="text-decoration: none;">Retake Test</a>
+        </div>
+    </div>
+    {% elif description and description.startswith('Error') %}
+        <div class="result-card" style="color:#b79818;font-weight:700;margin-bottom:2rem;">
+            {{ description }}
+        </div>
+        <div style="text-align:center;">
+            <a href="{{ url_for('demographics') }}" class="predict-btn glass-btn" style="text-decoration: none;">Try Again</a>
+        </div>
+    {% endif %}
+</div>
+</body>
+</html>