Update app.py

app.py

@@ -17,11 +17,11 @@ def encode_image_to_base64(image_path):
 def analyze_single_image(client, img_path):
     """Analyze a single image to identify ingredients"""
     system_prompt = """You are a culinary expert AI assistant that specializes in identifying ingredients in images.
-    Your task is to analyze the provided image and list all the food ingredients you can identify.
-    Be specific and detailed about what you see. Only list ingredients, don't suggest recipes yet."""
-    
+Your task is to analyze the provided image and list all the food ingredients you can identify.
+Be specific and detailed about what you see. Only list ingredients, don't suggest recipes yet."""
+
     user_prompt = "Please identify all the food ingredients visible in this image. List each ingredient on a new line."
-    
+
     try:
         with open(img_path, "rb") as image_file:
             base64_image = base64.b64encode(image_file.read()).decode('utf-8')
@@ -54,10 +54,10 @@ def get_recipe_suggestions(api_key, image_paths, num_recipes=3, dietary_restrict
     """Get recipe suggestions based on the uploaded images of ingredients"""
     if not api_key:
         return "Please provide your Together API key."
-    
+
     if not image_paths or len(image_paths) == 0:
         return "Please upload at least one image of ingredients."
-    
+
     try:
         client = Together(api_key=api_key)
         
@@ -122,222 +122,197 @@ def update_gallery(files):
 def process_recipe_request(api_key, files, num_recipes, dietary_restrictions, cuisine_preference):
     """Process the recipe request with uploaded files"""
     if not files:
-        return "Please upload at least one image of ingredients."
-    return get_recipe_suggestions(api_key, files, num_recipes, dietary_restrictions, cuisine_preference)
+        return "Please upload at least one image of ingredients.", gr.update(value=False)
+    
+    recipes = get_recipe_suggestions(api_key, files, num_recipes, dietary_restrictions, cuisine_preference)
+    # Return both the recipe result and False to indicate loading is complete
+    return recipes, gr.update(value=False)
 
 custom_css = """
 @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
-
 :root {
-    --primary-color: #FF6F61;  /* Warm coral */
-    --secondary-color: #4BB543;  /* Fresh green */
-    --accent-color: #F0A500;  /* Golden yellow */
-    --background-color: #F4F4F9;  /* Light grayish background */
-    --text-color: #333333;  /* Dark gray text */
-    --card-background: #FFFFFF;  /* White for cards */
-    --border-radius: 12px;
-    --font-family: 'Poppins', sans-serif;
-    --box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 20px;
-    --hover-shadow: rgba(0, 0, 0, 0.15) 0px 8px 30px;
+--primary-color: #FF6F61;  /* Warm coral */
+--secondary-color: #4BB543;  /* Fresh green */
+--accent-color: #F0A500;  /* Golden yellow */
+--background-color: #F4F4F9;  /* Light grayish background */
+--text-color: #333333;  /* Dark gray text */
+--card-background: #FFFFFF;  /* White for cards */
+--border-radius: 12px;
+--font-family: 'Poppins', sans-serif;
+--box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 20px;
+--hover-shadow: rgba(0, 0, 0, 0.15) 0px 8px 30px;
 }
-
 body {
-    font-family: var(--font-family);
-    background-color: var(--background-color);
-    color: var(--text-color);
-    margin: 0;
-    padding: 0;
+font-family: var(--font-family);
+background-color: var(--background-color);
+color: var(--text-color);
+margin: 0;
+padding: 0;
 }
-
 .container {
-    max-width: 1200px;
-    margin: 0 auto;
-    padding: 20px;
+max-width: 1200px;
+margin: 0 auto;
+padding: 20px;
 }
-
 .app-header {
-    background-color: var(--primary-color);
-    color: white;
-    padding: 60px 20px;
-    text-align: center;
-    border-radius: 0 0 30px 30px;
-    box-shadow: var(--box-shadow);
+background-color: var(--primary-color);
+color: white;
+padding: 60px 20px;
+text-align: center;
+border-radius: 0 0 30px 30px;
+box-shadow: var(--box-shadow);
 }
-
 .app-title {
-    font-size: 2.8em;
-    font-weight: 700;
-    margin-bottom: 10px;
+font-size: 2.8em;
+font-weight: 700;
+margin-bottom: 10px;
 }
-
 .app-subtitle {
-    font-size: 1.3em;
-    font-weight: 300;
-    max-width: 800px;
-    margin: 0 auto;
+font-size: 1.3em;
+font-weight: 300;
+max-width: 800px;
+margin: 0 auto;
 }
-
 .input-section, .output-section {
-    background-color: var(--card-background);
-    border-radius: var(--border-radius);
-    padding: 30px;
-    box-shadow: var(--box-shadow);
-    margin-bottom: 30px;
+background-color: var(--card-background);
+border-radius: var(--border-radius);
+padding: 30px;
+box-shadow: var(--box-shadow);
+margin-bottom: 30px;
 }
-
 .section-header {
-    font-size: 1.6em;
-    font-weight: 600;
-    color: var(--text-color);
-    margin-bottom: 20px;
-    border-bottom: 2px solid var(--primary-color);
-    padding-bottom: 10px;
+font-size: 1.6em;
+font-weight: 600;
+color: var(--text-color);
+margin-bottom: 20px;
+border-bottom: 2px solid var(--primary-color);
+padding-bottom: 10px;
 }
-
 .image-upload-container {
-    border: 2px dashed var(--secondary-color);
-    border-radius: var(--border-radius);
-    padding: 40px;
-    text-align: center;
-    background-color: rgba(75, 181, 67, 0.1);
-    transition: all 0.3s ease;
+border: 2px dashed var(--secondary-color);
+border-radius: var(--border-radius);
+padding: 40px;
+text-align: center;
+background-color: rgba(75, 181, 67, 0.1);
+transition: all 0.3s ease;
 }
-
 .image-upload-container:hover {
-    border-color: var(--primary-color);
-    background-color: rgba(255, 111, 97, 0.1);
+border-color: var(--primary-color);
+background-color: rgba(255, 111, 97, 0.1);
 }
-
 button.primary-button {
-    background-color: var(--primary-color);
-    color: white;
-    border: none;
-    padding: 16px 32px;
-    border-radius: 6px;
-    font-size: 1.1em;
-    cursor: pointer;
-    transition: all 0.3s ease;
-    width: 100%;
-    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+background-color: var(--primary-color);
+color: white;
+border: none;
+padding: 16px 32px;
+border-radius: 6px;
+font-size: 1.1em;
+cursor: pointer;
+transition: all 0.3s ease;
+width: 100%;
+box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
 }
-
 button.primary-button:hover {
-    background-color: #E15F52;
-    box-shadow: var(--hover-shadow);
+background-color: #E15F52;
+box-shadow: var(--hover-shadow);
 }
-
 .gallery-container {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
-    gap: 20px;
-    margin-top: 30px;
+display: grid;
+grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+gap: 20px;
+margin-top: 30px;
 }
-
 .gallery-item {
-    border-radius: var(--border-radius);
-    overflow: hidden;
-    box-shadow: var(--box-shadow);
-    transition: transform 0.3s ease;
-    aspect-ratio: 1 / 1;
-    object-fit: cover;
+border-radius: var(--border-radius);
+overflow: hidden;
+box-shadow: var(--box-shadow);
+transition: transform 0.3s ease;
+aspect-ratio: 1 / 1;
+object-fit: cover;
 }
-
 .gallery-item:hover {
-    transform: scale(1.05);
-    box-shadow: var(--hover-shadow);
+transform: scale(1.05);
+box-shadow: var(--hover-shadow);
 }
-
 .recipe-output {
-    font-size: 1.2em;
-    line-height: 1.7;
-    color: var(--text-color);
-    max-height: 600px;
-    overflow-y: auto;
-    padding-right: 15px;
+font-size: 1.2em;
+line-height: 1.7;
+color: var(--text-color);
+max-height: 600px;
+overflow-y: auto;
+padding-right: 15px;
 }
-
 .recipe-output h2 {
-    color: var(--primary-color);
-    margin-top: 30px;
-    font-size: 2em;
+color: var(--primary-color);
+margin-top: 30px;
+font-size: 2em;
 }
-
 .recipe-output h3 {
-    color: var(--secondary-color);
-    font-size: 1.5em;
-    margin-top: 20px;
+color: var(--secondary-color);
+font-size: 1.5em;
+margin-top: 20px;
 }
-
 .loading-container {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background-color: rgba(0, 0, 0, 0.5);
-    z-index: 1000;
-    opacity: 0;
-    visibility: hidden;
-    transition: opacity 0.3s ease, visibility 0.3s ease;
+display: flex;
+flex-direction: column;
+justify-content: center;
+align-items: center;
+position: fixed;
+top: 0;
+left: 0;
+width: 100%;
+height: 100%;
+background-color: rgba(0, 0, 0, 0.5);
+z-index: 1000;
+opacity: 0;
+visibility: hidden;
+transition: opacity 0.3s ease, visibility 0.3s ease;
 }
-
 .loading-container.visible {
-    opacity: 1;
-    visibility: visible;
+opacity: 1;
+visibility: visible;
 }
-
 .loading-spinner {
-    border: 8px solid #f3f3f3;
-    border-top: 8px solid var(--primary-color);
-    border-radius: 50%;
-    width: 60px;
-    height: 60px;
-    animation: spin 1s linear infinite;
+border: 8px solid #f3f3f3;
+border-top: 8px solid var(--primary-color);
+border-radius: 50%;
+width: 60px;
+height: 60px;
+animation: spin 1s linear infinite;
 }
-
 @keyframes spin {
-    0% { transform: rotate(0deg); }
-    100% { transform: rotate(360deg); }
+0% { transform: rotate(0deg); }
+100% { transform: rotate(360deg); }
 }
-
 .loading-text {
-    color: white;
-    font-size: 1.3em;
-    margin-top: 20px;
+color: white;
+font-size: 1.3em;
+margin-top: 20px;
 }
-
 .footer {
-    background-color: var(--card-background);
-    padding: 40px 20px;
-    text-align: center;
-    color: var(--text-color);
-    font-size: 1.1em;
-    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
+background-color: var(--card-background);
+padding: 40px 20px;
+text-align: center;
+color: var(--text-color);
+font-size: 1.1em;
+box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
 }
-
 .footer-content {
-    max-width: 800px;
-    margin: 0 auto;
+max-width: 800px;
+margin: 0 auto;
 }
-
 .footer-brand {
-    font-weight: 700;
-    color: var(--primary-color);
+font-weight: 700;
+color: var(--primary-color);
 }
-
 .footer-links a {
-    color: var(--secondary-color);
-    text-decoration: none;
-    margin: 0 15px;
-    transition: color 0.3s ease;
+color: var(--secondary-color);
+text-decoration: none;
+margin: 0 15px;
+transition: color 0.3s ease;
 }
-
 .footer-links a:hover {
-    color: var(--primary-color);
+color: var(--primary-color);
 }
 """
 
@@ -346,19 +321,6 @@ html_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>
-<div id="loading-overlay" class="loading-container">
-    <div class="loading-spinner"></div>
-    <div class="loading-text">Generating your recipes...</div>
-</div>
-<script>
-    function showLoading() {
-        document.getElementById('loading-overlay').classList.add('visible');
-    }
-    
-    function hideLoading() {
-        document.getElementById('loading-overlay').classList.remove('visible');
-    }
-</script>
 """
 
 html_footer = """
@@ -374,38 +336,14 @@ html_footer = """
         </div>
     </div>
 </div>
-<script>
-    document.addEventListener('DOMContentLoaded', function() {
-        const submitBtn = document.querySelector('button.primary-button');
-        if (submitBtn) {
-            submitBtn.addEventListener('click', function() {
-                showLoading();
-                setTimeout(function() {
-                    const output = document.querySelector('.recipe-output');
-                    if (output && output.textContent.trim().length > 0) {
-                        hideLoading();
-                    } else {
-                        const checkInterval = setInterval(function() {
-                            if (output && output.textContent.trim().length > 0) {
-                                hideLoading();
-                                clearInterval(checkInterval);
-                            }
-                        }, 1000);
-                        setTimeout(function() {
-                            hideLoading();
-                            clearInterval(checkInterval);
-                        }, 30000);
-                    }
-                }, 3000);
-            });
-        }
-    });
-</script>
 """
 
 with gr.Blocks(css=custom_css) as app:
     gr.HTML(html_header)
     
+    # Add a state variable to track loading state
+    is_loading = gr.State(False)
+    
     with gr.Row():
         with gr.Column(scale=1):
             with gr.Group(elem_classes="input-section"):
@@ -469,14 +407,42 @@ with gr.Blocks(css=custom_css) as app:
                 gr.HTML('<h3 class="section-header">Your Personalized Recipes</h3>')
                 output = gr.Markdown(elem_classes="recipe-output")
     
-    gr.HTML(html_footer)
+    # Loading overlay with spinner
+    with gr.Row(visible=False) as loading_overlay:
+        gr.HTML("""
+        <div style="display: flex; flex-direction: column; justify-content: center; align-items: center; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 1000;">
+            <div style="border: 8px solid #f3f3f3; border-top: 8px solid #FF6F61; border-radius: 50%; width: 60px; height: 60px; animation: spin 1s linear infinite;"></div>
+            <div style="color: white; font-size: 1.3em; margin-top: 20px;">Generating your recipes...</div>
+        </div>
+        <style>
+            @keyframes spin {
+                0% { transform: rotate(0deg); }
+                100% { transform: rotate(360deg); }
+            }
+        </style>
+        """)
     
+    gr.HTML(html_footer)
+
+    # Update gallery when files are uploaded
     file_upload.change(fn=update_gallery, inputs=file_upload, outputs=image_input)
     
+    # Show loading overlay when submit button is clicked
     submit_button.click(
+        fn=lambda: True,
+        outputs=is_loading
+    ).then(
+        fn=lambda x: gr.update(visible=x),
+        inputs=is_loading,
+        outputs=loading_overlay
+    ).then(
         fn=process_recipe_request,
         inputs=[api_key_input, file_upload, num_recipes, dietary_restrictions, cuisine_preference],
-        outputs=output
+        outputs=[output, is_loading]
+    ).then(
+        fn=lambda x: gr.update(visible=x),
+        inputs=is_loading,
+        outputs=loading_overlay
     )
 
 if __name__ == "__main__":