Fix image display issue and add image annotation feature

public/docs/ui/cards.md

@@ -0,0 +1,120 @@
+# Card Component Suite Documentation
+
+This documentation outlines a suite of Card components designed for React applications, facilitating the creation of various card layouts with ease. The suite includes a base `Card` component and specialized components for different card types, including those with headers, images, and buttons. These components provide a flexible foundation for building visually appealing card-based interfaces.
+
+## Base Components
+
+### Card
+
+The foundational component that wraps other card elements, providing a consistent container style.
+
+#### Props
+
+- `children`: The content of the card.
+- `className`: Optional custom styling for the card.
+
+### Usage
+
+```jsx
+<Card className="custom-class">
+  {/* Card content goes here */}
+</Card>
+```
+
+### CardHeader, CardBody, CardFooter
+
+These components structure the card's content, defining areas for the header, body, and footer sections.
+
+#### Props (for each)
+
+- `children`: The content of the respective section.
+- `className`: Optional custom styling.
+
+### Usage
+
+```jsx
+<Card>
+  <CardHeader>Header Content</CardHeader>
+  <CardBody>Body Content</CardBody>
+  <CardFooter>Footer Content</CardFooter>
+</Card>
+```
+
+## Specialized Components
+
+### DefaultCard
+
+A pre-styled card with designated areas for a title, text, and a button.
+
+#### Props
+
+- `title`: The card's title.
+- `text`: The main content text of the card.
+- `buttonText`: Text for the button in the footer.
+- `onClick`: Function to be called when the button is clicked.
+- `className`: Optional custom styling for the card.
+
+### Usage
+
+```jsx
+<DefaultCard
+  title="Card Title"
+  text="Some interesting text."
+  buttonText="Click Me"
+  onClick={() => console.log('Button clicked')}
+/>
+```
+
+### CardWithImageHeader
+
+A card variant featuring an image as its header, with custom text content below.
+
+#### Props
+
+- `imageSrc`: URL of the image to display.
+- `imageAlt`: Alternative text for the image.
+- `className`: Optional custom styling for the card.
+
+### Usage
+
+```jsx
+<CardWithImageHeader
+  imageSrc="https://example.com/image.jpg"
+  imageAlt="A descriptive alternative text"
+/>
+```
+
+### CardWithImageHeaderAndFooter
+
+Similar to `CardWithImageHeader`, this component adds a footer with a button.
+
+### Usage
+
+Simply include the component where needed; it uses a default image and text but can be customized further if desired.
+
+### CardWithImageBody
+
+Features an image that covers the body of the card, with text overlaid at the bottom.
+
+#### Props
+
+- `title`: Title to display over the image.
+- `text`: Additional text to display over the image.
+- `imageSrc`: URL of the image to display.
+- `imageAlt`: Alternative text for the image.
+- `className`: Optional custom styling for the card.
+
+### Usage
+
+```jsx
+<CardWithImageBody
+  title="Image Title"
+  text="Image description."
+  imageSrc="https://example.com/image.jpg"
+  imageAlt="A descriptive alternative text"
+/>
+```
+
+## Conclusion
+
+This suite of Card components enables the creation of diverse and engaging card layouts for React-based projects. With customizable options for headers, bodies, footers, and images, developers can easily tailor the appearance and functionality of their cards to fit the needs of their applications. These components are designed to be flexible and easy to integrate, providing a solid foundation for building complex UIs with minimal effort.

public/docs/ui/form-items.md

@@ -0,0 +1,86 @@
+# Form Component Documentation
+
+This documentation covers the integrated use of a `Button` component with a `ContextTooltip` component in React. The `Button` component provides various stylized buttons with customizable sizes, variants, and optional icons. The `ContextTooltip` component adds a tooltip to any React component, showing additional information on hover and allowing for expanded content after a delay. Combining these components enhances UI interactivity and user experience by providing immediate visual feedback and additional contextual information.
+
+## Button Component
+
+### Features
+
+- **Variants**: Supports multiple style variants including `primary`, `secondary`, `primaryDark`, `secondaryDark`, `soft`, `leadingIcon`, `trailingIcon`, `roundedPrimary`, `secondaryRounded`, and `circle`.
+- **Sizes**: Available in multiple sizes from `xs` to `4xl`, allowing for flexible design options.
+- **Customization**: Accepts a `className` prop for further style customizations.
+- **Icons**: Can include leading or trailing icons for enhanced visual communication.
+
+### Props
+
+- `children`: The content of the button.
+- `onClick`: Callback function triggered on button click.
+- `variant`: Style variant of the button.
+- `size`: Size of the button.
+- `className`: Additional CSS classes for customization.
+- `icon`: Icon component to be displayed alongside the button text.
+
+### Usage
+
+```jsx
+<Button
+  variant="primary"
+  size="sm"
+  onClick={() => console.log('Button clicked')}
+  icon={<YourIconComponent />}
+>
+  Click Me
+</Button>
+```
+
+## ContextTooltip Component
+
+### Features
+
+- **Dynamic Positioning**: Automatically positions the tooltip based on the preferred direction and available viewport space.
+- **Delayed Expanded Content**: Shows additional content in the tooltip after a specified delay when hovered.
+- **Customizable**: Allows setting a preferred tooltip direction and custom expanded content.
+
+### Props
+
+- `children`: The target element that the tooltip is attached to.
+- `message`: The message displayed in the tooltip.
+- `expandedContent`: Additional content displayed after a delay upon hover.
+- `preferredDirection`: Preferred direction of the tooltip (`top`, `bottom`, `left`, `right`).
+
+### Usage
+
+```jsx
+<ContextTooltip
+  message="Tooltip message"
+  expandedContent={<AdditionalContent />}
+  preferredDirection="top"
+>
+  <Button>Hover Over Me</Button>
+</ContextTooltip>
+```
+
+## Integration Example
+
+To use the `Button` component with a `ContextTooltip`, wrap the `Button` with the `ContextTooltip` component and provide the necessary props to both components.
+
+```jsx
+<ContextTooltip
+  message="Click for action"
+  expandedContent={<p>More detailed information here.</p>}
+  preferredDirection="right"
+>
+  <Button
+    variant="primary"
+    size="md"
+    icon={<SomeIcon />}
+    onClick={() => console.log('Action performed')}
+  >
+    Hover & Click
+  </Button>
+</ContextTooltip>
+```
+
+## Conclusion
+
+Integrating the `Button` with the `ContextTooltip` component allows developers to create interactive and informative UI elements. The `Button` component offers flexible styling options through variants and sizes, while the `ContextTooltip` enhances user interaction by providing additional context or information on hover. This combination is particularly useful in applications where guiding the user or providing immediate feedback enhances the overall user experience.

public/docs/ui/image-annotation.md

@@ -0,0 +1,60 @@
+# ImageAnnotationComponent Documentation
+
+The `ImageAnnotationComponent` is a robust React component designed for annotating images within your application. Leveraging the `react-konva` library, it provides a rich set of functionalities for drawing, selecting, and editing polygon annotations on images. This component supports different annotation modes, such as segmentation and classification, making it versatile for various image processing tasks.
+
+## Features
+
+- **Polygon Annotation**: Users can draw polygon shapes to annotate parts of an image, useful for segmentation tasks.
+- **Label Assignment**: Each annotation can be assigned a label from a predefined set, facilitating image classification and segmentation tasks.
+- **Image Navigation**: Supports navigating through a series of images for annotation, including next and previous image functionality.
+- **Scalability**: Automatically adjusts the image and annotations to fit within the component's dimensions, maintaining aspect ratio.
+- **Interactive Editing**: Offers tools for editing annotations, including moving points and adjusting shapes.
+- **Dynamic Labeling**: Allows for dynamic assignment of labels to annotations, supporting classification tasks.
+
+## Props
+
+- `imageUrls`: An array of image URLs for annotation. Each item in the array should contain an `id` and a `url` field.
+- `labels`: An array of labels that can be assigned to annotations. Each label has a `name`, `value`, and `color` attribute.
+- `mode`: A string indicating the annotation mode. Supports `"segmentation"` for drawing polygons around objects and `"classification"` for labeling entire images.
+
+## Usage
+
+### Basic Setup
+
+To use the `ImageAnnotationComponent`, you must provide it with the necessary props:
+
+```jsx
+<ImageAnnotationComponent
+  imageUrls={[{ id: '1', url: 'https://example.com/image1.jpg' }, { id: '2', url: 'https://example.com/image2.jpg' }]}
+  labels={[
+    { name: "Label 1", value: "label1", color: "red" },
+    { name: "Label 2", value: "label2", color: "blue" }
+  ]}
+  mode="segmentation"
+/>
+```
+
+### Annotation Modes
+
+- **Segmentation Mode**: Allows users to draw polygons around areas of interest in the image. Ideal for object detection and segmentation tasks.
+- **Classification Mode**: Users can assign labels to the entire image, useful for image classification projects.
+
+## Key Functionalities
+
+- **Drawing Polygons**: Click to start drawing a polygon. Click on the initial point to close the polygon.
+- **Editing Annotations**: Select an existing polygon to edit its shape. Drag points to adjust the polygon's boundaries.
+- **Label Assignment**: For each annotation, select a label from the predefined set to assign it to the polygon.
+- **Navigating Images**: Use the "Next" and "Previous" buttons to move through the series of images provided in the `imageUrls` prop.
+
+## Extending the Component
+
+The `ImageAnnotationComponent` can be extended or customized to fit specific project needs:
+
+- **Custom Tools**: Add custom annotation tools or functionalities specific to your application's requirements.
+- **Image Loading States**: Implement loading indicators for better UX when images are being fetched or loaded.
+- **Annotation Storage**: Integrate with backend services to save and retrieve annotations from a database.
+- **Enhanced Label Management**: Provide options for adding, editing, or removing labels dynamically from the UI.
+
+## Conclusion
+
+The `ImageAnnotationComponent` offers a flexible and interactive solution for annotating images within React applications. By providing essential tools for both segmentation and classification, it caters to a wide range of image annotation needs. Customizable labels and easy navigation between images enhance its usability, making it a valuable tool for projects involving image processing and analysis.