내 제출물 개요

그레고리 게인 / 애니메이션-aov-번역기

Anime OAV(Anime 또는 기타 동영상)는 동영상의 오버레이 자막을 자동으로 번역, 전사 및 생성하는 Chrome 확장 프로그램입니다.

애니메이션(또는 기타 동영상) 번역기

특징

용법

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 Cognitive Translator, Google Cloud Translation

로드맵

코드를 수정하지 않고 복잡한 옵션을 변경하는 기능

전사 정확도 증가

전사 엔진 추가

자막 글꼴을 사용자 정의하는 기능

코드 정리!!

스크린샷

결론

3일 일하는데 나쁘지 않죠? 이것은 작업하기에 놀라운 프로젝트였습니다. 아쉽게도 해커톤에 대해 너무 늦게 알게 되었지만, 그럼에도 불구하고 즐거웠습니다.

확장 프로그램을 계속 유지하기 위한 커뮤니티의 관심이 있는 경우 확장 프로그램을 계속 업데이트하고 싶습니다. 오픈 소스 기여는 매우 권장됩니다. 읽어 주셔서 감사합니다!