در این پست وبلاگ، نحوه ساختن یک برنامه تشخیص زبان ساده به صورت محلی با استفاده از API و Angular تشخیص زبان داخلی کروم را توضیح می دهم. ابتدا برنامه Angular API را فراخوانی می کند تا یک آشکارساز زبان ایجاد کند و از آن برای تشخیص کد زبان متن ورودی استفاده کند. سپس، یک تابع کمکی را فراخوانی می کند تا کد زبان را در نام زبان نگاشت کند.
هزینه آن صفر است زیرا برنامه به LLM هیچ فروشنده ای نیاز ندارد.
زمانی که کاربران از Chrome Dev یا Chrome Canary استفاده می کنند، این مسیر خوشحال کننده است. اگر کاربران از مرورگرهای غیر کروم یا قدیمی کروم استفاده می‌کنند، باید یک پیاده‌سازی مجدد وجود داشته باشد، مانند فراخوانی Gemma یا Gemini در Vertex AI برای بازگرداندن نام زبان متن.
Gemini Nano را روی کروم نصب کنید
Chrome Dev/Canary را به آخرین نسخه به‌روزرسانی کنید. تا لحظه نگارش این مقاله، جدیدترین نسخه Chrome Canary 133 است.
لطفاً برای ثبت نام در برنامه پیش نمایش اولیه Chrome Built-in AI به این بخش مراجعه کنید.
https://developer.chrome.com/docs/ai/built-in#get_an_early_preview
لطفاً برای فعال کردن Gemini Nano در کروم و دانلود مدل به این بخش مراجعه کنید. https://developer.chrome.com/docs/ai/get-started#use_apis_on_localhost
API تشخیص زبان را در کروم نصب کنید
- به chrome://flags/#language-detection-api بروید.
- Enabled را انتخاب کنید.
- روی راه اندازی مجدد یا راه اندازی مجدد کروم کلیک کنید.
داربست یک برنامه زاویه ای
ng new language-detector-demo
وابستگی ها را نصب کنید
npm i -save-exact -save-dev @types/dom-chromium-ai
این وابستگی تایپ TypeScript همه APIهای داخلی Chrome را فراهم می کند. بنابراین، توسعه دهندگان می توانند کدهای ظریفی برای ساخت برنامه های هوش مصنوعی در TypeScript بنویسند.
در main.ts، یک تگ مرجع برای اشاره به فایل تعریف تایپ بسته اضافه کنید.
// main.ts
///
ردیاب زبان بوت استرپ
import { InjectionToken } from '@angular/core';
export const AI_LANGUAGE_DETECTION_API_TOKEN = new InjectionToken<AILanguageDetectorFactory | undefined>('AI_LANGUAGE_DETECTION_API_TOKEN');
import { AI_LANGUAGE_DETECTION_API_TOKEN } from '../constants/core.constant';
export function provideAILanguageDetectionAPI(): EnvironmentProviders {
return makeEnvironmentProviders([
{
provide: AI_LANGUAGE_DETECTION_API_TOKEN,
useFactory: () => {
const platformId = inject(PLATFORM_ID);
const objWindow = isPlatformBrowser(platformId) ? window : undefined;
return objWindow?.ai?.languageDetector ? objWindow?.ai?.languageDetector : undefined;
},
}
]);
}
من یک ارائه دهنده محیط را برای بازگشت تعریف می کنم languageDetector نمونه در window.ai فضای نام هنگامی که کدها را تزریق می کنند AI_LANGUAGE_DETECTION_API_TOKEN آنها می توانند به API تشخیص زبان دسترسی داشته باشند تا متدهای آن را برای شناسایی کد زبان فراخوانی کنند.
// app.config.ts
export const appConfig: ApplicationConfig = {
providers: [
provideAILanguageDetectionAPI()
]
};
در پیکربندی برنامه، provideAILanguageDetectorAPI به آرایه ارائه دهندگان وارد می شود.
نسخه مرورگر و در دسترس بودن API را تأیید کنید
هوش مصنوعی داخلی Chrome آزمایشی است، اما API تشخیص زبان در کروم نسخه 129 و جدیدتر پشتیبانی می‌شود. بنابراین، من منطق اعتبارسنجی را برای اطمینان از در دسترس بودن API قبل از نمایش رابط کاربری اجرا کردم تا کاربران بتوانند متون را وارد کنند.
قوانین اعتبارسنجی عبارتند از:
- مرورگر کروم است
- نسخه مرورگر حداقل 129 است
- ai Object در فضای نام پنجره است
- وضعیت API تشخیص زبان به راحتی است
export async function checkChromeBuiltInAI(): Promise<string> {
if (!isChromeBrowser()) {
throw new Error(ERROR_CODES.UNSUPPORTED_BROWSER);
}
if (getChromVersion() < CHROME_VERSION) {
throw new Error(ERROR_CODES.OLD_BROSWER);
}
const apiName = 'Language Detection API';
if (!('ai' in globalThis)) {
throw new Error(ERROR_CODES.NO_API);
}
const languageDetector = inject(AI_LANGUAGE_DETECTION_API_TOKEN);
const status = (await languageDetector?.capabilities())?.available;
if (!status) {
throw new Error(ERROR_CODES.NO_API);
} else if (status === 'after-download') {
throw new Error(ERROR_CODES.AFTER_DOWNLOAD);
} else if (status === 'no') {
throw new Error(ERROR_CODES.NO_GEMINI_NANO);
}
return '';
}
را checkChromeBuiltInAI تابع تضمین می کند که API تشخیص زبان تعریف شده و آماده استفاده است. اگر بررسی ناموفق باشد، تابع خطا می دهد. در غیر این صورت یک رشته خالی برمی گرداند.
export function isLanguageDetectionAPISupported(): Observable<string> {
return from(checkChromeBuiltInAI()).pipe(
catchError(
(e) => {
console.error(e);
return of(e instanceof Error ? e.message : 'unknown');
}
)
);
}
را isLanguageDetectionAPISupported تابع خطا را می گیرد و پیغام خطای Observable of را برمی گرداند.
نمایش اجزای هوش مصنوعی
@Component({
selector: 'app-detect-ai',
imports: [LanguageDetectionComponent],
template: `
@let error = hasCapability();
@if (!error) {
} @else if (error !== 'unknown') {
{{ error }}
}
`
})
export class DetectAIComponent {
hasCapability = toSignal(isLanguageDetectionAPISupported(), { initialValue: '' });
}
را DetectAIComponent را ارائه می دهد LanguageDetectionComponent جایی که هیچ خطایی وجود ندارد در غیر این صورت پیغام خطا را در سیگنال خطا نمایش می دهد.
@Component({
selector: 'app-language-detection',
imports: [FormsModule, LanguageDetectionResultComponent],
template: `
Input text:
