HTML

ترجمة بالذكاء الاصطناعي لملفات HTML باستخدام Lingo.dev CLI

ما هو HTML؟

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

ما هو Lingo.dev CLI؟

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

لمعرفة المزيد، راجع نظرة عامة.

حول هذا الدليل

يشرح هذا الدليل كيفية ترجمة ملفات HTML باستخدام Lingo.dev CLI.

ستتعلم كيفية:

  • إنشاء مشروع من الصفر
  • تكوين خط أنابيب الترجمة
  • إنشاء ترجمات باستخدام الذكاء الاصطناعي

المتطلبات الأساسية

لاستخدام Lingo.dev CLI، تأكد من تثبيت Node.js الإصدار 18 أو أحدث:

❯ node -v
v22.17.0

الخطوة 1. إعداد المشروع

في دليل مشروعك، أنشئ ملف i18n.json:

{
  "$schema": "https://lingo.dev/schema/i18n.json",
  "version": "1.10",
  "locale": {
    "source": "en",
    "targets": ["es"]
  },
  "buckets": {}
}

يحدد هذا الملف سلوك خط أنابيب الترجمة، بما في ذلك اللغات المراد الترجمة بينها ومكان وجود المحتوى القابل للترجمة في نظام الملفات.

لمعرفة المزيد حول الخصائص المتاحة، راجع i18n.json.

الخطوة 2. تكوين اللغة المصدر

اللغة المصدر هي اللغة والمنطقة الأصلية التي تمت كتابة المحتوى بها. لتكوين اللغة المصدر، قم بتعيين خاصية locale.source في ملف i18n.json:

{
  "$schema": "https://lingo.dev/schema/i18n.json",
  "version": "1.10",
  "locale": {
    "source": "en",
    "targets": ["es"]
  },
  "buckets": {}
}

يجب توفير اللغة المصدر كـ وسم لغة BCP 47.

للحصول على القائمة الكاملة لرموز اللغات التي يدعمها Lingo.dev CLI، راجع رموز اللغات المدعومة.

الخطوة 3. تكوين اللغات المستهدفة

اللغات المستهدفة هي اللغات والمناطق التي تريد ترجمة محتواك إليها. لتكوين اللغات المستهدفة، قم بتعيين خاصية locale.targets في ملف i18n.json:

{
  "$schema": "https://lingo.dev/schema/i18n.json",
  "version": "1.10",
  "locale": {
    "source": "en",
    "targets": ["es"]
  },
  "buckets": {}
}

الخطوة 4. إنشاء المحتوى المصدر

إذا لم تكن قد قمت بذلك بالفعل، قم بإنشاء ملف HTML واحد أو أكثر يحتوي على المحتوى المراد ترجمته. يجب أن تكون هذه الملفات موجودة في مسار يتضمن اللغة المصدر في مكان ما من المسار (على سبيل المثال، كاسم دليل مثل en/ أو كجزء من اسم الملف مثل messages.en.html).

بالنسبة لملفات HTML، يتضمن المحتوى القابل للترجمة:

  • المحتوى النصي داخل عناصر HTML
  • قيم السمات بما في ذلك:
    • سمات alt (أوصاف الصور)
    • سمات title (تلميحات الأدوات)
    • سمات placeholder (تلميحات الإدخال)
    • سمات value (قيم الأزرار والإدخال)
    • سمات content لعلامات Meta
  • يتم تحديث سمة lang تلقائيًا لتتطابق مع اللغة المستهدفة

يتم الحفاظ على علامات Script وعلامات Style والسمات غير القابلة للترجمة.

على سبيل المثال:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>MyApp - Hello World</title>
    <meta name="description" content="A simple demo app" />
  </head>
  <body>
    <h1>Welcome to MyApp</h1>
    <p>Hello, world! This is a simple demo with <strong>bold text</strong>.</p>
    <img src="example.jpg" alt="Example image" />
  </body>
</html>

الخطوة 5. إنشاء حاوية

  1. في ملف i18n.json، أضف كائن "html" إلى كائن buckets:

    {
  "$schema": "https://lingo.dev/schema/i18n.json",
  "version": "1.10",
  "locale": {
    "source": "en",
    "targets": ["es"]
  },
  "buckets": {
    "html": {}
  }
}

  2. في كائن "html"، حدد مصفوفة من نمط include واحد أو أكثر:

    {
  "$schema": "https://lingo.dev/schema/i18n.json",
  "version": "1.10",
  "locale": {
    "source": "en",
    "targets": ["es"]
  },
  "buckets": {
    "html": {
      "include": ["./[locale]/example.html"]
    }
  }
}

    تحدد هذه الأنماط الملفات المراد ترجمتها.

    الأنماط نفسها:

    • يجب أن تحتوي على [locale] كعنصر نائب للغة المكونة
    • يمكن أن تشير إلى مسارات الملفات (على سبيل المثال، "[locale]/config.html")
    • يمكن استخدام النجوم كعناصر نائبة بدل (على سبيل المثال، "[locale]/*.html")

    أنماط glob العودية (على سبيل المثال، **/*.html) غير مدعومة.

الخطوة 6. تكوين نموذج لغوي كبير

يستخدم Lingo.dev CLI نماذج لغوية كبيرة (LLMs) لترجمة المحتوى باستخدام الذكاء الاصطناعي. لاستخدام أحد هذه النماذج، تحتاج إلى مفتاح API من مزود مدعوم.

للبدء والتشغيل بأسرع وقت ممكن، نوصي باستخدام محرك Lingo.dev — منصتنا المستضافة الخاصة التي توفر 10,000 رمز مميز من الاستخدام المجاني الشهري:

  1. قم بالتسجيل للحصول على حساب Lingo.dev.

  2. قم بتشغيل الأمر التالي:

    npx lingo.dev@latest login

    سيؤدي هذا إلى فتح متصفحك الافتراضي ومطالبتك بالمصادقة.

  3. اتبع التعليمات.

الخطوة 7. إنشاء الترجمات

في الدليل الذي يحتوي على ملف i18n.json، قم بتشغيل الأمر التالي:

npx lingo.dev@latest run

يقوم هذا الأمر بـ:

  1. قراءة ملف i18n.json.
  2. العثور على الملفات التي تحتاج إلى ترجمة.
  3. استخراج المحتوى القابل للترجمة من الملفات.
  4. استخدام نموذج اللغة الكبير المُكوَّن لترجمة المحتوى المستخرج.
  5. كتابة المحتوى المترجم مرة أخرى إلى نظام الملفات.

في المرة الأولى التي يتم فيها إنشاء الترجمات، يتم إنشاء ملف i18n.lock. يتتبع هذا الملف المحتوى الذي تمت ترجمته، مما يمنع إعادة الترجمة غير الضرورية في عمليات التشغيل اللاحقة.

مثال

en/example.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>MyApp - Hello World</title>
    <meta name="description" content="A simple demo app" />
  </head>
  <body>
    <h1>Welcome to MyApp</h1>
    <p>Hello, world! This is a simple demo with <strong>bold text</strong>.</p>
    <img src="example.jpg" alt="Example image" />
    <input type="text" placeholder="Enter text here" />
    <a href="#" title="Click for more">Learn more</a>
  </body>
</html>

es/example.html

<!DOCTYPE html>
<html lang="es">
  <head>
    <title>MyApp - Hola Mundo</title>
    <meta name="description" content="Una aplicación de demostración simple" />
  </head>
  <body>
    <h1>Bienvenido a MyApp</h1>
    <p>¡Hola, mundo! Esta es una demostración simple con <strong>texto en negrita</strong>.</p>
    <img src="example.jpg" alt="Imagen de ejemplo" />
    <input type="text" placeholder="Ingresa texto aquí" />
    <a href="#" title="Haz clic para más">Saber más</a>
  </body>
</html>

i18n.json

{
  "$schema": "https://lingo.dev/schema/i18n.json",
  "version": "1.10",
  "locale": {
    "source": "en",
    "targets": ["es"]
  },
  "buckets": {
    "html": {
      "include": ["./[locale]/example.html"]
    }
  }
}

i18n.lock

version: 1
checksums:
  ab95e8c959a889717f02a05af5c5b1e6:
    head/0/0: 7d39787547365ee4194f29f3f54e5c05
    head/1#content: 49f8864eb0e53903f04532bf33e1e4fa
    head/2#content: c2a1da93efb7e744d100df705e5fcbfd
    head/3#content: d94b318cb327f61f1aea44a6cb1fdcad
    body/0/0: d1c3a9f35e377554a4ccaa467ca26614
    body/1/0: e19afd1952881bdf10063f9478980147
    body/1/1/0: 7cd9256312384858ecba6c29d3c2e550
    body/1/2: ce8b9bb44f031705708a70e068bb73c8
    body/1/3/0: 037d114f19b882f08994712b8d9c1e37
    body/1/4: f05f450fffcb17520c441ab9789f40ce
    body/2/0/0/0: 57d373bcffe2d376cbf9919da30ca30b
    body/3#alt: 68f95fca639f8bf72a4796b6734b02d5
    body/4#alt: cb7d920c3bbcade1c8e0307093f58573
    body/5#placeholder: a05ce3b4578f55e41bd2ad4964f966b4
    body/6#placeholder: a4554ed67c02872e302b0042724f859d
    body/7#title: c903c6985a40ce02d65c90229de35a4e
    body/7/0: e598091d132f890c37a6d4ed94f6d794
    body/8#title: d656021ba5f485fa1a82f8aac6ecc5de
    body/8/0: 1c6856488bd34ad87fcacce2d8e66a0b
    body/9/0: 862964e6cd73cdffdcac622406c6bac9