私の提出の概要

グレゴヤギネス / アニメAOV翻訳

アニメOAV（アニメまたは他のビデオ）は自動的に翻訳、転写、およびビデオのために字幕を生成するクロム拡張機能です。

アニメ（または他のビデオ）翻訳者

機能

用途

const translator = 
TranslatorFactory.createTranslator(Translators.AZURE);
...
const translator = 
TranslatorFactory.createTranslator(Translators.GOOGLE);

Clone the repo: https://github.com/gregorygaines/anime-aov-translator.git

Start extension dev server: npm run start

Load extension into browser by

1. Open the Extension Management page by navigating to chrome://extensions.
2. Enable Developer Mode by clicking the toggle switch next to Developer mode.
3. Click the LOAD UNPACKED button and select the extension directory dist.

風変わりな

The project is in early infancy and the…

テックスタック

• TailwindCSS - Ui style
• Chrome extension
• React.js - Front-end library
• Deepgram - Transcriber
• Azure / Google - Translator
• Webpack - Code bundler

提出カテゴリ

アクセシビリティ

なぜ

Sometimes my favorite or interesting shows are produced outside my native language and my only options are to wait for an official or fan-made translation.

I wondered what if I had a way to automatically translate videos outside my native language so I can enjoy them.

Translation isn't the only problem I've had. Sometimes audio can be hard to understand, and I think, if only I had a way to transcribe what everyone is saying.

My extension solves both of the issues above and increases awareness of issues that come with accessibility.

どうやって働くの

用語

Below is a short description on how a chrome extension works.

Chrome extension diagram by

• Content Scripts - Code that runs on the page the user is currently viewing. Commonly used for operating on the DOM and interacting with the current page. Because of security concerns, some actions can't be preformed on content scripts and must be done in a background script.

• Background Scripts - Code that runs in a service worker in the background and can't interact with the current page or DOM. Commonly used for long lived tasks or managing state across the extension. It can be thought of as a back-end of sorts for the extension. To communicate, the background and content scripts can register listeners to pass messages between each other. Since background scripts can preform actions content scripts can't, certain actions are executed there then passed to the content script.

翻訳/転写

The background script captures the current tabs audio then passes the audio to Deepgram for transcription.

const transcriber = 
SpeechRecognizerFactory
.createSpeechRecognizer(SpeechRecognizers.Deepgram);

オーディオを転写した後、拡張モジュールのテキストを翻訳するには、複数の翻訳エンジンを使用します.今のところ、AzureとGoogleだけが実装されています.

const translator = 
TranslatorFactory.createTranslator(Translators.AZURE);
...
const translator = 
TranslatorFactory.createTranslator(Translators.GOOGLE);

翻訳されたテキストはメッセージとしてクライアントに送られます.

const clientMessage = {
  command: "draw_text",
  data: translated,
}

chrome.tabs.sendMessage(activeTabId, clientMessage, (response) => {
  console.log("Sending text to client: " + translated);
});

字幕

必要な構成のため、特定のドメインは、翻訳/転写のために記載されている白です.クライアントがホワイトリストされたドメインに遭遇すると、コンテンツスクリプトはビデオプレーヤーコンテナーとそのディメンションと位置を見つけるために必要な構成をプルし、字幕を表示するためのキャンバスオーバーレイを描画します.

const videoContainerSelector = {
  crunchyroll: "#showmedia_video_box",
}

const videoContainer = queryElement(crunchyroll);
const containerPos = getPos(videoContainer);
const containerDim = getDim(videoContainer);

renderSubtitleCanvas(containerPos, containerDim);

コンテンツスクリプトは、バックグラウンドスクリプトから字幕を聞きます.

chrome.runtime.onMessage.addListener(
  (request, sender, sendResponse) => {
    switch (request.command) {
      case 'draw_text':
        console.log("Received command to draw text: " + request.data);
        drawTextToCanvas(request.data);
        sendResponse(true);
        return true;

      default:
        console.log("Unknown client command: " + request.command);
    }

    return true;
  },
);

機能

オーディオ転写

テキスト翻訳

は、ビデオ

に字幕を与えます
マルチテキスト翻訳エンジン:Azure認知翻訳、Google雲翻訳

ロードマップ

コード

を変更せずに複雑なオプションを変更する機能

は、転写精度

を増やします

は、より多くの転写エンジン

を加えます
サブタイトルフォントをカスタマイズする

能力

クリーンアップコード!

スクリーンショット

結論

あまりにも悪い3日間の仕事のハウ?これは驚くべきプロジェクトでした.悲しいことに、私はハッカートンについては遅すぎました.
私は、それを生き続けるためにコミュニティ関心があるならば、拡大を更新し続けたいです.オープンソースの貢献は非常に奨励されます.読書ありがとう!