Update app.py

app.py

@@ -1,10 +1,13 @@
 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"""
@@ -67,7 +70,7 @@ 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 uploaded images of ingredients"""
+    """Get recipe suggestions based on the uploaded images of ingredients"""
     if not api_key:
         return "Please provide your Together API key."
     
@@ -129,8 +132,8 @@ def get_recipe_suggestions(api_key, images, num_recipes=3, dietary_restrictions=
                 {"role": "system", "content": system_prompt},
                 {"role": "user", "content": user_prompt}
             ],
-            max_tokens=3000,
-            temperature=0.6
+            max_tokens=2048,
+            temperature=0.7
         )
         
         for img_path in image_paths:
@@ -155,414 +158,198 @@ def get_recipe_suggestions(api_key, images, num_recipes=3, dietary_restrictions=
                 pass
         return f"Error: {str(e)}"
 
-# Enhanced Custom CSS
 custom_css = """
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
-
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
 :root {
-    --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;
+    --primary-color: #E67E22;
+    --primary-dark: #D35400;
+    --secondary-color: #2ECC71;
+    --accent-color: #F1C40F;
+    --background-color: #FFFFFF;
+    --text-color: #4A4A4A;
+    --card-background: #F8F9FA;
+    --border-radius: 10px;
+    --font-family: 'Poppins', sans-serif;
 }
-
 body {
     font-family: var(--font-family);
-    background: linear-gradient(135deg, #111827 0%, #1f2937 100%);
+    background-color: var(--background-color);
     color: var(--text-color);
     margin: 0;
     padding: 0;
-    min-height: 100vh;
 }
-
 .container {
-    max-width: 1400px;
+    max-width: 1200px;
     margin: 0 auto;
-    padding: 40px 20px;
+    padding: 20px;
 }
-
 .app-header {
+    background-color: var(--primary-color);
+    color: white;
+    padding: 40px 20px;
     text-align: center;
-    margin-bottom: 60px;
-    padding: 60px 20px;
-    background: var(--glass-background);
-    border-radius: var(--border-radius);
-    backdrop-filter: blur(10px);
-    border: 1px solid var(--glass-border);
-    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
+    border-radius: 0 0 20px 20px;
+    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
 }
-
 .app-title {
-    font-size: 3.2em;
+    font-size: 2.5em;
+    margin-bottom: 10px;
     font-weight: 700;
-    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.2em;
-    opacity: 0.85;
-    max-width: 800px;
-    margin: 0 auto;
-    line-height: 1.6;
     font-weight: 300;
+    max-width: 600px;
+    margin: 0 auto;
 }
-
 .input-section, .output-section {
-    background: var(--card-background);
+    background-color: var(--card-background);
     border-radius: var(--border-radius);
-    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 {
-    transform: translateY(-5px);
-    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3);
+    padding: 30px;
+    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
+    margin-bottom: 30px;
 }
-
 .section-header {
-    color: var(--primary-color);
-    font-size: 1.8em;
-    margin-bottom: 25px;
+    font-size: 1.5em;
     font-weight: 600;
-    display: flex;
-    align-items: center;
-}
-
-.section-header i {
-    margin-right: 12px;
-    font-size: 1.3em;
+    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;
-    margin-bottom: 30px;
-    background: var(--glass-background);
+    background-color: rgba(46, 204, 113, 0.05);
     transition: all 0.3s ease;
 }
-
 .image-upload-container:hover {
     border-color: var(--primary-color);
-    background: rgba(99, 102, 241, 0.05);
+    background-color: rgba(230, 126, 34, 0.05);
 }
-
-.image-upload-icon {
-    font-size: 3.5em;
-    color: var(--secondary-color);
-    margin-bottom: 15px;
-}
-
-.image-upload-text {
-    color: var(--text-color);
-    font-weight: 500;
-    opacity: 0.9;
-}
-
 button.primary-button {
-    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
+    background-color: var(--primary-color);
     color: white;
     border: none;
-    padding: 16px 32px;
-    border-radius: 50px;
-    font-size: 1.2em;
+    padding: 15px 30px;
+    border-radius: 5px;
+    font-size: 1.1em;
     cursor: pointer;
     transition: all 0.3s ease;
-    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.4);
-    font-weight: 600;
+    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
     width: 100%;
-    margin-top: 30px;
 }
-
 button.primary-button:hover {
-    transform: translateY(-2px);
-    box-shadow: 0 8px 20px rgba(99, 102, 241, 0.6);
-}
-
-button.primary-button:active {
-    transform: translateY(0);
-    box-shadow: 0 2px 10px rgba(99, 102, 241, 0.4);
-}
-
-.gradio-slider.svelte-17l1npl {
-    margin-bottom: 30px;
-}
-
-.recipe-card {
-    border-left: 4px solid var(--accent-color);
-    padding: 20px;
-    background: var(--glass-background);
-    margin-bottom: 20px;
-    border-radius: 0 var(--border-radius) var(--border-radius) 0;
-    transition: all 0.3s ease;
-}
-
-.recipe-card:hover {
-    transform: translateX(5px);
-    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
+    background-color: var(--primary-dark);
+    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
 }
-
-.recipe-title {
-    color: var(--primary-color);
-    font-size: 1.6em;
-    margin-bottom: 15px;
-    font-weight: 600;
-}
-
-.footer {
-    text-align: center;
-    margin-top: 80px;
-    padding: 40px 0;
-    color: var(--text-color);
-    font-size: 1em;
-    background: var(--card-background);
-    border-radius: var(--border-radius);
-    border: 1px solid var(--glass-border);
-}
-
-.footer-content {
-    max-width: 800px;
-    margin: 0 auto;
-}
-
-.footer-brand {
-    font-weight: 600;
-    color: var(--primary-color);
-}
-
-.footer-links {
-    margin-top: 20px;
-}
-
-.footer-links a {
-    color: var(--secondary-color);
-    margin: 0 15px;
-    text-decoration: none;
-    transition: color 0.3s ease;
-}
-
-.footer-links a:hover {
-    color: var(--primary-color);
-}
-
-.input-group {
-    margin-bottom: 30px;
-}
-
-.input-group label {
-    display: block;
-    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(180px, 1fr));
-    gap: 20px;
+    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+    gap: 15px;
     margin-top: 20px;
 }
-
 .gallery-item {
-    border-radius: var(--border-radius);
+    border-radius: 8px;
     overflow: hidden;
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
     transition: transform 0.3s ease;
-    aspect-ratio: 1 / 1;
 }
-
 .gallery-item:hover {
     transform: scale(1.05);
 }
-
+.recipe-output {
+    font-size: 1.1em;
+    line-height: 1.6;
+    color: var(--text-color);
+    max-height: 600px;
+    overflow-y: auto;
+    padding-right: 10px;
+}
+.recipe-output h2 {
+    color: var(--primary-color);
+    margin-top: 30px;
+    font-size: 1.8em;
+}
+.recipe-output h3 {
+    color: var(--secondary-color);
+    font-size: 1.4em;
+    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: rgba(17, 24, 39, 0.9);
-    display: flex;
-    justify-content: center;
-    align-items: center;
+    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;
 }
-
 .loading-spinner {
+    border: 8px solid #f3f3f3;
+    border-top: 8px solid var(--primary-color);
+    border-radius: 50%;
     width: 60px;
     height: 60px;
-    border: 6px solid var(--glass-background);
-    border-top: 6px solid var(--primary-color);
-    border-radius: 50%;
     animation: spin 1s linear infinite;
 }
-
-.loading-text {
-    position: absolute;
-    margin-top: 80px;
-    color: var(--text-color);
-    font-size: 1.2em;
-    font-weight: 500;
-}
-
 @keyframes spin {
     0% { transform: rotate(0deg); }
     100% { transform: rotate(360deg); }
 }
-
-.recipe-output {
-    max-height: 900px;
-    overflow-y: auto;
-    padding-right: 20px;
-    line-height: 1.7;
-}
-
-.recipe-output::-webkit-scrollbar {
-    width: 10px;
-}
-
-.recipe-output::-webkit-scrollbar-track {
-    background: var(--glass-background);
-    border-radius: 10px;
-}
-
-.recipe-output::-webkit-scrollbar-thumb {
-    background: var(--primary-color);
-    border-radius: 10px;
-}
-
-.recipe-output h2 {
-    color: var(--primary-color);
-    border-bottom: 2px solid var(--secondary-color);
-    padding-bottom: 12px;
-    font-size: 2em;
-    margin-top: 40px;
-}
-
-.recipe-output h3 {
-    color: var(--secondary-color);
-    font-size: 1.5em;
-    margin-top: 30px;
+.loading-text {
+    color: white;
+    font-size: 1.2em;
+    margin-top: 20px;
 }
-
-input[type="password"], input[type="text"] {
-    border: 1px solid var(--glass-border);
-    background: var(--glass-background);
-    border-radius: var(--border-radius);
-    padding: 14px;
-    font-size: 1em;
-    width: 100%;
+.footer {
+    background-color: var(--card-background);
+    padding: 40px 20px;
+    text-align: center;
     color: var(--text-color);
-    transition: all 0.3s ease;
-}
-
-input[type="password"]:focus, input[type="text"]:focus {
-    border-color: var(--primary-color);
-    outline: none;
-    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
-}
-
-select {
-    appearance: none;
-    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: 14px 45px 14px 14px;
     font-size: 1em;
-    width: 100%;
-    color: var(--text-color);
-    transition: all 0.3s ease;
-}
-
-select:focus {
-    border-color: var(--primary-color);
-    outline: none;
-    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
+    box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
 }
-
-@media (max-width: 768px) {
-    .app-title {
-        font-size: 2.5em;
-    }
-    
-    .app-subtitle {
-        font-size: 1.1em;
-    }
-    
-    .input-section, .output-section {
-        padding: 25px;
-    }
-    
-    .section-header {
-        font-size: 1.6em;
-    }
-    
-    button.primary-button {
-        padding: 14px 25px;
-        font-size: 1.1em;
-    }
+.footer-content {
+    max-width: 800px;
+    margin: 0 auto;
 }
-
-@media (max-width: 480px) {
-    .app-title {
-        font-size: 2em;
-    }
-    
-    .app-subtitle {
-        font-size: 1em;
-    }
-    
-    .input-section, .output-section {
-        padding: 20px;
-    }
-    
-    .section-header {
-        font-size: 1.4em;
-    }
+.footer-brand {
+    font-weight: 700;
+    color: var(--primary-color);
 }
-
-.gradio-container {
-    max-width: 100% !important;
+.footer-links a {
+    color: var(--secondary-color);
+    text-decoration: none;
+    margin: 0 15px;
+    transition: color 0.3s ease;
 }
-
-footer.footer-links {
-    display: none !important;
+.footer-links a:hover {
+    color: var(--primary-color);
 }
 """
 
-# Custom HTML header
 html_header = """
 <div class="app-header">
     <div class="app-title">🍲 Visual Recipe Assistant</div>
-    <div class="app-subtitle">Transform your ingredients into gourmet dishes with AI-powered recipe suggestions</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 class="loading-text">Crafting your recipes...</div>
-    </div>
+    <div class="loading-spinner"></div>
+    <div class="loading-text">Generating your recipes...</div>
 </div>
 <script>
     function showLoading() {
@@ -572,38 +359,15 @@ 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
 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>Create culinary masterpieces from your pantry</p>
+        <p>Upload multiple ingredient images for more creative recipe combinations</p>
         <div class="footer-links">
             <a href="#" target="_blank">How It Works</a>
             <a href="#" target="_blank">Privacy Policy</a>
@@ -611,25 +375,50 @@ 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>
 """
 
-# Create the Gradio interface
 with gr.Blocks(css=custom_css) as app:
     gr.HTML(html_header)
     
     with gr.Row():
         with gr.Column(scale=1):
             with gr.Group(elem_classes="input-section"):
-                gr.HTML('<h3 class="section-header"><i class="icon">🔑</i> API Configuration</h3>')
+                gr.HTML('<h3 class="section-header">API Configuration</h3>')
                 api_key_input = gr.Textbox(
                     label="Together API Key", 
-                    placeholder="Enter your Together API key...",
+                    placeholder="Enter your Together API key here...",
                     type="password",
-                    elem_classes="input-group",
-                    info="Your API key is used only for this session and remains private."
+                    elem_classes="input-group"
                 )
                 
-                gr.HTML('<h3 class="section-header"><i class="icon">📷</i> Upload Ingredients</h3>')
+                gr.HTML('<h3 class="section-header">Upload Ingredients</h3>')
                 file_upload = gr.File(
                     label="Upload images of ingredients",
                     file_types=["image"],
@@ -646,7 +435,7 @@ with gr.Blocks(css=custom_css) as app:
                     visible=False
                 )
                 
-                gr.HTML('<h3 class="section-header"><i class="icon">⚙️</i> Recipe Preferences</h3>')
+                gr.HTML('<h3 class="section-header">Recipe Preferences</h3>')
                 with gr.Row():
                     num_recipes = gr.Slider(
                         minimum=1, 
@@ -678,7 +467,7 @@ with gr.Blocks(css=custom_css) as app:
         
         with gr.Column(scale=1):
             with gr.Group(elem_classes="output-section"):
-                gr.HTML('<h3 class="section-header"><i class="icon">🍽️</i> Your Personalized Recipes</h3>')
+                gr.HTML('<h3 class="section-header">Your Personalized Recipes</h3>')
                 output = gr.Markdown(elem_classes="recipe-output")
     
     gr.HTML(html_footer)
@@ -693,7 +482,6 @@ with gr.Blocks(css=custom_css) as app:
     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."
-        
         images = [file.name for file in files]
         return get_recipe_suggestions(api_key, images, num_recipes, dietary_restrictions, cuisine_preference)