Create v3.txt

v3.txt

@@ -0,0 +1,887 @@
+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
+import time
+
+def encode_image_to_base64(image_path):
+    """Convert image to base64 encoding"""
+    with open(image_path, "rb") as image_file:
+        return base64.b64encode(image_file.read()).decode('utf-8')
+
+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."""
+    
+    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')
+            
+            content = [
+                {"type": "text", "text": user_prompt},
+                {
+                    "type": "image_url",
+                    "image_url": {
+                        "url": f"data:image/jpeg;base64,{base64_image}"
+                    }
+                }
+            ]
+            
+            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)}"
+
+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:
+        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)
+        
+        all_ingredients = []
+        for img_path in image_paths:
+            ingredients_text = analyze_single_image(client, img_path)
+            all_ingredients.append(ingredients_text)
+        
+        combined_ingredients = "\n\n".join([f"Image {i+1} ingredients:\n{ingredients}" 
+                                          for i, ingredients in enumerate(all_ingredients)])
+        
+        system_prompt = """You are a culinary expert AI assistant that specializes in creating recipes based on available ingredients.
+        You will be provided with lists of ingredients identified from multiple images. Your task is to suggest creative, 
+        detailed recipes that use as many of the identified ingredients as possible.
+        
+        For each recipe suggestion, include:
+        1. Recipe name
+        2. Brief description of the dish
+        3. Complete ingredients list (including estimated quantities and any additional staple ingredients that might be needed)
+        4. Step-by-step cooking instructions
+        5. Approximate cooking time
+        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.
+        
+        {combined_ingredients}
+        
+        Dietary restrictions to consider: {dietary_restrictions}
+        Cuisine preference: {cuisine_preference}
+        
+        Please be creative with your recipe suggestions and try to use ingredients from multiple images if possible."""
+        
+        response = client.chat.completions.create(
+            model="meta-llama/Llama-Vision-Free",
+            messages=[
+                {"role": "system", "content": system_prompt},
+                {"role": "user", "content": user_prompt}
+            ],
+            max_tokens=2048,
+            temperature=0.7
+        )
+        
+        recipe_text = response.choices[0].message.content
+        
+        # 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)}", 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"""
+    if not files or len(files) == 0:
+        return gr.update(visible=False)
+    return gr.update(value=files, visible=True)
+
+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.", None]
+    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;
+}
+body {
+    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;
+}
+.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);
+}
+.app-title {
+    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;
+}
+.input-section, .output-section {
+    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;
+}
+.section-header2 {
+    font-size: 1.6em;
+    font-weight: 600;
+    color: var(--text-color);
+    border-bottom: 2px solid var(--primary-color);
+    padding-bottom: 10px;
+}
+.image-upload-container {
+    border: 2px dashed var(--secondary-color);
+    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);
+}
+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);
+}
+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));
+    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;
+}
+.gallery-item:hover {
+    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;
+}
+.ingredients-identified, .recipe-suggestions {
+    background-color: #f9f9f9;
+    border-radius: var(--border-radius);
+    padding: 20px;
+    margin-bottom: 20px;
+}
+.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.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;
+    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;
+}
+.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;
+}
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
+.loading-text {
+    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);
+}
+.footer-content {
+    max-width: 800px;
+    margin: 0 auto;
+}
+.footer-brand {
+    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;
+}
+.footer-links a:hover {
+    color: var(--primary-color);
+}
+"""
+
+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>
+    <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 = """
+<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>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>
+    document.addEventListener('DOMContentLoaded', function() {
+        const submitBtn = document.querySelector('button.primary-button');
+        if (submitBtn) {
+            submitBtn.addEventListener('click', function() {
+                showLoading();
+                // Check every second for output content
+                const checkInterval = setInterval(function() {
+                    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';
+                        }
+                    }
+                }, 1000);
+                
+                // Force hide after 120 seconds
+                const forceHideTimeout = setTimeout(function() {
+                    hideLoading();
+                    clearInterval(checkInterval);
+                }, 120000);
+            });
+        }
+    });
+</script>
+"""
+
+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"):
+                gr.HTML('<h3 class="section-header">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 class="section-header">Upload Ingredients</h3>')
+                file_upload = gr.File(
+                    label="Upload images of ingredients",
+                    file_types=["image"],
+                    file_count="multiple",
+                    elem_classes="image-upload-container"
+                )
+                
+                image_input = gr.Gallery(
+                    label="Uploaded Ingredients", 
+                    elem_id="ingredient-gallery",
+                    columns=3,
+                    rows=2,
+                    height="auto",
+                    visible=False
+                )
+                
+                gr.HTML('<h3 class="section-header2">Recipe Preferences</h3>')
+                with gr.Row():
+                    num_recipes = gr.Slider(
+                        minimum=1, 
+                        maximum=5, 
+                        value=3, 
+                        step=1, 
+                        label="Number of Recipe Suggestions",
+                        elem_classes="input-group"
+                    )
+                
+                with gr.Row():
+                    with gr.Column():
+                        dietary_restrictions = gr.Dropdown(
+                            choices=["None", "Vegetarian", "Vegan", "Gluten-Free", "Dairy-Free", "Low-Carb", "Keto", "Paleo"],
+                            value="None",
+                            label="Dietary Restrictions",
+                            elem_classes="input-group"
+                        )
+                        
+                    with gr.Column():
+                        cuisine_preference = gr.Dropdown(
+                            choices=["Any", "Italian", "Asian", "Mexican", "Mediterranean", "Indian", "American", "French", "Middle Eastern"],
+                            value="Any",
+                            label="Cuisine Preference",
+                            elem_classes="input-group"
+                        )
+                
+                submit_button = gr.Button("Get Recipe Suggestions", elem_classes="primary-button")
+        
+        with gr.Column(scale=1):
+            with gr.Group(elem_classes="output-section"):
+                gr.HTML('<h3 class="section-header">Your Personalized Recipes</h3>')
+                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_and_update_file_path,
+        inputs=[api_key_input, file_upload, num_recipes, dietary_restrictions, cuisine_preference],
+        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__":
+    app.launch()