| 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 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, 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 |
| |
| 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=20000, #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 |
| |
| return result |
| except Exception as e: |
| return f"Error: {str(e)}" |
|
|
| 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." |
| 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); |
| } |
| .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; |
| } |
| .recipe-output h2 { |
| color: var(--primary-color); |
| margin-top: 30px; |
| font-size: 2em; |
| } |
| .recipe-output h3 { |
| color: var(--secondary-color); |
| font-size: 1.5em; |
| margin-top: 20px; |
| } |
| .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(); |
| const output = document.querySelector('.recipe-output'); |
| // Check every second for output content |
| const checkInterval = setInterval(function() { |
| if (output && output.textContent.trim().length > 0) { |
| hideLoading(); |
| clearInterval(checkInterval); |
| clearTimeout(forceHideTimeout); |
| } |
| }, 60000); |
| // Force hide after 120 seconds |
| const forceHideTimeout = setTimeout(function() { |
| hideLoading(); |
| clearInterval(checkInterval); |
| }, 120000); // 120000 milliseconds = 120 seconds |
| }); |
| } |
| }); |
| </script> |
| """ |
|
|
| 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">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.Markdown(elem_classes="recipe-output") |
| |
| gr.HTML(html_footer) |
| |
| file_upload.change(fn=update_gallery, inputs=file_upload, outputs=image_input) |
| |
| 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() |
