بولت

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

القيود المعروفة

تستخدم Bolt حاويات الويب لتشغيل تطبيقات الويب داخل المتصفح. هذه تقنية قوية، ولكنها تعاني من بعض مشاكل التوافق مع Lingo.dev:

يمكنك فقط استخدام مفتاح API للمصادقة مع Lingo.dev Engine، وليس أمر login الخاص بواجهة سطر الأوامر.
في Bolt، مترجم Lingo.dev متوافق فقط مع التطبيقات المعتمدة على Vite. لا يمكنك استخدام Next.js.
مكون <LocaleSwitcher /> لا يعمل داخل نافذة المعاينة المضمنة في Bolt.
لا يتم دعم Ollama في Bolt لأن Ollama يحتاج إلى تشغيل محليًا.

الخطوة 1. الحصول على مفتاح API

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

محرك Lingo.dev

Lingo.dev Engine هي منصتنا المستضافة التي توفر اختيار النموذج الديناميكي، والتوجيه التلقائي، وذاكرة الترجمة، ودعم المصطلحات. التسجيل مجاني ويحصل جميع المستخدمين على 10,000 رمز شهريًا للاستخدام المجاني.

للحصول على مفتاح API:

قم بتسجيل الدخول إلى Lingo.dev Engine.
انتقل إلى صفحة المشاريع.
انقر على مفتاح API > نسخ.

مزود LLM مخصص

يتكامل Lingo.dev Compiler أيضًا مع مجموعة من مزودي الخدمات الخارجيين، بما في ذلك:

Google AI
GROQ
Mistral
Ollama (غير مدعوم في Bolt)
OpenRouter

تعتمد التعليمات الدقيقة لإعداد مفتاح API على المزود.

ملاحظة: تأكد من تفعيل حسابك مع مزود LLM وقبول شروط الخدمة الخاصة بهم قبل استخدامه في Compiler.

الخطوة 2. تثبيت lingo.dev

تحتوي حزمة lingo.dev على المُترجم.

لتثبيت الحزمة:

قم بإنشاء أو فتح مشروع في Bolt.
انتقل إلى علامة التبويب Code.
انقر على Terminal.
قم بتشغيل الأمر التالي:
```
npm install lingo.dev
```

الخطوة 3. تكوين Vite

عند استخدام Vite، يجب تهيئة مترجم Lingo.dev في ملف تكوين المشروع:

إذا كنت تستخدم TypeScript، فإن ملف التكوين هو vite.config.ts.
إذا كنت تستخدم JavaScript، فإن ملف التكوين هو vite.config.js.

يمكنك تكوين سلوك المترجم أثناء التهيئة. هذا التكوين هو الذي يحدد اللغات المحلية للترجمة بينها والنموذج (النماذج) المستخدمة للتوطين.

للحصول على القائمة الكاملة للخيارات المتاحة، راجع خيارات المترجم.

محرك Lingo.dev

إذا كنت تستخدم محرك Lingo.dev، قم بتعيين models إلى "lingo.dev":

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import lingoCompiler from "lingo.dev/compiler";

const viteConfig = {
  plugins: [react()],
};

export default defineConfig(() =>
  lingoCompiler.vite({
    sourceRoot: "src",
    lingoDir: "lingo",
    sourceLocale: "en",
    targetLocales: ["es"],
    rsc: false,
    useDirective: false,
    debug: false,
    models: "lingo.dev",
  })(viteConfig),
);

مزود LLM مخصص

إذا كنت تستخدم مزود LLM مخصص، قم بتعيين models إلى كائن يربط بين اللغات المصدر والهدف مع النماذج التي يجب أن تقوم بتوطينها. على سبيل المثال، يقوم هذا التكوين بتوطين جميع السلاسل النصية باستخدام "groq:mistral-saba-24b":

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import lingoCompiler from "lingo.dev/compiler";

const viteConfig = {
  plugins: [react()],
};

export default defineConfig(() =>
  lingoCompiler.vite({
    sourceRoot: "src",
    lingoDir: "lingo",
    sourceLocale: "en",
    targetLocales: ["es"],
    rsc: false,
    useDirective: false,
    debug: false,
    models: {
      "*:*": "groq:mistral-saba-24b",
    },
  })(viteConfig),
);

الخطوة 4. تعيين متغير بيئي

لضمان وصول مترجم Lingo.dev إلى مفاتيح API للنماذج المكونة، يجب أن تكون مفاتيح API متاحة كمتغيرات بيئية.

لإعداد متغيرات البيئة في Bolt:

قم بإنشاء ملف .env.
1. انقر بزر الماوس الأيمن على جزء الملفات.
2. حدد ملف جديد.
3. أدخل .env.

أضف متغيرات البيئة ذات الصلة إلى الملف:

# Lingo.dev Engine
LINGODOTDEV_API_KEY="YOUR_API_KEY_GOES_HERE"

# Google AI
GOOGLE_API_KEY="YOUR_API_KEY_GOES_HERE"

# GROQ
GROQ_API_KEY="YOUR_API_KEY_GOES_HERE"

# Mistral
MISTRAL_API_KEY="YOUR_API_KEY_GOES_HERE"

# OpenRouter
OPENROUTER_API_KEY="YOUR_API_KEY_GOES_HERE"

ملاحظة: تقوم Bolt تلقائيًا بتشفير متغيرات البيئة. لمعرفة المزيد، راجع متغيرات البيئة (developer.stackblitz.com).

الخطوة 4. إضافة المزود

تصدّر حزمة lingo.dev مكوّن <LingoProviderWrapper />. هذا المكوّن مسؤول عن تحميل الترجمات وجعلها متاحة في جميع أنحاء التطبيق.

لاستخدام المكوّن، قم باستيراده إلى ملف src/main.tsx وقم بتغليف مكوّن <App /> به:

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App.tsx";
import { LingoProviderWrapper, loadDictionary } from "lingo.dev/react/client";

ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <LingoProviderWrapper loadDictionary={(locale) => loadDictionary(locale)}>
      <App />
    </LingoProviderWrapper>
  </React.StrictMode>,
);

(اختياري) الخطوة 5. إضافة مبدل اللغة

تصدّر حزمة lingo.dev مكون <LocaleSwitcher /> غير المنسق. يعرض هذا المكون قائمة منسدلة تسمح للمستخدمين بتعيين لغتهم المفضلة ويتذكر هذا الاختيار عند زيارات العودة.

لاستخدام المكون، قم بتضمينه كعنصر فرعي لمكون <LingoProviderWrapper /> وقم بتعيين خاصية locales إلى مصفوفة تحتوي على اللغات المصدر والهدف:

import { LocaleSwitcher } from "lingo.dev/react/client";

function App() {
  return (
    <div className="App">
      <header>
        <LocaleSwitcher locales={["en", "es"]} />
      </header>
      <main>
        <h1>Welcome to your app</h1>
        <p>This content is automatically translated</p>
      </main>
    </div>
  );
}

export default App;

تحذير: لا يعمل مكون <LocaleSwitcher /> في نافذة المعاينة المضمنة في Bolt. لرؤية المكون قيد التشغيل، انقر على أيقونة فتح المعاينة في علامة تبويب منفصلة.

الخطوة 6. البناء والاختبار

إذا لم يكن خادم التطوير قيد التشغيل بالفعل، قم بتشغيله باستخدام الأمر التالي:

npm run dev

سيقوم المترجم البرمجي تلقائيًا بما يلي:

فحص مكونات React الخاصة بك للمحتوى القابل للترجمة
استخراج مفاتيح الترجمة
إنشاء ترجمات مدعومة بالذكاء الاصطناعي
إنشاء ملفات ترجمة محسّنة في دليل lingo/

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

التكوين المتقدم: خيارات التخصيص
الأسئلة الشائعة: الأسئلة الشائعة واستكشاف الأخطاء وإصلاحها
كيف يعمل: فهم عملية البناء