fix

app.py

@@ -86,9 +86,10 @@ label_encoder = None
 extractor = FeatureExtractor()
 model_loading = False  
 model_loaded = False   
+model_load_error = None
 
 def _load_model_background():
-    global model, scaler, label_encoder, model_loading, model_loaded
+    global model, scaler, label_encoder, model_loading, model_loaded, model_load_error
     
     # Prevent double-loading
     if model_loading or model_loaded:
@@ -101,12 +102,14 @@ def _load_model_background():
         m, s, le = load_model()
         model, scaler, label_encoder = m, s, le
         model_loaded = True
+        model_load_error = None
         print('[APP] Model loaded successfully.')
     except Exception as e:
         model = None
         scaler = None
         label_encoder = None
-        model_loaded = True  # Mark as done to prevent retry loop
+        model_loaded = False
+        model_load_error = str(e)
         print(f"[APP] ❌ Background model load failed: {e}")
     finally:
         model_loading = False
@@ -120,6 +123,27 @@ def is_model_ready():
     return model is not None and scaler is not None and label_encoder is not None
 
 
+@app.route('/api/model-status')
+def api_model_status():
+    """Return the current model loading status for the homepage."""
+    ready = is_model_ready()
+    if ready:
+        status = 'ready'
+    elif model_loading:
+        status = 'loading'
+    elif model_load_error:
+        status = 'error'
+    else:
+        status = 'loading'
+
+    return jsonify({
+        'status': status,
+        'ready': ready,
+        'loading': model_loading,
+        'error': model_load_error,
+    })
+
+
 def allowed_file(filename):
     return '.' in filename and filename.rsplit('.', 1)[1].lower() in ALLOWED_EXTENSIONS
 

templates/index.html

@@ -16,15 +16,13 @@
             </p>
         </div>
         <!-- Status Model -->
+        <div id="model-status-banner" class="alert text-center {% if model_loaded %}alert-success{% else %}alert-warning{% endif %}">
             {% if model_loaded %}
-        <div class="alert alert-success text-center">
             <i class="fas fa-check-circle"></i> Model siap digunakan
-        </div>
             {% else %}
-        <div class="alert alert-warning text-center">
             <i class="fas fa-exclamation-triangle"></i> Model sedang dimuat, silakan tunggu...
-        </div>
             {% endif %}
+        </div>
 
         <!-- Main Features -->
         <div class="row g-4 mb-5 justify-content-center">
@@ -100,4 +98,38 @@
     border-radius: 50%;
 }
 </style>
+<script>
+document.addEventListener('DOMContentLoaded', function () {
+    const banner = document.getElementById('model-status-banner');
+    if (!banner) return;
+
+    async function refreshModelStatus() {
+        try {
+            const response = await fetch('{{ url_for("api_model_status") }}', { cache: 'no-store' });
+            if (!response.ok) return;
+
+            const data = await response.json();
+            if (data.ready) {
+                banner.className = 'alert alert-success text-center';
+                banner.innerHTML = '<i class="fas fa-check-circle"></i> Model siap digunakan';
+                return;
+            }
+
+            if (data.status === 'error' && data.error) {
+                banner.className = 'alert alert-danger text-center';
+                banner.innerHTML = '<i class="fas fa-times-circle"></i> Model gagal dimuat: ' + data.error;
+                return;
+            }
+
+            banner.className = 'alert alert-warning text-center';
+            banner.innerHTML = '<i class="fas fa-exclamation-triangle"></i> Model sedang dimuat, silakan tunggu...';
+        } catch (error) {
+            console.error('Failed to fetch model status:', error);
+        }
+    }
+
+    refreshModelStatus();
+    setInterval(refreshModelStatus, 5000);
+});
+</script>
 {% endblock %}