☰

AI Image Description Generator

使用AI生成网页图片描述

当前为 2024-12-03 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name         AI Image Description Generator
  3. // @namespace    http://tampermonkey.net/
  4. // @version      1.4
  5. // @description  使用AI生成网页图片描述
  6. // @author       AlphaCat
  7. // @match        *://*/*
  8. // @grant        GM_xmlhttpRequest
  9. // @grant        GM_addStyle
  10. // @grant        GM_setValue
  11. // @grant        GM_getValue
  12. // @grant        GM_registerMenuCommand
  13. // @grant        GM_setClipboard
  14. // @license      MIT
  15. // ==/UserScript==
  16.  
  17. (function() {
  18.     'use strict';
  19.  
  20.     // 添加样式
  21.     GM_addStyle(`
  22.         .ai-config-modal {
  23.             position: fixed;
  24.             top: 50%;
  25.             left: 50%;
  26.             transform: translate(-50%, -50%);
  27.             background: white;
  28.             padding: 20px;
  29.             border-radius: 8px;
  30.             box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  31.             z-index: 10000;
  32.             min-width: 500px;
  33.             height: auto;
  34.         }
  35.         .ai-config-modal h3 {
  36.             margin: 0 0 15px 0;
  37.             font-size: 14px;
  38.             font-weight: bold;
  39.             color: #333;
  40.         }
  41.         .ai-config-modal label {
  42.             display: inline-block;
  43.             font-size: 12px;
  44.             font-weight: bold;
  45.             color: #333;
  46.             margin: 0;
  47.             line-height: normal;
  48.             height: auto;
  49.         }
  50.         .ai-config-modal .input-wrapper {
  51.             position: relative;
  52.             display: flex;
  53.             align-items: center;
  54.         }
  55.         .ai-config-modal input {
  56.             display: block;
  57.             width: 100%;
  58.             padding: 2px 24px 2px 2px;
  59.             margin: 2px;
  60.             border: 1px solid #ddd;
  61.             border-radius: 4px;
  62.             font-size: 13px;
  63.             line-height: normal;
  64.             height: auto;
  65.             box-sizing: border-box;
  66.         }
  67.         .ai-config-modal .input-icon {
  68.             position: absolute;
  69.             right: 4px;
  70.             width: 16px;
  71.             height: 16px;
  72.             cursor: pointer;
  73.             display: flex;
  74.             align-items: center;
  75.             justify-content: center;
  76.             color: #666;
  77.             font-size: 12px;
  78.             user-select: none;
  79.         }
  80.         .ai-config-modal .clear-icon {
  81.             right: 24px;
  82.         }
  83.         .ai-config-modal .toggle-password {
  84.             right: 4px;
  85.         }
  86.         .ai-config-modal .input-icon:hover {
  87.             color: #333;
  88.         }
  89.         .ai-config-modal .input-group {
  90.             margin-bottom: 12px;
  91.             height: auto;
  92.             display: flex;
  93.             flex-direction: column;
  94.         }
  95.         .ai-config-modal .button-row {
  96.             display: flex;
  97.             gap: 10px;
  98.             align-items: center;
  99.             margin-top: 5px;
  100.         }
  101.         .ai-config-modal .check-button {
  102.             padding: 4px 8px;
  103.             border: none;
  104.             border-radius: 4px;
  105.             background: #007bff;
  106.             color: white;
  107.             cursor: pointer;
  108.             font-size: 12px;
  109.         }
  110.         .ai-config-modal .check-button:hover {
  111.             background: #0056b3;
  112.         }
  113.         .ai-config-modal .check-button:disabled {
  114.             background: #cccccc;
  115.             cursor: not-allowed;
  116.         }
  117.         .ai-config-modal select {
  118.             width: 100%;
  119.             padding: 4px;
  120.             border: 1px solid #ddd;
  121.             border-radius: 4px;
  122.             font-size: 13px;
  123.             margin-top: 2px;
  124.         }
  125.         .ai-config-modal .status-text {
  126.             font-size: 12px;
  127.             margin-left: 10px;
  128.         }
  129.         .ai-config-modal .status-success {
  130.             color: #28a745;
  131.         }
  132.         .ai-config-modal .status-error {
  133.             color: #dc3545;
  134.         }
  135.         .ai-config-modal button {
  136.             margin: 10px 5px;
  137.             padding: 8px 15px;
  138.             border: none;
  139.             border-radius: 4px;
  140.             cursor: pointer;
  141.             font-size: 14px;
  142.         }
  143.         .ai-config-modal button#ai-save-config {
  144.             background: #4CAF50;
  145.             color: white;
  146.         }
  147.         .ai-config-modal button#ai-cancel-config {
  148.             background: #dc3545;
  149.             color: white;
  150.         }
  151.         .ai-config-modal button:hover {
  152.             opacity: 0.9;
  153.         }
  154.         .ai-floating-btn {
  155.             position: fixed;
  156.             width: 32px;
  157.             height: 32px;
  158.             background: #4CAF50;
  159.             color: white;
  160.             border-radius: 50%;
  161.             cursor: move;
  162.             z-index: 9999;
  163.             box-shadow: 0 2px 5px rgba(0,0,0,0.2);
  164.             display: flex;
  165.             align-items: center;
  166.             justify-content: center;
  167.             user-select: none;
  168.             transition: background-color 0.3s;
  169.         }
  170.         .ai-floating-btn:hover {
  171.             background: #45a049;
  172.         }
  173.         .ai-floating-btn svg {
  174.             width: 20px;
  175.             height: 20px;
  176.             fill: white;
  177.         }
  178.         .ai-menu {
  179.             position: absolute;
  180.             background: white;
  181.             border-radius: 5px;
  182.             box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  183.             padding: 8px;
  184.             z-index: 10000;
  185.             display: flex;
  186.             gap: 8px;
  187.         }
  188.         .ai-menu-item {
  189.             width: 32px;
  190.             height: 32px;
  191.             padding: 6px;
  192.             cursor: pointer;
  193.             border-radius: 50%;
  194.             display: flex;
  195.             align-items: center;
  196.             justify-content: center;
  197.             transition: background-color 0.3s;
  198.         }
  199.         .ai-menu-item:hover {
  200.             background: #f5f5f5;
  201.         }
  202.         .ai-menu-item svg {
  203.             width: 20px;
  204.             height: 20px;
  205.             fill: #666;
  206.         }
  207.         .ai-menu-item:hover svg {
  208.             fill: #4CAF50;
  209.         }
  210.         .ai-modal-overlay {
  211.             position: fixed;
  212.             top: 0;
  213.             left: 0;
  214.             right: 0;
  215.             bottom: 0;
  216.             background: rgba(0, 0, 0, 0.5);
  217.             z-index: 9999;
  218.         }
  219.         .ai-image-options {
  220.             display: flex;
  221.             flex-direction: column;
  222.             gap: 10px;
  223.             margin: 15px 0;
  224.         }
  225.         .ai-image-options button {
  226.             padding: 8px 15px;
  227.             border: none;
  228.             border-radius: 4px;
  229.             background: #4CAF50;
  230.             color: white;
  231.             cursor: pointer;
  232.             transition: background-color 0.3s;
  233.             font-size: 14px;
  234.         }
  235.         .ai-image-options button:hover {
  236.             background: #45a049;
  237.         }
  238.         #ai-cancel {
  239.             background: #dc3545;
  240.             color: white;
  241.         }
  242.         #ai-cancel:hover {
  243.             opacity: 0.9;
  244.         }
  245.         .ai-toast {
  246.             position: fixed;
  247.             top: 20px;
  248.             left: 50%;
  249.             transform: translateX(-50%);
  250.             padding: 10px 20px;
  251.             background: rgba(0, 0, 0, 0.8);
  252.             color: white;
  253.             border-radius: 4px;
  254.             font-size: 14px;
  255.             z-index: 10000;
  256.             animation: fadeInOut 3s ease;
  257.             pointer-events: none;
  258.             white-space: pre-line;
  259.             text-align: center;
  260.             max-width: 80%;
  261.             box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  262.         }
  263.         @keyframes fadeInOut {
  264.             0% { opacity: 0; transform: translate(-50%, 10px); }
  265.             10% { opacity: 1; transform: translate(-50%, 0); }
  266.             90% { opacity: 1; transform: translate(-50%, 0); }
  267.             100% { opacity: 0; transform: translate(-50%, -10px); }
  268.         }
  269.         .ai-config-modal .button-group {
  270.             display: flex;
  271.             justify-content: flex-end;
  272.             gap: 10px;
  273.             margin-top: 20px;
  274.         }
  275.         .ai-config-modal .button-group button {
  276.             padding: 6px 16px;
  277.             border: none;
  278.             border-radius: 4px;
  279.             cursor: pointer;
  280.             font-size: 14px;
  281.             transition: background-color 0.2s;
  282.         }
  283.         .ai-config-modal .save-button {
  284.             background: #007bff;
  285.             color: white;
  286.         }
  287.         .ai-config-modal .save-button:hover {
  288.             background: #0056b3;
  289.         }
  290.         .ai-config-modal .save-button:disabled {
  291.             background: #cccccc;
  292.             cursor: not-allowed;
  293.         }
  294.         .ai-config-modal .cancel-button {
  295.             background: #f8f9fa;
  296.             color: #333;
  297.         }
  298.         .ai-config-modal .cancel-button:hover {
  299.             background: #e2e6ea;
  300.         }
  301.         .ai-selecting-image {
  302.             cursor: crosshair !important;
  303.         }
  304.         .ai-selecting-image * {
  305.             cursor: crosshair !important;
  306.         }
  307.         .ai-image-description {
  308.             position: fixed;
  309.             background: rgba(0, 0, 0, 0.8);
  310.             color: white;
  311.             padding: 10px 15px;
  312.             border-radius: 4px;
  313.             font-size: 14px;
  314.             line-height: 1.5;
  315.             max-width: 300px;
  316.             word-wrap: break-word;
  317.             z-index: 10000;
  318.             pointer-events: none;
  319.             animation: fadeIn 0.3s ease;
  320.         }
  321.         @keyframes fadeIn {
  322.             from { opacity: 0; }
  323.             to { opacity: 1; }
  324.         }
  325.         .ai-result-modal {
  326.             position: fixed;
  327.             top: 50%;
  328.             left: 50%;
  329.             transform: translate(-50%, -50%);
  330.             background: white;
  331.             padding: 20px;
  332.             border-radius: 8px;
  333.             box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  334.             z-index: 10001;
  335.             max-width: 80%;
  336.             width: 500px;
  337.         }
  338.         .ai-result-modal h3 {
  339.             margin: 0 0 15px 0;
  340.             font-size: 16px;
  341.             color: #333;
  342.         }
  343.         .ai-result-modal .code-block {
  344.             background: #f5f5f5;
  345.             padding: 15px;
  346.             border-radius: 4px;
  347.             margin: 10px 0;
  348.             cursor: pointer;
  349.             position: relative;
  350.             white-space: pre-wrap;
  351.             word-wrap: break-word;
  352.             font-family: monospace;
  353.             transition: background-color 0.2s;
  354.         }
  355.         .ai-result-modal .code-block:hover {
  356.             background: #ebebeb;
  357.         }
  358.         .ai-result-modal .code-block::after {
  359.             content: "点击复制";
  360.             position: absolute;
  361.             top: 5px;
  362.             right: 5px;
  363.             font-size: 12px;
  364.             color: #666;
  365.             background: rgba(255, 255, 255, 0.8);
  366.             padding: 2px 6px;
  367.             border-radius: 3px;
  368.             opacity: 0;
  369.             transition: opacity 0.2s;
  370.         }
  371.         .ai-result-modal .code-block:hover::after {
  372.             opacity: 1;
  373.         }
  374.         .ai-result-modal .code-block.copied::after {
  375.             content: "已复制！";
  376.             color: #4CAF50;
  377.         }
  378.         .ai-result-modal .close-button {
  379.             position: absolute;
  380.             top: 10px;
  381.             right: 10px;
  382.             background: none;
  383.             border: none;
  384.             font-size: 20px;
  385.             cursor: pointer;
  386.             color: #666;
  387.             padding: 5px;
  388.             line-height: 1;
  389.         }
  390.         .ai-result-modal .close-button:hover {
  391.             color: #333;
  392.         }
  393.     `);
  394.  
  395.     // 密码显示切换功能
  396.     function togglePassword(element) {
  397.         const input = element.parentElement.querySelector('input');
  398.         if (input.type === 'password') {
  399.             input.type = 'text';
  400.             element.textContent = '👁️‍🗨️';
  401.         } else {
  402.             input.type = 'password';
  403.             element.textContent = '👁️';
  404.         }
  405.     }
  406.  
  407.     // 检查API配置并获取可用模型
  408.     async function checkApiAndGetModels(apiEndpoint, apiKey) {
  409.         try {
  410.             const response = await fetch(`${apiEndpoint}/v1/models`, {
  411.                 method: 'GET',
  412.                 headers: {
  413.                     'Authorization': `Bearer ${apiKey}`,
  414.                     'Content-Type': 'application/json'
  415.                 }
  416.             });
  417.  
  418.             if (!response.ok) {
  419.                 throw new Error(`HTTP error! status: ${response.status}`);
  420.             }
  421.  
  422.             const result = await response.json();
  423.             if (result.data && Array.isArray(result.data)) {
  424.                 // 过滤出多模态模型
  425.                 const multimodalModels = result.data
  426.                     .filter(model => model.id.includes('vision') || model.id.includes('gpt-4-v'))
  427.                     .map(model => ({
  428.                         id: model.id,
  429.                         name: model.id
  430.                     }));
  431.                 return multimodalModels;
  432.             } else {
  433.                 throw new Error('Invalid response format');
  434.             }
  435.         } catch (error) {
  436.             console.error('Error fetching models:', error);
  437.             throw error;
  438.         }
  439.     }
  440.  
  441.     // 检查API配置
  442.     async function checkApiConfig() {
  443.         const apiEndpoint = GM_getValue('apiEndpoint', '').trim();
  444.         const apiKey = GM_getValue('apiKey', '').trim();
  445.         const selectedModel = GM_getValue('selectedModel', '').trim();
  446.  
  447.         if (!apiEndpoint || !apiKey || !selectedModel) {
  448.             alert('请先配置API Endpoint、API Key和模型');
  449.             showConfigModal();
  450.             return false;
  451.         }
  452.  
  453.         try {
  454.             const models = await checkApiAndGetModels(apiEndpoint, apiKey);
  455.             if (models.length === 0) {
  456.                 alert('无法获取可用模型列表，请检查API配置是否正确');
  457.                 return false;
  458.             }
  459.             // 可以在这里添加模型选择的逻辑
  460.             return true;
  461.         } catch (error) {
  462.             console.error('Error checking API config:', error);
  463.             alert('API配置验证失败，请检查配置是否正确');
  464.             return false;
  465.         }
  466.     }
  467.  
  468.     // 描述所有图片
  469.     function describeAllImages() {
  470.         const images = document.querySelectorAll('img');
  471.         console.log('开始处理所有图片，共找到:', images.length, '张图片');
  472.         processImages(Array.from(images));
  473.     }
  474.  
  475.     // 描述可见图片
  476.     function describeVisibleImages() {
  477.         const images = Array.from(document.querySelectorAll('img')).filter(img => {
  478.             const rect = img.getBoundingClientRect();
  479.             return (
  480.                 rect.top >= 0 &&
  481.                 rect.left >= 0 &&
  482.                 rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
  483.                 rect.right <= (window.innerWidth || document.documentElement.clientWidth)
  484.             );
  485.         });
  486.         console.log('开始处理可见图片，共找到:', images.length, '张图片');
  487.         processImages(images);
  488.     }
  489.  
  490.     // 处理图片
  491.     async function processImages(images) {
  492.         const apiKey = GM_getValue('apiKey', '');
  493.         const endpoint = GM_getValue('apiEndpoint', '');
  494.         const selectedModel = GM_getValue('selectedModel', '');
  495.  
  496.         for (const img of images) {
  497.             try {
  498.                 // 如果图片已经有alt文本，跳过
  499.                 if (img.alt && img.alt.length > 0) {
  500.                     console.log('图片已有描述，跳过:', img.alt);
  501.                     continue;
  502.                 }
  503.  
  504.                 // 获取图片URL
  505.                 const imageUrl = img.src;
  506.                 console.log('处理图片:', imageUrl);
  507.  
  508.                 // 调用API获取描述
  509.                 const description = await getImageDescription(imageUrl, endpoint, apiKey, selectedModel);
  510.                 
  511.                 // 更新图片alt文本
  512.                 if (description) {
  513.                     img.alt = description;
  514.                     img.title = description;
  515.                     console.log('已添加描述:', description);
  516.                 }
  517.             } catch (error) {
  518.                 console.error('处理图片时出错:', error);
  519.             }
  520.         }
  521.     }
  522.  
  523.     // 获取图片的Base64内容
  524.     async function getImageBase64(imageUrl) {
  525.         console.log('[Debug] Starting image to Base64 conversion for:', imageUrl);
  526.         try {
  527.             const response = await fetch(imageUrl);
  528.             console.log('[Debug] Image fetch response:', response.status, response.statusText);
  529.             
  530.             const blob = await response.blob();
  531.             console.log('[Debug] Image blob size:', blob.size, 'bytes');
  532.             
  533.             return new Promise((resolve, reject) => {
  534.                 const reader = new FileReader();
  535.                 reader.onloadend = () => {
  536.                     const base64 = reader.result.split(',')[1];
  537.                     console.log('[Debug] Base64 conversion completed, length:', base64.length);
  538.                     resolve(base64);
  539.                 };
  540.                 reader.onerror = (error) => {
  541.                     console.error('[Debug] FileReader error:', error);
  542.                     reject(error);
  543.                 };
  544.                 reader.readAsDataURL(blob);
  545.             });
  546.         } catch (error) {
  547.             console.error('[Debug] Error converting image to Base64:', error);
  548.             throw error;
  549.         }
  550.     }
  551.  
  552.     // 调用API获取图片描述
  553.     async function getImageDescription(imageUrl, apiEndpoint, apiKey, selectedModel) {
  554.         console.log('[Debug] Starting image description request:', {
  555.             apiEndpoint,
  556.             selectedModel,
  557.             imageUrl
  558.         });
  559.  
  560.         try {
  561.             const base64Image = await getImageBase64(imageUrl);
  562.             
  563.             const requestBody = {
  564.                 model: selectedModel,
  565.                 messages: [{
  566.                     role: "user",
  567.                     content: [
  568.                         {
  569.                             type: "image_url",
  570.                             image_url: {
  571.                                 url: `data:image/jpeg;base64,${base64Image}`
  572.                             }
  573.                         },
  574.                         {
  575.                             type: "text",
  576.                             text: "Describe the image. Answer in Chinese."
  577.                         }
  578.                     ]
  579.                 }],
  580.                 stream: true
  581.             };
  582.  
  583.             console.log('[Debug] API Request body:', JSON.stringify(requestBody, null, 2));
  584.  
  585.             const response = await fetch(`${apiEndpoint}/chat/completions`, {
  586.                 method: 'POST',
  587.                 headers: {
  588.                     'Authorization': `Bearer ${apiKey}`,
  589.                     'Content-Type': 'application/json'
  590.                 },
  591.                 body: JSON.stringify(requestBody)
  592.             });
  593.  
  594.             console.log('[Debug] API Response status:', response.status, response.statusText);
  595.             
  596.             if (!response.ok) {
  597.                 const errorText = await response.text();
  598.                 console.error('[Debug] API Error response:', errorText);
  599.                 throw new Error(`HTTP error! status: ${response.status}`);
  600.             }
  601.  
  602.             const reader = response.body.getReader();
  603.             const decoder = new TextDecoder();
  604.             let description = '';
  605.             let chunkCounter = 0;
  606.  
  607.             while (true) {
  608.                 const { value, done } = await reader.read();
  609.                 if (done) {
  610.                     console.log('[Debug] Stream completed. Final description:', description);
  611.                     showDescriptionModal(description);
  612.                     break;
  613.                 }
  614.  
  615.                 const chunk = decoder.decode(value);
  616.                 console.log(`[Debug] Received chunk #${++chunkCounter}:`, chunk);
  617.  
  618.                 const lines = chunk.split('\n').filter(line => line.trim() !== '');
  619.  
  620.                 for (const line of lines) {
  621.                     if (line.startsWith('data: ')) {
  622.                         const jsonStr = line.slice(6);
  623.                         if (jsonStr === '[DONE]') {
  624.                             console.log('[Debug] Received [DONE] signal');
  625.                             continue;
  626.                         }
  627.                         
  628.                         try {
  629.                             const jsonData = JSON.parse(jsonStr);
  630.                             console.log('[Debug] Parsed JSON data:', jsonData);
  631.                             
  632.                             const content = jsonData.choices[0]?.delta?.content;
  633.                             if (content) {
  634.                                 description += content;
  635.                                 console.log('[Debug] Updated description:', description);
  636.                                 updateDescriptionTooltip(description);
  637.                             }
  638.                         } catch (e) {
  639.                             console.error('[Debug] Error parsing JSON:', e, 'Raw string:', jsonStr);
  640.                         }
  641.                     }
  642.                 }
  643.             }
  644.  
  645.             return description;
  646.         } catch (error) {
  647.             console.error('[Debug] Error in getImageDescription:', error);
  648.             throw error;
  649.         }
  650.     }
  651.  
  652.     // 显示描述tooltip
  653.     function showDescriptionTooltip(description, x, y) {
  654.         const tooltip = document.createElement('div');
  655.         tooltip.className = 'ai-image-description';
  656.         tooltip.textContent = description;
  657.         tooltip.style.left = `${x}px`;
  658.         tooltip.style.top = `${y}px`;
  659.         document.body.appendChild(tooltip);
  660.         return tooltip;
  661.     }
  662.  
  663.     // 更新描述tooltip内容
  664.     function updateDescriptionTooltip(description) {
  665.         const tooltip = document.querySelector('.ai-image-description');
  666.         if (tooltip) {
  667.             tooltip.textContent = description;
  668.         }
  669.     }
  670.  
  671.     // 移除描述tooltip
  672.     function removeDescriptionTooltip() {
  673.         const tooltip = document.querySelector('.ai-image-description');
  674.         if (tooltip) {
  675.             tooltip.remove();
  676.         }
  677.     }
  678.  
  679.     // 进入图片选择模式
  680.     function enterImageSelectionMode() {
  681.         console.log('[Debug] Entering image selection mode');
  682.         document.body.style.cursor = 'crosshair';
  683.         isSelectionMode = true;
  684.         
  685.         // 创建点击事件处理函数
  686.         const clickHandler = async function(e) {
  687.             e.preventDefault();
  688.             e.stopPropagation();
  689.  
  690.             if (e.target.tagName === 'IMG') {
  691.                 console.log('[Debug] Image clicked:', e.target.src);
  692.                 
  693.                 // 获取配置
  694.                 const endpoint = GM_getValue('apiEndpoint', '');
  695.                 const apiKey = GM_getValue('apiKey', '');
  696.                 const selectedModel = GM_getValue('selectedModel', '');
  697.  
  698.                 console.log('[Debug] Current configuration:', {
  699.                     endpoint,
  700.                     selectedModel,
  701.                     hasApiKey: !!apiKey
  702.                 });
  703.  
  704.                 if (!endpoint || !apiKey || !selectedModel) {
  705.                     showToast('请先完成API配置');
  706.                     exitImageSelectionMode();
  707.                     return;
  708.                 }
  709.  
  710.                 // 显示加载中的tooltip
  711.                 const tooltip = showDescriptionTooltip('正在生成描述...', e.pageX + 10, e.pageY + 10);
  712.  
  713.                 try {
  714.                     await getImageDescription(e.target.src, endpoint, apiKey, selectedModel);
  715.                 } catch (error) {
  716.                     console.error('[Debug] Description generation failed:', error);
  717.                     removeDescriptionTooltip();
  718.                     showToast('生成描述失败: ' + error.message);
  719.                 }
  720.  
  721.                 // 处理完一张图片后自动退出选择模式
  722.                 exitImageSelectionMode();
  723.                 
  724.                 // 重要：移除事件监听器
  725.                 document.removeEventListener('click', clickHandler, true);
  726.             }
  727.         };
  728.  
  729.         // 添加点击事件监听器
  730.         document.addEventListener('click', clickHandler, true);
  731.         
  732.         // ESC键退出选择模式
  733.         const escHandler = (e) => {
  734.             if (e.key === 'Escape') {
  735.                 exitImageSelectionMode();
  736.                 // 重要：移除所有相关的事件监听器
  737.                 document.removeEventListener('click', clickHandler, true);
  738.                 document.removeEventListener('keydown', escHandler);
  739.             }
  740.         };
  741.         document.addEventListener('keydown', escHandler);
  742.     }
  743.  
  744.     // 退出图片选择模式
  745.     function exitImageSelectionMode() {
  746.         console.log('[Debug] Exiting image selection mode');
  747.         document.body.style.cursor = 'default';
  748.         isSelectionMode = false;
  749.     }
  750.  
  751.     // 显示toast提示
  752.     function showToast(message, duration = 3000) {
  753.         const toast = document.createElement('div');
  754.         toast.className = 'ai-toast';
  755.         toast.textContent = message;
  756.         document.body.appendChild(toast);
  757.         
  758.         setTimeout(() => {
  759.             toast.remove();
  760.         }, duration);
  761.     }
  762.  
  763.     // 检查用户信息
  764.     async function checkUserInfo(apiEndpoint, apiKey) {
  765.         try {
  766.             const response = await fetch(`${apiEndpoint}/v1/user/info`, {
  767.                 method: 'GET',
  768.                 headers: {
  769.                     'Authorization': `Bearer ${apiKey}`
  770.                 }
  771.             });
  772.  
  773.             if (!response.ok) {
  774.                 throw new Error(`HTTP error! status: ${response.status}`);
  775.             }
  776.  
  777.             const result = await response.json();
  778.             console.log('[Debug] User Info API Response:', result);
  779.             
  780.             if (result.code === 20000 && result.status && result.data) {
  781.                 const { name, balance, chargeBalance, totalBalance } = result.data;
  782.                 return {
  783.                     name,
  784.                     balance: parseFloat(balance),
  785.                     chargeBalance: parseFloat(chargeBalance),
  786.                     totalBalance: parseFloat(totalBalance)
  787.                 };
  788.             } else {
  789.                 throw new Error(result.message || 'Invalid response format');
  790.             }
  791.         } catch (error) {
  792.             console.error('[Debug] User Info API Error:', error);
  793.             throw error;
  794.         }
  795.     }
  796.  
  797.     // 获取可用模型列表
  798.     async function getAvailableModels(apiEndpoint, apiKey) {
  799.         // 定义支持的视觉模型列表
  800.         const supportedVLModels = [
  801.             'Qwen/Qwen2-VL-72B-Instruct',
  802.             'Pro/Qwen/Qwen2-VL-7B-Instruct',
  803.             'OpenGVLab/InternVL2-Llama3-76B',
  804.             'OpenGVLab/InternVL2-26B',
  805.             'Pro/OpenGVLab/InternVL2-8B'
  806.         ];
  807.  
  808.         try {
  809.             const response = await fetch(`${apiEndpoint}/v1/models`, {
  810.                 method: 'GET',
  811.                 headers: {
  812.                     'Authorization': `Bearer ${apiKey}`
  813.                 }
  814.             });
  815.  
  816.             if (!response.ok) {
  817.                 throw new Error(`HTTP error! status: ${response.status}`);
  818.             }
  819.  
  820.             const result = await response.json();
  821.             console.log('[Debug] Models API Response:', result);
  822.             
  823.             if (result.object === 'list' && Array.isArray(result.data)) {
  824.                 // 筛选出支持的视觉模型
  825.                 const models = result.data
  826.                     .filter(model => supportedVLModels.includes(model.id))
  827.                     .map(model => ({
  828.                         id: model.id,
  829.                         // 美化显示名称
  830.                         name: model.id.split('/').pop()
  831.                             .replace('Qwen2-VL-', 'Qwen2-')
  832.                             .replace('InternVL2-Llama3-', 'InternVL2-')
  833.                             .replace('-Instruct', '')
  834.                     }));
  835.  
  836.                 console.log('[Debug] Available VL Models:', models);
  837.                 
  838.                 if (models.length === 0) {
  839.                     console.warn('[Debug] No supported VL models found in the response');
  840.                 }
  841.                 
  842.                 return models;
  843.             } else {
  844.                 throw new Error('Invalid models response format');
  845.             }
  846.         } catch (error) {
  847.             console.error('[Debug] Models API Error:', error);
  848.             throw error;
  849.         }
  850.     }
  851.  
  852.     // 更新模型下拉菜单
  853.     function updateModelSelect(selectElement, models) {
  854.         if (models.length === 0) {
  855.             selectElement.innerHTML = '<option value="">未找到可用的视觉模型</option>';
  856.             selectElement.disabled = true;
  857.             return;
  858.         }
  859.  
  860.         selectElement.innerHTML = '<option value="">请选择视觉模型</option>' +
  861.             models.map(model => 
  862.                 `<option value="${model.id}" title="${model.id}">${model.name}</option>`
  863.             ).join('');
  864.         selectElement.disabled = false;
  865.     }
  866.  
  867.     // 保存模型列表到GM存储
  868.     function saveModelList(models) {
  869.         GM_setValue('availableModels', models);
  870.     }
  871.  
  872.     // 从GM存储获取模型列表
  873.     function getStoredModelList() {
  874.         return GM_getValue('availableModels', []);
  875.     }
  876.  
  877.     // 创建悬浮按钮
  878.     function createFloatingButton() {
  879.         const btn = document.createElement('div');
  880.         btn.className = 'ai-floating-btn';
  881.         btn.innerHTML = `
  882.             <svg viewBox="0 0 24 24">
  883.                 <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm0-14c-3.31 0-6 2.69-6 6s2.69 6 6 6 6-2.69 6-6-2.69-6-6-6zm0 10c-2.21 0-4-1.79-4-4h2c0-1.1.9-2 2-2s2 .9 2 2c0 2-3 1.75-3 5h2c0-2.25 3-2.5 3-5 0-2.21-1.79-4-4-4z"/>
  884.             </svg>
  885.         `;
  886.  
  887.         // 添加点击事件处理
  888.         btn.addEventListener('click', function(e) {
  889.             if (e.button === 0) { // 左键点击
  890.                 enterImageSelectionMode();
  891.                 e.stopPropagation(); // 阻止事件冒泡
  892.             }
  893.         });
  894.  
  895.         // 右键点击显示配置
  896.         btn.addEventListener('contextmenu', function(e) {
  897.             e.preventDefault();
  898.             exitImageSelectionMode();
  899.             createConfigUI();
  900.         });
  901.  
  902.         // ESC键退出选择模式
  903.         document.addEventListener('keydown', function(e) {
  904.             if (e.key === 'Escape') {
  905.                 exitImageSelectionMode();
  906.                 removeDescriptionTooltip();
  907.             }
  908.         });
  909.  
  910.         // 设置初始位置为左上角
  911.         const savedPos = JSON.parse(GM_getValue('btnPosition', '{"x": 20, "y": 20}'));
  912.         btn.style.left = (savedPos.x || 20) + 'px';
  913.         btn.style.top = (savedPos.y || 20) + 'px';
  914.         btn.style.right = 'auto';
  915.         btn.style.bottom = 'auto';
  916.  
  917.         let isDragging = false;
  918.         let startX, startY;
  919.         let initialLeft, initialTop;
  920.  
  921.         function dragStart(e) {
  922.             if (e.target === btn || btn.contains(e.target)) {
  923.                 isDragging = true;
  924.                 const rect = btn.getBoundingClientRect();
  925.                 startX = e.clientX;
  926.                 startY = e.clientY;
  927.                 initialLeft = rect.left;
  928.                 initialTop = rect.top;
  929.                 e.preventDefault();
  930.             }
  931.         }
  932.  
  933.         function drag(e) {
  934.             if (isDragging) {
  935.                 e.preventDefault();
  936.                 const deltaX = e.clientX - startX;
  937.                 const deltaY = e.clientY - startY;
  938.                 
  939.                 const newLeft = Math.max(0, Math.min(window.innerWidth - btn.offsetWidth, initialLeft + deltaX));
  940.                 const newTop = Math.max(0, Math.min(window.innerHeight - btn.offsetHeight, initialTop + deltaY));
  941.                 
  942.                 btn.style.left = newLeft + 'px';
  943.                 btn.style.top = newTop + 'px';
  944.             }
  945.         }
  946.  
  947.         function dragEnd(e) {
  948.             if (isDragging) {
  949.                 isDragging = false;
  950.                 const rect = btn.getBoundingClientRect();
  951.                 GM_setValue('btnPosition', JSON.stringify({
  952.                     x: rect.left,
  953.                     y: rect.top
  954.                 }));
  955.             }
  956.         }
  957.  
  958.         btn.addEventListener('mousedown', dragStart);
  959.         document.addEventListener('mousemove', drag);
  960.         document.addEventListener('mouseup', dragEnd);
  961.  
  962.         // 添加悬浮菜单
  963.         let menu = null;
  964.         let menuTimeout = null;
  965.         
  966.         function showMainMenu() {
  967.             if (menu) return;
  968.  
  969.             menu = document.createElement('div');
  970.             menu.className = 'ai-menu';
  971.             menu.innerHTML = `
  972.                 <div class="ai-menu-item" id="ai-describe-images" title="选择要识别的图像">
  973.                     <svg viewBox="0 0 24 24">
  974.                         <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm0-14c-3.31 0-6 2.69-6 6s2.69 6 6 6 6-2.69 6-6-2.69-6-6-6zm0 10c-2.21 0-4-1.79-4-4h2c0-1.1.9-2 2-2s2 .9 2 2c0 2-3 1.75-3 5h2c0-2.25 3-2.5 3-5 0-2.21-1.79-4-4-4z"/>
  975.                     </svg>
  976.                 </div>
  977.                 <div class="ai-menu-item" id="ai-settings" title="设置AI功能">
  978.                     <svg viewBox="0 0 24 24">
  979.                         <path d="M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58c.18-.14.23-.41.12-.61l-1.92-3.32c-.12-.22-.37-.29-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54c-.04-.24-.24-.41-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.05.3-.07.62-.07.94s.02.64.07.94l-2.03 1.58c-.18.14-.23.41-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6z"/>
  980.                     </svg>
  981.                 </div>
  982.             `;
  983.             // 计算菜单位置
  984.             const btnRect = btn.getBoundingClientRect();
  985.             menu.style.left = (btnRect.right + 5) + 'px';
  986.             menu.style.top = btnRect.top + 'px';
  987.  
  988.             document.body.appendChild(menu);
  989.  
  990.             // 为菜单添加鼠标进入和离开事件
  991.             menu.addEventListener('mouseenter', () => {
  992.                 if (menuTimeout) {
  993.                     clearTimeout(menuTimeout);
  994.                     menuTimeout = null;
  995.                 }
  996.             });
  997.  
  998.             menu.addEventListener('mouseleave', () => {
  999.                 hideMainMenu();
  1000.             });
  1001.  
  1002.             // 添加菜单项点击事件
  1003.             menu.querySelector('#ai-describe-images').onclick = () => {
  1004.                 menu.remove();
  1005.                 menu = null;
  1006.                 showImageSelectionModal();
  1007.             };
  1008.             
  1009.             menu.querySelector('#ai-settings').onclick = () => {
  1010.                 menu.remove();
  1011.                 menu = null;
  1012.                 createConfigUI();
  1013.             };
  1014.         }
  1015.  
  1016.         function hideMainMenu() {
  1017.             if (menuTimeout) {
  1018.                 clearTimeout(menuTimeout);
  1019.             }
  1020.             menuTimeout = setTimeout(() => {
  1021.                 if (menu) {
  1022.                     menu.remove();
  1023.                     menu = null;
  1024.                 }
  1025.                 menuTimeout = null;
  1026.             }, 300); // 300ms延迟，避免菜单闪烁
  1027.         }
  1028.  
  1029.         // 添加鼠标进入和离开事件
  1030.         btn.addEventListener('mouseenter', () => {
  1031.             if (menuTimeout) {
  1032.                 clearTimeout(menuTimeout);
  1033.                 menuTimeout = null;
  1034.             }
  1035.             showMainMenu();
  1036.         });
  1037.  
  1038.         btn.addEventListener('mouseleave', () => {
  1039.             hideMainMenu();
  1040.         });
  1041.  
  1042.         document.body.appendChild(btn);
  1043.         return btn;
  1044.     }
  1045.  
  1046.     // 创建配置界面
  1047.     function createConfigUI() {
  1048.         const overlay = document.createElement('div');
  1049.         overlay.className = 'ai-modal-overlay';
  1050.         
  1051.         const modal = document.createElement('div');
  1052.         modal.className = 'ai-config-modal';
  1053.         modal.innerHTML = `
  1054.             <h3>AI图像描述配置</h3>
  1055.             <div class="input-group">
  1056.                 <label>API Endpoint:</label>
  1057.                 <div class="input-wrapper">
  1058.                     <input type="text" id="ai-endpoint" placeholder="https://api.openai.com" value="${GM_getValue('apiEndpoint', '')}">
  1059.                     <span class="input-icon clear-icon" title="清空" onclick="this.previousElementSibling.value=''">✕</span>
  1060.                 </div>
  1061.             </div>
  1062.             <div class="input-group">
  1063.                 <label>API Key:</label>
  1064.                 <div class="input-wrapper">
  1065.                     <input type="password" id="ai-apikey" value="${GM_getValue('apiKey', '')}">
  1066.                     <span class="input-icon clear-icon" title="清空" onclick="this.previousElementSibling.value=''">✕</span>
  1067.                     <span class="input-icon toggle-password" title="显示/隐藏密码">👁️</span>
  1068.                 </div>
  1069.                 <div class="button-row">
  1070.                     <button class="check-button" id="check-api">检测可用性</button>
  1071.                 </div>
  1072.             </div>
  1073.             <div class="input-group">
  1074.                 <label>可用模型:</label>
  1075.                 <select id="ai-model">
  1076.                     <option value="">加载中...</option>
  1077.                 </select>
  1078.             </div>
  1079.             <div class="button-group">
  1080.                 <button class="cancel-button" id="ai-cancel-config">取消</button>
  1081.                 <button class="save-button" id="ai-save-config">保存</button>
  1082.             </div>
  1083.         `;
  1084.  
  1085.         overlay.appendChild(modal);
  1086.         document.body.appendChild(overlay);
  1087.  
  1088.         // 初始化模型下拉菜单
  1089.         const modelSelect = modal.querySelector('#ai-model');
  1090.         const storedModels = getStoredModelList();
  1091.         const selectedModel = GM_getValue('selectedModel', '');
  1092.         
  1093.         if (storedModels.length > 0) {
  1094.             updateModelSelect(modelSelect, storedModels);
  1095.             if (selectedModel) {
  1096.                 modelSelect.value = selectedModel;
  1097.             }
  1098.         } else {
  1099.             modelSelect.innerHTML = '<option value="">请先检测API可用性</option>';
  1100.             modelSelect.disabled = true;
  1101.         }
  1102.  
  1103.         // 添加密码显示切换事件监听
  1104.         const toggleBtn = modal.querySelector('.toggle-password');
  1105.         toggleBtn.addEventListener('click', function() {
  1106.             togglePassword(this);
  1107.         });
  1108.  
  1109.         // 自动保存配置
  1110.         const inputs = modal.querySelectorAll('input');
  1111.         inputs.forEach(input => {
  1112.             input.addEventListener('blur', function() {
  1113.                 const endpoint = modal.querySelector('#ai-endpoint').value.trim();
  1114.                 const apiKey = modal.querySelector('#ai-apikey').value.trim();
  1115.                 
  1116.                 if (endpoint && apiKey) {
  1117.                     GM_setValue('apiEndpoint', endpoint);
  1118.                     GM_setValue('apiKey', apiKey);
  1119.                     showToast('配置已保存');
  1120.                 }
  1121.             });
  1122.         });
  1123.  
  1124.         // 检测API可用性
  1125.         const checkButton = modal.querySelector('#check-api');
  1126.         checkButton.addEventListener('click', async function() {
  1127.             const endpoint = modal.querySelector('#ai-endpoint').value.trim();
  1128.             const apiKey = modal.querySelector('#ai-apikey').value.trim();
  1129.  
  1130.             if (!endpoint || !apiKey) {
  1131.                 showToast('请先填写API Endpoint和API Key');
  1132.                 return;
  1133.             }
  1134.  
  1135.             checkButton.disabled = true;
  1136.             modelSelect.disabled = true;
  1137.             modelSelect.innerHTML = '<option value="">检测中...</option>';
  1138.  
  1139.             try {
  1140.                 // 并行请求用户信息和模型列表
  1141.                 const [userInfo, models] = await Promise.all([
  1142.                     checkUserInfo(endpoint, apiKey),
  1143.                     getAvailableModels(endpoint, apiKey)
  1144.                 ]);
  1145.  
  1146.                 // 保存模型列表
  1147.                 saveModelList(models);
  1148.  
  1149.                 // 更新模型下拉菜单
  1150.                 updateModelSelect(modelSelect, models);
  1151.  
  1152.                 // 显示用户信息
  1153.                 showToast(`检测通过，欢迎 ${userInfo.name}！\n账户余额：${userInfo.balance.toFixed(2)}\n充值余额：${userInfo.chargeBalance.toFixed(2)}\n总余额：${userInfo.totalBalance.toFixed(2)}`);
  1154.  
  1155.                 // 如果之前保存过模型选择，恢复选择
  1156.                 const savedModel = GM_getValue('selectedModel', '');
  1157.                 if (savedModel && models.some(m => m.id === savedModel)) {
  1158.                     modelSelect.value = savedModel;
  1159.                 }
  1160.             } catch (error) {
  1161.                 showToast('API检测失败：' + error.message);
  1162.                 modelSelect.innerHTML = '<option value="">获取模型列表失败</option>';
  1163.                 modelSelect.disabled = true;
  1164.             } finally {
  1165.                 checkButton.disabled = false;
  1166.             }
  1167.         });
  1168.  
  1169.         // 模型选择变更时保存
  1170.         modelSelect.addEventListener('change', function() {
  1171.             if (this.value) {
  1172.                 GM_setValue('selectedModel', this.value);
  1173.                 showToast('已保存模型选择');
  1174.             }
  1175.         });
  1176.  
  1177.         // 保存配置
  1178.         const saveButton = modal.querySelector('#ai-save-config');
  1179.         saveButton.addEventListener('click', function() {
  1180.             const endpoint = modal.querySelector('#ai-endpoint').value.trim();
  1181.             const apiKey = modal.querySelector('#ai-apikey').value.trim();
  1182.             const selectedModel = modelSelect.value;
  1183.  
  1184.             if (!endpoint || !apiKey) {
  1185.                 showToast('请填写API Endpoint和API Key');
  1186.                 return;
  1187.             }
  1188.  
  1189.             if (!selectedModel) {
  1190.                 showToast('请选择一个视觉模型');
  1191.                 return;
  1192.             }
  1193.  
  1194.             GM_setValue('apiEndpoint', endpoint);
  1195.             GM_setValue('apiKey', apiKey);
  1196.             GM_setValue('selectedModel', selectedModel);
  1197.             showToast('配置已保存');
  1198.             overlay.remove();
  1199.         });
  1200.  
  1201.         // 更新保存按钮状态
  1202.         function updateSaveButtonState() {
  1203.             const endpoint = modal.querySelector('#ai-endpoint').value.trim();
  1204.             const apiKey = modal.querySelector('#ai-apikey').value.trim();
  1205.             const selectedModel = modelSelect.value;
  1206.             
  1207.             saveButton.disabled = !endpoint || !apiKey || !selectedModel;
  1208.         }
  1209.  
  1210.         // 监听输入变化
  1211.         modal.querySelector('#ai-endpoint').addEventListener('input', updateSaveButtonState);
  1212.         modal.querySelector('#ai-apikey').addEventListener('input', updateSaveButtonState);
  1213.         modelSelect.addEventListener('change', updateSaveButtonState);
  1214.  
  1215.         // 初始化保存按钮状态
  1216.         updateSaveButtonState();
  1217.  
  1218.         // 取消配置
  1219.         modal.querySelector('#ai-cancel-config').onclick = () => {
  1220.             overlay.remove();
  1221.         };
  1222.  
  1223.         // 点击遮罩层关闭
  1224.         overlay.addEventListener('click', (e) => {
  1225.             if (e.target === overlay) {
  1226.                 overlay.remove();
  1227.             }
  1228.         });
  1229.     }
  1230.  
  1231.     // 显示图像选择界面
  1232.     function showImageSelectionModal() {
  1233.         const overlay = document.createElement('div');
  1234.         overlay.className = 'ai-modal-overlay';
  1235.         
  1236.         const modal = document.createElement('div');
  1237.         modal.className = 'ai-config-modal';
  1238.         modal.innerHTML = `
  1239.             <h3>选择要识别的图像</h3>
  1240.             <div class="ai-image-options">
  1241.                 <button id="ai-all-images">识别所有图片</button>
  1242.                 <button id="ai-visible-images">仅识别可见图片</button>
  1243.             </div>
  1244.             <button id="ai-cancel">取消</button>
  1245.         `;
  1246.  
  1247.         overlay.appendChild(modal);
  1248.         document.body.appendChild(overlay);
  1249.  
  1250.         // 添加事件监听
  1251.         modal.querySelector('#ai-all-images').onclick = () => {
  1252.             if (checkApiConfig()) {
  1253.                 describeAllImages();
  1254.                 overlay.remove();
  1255.             }
  1256.         };
  1257.  
  1258.         modal.querySelector('#ai-visible-images').onclick = () => {
  1259.             if (checkApiConfig()) {
  1260.                 describeVisibleImages();
  1261.                 overlay.remove();
  1262.             }
  1263.         };
  1264.  
  1265.         modal.querySelector('#ai-cancel').onclick = () => {
  1266.             overlay.remove();
  1267.         };
  1268.  
  1269.         // 点击遮罩层关闭
  1270.         overlay.addEventListener('click', (e) => {
  1271.             if (e.target === overlay) {
  1272.                 overlay.remove();
  1273.             }
  1274.         });
  1275.     }
  1276.  
  1277.     // 显示描述结果对话框
  1278.     function showDescriptionModal(description) {
  1279.         const modal = document.createElement('div');
  1280.         modal.className = 'ai-result-modal';
  1281.         modal.innerHTML = `
  1282.             <h3>图片描述结果</h3>
  1283.             <div class="code-block">${description}</div>
  1284.             <button class="close-button">&times;</button>
  1285.         `;
  1286.  
  1287.         // 添加复制功能
  1288.         const codeBlock = modal.querySelector('.code-block');
  1289.         codeBlock.addEventListener('click', async () => {
  1290.             try {
  1291.                 await navigator.clipboard.writeText(description);
  1292.                 codeBlock.classList.add('copied');
  1293.                 setTimeout(() => {
  1294.                     codeBlock.classList.remove('copied');
  1295.                 }, 2000);
  1296.             } catch (err) {
  1297.                 console.error('[Debug] Copy failed:', err);
  1298.                 showToast('复制失败，请手动复制');
  1299.             }
  1300.         });
  1301.  
  1302.         // 添加关闭按钮功能
  1303.         const closeButton = modal.querySelector('.close-button');
  1304.         closeButton.addEventListener('click', () => {
  1305.             modal.remove();
  1306.         });
  1307.  
  1308.         // ESC键关闭
  1309.         const escHandler = (e) => {
  1310.             if (e.key === 'Escape') {
  1311.                 modal.remove();
  1312.                 document.removeEventListener('keydown', escHandler);
  1313.             }
  1314.         };
  1315.         document.addEventListener('keydown', escHandler);
  1316.  
  1317.         document.body.appendChild(modal);
  1318.     }
  1319.  
  1320.     // 初始化
  1321.     function initialize() {
  1322.         // 确保DOM加载完成后再创建按钮
  1323.         if (document.readyState === 'loading') {
  1324.             document.addEventListener('DOMContentLoaded', () => {
  1325.                 createFloatingButton();
  1326.             });
  1327.         } else {
  1328.             createFloatingButton();
  1329.         }
  1330.     }
  1331.  
  1332.     // 启动脚本
  1333.     initialize();
  1334. })();