UI/README.md

# Plant & Insect Identifier

A Next.js application that uses AI to identify plants and insects from uploaded images.

## Features

- **Welcome Page**: User registration with name and location input
- **Identification Page**: Upload images and get AI-powered plant/insect identification
- **Real-time Analysis**: Integration with Gradio API for image processing
- **Responsive Design**: Works on desktop and mobile devices
- **Loading States**: Smooth user experience with loading animations

## Tech Stack

- **Framework**: Next.js 15 with App Router
- **Language**: TypeScript
- **Styling**: Tailwind CSS
- **AI Integration**: @gradio/client
- **Development**: ESLint for code quality

## Getting Started

### Prerequisites

- Node.js 18+ 
- npm or yarn
- Gradio server running locally (optional for demo)

### Installation

1. Install dependencies:
```bash
npm install
```

2. Run the development server:
```bash
npm run dev
```

3. Open [http://localhost:3000](http://localhost:3000) in your browser

### API Setup (Optional)

To connect to a real Gradio API:

1. Start your Gradio server at `http://127.0.0.1:7860/`
2. Ensure it has the following endpoints:
   - `/process_image` - Main image processing
   - `/process_image_1` - Alternative processing

The app includes fallback demo responses when the API is not available.

## Usage

1. **Welcome Screen**: Enter your name and location
2. **Identification**: 
   - Choose between Plant or Insect identification
   - Upload an image (JPG, PNG, WebP)
   - Click "Analyze Image" to get results
   - View AI-generated identification results

## Project Structure

```
src/
├── app/
│   ├── layout.tsx          # Root layout
│   ├── page.tsx            # Welcome page
│   ├── identify/
│   │   └── page.tsx        # Identification page
│   └── globals.css         # Global styles
```

## API Integration

The app connects to a Gradio server with the following parameters:

```javascript
{
  image: File,                    // Uploaded image
  identification_type: string,    // "🌱 Plant" or "🐛 Insect"
  region: string,                 // User's region/state
  country: string                 // User's country
}
```

## Development

- `npm run dev` - Start development server
- `npm run build` - Build for production
- `npm run start` - Start production server
- `npm run lint` - Run ESLint

## Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Run tests and linting
5. Submit a pull request

## License

This project is open source and available under the MIT License.