🌟 Katilix

Revolutionary Focus Tool - An AI-powered Chrome Extension designed to enhance web accessibility and productivity for users with disabilities.

---

📖 Overview

Katilix is a comprehensive accessibility solution that combines intelligent assistive features with AI-powered tools to help users with ADHD, dyslexia, visual impairments, and other disabilities navigate the web more effectively. The extension provides personalized recommendations, usage tracking, and real-time page assistance through advanced AI capabilities.

---

✨ Key Features

🎯 Disability-Specific Modes

• ADHD Support

  • Focus Halo Mode: Dims the screen except around your cursor for enhanced concentration
  • Reading Line Guide: Highlights the current line to prevent skipping
  • Website Blocker: Redirects distracting sites to maintain focus

• Vision Impairment Support

  • Smart Contrast Adjustment: Customizable contrast levels (low to high)
  • Hover Zoom: Magnify text and elements on hover
  • Adjustable zoom levels (140%+ magnification)

• Dyslexia Support

  • Dyslexia-Friendly Font & Spacing: Enhanced readability with specialized fonts
  • Paragraph Focus: Highlights paragraphs for easier reading
  • Text-to-speech integration recommendations

🤖 AI Assistant (Google Gemini Powered)

• Page Summarizer: Generate brief, standard, or detailed summaries of any webpage
• Interactive Q&A: Ask questions about page content and get instant AI-powered answers
• Quick Prompts: Pre-configured prompts for common tasks (summarize, main points, explain simply)
• Chat History: Maintain conversation context for deeper understanding

📊 Usage Tracking & Insights

• Real-time website usage monitoring
• Visual analytics dashboard
• Personalized insights based on browsing patterns
• Disability-specific recommendations (e.g., Pomodoro technique for ADHD users)
• Time management statistics

🎨 Adaptive Interface

• Three theme options: Light, Dark, and Night mode
• Customizable settings per disability mode
• Responsive popup interface
• Smooth transitions and modern UI design

⚙️ Accessibility Features

• Website blocker for distraction-free browsing
• Local time tracking per site
• Adaptive accessibility engine (coming soon - learns patterns and suggests settings)
• Content script injections for real-time page modifications

---

🏗️ Project Architecture

This monorepo contains three main components:

1️⃣ Chrome Extension (/extension)

React-based browser extension with Vite build system

Tech Stack:

• React 18.2 + React DOM
• Vite for fast development and building
• Tailwind CSS + PostCSS for styling
• Chrome Extension Manifest V3
• Puppeteer for advanced automation

Key Components:

• src/popup/ - Extension popup UI
• src/content/ - Content scripts for page manipulation
• src/background/ - Service worker for background tasks
• src/features/ - Feature modules (AI assistant, disability support, tracker)
• src/services/ - API integration layer

2️⃣ Backend API Server (/server)

Express.js REST API with AI and database integration

Tech Stack:

• Express.js
• PostgreSQL with pg driver
• Google Generative AI (Gemini)
• Passport.js for authentication (Local + JWT)
• Express Session management
• CORS enabled

Features:

• AI endpoints for summarization and Q&A
• User preferences management
• Usage tracking and analytics
• JWT-based authentication
• Database health checks

API Routes:

• /api/ai/summarize - Page summarization
• /api/ai/ask - Q&A functionality
• /api/tracker/log - Usage logging
• /api/tracker/stats - Retrieve usage statistics
• /api/prefs - User preferences management

3️⃣ Analytics Dashboard (/server/frontend)

React + TypeScript admin dashboard

Tech Stack:

• React 18.2 with TypeScript
• Vite build system
• Tailwind CSS + Radix UI components
• React Router for navigation
• Recharts for data visualization
• Axios for API calls

Features:

• User activity analytics
• Visual charts and graphs
• Settings management
• Responsive design

---

🚀 Getting Started

Prerequisites

• Node.js v16 or higher
• npm or yarn
• Chrome Browser (for extension testing)
• PostgreSQL database (for backend)
• Google Gemini API Key (for AI features)

Installation

1. Clone the repository:

   git clone https://github.com/yourusername/katilix.git
   cd katilix

2. Install all dependencies:

   npm run install:all

   Or install individually:

   # Root dependencies
   npm install
   
   # Extension dependencies
   cd extension && npm install
   
   # Server dependencies
   cd ../server && npm install
   
   # Dashboard dependencies
   cd server/frontend && npm install

Configuration

Backend Environment Setup

Create a .env file in the server/ directory:

# Server Configuration
PORT=3000
NODE_ENV=development
CORS_ORIGIN=http://localhost:5173

# Google Gemini AI
GEMINI_API_KEY=your_gemini_api_key_here

# PostgreSQL Database
AZURE_SQL_SERVER=your_server.database.windows.net
AZURE_SQL_DATABASE=katilix_db
AZURE_SQL_USER=your_username
AZURE_SQL_PASSWORD=your_password

# JWT Authentication
SESSION_SECRET=your_session_secret_here
JWT_SECRET=your_jwt_secret_here

Create a .env file in the frontend/ directory:

VITE_NODE_ENV= development
VITE_API_URL= http://localhost:8080/

(keep in mind, this may not connect you to our DB since we have it securily managing IPs, so you may need to connect it to your own DB)

Development

Start the Backend Server

cd server
npm run dev
# Server runs on http://localhost:8080

Start the Extension (Development Mode)

cd extension
npm run dev
# Build outputs to extension/dist/

Start the Analytics Dashboard

cd server/frontend
npm run dev
# Dashboard runs on http://localhost:5173

Load Extension in Chrome

1. Open Chrome and navigate to chrome://extensions/
2. Enable Developer mode (toggle in top right)
3. Click Load unpacked
4. Select the extension/packaged/ directory
5. The Katilix extension icon should appear in your toolbar

---

🏗️ Build for Production

Build Extension

npm run build:extension
# Output: extension/packaged/

Build Backend

npm run build:server

Build All

npm run build:all

---

📂 Project Structure

katilix/
├── extension/                   # Chrome Extension
│   ├── src/
│   │   ├── popup/              # Extension popup UI
│   │   ├── content/            # Content scripts
│   │   ├── background/         # Background service worker
│   │   ├── features/           # Feature modules
│   │   │   ├── ai-assistant/   # AI chat & summarizer
│   │   │   ├── disability/     # Disability modes & settings
│   │   │   └── tracker/        # Usage tracking
│   │   ├── services/           # API services
│   │   └── components/         # Shared components
│   ├── public/                 # Static assets
│   └── packaged/               # Build output
│
├── server/                      # Backend API
│   ├── controllers/            # Route controllers
│   ├── routes/                 # API routes
│   ├── models/                 # Database models
│   ├── middleware/             # Auth & JWT handlers
│   ├── config/                 # Azure & Gemini config
│   ├── queries/                # SQL queries
│   └── frontend/               # Analytics dashboard
│       └── src/
│           ├── pages/          # Dashboard pages
│           ├── components/     # UI components
│           └── assets/         # Static assets
│
└── package.json                # Root package config

---

🌐 Browser Permissions

The extension requires the following permissions:

• tabs - Access to tab information
• storage - Local and sync storage for settings
• activeTab - Access to the current active tab
• scripting - Inject content scripts
• notifications - User notifications
• alarms - Periodic background tasks
• host_permissions - Access to webpage content

---

🗺️ Roadmap

• Adaptive accessibility engine with ML-based pattern learning
• Multi-language support
• Firefox and Edge extension versions
• Mobile app companion
• Advanced analytics dashboard
• Text-to-speech integration
• Screen reader optimization
• Collaborative features for educators
• Export usage reports

---