IRIS is an open-source framework designed to help developers build AI-powered image search applications with ease. It provides a modular, extensible architecture that handles image capture, processing, search API integration, and result display across web and mobile platforms via Capacitor.
The Image Recognition Integration System (IRIS) was created to streamline the development of image search applications. By abstracting common tasks—such as capturing media, communicating with AI-powered search backends, and displaying results—IRIS lets you focus on your app’s unique features instead of boilerplate.
- Cross-Platform: Web app with static export, wrapped for iOS and Android via Capacitor.
- Modular Architecture: Clear separation between pages, UI components, and backend clients.
- Configurable Styling & API:
public/setup.json
controls theming and endpoint URLs without code changes. - Persistent History: Stores previous search images in IndexedDB for offline access.
-
Clone the repository:
git clone https://github.com/oss-slu/image-recognition-integration-system.git cd image-recognition-integration-system
-
Install dependencies:
npm install # or yarn install
-
Run in development:
npm run dev # or yarn dev
-
Build & Export for production:
npm run build npm run export
To deploy IRIS as a native app on iOS or Android, follow these steps:
-
Install Capacitor CLI (if not already installed):
npm install @capacitor/core @capacitor/cli --save
-
Initialize Capacitor (one-time, if not done):
npx cap init # Use com.iris.app for App ID and "image-recognition-integration-system" for App Name
-
Add Platforms:
npx cap add ios npx cap add android
-
Configure: The file
capacitor.config.ts
sets yourappId
,appName
, andwebDir
. By default,webDir
isout
(the export directory). -
Build & Sync:
npm run build npm run export npx cap copy
-
Open & Run:
npx cap open ios # or npx cap open android
The file public/setup.json
contains runtime configuration for theming and API endpoints without code changes:
{
"cameraButtonColor": "bg-green-500",
"imageApiUrl": "http://<YOUR_API_HOST>:<PORT>/search",
"appBackground": "bg-gray-900",
"cardBackground": "bg-gray-800",
"textColor": "text-gray-200",
"headingColor": "text-blue-500",
"borderColor": "border-gray-700",
"buttonPrimary": "bg-blue-500 text-white hover:bg-blue-600",
"buttonSecondary": "bg-slate-700 text-blue-200 hover:bg-slate-600"
}
- cameraButtonColor: Tailwind class for the camera trigger button.
- imageApiUrl: URL of your image search API backend.
- appBackground, cardBackground, textColor, headingColor, borderColor: Tailwind classes for consistent theming.
- buttonPrimary, buttonSecondary: Text & background classes for button variants.
Modify values here and reload the app to see changes.
/
(Home): Capture or upload images, send to API, and display search results./about
: Overview of the IRIS framework and project goals./loginscreen
: User authentication interface (stubbed for POC)./imageGallery
: Interactive gallery showcasing image search examples and sample queries./previousImages
: View and manage history of previously searched images (stored in IndexedDB)./profile
: User profile and settings page (for future integration).
- CameraButton: Opens device camera or file picker.
- ImageDisplay: Renders a single image with metadata.
- ImageGrid: Arranges multiple
ImageDisplay
cards in a responsive grid. - ImageModal: Fullscreen modal for viewing image details and search metadata.
- NavigationBar: Top-level navigation with links to pages.
lib/modelClient.ts
: API client for communicating with the image recognition backend.utils/indexedDbHelpers.ts
: Helpers for saving/retrieving image records in IndexedDB.types/config.ts
: TypeScript definitions for runtime configuration and theming.
Contributions are welcome! Please review CONTRIBUTING.md
for guidelines on issue reporting, coding standards, and pull requests.
This project is licensed under the GNU Lesser General Public License (LGPL), version 3.0 or later.
You are free to use, modify, and distribute this software under the terms of the LGPL, provided that any modifications to the library itself are also shared under the same license. When used in a larger application, the rest of the application can be licensed under different terms.