Add availability checking and error page for missing Gemini API key

- Add /api/availability endpoint to check app state
- Add /api/is_initialized endpoint for polling initialization
- Add /error route with informative error page
- Update frontend to check availability and redirect on missing key
- Implement continuous polling during initialization
- Fix API URL building for static page compatibility

app.py

@@ -1,4 +1,4 @@
-from flask import Flask, render_template, request, jsonify
+from flask import Flask, render_template, request, jsonify, url_for
 import os
 import time
 from dotenv import load_dotenv
@@ -17,15 +17,17 @@ logging.info("=" * 60)
 logging.info("ENVIRONMENT VARIABLES CHECK")
 logging.info("=" * 60)
 gemini_key = os.environ.get('GEMINI_API_KEY')
+missing_gemini_key = False
 if gemini_key:
     logging.info(f"✓ GEMINI_API_KEY found (length: {len(gemini_key)} chars)")
     logging.info(f"  First 10 chars: {gemini_key[:10]}...")
 else:
+    missing_gemini_key = True
     logging.error("=" * 60)
-    logging.error("✗ FATAL ERROR: GEMINI_API_KEY not found in environment!")
+    logging.error("✗ GEMINI_API_KEY not found in environment!")
     logging.error("=" * 60)
     logging.error("")
-    logging.error("The GEMINI_API_KEY environment variable is required to run this application.")
+    logging.error("The GEMINI_API_KEY environment variable is required for full functionality.")
     logging.error("")
     logging.error("For Hugging Face Spaces:")
     logging.error("  1. Go to Settings → Repository secrets")
@@ -44,10 +46,6 @@ else:
                  str([k for k in os.environ.keys() if 'GOOGLE' in k.upper()]))
     logging.error("=" * 60)
 
-    # Exit the application
-    import sys
-    sys.exit(1)
-
 logging.info("=" * 60)
 
 # Download required NLTK data on startup
@@ -90,12 +88,16 @@ if missing_vars:
 
 def initialize_gemini():
     """Initialize Gemini API specifically"""
-    global galatea_ai, gemini_initialized
+    global gemini_initialized
     
     if not galatea_ai:
         logging.warning("Cannot initialize Gemini: GalateaAI instance not created yet")
         return False
         
+    if missing_gemini_key:
+        logging.error("Cannot initialize Gemini: GEMINI_API_KEY is missing")
+        return False
+
     try:
         # Check for GEMINI_API_KEY
         if not os.environ.get('GEMINI_API_KEY'):
@@ -124,6 +126,10 @@ def initialize_components():
     
     if initializing or is_initialized:
         return
+
+    if missing_gemini_key:
+        logging.error("Initialization aborted: GEMINI_API_KEY missing")
+        return
         
     initializing = True
     logging.info("Starting to initialize Galatea components...")
@@ -163,7 +169,7 @@ def home():
     # Add error handling for template rendering
     try:
         # Start initialization in background if not already started
-        if not is_initialized and not initializing:
+        if not is_initialized and not initializing and not missing_gemini_key:
             Thread(target=initialize_components).start()
             
         return render_template('index.html')
@@ -174,9 +180,15 @@ def home():
 @app.route('/api/chat', methods=['POST'])
 def chat():
     # Check if components are initialized
+    if missing_gemini_key:
+        return jsonify({
+            'error': 'GEMINI_API_KEY is missing. Chat is unavailable.',
+            'status': 'missing_gemini_key'
+        }), 503
+
     if not is_initialized:
         # Start initialization if not already started
-        if not initializing:
+        if not initializing and not missing_gemini_key:
             Thread(target=initialize_components).start()
             
         return jsonify({
@@ -390,9 +402,54 @@ def health():
     return jsonify({
         'status': 'ok',
         'gemini_available': hasattr(galatea_ai, 'gemini_available') and galatea_ai.gemini_available if galatea_ai else False,
-        'is_initialized': is_initialized
+        'is_initialized': is_initialized,
+        'missing_gemini_key': missing_gemini_key
     })
 
+@app.route('/api/availability')
+def availability():
+    """Report overall availability state to the frontend"""
+    if missing_gemini_key:
+        return jsonify({
+            'available': False,
+            'status': 'missing_gemini_key',
+            'is_initialized': False,
+            'initializing': False,
+            'missing_gemini_key': True,
+            'error_page': url_for('error_page')
+        })
+
+    if initializing or not is_initialized:
+        return jsonify({
+            'available': False,
+            'status': 'initializing',
+            'is_initialized': is_initialized,
+            'initializing': initializing,
+            'missing_gemini_key': False
+        })
+
+    return jsonify({
+        'available': True,
+        'status': 'ready',
+        'is_initialized': True,
+        'initializing': False,
+        'missing_gemini_key': False
+    })
+
+@app.route('/api/is_initialized')
+def is_initialized_endpoint():
+    """Lightweight endpoint for polling initialization progress"""
+    payload = {
+        'is_initialized': is_initialized,
+        'initializing': initializing,
+        'missing_gemini_key': missing_gemini_key
+    }
+
+    if missing_gemini_key:
+        payload['error_page'] = url_for('error_page')
+
+    return jsonify(payload)
+
 @app.route('/status')
 def status():
     """Status endpoint to check initialization progress"""
@@ -400,9 +457,15 @@ def status():
         'is_initialized': is_initialized,
         'initializing': initializing,
         'emotions': galatea_ai.emotional_state if galatea_ai else {'joy': 0.2, 'sadness': 0.2, 'anger': 0.2, 'fear': 0.2, 'curiosity': 0.2},
-        'avatar_shape': avatar_engine.avatar_model if avatar_engine and is_initialized else 'Circle'
+        'avatar_shape': avatar_engine.avatar_model if avatar_engine and is_initialized else 'Circle',
+        'missing_gemini_key': missing_gemini_key
     })
 
+@app.route('/error')
+def error_page():
+    """Render an informative error page when the app is unavailable"""
+    return render_template('error.html', missing_gemini_key=missing_gemini_key)
+
 if __name__ == '__main__':
     print("Starting Galatea Web Interface...")
     print("The chatbot will initialize in the background when first accessed.")

static/js/script.js

@@ -7,6 +7,18 @@ document.addEventListener('DOMContentLoaded', function() {
     const avatar = document.getElementById('avatar');
     const statusContainer = document.getElementById('status-container');
 
+    // Base API URL detection
+    const DEFAULT_API_BASE = 'http://127.0.0.1:7860';
+    const origin = window.location.origin;
+    const API_BASE_URL = origin && origin !== 'null' ? origin : DEFAULT_API_BASE;
+    const buildApiUrl = (path) => {
+        const normalizedPath = path.startsWith('/') ? path : `/${path}`;
+        return `${API_BASE_URL}${normalizedPath}`;
+    };
+
+    let initializationComplete = false;
+    let initializationPollingActive = false;
+
     // Debug: Log if elements are found
     console.log('Elements found:', {
         chatMessages: !!chatMessages,
@@ -26,8 +38,8 @@ document.addEventListener('DOMContentLoaded', function() {
     // Check server health on load
     checkServerHealth();
 
-    // Start checking initialization status
-    checkInitializationStatus();
+    // Determine availability state
+    checkAvailability();
 
     // Auto-resize textarea as user types
     if (userInput) {
@@ -71,10 +83,14 @@ document.addEventListener('DOMContentLoaded', function() {
     }
     
     function checkServerHealth() {
-        fetch('/health')
+        fetch(buildApiUrl('/health'))
             .then(response => response.json())
             .then(data => {
                 if (data.status === 'ok') {
+                    if (data.missing_gemini_key) {
+                        showStatusMessage('GEMINI_API_KEY missing. Chat will remain unavailable until it is configured.', true);
+                        return;
+                    }
                     if (data.gemini_available) {
                         showStatusMessage('Connected to Gemini API', false);
                     } else {
@@ -100,6 +116,82 @@ document.addEventListener('DOMContentLoaded', function() {
         }, 5000);
     }
     
+    function ensureLoadingScreenVisible() {
+        const loadingScreen = document.getElementById('loading-screen');
+        const chatContainer = document.getElementById('chat-container');
+        if (loadingScreen) {
+            loadingScreen.style.display = 'flex';
+            loadingScreen.classList.remove('fade-out');
+        }
+        if (chatContainer) {
+            chatContainer.style.display = 'none';
+        }
+    }
+
+    function onAppReady() {
+        if (initializationComplete) {
+            return;
+        }
+
+        initializationComplete = true;
+        initializationPollingActive = false;
+
+        const loadingScreen = document.getElementById('loading-screen');
+        const chatContainer = document.getElementById('chat-container');
+        const loadingStatus = document.getElementById('loading-status');
+        const loadingProgress = document.getElementById('loading-progress');
+
+        if (loadingProgress) {
+            loadingProgress.style.width = '100%';
+        }
+        if (loadingStatus) {
+            loadingStatus.textContent = 'Ready! Welcome to Galatea AI';
+        }
+
+        if (loadingScreen) {
+            loadingScreen.classList.add('fade-out');
+            setTimeout(() => {
+                loadingScreen.style.display = 'none';
+                if (chatContainer) {
+                    chatContainer.style.display = 'flex';
+                }
+            }, 500);
+        } else if (chatContainer) {
+            chatContainer.style.display = 'flex';
+        }
+
+        startAvatarPolling();
+    }
+
+    function checkAvailability() {
+        fetch(buildApiUrl('/api/availability'))
+            .then(response => response.json())
+            .then(data => {
+                if (!data.available) {
+                    if (data.status === 'missing_gemini_key') {
+                        const errorPath = data.error_page || '/error';
+                        window.location.href = `${API_BASE_URL}${errorPath}`;
+                        return;
+                    }
+
+                    if (data.status === 'initializing') {
+                        ensureLoadingScreenVisible();
+                        if (!initializationPollingActive) {
+                            initializationPollingActive = true;
+                            checkInitializationStatus();
+                        }
+                        return;
+                    }
+                }
+
+                onAppReady();
+            })
+            .catch(error => {
+                console.error('Error checking availability:', error);
+                setTimeout(checkAvailability, 3000);
+            });
+    }
+
     function sendMessage() {
         console.log('sendMessage called');
 
@@ -128,7 +220,7 @@ document.addEventListener('DOMContentLoaded', function() {
 
         // Send to backend
         console.log('Sending to backend...');
-        fetch('/api/chat', {
+        fetch(buildApiUrl('/api/chat'), {
             method: 'POST',
             headers: {
                 'Content-Type': 'application/json'
@@ -217,6 +309,10 @@ document.addEventListener('DOMContentLoaded', function() {
     // Add initialization status check with loading screen
     let initCheckCount = 0;
     function checkInitializationStatus() {
+        if (initializationComplete) {
+            return;
+        }
+
         const loadingScreen = document.getElementById('loading-screen');
         const chatContainer = document.getElementById('chat-container');
         const loadingStatus = document.getElementById('loading-status');
@@ -228,46 +324,32 @@ document.addEventListener('DOMContentLoaded', function() {
             loadingProgress.style.width = `${progress}%`;
         }
 
-        fetch('/status')
+        fetch(buildApiUrl('/api/is_initialized'))
             .then(response => response.json())
             .then(data => {
+                if (data.missing_gemini_key) {
+                    const errorPath = data.error_page || '/error';
+                    window.location.href = `${API_BASE_URL}${errorPath}`;
+                    return;
+                }
+
+                if (data.is_initialized) {
+                    onAppReady();
+                    return;
+                }
+
                 if (data.initializing) {
-                    // Still initializing
                     if (loadingStatus) {
                         loadingStatus.textContent = 'Initializing AI components...';
                     }
                     setTimeout(checkInitializationStatus, 2000); // Check again in 2 seconds
-                } else if (data.is_initialized) {
-                    // Initialization complete!
-                    if (loadingProgress) {
-                        loadingProgress.style.width = '100%';
-                    }
-                    if (loadingStatus) {
-                        loadingStatus.textContent = 'Ready! Welcome to Galatea AI';
-                    }
-
-                    // Hide loading screen and show chat after a brief delay
-                    setTimeout(() => {
-                        if (loadingScreen) {
-                            loadingScreen.classList.add('fade-out');
-                            setTimeout(() => {
-                                loadingScreen.style.display = 'none';
-                                if (chatContainer) {
-                                    chatContainer.style.display = 'flex';
-                                }
-                            }, 500);
-                        }
+                    return;
+                }
 
-                        // Start polling for avatar updates when initialized
-                        startAvatarPolling();
-                    }, 1000);
-                } else {
-                    // Something wrong with initialization
-                    if (loadingStatus) {
-                        loadingStatus.textContent = 'Initialization taking longer than expected...';
-                    }
-                    setTimeout(checkInitializationStatus, 3000);
+                if (loadingStatus) {
+                    loadingStatus.textContent = 'Initialization taking longer than expected...';
                 }
+                setTimeout(checkInitializationStatus, 3000);
             })
             .catch(error => {
                 console.error('Error checking status:', error);
@@ -294,7 +376,7 @@ document.addEventListener('DOMContentLoaded', function() {
     }
 
     function pollAvatarState() {
-        fetch('/api/avatar')
+        fetch(buildApiUrl('/api/avatar'))
             .then(response => response.json())
             .then(data => {
                 if (data.avatar_shape && data.is_initialized) {

templates/error.html

@@ -0,0 +1,100 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Galatea AI | Configuration Required</title>
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
+    <style>
+        body {
+            background-color: var(--background);
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            min-height: 100vh;
+            text-align: center;
+            padding: 20px;
+        }
+
+        .error-card {
+            background-color: var(--card-bg);
+            border-radius: 16px;
+            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+            max-width: 520px;
+            width: 100%;
+            padding: 40px 32px;
+        }
+
+        .error-card h1 {
+            color: var(--primary-color);
+            font-weight: 600;
+            margin-bottom: 16px;
+        }
+
+        .error-card p {
+            margin-bottom: 12px;
+            color: var(--text-color);
+        }
+
+        .steps {
+            margin-top: 24px;
+            text-align: left;
+        }
+
+        .steps h2 {
+            font-size: 18px;
+            margin-bottom: 8px;
+        }
+
+        .steps ol, .steps ul {
+            padding-left: 20px;
+            margin-bottom: 16px;
+        }
+
+        .steps li {
+            margin-bottom: 6px;
+        }
+
+        .back-link {
+            margin-top: 24px;
+            display: inline-block;
+            color: var(--primary-color);
+            text-decoration: none;
+            font-weight: 500;
+        }
+    </style>
+</head>
+<body>
+    <div class="error-card">
+        <h1>Galatea AI is Unavailable</h1>
+        {% if missing_gemini_key %}
+        <p>We couldn't find a <code>GEMINI_API_KEY</code> in the current environment.</p>
+        <p>Please add the key and reload the page to continue.</p>
+
+        <div class="steps">
+            <h2>How to fix this</h2>
+            <p><strong>Local setup:</strong></p>
+            <ol>
+                <li>Create a <code>.env</code> file if it doesn't exist.</li>
+                <li>Add <code>GEMINI_API_KEY=&lt;your_key_here&gt;</code> to the file.</li>
+                <li>Restart the Flask app.</li>
+            </ol>
+
+            <p><strong>Hugging Face Spaces:</strong></p>
+            <ol>
+                <li>Open the Space settings and go to <em>Repository secrets</em>.</li>
+                <li>Add a secret named <code>GEMINI_API_KEY</code> with your Gemini API key.</li>
+                <li>Restart or reload the Space.</li>
+            </ol>
+        </div>
+        {% else %}
+        <p>The application is temporarily unavailable. Please try again shortly.</p>
+        {% endif %}
+
+        <a class="back-link" href="/">Return to Home</a>
+    </div>
+</body>
+</html>
+