update the app.py and index.html to support mulit api key

app.py

@@ -10,12 +10,12 @@ from huggingface_hub import HfApi  # For file persistence in Spaces
 import os
 import threading
 import glob
+import random
+from langchain_google_genai import GoogleGenerativeAI
 
 # Load environment variables from .env file
 load_dotenv()
 
-from langchain_google_genai import GoogleGenerativeAI
-
 app = FastAPI()
 
 # Global variables to track generation status
@@ -27,11 +27,104 @@ generation_status = {
     "questions_generated": 0,
     "completed": False,
     "result_file": None,
-    "error": None
+    "progress_file": None,  # New: track progress file
+    "error": None,
+    "current_api_key_index": 0,  # New: track current API key
+    "failed_chunks": [],  # New: track failed chunks for retry
+    "partial_results": []  # New: store partial results
 }
 
 generation_lock = threading.Lock()
 
+def get_api_keys() -> List[str]:
+    """
+    Get all available Google API keys from environment variables.
+    Supports GOOGLE_API_KEY, GOOGLE_API_KEY_1, GOOGLE_API_KEY_2, etc.
+    """
+    api_keys = []
+    
+    # Check for primary key
+    primary_key = os.getenv("GOOGLE_API_KEY")
+    if primary_key:
+        api_keys.append(primary_key)
+    
+    # Check for numbered keys
+    i = 1
+    while True:
+        key = os.getenv(f"GOOGLE_API_KEY_{i}")
+        if key:
+            api_keys.append(key)
+            i += 1
+        else:
+            break
+    
+    if not api_keys:
+        raise ValueError("No Google API keys found in environment variables")
+    
+    return api_keys
+
+def get_next_api_key() -> tuple[str, int]:
+    """
+    Get the next API key in rotation and update the current index.
+    Returns tuple of (api_key, key_index)
+    """
+    global generation_status
+    
+    api_keys = get_api_keys()
+    
+    with generation_lock:
+        current_index = generation_status["current_api_key_index"]
+        next_index = (current_index + 1) % len(api_keys)
+        generation_status["current_api_key_index"] = next_index
+    
+    return api_keys[next_index], next_index
+
+def save_progress_file():
+    """
+    Save current progress to a file that can be downloaded at any time.
+    """
+    global generation_status
+    
+    with generation_lock:
+        progress_data = {
+            "generation_info": {
+                "status": "in_progress" if generation_status["is_running"] else "completed",
+                "start_time": generation_status["start_time"],
+                "processed_chunks": generation_status["processed_chunks"],
+                "total_chunks": generation_status["total_chunks"],
+                "questions_generated": generation_status["questions_generated"],
+                "completed": generation_status["completed"],
+                "current_time": datetime.utcnow().isoformat(),
+                "failed_chunks": generation_status["failed_chunks"].copy(),
+                "error": generation_status["error"]
+            },
+            "partial_dataset": {
+                "dataset_info": {
+                    "title": "Vaccine Guide Question-Answer Dataset (Partial)",
+                    "description": "Partial dataset of question-answer pairs generated from a vaccine guide.",
+                    "version": "1.1.0",
+                    "created_date": generation_status["start_time"],
+                    "source": "Guide-pratique-de-mise-en-oeuvre-du-calendrier-national-de-vaccination-2023.pdf",
+                    "generated_by": "Gemini API",
+                    "total_questions": len(generation_status["partial_results"]),
+                    "intended_use": "Fine-tuning medical language models for knowledge recall and reasoning",
+                    "note": "This is a partial dataset. Generation may still be in progress."
+                },
+                "questions": generation_status["partial_results"].copy()
+            }
+        }
+        
+        # Save progress file
+        progress_filename = f"vaccine_questions_progress_{int(time.time())}.json"
+        generation_status["progress_file"] = progress_filename
+    
+    try:
+        with open(f"./{progress_filename}", 'w', encoding='utf-8') as f:
+            json.dump(progress_data, f, indent=4, ensure_ascii=False)
+        print(f"Progress saved to {progress_filename}")
+    except Exception as e:
+        print(f"Error saving progress file: {e}")
+
 def estimate_difficulty(question: str, q_type: str) -> str:
     """
     Estimate question difficulty based on type and content.
@@ -49,9 +142,10 @@ def estimate_difficulty(question: str, q_type: str) -> str:
         return "medium"
     return "hard"  # applied
 
-def generate_questions_for_chunk(chunk: str, chunk_id: int, model="gemini-2.0-flash") -> List[Dict]:
+def generate_questions_for_chunk(chunk: str, chunk_id: int, model="gemini-2.0-flash", max_retries=3) -> List[Dict]:
     """
     Generate French questions for a given document chunk using the Gemini API.
+    Now includes retry logic with different API keys.
     """
     prompt = f"""
     À partir du texte suivant d'un guide sur les vaccins en français, g��nérez 3 questions variées (factual, conceptual, applied) qui couvrent le contenu de manière exhaustive. 
@@ -78,59 +172,91 @@ def generate_questions_for_chunk(chunk: str, chunk_id: int, model="gemini-2.0-fl
     ```
     """
     
-    try:
-        llm = GoogleGenerativeAI(
-            model=model,
-            google_api_key=os.getenv("GOOGLE_API_KEY")
-        )
+    last_error = None
+    
+    for attempt in range(max_retries):
+        try:
+            # Get next API key for this attempt
+            api_key, key_index = get_next_api_key()
+            print(f"Chunk {chunk_id}, attempt {attempt + 1}: Using API key index {key_index}")
+            
+            llm = GoogleGenerativeAI(
+                model=model,
+                google_api_key=api_key
+            )
 
-        response = llm.invoke(prompt)
-        
-        questions_text = str(response)  # Convert response to string
-        
-        # Strip Markdown code fences
-        if questions_text.startswith("```json\n") and questions_text.endswith("\n```"):
-            questions_text = questions_text[7:-4].strip()
-        elif questions_text.startswith("```") and questions_text.endswith("```"):
-            questions_text = questions_text[3:-3].strip()
-        
-        if not questions_text:
-            print(f"Erreur: Réponse vide pour le chunk {chunk_id}")
-            return []
-        
-        questions = json.loads(questions_text)
+            response = llm.invoke(prompt)
+            
+            questions_text = str(response)  # Convert response to string
+            
+            # Strip Markdown code fences
+            if questions_text.startswith("```json\n") and questions_text.endswith("\n```"):
+                questions_text = questions_text[7:-4].strip()
+            elif questions_text.startswith("```") and questions_text.endswith("```"):
+                questions_text = questions_text[3:-3].strip()
+            
+            if not questions_text:
+                raise ValueError(f"Empty response for chunk {chunk_id}")
+            
+            questions = json.loads(questions_text)
 
-        formatted_questions = []
-        for q in questions:
-            question_id = str(uuid.uuid4())
-            difficulty = estimate_difficulty(q["question"], q["type"])
-            formatted_questions.append({
-                "question_id": question_id,
-                "chunk_id": chunk_id,
-                "chunk_text": chunk,
-                "question": q["question"],
-                "type": q["type"],
-                "difficulty": difficulty,
-                "training_purpose": "Knowledge Recall" if q["type"] == "factual" else "Reasoning",
-                "validated": False
-            })
-        
-        # Update the global status
-        with generation_lock:
-            generation_status["questions_generated"] += len(formatted_questions)
-        
-        return formatted_questions
+            formatted_questions = []
+            for q in questions:
+                question_id = str(uuid.uuid4())
+                difficulty = estimate_difficulty(q["question"], q["type"])
+                formatted_questions.append({
+                    "question_id": question_id,
+                    "chunk_id": chunk_id,
+                    "chunk_text": chunk,
+                    "question": q["question"],
+                    "type": q["type"],
+                    "difficulty": difficulty,
+                    "training_purpose": "Knowledge Recall" if q["type"] == "factual" else "Reasoning",
+                    "validated": False,
+                    "api_key_used": key_index,  # Track which key was used
+                    "generation_attempt": attempt + 1
+                })
+            
+            # Update the global status and add to partial results
+            with generation_lock:
+                generation_status["questions_generated"] += len(formatted_questions)
+                generation_status["partial_results"].extend(formatted_questions)
+            
+            # Save progress after each successful chunk
+            save_progress_file()
+            
+            print(f"Successfully generated {len(formatted_questions)} questions for chunk {chunk_id}")
+            return formatted_questions
+            
+        except Exception as e:
+            last_error = e
+            print(f"Attempt {attempt + 1} failed for chunk {chunk_id}: {e}")
+            
+            # If this is not the last attempt, wait before retrying
+            if attempt < max_retries - 1:
+                wait_time = (attempt + 1) * 5  # Increasing wait time
+                print(f"Waiting {wait_time} seconds before retry...")
+                time.sleep(wait_time)
+            
+            continue
     
-    except Exception as e:
-        print(f"Erreur lors de la génération des questions pour le chunk {chunk_id}: {e}")
-        return []
-    except json.JSONDecodeError as e:
-        print(f"Erreur de parsing de la réponse API pour le chunk {chunk_id}: {e}")
-        return []
+    # All attempts failed
+    print(f"All {max_retries} attempts failed for chunk {chunk_id}. Last error: {last_error}")
+    
+    # Add to failed chunks list
+    with generation_lock:
+        generation_status["failed_chunks"].append({
+            "chunk_id": chunk_id,
+            "error": str(last_error),
+            "attempts": max_retries
+        })
+    
+    return []
 
 def generate_questions_in_background(chunks: List[str]):
     """
     Generate questions in a background thread and update status.
+    Enhanced with better error handling and progress tracking.
     """
     global generation_status
     
@@ -141,17 +267,27 @@ def generate_questions_in_background(chunks: List[str]):
             generation_status["total_chunks"] = len(chunks)
             generation_status["processed_chunks"] = 0
             generation_status["questions_generated"] = 0
+            generation_status["partial_results"] = []
+            generation_status["failed_chunks"] = []
+        
+        # Save initial progress file
+        save_progress_file()
         
         for i, chunk in enumerate(chunks):
             print(f"Processing chunk {i+1}/{len(chunks)}...")
             questions = generate_questions_for_chunk(chunk, i)
-            all_questions.extend(questions)
+            
+            if questions:  # Only add if generation was successful
+                all_questions.extend(questions)
             
             with generation_lock:
                 generation_status["processed_chunks"] = i + 1
             
-            time.sleep(9)  # Rate limiting
+            # Rate limiting - slightly randomized to avoid hitting limits
+            sleep_time = random.uniform(8, 11)  # Random between 8-11 seconds
+            time.sleep(sleep_time)
         
+        # Create final dataset
         dataset = {
             "dataset_info": {
                 "title": "Vaccine Guide Question-Answer Dataset",
@@ -161,13 +297,17 @@ def generate_questions_in_background(chunks: List[str]):
                 "source": "Guide-pratique-de-mise-en-oeuvre-du-calendrier-national-de-vaccination-2023.pdf",
                 "generated_by": "Gemini API",
                 "total_questions": len(all_questions),
-                "intended_use": "Fine-tuning medical language models for knowledge recall and reasoning"
+                "intended_use": "Fine-tuning medical language models for knowledge recall and reasoning",
+                "total_chunks_processed": len(chunks),
+                "successful_chunks": len(chunks) - len(generation_status["failed_chunks"]),
+                "failed_chunks": len(generation_status["failed_chunks"]),
+                "failed_chunk_details": generation_status["failed_chunks"].copy()
             },
             "questions": all_questions
         }
         
-        # Save the dataset
-        filename = f"vaccine_questions_{int(time.time())}.json"
+        # Save the final dataset
+        filename = f"vaccine_questions_final_{int(time.time())}.json"
         with open(f"./{filename}", 'w', encoding='utf-8') as f:
             json.dump(dataset, f, indent=4, ensure_ascii=False)
         
@@ -176,12 +316,21 @@ def generate_questions_in_background(chunks: List[str]):
             generation_status["completed"] = True
             generation_status["is_running"] = False
             generation_status["result_file"] = filename
+        
+        # Save final progress file
+        save_progress_file()
+        
+        success_rate = (len(chunks) - len(generation_status["failed_chunks"])) / len(chunks) * 100
+        print(f"Generation completed! Success rate: {success_rate:.1f}% ({len(all_questions)} questions generated)")
     
     except Exception as e:
         print(f"Error in background generation: {e}")
         with generation_lock:
             generation_status["error"] = str(e)
             generation_status["is_running"] = False
+        
+        # Save progress even if there was an error
+        save_progress_file()
 
 def save_dataset_to_space(dataset: Dict, filename: str):
     """
@@ -191,12 +340,12 @@ def save_dataset_to_space(dataset: Dict, filename: str):
     with open(persistent_path, 'w', encoding='utf-8') as f:
         json.dump(dataset, f, indent=4, ensure_ascii=False)
     print(f"Dataset saved to {persistent_path}")
-    
 
 @app.get("/generate-questions")
 async def generate_questions():
     """
     Endpoint to generate questions from all JSON files in the data folder
+    Enhanced with multi-key support validation
     """
     global generation_status
     
@@ -210,6 +359,10 @@ async def generate_questions():
             }
     
     try:
+        # Validate API keys before starting
+        api_keys = get_api_keys()
+        print(f"Found {len(api_keys)} API keys for rotation")
+        
         # Reset status
         with generation_lock:
             generation_status["is_running"] = True
@@ -218,13 +371,17 @@ async def generate_questions():
             generation_status["questions_generated"] = 0
             generation_status["completed"] = False
             generation_status["result_file"] = None
+            generation_status["progress_file"] = None
             generation_status["error"] = None
+            generation_status["current_api_key_index"] = 0
+            generation_status["failed_chunks"] = []
+            generation_status["partial_results"] = []
         
         # Load all JSON files from data folder
         json_files = glob.glob("./chunk/*.json")
         
         if not json_files:
-            raise HTTPException(status_code=404, detail="No JSON files found in data folder")
+            raise HTTPException(status_code=404, detail="No JSON files found in chunk folder")
         
         all_chunks = []
         for json_file in json_files:
@@ -255,6 +412,7 @@ async def generate_questions():
         return {
             "status": "started",
             "message": f"Question generation started for {len(json_files)} JSON files with {len(all_chunks)} chunks",
+            "api_keys_available": len(api_keys),
             "current_status": generation_status
         }
     except Exception as e:
@@ -267,21 +425,111 @@ async def generate_questions():
 async def get_generation_status():
     """
     Endpoint to check the current status of generation
+    Enhanced with more detailed status information
     """
     with generation_lock:
         status_copy = generation_status.copy()
     
+    # Calculate additional metrics
+    if status_copy["total_chunks"] > 0:
+        progress_percentage = (status_copy["processed_chunks"] / status_copy["total_chunks"]) * 100
+        status_copy["progress_percentage"] = round(progress_percentage, 2)
+    else:
+        status_copy["progress_percentage"] = 0
+    
+    # Add estimated time remaining if generation is running
+    if status_copy["is_running"] and status_copy["start_time"] and status_copy["processed_chunks"] > 0:
+        start_time = datetime.fromisoformat(status_copy["start_time"].replace('Z', '+00:00'))
+        elapsed_time = (datetime.utcnow() - start_time.replace(tzinfo=None)).total_seconds()
+        chunks_per_second = status_copy["processed_chunks"] / elapsed_time if elapsed_time > 0 else 0
+        
+        if chunks_per_second > 0:
+            remaining_chunks = status_copy["total_chunks"] - status_copy["processed_chunks"]
+            estimated_remaining_seconds = remaining_chunks / chunks_per_second
+            status_copy["estimated_remaining_minutes"] = round(estimated_remaining_seconds / 60, 2)
+        else:
+            status_copy["estimated_remaining_minutes"] = None
+    
     return status_copy
 
+@app.get("/download-progress")
+async def download_progress():
+    """
+    New endpoint to download current progress at any time
+    """
+    global generation_status
+    
+    # Force save current progress
+    save_progress_file()
+    
+    with generation_lock:
+        progress_file = generation_status["progress_file"]
+    
+    if progress_file and os.path.exists(f"./{progress_file}"):
+        return FileResponse(f"./{progress_file}", media_type="application/json", filename=progress_file)
+    else:
+        raise HTTPException(status_code=404, detail="No progress file available")
+
 @app.get("/download/{filename}")
 async def download_file(filename: str):
     """
     Endpoint to download generated files
+    Enhanced with better error handling
     """
     file_path = f"./{filename}"
     if os.path.exists(file_path):
         return FileResponse(file_path, media_type="application/json", filename=filename)
-    raise HTTPException(status_code=404, detail="File not found")
+    raise HTTPException(status_code=404, detail=f"File {filename} not found")
+
+@app.get("/retry-failed")
+async def retry_failed_chunks():
+    """
+    New endpoint to retry only the failed chunks
+    """
+    global generation_status
+    
+    with generation_lock:
+        if generation_status["is_running"]:
+            return {
+                "status": "error",
+                "message": "Cannot retry while generation is running"
+            }
+        
+        failed_chunks = generation_status["failed_chunks"].copy()
+    
+    if not failed_chunks:
+        return {
+            "status": "success",
+            "message": "No failed chunks to retry"
+        }
+    
+    # This would require implementing the retry logic
+    # For now, just return the failed chunks info
+    return {
+        "status": "info",
+        "message": f"Found {len(failed_chunks)} failed chunks",
+        "failed_chunks": failed_chunks,
+        "note": "Retry functionality can be implemented based on requirements"
+    }
+
+@app.get("/api-keys-status")
+async def get_api_keys_status():
+    """
+    New endpoint to check API keys status
+    """
+    try:
+        api_keys = get_api_keys()
+        return {
+            "status": "success",
+            "total_keys": len(api_keys),
+            "current_key_index": generation_status["current_api_key_index"],
+            "message": f"{len(api_keys)} API keys configured for rotation"
+        }
+    except Exception as e:
+        return {
+            "status": "error",
+            "message": str(e)
+        }
 
 @app.get("/")
 async def root():

index.html

@@ -3,64 +3,102 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Générateur de Questions sur les Vaccins</title>
+    <title>Générateur de Questions sur les Vaccins - Amélioré</title>
     <style>
         body {
             font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
             line-height: 1.6;
             color: #333;
-            max-width: 1000px;
+            max-width: 1200px;
             margin: 0 auto;
             padding: 20px;
-            background-color: #f5f7fa;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            min-height: 100vh;
         }
         h1 {
-            color: #2c3e50;
+            color: white;
             text-align: center;
-            border-bottom: 2px solid #3498db;
-            padding-bottom: 10px;
+            font-size: 2.5em;
+            margin-bottom: 30px;
+            text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
         }
         .container {
-            background-color: white;
-            border-radius: 8px;
-            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-            padding: 20px;
+            background: rgba(255, 255, 255, 0.95);
+            backdrop-filter: blur(10px);
+            border-radius: 15px;
+            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
+            padding: 25px;
             margin-bottom: 20px;
+            border: 1px solid rgba(255, 255, 255, 0.2);
         }
         button {
-            background-color: #3498db;
+            background: linear-gradient(45deg, #3498db, #2980b9);
             color: white;
             border: none;
-            padding: 10px 20px;
-            border-radius: 4px;
+            padding: 12px 24px;
+            border-radius: 8px;
             cursor: pointer;
             font-size: 16px;
-            transition: background-color 0.3s;
+            font-weight: 600;
+            transition: all 0.3s ease;
+            box-shadow: 0 4px 15px rgba(52, 152, 219, 0.3);
         }
         button:hover {
-            background-color: #2980b9;
+            transform: translateY(-2px);
+            box-shadow: 0 6px 20px rgba(52, 152, 219, 0.4);
         }
         button:disabled {
-            background-color: #95a5a6;
+            background: #95a5a6;
             cursor: not-allowed;
+            transform: none;
+            box-shadow: none;
         }
         .download-btn {
-            background-color: #27ae60;
+            background: linear-gradient(45deg, #27ae60, #219955);
+            box-shadow: 0 4px 15px rgba(39, 174, 96, 0.3);
         }
         .download-btn:hover {
-            background-color: #219955;
+            box-shadow: 0 6px 20px rgba(39, 174, 96, 0.4);
         }
+        .warning-btn {
+            background: linear-gradient(45deg, #f39c12, #e67e22);
+            box-shadow: 0 4px 15px rgba(243, 156, 18, 0.3);
+        }
+        .danger-btn {
+            background: linear-gradient(45deg, #e74c3c, #c0392b);
+            box-shadow: 0 4px 15px rgba(231, 76, 60, 0.3);
+        }
+        .small-btn {
+            padding: 8px 16px;
+            font-size: 14px;
+            margin: 5px;
+        }
+        
         #statusContainer {
             margin-top: 20px;
+            padding: 20px;
+            border-left: 5px solid #3498db;
+            background: linear-gradient(135deg, #e8f4fc 0%, #f0f8ff 100%);
+            border-radius: 10px;
+        }
+        
+        .api-status {
+            background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
             padding: 15px;
-            border-left: 4px solid #3498db;
-            background-color: #e8f4fc;
+            border-radius: 10px;
+            margin-bottom: 15px;
+            border-left: 4px solid #28a745;
         }
+        .api-status.error {
+            border-left-color: #dc3545;
+            background: linear-gradient(135deg, #f8d7da 0%, #f5c6cb 100%);
+        }
+        
         .loader {
             display: inline-block;
             width: 20px;
             height: 20px;
-            border: 3px solid rgba(0, 0, 0, 0.1);
+            border: 3px solid rgba(255, 255, 255, 0.3);
             border-radius: 50%;
             border-top-color: #3498db;
             animation: spin 1s ease infinite;
@@ -70,6 +108,7 @@
         @keyframes spin {
             to { transform: rotate(360deg); }
         }
+        
         .stats-container {
             display: grid;
             grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
@@ -77,14 +116,18 @@
             margin-top: 20px;
         }
         .stat-card {
-            background-color: white;
-            padding: 15px;
-            border-radius: 8px;
-            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+            background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
+            padding: 20px;
+            border-radius: 12px;
+            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
             text-align: center;
+            transition: transform 0.3s ease;
+        }
+        .stat-card:hover {
+            transform: translateY(-5px);
         }
         .stat-value {
-            font-size: 24px;
+            font-size: 28px;
             font-weight: bold;
             color: #2c3e50;
             margin: 10px 0;
@@ -92,80 +135,181 @@
         .stat-label {
             color: #7f8c8d;
             font-size: 14px;
+            font-weight: 500;
+        }
+        
+        .progress-container {
+            margin-top: 15px;
+            background-color: #ecf0f1;
+            border-radius: 10px;
+            height: 25px;
+            overflow: hidden;
+            position: relative;
+        }
+        .progress-bar {
+            height: 100%;
+            background: linear-gradient(45deg, #3498db, #2980b9);
+            transition: width 0.3s ease;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: white;
+            font-size: 12px;
+            font-weight: bold;
+            position: relative;
+        }
+        .progress-bar.complete {
+            background: linear-gradient(45deg, #27ae60, #219955);
+        }
+        .progress-bar.error {
+            background: linear-gradient(45deg, #e74c3c, #c0392b);
+        }
+        
+        .time-estimate {
+            background: rgba(52, 152, 219, 0.1);
+            padding: 10px;
+            border-radius: 8px;
+            margin-top: 10px;
+            font-size: 14px;
+            color: #2980b9;
+        }
+        
+        .failed-chunks {
+            background: rgba(231, 76, 60, 0.1);
+            border: 1px solid rgba(231, 76, 60, 0.2);
+            border-radius: 8px;
+            padding: 15px;
+            margin-top: 15px;
+        }
+        .failed-chunks h4 {
+            color: #e74c3c;
+            margin-top: 0;
+        }
+        .failed-chunk-item {
+            background: white;
+            padding: 10px;
+            margin: 5px 0;
+            border-radius: 5px;
+            border-left: 3px solid #e74c3c;
         }
+        
         #questionsPreview {
             margin-top: 20px;
-            max-height: 400px;
+            max-height: 500px;
             overflow-y: auto;
-            background-color: white;
-            border-radius: 8px;
-            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+            background: rgba(255, 255, 255, 0.9);
+            border-radius: 12px;
+            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
         }
         table {
             width: 100%;
             border-collapse: collapse;
         }
         th, td {
-            padding: 12px 15px;
+            padding: 15px;
             text-align: left;
-            border-bottom: 1px solid #ddd;
+            border-bottom: 1px solid #e0e6ed;
         }
         th {
-            background-color: #f8f9fa;
+            background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
             font-weight: 600;
+            color: #495057;
+            position: sticky;
+            top: 0;
         }
         tr:hover {
-            background-color: #f1f5f9;
+            background-color: rgba(52, 152, 219, 0.05);
         }
+        
         .badge {
             display: inline-block;
-            padding: 4px 8px;
-            border-radius: 4px;
-            font-size: 12px;
+            padding: 6px 12px;
+            border-radius: 20px;
+            font-size: 11px;
             font-weight: 600;
             text-transform: uppercase;
             color: white;
-        }
-        .badge-easy { background-color: #27ae60; }
-        .badge-medium { background-color: #f39c12; }
-        .badge-hard { background-color: #e74c3c; }
-        .badge-factual { background-color: #3498db; }
-        .badge-conceptual { background-color: #9b59b6; }
-        .badge-applied { background-color: #e67e22; }
+            letter-spacing: 0.5px;
+        }
+        .badge-easy { background: linear-gradient(45deg, #27ae60, #2ecc71); }
+        .badge-medium { background: linear-gradient(45deg, #f39c12, #e67e22); }
+        .badge-hard { background: linear-gradient(45deg, #e74c3c, #c0392b); }
+        .badge-factual { background: linear-gradient(45deg, #3498db, #2980b9); }
+        .badge-conceptual { background: linear-gradient(45deg, #9b59b6, #8e44ad); }
+        .badge-applied { background: linear-gradient(45deg, #e67e22, #d35400); }
         
-        .progress-container {
-            margin-top: 15px;
-            background-color: #ecf0f1;
-            border-radius: 4px;
-            height: 20px;
-            overflow: hidden;
-        }
-        .progress-bar {
-            height: 100%;
-            background-color: #3498db;
-            transition: width 0.3s ease;
+        .control-panel {
             display: flex;
+            flex-wrap: wrap;
+            gap: 10px;
+            margin-bottom: 20px;
             align-items: center;
-            justify-content: center;
-            color: white;
-            font-size: 12px;
-            font-weight: bold;
         }
-        .progress-bar.complete {
-            background-color: #27ae60;
+        
+        .alert {
+            padding: 15px;
+            border-radius: 8px;
+            margin: 10px 0;
         }
-        .progress-bar.error {
-            background-color: #e74c3c;
+        .alert-success {
+            background-color: #d4edda;
+            border: 1px solid #c3e6cb;
+            color: #155724;
+        }
+        .alert-warning {
+            background-color: #fff3cd;
+            border: 1px solid #ffeaa7;
+            color: #856404;
+        }
+        .alert-error {
+            background-color: #f8d7da;
+            border: 1px solid #f5c6cb;
+            color: #721c24;
+        }
+        
+        @media (max-width: 768px) {
+            body {
+                padding: 10px;
+            }
+            .stats-container {
+                grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+                gap: 10px;
+            }
+            .control-panel {
+                flex-direction: column;
+                align-items: stretch;
+            }
+            button {
+                width: 100%;
+                margin: 5px 0;
+            }
         }
     </style>
 </head>
 <body>
-    <h1>Générateur de Questions sur les Vaccins</h1>
+    <h1>🧬 Générateur de Questions sur les Vaccins</h1>
     
+    <!-- API Status Container -->
     <div class="container">
-        <h2>Générer des Questions</h2>
-        <p>Cliquez sur le bouton ci-dessous pour commencer la génération de questions à partir du guide de vaccination.</p>
-        <button id="generateBtn">Générer des Questions</button>
+        <h3>🔑 État des Clés API</h3>
+        <div id="apiStatusContainer">
+            <div class="api-status">
+                <span>Vérification des clés API...</span>
+            </div>
+        </div>
+        <button id="checkApiBtn" class="small-btn">Vérifier les Clés</button>
+    </div>
+    
+    <!-- Generation Control Container -->
+    <div class="container">
+        <h2>🚀 Génération de Questions</h2>
+        <p>Générez des questions à partir du guide de vaccination avec gestion multi-clés et suivi en temps réel.</p>
+        
+        <div class="control-panel">
+            <button id="generateBtn">Générer des Questions</button>
+            <button id="downloadProgressBtn" class="download-btn small-btn" style="display: none;">Télécharger Progrès</button>
+            <button id="retryFailedBtn" class="warning-btn small-btn" style="display: none;">Voir Échecs</button>
+        </div>
         
         <div id="statusContainer" style="display: none;">
             <div id="statusHeader">
@@ -177,25 +321,39 @@
                 <div id="progressBar" class="progress-bar" style="width: 0%">0%</div>
             </div>
             
-            <div id="statusDetails" style="margin-top: 10px;">
-                <div>Chunks traités: <span id="processedChunks">0</span>/<span id="totalChunks">0</span></div>
-                <div>Questions générées: <span id="questionsGenerated">0</span></div>
+            <div id="statusDetails" style="margin-top: 15px;">
+                <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px;">
+                    <div><strong>Chunks traités:</strong> <span id="processedChunks">0</span>/<span id="totalChunks">0</span></div>
+                    <div><strong>Questions générées:</strong> <span id="questionsGenerated">0</span></div>
+                    <div><strong>Clé API actuelle:</strong> <span id="currentApiKey">-</span></div>
+                    <div><strong>Échecs:</strong> <span id="failedChunks">0</span></div>
+                </div>
+            </div>
+            
+            <div id="timeEstimate" class="time-estimate" style="display: none;">
+                <strong>⏱️ Temps estimé restant:</strong> <span id="estimatedTime">Calcul en cours...</span>
+            </div>
+            
+            <div id="failedChunksContainer" class="failed-chunks" style="display: none;">
+                <h4>❌ Chunks Échoués</h4>
+                <div id="failedChunksList"></div>
             </div>
         </div>
     </div>
     
+    <!-- Results Container -->
     <div class="container" id="resultsContainer" style="display: none;">
-        <h2>Résultats</h2>
+        <h2>📊 Résultats de Génération</h2>
         
         <div class="stats-container" id="statsContainer">
             <!-- Stats will be populated here -->
         </div>
         
-        <div style="margin-top: 20px; text-align: center;">
-            <button id="downloadBtn" class="download-btn">Télécharger le Dataset</button>
+        <div style="margin-top: 25px; text-align: center;">
+            <button id="downloadBtn" class="download-btn">📥 Télécharger le Dataset Complet</button>
         </div>
         
-        <h3 style="margin-top: 30px;">Aperçu des Questions</h3>
+        <h3 style="margin-top: 30px;">👀 Aperçu des Questions</h3>
         <div id="questionsPreview">
             <table>
                 <thead>
@@ -204,6 +362,8 @@
                         <th>Type</th>
                         <th>Difficulté</th>
                         <th>But d'Entraînement</th>
+                        <th>Chunk ID</th>
+                        <th>Clé API</th>
                     </tr>
                 </thead>
                 <tbody id="questionsTableBody">
@@ -214,105 +374,144 @@
     </div>
 
     <script>
-        const apiBaseUrl = window.location.origin; // Use the same origin for API calls
+        const apiBaseUrl = window.location.origin;
         let generatedDataset = null;
         let downloadUrl = '';
         let statusCheckInterval = null;
+        let currentStatus = null;
         
+        // Event listeners
         document.getElementById('generateBtn').addEventListener('click', startGeneration);
         document.getElementById('downloadBtn').addEventListener('click', downloadDataset);
+        document.getElementById('downloadProgressBtn').addEventListener('click', downloadProgress);
+        document.getElementById('checkApiBtn').addEventListener('click', checkApiKeys);
+        document.getElementById('retryFailedBtn').addEventListener('click', showFailedChunks);
         
-        // Check for ongoing generation when the page loads
-        window.addEventListener('load', checkOngoingGeneration);
-        
-        function checkOngoingGeneration() {
-            fetch(`${apiBaseUrl}/generation-status`)
-                .then(response => response.json())
-                .then(status => {
-                    if (status.is_running || status.completed) {
-                        setupStatusMonitoring();
-                        updateStatusDisplay(status);
-                    }
-                    
-                    if (status.completed && status.result_file) {
-                        downloadUrl = `/download/${status.result_file}`;
-                        loadResults();
-                    }
-                })
-                .catch(error => {
-                    console.error('Error checking generation status:', error);
-                });
+        // Check for ongoing generation and API status when the page loads
+        window.addEventListener('load', () => {
+            checkApiKeys();
+            checkOngoingGeneration();
+        });
+        
+        async function checkApiKeys() {
+            try {
+                const response = await fetch(`${apiBaseUrl}/api-keys-status`);
+                const status = await response.json();
+                
+                const container = document.getElementById('apiStatusContainer');
+                
+                if (status.status === 'success') {
+                    container.innerHTML = `
+                        <div class="api-status">
+                            <strong>✅ ${status.total_keys} clés API configurées</strong><br>
+                            <small>Clé actuelle: Index ${status.current_key_index} | Rotation automatique activée</small>
+                        </div>
+                    `;
+                } else {
+                    container.innerHTML = `
+                        <div class="api-status error">
+                            <strong>❌ Erreur de configuration API</strong><br>
+                            <small>${status.message}</small>
+                        </div>
+                    `;
+                }
+            } catch (error) {
+                console.error('Error checking API keys:', error);
+                document.getElementById('apiStatusContainer').innerHTML = `
+                    <div class="api-status error">
+                        <strong>❌ Impossible de vérifier les clés API</strong><br>
+                        <small>${error.message}</small>
+                    </div>
+                `;
+            }
         }
         
-        function startGeneration() {
+        async function checkOngoingGeneration() {
+            try {
+                const response = await fetch(`${apiBaseUrl}/generation-status`);
+                const status = await response.json();
+                currentStatus = status;
+                
+                if (status.is_running || status.completed) {
+                    setupStatusMonitoring();
+                    updateStatusDisplay(status);
+                }
+                
+                if (status.completed && status.result_file) {
+                    downloadUrl = `/download/${status.result_file}`;
+                    await loadResults();
+                }
+            } catch (error) {
+                console.error('Error checking generation status:', error);
+            }
+        }
+        
+        async function startGeneration() {
             const generateBtn = document.getElementById('generateBtn');
             const statusContainer = document.getElementById('statusContainer');
             const resultsContainer = document.getElementById('resultsContainer');
             
-            // Disable button and show status
             generateBtn.disabled = true;
             statusContainer.style.display = 'block';
             resultsContainer.style.display = 'none';
             
-            // Call the API endpoint to start generation
-            fetch(`${apiBaseUrl}/generate-questions`)
-                .then(response => {
-                    if (!response.ok) {
-                        throw new Error(`HTTP error! Status: ${response.status}`);
-                    }
-                    return response.json();
-                })
-                .then(data => {
-                    console.log('Generation started:', data);
-                    
-                    // Setup status monitoring
-                    setupStatusMonitoring();
-                })
-                .catch(error => {
-                    console.error('Error starting generation:', error);
-                    document.getElementById('statusText').textContent = `Erreur: ${error.message}`;
-                    generateBtn.disabled = false;
-                });
+            try {
+                const response = await fetch(`${apiBaseUrl}/generate-questions`);
+                
+                if (!response.ok) {
+                    throw new Error(`HTTP error! Status: ${response.status}`);
+                }
+                
+                const data = await response.json();
+                console.log('Generation started:', data);
+                
+                // Show success alert
+                showAlert('Génération démarrée avec succès!', 'success');
+                
+                setupStatusMonitoring();
+            } catch (error) {
+                console.error('Error starting generation:', error);
+                showAlert(`Erreur lors du démarrage: ${error.message}`, 'error');
+                document.getElementById('statusText').textContent = `Erreur: ${error.message}`;
+                generateBtn.disabled = false;
+            }
         }
         
         function setupStatusMonitoring() {
-            // Clear any existing interval
             if (statusCheckInterval) {
                 clearInterval(statusCheckInterval);
             }
             
-            // Show the status container
             document.getElementById('statusContainer').style.display = 'block';
+            document.getElementById('downloadProgressBtn').style.display = 'inline-block';
             
-            // Start checking status regularly
-            statusCheckInterval = setInterval(checkGenerationStatus, 5000);
-            
-            // Do an immediate check
+            statusCheckInterval = setInterval(checkGenerationStatus, 3000);
             checkGenerationStatus();
         }
         
-        function checkGenerationStatus() {
-            fetch(`${apiBaseUrl}/generation-status`)
-                .then(response => response.json())
-                .then(status => {
-                    updateStatusDisplay(status);
-                    
-                    // If generation is completed, stop checking and load results
-                    if (status.completed) {
-                        clearInterval(statusCheckInterval);
-                        downloadUrl = `/download/${status.result_file}`;
-                        loadResults();
-                    }
-                    
-                    // If there was an error, stop checking
-                    if (status.error) {
-                        clearInterval(statusCheckInterval);
-                        document.getElementById('generateBtn').disabled = false;
-                    }
-                })
-                .catch(error => {
-                    console.error('Error checking status:', error);
-                });
+        async function checkGenerationStatus() {
+            try {
+                const response = await fetch(`${apiBaseUrl}/generation-status`);
+                const status = await response.json();
+                currentStatus = status;
+                
+                updateStatusDisplay(status);
+                
+                if (status.completed) {
+                    clearInterval(statusCheckInterval);
+                    downloadUrl = `/download/${status.result_file}`;
+                    await loadResults();
+                    showAlert('Génération terminée avec succès!', 'success');
+                }
+                
+                if (status.error) {
+                    clearInterval(statusCheckInterval);
+                    document.getElementById('generateBtn').disabled = false;
+                    showAlert(`Erreur durant la génération: ${status.error}`, 'error');
+                }
+            } catch (error) {
+                console.error('Error checking status:', error);
+            }
         }
         
         function updateStatusDisplay(status) {
@@ -321,54 +520,83 @@
             const processedChunks = document.getElementById('processedChunks');
             const totalChunks = document.getElementById('totalChunks');
             const questionsGenerated = document.getElementById('questionsGenerated');
+            const currentApiKey = document.getElementById('currentApiKey');
+            const failedChunks = document.getElementById('failedChunks');
+            const timeEstimate = document.getElementById('timeEstimate');
+            const estimatedTime = document.getElementById('estimatedTime');
             
-            // Update text and counts
+            // Update status text
             if (status.error) {
-                statusText.textContent = `Erreur: ${status.error}`;
+                statusText.textContent = `❌ Erreur: ${status.error}`;
                 progressBar.classList.add('error');
             } else if (status.completed) {
-                statusText.textContent = 'Génération terminée avec succès !';
+                statusText.textContent = '✅ Génération terminée avec succès !';
                 progressBar.classList.add('complete');
             } else if (status.is_running) {
-                statusText.textContent = 'Génération des questions en cours...';
+                statusText.textContent = '⚡ Génération des questions en cours...';
             }
             
-            // Update progress data
-            processedChunks.textContent = status.processed_chunks;
-            totalChunks.textContent = status.total_chunks;
-            questionsGenerated.textContent = status.questions_generated;
+            // Update counts and progress
+            processedChunks.textContent = status.processed_chunks || 0;
+            totalChunks.textContent = status.total_chunks || 0;
+            questionsGenerated.textContent = status.questions_generated || 0;
+            currentApiKey.textContent = status.current_api_key_index || 0;
+            failedChunks.textContent = (status.failed_chunks || []).length;
             
-            // Calculate and update progress percentage
+            // Update progress bar
             if (status.total_chunks > 0) {
                 const percentage = Math.round((status.processed_chunks / status.total_chunks) * 100);
                 progressBar.style.width = `${percentage}%`;
                 progressBar.textContent = `${percentage}%`;
             }
+            
+            // Show time estimate
+            if (status.estimated_remaining_minutes) {
+                timeEstimate.style.display = 'block';
+                const minutes = Math.round(status.estimated_remaining_minutes);
+                estimatedTime.textContent = `${minutes} minutes`;
+            }
+            
+            // Show failed chunks
+            if (status.failed_chunks && status.failed_chunks.length > 0) {
+                document.getElementById('retryFailedBtn').style.display = 'inline-block';
+                updateFailedChunksDisplay(status.failed_chunks);
+            }
         }
         
-        function loadResults() {
+        function updateFailedChunksDisplay(failedChunks) {
+            const container = document.getElementById('failedChunksContainer');
+            const list = document.getElementById('failedChunksList');
+            
+            if (failedChunks.length > 0) {
+                container.style.display = 'block';
+                list.innerHTML = failedChunks.map(chunk => `
+                    <div class="failed-chunk-item">
+                        <strong>Chunk ${chunk.chunk_id}:</strong> ${chunk.error}<br>
+                        <small>Tentatives: ${chunk.attempts}</small>
+                    </div>
+                `).join('');
+            }
+        }
+        
+        async function loadResults() {
             if (!downloadUrl) return;
             
-            // Fetch the generated dataset
-            fetch(`${apiBaseUrl}${downloadUrl}`)
-                .then(response => {
-                    if (!response.ok) {
-                        throw new Error(`HTTP error! Status: ${response.status}`);
-                    }
-                    return response.json();
-                })
-                .then(dataset => {
-                    generatedDataset = dataset;
-                    displayResults(dataset);
-                    
-                    // Update status
-                    const statusText = document.getElementById('statusText');
-                    statusText.textContent = 'Génération terminée avec succès !';
-                    document.getElementById('generateBtn').disabled = false;
-                })
-                .catch(error => {
-                    console.error('Error loading results:', error);
-                });
+            try {
+                const response = await fetch(`${apiBaseUrl}${downloadUrl}`);
+                if (!response.ok) {
+                    throw new Error(`HTTP error! Status: ${response.status}`);
+                }
+                
+                const dataset = await response.json();
+                generatedDataset = dataset;
+                displayResults(dataset);
+                
+                document.getElementById('generateBtn').disabled = false;
+            } catch (error) {
+                console.error('Error loading results:', error);
+                showAlert(`Erreur lors du chargement des résultats: ${error.message}`, 'error');
+            }
         }
         
         function displayResults(dataset) {
@@ -376,56 +604,57 @@
             const statsContainer = document.getElementById('statsContainer');
             const questionsTableBody = document.getElementById('questionsTableBody');
             
-            // Display dataset info stats
+            // Clear and populate stats
             statsContainer.innerHTML = '';
             
-            // Total questions
+            // Main stats
             addStatCard(statsContainer, dataset.dataset_info.total_questions, 'Questions Totales');
+            addStatCard(statsContainer, dataset.dataset_info.successful_chunks || 0, 'Chunks Réussis');
+            addStatCard(statsContainer, dataset.dataset_info.failed_chunks || 0, 'Chunks Échoués');
             
-            // Count by type
+            // Type distribution
             const typeCount = countByProperty(dataset.questions, 'type');
             for (const [type, count] of Object.entries(typeCount)) {
-                addStatCard(statsContainer, count, `Questions ${capitalizeFirstLetter(type)}`);
+                addStatCard(statsContainer, count, `${capitalizeFirstLetter(type)}`);
             }
             
-            // Count by difficulty
+            // Difficulty distribution
             const difficultyCount = countByProperty(dataset.questions, 'difficulty');
             for (const [difficulty, count] of Object.entries(difficultyCount)) {
-                addStatCard(statsContainer, count, `Niveau ${capitalizeFirstLetter(difficulty)}`);
+                addStatCard(statsContainer, count, `${capitalizeFirstLetter(difficulty)}`);
+            }
+            
+            // Success rate
+            if (dataset.dataset_info.total_chunks_processed) {
+                const successRate = Math.round(((dataset.dataset_info.successful_chunks || 0) / dataset.dataset_info.total_chunks_processed) * 100);
+                addStatCard(statsContainer, `${successRate}%`, 'Taux de Réussite');
             }
             
-            // Display questions preview
+            // Populate questions table
             questionsTableBody.innerHTML = '';
-            dataset.questions.forEach(question => {
+            dataset.questions.forEach((question, index) => {
+                if (index < 50) { // Limit display for performance
+                    const row = document.createElement('tr');
+                    
+                    row.innerHTML = `
+                        <td>${question.question}</td>
+                        <td><span class="badge badge-${question.type}">${question.type}</span></td>
+                        <td><span class="badge badge-${question.difficulty}">${question.difficulty}</span></td>
+                        <td>${question.training_purpose}</td>
+                        <td>${question.chunk_id}</td>
+                        <td>${question.api_key_used || 'N/A'}</td>
+                    `;
+                    
+                    questionsTableBody.appendChild(row);
+                }
+            });
+            
+            if (dataset.questions.length > 50) {
                 const row = document.createElement('tr');
-                
-                const questionCell = document.createElement('td');
-                questionCell.textContent = question.question;
-                
-                const typeCell = document.createElement('td');
-                const typeBadge = document.createElement('span');
-                typeBadge.className = `badge badge-${question.type}`;
-                typeBadge.textContent = question.type;
-                typeCell.appendChild(typeBadge);
-                
-                const difficultyCell = document.createElement('td');
-                const difficultyBadge = document.createElement('span');
-                difficultyBadge.className = `badge badge-${question.difficulty}`;
-                difficultyBadge.textContent = question.difficulty;
-                difficultyCell.appendChild(difficultyBadge);
-                
-                const purposeCell = document.createElement('td');
-                purposeCell.textContent = question.training_purpose;
-                
-                row.appendChild(questionCell);
-                row.appendChild(typeCell);
-                row.appendChild(difficultyCell);
-                row.appendChild(purposeCell);
-                
+                row.innerHTML = `<td colspan="6" style="text-align: center; font-style: italic; color: #666;">... et ${dataset.questions.length - 50} autres questions</td>`;
                 questionsTableBody.appendChild(row);
-            });
+            }
             
-            // Show the results container
             resultsContainer.style.display = 'block';
         }
         
@@ -433,16 +662,11 @@
             const card = document.createElement('div');
             card.className = 'stat-card';
             
-            const valueElement = document.createElement('div');
-            valueElement.className = 'stat-value';
-            valueElement.textContent = value;
+            card.innerHTML = `
+                <div class="stat-value">${value}</div>
+                <div class="stat-label">${label}</div>
+            `;
             
-            const labelElement = document.createElement('div');
-            labelElement.className = 'stat-label';
-            labelElement.textContent = label;
-            
-            card.appendChild(valueElement);
-            card.appendChild(labelElement);
             container.appendChild(card);
         }
         
@@ -461,9 +685,60 @@
         
         function downloadDataset() {
             if (downloadUrl) {
-                window.location.href = `${apiBaseUrl}${downloadUrl}`;
+                window.open(`${apiBaseUrl}${downloadUrl}`, '_blank');
+            }
+        }
+        
+        async function downloadProgress() {
+            try {
+                const response = await fetch(`${apiBaseUrl}/download-progress`);
+                if (response.ok) {
+                    const blob = await response.blob();
+                    const url = window.URL.createObjectURL(blob);
+                    const a = document.createElement('a');
+                    a.href = url;
+                    a.download = `progress_${new Date().getTime()}.json`;
+                    document.body.appendChild(a);
+                    a.click();
+                    window.URL.revokeObjectURL(url);
+                    document.body.removeChild(a);
+                    showAlert('Fichier de progrès téléchargé!', 'success');
+                } else {
+                    throw new Error('Pas de fichier de progrès disponible');
+                }
+            } catch (error) {
+                showAlert(`Erreur de téléchargement: ${error.message}`, 'error');
+            }
+        }
+        
+        async function showFailedChunks() {
+            try {
+                const response = await fetch(`${apiBaseUrl}/retry-failed`);
+                const data = await response.json();
+                
+                if (data.failed_chunks && data.failed_chunks.length > 0) {
+                    updateFailedChunksDisplay(data.failed_chunks);
+                    document.getElementById('failedChunksContainer').style.display = 'block';
+                    showAlert(`${data.failed_chunks.length} chunks ont échoué. Voir les détails ci-dessous.`, 'warning');
+                } else {
+                    showAlert('Aucun chunk échoué trouvé!', 'success');
+                }
+            } catch (error) {
+                showAlert(`Erreur: ${error.message}`, 'error');
             }
         }
+        
+        function showAlert(message, type) {
+            const alertDiv = document.createElement('div');
+            alertDiv.className = `alert alert-${type}`;
+            alertDiv.textContent = message;
+            
+            document.body.insertBefore(alertDiv, document.body.firstChild);
+            
+            setTimeout(() => {
+                alertDiv.remove();
+            }, 5000);
+        }
     </script>
 </body>
 </html>