Yayınlanma tarihi: 8 Mayıs 2025
Translator API ve Language Detector API ile içeriğinizi küresel bir kitleye ulaştırın. Language Detector API ile bir girişte hangi dilin kullanıldığını belirleyebilir, Translator API ile de algılanan dilden başka bir dile çeviri yapabilirsiniz. Her iki API de Chrome'a yerleştirilmiş yapay zeka modelleriyle istemci tarafında çalışır. Bu nedenle, sunucu maliyeti olmadığından hızlı, güvenli ve ücretsiz olarak kullanılabilir.
| API | Açıklayıcı | Web | Uzantılar | Chrome Durumu | Amaç |
|---|---|---|---|---|---|
| Translator API | MDN |  Chrome 138 |
Chrome 138 |
Görünüm | Kargoya verme amacı |
| Language Detector API | MDN | Chrome 138 |
Chrome 138 |
Görünüm | Kargoya verme amacı |
Policybazaar ve JioHotstar gibi iki büyük uluslararası işletmenin bu yerleşik API'leri nasıl kullandığını ve bunlardan nasıl yararlandığını öğrenin.
Policybazaar'ın çok dilli müşteri yardımı
Policybazaar, 97 milyondan fazla kayıtlı müşterisiyle Hindistan'ın en büyük sigorta platformudur. Hindistan, ülke genelinde konuşulan çok sayıda dil ve lehçeyle inanılmaz bir dil çeşitliliğine sahiptir.
Müşterileri arasındaki bu dil çeşitliliğini desteklemek için Policybazaar, Çeviri ve Dil Algılama API'lerini iki şekilde uyguladı: her zaman sigorta yardımı sağlama ve müşterilerinin tercih ettiği dilde pazar analizleri içeren makaleler sunma.
Finova AI ile sigorta yardımı
Sigorta, doğası gereği kişisel bir üründür ve belirli politikaların temelinde hassas bilgiler yer alır. Policybazaar'ın müşterileri genellikle plan seçimi veya planlarının kapsamı hakkında rehberlik ister. Policybazaar, birçok dil konuşan bir personele sahip olsa da saat dilimleri arasında ve mesai saatleri dışında çalışacak bir çözüme ihtiyaç duyuyordu. Bu nedenle Policybazaar, müşterilerin tercih ettiği dilde özel sigorta yardımı sunan Finova AI'yı geliştirdi.
"Chrome'un Dil Algılama ve Çeviri API'leri, müşterilerimizin farklı dil ihtiyaçlarını karşılayarak sigorta yardımımızı daha sorunsuz hale getirmemize yardımcı oldu. Bu sayede kullanıcılar, fark edilebilir gecikmeler olmadan tercih ettikleri Hint dilinde iletişim kurabilir."
—Rishabh Mehrotra, Policybazaar'da Tasarım Hayat Sigortası İş Birimi Başkanı
Ekip, bir tarayıcıda veya kullanıcının cihazında gerçekleşen çıkarım olan istemci tarafı yapay zekayı seçti. İstemci tarafı yapay zeka, sunucuda barındırılan veya sunucusuz yapay zekaya kıyasla minimum gecikme ve daha düşük maliyet sunar. Anlık sohbetlerdeki mesajların hızlı temposu ve hacmi göz önüne alındığında, sunucu tabanlı bir çözüm maliyetli ve zaman alıcı olacaktır.
Chrome'un yerleşik yapay zeka uygulaması, tarayıcıda yerleşik olarak sunulan modelleri içerir. Bu nedenle çıkarım cihaz üzerinde gerçekleştirilir. Bu, temel şartları karşılamak için etkili bir çözümdür.
// Language Detector and Translator APIs implemented with React
import { useRef } from "react";
const useService = () => {
const languageModel = useRef(null);
const translatorCapabilitiesModel = useRef(null);
const loadAllModels = async () => {
if (window?.LanguageDetector) {
languageModel.current = await window.LanguageDetector.create().catch(() => null);
}
}
// Detect what language the customer is writing
const detectLanguage = async (message) => {
if (!languageModel.current) return "";
try {
const [result] = await languageModel.current.detect(message);
const { detectedLanguage, confidence } = result || {};
return confidence * 100 > 50 ? detectedLanguage : "";
} catch (err) {
console.error(err);
return "";
}
};
// Translate messages to and from the detected language and English
const translateMessage = async (message, detectedLanguage, targetLanguage = 'en') => {
try {
const modelAvailability = await window.Translator.availability({ sourceLanguage: detectedLanguage, targetLanguage });
if (!['available', 'downloadable'].includes(modelAvailability)) {
return message;
}
const translator = await window.Translator.create({ sourceLanguage: detectedLanguage, targetLanguage });
const translatedMessage = await translator.translate(message);
return translatedMessage;
} catch (error) {
return message;
}
}
return { detectLanguage, translateMessage, loadAllModels };
}
export default useService;
Pazar analizleri için makale çevirisi
"Translator API'yi mevcut React kodumuza entegre etmek son derece kolay oldu. Müşterilerimiz ve temsilcilerimiz için hızlı çeviri sağlamak amacıyla bu istemci tarafı çözümünü tercih ettik. API,1.000 karakterlik bir makaleyi iki saniye içinde çevirebildi."
—Aman Soni, Policybazaar'da Teknoloji Lideri
Policybazaar'ın Hayat Sigortası iş kolu, müşterileri ve müşteri destek temsilcilerini piyasa koşulları hakkında bilgilendirmek için çok sayıda makale sunuyor.
Hintçe, kullanıcıları arasında yaygın olarak konuşulan bir dil olduğundan İngilizce'den Hintçe'ye makale çevirisi için Translator API'nin pilot uygulamasını başlattı.
Web sitelerine çeviri eklemek için aşağıdaki komut dosyasını kullandılar:
// Initialize the translator, setting source and target languages
var translator = null;
var translatorAvailable = false;
var languageOptionsData = { name: "Hindi", code: "hi" };
var IGNORED_TEXT_NODES = ['RSI', 'NAV'];
function checkForLanguageOptions() {
if (window.Translator) {
translatorAvailable = true;
return window.Translator.create({
sourceLanguage: 'en',
targetLanguage: languageOptionsData.code
}).then(function (createdTranslator) {
translator = createdTranslator;
});
} else {
translatorAvailable = false;
return Promise.resolve();
}
}
/**
* Translate the article content using the Translator API.
* @param {HTMLElement} container - element that holds the article content.
* @return {Promise<string>} A promise that resolves to the container's innerHTML after translation.
*/
function translateArticle(container) {
if (!translatorAvailable) { return Promise.resolve(''); }
var textNodes = getAllTextNodes(container);
var promiseChain = Promise.resolve();
textNodes.forEach(function (element) {
if (IGNORED_TEXT_NODES.indexOf(element.nodeValue) !== -1) return;
var message = element.nodeValue;
promiseChain = promiseChain.then(function () {
return translator.translate(message).then(function (translated) {
element.nodeValue = translated;
}).catch(function (error) {
console.error('Translation error:', error);
});
});
});
return promiseChain.then(function () {
return container.innerHTML;
});
}
Chrome tarafından sunulan model ve API ile müşteriler, makalelerin neredeyse anında çevirisine erişebilir.
JioHotstar, dinamik altyazı çevirisi sunuyor
Hindistan'da çok çeşitli filmler, TV programları, spor içerikleri ve orijinal içerikler sunan, birden fazla dilde yayın yapan lider dijital yayın platformu JioHotstar, altyazı çevirisini geliştirmek için Translator API'yi kullanmayı değerlendiriyor.
JioHotstar, içerikleri kendi bölgesel dillerinde tüketmeye eğilimli Hindistanlı kullanıcılara hitap eder. JioHotstar'da sunulan içerik kataloğunun genişliği göz önüne alındığında, tüm kullanıcıların bölgesel dil ihtiyaçlarını karşılamak ve böylece içerik tüketimlerini iyileştirmek zorlu bir görevdir.
Platform, Translator API ile İngilizce altyazıları kullanıcının tercih ettiği dile veya coğrafi bölgesine göre dinamik olarak çevirmeyi amaçlar. Dinamik çeviri seçeneği, eksik orijinal altyazıları otomatik olarak algılayıp Chrome'un desteklediği dillerden altyazı eklediğimiz dil seçimi menüsünde sunulur. Bu sayede, altyazıların kullanıcı deneyimi iyileştirilir ve içeriklere daha fazla kullanıcı erişebilir.
Kullanılabilir dinamik dillerin listesi, her kullanıcının tercihlerine ve coğrafi konumuna göre uyarlanmış ana listeye dayalı olarak tarayıcıda mevcut dil paketleri olup olmadığı kontrol edilerek oluşturulur. Kullanıcı bir dil seçtiğinde ve tarayıcıda ilgili dil paketi zaten indirilmişse çevrilen metin hemen görünür. Aksi takdirde, önce paket indirilir, ardından çeviri başlar.
Kullanıcı bir dil seçip çevirinin yapıldığını gördüğünde dil paketinin başarıyla indirildiğinden emin olabilir. Bu noktadan itibaren, altyazı eklenmiş tüm içerikler seçilen dilde görüntülenebilir. Bu sayede, içeriklerin tercih ettikleri dilde olup olmayacağından emin olamadıkları için göz atmakta tereddüt edebilecek kullanıcıların kafasındaki belirsizlik giderilir.
Aşağıdaki kod örneği, çeviriciyi başlatır ve ayarlar.
class SubTitleTranslator {
// Cache translator instances based on source-target language pair, so that we don't create this often for multiple contents
#translatorMap = {};
// Get or create a translator for the language pair
async #createTranslator(sourceLanguage, targetLanguage) {
const key = `${sourceLanguage}-${targetLanguage}`;
const translator = this.#translatorMap[key];
// Check if a translator already exists for a language pair in the map
if (translator) {
return translator;
}
// Check if translation is available
const isAvailable =
(await Translator.availability({ sourceLanguage, targetLanguage })) ===
"available";
if (isAvailable) {
// If available, create a new translator and cache it
this.#translatorMap[key] = await Translator.create({
sourceLanguage,
targetLanguage,
});
return this.#translatorMap[key];
}
return null;
}
// Translate text
async #translateText(text, sourceLanguage, targetLanguage) {
const translator = await this.#createTranslator(
sourceLanguage,
targetLanguage
);
// Returns the given input text if translator is unavailable
if (!translator) {
return text;
}
return await translator.translate(text);
}
// Public method to get a reusable translation function for a specific language pair.
getTranslatorFor(sourceLanguage, targetLanguage) {
return async (text) => {
try {
return this.#translateText(text, sourceLanguage, targetLanguage);
} catch {
return text;
}
};
}
}
Ardından, çevrilmiş altyazılar oluşturmak için Translator API'yi kullanır.
const translatorFactory = new SubTitleTranslator();
/* Accept English input and translate to Tamil.*/
const translateToTamil = translatorFactory.getTranslatorFor('en','ta');
/* Accept English text as input and translate it to Japanese. */
const translateToJapanese = translatorFactory.getTranslatorFor('en','ja');
/* Accept English input and returns English, as `JTA` is not a valid language code. */
const translateToUnknownLanguage = translatorFactory.getTranslatorFor('en','jta');
Son oluşturulan altyazıları güncelleyen birkaç ek işlev vardır.
/* updateSubtitle is the internal function that updates the rendered subtitle. */
translateToTamil('hi').then(result => updateSubtitle(result))
translateToJapanese('hi').then(result => updateSubtitle(result))
translateToUnknownLanguage('hi').then(result => updateSubtitle(result))
En iyi uygulamalar
Çeviri ve Dil Algılama API'lerinin bu kullanımları farklı olsa da, birçok ortak en iyi uygulama vardır:
- Dil bilgisi ve bağlamın korunmasını sağlamak için çevrilen metinlerle ilgili kalite değerlendirmeleri yapın. Uygunsa kullanıcılara çeviriyle ilgili geri bildirimde bulunma seçeneği sunabilirsiniz.
- Yanıt verme durumunu belirtmek için dönen simge, yükleyici veya ilerleme çubuğu gibi bir ilerleme durumu kullanıcı arayüzü sağlayın. Örneğin Policybazaar, kullanıcının girişini işlediğini göstermek için chatbot'ta bir yazma göstergesi kullandı.
Sonuçlar ve öneriler
Bu API'lerle yeni bir şey mi geliştiriyorsunuz? Bu bilgileri X'te@ChromiumDev veya LinkedIn'de Chromium for Developers adresinden bizimle paylaşabilirsiniz.
Kaynaklar
- Chrome'da yerleşik API'leri kullanmaya başlama
- Language Detector API hakkında daha fazla bilgi edinin.
- Translator API hakkında daha fazla bilgi edinin.
- Blogger'ları güçlendirme: CyberAgent, içerik oluşturmayı geliştirmek için yerleşik yapay zekayı nasıl kullanıma sundu?
Teşekkür
Bu makalenin yazılmasına ve incelenmesine yardımcı olan Policybazaar'dan Rishabh Mehrotra ve Aman Soni'ye, JioHotstar'dan Bhuvaneswaran Mohan ve Ankeet Maini'ye, Alexandra Klepper'a, Thomas Steiner'a ve Kenji Baheux'e teşekkür ederiz.