Take a picture of your restaurant menu and generate nice images for each dish.
- Llama 3.2 Vision 90B on Together AI to extract menu items from an image
- Llama 3.1 8B on Together AI for structured outputs (JSON mode)
- Flux Schnell on Together AI for image generation
- Next.js with TypeScript for the app framework
- Shadcn for UI components & Tailwind for styling
- Plausible & Helicone for analytics & observability
- Clone the repo:
git clone https://github.com/Nutlope/picmenu - Create a
.envfile and add your Together AI API key:TOGETHER_API_KEY= - Create an S3 bucket and add the credentials to your
.envfile. Follow this guide to set them up. All required values are in the.env.examplefile. - Run
npm installandnpm run devto install dependencies and run locally.
- 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