Create v1.txt

v1.txt

@@ -0,0 +1,825 @@
+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
+
+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:  # Gradio returns image as dict
+            # Copy the uploaded image to our temporary file
+            with open(image["path"], "rb") as img_file:
+                temp_file.write(img_file.read())
+        elif isinstance(image, Image.Image):
+            # If it's a PIL Image, save it
+            image.save(temp_file.name, format="JPEG")
+        else:
+            # Try to handle other formats
+            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."
+    
+    # First, convert the image to base64
+    try:
+        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},
+                {
+                    "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 the 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."
+    
+    # Filter out None values
+    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."
+    
+    # Save all uploaded images
+    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:
+        # Initialize Together client with the provided API key
+        client = Together(api_key=api_key)
+        
+        # First, analyze each image separately to identify ingredients
+        all_ingredients = []
+        for img_path in image_paths:
+            ingredients_text = analyze_single_image(client, img_path)
+            all_ingredients.append(ingredients_text)
+        
+        # Combine all ingredients into one list
+        combined_ingredients = "\n\n".join([f"Image {i+1} ingredients:\n{ingredients}" 
+                                          for i, ingredients in enumerate(all_ingredients)])
+        
+        # Now generate recipes based on all identified 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."""
+        
+        # Generate recipe suggestions based on all identified ingredients
+        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
+        )
+        
+        # Clean up the temporary files
+        for img_path in image_paths:
+            try:
+                os.unlink(img_path)
+            except:
+                pass
+        
+        # Add information about the ingredients identified
+        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:
+        # Clean up the temporary files in case of error
+        for img_path in image_paths:
+            try:
+                os.unlink(img_path)
+            except:
+                pass
+        return f"Error: {str(e)}"
+
+# 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 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;
+}
+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 {
+    text-align: center;
+    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: 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.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: 30px;
+    box-shadow: var(--card-shadow);
+    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);
+}
+.section-header {
+    color: var(--primary-color);
+    margin-top: 0;
+    font-size: 1.7em;
+    border-bottom: 2px solid var(--secondary-color);
+    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: 3px dashed var(--secondary-color);
+    border-radius: var(--border-radius);
+    padding: 30px;
+    text-align: center;
+    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: 15px 30px;
+    border-radius: 50px;
+    font-size: 1.2em;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    box-shadow: 0 4px 10px rgba(255, 107, 107, 0.3);
+    font-weight: 600;
+    display: block;
+    width: 100%;
+    margin-top: 30px;
+    position: relative;
+    overflow: hidden;
+}
+button.primary-button:hover {
+    transform: translateY(-3px);
+    box-shadow: 0 8px 15px rgba(255, 107, 107, 0.4);
+    background: linear-gradient(135deg, #FF8E8E 0%, var(--primary-dark) 100%);
+}
+button.primary-button:active {
+    transform: translateY(1px);
+    box-shadow: 0 2px 5px rgba(255, 107, 107, 0.4);
+}
+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%;
+}
+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: 20px;
+    background-color: #f9f9f9;
+    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.5em;
+    margin-bottom: 10px;
+    font-weight: 600;
+}
+.footer {
+    text-align: center;
+    margin-top: 60px;
+    padding: 30px 0;
+    color: #6c757d;
+    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: 10px;
+    font-size: 1.2em;
+}
+.input-group {
+    margin-bottom: 25px;
+}
+.input-group label {
+    display: block;
+    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 {
+    border-radius: var(--border-radius);
+    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.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 {
+    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: 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: 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;
+}
+/* Form inputs styling */
+input[type="password"], input[type="text"] {
+    border: 2px solid #e9ecef;
+    border-radius: var(--border-radius);
+    padding: 15px;
+    font-size: 1em;
+    width: 100%;
+    transition: all 0.3s ease;
+    box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
+}
+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 15px center;
+    border: 2px solid #e9ecef;
+    border-radius: var(--border-radius);
+    padding: 15px 45px 15px 15px;
+    font-size: 1em;
+    width: 100%;
+    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 */
+.gradio-container {
+    max-width: 100% !important;
+}
+footer.footer-links {
+    display: none !important;
+}
+"""
+
+# 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 with improved design
+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>
+    // 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
+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 here...",
+                    type="password",
+                    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",
+                    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)
+    
+    # Handle file uploads to display in gallery
+    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)
+    
+    # Handle recipe generation
+    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."
+        
+        # Get actual image files from the uploaded files
+        images = [file.name for file in files]
+        return get_recipe_suggestions(api_key, images, num_recipes, dietary_restrictions, cuisine_preference)
+    
+    # Set up the submission action
+    submit_button.click(
+        fn=process_recipe_request,
+        inputs=[api_key_input, file_upload, num_recipes, dietary_restrictions, cuisine_preference],
+        outputs=output
+    )
+
+# Launch the app
+if __name__ == "__main__":
+    app.launch()