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,197 +122,194 @@ 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.", 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)
+        return "Please upload at least one image of ingredients."
+    return get_recipe_suggestions(api_key, files, num_recipes, dietary_restrictions, cuisine_preference)
 
 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 60s 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);
 }
 """
 
@@ -321,6 +318,19 @@ 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 = """
@@ -336,14 +346,38 @@ 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"):
@@ -407,42 +441,14 @@ 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")
     
-    # 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, is_loading]
-    ).then(
-        fn=lambda x: gr.update(visible=x),
-        inputs=is_loading,
-        outputs=loading_overlay
+        outputs=output
     )
 
 if __name__ == "__main__":