feat: show progress details when translating (#91)

Author: vrcprl

.changeset/calm-radios-glow.md

@@ -0,0 +1,5 @@
+---
+"replexica": patch
+---
+
+show progress in percent while translating

demo/classic/json/en.json

@@ -1,6 +1,6 @@
 {
   "home": {
     "title/main": "Replexica",
-    "description/dev": "Replexica is an AI-powered localization-as-a-service platform for modern SaaS." 
+    "description/dev": "Replexica is an AI-powered localization-as-a-service platform for modern SaaS."
   }
 }

demo/classic/json/es.json

@@ -1,6 +1,6 @@
 {
   "home": {
     "title/main": "Replexica",
-    "description/dev": "Replexica es una plataforma de localización como servicio impulsada por IA para SaaS modernos."
+    "description/dev": "Replexica es una plataforma de localización como servicio potenciada por IA para SaaS modernos."
   }
 }

packages/cli/src/i18n.ts

@@ -62,7 +62,9 @@ export default new Command()
             const processor = createBucketProcessor(bucketType, bucketPath, translatorFn);
 
             const translatable = await processor.load(sourceLocale);
-            const translated = await processor.translate(translatable, sourceLocale, targetLocale);
+            const translated = await processor.translate(translatable, sourceLocale, targetLocale, progress => {
+              bucketSpinner.text = `Translating from ${sourceLocale} to ${targetLocale}... ${progress.toFixed(1)}%`;
+            });
 
             await processor.save(targetLocale, translated);
             bucketSpinner.succeed(`Translation from ${sourceLocale} to ${targetLocale} completed.`);

packages/cli/src/services/bucket/base.ts

@@ -2,6 +2,8 @@ import _ from "lodash";
 import fs from 'fs';
 import { BucketPayload, BucketTranslatorFn, IBucketProcessor } from "./core.js";
 
+const CHUNK_SIZE = 25;
+
 export abstract class BaseBucketProcessor implements IBucketProcessor {
   constructor(
     protected bucketPath: string,
@@ -24,20 +26,26 @@ export abstract class BaseBucketProcessor implements IBucketProcessor {
     return result;
   }
 
-  async translate(payload: BucketPayload, sourceLocale: string, targetLocale: string): Promise<BucketPayload> {
+  async translate(payload: BucketPayload, sourceLocale: string, targetLocale: string, onProgress?: (progress: number) => void): Promise<BucketPayload> {
     // The data contains key-value pairs, so let's translate
-    // the values in batches of 20 keys max.
     const resultData: Record<string, any> = {};
 
     const keys = Object.keys(payload.data);
-    const batches = _.chunk(keys, 20);
+    const batches = _.chunk(keys, CHUNK_SIZE);
+    const totalBatches = batches.length;
+
+    let completedBatches = 0;
+
     for (const batch of batches) {
       const partialData = _.pick(payload.data, batch);
       const partialPayload = { data: partialData, meta: payload.meta };
       const partialResult = await this.translator(sourceLocale, targetLocale, partialPayload);
       _.merge(resultData, partialResult);
+      completedBatches++;
+
+      const progress = (completedBatches / totalBatches) * 100;
+      onProgress?.(progress);
     }
-    
     const result = { data: resultData, meta: payload.meta };
     return result;
   }
@@ -57,7 +65,7 @@ export abstract class BaseBucketProcessor implements IBucketProcessor {
   protected async _preSave(payload: BucketPayload, locale: string): Promise<BucketPayload> {
     return payload;
   }
-  
+
   protected async _loadData(locale: string): Promise<Record<string, any>> {
     const filePath = this._resolveDataFilePath(locale);
     const exists = await fs.existsSync(filePath);

packages/cli/src/services/bucket/core.ts

@@ -21,7 +21,7 @@ export type BucketTranslatorFn = {
 
 export interface IBucketProcessor {
   load(locale: string): Promise<BucketPayload>;
-  translate(payload: BucketPayload, sourceLocale: string, targetLocale: string): Promise<BucketPayload>;
+  translate(payload: BucketPayload, sourceLocale: string, targetLocale: string, onProgress?: (progress: number) => void): Promise<BucketPayload>;
   save(locale: string, payload: BucketPayload): Promise<BucketPayload>;
 }