|
3 | 3 | [](https://badge.fury.io/js/react-ai-translator)
|
4 | 4 | [](./LICENSE)
|
5 | 5 |
|
6 |
| -A **React** component for **local, secure, on-demand translations** powered by the **[Xenova/nllb-200-distilled-600M](https://huggingface.co/Xenova/nllb-200-distilled-600M)** model. This package utilizes the **WebGPU** capabilities of the device on which the app runs, ensuring data privacy and enabling you to translate text without sending data to third-party APIs. |
| 6 | +1. This package provides a CLI command (**generate_translations**) to generate a `translations.json` file in your `public` directory, containing translations for your website's displayable content. It uses AI translation services (configurable via options) to translate your content into specified languages. The models used are downloaded from huggingface and run your in local env. |
| 7 | + |
| 8 | +2. A **React** component for **local, secure, on-demand translations** powered by the **[Xenova/nllb-200-distilled-600M](https://huggingface.co/Xenova/nllb-200-distilled-600M)** model. This package utilizes the **WebGPU** capabilities of the device on which the app runs, ensuring data privacy and enabling you to translate text without sending data to third-party APIs. |
7 | 9 |
|
8 | 10 | > **Note**: This is especially suitable when security is a concern and parts of the data are user-provided, which might not be captured in your `i18n` translation files.
|
9 | 11 |
|
@@ -47,13 +49,46 @@ The example code used for this demo is available in this repository: **[joelshej
|
47 | 49 | Install the package via npm (or yarn):
|
48 | 50 |
|
49 | 51 | ```bash
|
50 |
| -npm install react-ai-translator |
51 |
| - |
| 52 | +npm i @codethicket/react-ai-translator |
52 | 53 | ```
|
53 | 54 |
|
54 | 55 | # Usage
|
| 56 | +## CLI Tool for Static Text Translation |
| 57 | + |
| 58 | +We provide a simple CLI command to automatically collect and translate **all static text** in your application into desired languages. Run the following command from your project root: |
| 59 | + |
| 60 | +```bash |
| 61 | +npx generate_translations -t Spanish Dutch |
| 62 | + |
| 63 | +``` |
| 64 | +This command collects all the static text in your app and translates it into the specified languages (Spanish and Dutch in this example). |
| 65 | +Other CLI options (for example, to exclude specific files or directories) can be found in the cli.js file. |
| 66 | + |
| 67 | +``` npx generate_translations -t Spanish Danish ...``` run cli command in project workspace with a list of language options to generate translations.json file in public dir of your project . |
| 68 | +For full list of available options, including how to configure the translation model (e.g., specifying a Hugging Face model or API key) or selecting or excluding directories to parse, or available language options and more please refer to the cli.js file in the repository: https://github.com/joelshejar/ai-translation-demo. |
| 69 | +-t is the mandatory option to specify list of target languages. |
| 70 | +Options |
| 71 | +Here's a list of additional available options for the generate_translations command: |
| 72 | + |
| 73 | +-t, --target_languages <target_languages...>: A list of target languages for translation. See the documentation in https://github.com/facebookresearch/flores/blob/main/flores200/README.md#languages-in-flores-200 for a list of supported languages and use the exact name in this list for this option eg: -t Spanish . |
| 74 | + |
| 75 | +-d, --directory <directory>: The directory to start generating translations from. Defaults to the current working directory. Example: -d src. |
| 76 | + |
| 77 | +-e, --extensions <extensions...>: File extensions to search for translatable text. Defaults to js, jsx, ts, and tsx. Example: -e js jsx html. |
| 78 | + |
| 79 | +-i, --ignore_directories <ignore_directories...>: Directories to ignore during the search for translatable text. Defaults to node_modules, .git, .next, public, styles, and dist. Example: -i node_modules test . |
55 | 80 |
|
56 |
| -Wrap your application (or a section of it) in the `TranslatorProvider` to initialize the translation model. |
| 81 | +-s, --source_language <source_language>: The source language to translate from. Defaults to English. Example: -s "en-US". See the documentation for a list of supported source languages. |
| 82 | + |
| 83 | +-f, --ignore_files <ignore_files...>: Files to ignore during the search for translatable text. Defaults to .config. Example: -f config.js. |
| 84 | + |
| 85 | +-m, --ignore_functions <ignore_functions...>: Function names to ignore when searching for translatable text (used to prevent translating code). Defaults to a list of common utility functions. Example: -m require cva. |
| 86 | + |
| 87 | +-a, --ignore_attributes <ignore_attributes...>: HTML attributes to ignore when searching for translatable text. Defaults to a list of common attributes like href, src, etc. Example: -a className style. |
| 88 | + |
| 89 | +-l, --model_name <model_name>: The specific Hugging Face model name to use for translation. Defaults to Xenova/nllb-200-distilled-600M. Other options include (but may not be limited to): Xenova/mbart-large-50-many-to-many-mmt, Xenova/m2m100_418M, and CXDuncan/madlad400-3b-mt-optimized-quantized-onnx. See the documentation for supported models and their language support. |
| 90 | + |
| 91 | +2.Wrap your application (or a section of it) in the `TranslatorProvider` to initialize the translation model. |
57 | 92 | Use the `useTranslator` hook or `Translator` component to translate text wherever needed.
|
58 | 93 |
|
59 | 94 | Below is a minimal example. For more detailed usage, see the [Example](#example) section.
|
@@ -110,18 +145,6 @@ export default App
|
110 | 145 |
|
111 | 146 | ```
|
112 | 147 |
|
113 |
| -## CLI Tool for Static Text Translation |
114 |
| - |
115 |
| -We provide a simple CLI command to automatically collect and translate **all static text** in your application into desired languages. Run the following command from your project root: |
116 |
| - |
117 |
| -```bash |
118 |
| -npx generate_translations -t Spanish Dutch |
119 |
| - |
120 |
| -``` |
121 |
| -This command collects all the static text in your app and translates it into the specified languages (Spanish and Dutch in this example). |
122 |
| -Other CLI options (for example, to exclude specific files or directories) can be found in the cli.js file. |
123 |
| - |
124 |
| - |
125 | 148 | # How It Works
|
126 | 149 |
|
127 | 150 | - **Local Model**
|
|
0 commit comments