كيف يعمل

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

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

1. تحليل AST

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

  • محتوى نص JSX والسمات
  • السلاسل النصية الحرفية داخل مكونات React (الدعم للسلاسل النصية الحرفية قادم قريبًا.)
  • أنماط المحتوى الديناميكي

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

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

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

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

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

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

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

  • تجزئة MD5 تنشئ بصمات فريدة للمحتوى
  • قواميس مُصدرة تتتبع التغييرات في دليل 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. مزودو نماذج اللغة الكبيرة البديلة

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

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

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

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

lingoCompiler.next({
  sourceLocale: "en",
  targetLocales: ["es", "fr", "de"],
  models: {
    "*:*": "groq:qwen/qwen3-32b", // 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=...

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

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