Skip to content

Commit

Permalink
Merge pull request #45 from vxshxk/gallery-show-recipe
Browse files Browse the repository at this point in the history 
Link gallery images with recipes for easy access
  • Loading branch information
@yukitya-1811
yukitya-1811 authored Jun 22, 2024
2 parents b73291f + c5a3122 commit 52ccd3f
Show file tree
Hide file tree
Showing 6 changed files with 190 additions and 46 deletions.
2 changes: 2 additions & 0 deletions recipify/recipify/templates/gallery.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -98,7 +98,9 @@ <h1 class="mb-4 text-3xl font-extrabold text-gray-900 dark:text-white md:text-5x
<div class="grid grid-cols-2 md:grid-cols-3 gap-5">
{% for image in images %}
<div>
<a href="{% url 'pick_recipe' image.id %}">
<img class="h-auto max-w-full rounded-lg" src="{{ image.image.url }}" alt="Gallery image" />
</a>
</div>
{% endfor %}
</div>
Expand Down
121 changes: 121 additions & 0 deletions recipify/recipify/templates/pick.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,121 @@
{% load static %}

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>RecipifyAI</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.3.0/flowbite.min.css" rel="stylesheet" />
<link rel="stylesheet" href="{% static 'css/pick.css' %}">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css" rel="stylesheet"/>
</head>
<body>
<div class="navbar-container">
<nav class="bg-white dark:bg-gray-900 fixed w-full z-20 top-0 start-0 border-b border-gray-200 dark:border-gray-600">
<div class="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-4">
<a href="#" class="flex items-center space-x-3 rtl:space-x-reverse">
<img src="{% static 'img/logo.jpeg' %}" class="h-8" alt="RecipifyAI Logo">
<span class="self-center text-2xl font-semibold whitespace-nowrap dark:text-white">RecipifyAI</span>
</a>
<div class="flex md:order-2 space-x-3 md:space-x-0 rtl:space-x-reverse">
<button id="menu-button" type="button" class="inline-flex items-center p-2 ml-1 text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600">
<span class="sr-only">Open main menu</span>
<svg class="w-6 h-6" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM4 15a1 1 0 100-2h12a1 1 0 100 2H4z" clip-rule="evenodd"></path>
</svg>
</button>
</div>
<div class="items-center justify-between hidden w-full md:flex md:w-auto md:order-1" id="navbar-sticky">
<ul class="flex flex-col p-4 md:p-0 mt-4 font-medium border border-gray-100 rounded-lg bg-gray-50 md:space-x-8 rtl:space-x-reverse md:flex-row md:mt-0 md:border-0 md:bg-white dark:bg-gray-800 md:dark:bg-gray-900 dark:border-gray-700">
<li>
<a href="{% url 'home' %}" class="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700 md:p-0 md:dark:hover:text-blue-500 dark:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700">Home</a>
</li>
<li>
<a href="#" class="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700 md:p-0 md:dark:hover:text-blue-500 dark:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700">About</a>
</li>
<li>
<a href="{% url 'image_upload' %}" class="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700 md:p-0 md:dark:hover:text-blue-500 dark:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700">Upload</a>
</li>
<li>
<a href="{% url 'gallery' %}" class="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700 md:p-0 md:dark:hover:text-blue-500 dark:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700">Gallery</a>
</li>
<li>
<a href="{% url 'contact' %}" class="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700 md:p-0 md:dark:hover:text-blue-500 dark:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700">Contact</a>
</li>
{% if request.user.is_authenticated %}
<li>
<a href="{% url 'logout' %}" class="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700 md:p-0 md:dark:hover:text-blue-500 dark:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700">Logout</a>
</li>
{% else %}
<li>
<a href="{% url 'login' %}" class="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700 md:p-0 md:dark:hover:text-blue-500 dark:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700">Login</a>
</li>
{% endif %}
</ul>
</div>
</div>
</nav>
</div>

<!-- Sidebar -->

<div id="sidebar" class="fixed top-0 left-0 w-64 h-full bg-gray-800 text-white transform -translate-x-full transition-transform duration-300 ease-in-out z-30">
<button id="close-sidebar" class="absolute top-4 right-4 text-white">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg>
</button>
<ul class="flex flex-col p-4 mt-4 space-y-2 font-medium border border-gray-700 rounded-lg bg-gray-800">
<li>
<a href="{% url 'home' %}" class="block py-2 px-3 text-white bg-blue-700 rounded md:bg-transparent md:text-blue-700" aria-current="page">Home</a>
</li>
<li>
<a href="#" class="block py-2 px-3 text-white rounded hover:bg-gray-700">About</a>
</li>
<li>
<a href="{% url 'image_upload' %}" class="block py-2 px-3 text-white rounded hover:bg-gray-700">Upload</a>
</li>
<li>
<a href="{% url 'gallery' %}" class="block py-2 px-3 text-white rounded hover:bg-gray-700">Gallery</a>
</li>
<li>
<a href="{% url 'contact' %}" class="block py-2 px-3 text-white rounded hover:bg-gray-700">Contact</a>
</li>
{% if requestO.user.is_authenticated %}
<li>
<a href="{% url 'logout' %}" class="block py-2 px-3 text-white rounded hover:bg-gray-700">Logout</a>
</li>
{% else %}
<li>
<a href="{% url 'login' %}" class="block py-2 px-3 text-white rounded hover:bg-gray-700">Login</a>
</li>
{% endif %}
</ul>
</div>

<div class="recipe-section">
{% for recipe in recipes %}
<div class="recipe">
<a href="#" class="block max-w-sm p-6 bg-white border border-gray-200 rounded-lg shadow hover:bg-gray-100 dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700">
<div class="recipe-title">{{ recipe.name }}</div>
<div class="ingredients-title">Ingredients Required</div>
<ul style="margin-bottom: 20px;" class="list-disc">
{{recipe.ingredients}}
</ul>
<button type="button"
onclick="window.location.href='{% url 'show_recipe' recipe.id %}'"
class="text-white bg-gradient-to-r from-purple-500 via-purple-600 to-purple-700 hover:bg-gradient-to-br focus:ring-4 focus:outline-none focus:ring-purple-300 dark:focus:ring-purple-800 font-medium rounded-lg text-sm px-5 py-2.5 text-center me-2 mb-2">Show Recipe
</button>
<button type="button"
onclick="window.location.href='{% url 'delete_recipe' recipe.id %}'"
class="text-white bg-gradient-to-r from-red-400 via-red-500 to-red-600 hover:bg-gradient-to-br focus:ring-4 focus:outline-none focus:ring-red-300 dark:focus:ring-red-800 font-medium rounded-lg text-sm px-5 py-2.5 text-center me-2 mb-2">Delete Recipe
</button>
</a>
</div>
{% endfor %}
</div>
</body>
</html>
12 changes: 0 additions & 12 deletions recipify/recipify/templates/upload.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -159,18 +159,6 @@ <h1 class="mb-4 text-3xl font-extrabold text-gray-900 dark:text-white md:text-5x
onclick="window.location.href='{% url 'show_recipe' recipe.id %}'"
class="focus:outline-none text-white bg-purple-700 hover:bg-purple-800 focus:ring-4 focus:ring-purple-300 font-medium rounded-lg text-sm px-5 py-2.5 mb-2 dark:bg-purple-600 dark:hover:bg-purple-700 dark:focus:ring-purple-900">
Show Recipe</button>
{% comment %} <div class="ingredients-title">Nutrients Present</div>
<ul class="list-disc">
{% for ingredient in recipe.nutrients_present %}
<li>{{ ingredient }}
{% endfor %}
</ul>
<div class="ingredients-title">Nutrients Absent</div>
<ul class="list-disc">
{% for ingredient in recipe.nutrients_absent %}
<li>{{ ingredient }}
{% endfor %}
</ul> {% endcomment %}
</a>
</div>
{% endfor %}
Expand Down
2 changes: 2 additions & 0 deletions recipify/recipify/urls.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,8 @@
path("gallery/", views.gallery, name="gallery"),
path("contact/",views.contact,name="contact"),
path("show_recipe/<int:id>", views.show_recipe, name="show_recipe"),
path("pick_recipe/<int:img_id>", views.pick_recipe, name="pick_recipe"),
path("delete_recipe/<int:id>", views.delete_recipe, name="delete_recipe")
]

if settings.DEBUG:
Expand Down
57 changes: 23 additions & 34 deletions recipify/recipify/views.py
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
from django.shortcuts import render, get_object_or_404
from django.contrib import messages
from django.shortcuts import redirect
from django.urls import reverse
from .forms import SignupForm, LoginForm
from .models import FoodImage
from .models import Recipe
Expand Down Expand Up @@ -79,40 +80,6 @@ def logoutPage(request):
logout(request)
return redirect('login')

# def image_upload_view(request):
# recipe_text = None # Initialize recipe_text to avoid UnboundLocalError
# if request.method == 'POST':
# form = UploadFileForm(request.POST, request.FILES)
# if form.is_valid():
# img_instance = form.save()
# # Open the image using PIL
# try:
# img = Image.open(img_instance.image.path)
# except IOError:
# return HttpResponse("Image not found or cannot be opened.", status=404)

# # Process the image with CLIENT.infer
# try:
# result = CLIENT.infer(img, model_id="fridge-object/3")
# logger.debug("Infer result: %s", result)
# ingredients = [prediction['class'] for prediction in result['predictions']]

# # Get recipes using the detected ingredients
# recipe_text = getRecipes(ingredients)
# if not recipe_text:
# messages.error(request, "Failed to retrieve recipes.")

# # Optionally, you can process the image
# processed_image = image_formatter(img)
# print(processed_image)
# except json.JSONDecodeError as e:
# logger.error("JSON decode error: %s", e)
# return HttpResponse(f"Error processing image: {e}", status=500)
# else:
# form = UploadFileForm()

# return render(request, 'upload.html', {'form': form, 'recipe': recipe_text})

@login_required
def image_upload_view(request):
if request.method == 'POST' and 'image-input' in request.FILES:
Expand Down Expand Up @@ -186,3 +153,25 @@ def clean(item):

return item.capitalize()


def pick_recipe(request, img_id):
image = get_object_or_404(FoodImage, id=img_id)
recipes = Recipe.objects.filter(image=image)
context = {
"recipes": recipes
}

return render(request, 'pick.html', context)

def delete_recipe(request, id):
recipe = get_object_or_404(Recipe, id=id)
img = recipe.image
recipe.delete()

associated_recipes = img.recipe_set.all()
if not associated_recipes:
img.delete()
return redirect(reverse('gallery'))

return redirect(reverse('pick_recipe', args=[img.id]))

42 changes: 42 additions & 0 deletions recipify/static/css/pick.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
body {
padding-top: 65px; /* Adjust based on the height of the nav bar */
}

.recipe-display {
display: flex;
gap: 100px;
align-items: flex-start;
justify-content: center;
}

.recipe-title {
font-weight: 700;
font-size: 20px;
white-space: nowrap;
overflow: break-word;
text-overflow: ellipsis;
min-width: 300px;
max-width: 100%;
overflow: auto;
box-sizing: border-box;
}

.recipe-section {
margin-top: 100px;
display: flex;
gap: 60px;
justify-content: center;
align-items: flex-start;
}


.ingredients-title {
margin-top: 20px;
margin-bottom: 20px;
font-weight: 500;
font-size: 20px;
}

.list_disc{
margin-top: 20px;
}

0 comments on commit 52ccd3f

Please sign in to comment.