app.py

import gradio as gr
import base64
import os
import tempfile
import uuid
from together import Together
from PIL import Image

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 save_uploaded_image(image):
    """Save uploaded image to a temporary file and return the path"""
    if image is None:
        return None
    
    with tempfile.NamedTemporaryFile(delete=False, suffix='.jpg') as temp_file:
        if isinstance(image, dict) and "path" in image:
            with open(image["path"], "rb") as img_file:
                temp_file.write(img_file.read())
        elif isinstance(image, Image.Image):
            image.save(temp_file.name, format="JPEG")
        else:
            try:
                Image.open(image).save(temp_file.name, format="JPEG")
            except Exception:
                return None
    
    return temp_file.name

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 get_recipe_suggestions(api_key, images, num_recipes=3, dietary_restrictions="None", cuisine_preference="Any"):
    """Get recipe suggestions based on uploaded images of ingredients"""
    if not api_key:
        return "Please provide your Together API key."
    
    if not images or len(images) == 0 or all(img is None for img in images):
        return "Please upload at least one image of ingredients."
    
    valid_images = [img for img in images if img is not None]
    
    if len(valid_images) == 0:
        return "No valid images were uploaded. Please try again."
    
    image_paths = []
    for img in valid_images:
        img_path = save_uploaded_image(img)
        if img_path:
            image_paths.append(img_path)
    
    if not image_paths:
        return "Failed to process the uploaded images."
    
    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
        
        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=3000,
            temperature=0.6
        )
        
        for img_path in image_paths:
            try:
                os.unlink(img_path)
            except:
                pass
        
        result = "## 📋 Ingredients Identified\n\n"
        result += combined_ingredients
        result += "\n\n---\n\n"
        result += "## 🍽️ Recipe Suggestions\n\n"
        result += response.choices[0].message.content
        
        return result
        
    except Exception as e:
        for img_path in image_paths:
            try:
                os.unlink(img_path)
            except:
                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');

: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;
}

body {
    font-family: var(--font-family);
    background: linear-gradient(135deg, #111827 0%, #1f2937 100%);
    color: var(--text-color);
    margin: 0;
    padding: 0;
    min-height: 100vh;
}

.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 40px 20px;
}

.app-header {
    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);
}

.app-title {
    font-size: 3.2em;
    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;
}

.input-section, .output-section {
    background: 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);
}

.section-header {
    color: var(--primary-color);
    font-size: 1.8em;
    margin-bottom: 25px;
    font-weight: 600;
    display: flex;
    align-items: center;
}

.section-header i {
    margin-right: 12px;
    font-size: 1.3em;
}

.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);
    transition: all 0.3s ease;
}

.image-upload-container:hover {
    border-color: var(--primary-color);
    background: rgba(99, 102, 241, 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));
    color: white;
    border: none;
    padding: 16px 32px;
    border-radius: 50px;
    font-size: 1.2em;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.4);
    font-weight: 600;
    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);
}

.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;
    margin-top: 20px;
}

.gallery-item {
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease;
    aspect-ratio: 1 / 1;
}

.gallery-item:hover {
    transform: scale(1.05);
}

.loading-container {
    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;
    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 {
    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;
}

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%;
    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);
}

@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;
    }
}

@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;
    }
}

.gradio-container {
    max-width: 100% !important;
}

footer.footer-links {
    display: none !important;
}
"""

# 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>
<div id="loading-overlay" class="loading-container">
    <div class="loading-spinner">
        <div class="loading-text">Crafting your recipes...</div>
    </div>
</div>
<script>
    function showLoading() {
        document.getElementById('loading-overlay').classList.add('visible');
    }
    
    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>
        <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>
"""

# 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>')
                api_key_input = gr.Textbox(
                    label="Together API Key", 
                    placeholder="Enter your Together API key...",
                    type="password",
                    elem_classes="input-group",
                    info="Your API key is used only for this session and remains private."
                )
                
                gr.HTML('<h3 class="section-header"><i class="icon">📷</i> 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-header"><i class="icon">⚙️</i> 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"><i class="icon">🍽️</i> Your Personalized Recipes</h3>')
                output = gr.Markdown(elem_classes="recipe-output")
    
    gr.HTML(html_footer)
    
    def update_gallery(files):
        if not 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)
    
    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)
    
    submit_button.click(
        fn=process_recipe_request,
        inputs=[api_key_input, file_upload, num_recipes, dietary_restrictions, cuisine_preference],
        outputs=output
    )

if __name__ == "__main__":
    app.launch()