Multi-Picture Prompt Processor

A web application for processing images through Google's Gemini API using custom prompt sets. Upload two images, apply a sequence of prompts, and see all intermediate results.

Features

• Prompt Set Management: Create, edit, and delete prompt sets (1-25 prompts per set)
• Dual Image Processing: Upload two images and process them together with the first prompt
• Sequential Processing: Each subsequent prompt processes the result from the previous step
• Visual Results: Display all intermediate results in a clean, modern interface
• Local Storage: Uses SQLite for storing prompt sets
• No Authentication: Simple single-user setup for local development

Prerequisites

• Node.js (v14 or higher)
• npm or yarn
• Google Gemini API key

Installation

1. Clone or navigate to the project directory

   cd app_multipicture

2. Install dependencies

   npm install

3. Configure the API key

   • Copy the example config file:

     cp config.example.json config.json

   • Edit config.json and add your Gemini API key:

     {
       "geminiApiKey": "YOUR_ACTUAL_API_KEY_HERE",
       "port": 3000
     }

Getting a Gemini API Key

1. Go to Google AI Studio
2. Sign in with your Google account
3. Click "Create API Key"
4. Copy the key and paste it into your config.json file

Running the Application

1. Start the server

   npm start

   For development with auto-restart:

   npm run dev

2. Open your browser Navigate to: http://localhost:3000

Usage

Creating Prompt Sets

1. Click on the Config link in the navigation
2. Click Create New Set
3. Enter a name for your prompt set
4. Add prompts (1-25) by clicking Add Prompt
5. Enter the text for each prompt
6. Click Save

Processing Images

1. Go to the Main Page
2. Upload two images using the file inputs
3. Select a prompt set from the dropdown
4. Click Process Images
5. Wait for the processing to complete
6. View all intermediate results

How It Works

1. First Prompt: Applied to both uploaded images simultaneously
2. Subsequent Prompts: Each prompt is applied to the result from the previous step
3. Results Display: All intermediate results are shown in sequence

Project Structure

app_multipicture/
├── server.js              # Express backend server
├── package.json           # Node.js dependencies
├── config.json            # API configuration (create from example)
├── config.example.json    # Configuration template
├── prompts.db            # SQLite database (auto-created)
├── public/               # Frontend files
│   ├── index.html        # Main page
│   ├── config.html       # Config page
│   ├── main.js           # Main page logic
│   ├── config.js         # Config page logic
│   └── styles.css        # Shared styles
└── uploads/              # Temporary image storage (auto-created)

API Endpoints

Prompt Sets

• GET /api/prompt-sets - Get all prompt sets
• GET /api/prompt-sets/:id - Get a specific prompt set
• POST /api/prompt-sets - Create a new prompt set
• PUT /api/prompt-sets/:id - Update a prompt set
• DELETE /api/prompt-sets/:id - Delete a prompt set

Image Processing

• POST /api/process-images - Process images with a prompt set
  • Body: FormData with images (2 files) and promptSetId

Deployment

Preparing for Deployment

1. Update API URL: In public/main.js and public/config.js, change:

   const API_URL = 'http://localhost:3000/api';

   to your production URL:

   const API_URL = 'https://yourdomain.com/api';

2. Set production port: Update config.json if needed

3. Secure your API key: Use environment variables in production:

   const apiKey = process.env.GEMINI_API_KEY || config.geminiApiKey;

Deploying to Hosteurope or Similar

1. Upload all files to your hosting server
2. Install Node.js dependencies on the server
3. Set up the API key configuration
4. Configure your hosting to run node server.js as a service
5. Set up a reverse proxy (nginx/Apache) to route traffic to the Node.js server
6. Ensure the server has write permissions for the database and uploads folder

Example nginx configuration

server {
    listen 80;
    server_name yourdomain.com;

    location / {
        proxy_pass http://localhost:3000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
}

Troubleshooting

Server won't start

• Make sure you've created config.json from config.example.json
• Verify your Gemini API key is correct
• Check if port 3000 is already in use

Database errors

• Delete prompts.db and restart the server to recreate the database
• Ensure the application has write permissions in the directory

Image processing fails

• Verify your Gemini API key is valid and has credits
• Check the console for error messages
• Ensure the uploaded images are in a supported format

CORS errors

• Make sure the frontend is accessing the correct API URL
• In production, update CORS settings in server.js if needed

Notes

• The current implementation uses the Gemini Pro Vision model
• Image processing may take several seconds per prompt
• Large images will be uploaded and may take time to process
• The uploads/ folder stores temporary files that are cleaned up after processing

Future Enhancements

• Support for more than 2 initial images
• Download processed results
• Progress indicators for each prompt
• Batch processing multiple image sets
• User authentication and multi-user support
• Image result caching

License

ISC