كيف يعمل

يقوم مُجمّع Lingo.dev بأتمتة ترجمة تطبيقات React أثناء وقت البناء من خلال التحليل الذكي للكود والترجمة المدعومة بالذكاء الاصطناعي.

عندما تقوم بتشغيل عملية البناء، يقوم المُجمّع بتنفيذ الخطوات التالية لجعل تطبيقك متعدد اللغات دون تغيير الكود المصدري:

1. تحليل AST

يقوم مُجمّع Lingo.dev بمعالجة شجرة بناء الجملة المجردة (AST) لكود React الخاص بك لتحديد المحتوى القابل للترجمة بشكل حتمي. يقوم بتحليل:

  • محتوى نص JSX والسمات
  • السلاسل النصية الحرفية داخل مكونات React
  • أنماط المحتوى الديناميكي

يفهم المُجمّع حدود مكونات React ويحافظ على المعلومات السياقية للترجمات الدقيقة.

2. استخراج المحتوى

يستخرج المُجمّع السلاسل النصية القابلة للترجمة مع الحفاظ على:

  • التسلسل الهرمي للمكونات والسياق
  • أنماط React المحددة مثل props وstate
  • بنية الكود وتنسيقه

يتم استخراج المحتوى المقروء للإنسان فقط. يتم تصفية المعرّفات التقنية ومقتطفات الكود والعناصر غير القابلة للترجمة تلقائيًا.

3. البصمة والإصدارات

تضمن بصمة المحتوى إدارة فعالة للترجمة:

  • تجزئة SHA-256 تنشئ بصمات محتوى فريدة
  • قواميس مُصدرة تتتبع التغييرات في دليل lingo/
  • تكامل Git يحافظ على سجل الترجمة
  • معالجة الفروقات تترجم فقط المحتوى الجديد أو المعدل

يقلل هذا النهج من تكاليف الترجمة ويحافظ على الاتساق عبر عمليات البناء.

4. الترجمة بالذكاء الاصطناعي

تتم الترجمة من خلال نماذج الذكاء الاصطناعي مع فهم سياقي:

  • تكامل نموذج الذكاء الاصطناعي يوفر ترجمات سريعة وعالية الجودة من خلال محرك Lingo.dev أو أحد مزودي LLM المدعومين
  • الحدود السياقية تساعد الذكاء الاصطناعي على فهم علاقات المكونات
  • مصطلحات متسقة عبر تطبيقك بالكامل
  • معالجة الدفعات للأداء الأمثل

يرسل المُجمِّع معلومات سياقية لضمان ملاءمة الترجمات بشكل طبيعي داخل مكونات واجهة المستخدم الخاصة بك.

5. حقن الكود

يتم حقن الترجمات مرة أخرى في البناء الخاص بك دون تعديل الملفات المصدرية:

  • معالجة وقت البناء تنشئ إصدارات مترجمة
  • تكامل الإطار يعمل مع Next.js وVite وReact Router
  • حزم محسّنة مع تحميل قاموس لكل لغة
  • كفاءة وقت التشغيل من خلال ترجمات مُجمّعة مسبقًا

النتيجة هي تطبيقات React متعددة اللغات جاهزة للإنتاج مع الحد الأدنى من العبء على وقت التشغيل.

تكامل الإطار البرمجي

موجه التطبيقات في Next.js

يتكامل المُترجم الآلي مع Next.js من خلال نظام التكوين:

// next.config.js
export default lingoCompiler.next(config)(nextConfig);
  • تتم معالجة مكونات الخادم في وقت البناء
  • تتلقى مكونات العميل حزم ترجمة محسّنة
  • يدعم التوجيه التلقائي عناوين URL المستندة إلى اللغة المحلية

React Router / Remix

التكامل من خلال بنية إضافة Vite:

// vite.config.ts
export default lingoCompiler.vite(config)(viteConfig);
  • العرض من جانب الخادم مع قواميس محملة مسبقًا
  • الترطيب من جانب العميل يحافظ على حالة الترجمة
  • تقسيم الكود المستند إلى المسارات يتضمن حزم الترجمة

Vite

تكامل مباشر مع إضافة Vite:

// vite.config.ts
export default lingoCompiler.vite(config)(viteConfig);
  • استبدال الوحدة الساخن يحدّث الترجمات أثناء التطوير
  • تحسين البناء ينشئ حزم إنتاج مصغرة
  • معالجة الأصول تدير ملفات الترجمة بكفاءة

سير عمل التطوير

  1. كتابة مكونات React باستخدام نص بلغة طبيعية
  2. تشغيل خادم التطوير - يستخرج المُترجم الآلي المحتوى ويترجمه
  3. مراجعة الترجمات في دليل lingo/ المُنشأ
  4. إيداع ملفات الترجمة في نظام التحكم بالإصدارات
  5. النشر مع دعم متعدد اللغات مدمج

فوائد الإنتاج

  • تكلفة وقت تشغيل صفرية - يتم تجميع الترجمات مسبقًا
  • أحجام حزم مثالية - يتم تضمين الترجمات المستخدمة فقط
  • صديق لمحركات البحث - عرض مناسب خاص باللغة المحلية
  • تجربة مستخدم متسقة - جودة ترجمة احترافية

ينشئ المُترجم الآلي تطبيقات إنتاجية تبدو وكأنها مبنية أصلاً لكل لغة مدعومة مع الحفاظ على سير عمل التطوير الأصلي.

مزودو LLM

الخيار 1. محرك Lingo.dev

يمكن لـ مُجمِّع Lingo.dev استخدام محرك Lingo.dev كمحرك الترجمة الذكي الخاص بك.

يوفر اختيارًا ديناميكيًا للنموذج، وتوجيهًا تلقائيًا إلى نماذج مختلفة لكل زوج من اللغات، وآليات احتياطية تلقائية للنماذج، وذاكرة ترجمة تأخذ في الاعتبار الترجمات السابقة، ودعم المصطلحات للمصطلحات المتخصصة في مجال مشروعك. هناك خيارات مجانية ومدفوعة، ويجب أن تكون الفئة المجانية Hobby كافية لمعظم المشاريع.

للمصادقة، قم بتشغيل:

npx lingo.dev@latest login

قم بتكوين محرك Lingo.dev كمزود لك، على سبيل المثال لـ Next.js:

lingoCompiler.next({
  sourceLocale: "en",
  targetLocales: ["es", "fr", "de"],
  models: "lingo.dev",
})(nextConfig);

تفصيل مهم. إذا كنت تستخدم متصفح Brave، أو كانت إضافات المتصفح لديك تمنع تدفق المصادقة، يمكنك المصادقة يدويًا عن طريق إضافة متغير بيئة LINGODOTDEV_API_KEY إلى ملف .env الخاص بك:

LINGODOTDEV_API_KEY=...

الخيار 2. مزودو LLM البديلون

يدعم المُجمِّع مزودي نماذج اللغة الكبيرة (LLM) التالية:

تحتاج إلى إنشاء حساب والحصول على مفتاح API من مزود نماذج اللغة الكبيرة الذي تختاره للتكوين.

ملاحظة: تأكد من تفعيل حسابك مع مزود نماذج اللغة الكبيرة وقبول شروط الخدمة الخاصة بهم قبل استخدامه في المُجمِّع. قد يمنعك مزود نماذج اللغة الكبيرة من استخدام منصتهم قبل إكمال جميع الخطوات. قد تختلف الخطوات لكل مزود نماذج اللغة الكبيرة.

قم بتكوين مزود نماذج اللغة الكبيرة الذي تختاره، على سبيل المثال لاستخدام Groq في تطبيق Next.js:

lingoCompiler.next({
  sourceLocale: "en",
  targetLocales: ["es", "fr", "de"],
  models: {
    "*:*": "groq:mistral-saba-24b", // GROQ
    // "*:*": "google:gemini-2.0-flash", // Google AI
    // "*:*": "openrouter:mistralai/mistral-small-24b-instruct-2501", // OpenRouter
    // "*:*": "ollama:mistral-small3.1", // Ollama
    // "*:*": "mistral:mistral-small-latest", // Mistral
  },
})(nextConfig);

أضف مفتاح API الخاص بمزود نماذج اللغة الكبيرة المكوّن إلى بيئتك:


# .env

GROQ_API_KEY=gsk_...
GOOGLE_API_KEY=...
OPENROUTER_API_KEY=...
MISTRAL_API_KEY=...

نود دعم المزيد من نماذج اللغة الكبيرة - تحدث معنا أو أرسل لنا طلب سحب!

الخطوات التالية