Update app.py

app.py

@@ -44,35 +44,40 @@ 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."
     
-    # Create message with the image
-    content = [
-        {"type": "text", "text": user_prompt},
-        {
-            "type": "image_url",
-            "image_url": {
-                "url": f"file://{img_path}"
-            }
-        }
-    ]
-    
+    # First, convert the image to base64
     try:
-        response = client.chat.completions.create(
-            model="meta-llama/Llama-Vision-Free",
-            messages=[
+        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},
                 {
-                    "role": "system",
-                    "content": system_prompt
-                },
-                {
-                    "role": "user",
-                    "content": content
+                    "type": "image_url",
+                    "image_url": {
+                        "url": f"data:image/jpeg;base64,{base64_image}"
+                    }
                 }
-            ],
-            max_tokens=500,
-            temperature=0.2
-        )
-        
-        return response.choices[0].message.content
+            ]
+            
+            response = client.chat.completions.create(
+                model="meta-llama/Llama-Vision-Free",
+                messages=[
+                    {
+                        "role": "system",
+                        "content": system_prompt
+                    },
+                    {
+                        "role": "user",
+                        "content": content
+                    }
+                ],
+                max_tokens=500,
+                temperature=0.2
+            )
+            
+            return response.choices[0].message.content
     except Exception as e:
         return f"Error analyzing image: {str(e)}"
 
@@ -183,16 +188,20 @@ def get_recipe_suggestions(api_key, images, num_recipes=3, dietary_restrictions=
                 pass
         return f"Error: {str(e)}"
 
-# Custom CSS for a more appealing interface
+# Enhanced Custom CSS for a more appealing interface
 custom_css = """
+@import url('https://fonts.googleapis.com/css2?family=Poppins: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 4px 6px rgba(0, 0, 0, 0.1);
-    --border-radius: 10px;
+    --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;
 }
 
@@ -200,6 +209,8 @@ body {
     font-family: var(--font-family);
     background-color: var(--background-color);
     color: var(--text-color);
+    margin: 0;
+    padding: 0;
 }
 
 .container {
@@ -210,129 +221,248 @@ body {
 
 .app-header {
     text-align: center;
-    margin-bottom: 30px;
-    padding: 30px 0;
+    margin-bottom: 40px;
+    padding: 50px 20px;
     background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
     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;
 }
 
 .app-title {
-    font-size: 3em;
-    margin-bottom: 10px;
-    font-weight: bold;
+    font-size: 3.5em;
+    margin-bottom: 15px;
+    font-weight: 700;
+    text-shadow: 0 2px 4px rgba(0,0,0,0.1);
+    position: relative;
 }
 
 .app-subtitle {
-    font-size: 1.2em;
+    font-size: 1.3em;
     opacity: 0.9;
     max-width: 700px;
     margin: 0 auto;
+    line-height: 1.6;
+    font-weight: 300;
+    position: relative;
 }
 
 .input-section, .output-section {
     background-color: white;
     border-radius: var(--border-radius);
-    padding: 25px;
+    padding: 30px;
     box-shadow: var(--card-shadow);
-    margin-bottom: 20px;
+    margin-bottom: 30px;
+    transition: all 0.3s ease;
+    border: 1px solid rgba(0,0,0,0.05);
+}
+
+.input-section:hover, .output-section:hover {
+    box-shadow: var(--hover-shadow);
+    transform: translateY(-5px);
 }
 
-.input-section h3, .output-section h3 {
+.section-header {
     color: var(--primary-color);
     margin-top: 0;
-    font-size: 1.5em;
+    font-size: 1.7em;
     border-bottom: 2px solid var(--secondary-color);
-    padding-bottom: 10px;
-    margin-bottom: 20px;
+    padding-bottom: 15px;
+    margin-bottom: 25px;
+    font-weight: 600;
+    display: flex;
+    align-items: center;
+}
+
+.section-header i {
+    margin-right: 10px;
+    font-size: 1.2em;
 }
 
 .image-upload-container {
-    border: 2px dashed var(--secondary-color);
+    border: 3px dashed var(--secondary-color);
     border-radius: var(--border-radius);
-    padding: 20px;
+    padding: 30px;
     text-align: center;
-    margin-bottom: 20px;
+    margin-bottom: 25px;
     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);
+}
+
+.image-upload-icon {
+    font-size: 3em;
+    color: var(--secondary-color);
+    margin-bottom: 15px;
+}
+
+.image-upload-text {
+    color: #666;
+    font-weight: 500;
 }
 
 button.primary-button {
     background: linear-gradient(135deg, var(--primary-color) 0%, #FF8E8E 100%);
     color: white;
     border: none;
-    padding: 12px 25px;
-    border-radius: 30px;
-    font-size: 1.1em;
+    padding: 15px 30px;
+    border-radius: 50px;
+    font-size: 1.2em;
     cursor: pointer;
     transition: all 0.3s ease;
-    box-shadow: 0 2px 5px rgba(255, 107, 107, 0.3);
-    font-weight: bold;
+    box-shadow: 0 4px 10px rgba(255, 107, 107, 0.3);
+    font-weight: 600;
     display: block;
     width: 100%;
-    margin-top: 20px;
+    margin-top: 30px;
+    position: relative;
+    overflow: hidden;
 }
 
 button.primary-button:hover {
-    transform: translateY(-2px);
-    box-shadow: 0 4px 8px rgba(255, 107, 107, 0.4);
-    background: linear-gradient(135deg, #FF8E8E 0%, var(--primary-color) 100%);
+    transform: translateY(-3px);
+    box-shadow: 0 8px 15px rgba(255, 107, 107, 0.4);
+    background: linear-gradient(135deg, #FF8E8E 0%, var(--primary-dark) 100%);
 }
 
-.gradio-slider.svelte-17l1npl {
-    margin-bottom: 20px;
+button.primary-button:active {
+    transform: translateY(1px);
+    box-shadow: 0 2px 5px rgba(255, 107, 107, 0.4);
 }
 
-.tab-nav {
-    background-color: var(--secondary-color);
-    border-radius: var(--border-radius) var(--border-radius) 0 0;
+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%;
 }
 
-.tab-nav button {
-    color: white;
-    font-weight: bold;
+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;
+    }
+}
+
+.gradio-slider.svelte-17l1npl {
+    margin-bottom: 25px;
 }
 
 .recipe-card {
     border-left: 5px solid var(--accent-color);
-    padding: 15px;
+    padding: 20px;
     background-color: #f9f9f9;
-    margin-bottom: 15px;
+    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.1);
 }
 
 .recipe-title {
     color: var(--primary-color);
-    font-size: 1.3em;
-    margin-bottom: 5px;
+    font-size: 1.5em;
+    margin-bottom: 10px;
+    font-weight: 600;
 }
 
 .footer {
     text-align: center;
-    margin-top: 40px;
+    margin-top: 60px;
+    padding: 30px 0;
     color: #6c757d;
-    font-size: 0.9em;
+    font-size: 1em;
+    background-color: #f1f3f5;
+    border-radius: var(--border-radius);
+    box-shadow: inset 0 2px 10px rgba(0,0,0,0.05);
+}
+
+.footer-content {
+    max-width: 700px;
+    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 10px;
+    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: 5px;
+    margin-right: 10px;
+    font-size: 1.2em;
 }
 
 .input-group {
-    margin-bottom: 20px;
+    margin-bottom: 25px;
 }
 
 .input-group label {
     display: block;
-    margin-bottom: 8px;
+    margin-bottom: 10px;
     font-weight: 600;
     color: var(--text-color);
+    font-size: 1.1em;
+}
+
+.gallery-container {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+    gap: 20px;
+    margin-top: 20px;
 }
 
 .gallery-item {
@@ -340,74 +470,241 @@ button.primary-button:hover {
     overflow: hidden;
     box-shadow: var(--card-shadow);
     transition: transform 0.3s ease;
+    aspect-ratio: 1 / 1;
+    object-fit: cover;
 }
 
 .gallery-item:hover {
-    transform: scale(1.02);
+    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);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    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 {
-    text-align: center;
-    padding: 20px;
+    width: 80px;
+    height: 80px;
+    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%;
+}
+
+.loading-text {
+    position: absolute;
+    bottom: -40px;
+    color: white;
+    font-size: 1.2em;
+    font-weight: 500;
+}
+
+@keyframes spin {
+    0% {
+        transform: rotate(0deg);
+    }
+    100% {
+        transform: rotate(360deg);
+    }
 }
 
 .recipe-output {
     max-height: 800px;
     overflow-y: auto;
-    padding-right: 10px;
+    padding-right: 15px;
+    line-height: 1.6;
+}
+
+.recipe-output::-webkit-scrollbar {
+    width: 8px;
+}
+
+.recipe-output::-webkit-scrollbar-track {
+    background: #f1f1f1;
+    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);
 }
 
 .recipe-output h2 {
     color: var(--primary-color);
-    border-bottom: 1px solid var(--secondary-color);
-    padding-bottom: 5px;
+    border-bottom: 2px solid var(--secondary-color);
+    padding-bottom: 10px;
+    font-size: 1.8em;
+    margin-top: 30px;
 }
 
 .recipe-output h3 {
     color: var(--secondary-color);
+    font-size: 1.4em;
+    margin-top: 25px;
 }
 
-/* Responsive styles */
-@media (max-width: 768px) {
-    .app-title {
-        font-size: 2em;
-    }
-    
-    .input-section, .output-section {
-        padding: 15px;
-    }
-}
-
-/* Custom styling for the API key input */
-input[type="password"] {
+/* Form inputs styling */
+input[type="password"], input[type="text"] {
     border: 2px solid #e9ecef;
     border-radius: var(--border-radius);
-    padding: 10px 15px;
+    padding: 15px;
     font-size: 1em;
     width: 100%;
-    transition: border-color 0.3s ease;
+    transition: all 0.3s ease;
+    box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
 }
 
-input[type="password"]:focus {
+input[type="password"]:focus, input[type="text"]:focus {
     border-color: var(--secondary-color);
     outline: none;
+    box-shadow: 0 0 0 3px rgba(78, 205, 196, 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 10px center;
+    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;
     border-radius: var(--border-radius);
-    padding: 10px 40px 10px 15px;
+    padding: 15px 45px 15px 15px;
     font-size: 1em;
     width: 100%;
-    transition: border-color 0.3s ease;
+    transition: all 0.3s ease;
+    box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
 }
 
 select:focus {
     border-color: var(--secondary-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;
+}
+
+.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;
+    }
+    
+    .app-subtitle {
+        font-size: 1.1em;
+    }
+    
+    .input-section, .output-section {
+        padding: 20px;
+    }
+    
+    .section-header {
+        font-size: 1.5em;
+    }
+    
+    button.primary-button {
+        padding: 12px 25px;
+        font-size: 1.1em;
+    }
+}
+
+@media (max-width: 480px) {
+    .app-title {
+        font-size: 2em;
+    }
+    
+    .app-subtitle {
+        font-size: 1em;
+    }
+    
+    .input-section, .output-section {
+        padding: 15px;
+    }
+    
+    .section-header {
+        font-size: 1.3em;
+    }
 }
 
 /* Remove Gradio branding */
@@ -415,25 +712,84 @@ select:focus {
     max-width: 100% !important;
 }
 
-.footer-logo, .footer-links {
+footer.footer-links {
     display: none !important;
 }
 """
 
-# Custom HTML header
+# Custom HTML header with icons and improved design
 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>
+
+<div id="loading-overlay" class="loading-container">
+    <div class="loading-spinner">
+        <div class="loading-text">Generating your recipes...</div>
+    </div>
+</div>
+
+<script>
+    // JavaScript to handle loading state
+    function showLoading() {
+        document.getElementById('loading-overlay').classList.add('visible');
+    }
+    
+    function hideLoading() {
+        document.getElementById('loading-overlay').classList.remove('visible');
+    }
+</script>
 """
 
-# Custom HTML footer
+# Custom HTML footer with improved design
 html_footer = """
 <div class="footer">
-    <p>🧪 Powered by Meta's Llama-Vision-Free Model & Together AI</p>
-    <p>📸 Upload multiple ingredient images for more creative recipe combinations</p>
+    <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>
+        <div class="footer-links">
+            <a href="#" target="_blank">How It Works</a>
+            <a href="#" target="_blank">Privacy Policy</a>
+            <a href="#" target="_blank">Contact Us</a>
+        </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
@@ -443,25 +799,16 @@ with gr.Blocks(css=custom_css) as app:
     with gr.Row():
         with gr.Column(scale=1):
             with gr.Group(elem_classes="input-section"):
-                gr.HTML("<h3>🔑 API Configuration</h3>")
+                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...",
                     type="password",
-                    elem_classes="input-group"
-                )
-                
-                gr.HTML("<h3>📷 Upload Ingredients</h3>")
-                image_input = gr.Gallery(
-                    label="", 
-                    elem_id="ingredient-gallery",
-                    elem_classes="gallery-container",
-                    columns=3,
-                    rows=2,
-                    height="auto",
-                    object_fit="contain"
+                    elem_classes="input-group",
+                    info="Your API key will remain private and is used only for this session."
                 )
                 
+                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",
@@ -470,7 +817,16 @@ with gr.Blocks(css=custom_css) as app:
                     elem_classes="image-upload-container"
                 )
                 
-                gr.HTML("<h3>⚙️ Recipe Preferences</h3>")
+                image_input = gr.Gallery(
+                    label="Uploaded Ingredients", 
+                    elem_id="ingredient-gallery",
+                    columns=3,
+                    rows=2,
+                    height="auto",
+                    visible=False
+                )
+                
+                gr.HTML('<h3 class="section-header"><i class="icon">⚙️</i> Recipe Preferences</h3>')
                 with gr.Row():
                     num_recipes = gr.Slider(
                         minimum=1, 
@@ -502,7 +858,7 @@ with gr.Blocks(css=custom_css) as app:
         
         with gr.Column(scale=1):
             with gr.Group(elem_classes="output-section"):
-                gr.HTML("<h3>🍽️ Your Personalized Recipes</h3>")
+                gr.HTML('<h3 class="section-header"><i class="icon">🍽️</i> Your Personalized Recipes</h3>')
                 output = gr.Markdown(elem_classes="recipe-output")
     
     gr.HTML(html_footer)
@@ -510,8 +866,8 @@ with gr.Blocks(css=custom_css) as app:
     # Handle file uploads to display in gallery
     def update_gallery(files):
         if not files:
-            return None
-        return [file.name for file in files]
+            return gr.Gallery.update(visible=False)
+        return gr.Gallery.update(value=[file.name for file in files], visible=True)
     
     file_upload.change(fn=update_gallery, inputs=file_upload, outputs=image_input)