Twelve Labsを使用した多言語ビデオ文字起こしアプリの構築

# 必要なモジュールのインポート

from flask import Flask, render_template, request, jsonify, send_from_directory, session
from werkzeug.utils import secure_filename
import os
import uuid
from twelvelabs import TwelveLabs
from twelvelabs.models.task import Task
from dotenv import load_dotenv

load_dotenv()

# 環境変数からTwelve LabsのAPIキーを読み込む
API_KEY = os.getenv("API_KEY")

app = Flask(__name__)
app.secret_key = os.urandom(24)  

UPLOAD_FOLDER = 'uploads'
ALLOWED_EXTENSIONS = {'mp4', 'avi', 'mov'}
app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER
app.config['MAX_CONTENT_LENGTH'] = 100 * 1024 * 1024


# Twelve Labs SDK クライアントの初期化
client = TwelveLabs(api_key=API_KEY)

def allowed_file(filename):
    return '.' in filename and filename.rsplit('.', 1)[1].lower() in ALLOWED_EXTENSIONS

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

# ステータス確認用のユーティリティ関数
def on_task_update(task: Task):
    print(f"Status={task.status}")


def process_video(filepath, language, difficulty):
    try:
        if 'index_id' not in session:

	     # インデックス名の設定
            index_name = f"Translate{uuid.uuid4().hex[:8]}"

	     # エンジンの定義
            engines = [
                {
                    "name": "pegasus1.1",
                    "options": ["visual", "conversation"]
                },
                {
                    "name": "marengo2.6",
                    "options": ["visual", "conversation", "text_in_video", "logo"]
                }
            ]

	     # 設定を適用したインデックスの作成
            index = client.index.create(
                name=index_name,
                engines=engines
            )

            # インデックスIDをセッションに格納し、後の処理で再利用できるようにする
            session['index_id'] = index.id
            print(f"Created new index with ID: {index.id}")
        else:
            print(f"Using existing index with ID: {session['index_id']}")

	
	 # タスクの作成
        task = client.task.create(index_id=session['index_id'], file=filepath)
        task.wait_for_done(sleep_interval=5, callback=on_task_update)
        
        if task.status != "ready":
            raise RuntimeError(f"Indexing failed with status {task.status}")
        
        print(f"The unique identifier of your video is {task.video_id}.")

# 難易度レベルに応じたアップデートされたプロンプト
        difficulty_prompts = {
            "beginner": "Provide a simplified and easy-to-understand",
            "intermediate": "Provide a moderately detailed",
            "advanced": "Provide a comprehensive and detailed"
        }
        
	 # ユーザーフォームから取得した難易度レベルを格納
        base_prompt = difficulty_prompts.get(difficulty, difficulty_prompts["intermediate"])
	 # 生成のためのオープンエンドプロンプト
        prompt = f"Provide the Only Transcript in the Translated {language.capitalize()} Language, {base_prompt} level with the timestamp duration (in the format of ss : ss) of the Indexed Video Content."
        
        res = client.generate.text(video_id=task.video_id, prompt=prompt, temperature=0.25)
        print(res)
        return {
            'status': 'ready',
            'message': 'File processed successfully',
            'transcript': res.data,
            'video_path': f'/uploads/{os.path.basename(filepath)}'
        }
        
    except Exception as e:
        print(f"Error processing video: {str(e)}")
        return {'status': 'error', 'message': str(e)}

# ファイルアップロードを処理するルート - POSTリクエストのみを許可
@app.route('/upload', methods=['POST'])
def upload_file():

    # リクエストにファイルが含まれているか確認
    if 'file' not in request.files:
        return jsonify({'status': 'error', 'message': 'No file part'}), 400
    
    # リクエストからファイルを取得
    file = request.files['file']
    # フォームデータから抽出した言語設定、未指定の場合はデフォルトでドイツ語を設定
    language = request.form.get('language', 'german')
    difficulty = request.form.get('difficulty', 'intermediate')
    
    # ファイルが実際に選択されているか検証
    if file.filename == '':
        return jsonify({'status': 'error', 'message': 'No selected file'}), 400

    # 許可されたファイル拡張子であるか確認し、処理を進行
    if file and allowed_file(file.filename):
        filename = secure_filename(file.filename)
        filepath = os.path.join(app.config['UPLOAD_FOLDER'], filename)
        file.save(filepath)
        
	 # 設定された言語と難易度で動画処理を実行
        result = process_video(filepath, language, difficulty)

        # 処理結果をJSON応答として送信
        return jsonify(result)
    # 許可されていないファイルタイプの場合はエラーを返す
    return jsonify({'status': 'error', 'message': 'File type not allowed'}), 400

# アップロードされたファイルを提供する配信ルート
@app.route('/uploads/<filename>')
def uploaded_file(filename):
    return send_from_directory(app.config['UPLOAD_FOLDER'], filename)

 // アップロードされたファイルの検証
     function validateFile(file) {
        const validTypes = ['video/mp4', 'video/avi', 'video/quicktime'];
        const maxSize = 100 * 1024 * 1024; // 100MB

        if (!validTypes.includes(file.type)) {
            updateStatus('有効な動画ファイル（MP4, AVI, もしくは MOV）を選択してください', 'error');
            return false;
        }

        if (file.size > maxSize) {
            updateStatus('ファイルサイズは100MB未満にしてください', 'error');
            return false;
        }

        return true;
    }

    // 選択されたファイルの削除処理を行うユーティリティ関数
    function handleFileRemove(e) {
        e.preventDefault();
        fileInput.value = '';
        selectedFile.classList.add('hidden');
        uploadPrompt.textContent = '動画を選ぶか、ここにドラッグしてください';
        updateStatus('', '');
    }

    // フォーム送信の処理
    async function handleFormSubmit(e) {
        e.preventDefault();
        const formData = new FormData(e.target);
        
        if (!fileInput.files || !fileInput.files[0]) {
            updateStatus('まず始めにファイルを選択してください', 'error');
            return;
        }

        const loadingOverlay = document.getElementById('loading-overlay');
        loadingOverlay.classList.remove('hidden');
        updateStatus('ファイルをアップロードして処理中...', 'loading');
        // 過去の結果表示を切り替える
        hideResult();

        try {
         // フォームとともにPOSTリクエストを作成してエンドポイントへ送信
            const response = await fetch('/upload', {
                method: 'POST',
                body: formData
            });

	     // JSONレスポンスのパース
            const data = await response.json();
            console.log('Server response:', data);

            // アップロードと処理に成功したか確認
            if (response.ok && data.status === 'ready') {
                // 状態表示を完了に切り替えて取得データを反映表示
                updateStatus('処理が完了しました！', 'success');
                showResult();
                displayTranscript(data.transcript);
                displayVideo(data.video_path);
            } else {
                // 処理に失敗した場合はエラーをスローする
                throw new Error(data.message || 'データ処理中にエラーが発生しました');
            }
        } catch (error) {
            // エラーを検知してログを出力し表示
            console.error('Error:', error);
            updateStatus(`Error: ${error.message}`, 'error');
        } finally {
            // 処理が完了したら成否に関わらずローディング画面を非表示にする
            loadingOverlay.classList.add('hidden');
        }
    }

 // Parses a transcript string into structured data with timestamps and text
    function parseTranscript(transcript) {
        console.log('Raw transcript:', transcript);
        // Initialize Map to store unique entries (prevents duplicates)
        const entries = new Map();
        
        if (!transcript) {
            console.error('Empty transcript received');
            return [];
        }
    
        // Extract data from JSON response and handle escapes
        let transcriptText = transcript;
        try {
            if (typeof transcript === 'string' && (transcript.includes('"id":') || transcript.includes("'id':"))) {
                const dataMatch = transcript.match(/['"]data['"]\s*:\s*['"]([^]+?)['"]\s*$/);
                if (dataMatch && dataMatch[1]) {
                    transcriptText = dataMatch[1]
                        .replace(/\\n/g, '\n')
                        .replace(/\\'/g, "'")
                        .replace(/\\"/g, '"')
                        .replace(/\\\\/g, '\\');
                }
            }
        } catch (e) {
            console.error('Error parsing JSON response:', e);
        }
    
        // Different timestamp patterns
        const patterns = [
            // HH:MM - HH:MM : "text"
            /(\d{2}):(\d{2})\s*-\s*(\d{2}):(\d{2})\s*:\s*["']([^"']+)["']/g,
            // HH:MM - HH:MM: text
            /(\d{2}):(\d{2})\s*-\s*(\d{2}):(\d{2})\s*:\s*([^"\n]+)/g,
            // Simple format with quotes
            /(\d{2}):(\d{2})\s*-\s*(\d{2}):(\d{2})\s*["']([^"']+)["']/g
        ];
    
        // Try each pattern against the transcript text for parsing
        for (const pattern of patterns) {
            let match;
            while ((match = pattern.exec(transcriptText)) !== null) {
                try {
                    const [_, startMin, startSec, endMin, endSec, text] = match;
                    // Convert timestamps to seconds
                    const startTime = parseInt(startMin) * 60 + parseInt(startSec);
                    const endTime = parseInt(endMin) * 60 + parseInt(endSec);
    
                    // Skip invalid timestamps
                    if (isNaN(startTime) || isNaN(endTime)) continue;
                    // Clean up theo transcript text, if appears
                    const cleanText = text
                        .replace(/^["'\s]+|["'\s]+$/g, '')
                        .replace(/\\n/g, ' ')
                        .replace(/\*\*/g, '')
                        .replace(/\\'/g, "'")
                        .replace(/\\"/g, '"')
                        .replace(/\\\\/g, '\\')
                        .replace(/\s+/g, ' ')
                        .trim();
    
                    if (cleanText && !cleanText.includes('Note:')) {
                        const key = `${startTime}-${cleanText.substring(0, 50)}`;
                        entries.set(key, {
                            start: startTime,
                            end: endTime,
                            text: cleanText
                        });
                    }
                } catch (e) {
                    console.error('Error processing match:', e);
                    continue;
                }
            }
        }
    
        // Convert Map to Array and sort by start time
        const sortedEntries = Array.from(entries.values())
            .sort((a, b) => a.start - b.start);
        // Log processed result
        console.log('Parsed entries:', sortedEntries);
        return sortedEntries;
    }