AI Translator

<msc-ai-translator /> is a web component based on Chrome Built-in AI > Language Detector API and Translator API. Web developers could use <msc-ai-translator /> wrap article which want to adopt translate language feature.

Check the following demo and just press the 「Translate」 button. Then Gemini will give you a translation which the language you just picked.

Let's see what can <msc-ai-translator /> do ?

萬代南夢宮娛樂於今日（3/16）宣布，由萬代南夢宮娛樂及 FromSoftware 共同開發的全新動作角色扮演遊戲《艾爾登法環（Elden Ring）》於日本國內銷量累計突破 100 萬套，全球銷量累計突破 1200 萬套。

官方表示，為了使全世界的玩家可以持續且深入地遊玩優質的遊戲內容，《艾爾登法環》作為一款全新的動作 RPG 作品，於製作過程中完美結合了 FromSoftware 的過人開發能力，以及萬代南夢宮娛樂於海外市場的出色行銷能力。

除了 FromSoftware 最擅長的刺激動作場景，遊戲內的世界觀更是由 FromSoftware 的宮崎英高，以及以奇幻小說《冰與火之歌》系列聞名全球的喬治‧R.R‧馬丁共同製作。刺激的動作場景、壯闊的世界觀、內容豐富的廣大世界，以及高自由度的探索過程，讓玩家得以享受前所未有的遊戲體驗，本作因此獲得壓倒性的好評。除了提供 14 種語言版本 ※，於發售前舉辦的網路測試內容讓玩家更為期待，成功為《艾爾登法環》帶來突破 1200 萬套的銷售佳績。

官方表示，《艾爾登法環》今後不只是遊戲，也將作為遊戲 IP 持續發展，敬請持續關注以獲得更多消息。

Basic Usage

<msc-ai-translator /> is a web component. All we need to do is put the required script into your HTML document. Then follow <msc-ai-translator />'s html structure and everything will be all set.

Required Script

<script type="module" src="https://unpkg.com/msc-ai-translator/mjs/wc-msc-ai-translator.js"> </script>

Structure

Put <msc-ai-translator /> into HTML document. It will have different functions and looks with attribute mutation.

<msc-ai-translator> <script type="application/json"> { "l10n": { "subject": "Gemini", "introduction": "Here comes a translation.", "selectlanguage": "Select language", "translate": "Translate this article to 「{{language}}」" }, "optionslanguage": "en" } </script> <!-- Put content element(s) which like to adopt translate feature here --> <div class="intro"> 萬代南夢宮娛樂於今日（3/16）宣布，由萬代南夢宮娛樂及 ... ... ... </div> </msc-ai-translator>

Otherwise, developers could also choose remoteconfig to fetch config for <msc-ai-translator />.

<msc-ai-translator remoteconfig="https://your-domain/api-path" > ... </msc-ai-translator>

JavaScript Instantiation

<msc-ai-translator /> could also use JavaScript to create DOM element. Here comes some examples.

<script type="module"> import { MscAiTranslator } from 'https://unpkg.com/msc-ai-translator/mjs/wc-msc-ai-translator.js'; const contentElementTemplate = document.querySelector('.my-content-element-template'); // use DOM api const nodeA = document.createElement('msc-ai-translator'); document.body.appendChild(nodeA); nodeA.appendChild(contentElementTemplate.content.cloneNode(true)); nodeA.l10n = { subject: 'Gemini', introduction: 'Here comes a translation.', selectlanguage: 'Select language', translate: 'Translate this article to 「{{language}}」' }; // new instance with Class const nodeB = new MscAiTranslator(); document.body.appendChild(nodeB); nodeB.appendChild(contentElementTemplate.content.cloneNode(true)); nodeB.l10n = { subject: 'Gemini', introduction: 'Here comes a translation.', selectlanguage: 'Select language', translate: 'Translate this article to 「{{language}}」' }; // new instance with Class & default config const config = { l10n: { subject: 'Gemini', introduction: 'Here comes a translation.', selectlanguage: 'Select language', translate: 'Translate this article to 「{{language}}」' } }; const nodeC = new MscAiTranslator(config); document.body.appendChild(nodeC); nodeC.appendChild(contentElementTemplate.content.cloneNode(true)); </script>

Style Customization

Developers could apply styles to decorate <msc-ai-translator />'s looking.

<style> msc-ai-translator { /* dialog */ --msc-ai-translator-dialog-background-color: rgba(255 255 255); --msc-ai-translator-dialog-backdrop-color: rgba(35 42 49/.6); --msc-ai-translator-dialog-head-text-color: rgba(35 42 49); --msc-ai-translator-dialog-line-color: rgba(199 205 210); --msc-ai-translator-dialog-close-icon-color: rgba(95 99 104); --msc-ai-translator-dialog-close-hover-background-color: rgba(245 248 250); --msc-ai-translator-dialog-introduction-color: rgba(35 42 49); --msc-ai-translator-content-text-color: rgba(35 42 49); --msc-ai-translator-content-highlight-text-color: rgba(68 71 70); --msc-ai-translator-content-highlight-background-color: rgba(233 238 246); --msc-ai-translator-content-group-background-color: rgba(241 244 248); --msc-ai-translator-button-voice-background-color: rgba(202 230 252); --msc-ai-translator-button-voice-icon-color: rgba(8 28 53); --msc-ai-translator-button-voice-box-shadow: 0px 4px 10px rgba(0 0 0/.15); } </style>

Delevelopers could add className - align-container-size to make <msc-ai-translator />'s size same as container's size.（default is inline-size: 100% only）

<msc-ai-translator class="align-container-size"> ... </msc-ai-translator>

Otherwise, apply pseudo class ::part(trigger) to direct style the translate button.

<style> msc-ai-translator { &::part(trigger) { background: red; } &::part(trigger):hover { background: green; } } </style>

Attributes

<msc-ai-translator /> supports some attributes to let it become more convenience & useful.

disabled

Hides the translate trigger button once set. It is false by default (not set).

<msc-ai-translator disabled> ... </msc-ai-translator>

l10n

Set localization for title or action buttons.

- subject：Set dialog subject.
- introduction：Set dialog result title.
- selectlanguage：Set language select title.
- translate：Set translate trigger button's content. Web developer could add keyword {{language}} in sentence, <msc-ai-translator /> will replace it with the language you picked.

<msc-ai-translator l10n='{"subject":"Gemini","introduction":"Here comes a translation.","selectlanguage":"Select language","translate":"Translate to {{language}}"}'> ... </msc-ai-translator>

optionslanguage

Set language select's option display language. Default is "en".

<msc-ai-translator optionslanguage="zh-Hant"> ... </msc-ai-translator>

Properties

Property Name Type Description
disabled Boolean Getter / Setter disabled. Hides the translate trigger button once set. It is false by default.
l10n Object Getter / Setter localization for title or action buttons. Developers could set subject、introduction、selectlanguage and translate here.
available String Getter available. Web developers will get "no" if current browser doesn't support Build-in AI.
translation String Getter the last translation.
optionslanguage String Getter / Setter language select's option display language.

Mathod

Mathod Signature Description
translate({ content = '', useDialog = false, targetLanguage }) Go translating. This is an async function. Default will take <msc-ai-translator />'s children's text content to translate.

Developers could set useDialog to decide display translation by dialog or not.

Events

Event Signature Description
msc-ai-translator-error Fired when translate process error occured. Developers could gather message information through event.detail.
msc-ai-translator-process Fired when prompt processing.
msc-ai-translator-process-end Fired when prompt process end.

Reference