Skip to content

waleedmandour/rdat-copilot

BranchesTags

Repository files navigation

RDAT Copilot

Professional English–Arabic Computer-Assisted Translation (CAT) Environment

RDAT Copilot is a local-first, AI-powered translation workspace designed for professional English-to-Arabic translation workflows. It combines real-time predictive ghost-text suggestions, a bespoke RTL-native segment editor, on-device terminology databases, an intelligent AI Translation Tutor, and cloud-backed LLM generation into a single cohesive application — optimized for both productivity and academic rigor.

Developed under the guidance of Dr. Waleed Mandour, Assistant Professor at Sultan Qaboos University, Oman.

Design Philosophy

RDAT Copilot deliberately uses a bespoke, lightweight <textarea> editing block built natively in React and styled with Tailwind CSS — not a heavy IDE editor like Monaco. This decision is driven by several key requirements unique to academic translation:

  • Bidirectional Alignment (RTL/LTR) — Academic translation between English and Arabic requires seamless, simultaneous layout adjustments. A single heavy canvas like Monaco struggles with native, mixed LTR/RTL text wrapping side-by-side. Our custom editor handles this dynamically based on the current active locale.
  • Ultra-lightweight Cohabitation — Heavy IDE engines have massive bundle sizes and slow down client loading times, especially on mobile or offline-first PWA networks. Our custom editor loads instantly with zero overhead.
  • Smart Inline HUD & Ghost Suggestions — We developed custom logic that overlays a translucent ghost suggestion directly under the cursor. It utilizes sequential tab-triggers to cycle matching candidates ([Tab] to insert, arrow keys to change) without lagging.

Key Features

  • Bespoke Segment Editor — Custom React <textarea> components with native dir="rtl" support, auto-resize, auto-focus, and smooth scroll-to-active segment behavior. No heavy IDE dependency — instant loading, zero bundle bloat.
  • Three-Phase Suggestion Pipeline — A cascading suggestion engine that consults multiple channels in priority order: (1) LTE instant local match, (2) Prefetch cache from idle background translation, (3) Gemini cloud fallback via Express proxy. Results are deduplicated, ranked by confidence and latency, and presented as ghost text.
  • Predictive Ghost-Text Suggestions — As you type an Arabic translation, the system projects inline grey placeholder completions. Accept with Tab, accept the next word with Ctrl+→, cycle alternatives with Alt+], or dismiss with Esc. RTL-aware Unicode markers ensure proper Arabic display in the overlay without polluting the actual text content.
  • Idle Prefetch Engine — Uses requestIdleCallback to translate segments N+1 and N+2 in the background while you work on segment N. Powered by the Local Translation Engine with no main-thread blocking.
  • Local Translation Engine (LTE) — A client-side phrase-matching engine that performs exact, partial, n-gram similarity, and sentence-split lookups against IndexedDB glossary data — with zero network latency.
  • GTR Glossary Databases — Upload custom JSON terminology files or download pre-built reference glossaries (WIPO Pearl, Microsoft Terminology, OPUS Parallel Corpus). All data is stored locally in IndexedDB with chunked batch imports for responsiveness.
  • Gemini Cloud Fallback — When local indices yield low confidence, the system falls back to Gemini 2.5 Flash via a server-side proxy for burst candidate generation and full-segment translation. Your API key stays in your browser's local storage.
  • AI Translation Tutor — On-demand pedagogical evaluation powered by Gemini 2.5 Flash. Analyzes your Arabic translation against the English source to provide a numerical rating, letter grade, detailed explanation, per-term coaching, and common pitfall warnings. Includes a local fallback tutor when offline. Accessible via the dedicated "AI Tutor" sidebar tab.
  • Drag & Drop Document Importer — Self-contained import drawer inside the source editor supporting .txt and .docx drag-and-drop (via mammoth.js), file browsing, or direct text paste. Imported text is automatically segmented into translation units with intelligent sentence splitting.
  • Hardware-Aware Model Management — The AI Models view profiles your device's CPU cores, RAM, WebGPU support, and OPFS storage to classify your hardware tier (Entry/Medium/High/Ultra). Browse a catalog of local AI models with simulated download, pause/resume, and load/unload capabilities.
  • Dual Storage Architecture — IndexedDB on the client (glossary, TM, segments, sync metadata) with offline-first design. The app functions fully without network connectivity.
  • Bilingual RTL/LTR Interface — Full English and Arabic UI with proper bidirectional text rendering, locale-aware layout, and a one-click language switcher.
  • Dark & Light Themes — High-contrast dark theme by default, with a clean light mode toggle. All colors use CSS custom properties for consistent theme switching.
  • Segment-Based Workflow — Source text is split into logical segments. Each segment can be independently translated, confirmed, and persisted. A completion percentage tracks overall progress.
  • TXT Export — Export confirmed Arabic translations as a plain-text file at any time.
  • Text-to-Speech — Built-in Arabic pronunciation playback via the Web Speech API for student practice.
  • Non-Blocking Toast Notifications — Elegant slide-in toast alerts with soft colors, micro-animations, backdrop blur, and custom icons replace all native alert() popups for a modern, sandbox-safe experience.
  • PWA-Ready — Installable to homescreen for native-like access with offline support.

Architecture

┌──────────────────────────────────────────────────────────────────┐
│                       Browser (React SPA)                        │
│  ┌──────────┐  ┌──────────┐  ┌────────────────────────────┐    │
│  │ Source    │  │ Target   │  │ Tabbed Sidebar             │    │
│  │ Editor   │  │ Editor   │  │ ┌──────────┐ ┌───────────┐ │    │
│  │ (EN-LTR) │  │ (AR-RTL) │  │ │ Glossary │ │ AI Tutor  │ │    │
│  │          │  │          │  │ │ (matched │ │ (grade +  │ │    │
│  │ Drag &   │  │ Ghost    │  │ │  terms)  │ │  coaching)│ │    │
│  │ Drop     │  │ Text     │  │ └──────────┘ └───────────┘ │    │
│  │ Importer │  │ Overlay  │  └────────────────────────────┘    │
│  └──────────┘  └────┬─────┘                                    │
│                      │                                          │
│         ┌────────────┼────────────┐                             │
│         ▼            ▼            ▼                             │
│  ┌────────────┐ ┌─────────┐ ┌──────────┐ ┌──────────────┐     │
│  │ Phase 1:   │ │ Phase 2:│ │ Phase 3: │ │ AI Tutor     │     │
│  │ LTE Local  │ │ Prefetch│ │ Gemini   │ │ (pedagogical │     │
│  │ Phrase     │ │ Cache   │ │ Cloud    │ │  feedback)   │     │
│  │ Match      │ │ (idle)  │ │ Fallback │ │              │     │
│  │ (<5ms)     │ │ (<50ms) │ │ (<1s)    │ │              │     │
│  └────────────┘ └─────────┘ └──────────┘ └──────────────┘     │
│         │            │            │            │                │
│  ┌──────▼────────────▼────────────▼────────────▼──────┐        │
│  │              IndexedDB (4 stores)                   │        │
│  │  tm_entries | glossary | segments | sync_meta       │        │
│  └─────────────────────────────────────────────────────┘        │
│                                                                  │
│  ┌─────────────────────────────────────────────────────┐        │
│  │  Zustand Stores                                     │        │
│  │  workspace-store | settings-store | prefetch-store  │        │
│  └─────────────────────────────────────────────────────┘        │
└──────────────────────────────────────────────────────────────────┘
                          │
                    ┌─────▼─────┐
                    │  Express  │
                    │  Server   │
                    │  (:3000)  │
                    │           │
                    │  /api/    │
                    │  translate │
                    │  /burst   │
                    │  /full    │
                    │  /tutor-  │
                    │  explain  │
                    └─────┬─────┘
                          │
                    ┌─────▼─────┐
                    │  Gemini   │
                    │  2.5 Flash│
                    │  (Cloud)  │
                    └───────────┘

Three-Phase Suggestion Pipeline

The suggestion engine cascades through three phases with increasing latency but also increasing quality:

  1. Phase 1 — LTE (<5ms): Instant local lookup against IndexedDB glossary data (exact → partial → n-gram → sentence-split). Returns a smart remainder that continues from where the user has stopped typing.
  2. Phase 2 — Prefetch Cache (<50ms): Idle background translations for segments N+1 and N+2, cached in the Zustand prefetch store via requestIdleCallback. Checked before cloud calls to avoid unnecessary network requests.
  3. Phase 3 — Gemini Cloud (<1s): If LTE and cache both miss, falls back to Gemini 2.5 Flash via the Express server proxy for burst candidate generation (up to 3 predictive Arabic completions).

Results from all active channels are deduplicated (Arabic diacritics normalized), ranked by confidence score and latency, and the top 3 are surfaced as cyclable ghost-text candidates.

AI Tutor Channel

A fourth channel operates independently for on-demand pedagogical evaluation:

  1. AI Tutor: Analyzes the English source and Arabic translation pair to return a numerical rating (0–100), letter grade (A–D), detailed stylistic explanation, per-term coaching with contextual fit analysis, and common pitfall warnings. Includes a local heuristic fallback when offline.

Tech Stack

Layer Technology
Frontend React 19, Vite 6, Tailwind CSS 4, Zustand 5, Motion (framer-motion)
Editor Bespoke <textarea> with RTL-native ghost text overlay (no Monaco)
Backend Express 4, @google/genai SDK
Storage IndexedDB (client-side, 4 object stores)
AI Model Gemini 2.5 Flash (cloud, via server proxy)
Document Parsing mammoth.js (.docx support)
Build Vite + esbuild (client + server bundles)
Language TypeScript 5.8

Getting Started

Prerequisites

Installation

# Clone the repository
git clone https://github.com/waleedmandour/rdat-copilot.git
cd rdat-copilot

# Install dependencies
npm install

# Configure your API key
cp .env.example .env.local
# Edit .env.local and set GEMINI_API_KEY=your_key_here

Running in Development

npm run dev

This starts the Express server on http://localhost:3000 with Vite HMR middleware for instant frontend updates.

Production Build

npm run build
npm run start

The build step produces:

  • dist/ — Static frontend assets (Vite build)
  • dist/server.cjs — Bundled Node.js server (esbuild)

Project Structure

rdat-copilot/
├── server.ts                          # Express API server (burst + full + tutor)
├── index.html                         # SPA entry point
├── vite.config.ts                     # Vite + Tailwind plugin config
├── tsconfig.json                      # TypeScript configuration
├── package.json                       # Dependencies and scripts
├── .env.example                       # Environment variable template
├── .gitignore
├── src/
│   ├── main.tsx                       # React DOM mount
│   ├── App.tsx                        # Root component (LanguageProvider + ToastProvider + WorkspaceShell)
│   ├── index.css                      # Tailwind + CSS custom properties (dark/light)
│   ├── types.ts                       # Shared TypeScript interfaces (including Toast, TutorAnalysis)
│   ├── context/
│   │   ├── LanguageContext.tsx         # i18n context (EN/AR with RTL switching)
│   │   └── ToastContext.tsx           # React Context toast system (showToast, AnimatePresence)
│   ├── stores/
│   │   ├── settings-store.ts          # Zustand: engine mode, API key, GTR, model downloads
│   │   ├── workspace-store.ts         # Zustand: source text, target texts, segment state
│   │   └── prefetch-store.ts          # Zustand: idle background translation cache
│   ├── hooks/
│   │   ├── useDualStorage.ts          # IndexedDB CRUD + offline sync simulation
│   │   ├── useGemini.ts               # Gemini burst/full/tutor API client
│   │   ├── usePredictiveTranslation.ts # Idle prefetch engine (requestIdleCallback)
│   │   ├── useRAG.ts                  # LTE search wrapper
│   │   ├── useLocalAgent.ts           # Local agent connection state
│   │   └── useWebLLM.ts               # WebGPU inference state
│   ├── lib/
│   │   ├── dual-storage.ts            # IndexedDB operations (open, put, batch, search)
│   │   ├── local-translation-engine.ts # LTE: exact/partial/n-gram/sentence-split matching
│   │   ├── suggestion-provider.ts     # Three-phase async suggestion pipeline with dedup/ranking
│   │   └── utils.ts                   # Class name utility
│   ├── i18n/
│   │   └── translations.ts            # Full EN/AR translation dictionary
│   └── components/
│       ├── WorkspaceShell.tsx          # Main layout shell (sidebar + header + views)
│       ├── Sidebar.tsx                 # Navigation sidebar with language switcher
│       ├── StatusBar.tsx               # Footer status bar (engine, GTR, WebGPU, sync)
│       ├── WelcomeTab.tsx              # Dashboard landing page with author credits + MIT license
│       ├── GlossaryView.tsx            # Glossary management (upload, download, search)
│       ├── AiModelsView.tsx            # Model catalog + hardware diagnostics + engine mode selection
│       ├── ApiKeysView.tsx             # Gemini API key configuration
│       ├── Settings.tsx                # Workspace settings + danger zone
│       ├── QuickGuideModal.tsx         # Keyboard shortcuts guide modal + academic credits
│       ├── InstallPWAButton.tsx        # PWA install prompt banner
│       └── editors/
│           ├── SourceEditor.tsx         # English source reader with drag-and-drop importer + auto-scroll
│           ├── TargetEditor.tsx         # Arabic target editor with RTL ghost text + TTS + 3-phase pipeline
│           ├── TranslationWorkspace.tsx # 3-panel workspace with Glossary/AI Tutor sidebar + prefetch
│           └── index.ts                # Barrel exports

API Endpoints

Method Path Description
POST /api/translate/burst Generate up to 3 predictive Arabic translation candidates
POST /api/translate/full Generate a complete Arabic translation for a source segment
POST /api/translate/tutor-explain AI Tutor: pedagogical evaluation returning rating, grade, explanation, terms analysed, and pitfalls

All endpoints accept JSON bodies with the required parameters. The tutor-explain endpoint also accepts a locale parameter ("en" or "ar") to receive feedback in the appropriate language.

Keyboard Shortcuts

Shortcut Action
Tab Accept entire ghost-text suggestion
Ctrl + → Accept next word of suggestion
Alt + ] Cycle through alternative translation candidates
Esc Dismiss current suggestion
Ctrl + Enter Confirm and save segment

Glossary Import Format

Upload a JSON file containing an array of term pairs:

[
  { "en": "translation memory", "ar": "ذاكرة الترجمة", "pos": "noun" },
  { "en": "neural machine translation", "ar": "الترجمة الآلية العصبية", "pos": "noun" }
]

Supported field mappings: en/source_term/source for English, ar/target_term/target for Arabic, pos/type for part-of-speech.

AI Tutor Response Format

The /api/translate/tutor-explain endpoint returns a structured TutorAnalysis object:

{
  "rating": 85,
  "grade": "A-",
  "explanation": "Your translation demonstrates strong lexical coverage...",
  "termsAnalysed": [
    { "term": "translation memory", "analysis": "Correctly mapped to ذاكرة الترجمة..." }
  ],
  "pitfalls": "Avoid literal translation of passive clauses..."
}

When no Gemini API key is configured, a local pedagogical fallback generates heuristic scores based on translation length ratios and matched glossary terms.

Academic Credits

Dr. Waleed Mandour — Assistant Professor, Sultan Qaboos University, Oman

License

MIT License — Copyright (c) 2026 Dr. Waleed Mandour

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

About

Local-first AI-powered Translation Co-Writing IDE — 6-channel ghost text cascade for English→Arabic professional translation (PWA + FastAPI + Ollama)

waleedmandour.github.io/rdat-copilot/

Topics

react nlp typescript pwa sqlite nextjs machine-translation artificial-intelligence monaco-editor computer-assisted-translation translation-memory webgpu fastapi cat-tool local-first sse-streaming llm ollama ghost-text arabic-translation

Resources

Readme
Activity

Stars

1 star

Watchers

0 watching

Forks

0 forks
Report repository

Releases

1 tags

Packages

 
 
 

Contributors

Languages