Project Archived and discontinued -> Superseded by VibeRecipe

AI Recipe Extractor

🚨 Important Disclaimer: This is an AI-Generated Project 🚨

This project was entirely generated by an AI assistant (a Large Language Model). While it aims to be functional and demonstrate capabilities with the Gemini API and UI/UX design, it comes with no guarantees of active support, maintenance, or future development from the original "author" (the AI).

The code is provided "as-is". It may contain bugs, inefficiencies, or deviate from best practices.

Pull requests and contributions are highly welcome! If you find this project interesting and wish to improve it, please feel free to fork it and submit your changes.

About The Project

AI Recipe Extractor is a web application designed to simplify your cooking process. It specifically aims to help users take screenshots of recipes, for instance, from popular apps like YAZIO, and convert them into usable digital formats.

The application will:

1. Extract Recipe Text: Utilize Google's Gemini API to analyze the uploaded recipe image and extract structured recipe data, including name, ingredients, instructions, prep time, cook time, and more.
2. Generate Dish Image: Based on a description of the dish found in the recipe (or the recipe name), it uses Google's Imagen API to generate an illustrative image of the final dish.
3. Multiple Output Formats: View the extracted recipe as plain text for easy copying or as JSON-LD structured specifically for straightforward import into recipe managers like Tandoor Recipes.

The goal is to make it easy for you to get recipes from images (like those from YAZIO or other sources) into a usable digital format, particularly for platforms such as Tandoor.

Key Features

• Image-to-Recipe: Upload PNG, JPG, or GIF images of recipes.
• AI-Powered Extraction: Leverages Google Gemini API for intelligent text and data extraction.
• AI-Powered Image Generation: Leverages Google Imagen API for creating dish visuals.
• Structured Data: Outputs recipe data in schema.org/Recipe compliant JSON-LD, suitable for Tandoor.
• Plain Text Output: Provides a simple, copy-paste friendly text version of the recipe.
• Responsive Design: Works on various screen sizes.
• Drag & Drop Upload: Easy file uploading.

Tech Stack

• Frontend: React, TypeScript
• Styling: Tailwind CSS
• AI Models:
  • Google Gemini API (gemini-2.5-flash) for recipe text extraction.
  • Google Imagen API (imagen-3.0-generate-002) for dish image generation.

Prerequisites

• API Key: This application requires a Google Generative AI API key. The application code (services/geminiService.ts) directly uses process.env.API_KEY to initialize the AI client. You must ensure this environment variable is set in the execution context where the application runs.

Setting the API_KEY Environment Variable

How you set this variable depends on your development and deployment environment. Here are common methods:

1. Local Development (using a .env file - Recommended for simplicity)

For local development, it's common to use a .env file. Since this is a client-side application without a Node.js backend to directly load .env files using libraries like dotenv, this method assumes your development server or build process (if any) is configured to make these variables available under process.env. If you are simply opening index.html directly in a browser, this method will not work without additional tooling.

a. Create a file named .env in the root directory of the project. b. Add your API key to this file: API_KEY="YOUR_ACTUAL_GOOGLE_GEMINI_API_KEY" c. Important: Add .env to your .gitignore file to prevent accidentally committing your API key to version control. .env d. You would typically need a build step or a development server that injects these values. For simple static sites served directly, this might involve manually replacing a placeholder or using a more advanced setup. The current project structure assumes process.env.API_KEY will be populated by the environment it's running in.

2. Setting in your Terminal (for the current session)

You can set the environment variable directly in your terminal before running your development server or opening the application. This is temporary and only applies to the current terminal session.

• Linux/macOS (bash/zsh):

  export API_KEY="YOUR_ACTUAL_GOOGLE_GEMINI_API_KEY"

• Windows (Command Prompt):

  set API_KEY="YOUR_ACTUAL_GOOGLE_GEMINI_API_KEY"

• Windows (PowerShell):

  $env:API_KEY="YOUR_ACTUAL_GOOGLE_GEMINI_API_KEY"

After setting it, if you are using a development server, you might need to restart it.

3. Hosting Platform Environment Variables

If you deploy this application to a hosting platform (like Vercel, Netlify, GitHub Pages with Actions, AWS Amplify, Firebase Hosting, etc.), these platforms provide a way to set environment variables for your build and runtime environments.

• Consult your hosting provider's documentation for instructions on how to set environment variables.
• You will typically add API_KEY with your actual key value through their dashboard or configuration files.

Important Note: The application services/geminiService.ts relies on process.env.API_KEY being available in the JavaScript environment where it executes. Ensure your chosen method makes the API key accessible in this way. If process.env.API_KEY is undefined, the Gemini API calls will fail.

How to Use

1. Ensure your API_KEY environment variable is set and accessible as process.env.API_KEY (see "Setting the API_KEY Environment Variable" above).
2. Open index.html in your browser (preferably via a local development server that can provide the environment variable if you're using a method that requires it, or ensure your chosen method works for direct file opening).
3. (Optional) Choose your preferred output format (Plain Text or Tandoor JSON-LD).
4. Upload an image of a recipe using the uploader.
5. The AI will process the image and display the extracted recipe and a generated dish image.
6. You can then copy the text or JSON output, or download the generated dish image.

Tandoor API Export and CORS Configuration

This application features the ability to export recipes directly to your Tandoor Recipes instance. When the "Tandoor (JSON-LD)" output format is selected, an "Export to Tandoor" button will appear. Clicking this button opens a modal where you can enter your Tandoor instance URL and a Personal Access Token (API Key) generated from your Tandoor user profile.

Important Note on CORS (Cross-Origin Resource Sharing):

For the export to Tandoor to work, your Tandoor instance (especially if self-hosted and behind a reverse proxy like Nginx) must be configured to accept requests from the domain where this AI Recipe Extractor application is running. This is a security measure browsers enforce.

If your Tandoor instance does not send the correct CORS headers, your browser will block the export request, and you'll likely see an error in the browser console similar to "Access to fetch at '...' from origin '...' has been blocked by CORS policy...".

Nginx Configuration Example for Tandoor CORS:

If you are using Nginx as a reverse proxy for your Tandoor instance, you'll need to modify its configuration to add the necessary CORS headers. The configuration file is often located at /etc/nginx/conf.d/tandoor.conf or a similar path.

Here's an example configuration snippet:

server {
    listen 8002; # Or your Tandoor's listening port
    #access_log /var/log/nginx/access.log;
    #error_log /var/log/nginx/error.log;
    client_max_body_size 128M;

    # Set a variable for the allowed CORS origin.
    # IMPORTANT: Change 'http://airecipes.box:5173' to the actual URL
    # where YOUR AI Recipe Extractor app is deployed and accessed from.
    set $cors_origin 'http://airecipes.box:5173';

    location /static/ {
        alias /opt/tandoor/staticfiles/;
    }

    location /media/ {
        alias /opt/tandoor/mediafiles/;
    }

    location / {
        # --- Preflight (OPTIONS) Request Handling ---
        if ($request_method = 'OPTIONS') {
            add_header 'Access-Control-Allow-Origin' $cors_origin always;
            add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, PUT, DELETE, PATCH' always;
            add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range,Authorization' always;
            add_header 'Access-Control-Max-Age' 1728000 always;
            add_header 'Content-Type' 'text/plain; charset=utf-8';
            return 204; # HTTP 204 No Content for OPTIONS
        }

        # --- Actual API Request Handling ---
        # Add CORS headers to all responses from the proxied application.
        add_header 'Access-Control-Allow-Origin' $cors_origin always;
        add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range' always;

        # Proxy to your Tandoor application
        proxy_set_header Host $http_host;
        proxy_pass http://unix:/opt/tandoor/tandoor.sock; # Or your Tandoor upstream (e.g., http://localhost:8000)
    }
}

Key points for the Nginx configuration:

• set $cors_origin 'http://airecipes.box:5173';: This line is crucial. You must replace 'http://airecipes.box:5173' with the actual URL (including protocol and port if non-standard) from which you are accessing the AI Recipe Extractor app. If you are running it locally, this might be http://localhost:3000 or a similar address.
• The location / block handles requests to your Tandoor application. The if ($request_method = 'OPTIONS') block specifically manages preflight requests.
• The add_header directives ensure the browser receives permission to make the request.
• After modifying your Nginx configuration, remember to test it (sudo nginx -t) and then reload Nginx (sudo systemctl reload nginx or similar command for your OS).

Alternatively, Tandoor itself has environment variables (like TANDOOR_CORS_ALLOWED_ORIGINS in its .env file) that can be used to configure CORS. However, if using a reverse proxy, managing CORS headers at the proxy level (like in Nginx) is often a robust approach. Ensure only one layer (either Tandoor app or the proxy) is primarily responsible for setting these headers to avoid conflicts.

DEPLOYING

1. To deploy, make sure to add a ALLOWED_HOSTS environment variable with allowed domains pointing at the host (e.g. ALLOWED_HOSTS=aire.abc).
2. Build the application npm run build.
3. Run the application with --host flag (to enable exposing) by executing npx vite --host.

Contributing

As mentioned, this project is AI-generated and may not be actively maintained by its "creator". However, community contributions are highly encouraged!

If you'd like to contribute:

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

License

This project is licensed under the MIT License - see the LICENSE file for details.

---

This README was also partially drafted by an AI.