Immersion Language Learning Assistant

illa-helper is an open source browser plugin designed to help users learn a foreign language through an immersive experience. It provides real-time translation, pronunciation guide and vocabulary analysis while browsing the web. The plugin supports Chrome and Firefox browsers, and is based on the Vue 3 framework, with a clear structure and easy to extend. Users can customize the settings, such as adjusting the translation model or API key. illa-helper is especially suited for learners who want to naturally improve their language skills during everyday browsing. The project is hosted on GitHub and developers are free to contribute and optimize features.

Function List

• Real-time translation: Translate foreign language text on a web page into a language the user is familiar with.
• Pronunciation assistance: Provides pronunciation of words or phrases, via Youdao TTS and Web Speech API.
• Vocabulary parsing: displays the phonetic symbols, definitions and example sentences of words and supports an interactive interface.
• Customized Settings: Supports user-configurable API keys, translation models, and temperature parameters.
• Cross-browser support: Compatible with Chrome and Firefox, adapting to different browser features.
• Hoverbox Interface: Provides intuitive hoverboxes that display translation and pronunciation information.
• Offline storage: Saves user settings and ensures that personalized experiences are synchronized across devices.

Using Help

Installation process

1. Download plugin source code
   interviews https://github.com/xiao-zaiyi/illa-helperClick the "Code" button and select "Download ZIP" to download the source code, or use the Git command to clone the repository:

   git clone https://github.com/xiao-zaiyi/illa-helper.git
   

2. Installation of dependencies
   After extracting the files, go to the project directory and run the following command to install the necessary dependencies:

   npm install
   

   Make sure Node.js and npm are installed.

3. Configuring Environment Variables
   In the project root directory, create the .env file, add API keys and configurations, for example:

   VITE_WXT_DEFAULT_API_KEY="sk-your-real-api-key"
   VITE_WXT_DEFAULT_API_ENDPOINT="https://xxxxx/api/v1/chat/completions"
   VITE_WXT_DEFAULT_MODEL="gpt-4"
   VITE_WXT_DEFAULT_TEMPERATURE="0.2"
   

   These settings are used to connect to translation and pronunciation services. Attention:.env Documentation has been added .gitignoreThe key is secured.

4. Building plug-ins
   Run the build command based on the target browser:
   • Chrome/Edge:

     npm run build:chrome
     

   • Firefox:

     npm run build:firefox
     

   After the build is complete, the output file is located in the .output/chrome-mv3(Chrome) or .output/firefox-mv2(Firefox).

5. Loading Plug-ins
   • Chrome: Open your browser and go to chrome://extensions/If you want to enable "Developer Mode", click on "Load Extensions" and choose .output/chrome-mv3 Folder.
   • Firefox: Enter about:debugging#/runtime/this-firefoxClick on "Load Temporary Add-ons" and select the .output/firefox-mv2 folder. The plugin will load automatically.

Usage

After installation, illa-helper will run in your browser. Below is the detailed procedure for the main functions:

real time translation

1. Open any web page and select the text to be translated.
2. The plugin automatically detects the foreign language content and displays the translation results in a hover box.
3. Users can click the "Copy" button in the hover box to save the translation result to the clipboard.
4. If you want to change the translation language, go to the plugin options page (right-click the plugin icon and select "Options") and set the target language.

Pronunciation aids

1. Select the word or phrase and the hover box displays the pronunciation button (🔊).
2. Click the Pronunciation button and the plugin plays the audio via Youdao TTS or Web Speech API.
3. The user can adjust the speed of articulation or the type of voice (to be configured on the Options page).

lexical analysis

1. The hover box displays the phonetic symbols, definitions, and example sentences for the selected text.
2. Click the "More" button to see detailed dictionary information (e.g., word properties, synonyms).
3. If you need to save the vocabulary, click "Add to Dictionary" and the plug-in will store the vocabulary locally.

Customized settings

1. Open the plugin options page and modify the API key or translation model (default) gpt-4).
2. align VITE_WXT_DEFAULT_TEMPERATURE parameter (0.0-1.0), which controls the creativity of the translation (lower values are more accurate, higher values are more flexible).
3. Once the settings are complete, click "Save" and the plugin will automatically synchronize the configuration.

caveat

• Ensure a stable internet connection for the translation and pronunciation functions to work properly.
• Firefox users should note that the plugin requires a specific ID for its storage functionality in Firefox, which is already in the wxt.config.ts Medium Configuration:

  browser_specific_settings: {
  gecko: {
  id: 'illa-helper@xiao-zaiyi',
  strict_min_version: '88.0'
  }
  }
  

• If you are experiencing API connectivity issues, check the .env key and endpoint configuration in the file.

application scenario

1. foreign language study
   Students or self-learners use illa-helper to get real-time translation and pronunciation, quickly understand content and learn new vocabulary while browsing foreign language websites.
2. academic research
   When researchers read foreign language literature, the plug-in translates specialized terminology and saves raw words to improve reading efficiency.
3. Daily Browsing
   Non-native speakers use plug-ins to quickly understand foreign language content and enhance information access when browsing social media or news.
4. Developer Debugging
   Developers can test different translation models or APIs to optimize plugin performance by modifying the source code or configuration.

QA

1. Which browsers does illa-helper support?
   Chrome and Firefox are currently supported, with Chrome Manifest V3 and Firefox Manifest V2 respectively.
2. Do I need to pay to use it?
   illa-helper is an open source project and is free to use. However, you need to get the API key for the translation or pronunciation service by yourself, which may involve costs.
3. How do I update the plugin?
   Pull the latest code from GitHub and re-run the build and load process to update.
4. What if the translation is not accurate?
   Check the API key and model configuration, or try to adjust the VITE_WXT_DEFAULT_TEMPERATURE Parameters.
5. Can it be used offline?
   Some features (e.g. local storage) are supported offline, but internet access is required for translation and pronunciation.