/*!
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
SPDX-License-Identifier: MIT-0
*/

import React from 'react';
import {     
    Panel,
    Container, 
    Header,
    IconButton} from 'rsuite';
import FileDownloadIcon from '@rsuite/icons/FileDownload';
import './styles.less';
import data from './data.json';
import arch from 'src/assets/architecture.png'

const Home = () => {
  return (
    <Container>
        <Header className='home-header'>
            <div>
                <h2>Bulk document de-identification and OCR</h2>
                <h4>with Intelligent Document Processing (IDP)</h4>
                <p style={{width: '70%'}}>
                    An application to help evaluate de-identification (redaction) of PHI information from bulk documents with Amazon Textract and Amazon Comprehend Medical.
                </p>
            </div>
        </Header>
        <Panel bordered style={{background: 'white', margin: '12px 70px 12px 70px'}}>            
            <h3>Introduction</h3>
            <p>
                You can use this application to try out document processing workflow 
                to perform bulk OCR from documents and de-identify PHI in documents. 
                The bulk OCR will extract lines, forms (if any), and table data (if any) from your documents. It uses Amazon Textract and will
                generate Excel reports which can be used to evaluate the accuracy scores. The de-identification flow utilizes the text output generated by Amazon
                Textract OCR, and uses it to perform PHI entity detection using Amazon Comprehend Medical. Documents are subsequently de-identified by redacting
                the PHI entities detected using the bounding box geometry information generated by Amazon Textract.
            </p> <br/>
            <h4>Quick start</h4>
            <p style={{marginBottom: '12px'}}>
                Click the button below to download a set of sample documents to try out. Once you have downloaded the zip file, unzip it, navigate to the "<b>Process Documet</b>"
                screen from the left panel, select some or all the documents in the folder, drag and drop into the file upload area. If you want to test out document
                de-identification then make sure to check the "<b>De-identify documents</b>" checkbox in the <b>De-identification</b> section.
            </p>
            <IconButton      
                appearance="primary"
                href={process.env.PUBLIC_URL + "/documents.zip"}                                
                icon={<FileDownloadIcon/>} >
                    Download samples
            </IconButton>
            <hr></hr>
            <h3>What is de-identification?</h3>
            <p>
                According to U.S. Dept of Health and Human Services (HHS) -
            </p>
            <blockquote style={{borderLeft: '4px solid #ECEFF1', padding: 4}}>
                <i>
                    The increasing adoption of health information technologies in the United States accelerates their potential to facilitate beneficial studies that combine large, 
                    complex data sets from multiple sources.  The process of de-identification, by which identifiers are removed from the health information, mitigates privacy risks 
                    to individuals and thereby supports the secondary use of data for comparative effectiveness studies, policy assessment, life sciences research, and other endeavors.
                </i>                
            </blockquote>
            <p>
                For more information and rationale behind de-identification of documents containing PHI data, visit HHS guidance on <a href="https://www.hhs.gov/hipaa/for-professionals/privacy/special-topics/de-identification/index.html" target="_blank" rel="noreferrer">Methods for De-identification of PHI</a>.
            </p>
            <hr></hr>
            <h3>How it works</h3>
                <p>
                    The diagram shown below is a high-level architecture of the application and the AWS services it uses to accomplish the task
                    of performing bulk OCR and de-identification. Most notable services used in the architecture are -                     
                </p>
                <ul>
                    <li><a href={data['service_urls']['textract']} target="_blank" rel="noreferrer">Amazon Textract</a></li>
                    <li><a href={data['service_urls']['comp_med']} target="_blank" rel="noreferrer">Amazon Comprehend Medical</a></li>
                    <li><a href={data['service_urls']['s3']} target="_blank" rel="noreferrer">Amazon Simple Storage Service (Amazon S3)</a></li>
                    <li><a href={data['service_urls']['lambda']} target="_blank" rel="noreferrer">AWS Lambda</a></li>
                    <li><a href={data['service_urls']['sqs']} target="_blank" rel="noreferrer">Amazon Simple Queue Service</a></li>
                    <li><a href={data['service_urls']['sns']} target="_blank" rel="noreferrer">Amazon Simple Notification Service</a></li>
                    <li><a href={data['service_urls']['ddb']} target="_blank" rel="noreferrer">Amazon DynamoDB</a></li>
                    <li><a href={data['service_urls']['cognito']} target="_blank" rel="noreferrer">Amazon Cognito</a></li>
                    <li><a href={data['service_urls']['sfn']} target="_blank" rel="noreferrer">AWS Step Functions</a></li>
                </ul>
                {/* <div style={{textAlign: 'center'}}> */}
                    <img src={arch} width="50%" alt="Architecture diagram"/>
                {/* </div> */}
            <hr></hr>
            <h3>Using the application</h3>
            <p>
                If you are reading this, then it means you have successfully deployed the application and all it's relevant components into your AWS account.
                Using this application is straight forward, you can simply navigate to the "Process Documents" page using the left menu, and upload your documents to kick-off a document processing workflow.
            </p>
            <p>
                Documents uploaded together will be processed in a single batch, within a single IDP workflow execution called an "Analysis job". You can upload up-to 200 documents at a time, per analysis job.
                This is an arbitrary limit that is only imposed by this implementation of the demo, however, virtually unlimited documents can be processed using this architecture. Feel free to customize the aspects of this 
                application to suit your evaluation needs.
            </p>
            <p>    
                For Amazon Textract related limits, please refer to the <a href="https://docs.aws.amazon.com/textract/latest/dg/limits.html" rel="noreferrer" target="_blank">Amazon Textract Hard limits</a>. 
                For Amazon Comprehend Medical related limits, please refer to <a href="https://docs.aws.amazon.com/comprehend-medical/latest/dev/comprehendmedical-quotas.html" rel="noreferrer" target="_blank">Amazon Comprehend Medical guidelines and quotas</a>.
            </p>
            <br/>
            <h4>Usage options</h4>            

            <ul style={{marginTop:'10px'}}>
                <li style={{marginTop:'10px'}}>
                    <b>Bulk OCR with Amazon Textract: </b> In this case, you can simply upload your documents to the application. Once the upload is complete, the IDP workflow deployed in the back-end will extract
                    WORDS, LINES and other structural information such as FORMS, TABLE data from all your documents by default. You can then review the output of each of these documents and view the confidence scores, geometry information,
                    and other metadata related to each document.
                </li>                
                <li style={{marginTop:'10px'}}>
                    <b>Document de-identification:</b> You may also choose to enable document de-identification which will utilize Amazon Comprehend Medical to 
                    identify PHI entities and then utilize Amazon Textract generated bounding box geometry information of the OCR'd text to perform redactions.
                </li>
            </ul>
        </Panel>
    </Container>
  )
}

export default Home