🚀 强大的 YouTube 视频翻译工具 | ✨ 实时英译中 | 🎯 智能AI翻译 | 🔊 自然语音朗读 | 📝 内容智能总结 | 💫 支持多种AI模型和语音引擎 | 🎨 优雅界面设计 | 让观看YouTube视频更轻松愉快!
// ==UserScript==
// @name 🎬 YouTube AI 翻译助手 Pro - 实时翻译+AI配音
// @namespace http://tampermonkey.net/
// @version 1.0.2
// @license MIT
// @author wangwangit
// @description 🚀 强大的 YouTube 视频翻译工具 | ✨ 实时英译中 | 🎯 智能AI翻译 | 🔊 自然语音朗读 | 📝 内容智能总结 | 💫 支持多种AI模型和语音引擎 | 🎨 优雅界面设计 | 让观看YouTube视频更轻松愉快!
// @match *://*.youtube.com/*
// @grant GM_xmlhttpRequest
// @connect xxxx
// @connect xxxx
// @connect api.x.ai
// @run-at document-end
// ==/UserScript==
(function() {
'use strict';
// 1. 首先声明全局配置变量
let CONFIG;
// 配置管理器
class ConfigManager {
static CONFIG_KEY = 'youtube_config';
static getDefaultConfig() {
return {
AI_MODELS: {
TYPE: 'OPENAI',
XAI: {
API_KEY: '你的密钥',
API_URL: '你的api地址,注意,要携带/v1/chat/completions',
MODEL: 'grok-beta',
STREAM: false
},
OPENAI: {
API_KEY: '你的密钥',
API_URL: '你的api地址,注意,要携带/v1/chat/completions',
MODEL: '你想要使用的模型名称',
STREAM: true
}
},
TTS: {
TYPE: 'BROWSER',
VITS: {
BASE_URL: 'xxxx',
DEFAULT_VOICE: "char_model/原神/珊瑚宫心海/牌局的形势千变万化，想要获胜的话…有时候也必须兵行险着。.wav"
},
BROWSER: {
RATE: 1.0,
PITCH: 1.0,
VOLUME: 1.0,
VOICE: null
}
},
CACHE: {
AUDIO_SIZE: 500,
TRANS_SIZE: 500
}
};
}
static saveConfig(config) {
try {
const configString = JSON.stringify(config);
localStorage.setItem('youtubeTranslatorConfig', configString);
console.log('配置已保存:', config);
} catch (error) {
console.error('保存配置失败:', error);
}
}
static loadConfig() {
try {
const savedConfig = localStorage.getItem('youtubeTranslatorConfig');
if (savedConfig) {
const parsedConfig = JSON.parse(savedConfig);
// 合并保存的配置和默认配置
CONFIG = {...this.getDefaultConfig(), ...parsedConfig};
console.log('已加载保存的配置:', CONFIG);
}
return CONFIG;
} catch (error) {
console.error('加载配置失败:', error);
return CONFIG;
}
}
}
// 初始化默认配置
CONFIG = ConfigManager.getDefaultConfig();
// 加载保存的配置
CONFIG = ConfigManager.loadConfig();
// 2. 创建基础缓存类
class BaseCache {
/**
* @description: 构造函数，初始化缓存。
* @param {number} capacity - 缓存容量。
* @param {string} prefix - 缓存键前缀。
*/
constructor(capacity, prefix) {
this.cache = new LRUCache(capacity);
this.prefix = prefix;
}
/**
* @description: 生成缓存键。
* @param {string} text - 用于生成缓存键的文本。
* @param {number} startTime - 开始时间。
* @return {string} - 生成的缓存键。
*/
generateCacheKey(startTime) {
const uid = getUid();
const key = `${this.prefix}${uid}${startTime}`;
// console.log('生成缓存键:', {
// 前缀: this.prefix,
// 开始时间: startTime,
// 原始文本: text.slice(0, 30) + '...',
// 缓存键: key
// });
return key;
}
/**
* @description: 将缓存保存到 localStorage。
* @param {string} storageKey - localStorage 键。
* @return {Promise<void>}
* @throws {Error} - 保存缓存失败时抛出异常。
*/
async saveToStorage(storageKey) {
try {
const cacheData = {};
this.cache.cache.forEach((value, key) => {
cacheData[key] = value;
});
localStorage.setItem(storageKey, JSON.stringify(cacheData));
// console.log('cache', '缓存已保存:', {
// 缓存条目数: Object.keys(cacheData).length,
// 存储大小: JSON.stringify(cacheData).length + ' bytes'
// });
} catch (error) {
console.log('error', '保存缓存失败:', error);
}
}
/**
* @description: 从 localStorage 加载缓存。
* @param {string} storageKey - localStorage 键。
* @return {Promise<null|object>} - 加载的缓存数据，如果未找到则返回 null。
* @throws {Error} - 加载缓存失败时抛出异常。
*/
async loadFromStorage(storageKey) {
try {
console.log('loadFromStorage', '开始加载缓存:', storageKey);
const cacheData = localStorage.getItem(storageKey);
if (!cacheData) {
console.log('warning', '未找到缓存数据');
return null;
}
const parsedCache = JSON.parse(cacheData);
Object.entries(parsedCache).forEach(([key, value]) => {
this.cache.put(key, value);
});
// console.log('success', '已加载缓存:', {
// 缓存条目数: this.cache.size,
// 缓存容量: this.cache.capacity
// });
} catch (error) {
console.log('error', '加载缓存失败:', error);
}
}
}
// LRU缓存实现
class LRUCache {
/**
* @description: 构造函数，初始化LRU缓存。
* @param {number} capacity - 缓存容量。
*/
constructor(capacity) {
this.capacity = capacity;
this.cache = new Map();
// 最大历史记录数
this.maxHistorySize = 10;
}
/**
* @description: 获取缓存值。
* @param {string} key - 缓存键。
* @return {any} - 缓存值，如果未找到则返回 null。
*/
get(key) {
if (!this.cache.has(key)) return null;
const value = this.cache.get(key);
this.cache.delete(key);
this.cache.set(key, value); // 更新访问时间
return value;
}
/**
* @description: 设置缓存值。
* @param {string} key - 缓存键。
* @param {any} value - 缓存值。
* @return {void}
*/
put(key, value) {
if (this.cache.has(key)) {
this.cache.delete(key);
} else if (this.cache.size >= this.capacity) {
// 移除最近最少使用的条目
this.cache.delete(this.cache.keys().next().value);
}
this.cache.set(key, value);
}
/**
* @description: 检查缓存中是否存在键。
* @param {string} key - 缓存键。
* @return {boolean} - 如果存在则返回 true，否则返回 false。
*/
has(key) {
return this.cache.has(key);
}
/**
* @description: 清空缓存。
* @return {void}
*/
clear() {
this.cache.clear();
}
}
// 音频管理器
class AudioManager extends BaseCache {
constructor() {
super(CONFIG.CACHE.AUDIO_SIZE, 'audio' + getUid());
this.audioContext = new (window.AudioContext || window.webkitAudioContext)();
this.db = null;
this.dbName = 'YTTranslatorAudio';
this.storeName = 'audioBuffers';
this.initDB();
// 添加浏览器TTS初始化
this.synth = window.speechSynthesis;
this.currentUtterance = null;
}
/**
* @description: 停止当前音频播放。
* @return {void}
*/
async stopVideo() {
if (CONFIG.TTS.TYPE === 'BROWSER' && this.currentUtterance) {
this.synth.cancel();
this.currentUtterance = null;
this.isPlaying = false;
} else if (this.currentSource) {
try {
this.currentSource.stop();
this.currentSource.disconnect();
this.currentSource = null;
this.isPlaying = false;
console.log('停止当前音频播放');
} catch (error) {
console.error('停止音频失败:', error);
}
}
}
/**
* @description: 处理 SSE 响应
* @param {string} eventId - 事件ID
* @return {Promise<string>} - 音频URL
*/
async handleSSEResponse(eventId) {
return new Promise((resolve, reject) => {
let xhr = new XMLHttpRequest();
xhr.open('GET', `${CONFIG.TTS.EDGE.BASE_URL}/call/textToSpeech/${eventId}`, true);
xhr.setRequestHeader('Accept', 'text/event-stream');
xhr.setRequestHeader('Cache-Control', 'no-cache');
let buffer = '';
xhr.onreadystatechange = function() {
if (xhr.readyState === 3) {
let newData = xhr.responseText.substring(buffer.length);
buffer = xhr.responseText;
let lines = newData.split('\n');
lines.forEach(line => {
if (line.startsWith('data:')) {
try {
const jsonData = JSON.parse(line.slice(5));
if (Array.isArray(jsonData) && jsonData[0]?.path) {
xhr.abort();
const url = `${CONFIG.TTS.EDGE.BASE_URL}/file=${jsonData[0].path}`;
resolve(url);
}
} catch (e) {
console.log('解析SSE数据失败:', e);
}
}
});
}
};
xhr.onerror = reject;
xhr.send();
// 30秒超时
setTimeout(() => {
xhr.abort();
reject(new Error('SSE请求超时'));
}, 300000);
});
}
/**
* @description: 播放音频。
* @param {AudioBuffer} buffer - 要播放的 AudioBuffer。
* @param {number} startTime - 开始时间 (可选)。
* @return {Promise<void>} - 播放完成的 Promise。
* @throws {Error} - 播放失败时抛出异常。
*/
async playAudio(buffer) {
if (CONFIG.TTS.TYPE === 'BROWSER') {
return new Promise((resolve, reject) => {
try {
this.synth.cancel(); // 停止当前播放
console.log('浏览器TTS模式下直接返回翻译文本');
const utterance = new SpeechSynthesisUtterance(buffer);
this.currentUtterance = utterance;
// 设置语音参数
utterance.lang = 'zh-CN';
utterance.rate = CONFIG.TTS.BROWSER.RATE;
utterance.pitch = CONFIG.TTS.BROWSER.PITCH;
utterance.volume = CONFIG.TTS.BROWSER.VOLUME;
// 设置选中的语音
if (CONFIG.TTS.BROWSER.VOICE) {
const voices = speechSynthesis.getVoices();
const selectedVoice = voices.find(voice =>
voice.name === CONFIG.TTS.BROWSER.VOICE.name &&
voice.lang === CONFIG.TTS.BROWSER.VOICE.lang
);
if (selectedVoice) {
utterance.voice = selectedVoice;
}
}
utterance.onend = () => {
this.isPlaying = false;
this.currentUtterance = null;
resolve();
};
utterance.onerror = (error) => {
this.isPlaying = false;
this.currentUtterance = null;
reject(error);
};
this.isPlaying = true;
this.synth.speak(utterance);
} catch (error) {
this.isPlaying = false;
this.currentUtterance = null;
reject(error);
}
});
} else {
return new Promise((resolve, reject) => {
try {
//打印当前播放器状态
//console.log('当前播放器状态:', this.shouldPlay);
// 检查是否应该播放 - 修改逻辑
// if (!this.shouldPlay) { // 改为检查 !this.shouldPlay
// console.log('播放已停止，跳过音频播放');
// return resolve(); // 直接返回，不播放音频
// }
// 停止当前播放
// if (this.currentSource) {
// console.log('我要停止当前播放');
// this.stop();
// }
// 创建新的音频源
const source = this.audioContext.createBufferSource();
source.buffer = buffer;
source.connect(this.audioContext.destination);
this.currentSource = source;
this.isPlaying = true;
// 监听播放完成
source.onended = () => {
this.isPlaying = false;
this.currentSource = null;
resolve();
};
// 开始播放
source.start(0);
} catch (error) {
this.isPlaying = false;
this.currentSource = null;
reject(error);
}
});
}
}
// 初始化IndexedDB
async initDB() {
return new Promise((resolve, reject) => {
const request = indexedDB.open(this.dbName, 1);
request.onerror = () => {
console.error('打开数据库失败:', request.error);
reject(request.error);
};
request.onsuccess = () => {
this.db = request.result;
console.log('数据库连接成功');
resolve();
};
request.onupgradeneeded = (event) => {
const db = event.target.result;
if (!db.objectStoreNames.contains(this.storeName)) {
db.createObjectStore(this.storeName);
console.log('创建音频缓存存储空间');
}
};
});
}
/**
* @description: 将 AudioBuffer 序列化为可存储的对象。
* @param {AudioBuffer} audioBuffer - 要序列化的 AudioBuffer。
* @return {object} - 序列化后的对象。
*/
serializeAudioBuffer(audioBuffer) {
const channelData = [];
for (let i = 0; i < audioBuffer.numberOfChannels; i++) {
channelData.push(Array.from(audioBuffer.getChannelData(i)));
}
return {
channelData,
sampleRate: audioBuffer.sampleRate,
length: audioBuffer.length,
duration: audioBuffer.duration,
numberOfChannels: audioBuffer.numberOfChannels
};
}
/**
* @description: 将序列化后的对象反序列化为 AudioBuffer。
* @param {object} data - 序列化后的对象。
* @return {Promise<AudioBuffer>} - 反序列化后的 AudioBuffer。
*/
async deserializeAudioBuffer(data) {
const audioBuffer = this.audioContext.createBuffer(
data.numberOfChannels,
data.length,
data.sampleRate
);
for (let i = 0; i < data.numberOfChannels; i++) {
const channelData = new Float32Array(data.channelData[i]);
audioBuffer.copyToChannel(channelData, i);
}
return audioBuffer;
}
/**
* @description: 将音频数据保存到 IndexedDB。
* @param {string} key - 缓存键。
* @param {AudioBuffer} audioBuffer - 要保存的 AudioBuffer。
* @return {Promise<void>} - 保存完成的 Promise。
* @throws {Error} - 保存失败时抛出异常。
*/
async saveToIndexedDB(key, audioBuffer) {
if (!this.db) await this.initIndexedDB();
return new Promise((resolve, reject) => {
const transaction = this.db.transaction([this.storeName], 'readwrite');
const store = transaction.objectStore(this.storeName);
const serializedData = this.serializeAudioBuffer(audioBuffer);
const request = store.put(serializedData, key);
request.onsuccess = () => {
console.log('音频数据已保存到 IndexedDB:', key);
resolve();
};
request.onerror = () => {
console.error('保存音频数据失败:', request.error);
reject(request.error);
};
});
}
// 从 IndexedDB 加载
async loadFromIndexedDB(key) {
if (!this.db) await this.initIndexedDB();
return new Promise((resolve, reject) => {
const transaction = this.db.transaction([this.storeName], 'readonly');
const store = transaction.objectStore(this.storeName);
const request = store.get(key);
request.onsuccess = async () => {
if (request.result) {
try {
const audioBuffer = await this.deserializeAudioBuffer(request.result);
// console.log('从 IndexedDB 加载音频数据成功:', key);
resolve(audioBuffer);
} catch (error) {
console.error('反序列化音频数据失败:', error);
reject(error);
}
} else {
resolve(null);
}
};
request.onerror = () => {
console.error('加载音频数据失败:', request.error);
reject(request.error);
};
});
}
// 获取音频
async getAudio(newSubtitles, startTime) {
if (CONFIG.TTS.TYPE === 'BROWSER') {
// 浏览器TTS模式下直接返回翻译文本
return newSubtitles.translation;
}
const cacheKey = this.generateCacheKey(startTime);
// 检查缓存
try {
const cached = await this.loadFromIndexedDB(cacheKey);
if (cached) {
console.log('使用缓存的音频:', cacheKey);
return cached;
}
} catch (error) {
console.error('读取音频缓存失败:', error);
}
// 获取新音频
try {
const audioBuffer = await this.fetchAudioWithRetry(newSubtitles.translation, newSubtitles.duration);
// 保存到缓存
await this.saveToIndexedDB(cacheKey, audioBuffer);
return audioBuffer;
} catch (error) {
console.error('获取音频失败:', error);
throw error;
}
}
/**
* @description: 使用重试机制获取音频。
* @param {string} text - 要转换为音频的文本。
* @param {number} duration - 预期音频持续时间。
* @return {Promise<AudioBuffer|null>} - 获取的 AudioBuffer，如果失败则返回 null。
*/
async fetchAudioWithRetry(text, duration) {
console.log('开始获取音频:', {
文本: text,
持续时间: duration
});
// 添加更细致的语速调整
const wordsCount = text.length;
const avgCharDuration = 0.2; // 每个字符的平均时长
const expectedDuration = wordsCount * avgCharDuration;
let speed_factor = duration ? expectedDuration / duration : 1.0;
// 使用更平滑的映射函数
if (speed_factor < 0.8) {
speed_factor = 0.8 + (speed_factor / 0.8) * 0.2;
} else if (speed_factor > 1.2) {
speed_factor = 1.2 - (1.2 / speed_factor) * 0.2;
}
// 添加音频时长验证
const buffer = await this.fetchAudio(text, speed_factor);
return buffer;
}
/**
* @description: 获取音频数据。
* @param {string} text - 要转换为音频的文本。
* @param {number} speed_factor - 语速因子。
* @return {Promise<AudioBuffer>} - 获取的 AudioBuffer。
* @throws {Error} - 获取音频失败时抛出异常。
*/
async fetchAudio(text, speed_factor = 1.0) {
if (CONFIG.TTS.TYPE === 'EDGE') {
return await this.fetchAudioEdge(text);
} else {
// 原有的 VITS 方法
const params = new URLSearchParams({
text: text,
text_lang: "zh",
ref_audio_path: CONFIG.TTS.VITS.DEFAULT_VOICE,
prompt_lang: "zh",
prompt_text: "牌局的形势千变万化，想要获胜的话…有时候也必须兵行险着。",
top_k: "5",
top_p: "1",
temperature: "0.8",
speed_factor: speed_factor,
fragment_interval: "0.3"
});
return new Promise((resolve, reject) => {
GM_xmlhttpRequest({
method: 'GET',
url: `${CONFIG.TTS.VITS.BASE_URL}?${params.toString()}`,
responseType: 'arraybuffer',
headers: {
'Accept': '*/*',
'Origin': 'https://xxxx',
'Referer': 'https://xxxx'
},
onload: async (response) => {
try {
if (response.status !== 200) {
throw new Error(`HTTP Error: ${response.status}`);
}
const audioBuffer = await this.audioContext.decodeAudioData(response.response);
resolve(audioBuffer);
} catch (error) {
reject(error);
}
},
onerror: reject
});
});
}
}
// 批量预加载音频
async preloadAudioBatch(subtitles, concurrentLimit = 3) {
// 创建任务数组
const tasks = subtitles.map(sub => ({
text: sub.translation,
startTime: sub.startTime
}));
// 并发控制
const results = [];
for (let i = 0; i < subtitles.length; i += concurrentLimit) {
const batch = subtitles.slice(i, i + concurrentLimit);
const promises = batch.map(task =>
this.getAudio(task, task.startTime)
.catch(error => {
console.error('音频加载失败:', error);
return null;
})
);
const batchResults = await Promise.all(promises);
results.push(...batchResults);
// 简单进度显示
console.log(`音频加载进度: ${i + batch.length}/${tasks.length}`);
// 等待500毫秒
await new Promise(resolve => setTimeout(resolve, 500));
}
return results;
}
}
// 添加翻译管理器类
class TranslationManager extends BaseCache {
constructor() {
super(CONFIG.CACHE.TRANS_SIZE, 'trans' + getUid());
this.hasCache = false; // 添加缓存标志
this.currentModel = CONFIG.AI_MODELS.TYPE;
this.newSubtitles = [];
// 定期保存缓存
// setInterval(() => this.saveToStorage('ytTranslatorTransCache' + getUid()), 30000);
this.loadFromStorage('ytTranslatorTransCache' + getUid());
}
// 根据不同模型构建请求体
buildRequestBody(text, modelConfig) {
const systemPrompt = `你是一位资深的Netflix字幕翻译专家，精通英汉翻译，对影视作品的文化内涵和语言特点有深刻理解。你的任务是将英文Netflix字幕翻译成自然流畅、符合中文表达习惯的中文字幕，并对字幕进行必要的合并和调整，以提升观众的观影体验。
**输入格式**：
每行字幕格式为："时间戳@@@英文字幕"
**输出格式**：
每行字幕格式为："时间戳@@@合并后的英文字幕@@@合并后的中文翻译"
**翻译流程**：
1. **字幕合并与优化**：
- 分析连续最多3行的字幕及其上下文，酌情合并：
- 同一人物的连续短句，构成完整表达。
- 对前一句的补充说明或解释。
- 表达并列关系或因果关系的短句。
- 不合并的情况：
- 不同人物的对话。
- 场景切换或情绪转变。
- 语气词或简短感叹词需单独保留以传达情感。
- **合并后中文翻译应尽量控制在20-30个汉字之间**。如超过30个汉字，请尝试拆分，并根据句意调整时间戳，确保每句长度合理，避免字幕过长影响观影体验。
2. **翻译要求**：
- **准确传达**原文的语气、情感、文化背景和潜台词。
- **译文自然流畅**，符合中文表达习惯。
- **妥善处理**俚语、习语、文化特定表达、语气词、情感表达等。
- **保持对话连贯性**，处理好人称代词和指代关系，确保人物语气一致。
- 避免误译、漏译、错译。
3. **输出规范**：
- **格式**："时间戳@@@合并后的英文字幕@@@合并后的中文翻译"
- **每条字幕独立一行**，不添加任何额外注释或说明。
- **时间戳格式正确**，保留3位小数。
**示例**：
*正面示例*：
输入：
01.234@@@What are you doing?
01.876@@@I'm reading a book.
02.345@@@It's about a detective.
输出：
01.234@@@What are you doing? I'm reading a book. It's about a detective.@@@你在做什么？我在读一本关于侦探的书。
输入：
03.456@@@The car exploded.
04.123@@@Run!
输出：
03.456@@@The car exploded.@@@汽车爆炸了！
04.123@@@Run!@@@快跑！
输入：
05.678@@@He's a real piece of work.
06.345@@@You can say that again.
输出：
05.678@@@He's a real piece of work.@@@他真是个怪胎。
06.345@@@You can say that again.@@@你说得对极了。
*反面示例*：
当合并后中文翻译过长，需要拆分：
输入：
01.234@@@He picked up the phone.
01.876@@@He dialed a number.
02.345@@@And he started talking. It was a long and complicated conversation.
错误输出：
01.234@@@He picked up the phone. He dialed a number. And he started talking. It was a long and complicated conversation.@@@他拿起电话，拨了个号码，然后开始说话。这是一段漫长而复杂的对话。
正确输出：
01.234@@@He picked up the phone. He dialed a number.@@@他拿起电话，拨了个号码。
01.876@@@And he started talking.@@@然后他开始说话。
02.345@@@It was a long and complicated conversation.@@@这是一段漫长而复杂的对话。
`;
const baseBody = {
messages: [
{ role: "system", content: systemPrompt },
{ role: "user", content: text }
],
model: modelConfig.MODEL,
temperature: 0.2
};
// 只在支持流式的模型中添加 stream 参数
if (modelConfig.STREAM) {
baseBody.stream = true;
}else{
baseBody.stream = false;
}
return baseBody;
}
// 从不同模型的响应中提取翻译文本
extractTranslation(data) {
const modelConfig = CONFIG.AI_MODELS[this.currentModel];
if (modelConfig.STREAM) {
// 流式响应格式
return data.choices[0]?.delta?.content || '';
} else {
// 非流式响应格式
return data.choices[0]?.message?.content || '';
}
}
// 非流式翻译方法
async normalTranslation(text) {
const modelConfig = CONFIG.AI_MODELS[this.currentModel];
if (!modelConfig) {
throw new Error(`未找到模型配置: ${this.currentModel}`);
}
const headers = {
'Content-Type': 'application/json',
'Authorization': `Bearer ${modelConfig.API_KEY}`
};
const requestBody = this.buildRequestBody(text, modelConfig);
try {
const response = await fetch(modelConfig.API_URL, {
method: 'POST',
headers: headers,
body: JSON.stringify(requestBody)
});
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const data = await response.json();
return this.extractTranslation(data);
} catch (error) {
console.error('非流式翻译失败:', error);
throw error;
}
}
// 新增流式翻译方法
async streamTranslation(text) {
const modelConfig = CONFIG.AI_MODELS[this.currentModel];
if (!modelConfig) {
throw new Error(`未找到模型配置: ${this.currentModel}`);
}
const headers = {
'Content-Type': 'application/json',
'Authorization': `Bearer ${modelConfig.API_KEY}`
};
// 根据不同模型构建请求体
const requestBody = this.buildRequestBody(text, modelConfig);
try {
const response = await fetch(modelConfig.API_URL, {
method: 'POST',
headers: headers,
body: JSON.stringify(requestBody)
});
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const reader = response.body.getReader();
let decoder = new TextDecoder();
let buffer = '';
let translation = '';
while (true) {
const {value, done} = await reader.read();
if (done) break;
buffer += decoder.decode(value, {stream: true});
const lines = buffer.split('\n');
// 处理完整的行
for (let i = 0; i < lines.length - 1; i++) {
const line = lines[i].trim();
if (!line || line === 'data: [DONE]') continue;
if (line.startsWith('data: ')) {
const data = JSON.parse(line.slice(5));
translation += this.extractTranslation(data);
}
}
// 保留未完成的行
buffer = lines[lines.length - 1];
}
return translation.trim();
} catch (error) {
console.error('流式翻译失败:', error);
throw error;
}
}
/**
* @description: 获取字幕总结
* @param {Array<SubtitleEntry>} subtitles - 字幕数组
* @return {Promise<string>} - 总结文本
*/
async getSummary(subtitles) {
try {
// 将所有字幕文本合并
const allText = subtitles
.map(sub => `${sub.text}\n${sub.translation || ''}`)
.join('\n');
const prompt = `请用中文总结以下视频内容的要点（不超过300字）：\n\n${allText}`;
const response = await fetch(this.API_URL, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${this.API_KEY}`
},
body: JSON.stringify({
messages: [
{
role: "system",
content: "你是一个专业的视频内容总结专家。请简明扼要地总结视频的主要内容，重点和关键信息。"
},
{
role: "user",
content: prompt
}
],
model: "grok-beta",
stream: false,
temperature: 0.3
})
});
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const data = await response.json();
return data.choices[0].message.content.trim();
} catch (error) {
console.error('获取总结失败:', error);
throw error;
}
}
// 批量翻译字幕
async translateBatch(subtitles) {
if (!subtitles || subtitles.length === 0) return [];
// 获取字幕数量
const subLength = parseInt(localStorage.getItem('subLength' + getUid()) || '0');
console.log('字幕数量:', subLength);
// 获取缓存中字幕数量
const cachedSubLength = this.cache.cache.size;
console.log('缓存中字幕数量:', cachedSubLength);
if(cachedSubLength <= subLength && cachedSubLength > 0){
// 打印缓存信息
console.log('✅ 使用现有缓存', this.cache.cache);
return Array.from(this.cache.cache.values()).sort((a, b) => a.startTime - b.startTime);
}
try {
// 将字幕转换为特定格式: 时间点@@@文本
const formattedSubtitles = subtitles.map(sub =>
`${sub.startTime.toFixed(3)}@@@${sub.text}`
).join('\n');
// console.log('开始批量翻译:', {
// 字幕数量: subtitles.length,
// 样本: formattedSubtitles
// });
const translation = await this.fetchTranslation(formattedSubtitles);
// 解析翻译结果
const translationLines = translation.split('\n').filter(line => line.trim());
console.log('翻译完成:', {
翻译结果数: translationLines.length,
样本: translationLines
});
// 重置新字幕数组
this.newSubtitles = [];
// 遍历翻译结果
for (let i = 0; i < translationLines.length; i++) {
const line = translationLines[i];
const [timeStr, oldText, translatedText] = line.split('@@@');
if (!timeStr || !oldText || !translatedText) continue;
const startTime = parseFloat(timeStr);
// 查找这个时间点对应的原字幕
const originalSub = subtitles.find(s => Math.abs(s.startTime - startTime) < 0.1);
if (!originalSub) continue;
// 创建新的字幕条目
const newSubtitle = new SubtitleEntry(oldText, startTime, originalSub.duration);
newSubtitle.translation = translatedText;
// 查找下一个翻译行的时间点（如果存在）
// if (i < translationLines.length - 1) {
// const nextLine = translationLines[i + 1];
// const [nextTimeStr] = nextLine.split('@@@');
// const nextTime = parseFloat(nextTimeStr);
// // 查找两个时间点之间的所有原文字幕
// const intermediateSubtitles = subtitles.filter(sub =>
// sub.startTime > startTime &&
// sub.startTime < nextTime
// );
// // 如果存在中间字幕，合并原文
// if (intermediateSubtitles.length > 0) {
// newSubtitle.text = [originalSub.text, ...intermediateSubtitles.map(sub => sub.text)].join(' ');
// // 更新持续时间为最后一个字幕的结束时间
// const lastSub = intermediateSubtitles[intermediateSubtitles.length - 1];
// newSubtitle.duration = (lastSub.startTime + lastSub.duration) - startTime;
// }
// }
this.newSubtitles.push(newSubtitle);
}
// 按时间排序
this.newSubtitles.sort((a, b) => a.startTime - b.startTime);
// 调整持续时间，确保不会重叠
for (let i = 0; i < this.newSubtitles.length - 1; i++) {
const currentSub = this.newSubtitles[i];
const nextSub = this.newSubtitles[i + 1];
if (currentSub.startTime + currentSub.duration > nextSub.startTime) {
currentSub.duration = nextSub.startTime - currentSub.startTime;
}
}
console.log('字幕重构完成:', {
原字幕数: subtitles.length,
新字幕数: this.newSubtitles.length,
样本: this.newSubtitles.slice(0, 3).map(sub => ({
时间: sub.startTime,
持续: sub.duration,
原文: sub.text,
译文: sub.translation
}))
});
// 将翻译结果保存到缓存
this.newSubtitles.forEach(sub => {
this.cache.put(this.generateCacheKey(sub.startTime), sub);
});
// 在storage中保存缓存,记录当前字幕数量
localStorage.setItem('subLength' + getUid(), this.newSubtitles.length);
// 设置缓存标志
this.hasCache = true;
// 返回重构后的字幕数组
return this.newSubtitles;
} catch (error) {
console.error('批量翻译失败:', error);
throw error;
}
}
// 调用翻译API
async fetchTranslation(text) {
console.log('开始翻译:', {
文本长度: text.length,
使用模型: this.currentModel,
是否流式: CONFIG.AI_MODELS[this.currentModel].STREAM,
具体模型: CONFIG.AI_MODELS[this.currentModel].MODEL
});
const MAX_LENGTH = 10000; // 设置单次翻译的最大字符数
const MIN_SEGMENT_SIZE = 3000; // 最小分段大小
const DELAY_BETWEEN_REQUESTS = 5000; // 请求间隔5秒
// 如果文本长度在限制范围内，直接翻译
if (text.length <= MAX_LENGTH) {
return CONFIG.AI_MODELS[this.currentModel].STREAM ?
await this.streamTranslation(text) :
await this.normalTranslation(text);
}
try {
// 将文本按换行符分割成行
const lines = text.split('\n');
const segments = [];
let currentSegment = [];
let currentLength = 0;
// 智能分段
for (const line of lines) {
if (currentLength + line.length > MAX_LENGTH ||
(currentLength > MIN_SEGMENT_SIZE && line.includes('@@@'))) {
if (currentSegment.length > 0) {
segments.push(currentSegment.join('\n'));
currentSegment = [];
currentLength = 0;
}
}
currentSegment.push(line);
currentLength += line.length;
}
// 添加最后一段
if (currentSegment.length > 0) {
segments.push(currentSegment.join('\n'));
}
console.log('文本分段完成:', {
总行数: lines.length,
分段数: segments.length,
各段长度: segments.map(s => s.length)
});
// 串行处理所有分段，每次请求之间添加延时
const translations = [];
for (let i = 0; i < segments.length; i++) {
// 如果不是第一个请求，等待指定时间
if (i > 0) {
console.log(`等待 ${DELAY_BETWEEN_REQUESTS/1000} 秒后继续下一个请求...`);
await new Promise(resolve => setTimeout(resolve, DELAY_BETWEEN_REQUESTS));
}
console.log(`开始处理第 ${i + 1}/${segments.length} 段`);
const translation = await (CONFIG.AI_MODELS[this.currentModel].STREAM ?
this.streamTranslation(segments[i]) :
this.normalTranslation(segments[i]));
translations.push(translation);
console.log(`第 ${i + 1} 段翻译完成`);
}
// 合并结果
const combinedTranslation = translations.join('\n');
console.log('所有分段翻译完成，合并后行数:', combinedTranslation.split('\n').length);
return combinedTranslation;
} catch (error) {
console.error('分段翻译失败:', error);
throw error;
}
}
}
// 添加视频控制器类
class VideoController {
constructor() {
this.player = PlayerManager.getInstance().player;
this.videoElement = PlayerManager.getInstance().videoElement;
this.subtitleManager = new SubtitleManager();
this.isPlaying = false;
// 打印变量信息
console.log("VideoController: " ,this.player, this.videoElement, this.subtitleManager)
}
// 播放视频
playVideo() {
if (this.player && typeof this.player.playVideo === 'function') {
this.player.playVideo();
this.isPlaying = true;
console.log('视频开始播放');
} else if (this.videoElement) {
this.videoElement.play();
this.isPlaying = true;
console.log('视频开始播放(HTML5)');
}
}
// 暂停视频
pauseVideo() {
if (this.player && typeof this.player.pauseVideo === 'function') {
this.player.pauseVideo();
this.isPlaying = false;
console.log('视频已暂停');
} else if (this.videoElement) {
this.videoElement.pause();
this.isPlaying = false;
console.log('视频已暂停(HTML5)');
}
}
// 获取当前播放时间
getCurrentTime() {
if (this.player && typeof this.player.getCurrentTime === 'function') {
return this.player.getCurrentTime();
} else if (this.videoElement) {
return this.videoElement.currentTime;
}
return 0;
}
// 获取视频状态
getPlayerState() {
if (this.player && typeof this.player.getPlayerState === 'function') {
return this.player.getPlayerState();
} else if (this.videoElement) {
return this.videoElement.paused ? 2 : 1; // 1:播放中 2:暂停
}
return -1;
}
}
// 主控制器
class YouTubeTranslator {
constructor() {
// 加载配置
window.CONFIG = ConfigManager.loadConfig();
this.playerManager = PlayerManager.getInstance();
this.subtitleManager = new SubtitleManager();
this.translationManager = new TranslationManager();
this.audioManager = new AudioManager();
this.currentVideoId = this.getVideoId();
this.player = this.playerManager.player;
this.isPlaying = false;
//console.log("播放器管理器: " ,this.playerManager.player)
this.uiManager = null; // 添加 uiManager 属性
// 上一条播放的字幕时间戳
this.lastPlayedSubtitleTime = 0;
}
/**
* @description: 处理配置更新
* @param {string} key - 配置键
* @param {any} value - 新的配置值
*/
onConfigUpdate(key, value) {
console.log('翻译器收到配置更新:', {
配置项: key,
新值: value
});
// 如果是模型相关的配置更新
if (key.startsWith('AI_MODELS')) {
// 更新翻译管理器的当前模型
if (key === 'AI_MODELS.TYPE') {
this.translationManager.currentModel = value;
console.log('切换翻译模型:', {
新模型: value,
模型名称: CONFIG.AI_MODELS[value].MODEL,
流式响应: CONFIG.AI_MODELS[value].STREAM
});
}
}
// 如果是TTS相关的配置更新
if (key.startsWith('TTS')) {
// 可以在这里添加TTS配置更新的处理逻辑
console.log('TTS配置已更新');
}
}
async generateSummary() {
try {
if (!this.subtitleManager.subtitles.length) {
throw new Error('没有可用的字幕');
}
return await this.translationManager.getSummary(this.subtitleManager.subtitles);
} catch (error) {
console.error('生成总结失败:', error);
throw error;
}
}
// 添加设置 UI 管理器的方法
setUIManager(uiManager) {
this.uiManager = uiManager;
}
startPeriodicCheck() {
if (this.checkInterval) {
clearInterval(this.checkInterval);
this.checkInterval = null;
}
this.checkInterval = setInterval(async () => {
if (!this.isActive) {
clearInterval(this.checkInterval);
this.checkInterval = null;
return;
}
//console.log('检查播放状态...');
try {
// 如果当前正在播放音频，跳过这次检查
if (this.isPlayingAudio) {
return;
}
const currentTime = this.player.getCurrentTime();
// 快3秒
// 获取当前时间并加3秒提前量
let checkTime = currentTime + 2;
//console.log('当前播放时间:', currentTime);
// 获取当前时间点的字幕
const currentSubtitle = this.subtitleManager.findSubtitleAtTime(checkTime);
// 如果当前时间点没有字幕，跳过
if (!currentSubtitle) return;
if(currentSubtitle.startTime <= this.lastPlayedSubtitleTime){
return;
}
// 检查是否已经播放过这个字幕
if (this.lastPlayedSubtitleTime === currentSubtitle.startTime) {
return;
}
// 生成缓存键
const cacheKey = this.audioManager.generateCacheKey(
currentSubtitle.startTime
);
// 更新UI显示最近的字幕
if (this.uiManager) {
this.uiManager.updateSubtitleDisplay(currentSubtitle);
}
this.lastPlayedSubtitleTime = currentSubtitle.startTime;
if (CONFIG.TTS.TYPE === 'BROWSER') {
// 设置播放状态
this.isPlayingAudio = true;
// console.log('浏览器TTS模式',CONFIG.TTS.BROWSER.VOICE,currentSubtitle);
// 播放音频
try{
await this.audioManager.playAudio(currentSubtitle.translation);
} finally {
// 确保播放完成后重置状态
this.isPlayingAudio = false;
}
}else{
// 从缓存获取音频
const cachedAudio = await this.audioManager.loadFromIndexedDB(cacheKey);
if (cachedAudio) {
// 再次检查状态，防止在加载音频过程中状态发生变化
if (this.isPlayingAudio || !this.isActive) {
return;
}
console.log('找到缓存音频，准备播放:', {
时间点: currentSubtitle.startTime,
原文: currentSubtitle.text,
译文: currentSubtitle.translation
});
// 设置播放状态
this.isPlayingAudio = true;
try {
// 播放音频
await this.audioManager.playAudio(cachedAudio);
// 记录已播放的字幕时间戳
this.lastPlayedSubtitleTime = currentSubtitle.startTime;
} finally {
// 确保播放完成后重置状态
this.isPlayingAudio = false;
}
}
}
} catch (error) {
console.error('定期检查出错:', error);
this.isPlayingAudio = false;
}
}, 1000); // 每秒检查一次
}
// 在 startTranslator 方法中添加调用
async startTranslator() {
try {
this.isActive = true;
console.log('开始启动翻译器...');
// 开始定时检查任务
this.startPeriodicCheck();
console.log('翻译器启动完成');
this.uiManager.updateStatus('开始播放', 'success');
} catch (error) {
console.error('启动失败:', error);
this.uiManager.updateStatus(`启动失败: ${error.message}`, 'error');
this.isActive = false;
}
}
// 在 stopTranslator 方法中添加清理
stopTranslator() {
console.log('停止翻译器...');
this.isPlayingAudio = false; // 重置播放状态
// 清除定时检查
if (this.checkInterval) {
clearInterval(this.checkInterval);
this.checkInterval = null;
}
}
// 添加翻译所有字幕的方法
async translateAllSubtitles() {
try {
console.log('开始翻译所有字幕...');
const subtitles = this.subtitleManager.subtitles;
const newSubtitles = await this.translationManager.translateBatch(subtitles);
console.log('所有字幕翻译完成,字幕数:', newSubtitles.length);
// 开始预加载音频
console.log('开始预加载音频...');
await this.audioManager.preloadAudioBatch(newSubtitles);
// 更新字幕管理器中的字幕数组
this.subtitleManager.subtitles = newSubtitles;
console.log('所有字幕翻译和音频加载完成');
return true;
} catch (error) {
console.error('翻译字幕失败:', error);
throw error;
}
}
async loadSubtitles() {
if (!this.currentVideoId) {
throw new Error('未找到视频ID');
}
try {
const hasSubtitles = await this.subtitleManager.loadSubtitles(this.currentVideoId);
if (!hasSubtitles) {
throw new Error('未找到字幕');
}
return true;
} catch (error) {
console.error('加载字幕失败:', error);
throw error;
}
}
getVideoId() {
try {
// 检查是否在YouTube账户页面
if (window.location.href.includes('accounts.youtube.com')) {
return null;
}
// 方法1: 从URL获取
const url = window.location.href;
console.log("当前页面URL:", url);
if (url.includes('youtube.com')) {
// 标准观看页面
if (url.includes('/watch')) {
const urlParams = new URLSearchParams(window.location.search);
const videoId = urlParams.get('v');
if (videoId) {
console.log("从URL参数获取到视频ID:", videoId);
return videoId;
}
}
// 短视频格式
if (url.includes('/shorts/')) {
const matches = url.match(/\/shorts\/([a-zA-Z0-9_-]{11})/);
if (matches && matches[1]) {
console.log("从shorts URL获取到视频ID:", matches[1]);
return matches[1];
}
}
}
// 方法2: 从视频元素获取
const videoElement = document.querySelector('video');
if (videoElement) {
// 从视频源获取
const videoSrc = videoElement.src;
if (videoSrc) {
const videoIdMatch = videoSrc.match(/\/([a-zA-Z0-9_-]{11})/);
if (videoIdMatch && videoIdMatch[1]) {
console.log("从视频源获取到视频ID:", videoIdMatch[1]);
return videoIdMatch[1];
}
}
// 从播放器容器获取
const playerContainer = document.getElementById('movie_player') ||
document.querySelector('.html5-video-player');
if (playerContainer) {
const dataVideoId = playerContainer.getAttribute('video-id') ||
playerContainer.getAttribute('data-video-id');
if (dataVideoId) {
console.log("从播放器容器获取到视频ID:", dataVideoId);
return dataVideoId;
}
}
}
// 方法3: 从页面元数据获取
const ytdPlayerConfig = document.querySelector('ytd-player');
if (ytdPlayerConfig) {
const videoData = ytdPlayerConfig.getAttribute('video-id');
if (videoData) {
console.log("从ytd-player获取到视频ID:", videoData);
return videoData;
}
}
// 方法4: 从页面脚本数据获取
const scripts = document.getElementsByTagName('script');
for (const script of scripts) {
const content = script.textContent;
if (content && content.includes('"videoId"')) {
const match = content.match(/"videoId":\s*"([a-zA-Z0-9_-]{11})"/);
if (match && match[1]) {
console.log("从页面脚本获取到视频ID:", match[1]);
return match[1];
}
}
}
// 如果所有方法都失败，等待页面加载完成后重试
if (document.readyState !== 'complete') {
console.log("页面未完全加载，返回null");
return null;
}
throw new Error('未在当前页面找到有效的YouTube视频');
} catch (error) {
console.error('获取视频ID失败:', error);
return null;
}
}
}
// 添加播放器管理类（单例模式）
class PlayerManager {
constructor() {
// 如果已经存在实例，直接返回
if (PlayerManager.instance) {
return PlayerManager.instance;
}
this._player = null;
this._videoElement = null;
this._initialized = false;
PlayerManager.instance = this;
}
// 获取实例的静态方法
static getInstance() {
if (!PlayerManager.instance) {
PlayerManager.instance = new PlayerManager();
}
return PlayerManager.instance;
}
// 初始化播放器
async initialize() {
if (this._initialized) {
return this._player;
}
try {
await this.waitForYouTubePlayer();
this._initialized = true;
console.log('播放器管理器初始化成功');
return this._player;
} catch (error) {
console.error('播放器管理器初始化失败:', error);
throw error;
}
}
// 等待YouTube播放器加载
async waitForYouTubePlayer() {
return new Promise((resolve, reject) => {
let attempts = 0;
const maxAttempts = 20;
const interval = setInterval(() => {
const player = document.querySelector('#movie_player');
const videoElement = document.querySelector('video');
if (player && typeof player.getCurrentTime === 'function') {
clearInterval(interval);
this._player = player;
this._videoElement = videoElement;
console.log('成功获取YouTube播放器');
resolve(player);
} else if (++attempts >= maxAttempts) {
clearInterval(interval);
reject(new Error('无法获取YouTube播放器'));
}
}, 500);
});
}
// 获取播放器实例
get player() {
return this._player;
}
// 获取video元素
get videoElement() {
return this._videoElement;
}
// 检查播放器是否已初始化
get isInitialized() {
return this._initialized;
}
}
// 字幕条目类
class SubtitleEntry {
constructor(text, startTime, duration) {
this.text = text;
this.startTime = startTime;
this.duration = duration;
this.translation = null;
this.audioBuffer = null;
}
}
// 字幕管理器类
class SubtitleManager {
constructor() {
this.subtitles = [];
this.currentIndex = 0;
}
/**
* @description: 加载字幕。
* @param {string} videoId - 视频 ID。
* @return {Promise<boolean>} - 是否成功加载字幕。
* @throws {Error} - 加载字幕失败时抛出异常。
*/
async loadSubtitles(videoId) {
try {
// 获取页面HTML内容
const response = await fetch(`https://www.youtube.com/watch?v=${videoId}`);
const html = await response.text();
// 使用正则表达式匹配字幕URL
const timedTextMatch = html.match(/https:\/\/www\.youtube\.com\/api\/timedtext\?[^"]+/);
if (!timedTextMatch) {
throw new Error('未找到字幕URL');
}
// 构建字幕URL
const url = new URL(timedTextMatch[0].replace(/\\u0026/g, '&'));
url.searchParams.set('lang', 'en'); // 设置为英文字幕
const subtitleUrl = url.toString();
console.log('获取字幕:', subtitleUrl);
const subtitleResponse = await fetch(subtitleUrl);
const subtitleXML = await subtitleResponse.text();
// console.log('字幕XML:', subtitleXML); // 添加日志输出
// 解析字幕
const textRegex = /<text[^>]*>([\s\S]*?)<\/text>/g;
this.subtitles = [];
let match;
while ((match = textRegex.exec(subtitleXML)) !== null) {
const text = match[1]
.replace(/"/g, '"')
.replace(/'/g, "'")
.replace(/</g, '<')
.replace(/>/g, '>')
.replace(/&/g, '&')
.replace(/'/g, "'")
.replace(/"/g, '"')
.replace(/\n/g, ' ')
.trim();
if (text) { // 只添加非空文本
// 获取开始时间和持续时间
const startMatch = match[0].match(/start="([^"]+)"/);
const durMatch = match[0].match(/dur="([^"]+)"/);
const startTime = startMatch ? parseFloat(startMatch[1]) : 0;
const duration = durMatch ? parseFloat(durMatch[1]) : 0;
this.subtitles.push(new SubtitleEntry(text, startTime, duration));
}
}
// 解析完字幕后进行排序
this.subtitles.sort((a, b) => a.startTime - b.startTime);
console.log(`成功加载 ${this.subtitles.length} 条字幕`);
return this.subtitles.length > 0;
} catch (error) {
console.error('获取字幕时出错:', error);
throw error;
}
}
/**
* @description: 获取指定时间范围内的字幕。
* @param {number} startTime - 开始时间。
* @param {number} endTime - 结束时间。
* @return {Array<SubtitleEntry>} - 指定时间范围内的字幕数组。
*/
getSubtitlesInRange(startTime, endTime) {
return this.subtitles.filter(sub =>
sub.startTime >= startTime && sub.startTime <= endTime
);
}
/**
* @description: 查找指定时间点对应的字幕。
* @param {number} time - 时间点。
* @return {SubtitleEntry|null} - 找到的字幕，如果未找到则返回 null。
*/
findSubtitleAtTime(time) {
try {
// 获取所有字幕的时间点
const timePoints = this.subtitles.map(sub => ({
time: sub.startTime,
subtitle: sub
}));
// 按时间排序
timePoints.sort((a, b) => a.time - b.time);
// 找到小于等于当前时间的最后一条字幕
let targetSubtitle = null;
for (let i = timePoints.length - 1; i >= 0; i--) {
if (timePoints[i].time <= time) {
targetSubtitle = timePoints[i].subtitle;
break;
}
}
if (targetSubtitle) {
// console.log('找到目标字幕:', {
// 当前时间: time,
// 字幕: {
// 文本: targetSubtitle.text,
// 开始时间: targetSubtitle.startTime,
// 持续时间: targetSubtitle.duration
// }
// });
return targetSubtitle;
}
// 如果没有找到小于等于当前时间的字幕，返回第一条字幕
if (timePoints.length > 0 && time < timePoints[0].time) {
const firstSubtitle = timePoints[0].subtitle;
console.log('返回第一条字幕:', {
当前时间: time,
字幕: {
文本: firstSubtitle.text,
开始时间: firstSubtitle.startTime,
持续时间: firstSubtitle.duration
}
});
return firstSubtitle;
}
console.log('未找到合适的字幕:', {
当前时间: time,
字幕总数: this.subtitles.length
});
return null;
} catch (error) {
console.error('查找字幕时出错:', error);
return null;
}
}
}
// UI管理器
class UIManager {
constructor(videoController,translator) {
this.container = null;
this.statusDisplay = null;
this.startButton = null;
this.pauseButton = null;
this.loadSubtitlesButton = null;
this.isCollapsed = false;
this.videoController = videoController;
this.translator = translator;
this.lastDisplayedSubtitleId = null; // 添加追踪变量
this.createConfigPanel();
this.createUI();
this.attachEventListeners();
}
createUI() {
// 创建主容器
this.container = document.createElement('div');
this.container.style.cssText = `
position: fixed;
top: 20px;
right: 20px;
width: 390px;
background: rgba(33, 33, 33, 0.9);
border-radius: 8px;
padding: 15px;
color: #fff;
font-family: Arial, sans-serif;
z-index: 9999;
transition: all 0.3s ease;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
`;
// 创建顶部栏
const topBar = this.createTopBar();
this.container.appendChild(topBar);
// 创建主内容容器
this.mainContent = document.createElement('div');
this.mainContent.style.cssText = `
transition: all 0.3s ease;
`;
// 创建控制按钮
const controls = this.createControls();
this.mainContent.appendChild(controls);
// 创建状态显示区域
this.createStatusDisplay();
this.mainContent.appendChild(this.statusDisplay);
// 创建TTS面板
this.createTTSPanel();
// 创建并添加总结面板
this.createSummaryPanel();
this.container.appendChild(this.mainContent);
document.body.appendChild(this.container);
// 创建配置面板
this.createConfigPanel();
// 使面板可拖动
this.makeDraggable(topBar);
}
createTTSPanel() {
const ttsPanel = document.createElement('div');
ttsPanel.style.cssText = `
margin-top: 15px;
padding: 15px;
background: rgba(33, 150, 243, 0.1);
border-radius: 8px;
border-left: 4px solid #2196F3;
`;
// TTS类型选择
const typeContainer = document.createElement('div');
typeContainer.style.cssText = `
margin-bottom: 12px;
display: flex;
align-items: center;
`;
const typeLabel = document.createElement('label');
typeLabel.textContent = 'TTS引擎: ';
typeLabel.style.cssText = `
color: #fff;
margin-right: 10px;
font-size: 14px;
font-weight: 500;
`;
const typeSelect = document.createElement('select');
typeSelect.style.cssText = `
padding: 8px 12px;
border-radius: 4px;
background: rgba(255, 255, 255, 0.9);
color: #333;
border: 1px solid rgba(33, 150, 243, 0.3);
font-size: 14px;
cursor: pointer;
outline: none;
transition: all 0.3s ease;
`;
['BROWSER'].forEach(type => {
const option = document.createElement('option');
option.value = type;
option.textContent = type;
if (CONFIG.TTS.TYPE === type) {
option.selected = true;
}
typeSelect.appendChild(option);
});
// 声音选择
const voiceContainer = document.createElement('div');
voiceContainer.style.cssText = `
margin-top: 12px;
display: flex;
align-items: center;
`;
const voiceLabel = document.createElement('label');
voiceLabel.textContent = '声音: ';
voiceLabel.style.cssText = `
color: #fff;
margin-right: 10px;
font-size: 14px;
font-weight: 500;
`;
const voiceSelect = document.createElement('select');
voiceSelect.style.cssText = `
padding: 8px 12px;
border-radius: 4px;
background: rgba(255, 255, 255, 0.9);
color: #333;
border: 1px solid rgba(33, 150, 243, 0.3);
font-size: 14px;
cursor: pointer;
outline: none;
transition: all 0.3s ease;
width: 200px;
`;
// 更新声音选项的函数
const updateVoiceOptions = () => {
// 清空现有选项
while (voiceSelect.firstChild) {
voiceSelect.removeChild(voiceSelect.firstChild);
}
if (typeSelect.value === 'EDGE') {
Object.entries(CONFIG.TTS.EDGE.VOICES).forEach(([id, name]) => {
const option = document.createElement('option');
option.value = id;
option.textContent = name;
if (id === CONFIG.TTS.EDGE.DEFAULT_VOICE) {
option.selected = true;
}
voiceSelect.appendChild(option);
});
}
if (CONFIG.TTS.TYPE === 'VITS') {
const option = document.createElement('option');
option.value = CONFIG.TTS.VITS.DEFAULT_VOICE;
option.textContent = '珊瑚宫心海';
option.selected = true;
voiceSelect.appendChild(option);
}
if (CONFIG.TTS.TYPE === 'BROWSER') {
// 浏览器 TTS 模式下获取系统语音列表
const populateVoiceList = () => {
const voices = speechSynthesis.getVoices();
// 过滤只包含 Chinese 的语音
const chineseVoices = voices.filter(voice =>
voice.lang.toLowerCase().includes('zh-cn')
);
if (chineseVoices.length === 0) {
// 如果没有找到中文语音，添加提示选项
const option = document.createElement('option');
option.textContent = '未找到中文语音';
option.disabled = true;
voiceSelect.appendChild(option);
} else {
chineseVoices.forEach(voice => {
const option = document.createElement('option');
option.textContent = `${voice.name} (${voice.lang})`;
if (voice.default) {
option.textContent += ' — DEFAULT';
}
option.setAttribute('data-lang', voice.lang);
option.setAttribute('data-name', voice.name);
voiceSelect.appendChild(option);
});
// 如果有已保存的语音设置，选中对应选项
if (CONFIG.TTS.BROWSER.VOICE) {
const savedVoice = Array.from(voiceSelect.options).find(option =>
option.getAttribute('data-name') === CONFIG.TTS.BROWSER.VOICE.name &&
option.getAttribute('data-lang') === CONFIG.TTS.BROWSER.VOICE.lang
);
if (savedVoice) {
savedVoice.selected = true;
}
}
}
// 调试输出
console.log('可用的中文语音:', chineseVoices.map(v => ({
name: v.name,
lang: v.lang,
default: v.default
})));
};
// 初始填充语音列表
populateVoiceList();
// 监听语音列表变化
if (typeof speechSynthesis !== 'undefined' &&
speechSynthesis.onvoiceschanged !== undefined) {
speechSynthesis.onvoiceschanged = populateVoiceList;
}
}
};
// 初始化声音选项
updateVoiceOptions();
// 添加事件监听器
typeSelect.addEventListener('change', () => {
CONFIG.TTS.TYPE = typeSelect.value;
updateVoiceOptions();
});
voiceSelect.addEventListener('change', (e) => {
const selectedOption = e.target.selectedOptions[0];
if (typeSelect.value === 'BROWSER') {
// 保存选中的浏览器语音信息
CONFIG.TTS.BROWSER.VOICE = {
name: selectedOption.getAttribute('data-name'),
lang: selectedOption.getAttribute('data-lang')
};
} else if (typeSelect.value === 'EDGE') {
CONFIG.TTS.EDGE.DEFAULT_VOICE = selectedOption.value;
} else {
CONFIG.TTS.VITS.DEFAULT_VOICE = selectedOption.value;
}
});
// 组装面板
typeContainer.appendChild(typeLabel);
typeContainer.appendChild(typeSelect);
voiceContainer.appendChild(voiceLabel);
voiceContainer.appendChild(voiceSelect);
ttsPanel.appendChild(typeContainer);
ttsPanel.appendChild(voiceContainer);
// 添加到主内容区域
if (this.mainContent) {
this.mainContent.appendChild(ttsPanel);
}
// 创建 AI 模型选择面板（移到这里，只创建一次）
// this.createAIModelPanel();
}
// 分离 AI 模型面板创建为独立方法
createAIModelPanel() {
const aiModelPanel = document.createElement('div');
aiModelPanel.style.cssText = `
margin-top: 15px;
padding: 15px;
background: rgba(33, 150, 243, 0.1);
border-radius: 8px;
border-left: 4px solid #2196F3;
`;
const modelContainer = document.createElement('div');
modelContainer.style.cssText = `
display: flex;
align-items: center;
margin-bottom: 12px;
`;
const modelLabel = document.createElement('label');
modelLabel.textContent = 'AI 模型: ';
modelLabel.style.cssText = `
color: #fff;
margin-right: 10px;
font-size: 14px;
font-weight: 500;
`;
const modelSelect = document.createElement('select');
modelSelect.style.cssText = `
padding: 8px 12px;
border-radius: 4px;
background: rgba(255, 255, 255, 0.9);
color: #333;
border: 1px solid rgba(33, 150, 243, 0.3);
font-size: 14px;
cursor: pointer;
outline: none;
transition: all 0.3s ease;
width: 200px;
`;
// 添加可用的 AI 模型选项
Object.keys(CONFIG.AI_MODELS).forEach(model => {
if (model !== 'TYPE') {
const option = document.createElement('option');
option.value = model;
option.textContent = `${model} (${CONFIG.AI_MODELS[model].MODEL})`;
if (CONFIG.AI_MODELS.TYPE === model) {
option.selected = true;
}
modelSelect.appendChild(option);
}
});
// 添加事件监听器
modelSelect.addEventListener('change', () => {
CONFIG.AI_MODELS.TYPE = modelSelect.value;
this.translator.translationManager.currentModel = modelSelect.value;
this.updateStatus(`已切换至 ${modelSelect.value} 模型`, 'info');
});
// 添加悬停效果
modelSelect.addEventListener('mouseover', () => {
modelSelect.style.borderColor = 'rgba(33, 150, 243, 0.6)';
modelSelect.style.boxShadow = '0 0 5px rgba(33, 150, 243, 0.3)';
});
modelSelect.addEventListener('mouseout', () => {
modelSelect.style.borderColor = 'rgba(33, 150, 243, 0.3)';
modelSelect.style.boxShadow = 'none';
});
modelContainer.appendChild(modelLabel);
modelContainer.appendChild(modelSelect);
aiModelPanel.appendChild(modelContainer);
// 添加到主内容区域
if (this.mainContent) {
this.mainContent.appendChild(aiModelPanel);
}
}
createTopBar() {
const topBar = document.createElement('div');
topBar.style.cssText = `
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
cursor: move;
padding: 5px;
`;
// 标题
const title = document.createElement('div');
title.textContent = 'YouTube 实时翻译';
title.style.cssText = `
font-weight: bold;
font-size: 14px;
`;
// 按钮容器
const buttonContainer = document.createElement('div');
buttonContainer.style.cssText = `
display: flex;
gap: 8px;
`;
// 折叠按钮
this.toggleButton = document.createElement('button');
this.toggleButton.textContent = '↑';
this.toggleButton.style.cssText = `
background: none;
border: none;
color: #fff;
cursor: pointer;
padding: 2px 6px;
font-size: 14px;
border-radius: 4px;
transition: background 0.2s;
`;
// 添加配置按钮
const configButton = document.createElement('button');
configButton.textContent = '⚙️';
configButton.style.cssText = `
background: none;
border: none;
color: #fff;
cursor: pointer;
padding: 2px 6px;
font-size: 14px;
border-radius: 4px;
transition: background 0.2s;
margin-right: 8px;
`;
configButton.addEventListener('click', () => this.toggleConfigPanel());
this.toggleButton.addEventListener('click', () => this.toggleCollapse());
buttonContainer.appendChild(configButton);
buttonContainer.appendChild(this.toggleButton);
topBar.appendChild(title);
topBar.appendChild(buttonContainer);
return topBar;
}
createConfigPanel() {
this.configPanel = document.createElement('div');
this.configPanel.style.cssText = `
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 400px;
background: rgba(33, 33, 33, 0.95);
border-radius: 12px;
padding: 20px;
color: #fff;
display: none;
z-index: 10000;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
`;
// 添加标题和关闭按钮
const header = document.createElement('div');
header.style.cssText = `
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
padding-bottom: 10px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
`;
const title = document.createElement('h3');
title.textContent = '配置设置';
title.style.margin = '0';
const closeButton = document.createElement('button');
closeButton.textContent = '×';
closeButton.style.cssText = `
background: none;
border: none;
color: #fff;
font-size: 20px;
cursor: pointer;
padding: 0 5px;
`;
closeButton.addEventListener('click', () => this.toggleConfigPanel());
header.appendChild(title);
header.appendChild(closeButton);
this.configPanel.appendChild(header);
// 创建配置选项
const configSections = [
{
title: 'AI 模型设置',
settings: [
{
type: 'select',
label: '模型类型',
key: 'AI_MODELS.TYPE',
options: ['OPENAI'],
value: CONFIG.AI_MODELS.TYPE
},
{
type: 'text',
label: 'API密钥',
key: 'AI_MODELS.OPENAI.API_KEY',
value: CONFIG.AI_MODELS.OPENAI.API_KEY
},
{
type: 'text',
label: 'API地址',
key: 'AI_MODELS.OPENAI.API_URL',
value: CONFIG.AI_MODELS.OPENAI.API_URL
},
{
type: 'text',
label: '模型名称',
key: 'AI_MODELS.OPENAI.MODEL',
value: CONFIG.AI_MODELS.OPENAI.MODEL
},
{
type: 'select',
label: '流式响应',
key: 'AI_MODELS.OPENAI.STREAM',
options: ['true', 'false'],
value: CONFIG.AI_MODELS.OPENAI.STREAM.toString()
}
]
}
// {
// title: 'TTS 设置',
// settings: [
// {
// type: 'select',
// label: 'TTS引擎',
// key: 'TTS.TYPE',
// options: ['EDGE', 'VITS', 'BROWSER'],
// value: CONFIG.TTS.TYPE
// },
// {
// type: 'select',
// label: 'EDGE声音',
// key: 'TTS.EDGE.DEFAULT_VOICE',
// options: Object.keys(CONFIG.TTS.EDGE.VOICES),
// value: CONFIG.TTS.EDGE.DEFAULT_VOICE,
// dependsOn: {
// key: 'TTS.TYPE',
// value: 'EDGE'
// }
// },
// {
// type: 'select',
// label: 'VITS声音',
// key: 'TTS.VITS.DEFAULT_VOICE',
// options: ['珊瑚宫心海'], // 可以根据实际声音列表扩展
// value: CONFIG.TTS.VITS.DEFAULT_VOICE,
// dependsOn: {
// key: 'TTS.TYPE',
// value: 'VITS'
// }
// },
// {
// type: 'range',
// label: '语速',
// key: 'TTS.BROWSER.RATE',
// min: 0.5,
// max: 2,
// step: 0.1,
// value: CONFIG.TTS.BROWSER.RATE,
// dependsOn: {
// key: 'TTS.TYPE',
// value: 'BROWSER'
// }
// },
// {
// type: 'range',
// label: '音量',
// key: 'TTS.BROWSER.VOLUME',
// min: 0,
// max: 1,
// step: 0.1,
// value: CONFIG.TTS.BROWSER.VOLUME,
// dependsOn: {
// key: 'TTS.TYPE',
// value: 'BROWSER'
// }
// },
// {
// type: 'range',
// label: '音调',
// key: 'TTS.BROWSER.PITCH',
// min: 0.5,
// max: 2,
// step: 0.1,
// value: CONFIG.TTS.BROWSER.PITCH,
// dependsOn: {
// key: 'TTS.TYPE',
// value: 'BROWSER'
// }
// }
// ]
// },
// {
// title: '缓存设置',
// settings: [
// {
// type: 'number',
// label: '音频缓存大小',
// key: 'CACHE.AUDIO_SIZE',
// min: 100,
// max: 1000,
// value: CONFIG.CACHE.AUDIO_SIZE
// },
// {
// type: 'number',
// label: '翻译缓存大小',
// key: 'CACHE.TRANS_SIZE',
// min: 100,
// max: 1000,
// value: CONFIG.CACHE.TRANS_SIZE
// }
// ]
// }
];
configSections.forEach(section => {
const sectionEl = this.createConfigSection(section);
this.configPanel.appendChild(sectionEl);
});
document.body.appendChild(this.configPanel);
}
// 在 updateConfig 方法中添加模型切换的处理
updateConfig(key, value) {
// 将点分隔的键转换为嵌套对象访问
const keys = key.split('.');
let current = CONFIG;
for (let i = 0; i < keys.length - 1; i++) {
current = current[keys[i]];
}
// 特殊处理布尔值
if (value === 'true') value = true;
if (value === 'false') value = false;
current[keys[keys.length - 1]] = value;
// 触发配置更新事件
document.dispatchEvent(new CustomEvent('configUpdate', {
detail: { key, value }
}));
// 保存配置
ConfigManager.saveConfig(CONFIG);
// 打印模型相关的配置变更
if (key.startsWith('AI_MODELS')) {
console.log('AI模型配置已更新:', {
配置项: key,
新值: value,
当前模型类型: CONFIG.AI_MODELS.TYPE,
模型名称: CONFIG.AI_MODELS[CONFIG.AI_MODELS.TYPE].MODEL,
流式响应: CONFIG.AI_MODELS[CONFIG.AI_MODELS.TYPE].STREAM
});
}
// 通知更新 - 添加错误处理
if (this.translator && typeof this.translator.onConfigUpdate === 'function') {
this.translator.onConfigUpdate(key, value);
} else {
console.warn('翻译器未初始化或不支持配置更新');
}
}
createConfigSection(section) {
const sectionEl = document.createElement('div');
sectionEl.style.marginBottom = '20px';
const title = document.createElement('h4');
title.textContent = section.title;
title.style.marginBottom = '10px';
sectionEl.appendChild(title);
section.settings.forEach(setting => {
const settingEl = this.createConfigSetting(setting);
sectionEl.appendChild(settingEl);
});
return sectionEl;
}
createConfigSetting(setting) {
const container = document.createElement('div');
container.style.cssText = `
margin-bottom: 15px;
display: flex;
align-items: center;
gap: 10px;
`;
const label = document.createElement('label');
label.textContent = setting.label;
label.style.cssText = `
width: 120px;
color: #fff;
font-size: 14px;
`;
// 添加依赖关系处理
if (setting.dependsOn) {
const updateVisibility = () => {
const dependencyValue = this.getConfigValue(setting.dependsOn.key);
container.style.display = dependencyValue === setting.dependsOn.value ? 'flex' : 'none';
};
// 监听依赖项的变化
document.addEventListener('configUpdate', (e) => {
if (e.detail.key === setting.dependsOn.key) {
updateVisibility();
}
});
// 初始化可见性
updateVisibility();
}
let input;
switch (setting.type) {
case 'select':
input = document.createElement('select');
setting.options.forEach(option => {
const opt = document.createElement('option');
opt.value = option;
opt.textContent = option;
opt.selected = option === setting.value;
// 设置选项样式
opt.style.cssText = `
background: #2f2f2f;
color: #fff;
padding: 8px;
`;
input.appendChild(opt);
});
// 为select元素添加特殊样式
input.style.cssText = `
padding: 8px 12px;
border-radius: 4px;
background: #2f2f2f;
color: #fff;
border: 1px solid #4CAF50;
font-size: 14px;
cursor: pointer;
outline: none;
width: 200px;
transition: all 0.3s ease;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: right 8px center;
background-size: 16px;
padding-right: 32px;
`;
break;
case 'text':
input = document.createElement('input');
input.type = 'text';
input.value = setting.value;
input.style.cssText = `
padding: 8px 12px;
border-radius: 4px;
background: #2f2f2f;
color: #fff;
border: 1px solid #4CAF50;
font-size: 14px;
width: 200px;
outline: none;
transition: all 0.3s ease;
`;
break;
case 'number':
input = document.createElement('input');
input.type = 'number';
input.min = setting.min;
input.max = setting.max;
input.value = setting.value;
input.style.cssText = `
padding: 8px 12px;
border-radius: 4px;
background: #2f2f2f;
color: #fff;
border: 1px solid #4CAF50;
font-size: 14px;
width: 200px;
outline: none;
transition: all 0.3s ease;
`;
break;
case 'range':
input = document.createElement('input');
input.type = 'range';
input.min = setting.min;
input.max = setting.max;
input.step = setting.step;
input.value = setting.value;
input.style.cssText = `
width: 200px;
height: 4px;
border-radius: 2px;
background: #4CAF50;
outline: none;
opacity: 0.7;
transition: all 0.3s ease;
-webkit-appearance: none;
`;
break;
}
// 添加悬停效果
if (setting.type !== 'range') {
input.addEventListener('mouseover', () => {
input.style.borderColor = '#66BB6A';
input.style.boxShadow = '0 0 5px rgba(76, 175, 80, 0.3)';
});
input.addEventListener('mouseout', () => {
input.style.borderColor = '#4CAF50';
input.style.boxShadow = 'none';
});
input.addEventListener('focus', () => {
input.style.borderColor = '#66BB6A';
input.style.boxShadow = '0 0 5px rgba(76, 175, 80, 0.3)';
});
input.addEventListener('blur', () => {
input.style.borderColor = '#4CAF50';
input.style.boxShadow = 'none';
});
}
// 为range类型添加特殊样式
if (setting.type === 'range') {
input.addEventListener('mouseover', () => {
input.style.opacity = '1';
});
input.addEventListener('mouseout', () => {
input.style.opacity = '0.7';
});
// 添加滑块样式
const styleSheet = document.createElement('style');
styleSheet.textContent = `
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 16px;
height: 16px;
border-radius: 50%;
background: #fff;
cursor: pointer;
transition: all 0.3s ease;
}
input[type=range]::-webkit-slider-thumb:hover {
background: #e0e0e0;
transform: scale(1.1);
}
`;
document.head.appendChild(styleSheet);
}
input.addEventListener('change', (e) => {
let value = e.target.value;
if (setting.type === 'number' || setting.type === 'range') {
value = parseFloat(value);
}
this.updateConfig(setting.key, value);
});
container.appendChild(label);
container.appendChild(input);
return container;
}
toggleConfigPanel() {
if (!this.configPanel) {
this.createConfigPanel();
}
const isVisible = this.configPanel.style.display === 'block';
this.configPanel.style.display = isVisible ? 'none' : 'block';
}
// 添加获取配置值的辅助方法
getConfigValue(key) {
const keys = key.split('.');
let value = CONFIG;
for (const k of keys) {
value = value[k];
}
return value;
}
createControls() {
const controls = document.createElement('div');
controls.style.cssText = `
display: flex;
gap: 10px;
margin-bottom: 15px;
`;
// 加载字幕按钮
this.loadSubtitlesButton = this.createButton('加载字幕', '#2196F3');
// 开始按钮
this.startButton = this.createButton('开始播放', '#4CAF50');
this.startButton.disabled = true;
this.startButton.style.opacity = '0.5';
this.startButton.style.cursor = 'not-allowed';
// 暂停按钮
this.pauseButton = this.createButton('停止播放', '#FF5722');
this.pauseButton.style.display = 'block';
// 新增总结按钮
this.summaryButton = this.createButton('生成总结', '#9C27B0');
this.summaryButton.style.display = 'block'; // 添加这一行
controls.appendChild(this.loadSubtitlesButton);
controls.appendChild(this.startButton);
controls.appendChild(this.pauseButton);
controls.appendChild(this.summaryButton);
return controls;
}
createSummaryPanel() {
this.summaryPanel = document.createElement('div');
this.summaryPanel.style.cssText = `
margin-top: 15px;
padding: 15px;
background: rgba(156, 39, 176, 0.1);
border-radius: 8px;
border-left: 4px solid #9C27B0;
display: none;
transition: all 0.3s ease;
`;
const title = document.createElement('div');
title.textContent = '视频内容总结';
title.style.cssText = `
font-weight: bold;
margin-bottom: 10px;
color: #9C27B0;
font-size: 14px;
display: flex;
justify-content: space-between;
align-items: center;
`;
// 添加复制按钮
const copyButton = document.createElement('button');
copyButton.textContent = '复制';
copyButton.style.cssText = `
background: #9C27B0;
color: white;
border: none;
border-radius: 4px;
padding: 4px 8px;
font-size: 12px;
cursor: pointer;
transition: all 0.2s ease;
`;
copyButton.addEventListener('mouseover', () => {
copyButton.style.background = '#7B1FA2';
});
copyButton.addEventListener('mouseout', () => {
copyButton.style.background = '#9C27B0';
});
copyButton.addEventListener('click', () => {
navigator.clipboard.writeText(this.summaryContent.textContent)
.then(() => {
copyButton.textContent = '已复制';
setTimeout(() => {
copyButton.textContent = '复制';
}, 2000);
})
.catch(err => console.error('复制失败:', err));
});
title.appendChild(copyButton);
this.summaryContent = document.createElement('div');
this.summaryContent.style.cssText = `
font-size: 14px;
line-height: 1.6;
color: #fff;
white-space: pre-wrap;
margin-top: 10px;
max-height: 400px;
overflow-y: auto;
padding-right: 10px;
`;
// 添加滚动条样式
this.summaryContent.style.cssText += `
scrollbar-width: thin;
scrollbar-color: #9C27B0 rgba(156, 39, 176, 0.1);
`;
this.summaryPanel.appendChild(title);
this.summaryPanel.appendChild(this.summaryContent);
this.mainContent.appendChild(this.summaryPanel);
}
// 添加字幕显示方法
updateSubtitleDisplay(subtitle) {
// 生成字幕唯一ID (使用时间戳和文本组合)
const subtitleId = `${subtitle.startTime}-${subtitle.text}`;
// 检查是否已经显示过这条字幕
if (this.lastDisplayedSubtitleId === subtitleId) {
return; // 如果是相同字幕，直接返回
}
const entry = document.createElement('div');
entry.style.cssText = `
margin: 10px 0;
padding: 12px;
background: rgba(255, 255, 255, 0.1);
border-radius: 8px;
border-left: 4px solid #4CAF50;
transition: all 0.3s ease;
`;
// 添加鼠标悬停效果
entry.addEventListener('mouseover', () => {
entry.style.background = 'rgba(255, 255, 255, 0.15)';
entry.style.transform = 'translateX(5px)';
});
entry.addEventListener('mouseout', () => {
entry.style.background = 'rgba(255, 255, 255, 0.1)';
entry.style.transform = 'translateX(0)';
});
// 显示时间信息
const timeInfo = document.createElement('div');
timeInfo.style.cssText = `
color: #888;
font-size: 11px;
margin-bottom: 8px;
font-family: monospace;
`;
timeInfo.textContent = `⏱ ${subtitle.startTime.toFixed(2)}s - ${(subtitle.startTime + subtitle.duration).toFixed(2)}s`;
entry.appendChild(timeInfo);
// 显示原文
const originalText = document.createElement('div');
originalText.style.cssText = `
color: #bbb;
margin: 6px 0;
font-size: 13px;
line-height: 1.4;
padding-left: 20px;
position: relative;
`;
// 创建图标元素
const originalIcon = document.createElement('span');
originalIcon.style.cssText = `
position: absolute;
left: 0;
`;
originalIcon.textContent = '💢';
// 创建文本元素
const originalTextContent = document.createElement('span');
originalTextContent.textContent = subtitle.text;
originalText.appendChild(originalIcon);
originalText.appendChild(originalTextContent);
entry.appendChild(originalText);
// 显示译文
if (subtitle.translation) {
const translatedText = document.createElement('div');
translatedText.style.cssText = `
color: #fff;
margin: 6px 0;
font-size: 14px;
line-height: 1.4;
font-weight: 500;
padding-left: 20px;
position: relative;
`;
// 创建译文图标元素
const translatedIcon = document.createElement('span');
translatedIcon.style.cssText = `
position: absolute;
left: 0;
`;
translatedIcon.textContent = '🤖';
// 创建译文文本元素
const translatedTextContent = document.createElement('span');
translatedTextContent.textContent = subtitle.translation;
translatedText.appendChild(translatedIcon);
translatedText.appendChild(translatedTextContent);
entry.appendChild(translatedText);
}
// 更新最后显示的字幕ID
this.lastDisplayedSubtitleId = subtitleId;
this.statusDisplay.appendChild(entry);
this.statusDisplay.scrollTop = this.statusDisplay.scrollHeight;
}
// 添加事件监听器
attachEventListeners() {
// 加载字幕按钮事件
this.loadSubtitlesButton.addEventListener('click', async () => {
this.loadSubtitlesButton.disabled = true;
this.loadSubtitlesButton.textContent = '正在加载字幕...';
try {
// 加载字幕
await this.translator.loadSubtitles();
this.updateStatus(`已加载 ${this.translator.subtitleManager.subtitles.length} 条字幕`, 'success');
// 开始翻译
this.updateStatus('正在翻译字幕...', 'info');
await this.translator.translateAllSubtitles();
this.updateStatus('字幕翻译完成', 'success');
// 更新UI状态
this.loadSubtitlesButton.style.display = 'none';
this.summaryButton.style.display = 'block';
this.startButton.disabled = false;
this.startButton.style.opacity = '1';
this.startButton.style.cursor = 'pointer';
// 显示翻译样本
// const allSubtitles = this.translator.subtitleManager.subtitles;
// if (allSubtitles) {
// allSubtitles.forEach(sub => {
// this.updateSubtitleDisplay(sub);
// });
// }
} catch (error) {
this.loadSubtitlesButton.disabled = false;
this.loadSubtitlesButton.textContent = '重试加载字幕';
this.updateStatus(`加载字幕失败: ${error.message}`, 'error');
}
});
// 开始播放按钮事件
this.startButton.addEventListener('click', async () => {
try {
this.startButton.style.display = 'none';
this.pauseButton.style.display = 'block';
this.translator.startTranslator();
this.videoController.playVideo();
//this.updateStatus('开始播放', 'success');
} catch (error) {
this.updateStatus(`播放失败: ${error.message}`, 'error');
this.startButton.style.display = 'block';
this.pauseButton.style.display = 'none';
}
});
// 暂停按钮事件
this.pauseButton.addEventListener('click', () => {
this.pauseButton.style.display = 'none';
this.startButton.style.display = 'block';
this.videoController.pauseVideo();
this.updateStatus('播放已暂停', 'info');
});
// 总结按钮事件
this.summaryButton.addEventListener('click', async () => {
try {
this.summaryButton.disabled = true;
this.summaryButton.textContent = '正在生成总结...';
this.updateStatus('正在生成视频内容总结...', 'info');
const summary = await this.translator.generateSummary();
this.summaryContent.textContent = summary;
this.summaryPanel.style.display = 'block';
this.updateStatus('总结生成完成', 'success');
} catch (error) {
this.updateStatus(`生成总结失败: ${error.message}`, 'error');
} finally {
this.summaryButton.disabled = false;
this.summaryButton.textContent = '生成总结';
}
});
}
createButton(text, color) {
const button = document.createElement('button');
button.textContent = text;
button.style.cssText = `
padding: 10px 20px;
border: none;
border-radius: 8px;
background: ${color};
color: white;
cursor: pointer;
font-size: 14px;
flex: 1;
transition: all 0.3s ease;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
`;
button.addEventListener('mouseover', () => {
button.style.transform = 'translateY(-2px)';
button.style.boxShadow = '0 4px 12px rgba(0, 0, 0, 0.3)';
});
button.addEventListener('mouseout', () => {
button.style.transform = 'translateY(0)';
button.style.boxShadow = '0 2px 8px rgba(0, 0, 0, 0.2)';
});
return button;
}
createStatusDisplay() {
this.statusDisplay = document.createElement('div');
this.statusDisplay.style.cssText = `
margin-top: 15px;
max-height: 450px;
max-width: 400px;
overflow-y: auto;
padding: 10px;
background: rgba(0, 0, 0, 0.2);
border-radius: 8px;
font-size: 14px;
line-height: 1.5;
`;
}
toggleCollapse() {
this.isCollapsed = !this.isCollapsed;
if (this.isCollapsed) {
this.mainContent.style.display = 'none';
this.container.style.width = '200px';
this.toggleButton.textContent = '↓';
} else {
this.mainContent.style.display = 'block';
this.container.style.width = '300px';
this.toggleButton.textContent = '↑';
}
}
makeDraggable(dragHandle) {
let isDragging = false;
let currentX;
let currentY;
let initialX;
let initialY;
let xOffset = 0;
let yOffset = 0;
dragHandle.addEventListener('mousedown', (e) => {
initialX = e.clientX - xOffset;
initialY = e.clientY - yOffset;
if (e.target === dragHandle) {
isDragging = true;
}
});
document.addEventListener('mousemove', (e) => {
if (isDragging) {
e.preventDefault();
currentX = e.clientX - initialX;
currentY = e.clientY - initialY;
xOffset = currentX;
yOffset = currentY;
const maxX = window.innerWidth - this.container.offsetWidth;
const maxY = window.innerHeight - this.container.offsetHeight;
xOffset = Math.min(Math.max(0, xOffset), maxX);
yOffset = Math.min(Math.max(0, yOffset), maxY);
this.container.style.transform = `translate(${xOffset}px, ${yOffset}px)`;
}
});
document.addEventListener('mouseup', () => {
initialX = currentX;
initialY = currentY;
isDragging = false;
});
}
updateStatus(message, type = 'info') {
const entry = document.createElement('div');
entry.style.cssText = `
margin-bottom: 8px;
padding: 4px 8px;
border-radius: 4px;
font-size: 13px;
${type === 'error' ? 'background: rgba(244, 67, 54, 0.2); color: #ff8a80;' : ''}
`;
entry.textContent = `${type === 'error' ? '❌ ' : ''}${message}`;
this.statusDisplay.appendChild(entry);
this.statusDisplay.scrollTop = this.statusDisplay.scrollHeight;
}
}
// 初始化应用
async function initializeApp() {
// 检查是否在YouTube账户页面
if (window.location.href.includes('accounts.youtube.com')) {
console.log('在账户页面，跳过初始化');
return;
}
const playerManager = PlayerManager.getInstance();
await playerManager.initialize();
// 启动前10秒内每秒检查一次播放状态
const player = playerManager.player;
//console.log("播放器信息: " ,player)
// 创建视频控制器
const videoController = new VideoController();
// 创建翻译器
const translator = new YouTubeTranslator();
// 创建UI管理器
const ui = new UIManager(videoController,translator);
// 设置 UI 管理器
translator.setUIManager(ui);
// 获取视频ID
const videoId = translator.getVideoId();
if (videoId) {
console.log('成功获取视频ID: ', videoId);
let checkCount = 0;
// 启动前10秒内每秒检查一次播放状态
const checkInterval = setInterval(() => {
if (checkCount >= 5) {
clearInterval(checkInterval);
return;
}
if (player && typeof player.getPlayerState === 'function' && player.getPlayerState() === 1) {
player.pauseVideo();
console.log('视频已自动暂停');
}
checkCount++;
}, 1000);
translator.initialize().catch(error => {
console.error('初始化失败:', error);
});
} else if (retryCount < maxRetries) {
console.log(`未获取到视频ID，${retryInterval/1000}秒后重试 (${retryCount + 1}/${maxRetries})`);
retryCount++;
setTimeout(tryInitialize, retryInterval);
} else {
console.log('达到最大重试次数，初始化失败');
}
}
// 页面加载完成后启动应用
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', initializeApp);
} else {
initializeApp();
}
function getUid() {
try {
// 检查是否在YouTube账户页面
if (window.location.href.includes('accounts.youtube.com')) {
return null;
}
// 方法1: 从URL获取
const url = window.location.href;
//console.log("当前页面URL:", url);
if (url.includes('youtube.com')) {
// 标准观看页面
if (url.includes('/watch')) {
const urlParams = new URLSearchParams(window.location.search);
const videoId = urlParams.get('v');
if (videoId) {
// console.log("从URL参数获取到视频ID:", videoId);
return videoId;
}
}
// 短视频格式
if (url.includes('/shorts/')) {
const matches = url.match(/\/shorts\/([a-zA-Z0-9_-]{11})/);
if (matches && matches[1]) {
console.log("从shorts URL获取到视频ID:", matches[1]);
return matches[1];
}
}
}
// 方法2: 从视频元素获取
const videoElement = document.querySelector('video');
if (videoElement) {
// 从视频源获取
const videoSrc = videoElement.src;
if (videoSrc) {
const videoIdMatch = videoSrc.match(/\/([a-zA-Z0-9_-]{11})/);
if (videoIdMatch && videoIdMatch[1]) {
console.log("从视频源获取到视频ID:", videoIdMatch[1]);
return videoIdMatch[1];
}
}
// 从播放器容器获取
const playerContainer = document.getElementById('movie_player') ||
document.querySelector('.html5-video-player');
if (playerContainer) {
const dataVideoId = playerContainer.getAttribute('video-id') ||
playerContainer.getAttribute('data-video-id');
if (dataVideoId) {
console.log("从播放器容器获取到视频ID:", dataVideoId);
return dataVideoId;
}
}
}
// 方法3: 从页面元数据获取
const ytdPlayerConfig = document.querySelector('ytd-player');
if (ytdPlayerConfig) {
const videoData = ytdPlayerConfig.getAttribute('video-id');
if (videoData) {
console.log("从ytd-player获取到视频ID:", videoData);
return videoData;
}
}
// 方法4: 从页面脚本数据获取
const scripts = document.getElementsByTagName('script');
for (const script of scripts) {
const content = script.textContent;
if (content && content.includes('"videoId"')) {
const match = content.match(/"videoId":\s*"([a-zA-Z0-9_-]{11})"/);
if (match && match[1]) {
console.log("从页面脚本获取到视频ID:", match[1]);
return match[1];
}
}
}
// 如果所有方法都失败，等待页面加载完成后重试
if (document.readyState !== 'complete') {
console.log("页面未完全加载，返回null");
return null;
}
throw new Error('未在当前页面找到有效的YouTube视频');
} catch (error) {
console.error('获取视频ID失败:', error);
return null;
}
}
})();