image_management_api/client/README.md

SEREACT Web Client

A comprehensive web interface for the SEREACT API, providing full CRUD operations for teams, users, images, and API keys, along with AI-powered image search capabilities.

Features

• Configuration Management: Set API endpoint and authentication
• Bootstrap Setup: Initial system setup with team and admin user creation
• Teams Management: Create, view, edit, and delete teams
• Users Management: Create, view, edit, and delete users with role management
• API Keys Management: Create and manage API keys for authentication
• Image Management: Upload, view, edit, and delete images with metadata
• AI-Powered Search: Semantic image search using natural language queries
• Responsive Design: Modern Bootstrap-based UI that works on all devices

Prerequisites

• Python 3.8+
• Running SEREACT API server
• Network access to the SEREACT API

Installation

1. Navigate to the client directory:

   cd client
   

2. Create and activate a virtual environment:

   python -m venv venv
   source venv/bin/activate  # Linux/macOS
   venv\Scripts\activate     # Windows
   

3. Install dependencies:

   pip install -r requirements.txt
   

Running the Client

1. Start the Flask development server:

   python app.py
   

2. Open your browser and navigate to:

   http://localhost:5000
   

Initial Setup

First Time Configuration

1. Configure API Connection:

   • Go to the "Config" page
   • Set your SEREACT API base URL (e.g., http://localhost:8000)
   • If you have an API key, enter it here

2. Bootstrap the System (if this is a new SEREACT installation):

   • Go to the "Bootstrap" page
   • Enter your organization details
   • Create the initial admin user
   • The system will generate an API key automatically

3. Start Using the System:

   • Upload images
   • Search for images using AI
   • Manage teams and users
   • Create additional API keys

Usage Guide

Teams Management

• View Teams: See all teams in your organization
• Create Team: Add new teams with descriptions
• Edit Team: Update team information
• Delete Team: Remove teams (admin only)

Users Management

• View Users: See all users in your team/organization
• Create User: Add new users and assign them to teams
• Edit User: Update user information and admin status
• Delete User: Remove users from the system

API Keys Management

• View API Keys: See all your API keys and their status
• Create API Key: Generate new API keys for applications
• Revoke API Key: Disable API keys that are no longer needed

Image Management

• Upload Images: Add new images with descriptions and tags
• Browse Images: View all uploaded images with filtering
• View Image Details: See full image information and metadata
• Edit Images: Update descriptions and tags
• Delete Images: Remove images from storage

AI-Powered Search

• Semantic Search: Use natural language to find images
• Advanced Options: Adjust similarity thresholds and result limits
• Filter Results: Combine search with tag filtering
• Similarity Scores: See how closely images match your query

Configuration

Environment Variables

You can set these environment variables to configure default values:

export SEREACT_API_URL=http://localhost:8000
export SEREACT_API_KEY=your-api-key

Session Storage

The client stores configuration in the browser session:

• API base URL
• API key
• These are not persistent and need to be re-entered after browser restart

API Integration

The client integrates with the following SEREACT API endpoints:

• /api/v1/auth/* - Authentication and API key management
• /api/v1/teams/* - Team management
• /api/v1/users/* - User management
• /api/v1/images/* - Image upload and management
• /api/v1/search/* - AI-powered image search

Security Notes

• API Keys: Store API keys securely and never share them
• HTTPS: Use HTTPS in production for secure communication
• Access Control: The client respects the API's team-based access control
• Session Security: Configure secure session cookies in production

Troubleshooting

Common Issues

1. Connection Errors:

   • Verify the API base URL is correct
   • Ensure the SEREACT API server is running
   • Check network connectivity

2. Authentication Errors:

   • Verify your API key is valid and active
   • Check if the API key has expired
   • Ensure you have the necessary permissions

3. Image Upload Issues:

   • Check file size (max 10MB)
   • Verify file format is supported
   • Ensure sufficient storage space

4. Search Not Working:

   • Verify images have been processed (have embeddings)
   • Check if the vector database is configured
   • Try adjusting similarity thresholds

Error Messages

• "API key not set": Configure your API key in the Config page
• "Request failed": Check API server status and network connection
• "Invalid JSON response": API server may be returning errors
• "File size exceeds limit": Choose a smaller image file

Development

Project Structure

client/
├── app.py                 # Main Flask application
├── requirements.txt       # Python dependencies
├── templates/            # HTML templates
│   ├── base.html         # Base template with navigation
│   ├── index.html        # Home page
│   ├── config.html       # Configuration page
│   ├── bootstrap.html    # Bootstrap setup page
│   ├── teams.html        # Teams listing
│   ├── team_form.html    # Team create/edit form
│   ├── users.html        # Users listing
│   ├── user_form.html    # User create/edit form
│   ├── api_keys.html     # API keys listing
│   ├── api_key_form.html # API key creation form
│   ├── images.html       # Images listing with pagination
│   ├── image_upload.html # Image upload form
│   ├── image_detail.html # Image detail view
│   ├── image_edit.html   # Image edit form
│   └── search.html       # AI search interface
└── uploads/              # Temporary upload directory

Customization

• Styling: Modify the CSS in templates/base.html
• Features: Add new routes and templates in app.py
• API Integration: Extend the make_api_request function
• UI Components: Use Bootstrap classes for consistent styling

License

This web client is part of the SEREACT project and follows the same license terms.