distil-whisperでリアルタイム文字起こししたテキストをリアルタイム翻訳する方法

Last updated at 2023-12-28Posted at 2023-12-28

前回のお話

こちらで軽量Whisperのお話を書いています。今回はその続きです。

やりたかったこと

会議の音声をリアルタイムで認識して文字起こしをするだけであればTeamsなどでもできますが、リアルタイムな翻訳はPro機能なので使えず手元で同時通訳を実現したいなと思い今回の記事作成に至りました。

必要なライブラリ

このプログラムを動かすためには以下のライブラリが必要です。

pip install flask

ファイルとフォルダ構造

├── webApp.py
├── uploads        # 前回記事のDistil-whisperの文字起こしテキスト出力先
└── templates
    └── index.html

実装コード

以下が実装コードです。

webApp.py

from flask import Flask, render_template, request, jsonify
import os
import shutil
import threading
import time

app = Flask(__name__)

# 監視中のファイルパス
watched_file_path = None
# ファイル内容のキャッシュ
file_content_cache = []

def get_last_10_lines(file_path):
    try:
        with open(file_path, 'r', encoding='utf-8') as file:
            lines = file.readlines()
            return lines[-15:]
    except:
        return []

def watch_file():
    global file_content_cache
    while True:
        if watched_file_path and os.path.exists(watched_file_path):
            file_content_cache = get_last_10_lines(watched_file_path)
        time.sleep(1)

@app.route('/')
def index():
    return render_template('index.html')

@app.route('/upload', methods=['POST'])
def upload_file():
    global watched_file_path
    file = request.files['file']
    upload_folder = 'uploads'
    os.makedirs(upload_folder, exist_ok=True)
    watched_file_path = os.path.join(upload_folder, file.filename)
    file.save(watched_file_path)
    return jsonify(success=True)

@app.route('/update', methods=['GET'])
def update_file():
    return jsonify(file_content_cache)

if __name__ == '__main__':
    threading.Thread(target=watch_file, daemon=True).start()
    app.run(debug=True)

templates/index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>File Upload</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <style>
        #drop_area {
            width: 400px;
            height: 50px;
            border: 2px dashed #000;
            margin: 20px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .new-line {
            color: blue; /* 新しい行は青色で表示 */
        }
        .old-line {
            color: black; /* 既存の行は黒色で表示 */
        }
    </style>
</head>
<body>
    <div id="drop_area">ここにファイルをドロップ</div>
    <div id="file_content"></div>

    <script>
        let lastContent = [];

        $(function() {
            $('#drop_area').on('dragover', function(e) {
                e.stopPropagation();
                e.preventDefault();
                e.originalEvent.dataTransfer.dropEffect = 'copy';
            });

            $('#drop_area').on('drop', function(e) {
                e.stopPropagation();
                e.preventDefault();
                let files = e.originalEvent.dataTransfer.files;
                uploadFile(files[0]);
            });

            setInterval(updateFileContent, 1000); // 1秒ごとにファイル内容を更新
        });

        function uploadFile(file) {
            let formData = new FormData();
            formData.append('file', file);

            $.ajax({
                url: '/upload',
                type: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                success: function(response) {
                    if (response.success) {
                        updateFileContent(); // 即座にファイル内容を更新
                    }
                }
            });
        }

        function updateFileContent() {
            $.ajax({
                url: '/update',
                type: 'GET',
                success: function(data) {
                    displayFileContent(data);
                }
            });
        }

        function displayFileContent(data) {
            const contentDiv = $('#file_content');
            contentDiv.empty(); // 既存の内容をクリア

            // 新しく追加された行を青色で、それ以外の行を黒色で表示
            data.forEach((line, index) => {
                let lineClass = (index === data.length - 1) ? 'new-line' : 'old-line';
                contentDiv.append($('<div>').addClass(lineClass).text(line));
            });

            // 現在の内容を保存
            lastContent = data.slice();
        }

    </script>
</body>
</html>

コードの解説

このFlaskアプリケーションは、ユーザーがドラッグ＆ドロップでファイルをアップロードすると、そのファイルの内容をリアルタイムに監視し、結果をブラウザに表示します。アップロードされるファイルは、前述の「distil-whisper」を用いたリアルタイム音声認識アプリケーションによって生成されるものとします。

Flaskアプリケーションの主要部分（webApp.py）

Flaskアプリケーションの主要部分では、以下の3つのエンドポイントが提供されています。

/: ホームページ。index.htmlが表示されます。
/upload: ファイルのアップロードを受け付けるエンドポイント。アップロードされたファイルはuploadsフォルダに保存され、その内容がリアルタイムに監視されます。
/update: ファイルの内容の更新をクライアントに通知するエンドポイント。最新のファイル内容がJSON形式で返されます。