Update app.py

app.py

@@ -1,13 +1,10 @@
 import gradio as gr
 import base64
-import requests
-import io
-from PIL import Image
-import json
 import os
-from together import Together
 import tempfile
 import uuid
+from together import Together
+from PIL import Image
 
 def encode_image_to_base64(image_path):
     """Convert image to base64 encoding"""
@@ -20,15 +17,12 @@ def save_uploaded_image(image):
         return None
     
     with tempfile.NamedTemporaryFile(delete=False, suffix='.jpg') as temp_file:
-        if isinstance(image, dict) and "path" in image:  # Gradio returns image as dict
-            # Copy the uploaded image to our temporary file
+        if isinstance(image, dict) and "path" in image:
             with open(image["path"], "rb") as img_file:
                 temp_file.write(img_file.read())
         elif isinstance(image, Image.Image):
-            # If it's a PIL Image, save it
             image.save(temp_file.name, format="JPEG")
         else:
-            # Try to handle other formats
             try:
                 Image.open(image).save(temp_file.name, format="JPEG")
             except Exception:
@@ -44,13 +38,10 @@ def analyze_single_image(client, img_path):
     
     user_prompt = "Please identify all the food ingredients visible in this image. List each ingredient on a new line."
     
-    # First, convert the image to base64
     try:
         with open(img_path, "rb") as image_file:
-            # Read the binary data and encode as base64
             base64_image = base64.b64encode(image_file.read()).decode('utf-8')
             
-            # Create message with the image properly formatted
             content = [
                 {"type": "text", "text": user_prompt},
                 {
@@ -64,14 +55,8 @@ def analyze_single_image(client, img_path):
             response = client.chat.completions.create(
                 model="meta-llama/Llama-Vision-Free",
                 messages=[
-                    {
-                        "role": "system",
-                        "content": system_prompt
-                    },
-                    {
-                        "role": "user",
-                        "content": content
-                    }
+                    {"role": "system", "content": system_prompt},
+                    {"role": "user", "content": content}
                 ],
                 max_tokens=500,
                 temperature=0.2
@@ -82,22 +67,18 @@ def analyze_single_image(client, img_path):
         return f"Error analyzing image: {str(e)}"
 
 def get_recipe_suggestions(api_key, images, num_recipes=3, dietary_restrictions="None", cuisine_preference="Any"):
-    """
-    Get recipe suggestions based on the uploaded images of ingredients
-    """
+    """Get recipe suggestions based on uploaded images of ingredients"""
     if not api_key:
         return "Please provide your Together API key."
     
     if not images or len(images) == 0 or all(img is None for img in images):
         return "Please upload at least one image of ingredients."
     
-    # Filter out None values
     valid_images = [img for img in images if img is not None]
     
     if len(valid_images) == 0:
         return "No valid images were uploaded. Please try again."
     
-    # Save all uploaded images
     image_paths = []
     for img in valid_images:
         img_path = save_uploaded_image(img)
@@ -108,20 +89,16 @@ def get_recipe_suggestions(api_key, images, num_recipes=3, dietary_restrictions=
         return "Failed to process the uploaded images."
     
     try:
-        # Initialize Together client with the provided API key
         client = Together(api_key=api_key)
         
-        # First, analyze each image separately to identify ingredients
         all_ingredients = []
         for img_path in image_paths:
             ingredients_text = analyze_single_image(client, img_path)
             all_ingredients.append(ingredients_text)
         
-        # Combine all ingredients into one list
         combined_ingredients = "\n\n".join([f"Image {i+1} ingredients:\n{ingredients}" 
                                           for i, ingredients in enumerate(all_ingredients)])
         
-        # Now generate recipes based on all identified ingredients
         system_prompt = """You are a culinary expert AI assistant that specializes in creating recipes based on available ingredients.
         You will be provided with lists of ingredients identified from multiple images. Your task is to suggest creative, 
         detailed recipes that use as many of the identified ingredients as possible.
@@ -146,31 +123,22 @@ def get_recipe_suggestions(api_key, images, num_recipes=3, dietary_restrictions=
         
         Please be creative with your recipe suggestions and try to use ingredients from multiple images if possible."""
         
-        # Generate recipe suggestions based on all identified ingredients
         response = client.chat.completions.create(
             model="meta-llama/Llama-Vision-Free",
             messages=[
-                {
-                    "role": "system",
-                    "content": system_prompt
-                },
-                {
-                    "role": "user",
-                    "content": user_prompt
-                }
+                {"role": "system", "content": system_prompt},
+                {"role": "user", "content": user_prompt}
             ],
-            max_tokens=2048,
-            temperature=0.7
+            max_tokens=3000,
+            temperature=0.6
         )
         
-        # Clean up the temporary files
         for img_path in image_paths:
             try:
                 os.unlink(img_path)
             except:
                 pass
         
-        # Add information about the ingredients identified
         result = "## 📋 Ingredients Identified\n\n"
         result += combined_ingredients
         result += "\n\n---\n\n"
@@ -180,7 +148,6 @@ def get_recipe_suggestions(api_key, images, num_recipes=3, dietary_restrictions=
         return result
         
     except Exception as e:
-        # Clean up the temporary files in case of error
         for img_path in image_paths:
             try:
                 os.unlink(img_path)
@@ -188,99 +155,86 @@ def get_recipe_suggestions(api_key, images, num_recipes=3, dietary_restrictions=
                 pass
         return f"Error: {str(e)}"
 
-# Enhanced Custom CSS for a more appealing interface
+# Enhanced Custom CSS
 custom_css = """
-@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
 
 :root {
-    --primary-color: #FF6B6B;
-    --primary-dark: #e55858;
-    --secondary-color: #4ECDC4;
-    --accent-color: #FFD166;
-    --background-color: #f8f9fa;
-    --text-color: #212529;
-    --card-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
-    --hover-shadow: 0 12px 28px rgba(0, 0, 0, 0.15);
-    --border-radius: 12px;
-    --font-family: 'Poppins', sans-serif;
+    --primary-color: #6366f1;
+    --primary-dark: #4f46e5;
+    --secondary-color: #10b981;
+    --accent-color: #f59e0b;
+    --background-color: #1f2937;
+    --card-background: rgba(31, 41, 55, 0.8);
+    --text-color: #f3f4f6;
+    --border-radius: 16px;
+    --glass-background: rgba(255, 255, 255, 0.1);
+    --glass-border: rgba(255, 255, 255, 0.2);
+    --font-family: 'Inter', sans-serif;
 }
 
 body {
     font-family: var(--font-family);
-    background-color: var(--background-color);
+    background: linear-gradient(135deg, #111827 0%, #1f2937 100%);
     color: var(--text-color);
     margin: 0;
     padding: 0;
+    min-height: 100vh;
 }
 
 .container {
-    max-width: 1200px;
+    max-width: 1400px;
     margin: 0 auto;
-    padding: 20px;
+    padding: 40px 20px;
 }
 
 .app-header {
     text-align: center;
-    margin-bottom: 40px;
-    padding: 50px 20px;
-    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
+    margin-bottom: 60px;
+    padding: 60px 20px;
+    background: var(--glass-background);
     border-radius: var(--border-radius);
-    color: white;
-    box-shadow: var(--card-shadow);
-    position: relative;
-    overflow: hidden;
-}
-
-.app-header::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><path fill="rgba(255,255,255,0.05)" d="M30,20 L70,20 L50,50 Z"></path></svg>') repeat;
-    opacity: 0.3;
+    backdrop-filter: blur(10px);
+    border: 1px solid var(--glass-border);
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
 }
 
 .app-title {
-    font-size: 3.5em;
-    margin-bottom: 15px;
+    font-size: 3.2em;
     font-weight: 700;
-    text-shadow: 0 2px 4px rgba(0,0,0,0.1);
-    position: relative;
+    margin-bottom: 15px;
+    background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
 }
 
 .app-subtitle {
-    font-size: 1.3em;
-    opacity: 0.9;
-    max-width: 700px;
+    font-size: 1.2em;
+    opacity: 0.85;
+    max-width: 800px;
     margin: 0 auto;
     line-height: 1.6;
     font-weight: 300;
-    position: relative;
 }
 
 .input-section, .output-section {
-    background-color: white;
+    background: var(--card-background);
     border-radius: var(--border-radius);
-    padding: 30px;
-    box-shadow: var(--card-shadow);
-    margin-bottom: 30px;
-    transition: all 0.3s ease;
-    border: 1px solid rgba(0,0,0,0.05);
+    padding: 40px;
+    margin-bottom: 40px;
+    backdrop-filter: blur(10px);
+    border: 1px solid var(--glass-border);
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
 }
 
 .input-section:hover, .output-section:hover {
-    box-shadow: var(--hover-shadow);
     transform: translateY(-5px);
+    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3);
 }
 
 .section-header {
     color: var(--primary-color);
-    margin-top: 0;
-    font-size: 1.7em;
-    border-bottom: 2px solid var(--secondary-color);
-    padding-bottom: 15px;
+    font-size: 1.8em;
     margin-bottom: 25px;
     font-weight: 600;
     display: flex;
@@ -288,104 +242,70 @@ body {
 }
 
 .section-header i {
-    margin-right: 10px;
-    font-size: 1.2em;
+    margin-right: 12px;
+    font-size: 1.3em;
 }
 
 .image-upload-container {
-    border: 3px dashed var(--secondary-color);
+    border: 2px dashed var(--secondary-color);
     border-radius: var(--border-radius);
-    padding: 30px;
+    padding: 40px;
     text-align: center;
-    margin-bottom: 25px;
+    margin-bottom: 30px;
+    background: var(--glass-background);
     transition: all 0.3s ease;
-    background-color: rgba(78, 205, 196, 0.05);
-    position: relative;
 }
 
 .image-upload-container:hover {
     border-color: var(--primary-color);
-    background-color: rgba(255, 107, 107, 0.05);
-    transform: translateY(-3px);
+    background: rgba(99, 102, 241, 0.05);
 }
 
 .image-upload-icon {
-    font-size: 3em;
+    font-size: 3.5em;
     color: var(--secondary-color);
     margin-bottom: 15px;
 }
 
 .image-upload-text {
-    color: #666;
+    color: var(--text-color);
     font-weight: 500;
+    opacity: 0.9;
 }
 
 button.primary-button {
-    background: linear-gradient(135deg, var(--primary-color) 0%, #FF8E8E 100%);
+    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
     color: white;
     border: none;
-    padding: 15px 30px;
+    padding: 16px 32px;
     border-radius: 50px;
     font-size: 1.2em;
     cursor: pointer;
     transition: all 0.3s ease;
-    box-shadow: 0 4px 10px rgba(255, 107, 107, 0.3);
+    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.4);
     font-weight: 600;
-    display: block;
     width: 100%;
     margin-top: 30px;
-    position: relative;
-    overflow: hidden;
 }
 
 button.primary-button:hover {
-    transform: translateY(-3px);
-    box-shadow: 0 8px 15px rgba(255, 107, 107, 0.4);
-    background: linear-gradient(135deg, #FF8E8E 0%, var(--primary-dark) 100%);
+    transform: translateY(-2px);
+    box-shadow: 0 8px 20px rgba(99, 102, 241, 0.6);
 }
 
 button.primary-button:active {
-    transform: translateY(1px);
-    box-shadow: 0 2px 5px rgba(255, 107, 107, 0.4);
-}
-
-button.primary-button::after {
-    content: '';
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    width: 5px;
-    height: 5px;
-    background: rgba(255, 255, 255, 0.5);
-    opacity: 0;
-    border-radius: 100%;
-    transform: scale(1, 1) translate(-50%, -50%);
-    transform-origin: 50% 50%;
-}
-
-button.primary-button:focus:not(:active)::after {
-    animation: ripple 1s ease-out;
-}
-
-@keyframes ripple {
-    0% {
-        transform: scale(0, 0);
-        opacity: 0.5;
-    }
-    100% {
-        transform: scale(100, 100);
-        opacity: 0;
-    }
+    transform: translateY(0);
+    box-shadow: 0 2px 10px rgba(99, 102, 241, 0.4);
 }
 
 .gradio-slider.svelte-17l1npl {
-    margin-bottom: 25px;
+    margin-bottom: 30px;
 }
 
 .recipe-card {
-    border-left: 5px solid var(--accent-color);
+    border-left: 4px solid var(--accent-color);
     padding: 20px;
-    background-color: #f9f9f9;
+    background: var(--glass-background);
     margin-bottom: 20px;
     border-radius: 0 var(--border-radius) var(--border-radius) 0;
     transition: all 0.3s ease;
@@ -393,29 +313,29 @@ button.primary-button:focus:not(:active)::after {
 
 .recipe-card:hover {
     transform: translateX(5px);
-    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
+    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
 }
 
 .recipe-title {
     color: var(--primary-color);
-    font-size: 1.5em;
-    margin-bottom: 10px;
+    font-size: 1.6em;
+    margin-bottom: 15px;
     font-weight: 600;
 }
 
 .footer {
     text-align: center;
-    margin-top: 60px;
-    padding: 30px 0;
-    color: #6c757d;
+    margin-top: 80px;
+    padding: 40px 0;
+    color: var(--text-color);
     font-size: 1em;
-    background-color: #f1f3f5;
+    background: var(--card-background);
     border-radius: var(--border-radius);
-    box-shadow: inset 0 2px 10px rgba(0,0,0,0.05);
+    border: 1px solid var(--glass-border);
 }
 
 .footer-content {
-    max-width: 700px;
+    max-width: 800px;
     margin: 0 auto;
 }
 
@@ -430,37 +350,30 @@ button.primary-button:focus:not(:active)::after {
 
 .footer-links a {
     color: var(--secondary-color);
-    margin: 0 10px;
+    margin: 0 15px;
     text-decoration: none;
     transition: color 0.3s ease;
 }
 
 .footer-links a:hover {
     color: var(--primary-color);
-    text-decoration: underline;
-}
-
-.icon {
-    color: var(--primary-color);
-    margin-right: 10px;
-    font-size: 1.2em;
 }
 
 .input-group {
-    margin-bottom: 25px;
+    margin-bottom: 30px;
 }
 
 .input-group label {
     display: block;
-    margin-bottom: 10px;
-    font-weight: 600;
+    margin-bottom: 12px;
+    font-weight: 500;
     color: var(--text-color);
     font-size: 1.1em;
 }
 
 .gallery-container {
     display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
     gap: 20px;
     margin-top: 20px;
 }
@@ -468,25 +381,22 @@ button.primary-button:focus:not(:active)::after {
 .gallery-item {
     border-radius: var(--border-radius);
     overflow: hidden;
-    box-shadow: var(--card-shadow);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
     transition: transform 0.3s ease;
     aspect-ratio: 1 / 1;
-    object-fit: cover;
 }
 
 .gallery-item:hover {
     transform: scale(1.05);
-    box-shadow: var(--hover-shadow);
 }
 
-/* Loading Spinner */
 .loading-container {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
-    background-color: rgba(0, 0, 0, 0.7);
+    background: rgba(17, 24, 39, 0.9);
     display: flex;
     justify-content: center;
     align-items: center;
@@ -502,170 +412,97 @@ button.primary-button:focus:not(:active)::after {
 }
 
 .loading-spinner {
-    width: 80px;
-    height: 80px;
+    width: 60px;
+    height: 60px;
+    border: 6px solid var(--glass-background);
+    border-top: 6px solid var(--primary-color);
     border-radius: 50%;
-    position: relative;
-    animation: spin 1.2s linear infinite;
-}
-
-.loading-spinner::before,
-.loading-spinner::after {
-    content: '';
-    position: absolute;
-    border-radius: 50%;
-}
-
-.loading-spinner::before {
-    width: 100%;
-    height: 100%;
-    background: linear-gradient(to right, var(--primary-color) 0%, transparent 100%);
-    animation: spin 2s linear infinite;
-}
-
-.loading-spinner::after {
-    width: 75%;
-    height: 75%;
-    background-color: rgba(0, 0, 0, 0.7);
-    top: 12.5%;
-    left: 12.5%;
+    animation: spin 1s linear infinite;
 }
 
 .loading-text {
     position: absolute;
-    bottom: -40px;
-    color: white;
+    margin-top: 80px;
+    color: var(--text-color);
     font-size: 1.2em;
     font-weight: 500;
 }
 
 @keyframes spin {
-    0% {
-        transform: rotate(0deg);
-    }
-    100% {
-        transform: rotate(360deg);
-    }
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
 }
 
 .recipe-output {
-    max-height: 800px;
+    max-height: 900px;
     overflow-y: auto;
-    padding-right: 15px;
-    line-height: 1.6;
+    padding-right: 20px;
+    line-height: 1.7;
 }
 
 .recipe-output::-webkit-scrollbar {
-    width: 8px;
+    width: 10px;
 }
 
 .recipe-output::-webkit-scrollbar-track {
-    background: #f1f1f1;
+    background: var(--glass-background);
     border-radius: 10px;
 }
 
 .recipe-output::-webkit-scrollbar-thumb {
-    background: var(--secondary-color);
-    border-radius: 10px;
-}
-
-.recipe-output::-webkit-scrollbar-thumb:hover {
     background: var(--primary-color);
+    border-radius: 10px;
 }
 
 .recipe-output h2 {
     color: var(--primary-color);
     border-bottom: 2px solid var(--secondary-color);
-    padding-bottom: 10px;
-    font-size: 1.8em;
-    margin-top: 30px;
+    padding-bottom: 12px;
+    font-size: 2em;
+    margin-top: 40px;
 }
 
 .recipe-output h3 {
     color: var(--secondary-color);
-    font-size: 1.4em;
-    margin-top: 25px;
+    font-size: 1.5em;
+    margin-top: 30px;
 }
 
-/* Form inputs styling */
 input[type="password"], input[type="text"] {
-    border: 2px solid #e9ecef;
+    border: 1px solid var(--glass-border);
+    background: var(--glass-background);
     border-radius: var(--border-radius);
-    padding: 15px;
+    padding: 14px;
     font-size: 1em;
     width: 100%;
+    color: var(--text-color);
     transition: all 0.3s ease;
-    box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
 }
 
 input[type="password"]:focus, input[type="text"]:focus {
-    border-color: var(--secondary-color);
+    border-color: var(--primary-color);
     outline: none;
-    box-shadow: 0 0 0 3px rgba(78, 205, 196, 0.2);
+    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
 }
 
-/* Custom dropdown styling */
 select {
     appearance: none;
-    background: white url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FF6B6B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") no-repeat right 15px center;
-    border: 2px solid #e9ecef;
+    background: var(--glass-background) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%236366f1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") no-repeat right 15px center;
+    border: 1px solid var(--glass-border);
     border-radius: var(--border-radius);
-    padding: 15px 45px 15px 15px;
+    padding: 14px 45px 14px 14px;
     font-size: 1em;
     width: 100%;
+    color: var(--text-color);
     transition: all 0.3s ease;
-    box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
 }
 
 select:focus {
-    border-color: var(--secondary-color);
+    border-color: var(--primary-color);
     outline: none;
-    box-shadow: 0 0 0 3px rgba(78, 205, 196, 0.2);
-}
-
-/* Tooltip styling */
-.tooltip {
-    position: relative;
-    display: inline-block;
-    cursor: pointer;
+    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
 }
 
-.tooltip .tooltiptext {
-    visibility: hidden;
-    width: 250px;
-    background-color: #333;
-    color: #fff;
-    text-align: center;
-    border-radius: 6px;
-    padding: 10px;
-    position: absolute;
-    z-index: 1;
-    bottom: 125%;
-    left: 50%;
-    margin-left: -125px;
-    opacity: 0;
-    transition: opacity 0.3s;
-    font-size: 0.9em;
-    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
-}
-
-.tooltip .tooltiptext::after {
-    content: "";
-    position: absolute;
-    top: 100%;
-    left: 50%;
-    margin-left: -5px;
-    border-width: 5px;
-    border-style: solid;
-    border-color: #333 transparent transparent transparent;
-}
-
-.tooltip:hover .tooltiptext {
-    visibility: visible;
-    opacity: 1;
-}
-
-/* Media queries for responsive design */
 @media (max-width: 768px) {
     .app-title {
         font-size: 2.5em;
@@ -676,15 +513,15 @@ select:focus {
     }
     
     .input-section, .output-section {
-        padding: 20px;
+        padding: 25px;
     }
     
     .section-header {
-        font-size: 1.5em;
+        font-size: 1.6em;
     }
     
     button.primary-button {
-        padding: 12px 25px;
+        padding: 14px 25px;
         font-size: 1.1em;
     }
 }
@@ -699,15 +536,14 @@ select:focus {
     }
     
     .input-section, .output-section {
-        padding: 15px;
+        padding: 20px;
     }
     
     .section-header {
-        font-size: 1.3em;
+        font-size: 1.4em;
     }
 }
 
-/* Remove Gradio branding */
 .gradio-container {
     max-width: 100% !important;
 }
@@ -717,21 +553,18 @@ footer.footer-links {
 }
 """
 
-# Custom HTML header with icons and improved design
+# Custom HTML header
 html_header = """
 <div class="app-header">
     <div class="app-title">🍲 Visual Recipe Assistant</div>
-    <div class="app-subtitle">Upload images of ingredients you have on hand and get personalized recipe suggestions powered by AI</div>
+    <div class="app-subtitle">Transform your ingredients into gourmet dishes with AI-powered recipe suggestions</div>
 </div>
-
 <div id="loading-overlay" class="loading-container">
     <div class="loading-spinner">
-        <div class="loading-text">Generating your recipes...</div>
+        <div class="loading-text">Crafting your recipes...</div>
     </div>
 </div>
-
 <script>
-    // JavaScript to handle loading state
     function showLoading() {
         document.getElementById('loading-overlay').classList.add('visible');
     }
@@ -739,16 +572,38 @@ html_header = """
     function hideLoading() {
         document.getElementById('loading-overlay').classList.remove('visible');
     }
+
+    document.addEventListener('DOMContentLoaded', function() {
+        const submitBtn = document.querySelector('button.primary-button');
+        const output = document.querySelector('.recipe-output');
+        
+        if (submitBtn && output) {
+            submitBtn.addEventListener('click', function() {
+                showLoading();
+                
+                const observer = new MutationObserver(function(mutations) {
+                    if (output.textContent.trim().length > 0) {
+                        hideLoading();
+                        observer.disconnect();
+                    }
+                });
+                
+                observer.observe(output, { childList: true, characterData: true, subtree: true });
+                
+                setTimeout(hideLoading, 30000);
+            });
+        }
+    });
 </script>
 """
 
-# Custom HTML footer with improved design
+# Custom HTML footer
 html_footer = """
 <div class="footer">
     <div class="footer-content">
         <p><span class="footer-brand">🍲 Visual Recipe Assistant</span></p>
         <p>Powered by Meta's Llama-Vision-Free Model & Together AI</p>
-        <p>Upload multiple ingredient images for more creative recipe combinations</p>
+        <p>Create culinary masterpieces from your pantry</p>
         <div class="footer-links">
             <a href="#" target="_blank">How It Works</a>
             <a href="#" target="_blank">Privacy Policy</a>
@@ -756,43 +611,9 @@ html_footer = """
         </div>
     </div>
 </div>
-
-<script>
-    // Add event listener to the submit button
-    document.addEventListener('DOMContentLoaded', function() {
-        const submitBtn = document.querySelector('button.primary-button');
-        if (submitBtn) {
-            submitBtn.addEventListener('click', function() {
-                showLoading();
-                
-                // Hide loading after the response is received (this is approximate)
-                setTimeout(function() {
-                    const output = document.querySelector('.recipe-output');
-                    if (output && output.textContent.trim().length > 0) {
-                        hideLoading();
-                    } else {
-                        // Check every second until content appears
-                        const checkInterval = setInterval(function() {
-                            if (output && output.textContent.trim().length > 0) {
-                                hideLoading();
-                                clearInterval(checkInterval);
-                            }
-                        }, 1000);
-                        
-                        // Fallback: hide after 30 seconds regardless
-                        setTimeout(function() {
-                            hideLoading();
-                            clearInterval(checkInterval);
-                        }, 30000);
-                    }
-                }, 3000);
-            });
-        }
-    });
-</script>
 """
 
-# Create the Gradio interface with improved design
+# Create the Gradio interface
 with gr.Blocks(css=custom_css) as app:
     gr.HTML(html_header)
     
@@ -802,14 +623,13 @@ with gr.Blocks(css=custom_css) as app:
                 gr.HTML('<h3 class="section-header"><i class="icon">🔑</i> API Configuration</h3>')
                 api_key_input = gr.Textbox(
                     label="Together API Key", 
-                    placeholder="Enter your Together API key here...",
+                    placeholder="Enter your Together API key...",
                     type="password",
                     elem_classes="input-group",
-                    info="Your API key will remain private and is used only for this session."
+                    info="Your API key is used only for this session and remains private."
                 )
                 
                 gr.HTML('<h3 class="section-header"><i class="icon">📷</i> Upload Ingredients</h3>')
-                # Use File component to handle multiple image uploads
                 file_upload = gr.File(
                     label="Upload images of ingredients",
                     file_types=["image"],
@@ -863,7 +683,6 @@ with gr.Blocks(css=custom_css) as app:
     
     gr.HTML(html_footer)
     
-    # Handle file uploads to display in gallery
     def update_gallery(files):
         if not files:
             return gr.Gallery.update(visible=False)
@@ -871,22 +690,18 @@ with gr.Blocks(css=custom_css) as app:
     
     file_upload.change(fn=update_gallery, inputs=file_upload, outputs=image_input)
     
-    # Handle recipe generation
     def process_recipe_request(api_key, files, num_recipes, dietary_restrictions, cuisine_preference):
         if not files:
             return "Please upload at least one image of ingredients."
         
-        # Get actual image files from the uploaded files
         images = [file.name for file in files]
         return get_recipe_suggestions(api_key, images, num_recipes, dietary_restrictions, cuisine_preference)
     
-    # Set up the submission action
     submit_button.click(
         fn=process_recipe_request,
         inputs=[api_key_input, file_upload, num_recipes, dietary_restrictions, cuisine_preference],
         outputs=output
     )
 
-# Launch the app
 if __name__ == "__main__":
     app.launch()