feat(185): Add extraction page with part 1 of integration (#231)

* feat(185): Add extraction page with part 1 of integration

* feat(185): Add Cors, update shape type

feat(185): Add Cors, update shape type

* feat(185): Add Cors, update shape type

Author: knguyenrise8

OCR/frontend/api/api.ts

@@ -0,0 +1,24 @@
+import { Page } from "../src/contexts/FilesContext";
+import { ImageToTextResponse } from "./types/types";
+
+export const AddFormData = async (args: Page): Promise<ImageToTextResponse | null> => {
+
+    const { sourceImage, templateImage, fieldNames } = args;
+    const form = new FormData();
+    form.append("source_image", sourceImage);
+    form.append("segmentation_template", templateImage);
+    form.append("labels", JSON.stringify(fieldNames));
+    form.append("", "");
+    console.log(args)
+    try {
+        const response = await fetch("http://localhost:8000/image_to_text/", {
+            "method": "POST",
+            body: form
+          })
+          return  await response.json() as ImageToTextResponse;
+    } catch (error) {
+        console.error(error);
+        return null;
+    }
+    
+}

OCR/frontend/api/types/types.ts

@@ -0,0 +1,32 @@
+export interface Label {
+    color: string;
+    label: string;
+    type: string;
+}
+
+export type Labels = Label[];
+
+export interface ImageToTextArgs {
+    fieldNames: Labels;
+    sourceImage: string;
+    templateImage: string;
+}
+
+export type ImageToTextResponse = {
+    [key: string]: [string, number];
+};
+
+export interface ResultItem {
+    text: string;
+    confidence: number;
+  }
+  
+  export interface Submission {
+    template_name: string;
+    template_image: string; // Base64-encoded image string
+    file_name: string;
+    file_image: string; // Base64-encoded image string
+    results: {
+      [key: string]: ResultItem; // Allows any key with a ResultItem value
+    };
+  }

OCR/frontend/package-lock.json

@@ -16,8 +16,11 @@
   },
   "dependencies": {
     "@trussworks/react-uswds": "^9.0.0",
+    "@types/hex-rgb": "^3.0.0",
+    "@uswds/uswds": "^3.8.1",
     "classnames": "^2.5.1",
     "focus-trap-react": "^10.2.3",
+    "hex-rgb": "^5.0.0",
     "html2canvas": "^1.4.1",
     "pdfjs-dist": "^4.5.136",
     "prop-types": "^15.8.1",

OCR/frontend/package.json

@@ -34,8 +34,8 @@ export const MultiImageAnnotator: FC<MultiImageAnnotatorProps> = ({ images, cate
         const fields = [...LABELS.patientInformation.items, ...LABELS.organizationInformation.items];
         const field = fields.find(field => field.name === selectedField?.name);
         const updatedShapes = [...shapes];
-        // todo fix typing but for now this is fine
-        updatedShapes[index] = [...(updatedShapes[index] || []), {...shape, field: selectedField?.name as string, color: field?.color}];
+        // for field?.color.slice(0,7) to remove the alpha channel from the hexcode 
+        updatedShapes[index] = [...(updatedShapes[index] || []), {...shape, field: selectedField?.name as string, color: field?.color.slice(0,7)}];
         setShapes(updatedShapes);
         localStorage.setItem('shapes', JSON.stringify(updatedShapes));
         annotator?.updateCategories(shape.id, [], field?.color);

OCR/frontend/src/components/ImageAnnotator.tsx

@@ -0,0 +1,51 @@
+.loading-wrapper {
+    position: relative;
+  }
+  
+  .loading-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(255, 255, 255, 0.8); /* Semi-transparent white */
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    z-index: 10;
+  }
+  
+  .loading-spinner {
+    border: 8px solid rgba(0, 0, 0, 0.1);
+    border-left-color: #000;
+    border-radius: 50%;
+    width: 50px;
+    height: 50px;
+    animation: spin 1s linear infinite;
+  }
+  
+  @keyframes spin {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+  
+  .loading-text {
+    text-align: center;
+    margin-top: 20px;
+    color: #333; /* Color for the text */
+  }
+  
+  .loading-text h2 {
+    font-size: 24px;
+    margin-bottom: 10px;
+  }
+  
+  .loading-text p {
+    font-size: 16px;
+    color: #666; /* Lighter color for subtitle */
+  }

OCR/frontend/src/components/LoadingWrapper.scss

@@ -0,0 +1,33 @@
+import React from 'react';
+import './LoadingWrapper.scss'; // You'll define some styles here
+
+interface LoadingWrapperProps {
+    isLoading: boolean;
+    children: React.ReactNode;
+    title?: string;
+    subtitle?: string;
+  }
+
+const LoadingWrapper: React.FC<LoadingWrapperProps> = ({
+    isLoading,
+    children,
+    title = 'Loading',
+    subtitle = 'Please wait a moment...',
+  }) => {
+    return (
+      <div className="loading-wrapper">
+        {children}
+        {isLoading && (
+          <div className="loading-overlay">
+            <div className="loading-spinner"></div>
+            <div className="loading-text">
+              <h2>{title}</h2>
+              <p>{subtitle}</p>
+            </div>
+          </div>
+        )}
+      </div>
+    );
+  };
+  
+  export default LoadingWrapper;

OCR/frontend/src/components/LoadingWrapper.tsx

@@ -1,8 +1,15 @@
 import { createContext, useState, useContext, ReactNode } from 'react';
-import { Shape, useImageAnnotator } from 'react-image-label';
+import { useImageAnnotator } from 'react-image-label';
 
-interface CustomShape extends Shape { 
-    field: string;
+export interface Shape {
+  categories: string[];
+  phi: number;
+  color?: string | undefined;
+  id: number;
+}
+
+export interface CustomShape extends Shape { 
+  field: string;
 }
 
 interface Field {

OCR/frontend/src/contexts/AnnotationContext.tsx

@@ -1,30 +1,39 @@
 import { createContext, useContext, useState, ReactNode } from 'react';
+import { Shape } from './AnnotationContext';
+
+export interface Field {
+    color: string;
+    label: string;
+    type: string;
+}
 
 export interface Page {
     // base 64 encoded image
-    image: string ;
-    fieldNames: string[];
+    sourceImage: string;
+    templateImage: string;
+    fieldNames: Field[];
+    shapes: Shape[];
 }
 
-export interface File {
+export interface FileType {
     name: string;
     description: string;
     pages: Page[];
 }
 
 interface FileContextType {
-  files: File[];
-  addFile: (file: File) => void;
+  files: FileType[];
+  addFile: (file: FileType) => void;
   removeFile: (fileName: string) => void;
   clearFiles: () => void;
 }
 
 const FilesContext = createContext<FileContextType | undefined>(undefined);
 
 export const FilesProvider = ({ children }: { children: ReactNode }) => {
-  const [files, setFiles] = useState<File[]>([]);
+  const [files, setFiles] = useState<FileType[]>([]);
 
-  const addFile = (file: File) => {
+  const addFile = (file: FileType) => {
     setFiles(() => [file]);
   };
 

OCR/frontend/src/contexts/FilesContext.tsx

@@ -38,7 +38,6 @@ const AnnotateTemplate: React.FC = () => {
     setFields,
     fields,
     setAnnotatedImages,
-    annotatedImages,
     index,
     setIndex,
   } = useAnnotationContext();
@@ -97,9 +96,10 @@ const AnnotateTemplate: React.FC = () => {
           className="display-flex flex-justify space-between flex-align-center padding-y-1 label-container margin-0"
           onClick={() => {
             setSelectedField({
-              name: item.name,
-              id: String(idx + 1),
-              color: item.color,
+
+                name: item.name,
+                id: String(idx + 1),
+                color: item.color.slice(0, 7),
             });
             let tempFields = [...fields];
             if (fields.length === 0) {
@@ -143,6 +143,7 @@ const AnnotateTemplate: React.FC = () => {
   );
 
   const handleSubmit = async () => {
+    annotator!.stop();
     const delay = (ms: number) =>
       new Promise((resolve) => setTimeout(resolve, ms));