This repository provides the web-based user interface for the PDF Accessibility Solutions, enabling users to easily upload, process, and download accessibility-compliant PDF documents through an intuitive web application.
β οΈ Important: This is the frontend UI component. You must first deploy the PDF Accessibility Backend before deploying this UI.
The PDF Accessibility UI connects to both PDF remediation solutions:
- PDF-to-PDF Remediation: Upload PDFs and receive accessibility-improved PDFs
- PDF-to-HTML Remediation: Upload PDFs and receive accessible HTML versions
The application features user authentication, quota management, real-time processing status, and secure file handling, all powered by AWS services.
| Index | Description |
|---|---|
| Prerequisites | Requirements before deployment |
| Automated One-Click Deployment | How to deploy the UI |
| Using the Application | User guide for the web interface |
| Infrastructure Components | AWS resources created |
| Monitoring | System monitoring and logs |
| Contributing | How to contribute to the project |
You must deploy the backend solutions first! The UI requires at least one of the following:
- PDF-to-PDF Backend: Deployed from PDF_Accessibility repository
- PDF-to-HTML Backend: Deployed from PDF_Accessibility repository
After deploying the backend, you'll need the S3 bucket name(s) created during deployment.
-
AWS Account with appropriate permissions
- Amplify, Cognito, Lambda, API Gateway, S3, IAM, CloudFormation
- See IAM Permissions Guide for detailed requirements
-
AWS CloudShell access (recommended) or AWS CLI configured locally
- Sign in to the AWS Management Console
- Click the CloudShell icon in the top navigation bar
- Wait for CloudShell to initialize
-
Backend S3 Bucket Names
- PDF-to-PDF bucket name (starts with
pdfaccessibility-) - PDF-to-HTML bucket name (starts with
pdf2html-bucket-) - At least one bucket name is required
- PDF-to-PDF bucket name (starts with
git clone https://github.com/ASUCICREPO/PDF_accessability_UI.git
cd PDF_accessability_UIchmod +x deploy.sh
./deploy.shThe script will guide you through:
-
Bucket Configuration: Enter your backend S3 bucket names
- PDF-to-PDF bucket name (or leave empty if not using)
- PDF-to-HTML bucket name (or leave empty if not using)
- At least one bucket is required
-
Automated Deployment: The script will:
- Create IAM roles with necessary permissions
- Deploy backend infrastructure (Cognito, Lambda, API Gateway)
- Build and deploy the React frontend to Amplify
- Configure all integrations automatically
-
Deployment Progress: Monitor real-time deployment status
- Backend deployment: ~3-5 minutes
- Frontend deployment: ~5-10 minutes
After successful deployment, the script will display:
β
Frontend deployment completed successfully!
π Frontend URL: https://main.{app-id}.amplifyapp.com
Visit the URL to access your PDF Accessibility UI!
-
Navigate to the Application URL
- Open the Amplify URL provided after deployment
-
Create an Account
- Click "Sign Up"
- Enter your email, name, and password
- Verify your email address
-
Complete Your Profile
- On first sign-in, you'll be prompted to enter:
- Organization name
- Country, State, and City (optional)
- This information helps us understand our user base
- On first sign-in, you'll be prompted to enter:
-
Choose Output Format
- Select PDF-to-PDF to maintain PDF format with accessibility improvements
- Select PDF-to-HTML to convert to accessible HTML format
-
Upload Your PDF
- Click "Upload PDF" or drag and drop
- File must meet your quota limits:
- Maximum file size (default: 25 MB)
- Maximum pages (default: 10 pages)
- The system validates your file before upload
-
Monitor Processing
- Real-time status updates
- Processing time varies by file size and complexity
- Typical processing: 2-5 minutes per document
-
Download Results
- Once complete, download your remediated file
- PDF-to-PDF: Accessibility-improved PDF
- PDF-to-HTML: ZIP file containing HTML, images, and reports
Your upload quota is displayed in the header:
- Current Usage: Number of files uploaded
- Maximum Allowed: Your upload limit
Administrators can change user groups through the AWS Cognito console:
- Navigate to Amazon Cognito in AWS Console
- Select the
PDF-Accessability-User-Pool - Go to "Users and groups"
- Select a user and add them to a group
- User quotas update automatically via EventBridge
Authentication & Authorization:
- Amazon Cognito User Pool with custom attributes
- Cognito Identity Pool for S3 access
- Three user groups (Default, Amazon, Admin)
- Hosted UI for sign-in/sign-up
Backend APIs:
- API Gateway REST API with Cognito authorizer
- Lambda functions for quota management
- Lambda functions for user profile updates
- EventBridge rules for automatic quota updates
Frontend Hosting:
- AWS Amplify application
- Automatic HTTPS and custom domain support
- SPA routing configuration
Monitoring:
- CloudWatch Logs for all Lambda functions
- CloudTrail for Cognito group changes
- API Gateway access logs
The system tracks the following user attributes:
custom:first_sign_in - Boolean: First login flag
custom:total_files_uploaded - Number: Total uploads
custom:max_files_allowed - Number: Upload limit
custom:max_pages_allowed - Number: Page limit per PDF
custom:max_size_allowed_MB - Number: File size limit
custom:organization - String: User's organization
custom:country - String: User's country
custom:state - String: User's state
custom:city - String: User's city
custom:pdf2pdf - Number: PDF-to-PDF conversions
custom:pdf2html - Number: PDF-to-HTML conversions
Monitor application activity through CloudWatch:
Lambda Functions:
/aws/lambda/PostConfirmationLambda- User registration events/aws/lambda/UpdateAttributesFn- Profile updates/aws/lambda/checkOrIncrementQuotaFn- Quota checks and increments/aws/lambda/UpdateAttributesGroupsFn- Group membership changes
Error: "You have reached your upload limit"
- Cause: Quota exceeded
- Solution:
- Contact administrator to increase quota
- Wait for quota reset (if applicable)
- Check your current usage in the header
Error: "File size exceeds limit"
- Cause: File too large for your quota
- Solution:
- Reduce PDF file size
- Split large PDFs into smaller documents
- Request quota increase from administrator
Error: "PDF file cannot exceed X pages"
- Cause: PDF has too many pages
- Solution:
- Split PDF into smaller documents
- Request quota increase from administrator
Error: "At least one bucket name is required"
- Cause: No backend buckets configured
- Solution: Deploy the backend first and provide bucket names
Error: "Failed to create IAM role"
- Cause: Insufficient permissions
- Solution: Ensure your AWS user has IAM creation permissions
Error: "CDK deployment failed"
- Cause: Various CDK-related issues
- Solution:
- Check CloudFormation console for detailed errors
- Ensure CDK is bootstrapped:
cdk bootstrap - Verify all prerequisites are met
- Check CloudWatch Logs: Most issues are logged in CloudWatch
- Review CloudFormation Events: Deployment issues show in CloudFormation
- Verify Backend Deployment: Ensure backend is deployed and accessible
- Contact Support: [email protected]
Contributions to this project are welcome! Please:
- Fork the repository
- Create a feature branch
- Make your changes
- Submit a pull request
For major changes, please open an issue first to discuss proposed changes.
This project is licensed under the terms specified in the LICENSE file.
For questions, issues, or support:
- Email: [email protected]
- Issues: GitHub Issues
Built by Arizona State University's AI Cloud Innovation Center (AI CIC)
Powered by AWS