# TaggedImage - React Component for Image EXIF Description

The `TaggedImage` component is a React component that dynamically adds an image's description (if available) from its EXIF metadata as the `alt` text for the image. In order for an image to have a valid `alt` tag, it **must first be analyzed by AIA HANDICAP AI**. If the image lacks EXIF metadata or an image description, it falls back to a default `alt` text that you can specify. This is especially useful for improving web accessibility by providing meaningful alternative text for images when EXIF data is present.

## Table of Contents

- [Installation](#installation)
- [Usage](#usage)
- [Props](#props)
- [How It Works](#how-it-works)
- [Limitations](#limitations)
- [License](#license)

## Installation

To install the `TaggedImage` component, you can use npm or yarn:

```bash
npm install aia-tagging-react
```

or

```bash
yarn add aia-tagging-react
```

## Usage

Here is a simple example of how to use the `TaggedImage` component in your React project:

```tsx
import React from 'react';
import TaggedImage from 'aia-tagging-react';

const App = () => {
  return (
    <div>
      <TaggedImage
        src="https://example.com/image.jpg"
        defaultAlt="Default alternative text"
        width={500}
        height={300}
        className="image-class"
      />
    </div>
  );
};

export default App;
```

### Explanation:
- **`src`**: The URL of the image. This is the primary property used to load the image.
- **`defaultAlt`**: (optional) A fallback alt text if the EXIF description is not available.
- **`width`** and **`height`**: Define the image size in pixels.
- **`className`**: (optional) The CSS class name for the image element.

The component automatically fetches the image, reads its EXIF data, and sets the description from the EXIF metadata as the `alt` attribute. **Note: To receive a valid alt tag, the image must first be processed by the AIA HANDICAP AI**. If no description is found or the image hasn't been analyzed, it falls back to the `defaultAlt` value.

## Props

The `TaggedImage` component accepts the following props:

| Prop                | Type                                              | Description                                                                                         |
|---------------------|---------------------------------------------------|-----------------------------------------------------------------------------------------------------|
| `src`               | `string`                                          | The image URL to display. This is a required prop.                                                   |
| `defaultAlt`        | `string`                                          | Default alt text to use if no EXIF description is found.                                            |
| `className`         | `string`                                          | Optional className for styling the image.                                                          |
| `style`             | `React.CSSProperties`                             | Inline styles for the image element.                                                                |
| `width`             | `number`                                          | The width of the image in pixels.                                                                   |
| `height`            | `number`                                          | The height of the image in pixels.                                                                  |
| `alt`               | `string`                                          | Custom alt text. If provided, this will override the EXIF description or `defaultAlt`.              |
| `fill`              | `boolean`                                         | Whether to make the image fill the container. Defaults to `false`.                                  |
| `sizes`             | `string`                                          | Specifies image sizes for responsive images.                                                       |
| `loading`           | `"lazy" - "eager"`                                | Defines the loading strategy for the image (`lazy` or `eager`). Default is `"lazy"`.                |
| `onLoad`            | `(event: React.SyntheticEvent<HTMLImageElement, Event>) => void` | Callback function when the image has loaded.                                                        |
| `onError`           | `(event: React.SyntheticEvent<HTMLImageElement, Event>) => void` | Callback function when there is an error loading the image.                                          |
| `overrideSrc`       | `string`                                          | If provided, this will override the `src` property with a new URL.                                  |
| `crossOrigin`       | `"anonymous" - "use-credentials"`                  | Sets the cross-origin setting for the image (useful for CORS handling).                             |
| `decoding`          | `"sync" - "async" - "auto"`                       | Decoding strategy for the image. Defaults to `"auto"`.                                               |
| `fetchPriority`     | `"high" - "low" - "auto"`                          | Set the fetch priority for the image.                                                               |
| `referrerPolicy`    | `"no-referrer" - "no-referrer-when-downgrade" - "origin-when-cross-origin" - "unsafe-url"` | Referrer policy for the image request.               |
| `srcSet`            | `string`                                          | Defines multiple image sources for responsive images.                                               |
| `useMap`            | `string`                                          | Defines the usemap attribute for the image (for image maps).                                        |

## How It Works

1. **Fetching the Image**: When the `TaggedImage` component is rendered, it fetches the image using the `src` URL.
2. **Extracting EXIF Data**: After the image is fetched, the component reads the EXIF metadata using the `exif-parser` library. Specifically, it looks for the `ImageDescription` tag in the EXIF data.
3. **Setting the Alt Text**: If the EXIF data contains a description, it is used as the `alt` text for the image. If no description is available, the component defaults to the `defaultAlt` value (or the `alt` prop if provided). **However, to get a valid description, the image must be analyzed by AIA HANDICAP AI first**.
4. **Fallback and Error Handling**: If there are any issues fetching the image or parsing its EXIF data, the component logs the error and uses the fallback alt text.

## Limitations

- **EXIF Data Availability**: Not all images contain EXIF metadata, and even if they do, the `ImageDescription` field may be absent. In this case, the component falls back to the provided `defaultAlt` or `alt` prop.
- **Cross-Origin Restrictions**: If the image is hosted on a different domain (cross-origin), make sure that the server supports CORS headers. Otherwise, the image might not load or the EXIF data may not be accessible.
- **Large Images**: For very large images, loading and parsing EXIF data can take longer, potentially causing delays in rendering the image with the correct `alt` text.
- **AIA HANDICAP**: **Only images that have been analyzed by AIA HANDICAP AI will have a valid EXIF description.** For more information on the service, visit [AIA HANDICAP](https://www.aia-handicap.com).
- **Accuracy**: While the AI aims to provide accurate descriptions, there may still be occasional inaccuracies in the alt text. The AI is continuously being improved, and these descriptions will become more accurate over time as the model evolves.

## License

This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.