From 387dc259ec88dbbd67d3dd589a2ed9d52e658f1c Mon Sep 17 00:00:00 2001 From: DeepakLenka-space <127427297+DeepakLenka-space@users.noreply.github.com> Date: Sat, 23 Nov 2024 01:40:25 +0530 Subject: [PATCH 1/4] Changed FLUX model from Schnell to Dev version --- app/api/parseMenu/route.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/api/parseMenu/route.ts b/app/api/parseMenu/route.ts index 19d8708..d5c0a64 100644 --- a/app/api/parseMenu/route.ts +++ b/app/api/parseMenu/route.ts @@ -94,7 +94,7 @@ export async function POST(request: Request) { console.log("processing image for:", item.name); const response = await together.images.create({ prompt: `A picture of food for a menu, hyper realistic, highly detailed, ${item.name}, ${item.description}.`, - model: "black-forest-labs/FLUX.1-schnell", + model: "black-forest-labs/FLUX.1-dev", // Updated model width: 1024, height: 768, steps: 5, From 228752935e0430b761c65a76965e7ef93e074d60 Mon Sep 17 00:00:00 2001 From: DeepakLenka-space <127427297+DeepakLenka-space@users.noreply.github.com> Date: Sat, 23 Nov 2024 01:50:05 +0530 Subject: [PATCH 2/4] Added smooth scroll to loading state --- app/page.tsx | 68 ++++++++++++++++++++++++++++++++++------------------ 1 file changed, 45 insertions(+), 23 deletions(-) diff --git a/app/page.tsx b/app/page.tsx index 1d609f5..faf36eb 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -1,7 +1,7 @@ "use client"; import { useS3Upload } from "next-s3-upload"; -import { useState } from "react"; +import { useState, useRef } from "react"; import Dropzone from "react-dropzone"; import { PhotoIcon, MagnifyingGlassIcon } from "@heroicons/react/20/solid"; import { Input } from "@/components/ui/input"; @@ -26,11 +26,25 @@ export default function Home() { >("initial"); const [parsedMenu, setParsedMenu] = useState([]); const [searchTerm, setSearchTerm] = useState(""); + const [isLoading, setIsLoading] = useState(false); + + const loadingRef = useRef(null); + + const scrollToLoading = () => { + loadingRef.current?.scrollIntoView({ + behavior: "smooth", + block: "center", + }); + }; const handleFileChange = async (file: File) => { const objectUrl = URL.createObjectURL(file); setStatus("uploading"); setMenuUrl(objectUrl); + + setIsLoading(true); + scrollToLoading(); + const { url } = await uploadToS3(file); setMenuUrl(url); setStatus("parsing"); @@ -46,15 +60,20 @@ export default function Home() { console.log({ json }); setStatus("created"); + setIsLoading(false); setParsedMenu(json.menu); }; const handleSampleImage = async () => { setStatus("parsing"); + setIsLoading(true); + scrollToLoading(); + setMenuUrl(italianMenuUrl); await new Promise((resolve) => setTimeout(resolve, 3000)); setStatus("created"); + setIsLoading(false); setParsedMenu(italianParsedMenu); }; @@ -82,7 +101,7 @@ export default function Home() {
-

+

Take a picture of your menu and get pictures of each dish so you can better decide what to order.

@@ -136,7 +155,7 @@ export default function Home() { )} {menuUrl && ( -
+
)} - {status === "parsing" && ( -
-
-
-

- Creating your visual menu... -

-
-
-
-
- {[...Array(6)].map((_, i) => ( -
-
-
-
-
- ))} +
+ {isLoading && ( +
+
+
+

+ Creating your visual menu... +

+
+
+
+
+ {[...Array(6)].map((_, i) => ( +
+
+
+
+
+ ))} +
-
- )} + )} +
+ {parsedMenu.length > 0 && (

From e2dd9edbb3ff99aa137b6ed9603e19daddc6d364 Mon Sep 17 00:00:00 2001 From: DeepakLenka-space <127427297+DeepakLenka-space@users.noreply.github.com> Date: Sat, 23 Nov 2024 01:59:15 +0530 Subject: [PATCH 3/4] Updated README with recent changes to image model and scroll behavior --- README.md | 2 -- 1 file changed, 2 deletions(-) diff --git a/README.md b/README.md index d1de004..90fd891 100644 --- a/README.md +++ b/README.md @@ -26,10 +26,8 @@ ## Future Tasks - [ ] Generate additional details (ingredients, origin, calories, taste) then display them in a modal when a user clicks a menu item -- [ ] After upload, do a nice scroll to the loading state when it's loading - [ ] Better account for errors if it crashes (or if menu is too big). Also warn users it can take up to 60 seconds - [ ] Make the "use our example" link show a lot of custom menus in different languages, maybe in a modal - [ ] Iterate on the image prompt to make the images more realistic -- [ ] Try out using Flux Dev instead of Flux Schnell - [ ] Add some tags as well (like spicy, vegetarian, vegan, etc.) to make the UI better - [ ] Add filters for those tags to be able to filter by them for food restrictions From 199447dad754555803e6c96c6129aa4714cd1a1f Mon Sep 17 00:00:00 2001 From: DeepakLenka-space <127427297+DeepakLenka-space@users.noreply.github.com> Date: Sat, 23 Nov 2024 02:07:37 +0530 Subject: [PATCH 4/4] Enhanced image generation prompt for more realistic food images --- README.md | 1 - app/api/parseMenu/route.ts | 19 ++++++++++--------- 2 files changed, 10 insertions(+), 10 deletions(-) diff --git a/README.md b/README.md index 90fd891..bedadec 100644 --- a/README.md +++ b/README.md @@ -28,6 +28,5 @@ - [ ] Generate additional details (ingredients, origin, calories, taste) then display them in a modal when a user clicks a menu item - [ ] Better account for errors if it crashes (or if menu is too big). Also warn users it can take up to 60 seconds - [ ] Make the "use our example" link show a lot of custom menus in different languages, maybe in a modal -- [ ] Iterate on the image prompt to make the images more realistic - [ ] Add some tags as well (like spicy, vegetarian, vegan, etc.) to make the UI better - [ ] Add filters for those tags to be able to filter by them for food restrictions diff --git a/app/api/parseMenu/route.ts b/app/api/parseMenu/route.ts index d5c0a64..71314c8 100644 --- a/app/api/parseMenu/route.ts +++ b/app/api/parseMenu/route.ts @@ -92,15 +92,16 @@ export async function POST(request: Request) { // Create an array of promises for parallel image generation const imagePromises = menuItemsJSON.map(async (item: any) => { console.log("processing image for:", item.name); - const response = await together.images.create({ - prompt: `A picture of food for a menu, hyper realistic, highly detailed, ${item.name}, ${item.description}.`, - model: "black-forest-labs/FLUX.1-dev", // Updated model - width: 1024, - height: 768, - steps: 5, - // @ts-expect-error - this is not typed in the API - response_format: "base64", - }); + const response = await together.images.create({ + prompt: `A professional food photography shot of ${item.name}, ultra realistic, high-end restaurant presentation, studio lighting, highly detailed, professional food styling, garnished, on a elegant plate, dramatic lighting, shallow depth of field, commercial photography quality. ${item.description}`, + model: "black-forest-labs/FLUX.1-dev", // Using the dev model for potentially better quality + width: 1024, + height: 768, + steps: 5, + // @ts-expect-error - this is not typed in the API + response_format: "base64", +}); + item.menuImage = response.data[0]; return item; });