Create app.js

app.js

@@ -0,0 +1,671 @@
+/* ===== 0. 全局状态与基础配置 ===== */
+let extractedImages = [];
+let currentImageIndex = -1;
+let currentMediaImage = null;
+let currentFilter = "";
+let currentMediaDataURL = "";
+let isFrameMode = false;
+let chatContext = [{ role: "system", content: "你是一个得力的 AI 助手，请简明扼要地回答问题。" }];
+
+window.addEventListener('load', () => {
+  const savedKey = localStorage.getItem('datxy_global_api_key');
+  if(savedKey) document.getElementById('globalApiKey').value = savedKey;
+  
+  updateResolutionState();
+  document.getElementById('imageModelSelect').addEventListener('change', updateResolutionState);
+  updateStats();
+  clearApiLogs();
+});
+
+document.getElementById('globalApiKey').addEventListener('change', (e) => {
+  localStorage.setItem('datxy_global_api_key', e.target.value.trim());
+});
+
+// 全局监听左右键切图
+window.addEventListener('keydown', (e) => {
+  const viewMedia = document.getElementById('view-media');
+  if (viewMedia.style.display !== 'none' && isFrameMode) {
+    if (e.key === 'ArrowLeft') {
+      if (currentImageIndex > 0) { currentImageIndex--; displayExtractedFrame(); }
+    } else if (e.key === 'ArrowRight') {
+      if (currentImageIndex < extractedImages.length - 1) { currentImageIndex++; displayExtractedFrame(); }
+    }
+  }
+});
+
+function switchTab(tabId) {
+  document.querySelectorAll('.editor-tab').forEach(t => t.classList.remove('active'));
+  document.querySelectorAll('.workspace-view').forEach(v => v.style.display = 'none');
+  
+  document.getElementById('tab-' + tabId).classList.add('active');
+  document.getElementById('view-' + tabId).style.display = 'flex';
+}
+
+function toggleCollapse(contentId, headerElement) {
+  const content = document.getElementById(contentId);
+  content.classList.toggle('collapsed');
+  headerElement.classList.toggle('collapsed');
+}
+
+function showError(msg) {
+  const errorMsg = document.getElementById('errorMsg');
+  errorMsg.innerText = msg;
+  errorMsg.style.display = "block";
+  setTimeout(() => { errorMsg.style.display = "none"; }, 4000);
+}
+
+/* ===== 1. API 调试日志处理 ===== */
+function logApiCall(type, endpoint, reqData, resData, isError = false) {
+  const container = document.getElementById('apiLogContainer');
+  if (container.innerHTML.includes("暂无 API 调用记录")) container.innerHTML = "";
+  
+  const time = new Date().toLocaleTimeString();
+  const logHTML = `
+  <div class="log-entry">
+  <div class="log-time">[${time}] ${type} 请求: ${endpoint}</div>
+  <div class="log-req"><strong>📦 请求 Payload:</strong><br>${JSON.stringify(reqData, null, 2)}</div>
+  <div class="${isError ? 'log-err' : 'log-res'}" style="margin-top: 8px;"><strong>${isError ? '❌ 报错信息' : '✅ 响应结果'}:</strong><br>${JSON.stringify(resData, null, 2)}</div>
+  </div>
+  `;
+  container.innerHTML = logHTML + container.innerHTML;
+}
+function clearApiLogs() {
+  document.getElementById('apiLogContainer').innerHTML = '<div style="color: var(--text-tertiary); text-align:center; margin-top:20px;">暂无 API 调用记录...</div>';
+}
+
+/* ===== 2. 聊天对话系统 ===== */
+function appendChatMessage(role, content) {
+  const history = document.getElementById('chatHistory');
+  const div = document.createElement('div');
+  div.className = `chat-msg ${role === 'user' ? 'msg-user' : 'msg-ai'}`;
+  div.innerText = content;
+  history.appendChild(div);
+  history.scrollTop = history.scrollHeight;
+}
+
+// 清空对话
+document.getElementById('clearChatBtn').addEventListener('click', () => {
+  chatContext = [{ role: "system", content: "你是一个得力的 AI 助手，请简明扼要地回答问题。" }];
+  document.getElementById('chatHistory').innerHTML = '<div style="color: var(--text-tertiary); text-align: center; margin-top: 50px; font-size: 0.9rem;">对话记忆已清空。请在下方输入问题。</div>';
+});
+
+document.getElementById('chatInput').addEventListener('keydown', (e) => {
+  if (e.key === 'Enter' && !e.shiftKey) {
+    e.preventDefault();
+    document.getElementById('sendChatBtn').click();
+  }
+});
+
+document.getElementById('sendChatBtn').addEventListener('click', async () => {
+  const apiKey = document.getElementById('globalApiKey').value.trim();
+  const model = document.getElementById('chatModelSelect').value;
+  const inputEl = document.getElementById('chatInput');
+  const text = inputEl.value.trim();
+  const btn = document.getElementById('sendChatBtn');
+  
+  if (!apiKey) return showError("❌ 请输入顶部全局 API Key");
+  if (!text) return;
+  
+  localStorage.setItem('datxy_global_api_key', apiKey);
+  
+  // UI 更新
+  appendChatMessage('user', text);
+  chatContext.push({ role: "user", content: String(text) });
+  
+  inputEl.value = "";
+  inputEl.disabled = true;
+  btn.disabled = true;
+  btn.innerText = "思考中";
+  
+  const safeMessages = chatContext.map(msg => ({ role: msg.role, content: msg.content }));
+  const reqPayload = { model: model, messages: safeMessages, stream: false, max_tokens: 1000 };
+  
+  try {
+    const res = await fetch("https://api.poixe.com/v1/chat/completions", {
+      method: "POST",
+      headers: { "Content-Type": "application/json", "Authorization": `Bearer ${apiKey}` },
+      body: JSON.stringify(reqPayload)
+    });
+    
+    if (!res.ok) {
+      const errData = await res.json().catch(() => ({}));
+      throw new Error(errData.error?.message || `HTTP 错误码: ${res.status}`);
+    }
+    
+    const result = await res.json();
+    logApiCall('智能对话', 'https://api.poixe.com/v1/chat/completions', reqPayload, result, false);
+    
+    if (result.choices && result.choices[0] && result.choices[0].message) {
+      const aiMsg = result.choices[0].message.content;
+      appendChatMessage('ai', aiMsg);
+      chatContext.push({ role: "assistant", content: String(aiMsg) });
+    } else {
+      throw new Error('API 返回数据缺失 choices 节点');
+    }
+  } catch(e) {
+    showError("❌ 对话失败: " + e.message);
+    appendChatMessage('ai', `❌ 请求失败，请检查 API Key 或网络 (${e.message})`);
+    logApiCall('智能对话', 'https://api.poixe.com/v1/chat/completions', reqPayload, { error: e.message }, true);
+    chatContext.pop();
+  } finally {
+    inputEl.disabled = false;
+    btn.disabled = false;
+    btn.innerText = "发送";
+    inputEl.focus();
+  }
+});
+
+/* ===== 3. AI 文本测试 (针对文本区单次调用) ===== */
+document.getElementById('aiProcessTextBtn').addEventListener('click', async () => {
+  const apiKey = document.getElementById('globalApiKey').value.trim();
+  const model = document.getElementById('textModelSelect').value;
+  const text = document.getElementById('textarea').value.trim();
+  const btn = document.getElementById('aiProcessTextBtn');
+  
+  if (!apiKey) return showError("❌ 请输入全局 API Key");
+  if (!text) return showError("❌ 请在左侧文本区输入请求内容");
+  
+  localStorage.setItem('datxy_global_api_key', apiKey);
+  switchTab('text');
+  btn.disabled = true;
+  btn.innerText = "⏳ 正在处理...";
+  
+  const reqPayload = {
+    model: model,
+    messages: [{ role: "system", content: "你是一个文本处理助手。回复不超500字。" }, { role: "user", content: text }],
+    stream: false,
+    max_tokens: 1000
+  };
+  
+  try {
+    const res = await fetch("https://api.poixe.com/v1/chat/completions", {
+      method: "POST",
+      headers: { "Content-Type": "application/json", "Authorization": `Bearer ${apiKey}` },
+      body: JSON.stringify(reqPayload)
+    });
+    
+    if (!res.ok) throw new Error(`HTTP ${res.status}`);
+    const result = await res.json();
+    logApiCall('文本单次处理', 'https://api.poixe.com/v1/chat/completions', reqPayload, result, false);
+    
+    if (result.choices && result.choices[0] && result.choices[0].message) {
+      document.getElementById('textarea').value = result.choices[0].message.content;
+    } else {
+      document.getElementById('textarea').value = JSON.stringify(result, null, 2);
+    }
+    updateStats();
+  } catch(e) {
+    showError("❌ 请求失败: " + e.message);
+    logApiCall('文本单次处理', 'https://api.poixe.com/v1/chat/completions', reqPayload, { error: e.message }, true);
+  } finally {
+    btn.disabled = false;
+    btn.innerText = "🤖 AI 处理文本";
+  }
+});
+
+/* ===== 4. AI 图像生成 ===== */
+function updateResolutionState() {
+  const modelSelect = document.getElementById('imageModelSelect');
+  const imageSizeSelect = document.getElementById('imageSize');
+  imageSizeSelect.disabled = (modelSelect.value !== 'nano-banana-pro');
+}
+
+document.getElementById('generateBtn').addEventListener('click', async () => {
+  const apiKey = document.getElementById('globalApiKey').value.trim();
+  const model = document.getElementById('imageModelSelect').value;
+  const prompt = document.getElementById('imagePrompt').value.trim();
+  const aspectRatio = document.getElementById('aspectRatio').value.split(' ')[0];
+  const imageSize = document.getElementById('imageSize').value.split(' ')[0];
+  const btn = document.getElementById('generateBtn');
+  
+  if (!apiKey) return showError("❌ 请在顶部输入全局 API Key");
+  if (!prompt) return showError("❌ 图像提示词不能为空");
+  
+  localStorage.setItem('datxy_global_api_key', apiKey);
+  switchTab('image');
+  
+  document.getElementById('imagePlaceholder').style.display = "none";
+  document.getElementById('aiResultWrapper').style.display = "none";
+  document.getElementById('imageLoader').style.display = "block";
+  btn.disabled = true;
+  btn.innerText = "⏳ 正在绘制中...";
+  
+  const requestBody = {
+    contents: [ { parts: [ { text: prompt } ] } ],
+    generationConfig: {
+      responseModalities: ["Text", "Image"],
+      imageConfig: { aspectRatio: aspectRatio, ...(model === 'nano-banana-pro' && { imageSize: imageSize }) }
+    }
+  };
+  
+  try {
+    const response = await fetch(`https://api.poixe.com/v1beta/models/${model}:generateContent`, {
+      method: 'POST',
+      headers: { 'x-goog-api-key': apiKey, 'Content-Type': 'application/json' },
+      body: JSON.stringify(requestBody)
+    });
+    
+    if (!response.ok) {
+      const errData = await response.json().catch(() => ({}));
+      throw new Error(errData.error?.message || `HTTP ${response.status}`);
+    }
+    
+    const data = await response.json();
+    
+    let logData = JSON.parse(JSON.stringify(data));
+    try {
+      if(logData.candidates && logData.candidates[0] && logData.candidates[0].content && logData.candidates[0].content.parts){
+        logData.candidates[0].content.parts.forEach(p => {
+          if(p.inlineData && p.inlineData.data) p.inlineData.data = "[Base64 Data Truncated For Log...]";
+        });
+      }
+    } catch(e){}
+    logApiCall('图像生成', `https://api.poixe.com/v1beta/models/${model}:generateContent`, requestBody, logData, false);
+    
+    if (data.candidates && data.candidates.length > 0) {
+      let imageUrl = "";
+      data.candidates[0].content.parts.forEach(part => {
+        if (part.inlineData) imageUrl = `data:${part.inlineData.mimeType || 'image/png'};base64,${part.inlineData.data}`;
+      });
+      
+      if (imageUrl) {
+        document.getElementById('aiResultImage').src = imageUrl;
+        document.getElementById('aiResultWrapper').style.display = "flex";
+      } else {
+        showError("⚠️ 未返回图片数据");
+        document.getElementById('imagePlaceholder').style.display = "flex";
+      }
+    } else {
+      showError("❌ 未获取到生成结果");
+      document.getElementById('imagePlaceholder').style.display = "flex";
+    }
+  } catch (error) {
+    showError("❌ 生成失败: " + error.message);
+    document.getElementById('imagePlaceholder').style.display = "flex";
+    logApiCall('图像生成', `https://api.poixe.com/v1beta/models/${model}:generateContent`, requestBody, { error: error.message }, true);
+  } finally {
+    document.getElementById('imageLoader').style.display = "none";
+    btn.disabled = false;
+    btn.innerText = "🚀 开始绘制图像";
+  }
+});
+
+function downloadImage() {
+  const img = document.getElementById('aiResultImage');
+  if (!img.src) return;
+  const link = document.createElement('a');
+  link.href = img.src;
+  link.download = `DatXY_Vision_${new Date().getTime()}.png`;
+  document.body.appendChild(link);
+  link.click();
+  document.body.removeChild(link);
+}
+
+/* ===== 5. 文件转码与媒体解析 ===== */
+function parseMimeFromDataURI(dataURI) {
+  const m = /^data:([^;,]+)[^,]*,/.exec(dataURI);
+  return m ? m[1].trim() : '';
+}
+
+document.getElementById('btnToB64').addEventListener('click', () => {
+  const file = document.getElementById('fileInput').files[0];
+  if(!file) return showError('❌ 请选择一个文件');
+  
+  if (file.type.startsWith('video/') && file.size > 5 * 1024 * 1024) {
+    return showError('❌ 视频文件大于5MB，不支持直接转码');
+  }
+  
+  const btn = document.getElementById('btnToB64');
+  btn.innerText = "⏳ 处理中...";
+  const reader = new FileReader();
+  reader.onload = e => {
+    document.getElementById('textarea').value = e.target.result;
+    switchTab('text');
+    updateStats();
+    btn.innerText = "文件 ➔ Base64";
+  };
+  reader.onerror = () => { showError("❌ 读取失败"); btn.innerText = "文件 ➔ Base64"; };
+  reader.readAsDataURL(file);
+});
+
+document.getElementById('btnFromB64').addEventListener('click', () => {
+  const s = document.getElementById('textarea').value.trim();
+  if(!s || !s.startsWith('data:')) return showError('❌ 请在文本区提供有效的 Base64 DataURI');
+  
+  const mime = parseMimeFromDataURI(s);
+  if(!mime) return showError('❌ 无法解析 MIME 类型');
+  
+  switchTab('media');
+  document.getElementById('mediaPlaceholder').style.display = 'none';
+  const playerContainer = document.getElementById('mediaPlayerContainer');
+  const frameContainer = document.getElementById('frameDisplayContainer');
+  const wrapper = document.getElementById('mediaPlayerWrapper');
+  
+  // Reset
+  wrapper.innerHTML = "";
+  playerContainer.style.display = 'none';
+  frameContainer.style.display = 'none';
+  currentFilter = '';
+  isFrameMode = false;
+  
+  if(mime.startsWith('image/')){
+    const img = document.getElementById('frameDisplayedImage');
+    img.src = s;
+    currentMediaImage = img;
+    img.style.filter = currentFilter;
+    document.getElementById('mediaToolbar').style.display = 'flex';
+    document.querySelectorAll('.frame-btn').forEach(el => el.style.display = 'none');
+    document.getElementById('framePager').style.display = 'none';
+    frameContainer.style.display = 'flex';
+  } else if(mime.startsWith('audio/') || mime.startsWith('video/')){
+    const media = document.createElement(mime.startsWith('audio/') ? 'audio' : 'video');
+    media.controls = true; media.src = s; media.preload = 'metadata';
+    wrapper.appendChild(media);
+    currentMediaDataURL = s;
+    playerContainer.style.display = 'flex';
+  } else {
+    showError("⚠️ 不支持预览的媒体格式，保留在文本区");
+    switchTab('text');
+  }
+});
+
+document.getElementById('btnDownloadMedia').addEventListener('click', () => {
+  if(!currentMediaDataURL) return;
+  const mime = parseMimeFromDataURI(currentMediaDataURL);
+  const ext = mime.includes('audio/') ? 'mp3' : mime.includes('video/') ? 'mp4' : 'bin';
+  const a = document.createElement('a');
+  a.href = currentMediaDataURL; a.download = `media_decode.${ext}`; a.click();
+});
+
+// 视频抽帧逻辑
+function seekTo(vid, t) {
+  return new Promise(resolve => {
+    const handler = () => { vid.removeEventListener('seeked', handler); resolve(); };
+    vid.addEventListener('seeked', handler, { once: true });
+    vid.currentTime = Math.min(t, Math.max(0, vid.duration - 0.001));
+  });
+}
+
+document.getElementById('btnFrames').addEventListener('click', async () => {
+  const file = document.getElementById('fileInput').files[0];
+  const fps = parseInt(document.getElementById('intervalInput').value, 10);
+  const btn = document.getElementById('btnFrames');
+  
+  if(!file || !file.type.startsWith('video/')) return showError('❌ 请在上方选择一个视频文件');
+  if(isNaN(fps) || fps <= 0) return showError('❌ 请输入有效的抽帧率 (FPS)');
+  
+  btn.innerText = "⏳ 提取中...";
+  const objectURL = URL.createObjectURL(file);
+  const video = document.createElement('video');
+  video.preload = 'metadata'; video.src = objectURL;
+  
+  video.onloadedmetadata = async () => {
+    extractedImages = [];
+    currentImageIndex = -1;
+    currentFilter = '';
+    isFrameMode = true;
+    
+    switchTab('media');
+    document.getElementById('mediaPlaceholder').style.display = 'none';
+    document.getElementById('mediaPlayerContainer').style.display = 'none';
+    document.getElementById('frameDisplayContainer').style.display = 'flex';
+    
+    document.getElementById('mediaToolbar').style.display = 'flex';
+    document.querySelectorAll('.frame-btn').forEach(el => el.style.display = 'inline-flex');
+    document.getElementById('framePager').style.display = 'block';
+    
+    const frameDuration = 1 / fps;
+    const total = Math.floor(video.duration * fps) + 1;
+    let currentTime = 0;
+    
+    for(let i=0; i<total; i++){
+      await seekTo(video, currentTime);
+      const canvas = document.createElement('canvas');
+      canvas.width = video.videoWidth; canvas.height = video.videoHeight;
+      canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
+      extractedImages.push({ url: canvas.toDataURL('image/png'), time: currentTime });
+      document.getElementById('progressText') && (document.getElementById('progressText').innerText = `抽帧中: ${i+1}/${total}`);
+      currentTime += frameDuration;
+    }
+    
+    btn.innerText = "🎞️ 提取视频帧";
+    if(extractedImages.length > 0){
+      currentImageIndex = 0; displayExtractedFrame();
+    } else {
+      showError('❌ 未能提取到任何帧');
+    }
+  };
+});
+
+function displayExtractedFrame() {
+  if(currentImageIndex < 0 || currentImageIndex >= extractedImages.length) return;
+  const f = extractedImages[currentImageIndex];
+  const img = document.getElementById('frameDisplayedImage');
+  img.src = f.url;
+  currentMediaImage = img;
+  img.style.filter = currentFilter;
+  document.getElementById('framePager').textContent = `[ ${currentImageIndex + 1} / ${extractedImages.length} ] 时间轴: ${f.time.toFixed(2)} 秒`;
+}
+
+document.getElementById('prevButton').addEventListener('click', () => { if(currentImageIndex > 0) { currentImageIndex--; displayExtractedFrame(); } });
+document.getElementById('nextButton').addEventListener('click', () => { if(currentImageIndex < extractedImages.length - 1) { currentImageIndex++; displayExtractedFrame(); } });
+document.getElementById('btnDownloadFrame').addEventListener('click', () => {
+  if(extractedImages.length === 0) return;
+  const f = extractedImages[currentImageIndex];
+  const a = document.createElement('a'); a.href = f.url; a.download = `frame_${String(currentImageIndex+1).padStart(4,'0')}.png`; a.click();
+});
+
+// 图像滤镜
+document.getElementById('btnInvert').addEventListener('click', () => { currentFilter = (currentFilter + ' invert(1)').trim(); if(currentMediaImage) currentMediaImage.style.filter = currentFilter; });
+document.getElementById('btnGray').addEventListener('click', () => { currentFilter = (currentFilter + ' grayscale(1)').trim(); if(currentMediaImage) currentMediaImage.style.filter = currentFilter; });
+document.getElementById('btnRestore').addEventListener('click', () => { currentFilter = ''; if(currentMediaImage) currentMediaImage.style.filter = currentFilter; });
+document.getElementById('btnDownloadEditedImage').addEventListener('click', () => {
+  if(!currentMediaImage || !currentMediaImage.src) return;
+  const canvas = document.createElement('canvas'); const ctx = canvas.getContext('2d');
+  const w = currentMediaImage.naturalWidth || currentMediaImage.width;
+  const h = currentMediaImage.naturalHeight || currentMediaImage.height;
+  canvas.width = w; canvas.height = h; ctx.filter = currentFilter || 'none';
+  ctx.drawImage(currentMediaImage, 0, 0, w, h);
+  const a = document.createElement('a'); a.href = canvas.toDataURL('image/png'); a.download = 'processed_image.png'; a.click();
+});
+
+
+/* 修改点：彻底清空各个视图和临时变量的所有状态 */
+document.getElementById('btnClearOutput').addEventListener('click', () => {
+  // 1. 清空文本及查找框
+  document.getElementById('textarea').value = "";
+  document.getElementById('search-input').value = "";
+  document.getElementById('replace-input').value = "";
+  updateStats();
+  
+  // 2. 清空媒体区及文件框
+  document.getElementById('fileInput').value = "";
+  extractedImages = []; currentImageIndex = -1; currentMediaImage = null; currentFilter = '';
+  document.getElementById('mediaPlaceholder').style.display = 'flex';
+  document.getElementById('mediaPlayerContainer').style.display = 'none';
+  document.getElementById('frameDisplayContainer').style.display = 'none';
+  document.getElementById('mediaPlayerWrapper').innerHTML = '';
+  
+  // 3. 清空聊天记忆
+  chatContext = [{ role: "system", content: "你是一个得力的 AI 助手，请简明扼要地回答问题。" }];
+  document.getElementById('chatHistory').innerHTML = '<div style="color: var(--text-tertiary); text-align: center; margin-top: 50px; font-size: 0.9rem;">对话记忆已清空。请在下方输入问题。</div>';
+  
+  // 4. 清空 AI 图像生成区
+  document.getElementById('imagePlaceholder').style.display = "flex";
+  document.getElementById('aiResultWrapper').style.display = "none";
+  document.getElementById('aiResultImage').src = "";
+  document.getElementById('imagePrompt').value = "";
+  
+  // 5. 清除 API 调试日志与错误提示
+  clearApiLogs();
+  document.getElementById('errorMsg').style.display = "none";
+});
+
+/* ===== 6. 文本正则与编辑区 ===== */
+const textarea = document.getElementById("textarea");
+const searchInput = document.getElementById("search-input");
+const replaceInput = document.getElementById("replace-input");
+
+textarea.addEventListener("input", updateStats);
+
+document.getElementById("remove-duplicates-btn").addEventListener("click", () => {
+  const textList = textarea.value.split("\n");
+  const uniqueList = [...new Set(textList)];
+  document.getElementById("duplicate").innerHTML = `重复：<span>${textList.length - uniqueList.length}</span>`;
+  textarea.value = uniqueList.join("\n");
+  updateStats();
+});
+
+document.getElementById("preserve-matches-btn").addEventListener("click", function() {
+  try {
+    const regex = new RegExp(searchInput.value, 'g');
+    let matches = textarea.value.match(regex);
+    if (matches && matches.length > 0) {
+      textarea.value = matches.join("\n");
+      document.getElementById("regex-replace-count").innerHTML = `正则：<span>${matches.length}</span>`;
+    } else {
+      document.getElementById("regex-replace-count").innerHTML = `正则：<span>0</span>`;
+    }
+  } catch (e) { showError("❌ 正则表达式有误"); }
+});
+
+document.getElementById("replace-btn").addEventListener("click", () => {
+  if (searchInput.value !== "") {
+    const textArr = textarea.value.split(searchInput.value);
+    document.getElementById("replace-count").innerHTML = `替换：<span>${textArr.length - 1}</span>`;
+    textarea.value = textArr.join(replaceInput.value);
+    updateStats();
+  }
+});
+
+document.getElementById("regex-replace-btn").addEventListener("click", () => {
+  if (searchInput.value !== "") {
+    try {
+      let matchCount = (textarea.value.match(new RegExp(searchInput.value, 'g')) || []).length;
+      textarea.value = textarea.value.replace(new RegExp(searchInput.value, 'g'), replaceInput.value);
+      document.getElementById("regex-replace-count").innerHTML = `正则：<span>${matchCount}</span>`;
+      updateStats();
+    } catch (e) { showError("❌ 正则表达式有误"); }
+  }
+});
+
+function updateStats() {
+  const text = textarea.value;
+  document.getElementById("total").innerHTML = `总数：<span>${text.length}</span>`;
+  document.getElementById("chinese").innerHTML = `汉字：<span>${(text.match(/[\u4e00-\u9fa5]/g) || []).length}</span>`;
+  document.getElementById("punctuation").innerHTML = `标点：<span>${(text.match(/[^\u4e00-\u9fa5\w]/g) || []).length}</span>`;
+  document.getElementById("alphabet").innerHTML = `字母：<span>${(text.match(/[a-zA-Z]/g) || []).length}</span>`;
+  document.getElementById("numbers").innerHTML = `数字：<span>${(text.match(/\d/g) || []).length}</span>`;
+  
+  const searchVal = searchInput.value;
+  if(searchVal) {
+    document.getElementById("replace-count").innerHTML = `替换：<span>${text.split(searchVal).length - 1}</span>`;
+    try{ document.getElementById("regex-replace-count").innerHTML = `正则：<span>${(text.match(new RegExp(searchVal, 'g')) || []).length}</span>`; }catch(e){}
+  }
+  
+  const lines = text.split('\n'); const map = new Map(); let dup=0;
+  for(const line of lines){ if(line) map.set(line,(map.get(line)||0)+1); }
+  for(const cnt of map.values()){ if(cnt>1) dup += (cnt-1); }
+  document.getElementById("duplicate").innerHTML = `重复：<span>${dup}</span>`;
+}
+
+document.getElementById("copy-btn").addEventListener("click", function() {
+  let textToCopy = textarea.value || textarea.getAttribute("placeholder");
+  const tempInput = document.createElement("textarea");
+  document.body.appendChild(tempInput); tempInput.value = textToCopy;
+  tempInput.select(); document.execCommand("copy"); document.body.removeChild(tempInput);
+  
+  // UI 反馈
+  const originalText = this.innerHTML;
+  this.innerHTML = "已复";
+  setTimeout(() => { this.innerHTML = originalText; }, 2000);
+});
+
+document.getElementById("paste-btn").addEventListener("click", function() {
+  navigator.clipboard.readText().then(clipText => {
+    textarea.value = clipText;
+    updateStats();
+    
+    // UI 反馈
+    const originalText = this.innerHTML;
+    this.innerHTML = "已粘";
+    setTimeout(() => { this.innerHTML = originalText; }, 2000);
+  }).catch(err => {
+    showError("❌ 无法访问剪贴板，请手动粘贴");
+  });
+});
+
+/* 修改点：新增了清空文本与网页预览功能 */
+document.getElementById("clear-text-btn").addEventListener("click", function() {
+  textarea.value = "";
+  updateStats();
+});
+
+document.getElementById("preview-web-btn").addEventListener("click", function() {
+  const htmlContent = textarea.value.trim();
+  if (!htmlContent) return showError("❌ 文本区为空，无法预览");
+  
+  // 生成 Blob URL 进行安全的新标签页渲染
+  const blob = new Blob([htmlContent], { type: 'text/html;charset=utf-8' });
+  const url = URL.createObjectURL(blob);
+  window.open(url, '_blank');
+});
+
+// 7. Web Speech Synthesis (TTS)
+(function() {
+  const voiceSelect = document.getElementById('tts-voiceSelect');
+  const filterChineseBox = document.getElementById('tts-filterChinese');
+  let speaking = false;
+  
+  function listVoices() {
+    const voices = window.speechSynthesis.getVoices();
+    voiceSelect.innerHTML = '';
+    const filtered = filterChineseBox.checked ? voices.filter(v => v.lang && v.lang.toLowerCase().startsWith('zh')) : voices;
+    if (filtered.length === 0) return voiceSelect.innerHTML = '<option disabled>无可用语音</option>';
+    filtered.forEach(v => {
+      const opt = document.createElement('option');
+      opt.value = v.name; opt.textContent = `${v.name} (${v.lang})`; voiceSelect.appendChild(opt);
+    });
+    const saved = localStorage.getItem('tts_voice_name');
+    if (saved) {
+      const idx = [...voiceSelect.options].findIndex(o => o.value === saved);
+      if (idx >= 0) voiceSelect.selectedIndex = idx;
+    }
+  }
+  
+  document.getElementById('tts-start').addEventListener('click', () => {
+    const text = document.getElementById('textarea').value.trim();
+    if (!text) return showError('❌ 请在左侧文本区输入要朗读的内容');
+    const v = window.speechSynthesis.getVoices().find(v => v.name === voiceSelect.value);
+    if (!v) return showError('❌ 请选择语音');
+    
+    if (speaking) { window.speechSynthesis.cancel(); }
+    speaking = true;
+    switchTab('text');
+    
+    const chunks = text.split(/\n+/).map(s=>s.trim()).filter(Boolean).flatMap(line => line.match(/[^。！？!?；;\.…]+[。！？!?；;\…]?/g) || [line]);
+    const next = () => {
+      if (!speaking || chunks.length === 0) { speaking = false; return; }
+      const utt = new SpeechSynthesisUtterance(chunks.shift().trim());
+      utt.voice = v; utt.lang = v.lang;
+      utt.rate = parseFloat(document.getElementById('tts-rate').value);
+      utt.pitch = parseFloat(document.getElementById('tts-pitch').value);
+      utt.volume = parseFloat(document.getElementById('tts-volume').value);
+      utt.onend = next; utt.onerror = next;
+      window.speechSynthesis.speak(utt);
+    };
+    next();
+    localStorage.setItem('tts_voice_name', v.name);
+  });
+  
+  document.getElementById('tts-stop').addEventListener('click', () => { speaking = false; window.speechSynthesis.cancel(); });
+  filterChineseBox.addEventListener('change', listVoices);
+  voiceSelect.addEventListener('change', () => { localStorage.setItem('tts_voice_name', voiceSelect.value); });
+  
+  document.getElementById('tts-rate').addEventListener('input', (e) => document.getElementById('tts-rate-val').textContent = e.target.value + 'x');
+  document.getElementById('tts-pitch').addEventListener('input', (e) => document.getElementById('tts-pitch-val').textContent = e.target.value);
+  document.getElementById('tts-volume').addEventListener('input', (e) => document.getElementById('tts-volume-val').textContent = e.target.value);
+  
+  listVoices();
+  if (typeof window.speechSynthesis !== 'undefined') window.speechSynthesis.onvoiceschanged = listVoices;
+})();