Skip to content

Home

Jump to bottom
Parthkuamr Rathod edited this page Apr 22, 2026 · 5 revisions

📖 Web Translator Notepad - Wiki

🏗️ Project Architecture

The application is built on a Modular Micro-Script architecture. Each major functionality lives in its own .js file to prevent global variable conflicts and ensure stability.

  • Core Controller (logic.js): Manages the Web Speech API lifecycle, Google Translate API handshakes, and file I/O operations.

  • Format Engine (editor_tools.js): Handles document.execCommand wrappers for rich-text manipulation.

  • Persistence Layer (autosave.js): Implements tab-independent sessionStorage logic for crash recovery.

  • Overlay System (watermark.js): Uses a DOM portal strategy to render print-only watermarks at the bottom of the body.

🎙️ Speech & Translation Logic

  1. The notepad uses a hybrid approach for language processing:

  2. Input: Captures audio via the browser's native webkitSpeechRecognition.

  3. Processing: If the chosen language pack is missing locally, the browser automatically routes the request through Google’s online speech services.

  4. Translation: Text is sent to the Google Translate cloud endpoint. This feature requires an active internet connection.

  5. Output: Text-to-Speech (TTS) utilizes the SpeechSynthesis API. It prioritizes local high-quality system voices (Windows/Android) before falling back to remote voices.

🖼️ Watermark Implementation

  • The Watermark tool is designed for Professional Legal/Court documentation.

  • Text Watermark: Renders a rotated div with low opacity behind the text.

  • Image Watermark: Uses a FileReader to load local assets.

  • Save Separation: The watermark is explicitly excluded from the .txt save logic. It is controlled via a @media print CSS block, ensuring it only appears on PDF exports.

Timestamped Recording

  • Each voice input is automatically tagged with session time.
  • Useful for lectures, interviews, courtrooms, and parliamentary records.
  • Ensures transcripts align with official practices and can be verified later.

Editing Features

  • Find & Find All: Quickly locate words or phrases in your notes.
  • Replace & Replace All: Edit transcripts efficiently by correcting or standardizing terms.
  • Timestamp Integration: Each entry is tagged with session time for official records.

Paragraph button

  • it's make paragraph like normal editors
  • Short cut key is Tab but only work inside editor area out side it work as browser short cut key whatever is set for browsers

🛡️ Privacy & Security Standards

  • Independent Tabs: Unlike standard apps, turning on Auto-Save in one tab does not affect other tabs. This allows for multi-case handling without data leaking between windows.

  • Data Shredding: Turning off Auto-Save immediately clears all session Storage keys associated with that tab.

  • Encryption Warning: The app includes a mandatory privacy alert when enabling persistent storage to inform users about potential browser-level vulnerabilities.

🛠️ Language Pack Installation Guide

To use the Local (Private) mode for Speech-to-Text and Text-to-Speech without relying on Google Cloud, you must install the corresponding language packs on your operating system.

🪟 Windows 10 / 11

Windows manages its own voices and speech recognition engines that the browser taps into.

  1. Open Settings (Win + I).

  2. Go to Time & Language > Language & Region.

  3. Click Add a language and search for your desired language (e.g., Gujarati or Hindi).

  4. Once added, click the Options (three dots) next to the language and select Language Options.

  5. Under Speech, click Download.

  6. Restart your browser for the Notepad to detect the new local voice.

📱 Android (Brave / Chrome / Firefox / any else)

Android uses "Google Speech Services" as the primary engine for both input and output.

  1. Open your phone's Settings.

  2. Search for "Languages & Input" or "System".

  3. Go to Text-to-Speech Output > Preferred Engine (ensure Google is selected).

  4. Tap the Gear Icon next to Google Speech Services.

  5. Select Install Voice Data and download your specific language.

  6. For Voice Input (STT), go to Google Voice Typing > Offline S

🐧 Linux (Ubuntu / Fedora / Mint)

Linux support depends on whether your distro has speech-dispatcher installed.

1 TTS (Voices): Most Linux distros use eSpeak or Festival. You can install additional voices via terminal:

2 sudo apt install espeak-ng (for Ubuntu/Debian)

3 STT (Microphone): Speech recognition on Linux via the browser usually defaults to Google Online Services because most Linux kernels do not have a built-in offline speech-to-text engine like Windows or Mac.

Browser Note: Use Chrome or Chromium on Linux for the best results; Firefox on Linux sometimes has limited support for the Web Speech API.

🌐 Google Chrome / Brave / Firefox / Safari (Browser Level)

If you are using the Online mode, the browser handles this automatically, but you can manage the "Google Enhanced" voices here:

  1. Open Browser Settings.

  2. Go to Languages on the left sidebar.

  3. Under Preferred Languages, ensure your language is at the top.

🍎 macOS (MacBook / iMac)

macOS has some of the highest-quality local voices (like "Siri" or "Alex"), but they are often not downloaded by default.

  1. Open System Settings > Accessibility.

  2. Go to Spoken Content > System Voice.

  3. Click the dropdown and select Manage Voices....

  4. Find your language (e.g., Hindi or English - India) and click the Download icon.

  5. Privacy Note: For Speech-to-Text (STT), macOS may ask for "Dictation" permission. Ensure System Settings > Keyboard > Dictation is turned ON.

📱 iOS (iPhone / iPad)

  1. Go to Settings > Accessibility > Spoken Content > Voices.

  2. Select your language and download the "Enhanced" version of the voice for the best experience.

  3. Mic Setup: Go to Settings > General > Keyboard and ensure Enable Dictation is toggled ON.

Important: On iOS, the "Speak" function (TTS) might not start until the user physically interacts with the page (Apple's anti-spam rule).

Enable "Google Translate" within the browser settings to allow the API handshake to work smoothly.

## ⚠️ Troubleshooting

  • Voices not showing up? Browsers often need a "nudge" to load the list. If you don't hear anything, click the Speak button twice or refresh the page.

  • Mic Error (Network)? This happens if you choose "Local" but don't have the Offline Speech Recognition pack installed on your Android/Windows device.

  • Translation Failed? Ensure you are not behind a strict firewall or using a VPN that blocks Google's translation endpoints.

## 📝 Final Developer Note When testing on iOS, remember that Apple's "Silent Mode" switch (the physical button on the side) will often mute the Speak (TTS) function even if your volume is up!

Clone this wiki locally