Add OCR confidence visualization in UI

Author: Bob Strahan

lib/idp_common_pkg/idp_common/appsync/service.py

@@ -117,6 +117,7 @@ def _document_to_update_input(self, document: Document) -> Dict[str, Any]:
                     "Class": page.classification or "",
                     "ImageUri": page.image_uri or "",
                     "TextUri": page.parsed_text_uri or page.raw_text_uri or "",
+                    "TextConfidenceUri": page.text_confidence_uri or "",
                 }
                 pages_data.append(page_data)
 
@@ -290,6 +291,7 @@ def _appsync_to_document(self, appsync_data: Dict[str, Any]) -> Document:
                     page_id=page_id,
                     image_uri=page_data.get("ImageUri"),
                     raw_text_uri=page_data.get("TextUri"),
+                    text_confidence_uri=page_data.get("TextConfidenceUri"),
                     classification=page_data.get("Class"),
                 )
 

src/api/schema.graphql

@@ -46,6 +46,7 @@ type Page @aws_cognito_user_pools @aws_iam {
   Class: String
   ImageUri: String
   TextUri: String
+  TextConfidenceUri: String
 }
 
 type DocumentList @aws_cognito_user_pools @aws_iam {
@@ -125,6 +126,7 @@ input PageInput {
   Class: String
   ImageUri: String
   TextUri: String
+  TextConfidenceUri: String
 }
 
 type CopyToBaselineResponse @aws_cognito_user_pools {

src/ui/src/components/common/map-document-attributes.js

@@ -88,7 +88,11 @@ const mapDocumentsAttributes = (documents) => {
       workflowStatus,
       duration: getDuration(completionTime, initialEventTime),
       sections,
-      pages,
+      pages:
+        pages?.map((page) => ({
+          ...page,
+          TextConfidenceUri: page.TextConfidenceUri || null,
+        })) || [],
       pageCount,
       metering,
       evaluationReportUri,

src/ui/src/components/document-viewer/MarkdownJsonViewer.jsx

@@ -96,10 +96,17 @@ const TextEditorView = ({ fileContent, onChange, isReadOnly, fileType }) => {
   );
 };
 
-const FileEditorView = ({ fileContent, onChange, isReadOnly = true, fileType = 'text' }) => {
+const FileEditorView = ({
+  fileContent,
+  onChange,
+  isReadOnly = true,
+  fileType = 'text',
+  viewMode,
+  onViewModeChange,
+  textConfidenceUri,
+}) => {
   const [isValid, setIsValid] = useState(true);
   const [jsonData, setJsonData] = useState(null);
-  const [viewMode, setViewMode] = useState('markdown');
 
   useEffect(() => {
     if (fileType === 'json') {
@@ -132,19 +139,16 @@ const FileEditorView = ({ fileContent, onChange, isReadOnly = true, fileType = '
     }
   };
 
-  const handleViewModeChange = ({ detail }) => {
-    setViewMode(detail.selectedId);
-  };
-
   return (
     <Box>
       <SpaceBetween direction="vertical" size="xs">
         <SegmentedControl
           selectedId={viewMode}
-          onChange={handleViewModeChange}
+          onChange={onViewModeChange}
           options={[
             { id: 'markdown', text: 'Markdown View' },
             { id: 'text', text: 'Text View' },
+            ...(textConfidenceUri ? [{ id: 'confidence', text: 'Text Confidence View' }] : []),
           ]}
         />
 
@@ -155,7 +159,7 @@ const FileEditorView = ({ fileContent, onChange, isReadOnly = true, fileType = '
         )}
       </SpaceBetween>
 
-      {viewMode === 'markdown' ? (
+      {viewMode === 'markdown' || viewMode === 'confidence' ? (
         <MarkdownViewer
           simple
           content={
@@ -185,23 +189,25 @@ const FileEditorView = ({ fileContent, onChange, isReadOnly = true, fileType = '
   );
 };
 
-const MarkdownJsonViewer = ({ fileUri, fileType = 'text', buttonText = 'View File' }) => {
+const MarkdownJsonViewer = ({ fileUri, textConfidenceUri, fileType = 'text', buttonText = 'View File' }) => {
   const [fileContent, setFileContent] = useState(null);
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState(null);
   const [success, setSuccess] = useState(null);
   const [isEditing, setIsEditing] = useState(false);
   const [editedContent, setEditedContent] = useState(null);
+  const [viewMode, setViewMode] = useState('markdown');
 
   const fetchContent = async () => {
     setIsLoading(true);
     setError(null);
     try {
-      logger.info('Fetching content:', fileUri);
+      const uriToFetch = viewMode === 'confidence' && textConfidenceUri ? textConfidenceUri : fileUri;
+      logger.info('Fetching content:', uriToFetch);
 
       const response = await API.graphql({
         query: getFileContents,
-        variables: { s3Uri: fileUri },
+        variables: { s3Uri: uriToFetch },
       });
 
       // Handle the updated response structure
@@ -321,6 +327,13 @@ const MarkdownJsonViewer = ({ fileUri, fileType = 'text', buttonText = 'View Fil
     );
   }
 
+  const handleViewModeChange = ({ detail }) => {
+    setViewMode(detail.selectedId);
+    // Clear content when switching views to force re-fetch
+    setFileContent(null);
+    setEditedContent(null);
+  };
+
   return (
     <Box className="w-full">
       {!fileContent && (
@@ -366,6 +379,9 @@ const MarkdownJsonViewer = ({ fileUri, fileType = 'text', buttonText = 'View Fil
               onChange={handleContentChange}
               isReadOnly={!isEditing}
               fileType={fileType}
+              viewMode={viewMode}
+              onViewModeChange={handleViewModeChange}
+              textConfidenceUri={textConfidenceUri}
             />
           </div>
         </SpaceBetween>

src/ui/src/components/pages-panel/PagesPanel.jsx

@@ -43,7 +43,12 @@ const ThumbnailCell = ({ imageUrl }) => (
 
 const ActionsCell = ({ item }) =>
   item.TextUri ? (
-    <MarkdownJsonViewer fileUri={item.TextUri} fileType="text" buttonText="View/Edit Data" />
+    <MarkdownJsonViewer
+      fileUri={item.TextUri}
+      textConfidenceUri={item.TextConfidenceUri}
+      fileType="text"
+      buttonText="View/Edit Data"
+    />
   ) : (
     <Box color="text-status-inactive">No text available</Box>
   );

src/ui/src/graphql/queries/getDocument.js

@@ -30,6 +30,7 @@ export default gql`
         Class
         ImageUri
         TextUri
+        TextConfidenceUri
       }
       Metering
       EvaluationReportUri

src/ui/src/graphql/queries/onUpdateDocument.js

@@ -30,6 +30,7 @@ export default gql`
         Class
         ImageUri
         TextUri
+        TextConfidenceUri
       }
       EvaluationReportUri
       EvaluationStatus