|
|
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)}" |
|
|
|
|
|
|
|
|
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; |
|
|
} |
|
|
""" |
|
|
|
|
|
|
|
|
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> |
|
|
""" |
|
|
|
|
|
|
|
|
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> |
|
|
""" |
|
|
|
|
|
|
|
|
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() |
