• [MLH] Most Creative Adobe Express Add-On - HackCOMS @ RIT - Nov 2024

AccessiBot is an Adobe Express Add-On that revolutionizes the way creators approach accessible design. With just a single click, our tool analyzes your design and provides actionable insights to make your content more accessible to everyone.

• 🔍 Font Analysis: Evaluates clarity and visibility of text elements
• 🖼️ Image Assessment: Checks image visibility and contrast
• 🎨 Color Contrast: Ensures WCAG compliance
• 📖 Text Readability: Analyzes and suggests improvements
• 🔤 Font Style Optimization: Recommends better font choices
• ♿ Accessibility Enhancements: Provides content modification suggestions

• FastAPI for high-performance API endpoints
• LangChain for AI workflow orchestration
• TogetherAI integration

• LLama 3.2 90B Vision Instruct
• LLama 3.2 11B Vision
• Qwen 2.5 72B Instruct

• Adobe Express Add-On SDK
• JavaScript

• Python 3.8+
• Adobe Express Developer Account
• TogetherAI API key
• ngrok authtoken

1. Clone the repository

git clone https://github.com/AakashKhatu/AccesiBot-HackCOMS
cd AccesiBot-HackCOMS/API

2. Install dependencies

pip install -r requirements.txt

3. Set up environment variables

cp .env.example .env
# Edit .env with your API keys and configuration

4. Run the server

python fastApiServer.py

1. Navigate to the add-on directory

cd frontend

2. Install dependencies

npm install

3. Build the project

npm build

and follow steps 5 and 6 from below.

OR

1. Download dist.zip from releases

2. Go to Adobe Express
   Open Adobe Express in your browser.

3. Enable Add-On Development

   • Navigate to Profile -> Settings.
   • Enable Add-On development.

4. Create a New Add-On

   • In the Nav bar, click Add-Ons -> Your Add-Ons -> Manage Add-Ons -> Create new add-on.
   • Type the name AccessiBot.
   • Create a private link.

5. Upload Add-On Package

   • Add dist.zip as the add-on package.
   • Copy the generated link and open it in a new tab.

6. Test AccessiBot

   • Click Add.
   • Select Create/import your design.
   • Test and play with AccessiBot.

1. User clicks the "Analyze" button in Adobe Express
2. Add-on captures the current page content
3. Content is processed by our AI model pipeline:
   • Vision analysis for image and layout assessment
   • Text analysis for readability and accessibility
   • Color analysis for contrast and visibility
4. Results are presented with actionable improvements

Aakash Khatu	Gayatri Khandagale
AI & API Development	AI & Add on Development

• Adobe Express team for their excellent developer tools
• The open-source AI community & Meta Llama for their absolutely stunning multimodal LLM Models
• Major League Hacking (MLH) for recognizing our innovation!