PhotoSlider AI

PhotoSlider is an experimental, AI-powered image editor that allows for iterative, side-by-side image modification. Built with Next.js, it uses Google's Gemini API for image generation and Chrome's built-in AI for image analysis, creating a unique workflow where you can "steer" an image's attributes.

This project was created for a Google hackathon to explore the creative possibilities of combining local and server-side AI models.

Features

• Side-Scrolling UI: View the entire history of your image generations in a clean, horizontal layout.
• AI-Powered Analysis: Uses Chrome's experimental built-in AI (LanguageModel) to analyze an image and suggest editable attributes.
• Attribute-Based Generation: Modify attributes like "Brightness," "Mood," or even whimsical concepts like "Essence" to generate the next image in the series.
• Custom Attributes: Add your own attributes to guide the image generation process.
• Camera & File Upload: Start with an image from your computer or snap a photo directly from your webcam.

Getting Started

Follow these instructions to get the project running on your local machine.

Prerequisites

• Node.js (v18 or later recommended)
• npm, yarn, or pnpm
• Google Chrome or a Chromium-based browser that supports experimental AI features.

Installation & Setup

1. Clone the repository:

   git clone https://github.com/your-username/photoslider.git
   cd photoslider

2. Install dependencies:

   npm install

3. Set up your environment variables: Create a new file named .env.local in the root of the project by copying the example file:

   cp .env.example .env.local

   Now, open .env.local and add your Google Gemini API key. You can get one from Google AI Studio.

   # .env.local
   
   NEXT_PUBLIC_GEMINI_API_KEY=your_api_key_here
   

4. Run the development server:

   npm run dev

5. Open http://localhost:3000 in your browser to see the application.

Important Note on Browser Compatibility

The image analysis feature of this application relies on an experimental, built-in AI model that is currently only available in Google Chrome and some Chromium-based browsers.

For full setup instructions, visit https://developer.chrome.com/docs/ai/get-started as the instructions change constantly.

If the model is unavailable, the application will fall back to a default set of attributes ("Brightness", "Mood", "Essence") so you can still use the image generation features.

---

This is a Next.js project bootstrapped with create-next-app.