در این پست وبلاگ، نحوه ساختن یک برنامه تشخیص زبان ساده به صورت محلی با استفاده از 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) {
را DetectAIComponent را ارائه می دهد LanguageDetectionComponent جایی که هیچ خطایی وجود ندارد در غیر این صورت پیغام خطا را در سیگنال خطا نمایش می دهد.
@Component({
selector: 'app-language-detection',
imports: [FormsModule, LanguageDetectionResultComponent],
template: `
Input text:
را LanguageDetectionComponent دارای سه دکمه دکمه ایجاد، سرویس تشخیص زبان را برای ایجاد آشکارساز زبان فراخوانی می کند. دکمه نابود کردن، آشکارساز زبان را از بین می برد تا منابع را آزاد کند. دکمه تشخیص زبان API تشخیص زبان را برای شناسایی سه کد زبان برتر فراخوانی می کند.
export type LanguageDetectionWithNameResult = LanguageDetectionResult & {
name: string;
}
@Component({
selector: 'app-language-detection-result',
template: `
Response:
@for (language of detectedLanguages(); track language.detectedLanguage) {
Confidence: {{ language.confidence.toFixed(3) }},
Detected Language: {{ language.detectedLanguage }},
Detected Language Name: {{ language.name }}
}
`,
})
export class LanguageDetectionResultComponent {
detectedLanguages = input<LanguageDetectionWithNameResult[]>([]);
}
را LanguageDetectionResultComponent یک مؤلفه ارائه است که اطلاعات اطمینان، کدهای زبان و نام زبان ها را نمایش می دهد.
یک سرویس برای بسته بندی API تشخیص زبان اضافه کنید
@Injectable({
providedIn: 'root'
})
export class LanguageDetectionService implements OnDestroy {
#controller = new AbortController();
#languageDetectionAPI = inject(AI_LANGUAGE_DETECTION_API_TOKEN);
#detector = signal<AILanguageDetector| undefined>(undefined);
detector = this.#detector.asReadonly();
#capabilities = signal<AILanguageDetectorCapabilities | null>(null);
capabilities = this.#capabilities.asReadonly();
async detect(query: string, topNResults = 3): Promise<LanguageDetectionWithNameResult[]> {
…
}
destroyDetector() {
…
}
private resetDetector() {
const detector = this.detector();
if (detector) {
detector.destroy();
console.log('Destroy the language detector.');
this.#detector.set(undefined);
}
}
async createDetector() {
…
}
ngOnDestroy() {
...
}
}
را LanguageDetectionService سرویس منطق API تشخیص زبان را در بر می گیرد. را createDetector متد وضعیت قابلیت را تنظیم می کند و یک آشکارساز ایجاد می کند.
async createDetector() {
if (!this.#languageDetectionAPI) {
throw new Error(ERROR_CODES.NO_API);
}
this.resetDetector();
const [capabilities, newDetector] = await Promise.all([
this.#languageDetectionAPI.capabilities(),
this.#languageDetectionAPI.create({ signal: this.#controller.signal })
]);
this.#capabilities.set(capabilities);
this.#detector.set(newDetector);
}
را destroyDetector روش وضعیت قابلیت را پاک می کند و آشکارساز را از بین می برد.
destroyDetector() {
this.#capabilities.set(null);
this.resetDetector();
}
را detect متد متن را می‌پذیرد و API را فراخوانی می‌کند تا نتایجی که با اطمینان به ترتیب نزولی مرتب شده‌اند را برگرداند. این روش سه نتیجه برتر و نام زبان آنها را برمی گرداند.
async detect(query: string, topNResults = 3) {
if (!this.#languageDetectionAPI) {
throw new Error(ERROR_CODES.NO_API);
}
const detector = this.detector();
if (!detector) {
throw new Error('Failed to create the LanguageDetector.');
}
const minTopNReesults = Math.min(topNResults, MAX_LANGUAGE_RESULTS);
const results = await detector.detect(query);
const probablyLanguages = results.slice(0, minTopNReesults);
return probablyLanguages.map((item) => ({ ...item, name: this.languageTagToHumanReadable(item.detectedLanguage) }))
}
هنگامی که سرویس از بین می رود، ngOnDestroy روش چرخه حیات برای از بین بردن آشکارساز زبان برای آزاد کردن حافظه فراخوانی می شود.
ngOnDestroy(): void {
const detector = this.detector();
if (detector) {
detector.destroy();
}
}
در نتیجه، مهندسان نرم‌افزار می‌توانند بدون راه‌اندازی سرور پشتیبان یا جمع‌آوری هزینه‌های LLM در فضای ابری، برنامه‌های هوش مصنوعی وب ایجاد کنند.
منابع:
