diff --git a/README.md b/README.md index cf436b5..c0b1d1a 100644 --- a/README.md +++ b/README.md @@ -40,6 +40,8 @@ Install the package via npm (or yarn): ```bash npm install react-ai-translator +``` + # Usage Wrap your application (or a section of it) in the `TranslatorProvider` to initialize the translation model. @@ -97,6 +99,8 @@ function App() { export default App +``` + # How It Works diff --git a/lefthook.yml b/lefthook.yml index c441b4f..835543f 100644 --- a/lefthook.yml +++ b/lefthook.yml @@ -5,7 +5,7 @@ pre-commit: run: pnpm biome check --write --unsafe --staged --no-errors-on-unmatched && git add -u typecheck: run: pnpm tsc - # build: - # run: pnpm build + build: + run: pnpm build test: run: pnpm test:ci \ No newline at end of file diff --git a/package.json b/package.json index 93b24a1..0761eba 100644 --- a/package.json +++ b/package.json @@ -1,13 +1,13 @@ { - "name": "@joelshejar/react-ai-translator", + "name": "@codethicket/react-ai-translator", "description": "", - "version": "0.0.60", + "version": "0.0.62", "author": "Joel Rajesh", "license": "MIT", - "keywords": [], + "keywords": ["translations", "ai", "react", "i18n"], "repository": { "type": "git", - "url": "https://github.com/joelshejar/practise-translations-ai" + "url": "https://github.com/CodeThicket/react-ai-translator" }, "scripts": { "dev": "concurrently \"pnpm build --watch\" \"pnpm storybook\" \"pnpm test\" ", diff --git a/src/hooks/useTranslation.ts b/src/hooks/useTranslation.ts index 1f86801..2fa81aa 100644 --- a/src/hooks/useTranslation.ts +++ b/src/hooks/useTranslation.ts @@ -1,6 +1,5 @@ import { useEffect, useRef, useState } from "react"; -// Define the possible statuses returned by the worker type WorkerStatus = | "initiate" | "progress" @@ -9,13 +8,11 @@ type WorkerStatus = | "update" | "complete"; -// Define the structure of the progress items interface ProgressItem { file?: string; progress?: number; } -// Define the data structure for worker messages interface WorkerMessageData { status: WorkerStatus; output?: string; @@ -23,7 +20,6 @@ interface WorkerMessageData { file?: string; } -// Hook return type interface UseTranslationReturn { translate: (text: string, srcLang: string, tgtLang: string) => void; translatedText: string; @@ -36,29 +32,22 @@ interface UseTranslationReturn { const useTranslation = (_workerScript: string): UseTranslationReturn => { const worker = useRef(null); - // States for managing translation const [loading, setLoading] = useState(false); const [modelLoading, setModelLoading] = useState(false); const [progress, setProgress] = useState([]); const [translatedText, setTranslatedText] = useState(""); const [error, setError] = useState(null); - console.log("hhhhh"); - useEffect(() => { if (!worker.current) { - // Initialize the worker worker.current = new Worker(new URL("./worker.mjs", import.meta.url), { type: "module", }); } - // Handle worker messages const onMessage = (e: MessageEvent) => { const { status, output, progress: progressValue, file } = e.data; - console.log(status, "status"); - switch (status) { case "initiate": { setLoading(true); @@ -68,7 +57,6 @@ const useTranslation = (_workerScript: string): UseTranslationReturn => { } case "progress": { - console.log("progress"); setProgress((prev) => prev.map((item) => item.file === file ? { ...item, progress: progressValue } : item, @@ -78,22 +66,17 @@ const useTranslation = (_workerScript: string): UseTranslationReturn => { } case "done": { - console.log("done"); setModelLoading(false); setProgress((prev) => prev.filter((item) => item.file !== file)); break; } case "ready": { - console.log("ready"); setLoading(false); break; } case "update": { - console.log("update"); - console.log(output, "output"); - // Append partial translations if (output) { setTranslatedText(output); } @@ -101,7 +84,6 @@ const useTranslation = (_workerScript: string): UseTranslationReturn => { } case "complete": { - console.log("complete"); setLoading(false); break; } @@ -111,15 +93,14 @@ const useTranslation = (_workerScript: string): UseTranslationReturn => { worker.current.addEventListener("message", onMessage); return () => { + // worker.current?.removeEventListener("message", onMessage) // If you want the worker to be terminated on unmount, uncomment below: // worker.current?.terminate(); // worker.current = null; }; }, []); - // Function to send translation requests to the worker const translate = (text: string, srcLang: string, tgtLang: string) => { - console.log("kkkk"); if (!worker.current) { console.error("Worker is not initialized."); return; @@ -127,9 +108,7 @@ const useTranslation = (_workerScript: string): UseTranslationReturn => { setLoading(true); setError(null); - setTranslatedText(""); // Reset the output - - console.log("lllll", text, srcLang, tgtLang); + setTranslatedText(""); worker.current.postMessage({ text, diff --git a/src/worker.ts b/src/worker.ts index c992488..8f7ab53 100644 --- a/src/worker.ts +++ b/src/worker.ts @@ -1,8 +1,5 @@ -// worker.ts - import { type PipelineType, pipeline } from "@xenova/transformers"; -// Extend the global scope for a dedicated worker declare const self: DedicatedWorkerGlobalScope & typeof globalThis; /** @@ -34,19 +31,12 @@ self.addEventListener("message", async (event: MessageEvent) => { // Retrieve the translation pipeline. When called for the first time, // this will load the pipeline and save it for future use. const translator = await MyTranslationPipeline.getInstance((x) => { - // We also add a progress callback to the pipeline so that we can - // track model loading. self.postMessage(x); }); - // Log the language codes - console.log(event.data.tgt_lang, event.data.src_lang, "langcode"); - - // Actually perform the translation const output = await translator?.(event.data.text, { tgt_lang: event.data.tgt_lang, src_lang: event.data.src_lang, - // Allows for partial output callback_function: (x: any) => { self.postMessage({ status: "update", @@ -57,7 +47,6 @@ self.addEventListener("message", async (event: MessageEvent) => { }, }); - // Send the output back to the main thread self.postMessage({ status: "complete", output: output, diff --git a/tsup.config.ts b/tsup.config.ts index b052712..78c0354 100644 --- a/tsup.config.ts +++ b/tsup.config.ts @@ -17,12 +17,6 @@ const common: Options = { injectStyle: false, target: "es2021", platform: "browser", - // dts: { - // entry: 'src/index.js', // or whichever main file you want - // }, - // loader: { - // '.worker.js': 'file', // Handle worker files as static files - // }, }; const getPackageName = async () => { @@ -68,9 +62,6 @@ const linkSelf = async () => { // biome-ignore lint/suspicious/noConsoleLog: // biome-ignore lint/suspicious/noConsole: - console.log( - `Run 'pnpm link ${await getPackageName()} --global' inside another project to consume this package.`, - ); }; export default defineConfig({