Update app.py

app.py

@@ -8,6 +8,7 @@ import os
 from together import Together
 import tempfile
 import uuid
+import time
 
 def encode_image_to_base64(image_path):
     """Convert image to base64 encoding"""
@@ -50,6 +51,189 @@ def analyze_single_image(client, img_path):
     except Exception as e:
         return f"Error analyzing image: {str(e)}"
 
+def format_ingredients_html(all_ingredients):
+    """Format the identified ingredients in HTML"""
+    html_content = """
+    <div class="ingredients-identified">
+        <h2>📋 Ingredients Identified</h2>
+    """
+    
+    for i, ingredients in enumerate(all_ingredients):
+        html_content += f"""
+        <div class="ingredient-group">
+            <h3>Image {i+1} Ingredients</h3>
+            <ul class="ingredient-list">
+        """
+        
+        # Split ingredients by new line and create list items
+        ingredient_lines = ingredients.strip().split('\n')
+        for line in ingredient_lines:
+            if line.strip():
+                html_content += f"<li>{line.strip()}</li>\n"
+                
+        html_content += """
+            </ul>
+        </div>
+        """
+    
+    html_content += "</div>"
+    return html_content
+
+def format_recipe_to_html(recipe_text):
+    """Convert the recipe text to formatted HTML"""
+    # Initialize the HTML content with the recipe suggestions header
+    html_content = """
+    <div class="recipe-suggestions">
+        <h2>🍽️ Recipe Suggestions</h2>
+    """
+    
+    # Split the text by recipe (assume recipes are separated by a recipe name heading)
+    recipe_sections = []
+    current_recipe = ""
+    lines = recipe_text.split('\n')
+    
+    # Process lines to identify recipe sections
+    for line in lines:
+        if line.strip().startswith(("Recipe ", "# ", "## ", "### ")):
+            # If we've collected some content for a recipe, save it
+            if current_recipe:
+                recipe_sections.append(current_recipe)
+                current_recipe = ""
+            
+        # Add line to current recipe
+        current_recipe += line + "\n"
+    
+    # Add the last recipe if exists
+    if current_recipe:
+        recipe_sections.append(current_recipe)
+    
+    # Process each recipe section into HTML
+    for recipe in recipe_sections:
+        if not recipe.strip():
+            continue
+            
+        html_content += '<div class="recipe-card">'
+        
+        lines = recipe.split('\n')
+        in_ingredients = False
+        in_instructions = False
+        
+        for line in lines:
+            # Handle recipe title
+            if any(x in line.lower() for x in ["recipe ", "# recipe"]) or line.strip().startswith(("# ", "## ")):
+                title = line.replace("#", "").replace("Recipe:", "").replace("Recipe", "").strip()
+                html_content += f'<h3 class="recipe-title">{title}</h3>\n'
+                continue
+                
+            # Handle description
+            if "description" in line.lower() and ":" in line:
+                description = line.split(":", 1)[1].strip()
+                html_content += f'<p class="recipe-description">{description}</p>\n'
+                continue
+                
+            # Start ingredients section
+            if "ingredients" in line.lower() and not in_ingredients:
+                in_ingredients = True
+                in_instructions = False
+                html_content += '<div class="recipe-ingredients">\n'
+                html_content += '<h4>Ingredients</h4>\n<ul>\n'
+                continue
+                
+            # Start instructions section
+            if any(x in line.lower() for x in ["instructions", "directions", "steps", "preparation"]) and not in_instructions:
+                if in_ingredients:
+                    html_content += '</ul>\n</div>\n'
+                    in_ingredients = False
+                
+                in_instructions = True
+                html_content += '<div class="recipe-instructions">\n'
+                html_content += '<h4>Instructions</h4>\n<ol>\n'
+                continue
+                
+            # Handle cooking time
+            if "cooking time" in line.lower() or "prep time" in line.lower() or "time" in line.lower():
+                if in_ingredients:
+                    html_content += '</ul>\n</div>\n'
+                    in_ingredients = False
+                if in_instructions:
+                    html_content += '</ol>\n</div>\n'
+                    in_instructions = False
+                
+                time_info = line.strip()
+                html_content += f'<p class="recipe-time"><strong>⏱️ {time_info}</strong></p>\n'
+                continue
+                
+            # Handle difficulty level
+            if "difficulty" in line.lower():
+                difficulty = line.strip()
+                html_content += f'<p class="recipe-difficulty"><strong>🔍 {difficulty}</strong></p>\n'
+                continue
+                
+            # Handle nutritional info
+            if "nutritional" in line.lower():
+                if in_ingredients:
+                    html_content += '</ul>\n</div>\n'
+                    in_ingredients = False
+                if in_instructions:
+                    html_content += '</ol>\n</div>\n'
+                    in_instructions = False
+                
+                html_content += '<div class="recipe-nutrition">\n'
+                html_content += f'<h4>{line.strip()}</h4>\n<ul>\n'
+                continue
+                
+            # Process ingredient line
+            if in_ingredients and line.strip() and not line.lower().startswith(("ingredients", "instructions")):
+                item = line.strip()
+                if item.startswith("- "):
+                    item = item[2:]
+                elif item.startswith("* "):
+                    item = item[2:]
+                    
+                if item:
+                    html_content += f'<li>{item}</li>\n'
+                continue
+                
+            # Process instruction line
+            if in_instructions and line.strip() and not line.lower().startswith(("ingredients", "instructions")):
+                step = line.strip()
+                if step.startswith("- "):
+                    step = step[2:]
+                elif step.startswith("* "):
+                    step = step[2:]
+                elif step.startswith(". "):
+                    step = step[2:]
+                elif step[0].isdigit() and step[1] in [".", ")"]:
+                    step = step[2:].strip()
+                    
+                if step:
+                    html_content += f'<li>{step}</li>\n'
+                continue
+                
+            # Process nutrition line
+            if "nutritional" in line.lower() and line.strip() and not line.startswith(("ingredients", "instructions")):
+                item = line.strip()
+                if item.startswith("- "):
+                    item = item[2:]
+                elif item.startswith("* "):
+                    item = item[2:]
+                    
+                if item and not item.lower().startswith("nutritional"):
+                    html_content += f'<li>{item}</li>\n'
+                continue
+        
+        # Close any open sections
+        if in_ingredients:
+            html_content += '</ul>\n</div>\n'
+        if in_instructions:
+            html_content += '</ol>\n</div>\n'
+            
+        html_content += '</div>\n'  # Close recipe card
+    
+    html_content += '</div>\n'  # Close recipe suggestions div
+    
+    return html_content
+
 def get_recipe_suggestions(api_key, image_paths, num_recipes=3, dietary_restrictions="None", cuisine_preference="Any"):
     """Get recipe suggestions based on the uploaded images of ingredients"""
     if not api_key:
@@ -82,6 +266,7 @@ def get_recipe_suggestions(api_key, image_paths, num_recipes=3, dietary_restrict
         6. Difficulty level (Easy, Medium, Advanced)
         7. Nutritional highlights
         
+        Format each recipe clearly with headings for each section. Make sure to separate recipes clearly.
         Consider any dietary restrictions and cuisine preferences mentioned by the user."""
         
         user_prompt = f"""Based on the following ingredients identified from multiple images, suggest {num_recipes} creative and delicious recipes.
@@ -99,19 +284,195 @@ def get_recipe_suggestions(api_key, image_paths, num_recipes=3, dietary_restrict
                 {"role": "system", "content": system_prompt},
                 {"role": "user", "content": user_prompt}
             ],
-            max_tokens=20000, #2048
+            max_tokens=2048,
             temperature=0.7
         )
         
-        result = "## 📋 Ingredients Identified\n\n"
-        result += combined_ingredients
-        result += "\n\n---\n\n"
-        result += "## 🍽️ Recipe Suggestions\n\n"
-        result += response.choices[0].message.content
+        recipe_text = response.choices[0].message.content
         
-        return result
+        # Format ingredients and recipes as HTML
+        ingredients_html = format_ingredients_html(all_ingredients)
+        recipes_html = format_recipe_to_html(recipe_text)
+        
+        # Combine HTML content
+        html_content = ingredients_html + "<hr>" + recipes_html
+        
+        # Create a downloadable HTML file with styling
+        full_html = create_downloadable_html(ingredients_html, recipes_html, dietary_restrictions, cuisine_preference)
+        
+        # Generate a unique filename for the downloadable HTML
+        timestamp = int(time.time())
+        file_name = f"recipes_{timestamp}.html"
+        file_path = os.path.join(tempfile.gettempdir(), file_name)
+        
+        with open(file_path, "w", encoding="utf-8") as f:
+            f.write(full_html)
+        
+        return [html_content, file_path]
     except Exception as e:
-        return f"Error: {str(e)}"
+        return [f"Error: {str(e)}", None]
+
+def create_downloadable_html(ingredients_html, recipes_html, dietary_restrictions, cuisine_preference):
+    """Create a complete HTML document with styling for download"""
+    html = f"""<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Your Personalized Recipes</title>
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
+        :root {{
+            --primary-color: #FF6F61;
+            --secondary-color: #4BB543;
+            --accent-color: #F0A500;
+            --background-color: #F4F4F9;
+            --text-color: #333333;
+            --card-background: #FFFFFF;
+            --border-radius: 12px;
+            --box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 20px;
+        }}
+        body {{
+            font-family: 'Poppins', sans-serif;
+            background-color: var(--background-color);
+            color: var(--text-color);
+            margin: 0;
+            padding: 0;
+            line-height: 1.6;
+        }}
+        .container {{
+            max-width: 1000px;
+            margin: 0 auto;
+            padding: 20px;
+        }}
+        header {{
+            background-color: var(--primary-color);
+            color: white;
+            padding: 40px 20px;
+            text-align: center;
+            border-radius: 0 0 20px 20px;
+            margin-bottom: 30px;
+        }}
+        h1 {{
+            font-size: 2.5em;
+            margin-bottom: 10px;
+        }}
+        .recipe-info {{
+            display: flex;
+            justify-content: center;
+            gap: 20px;
+            margin-bottom: 20px;
+            flex-wrap: wrap;
+        }}
+        .info-badge {{
+            background-color: rgba(255, 255, 255, 0.2);
+            padding: 8px 16px;
+            border-radius: 20px;
+            font-size: 0.9em;
+        }}
+        .ingredients-identified, .recipe-suggestions {{
+            background-color: var(--card-background);
+            border-radius: var(--border-radius);
+            padding: 25px;
+            margin-bottom: 30px;
+            box-shadow: var(--box-shadow);
+        }}
+        h2 {{
+            color: var(--primary-color);
+            border-bottom: 2px solid var(--primary-color);
+            padding-bottom: 10px;
+            margin-top: 0;
+        }}
+        .ingredient-group {{
+            margin-bottom: 20px;
+        }}
+        h3 {{
+            color: var(--accent-color);
+            margin-bottom: 10px;
+        }}
+        .ingredient-list {{
+            list-style-type: disc;
+            padding-left: 20px;
+        }}
+        .recipe-card {{
+            background-color: #f9f9f9;
+            border-radius: var(--border-radius);
+            padding: 20px;
+            margin-bottom: 30px;
+            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
+        }}
+        .recipe-title {{
+            color: var(--secondary-color);
+            font-size: 1.8em;
+            margin-top: 0;
+            margin-bottom: 15px;
+        }}
+        .recipe-description {{
+            font-style: italic;
+            margin-bottom: 20px;
+            color: #666;
+        }}
+        .recipe-ingredients, .recipe-instructions, .recipe-nutrition {{
+            margin-bottom: 20px;
+        }}
+        .recipe-ingredients h4, .recipe-instructions h4, .recipe-nutrition h4 {{
+            color: var(--primary-color);
+            margin-bottom: 10px;
+        }}
+        .recipe-ingredients ul {{
+            list-style-type: disc;
+        }}
+        .recipe-instructions ol {{
+            padding-left: 20px;
+        }}
+        .recipe-instructions li {{
+            margin-bottom: 10px;
+        }}
+        .recipe-time, .recipe-difficulty {{
+            color: #666;
+            margin: 10px 0;
+        }}
+        hr {{
+            border: 0;
+            height: 1px;
+            background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0));
+            margin: 30px 0;
+        }}
+        footer {{
+            text-align: center;
+            margin-top: 50px;
+            padding: 20px;
+            color: #666;
+            font-size: 0.9em;
+        }}
+    </style>
+</head>
+<body>
+    <header>
+        <h1>🍲 Your Personalized Recipes</h1>
+        <div class="recipe-info">
+            <span class="info-badge">Dietary: {dietary_restrictions}</span>
+            <span class="info-badge">Cuisine: {cuisine_preference}</span>
+            <span class="info-badge">Generated: {time.strftime("%Y-%m-%d")}</span>
+        </div>
+    </header>
+    
+    <div class="container">
+        {ingredients_html}
+        
+        <hr>
+        
+        {recipes_html}
+        
+        <footer>
+            <p>Generated by Visual Recipe Assistant</p>
+            <p>Powered by Meta's Llama-Vision-Free Model & Together AI</p>
+        </footer>
+    </div>
+</body>
+</html>
+"""
+    return html
 
 def update_gallery(files):
     """Update the gallery with uploaded image paths"""
@@ -122,7 +483,7 @@ 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 ["Please upload at least one image of ingredients.", None]
     return get_recipe_suggestions(api_key, files, num_recipes, dietary_restrictions, cuisine_preference)
 
 custom_css = """
@@ -219,6 +580,27 @@ button.primary-button:hover {
     background-color: #E15F52;
     box-shadow: var(--hover-shadow);
 }
+button.download-button {
+    background-color: var(--secondary-color);
+    color: white;
+    border: none;
+    padding: 12px 24px;
+    border-radius: 6px;
+    font-size: 1em;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    margin-top: 15px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    margin-left: auto;
+    margin-right: auto;
+}
+button.download-button:hover {
+    background-color: #3da037;
+    box-shadow: var(--hover-shadow);
+}
 .gallery-container {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
@@ -245,15 +627,36 @@ button.primary-button:hover {
     overflow-y: auto;
     padding-right: 15px;
 }
-.recipe-output h2 {
-    color: var(--primary-color);
-    margin-top: 30px;
-    font-size: 2em;
+.ingredients-identified, .recipe-suggestions {
+    background-color: #f9f9f9;
+    border-radius: var(--border-radius);
+    padding: 20px;
+    margin-bottom: 20px;
 }
-.recipe-output h3 {
+.recipe-card {
+    background-color: white;
+    border-radius: var(--border-radius);
+    padding: 20px;
+    margin-bottom: 20px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+}
+.recipe-title {
     color: var(--secondary-color);
-    font-size: 1.5em;
-    margin-top: 20px;
+    font-size: 1.8em;
+    margin-top: 0;
+    margin-bottom: 15px;
+}
+.recipe-description {
+    font-style: italic;
+    margin-bottom: 20px;
+    color: #666;
+}
+.recipe-ingredients, .recipe-instructions, .recipe-nutrition {
+    margin-bottom: 20px;
+}
+.recipe-ingredients h4, .recipe-instructions h4, .recipe-nutrition h4 {
+    color: var(--primary-color);
+    margin-bottom: 10px;
 }
 .loading-container {
     display: flex;
@@ -358,22 +761,27 @@ html_footer = """
         if (submitBtn) {
             submitBtn.addEventListener('click', function() {
                 showLoading();
-                const output = document.querySelector('.recipe-output');
-
                 // Check every second for output content
                 const checkInterval = setInterval(function() {
-                    if (output && output.textContent.trim().length > 0) {
+                    const output = document.querySelector('.recipe-output');
+                    if (output && output.innerHTML.trim().length > 0) {
                         hideLoading();
                         clearInterval(checkInterval);
                         clearTimeout(forceHideTimeout);
+                        
+                        // Show download button if it exists
+                        const downloadBtn = document.getElementById('download-button');
+                        if (downloadBtn) {
+                            downloadBtn.style.display = 'flex';
+                        }
                     }
-                }, 60000);
-
+                }, 1000);
+                
                 // Force hide after 120 seconds
                 const forceHideTimeout = setTimeout(function() {
                     hideLoading();
                     clearInterval(checkInterval);
-                }, 120000); // 120000 milliseconds = 120 seconds
+                }, 120000);
             });
         }
     });
@@ -383,6 +791,9 @@ html_footer = """
 with gr.Blocks(css=custom_css) as app:
     gr.HTML(html_header)
     
+    # Store the generated html file path for download
+    html_file_path = gr.State(None)
+    
     with gr.Row():
         with gr.Column(scale=1):
             with gr.Group(elem_classes="input-section"):
@@ -444,16 +855,32 @@ 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">Your Personalized Recipes</h3>')
-                output = gr.Markdown(elem_classes="recipe-output")
+                output = gr.HTML(elem_classes="recipe-output")
+                download_button = gr.Button("📥 Download Recipes as HTML", elem_classes="download-button", visible=False, elem_id="download-button")
     
     gr.HTML(html_footer)
     
+    # Update functions
+    def process_and_update_file_path(api_key, files, num_recipes, dietary_restrictions, cuisine_preference):
+        """Process recipe request and update file path state"""
+        result = process_recipe_request(api_key, files, num_recipes, dietary_restrictions, cuisine_preference)
+        html_content = result[0]
+        file_path = result[1]
+        return html_content, file_path, gr.update(visible=file_path is not None)
+    
     file_upload.change(fn=update_gallery, inputs=file_upload, outputs=image_input)
     
     submit_button.click(
-        fn=process_recipe_request,
+        fn=process_and_update_file_path,
         inputs=[api_key_input, file_upload, num_recipes, dietary_restrictions, cuisine_preference],
-        outputs=output
+        outputs=[output, html_file_path, download_button]
+    )
+    
+    # Handle download button click
+    download_button.click(
+        fn=lambda x: x,
+        inputs=html_file_path,
+        outputs=gr.File(label="Download Recipe HTML")
     )
 
 if __name__ == "__main__":