☰

AI Image Description Generator

使用AI生成网页图片描述

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

  1. // ==UserScript==
  2. // @name         AI Image Description Generator
  3. // @namespace    http://tampermonkey.net/
  4. // @version      3.3
  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.     let isSelectionMode = false;
  22.     
  23.     // 定义支持的视觉模型列表
  24.     const supportedVLModels = [
  25.         'Qwen/Qwen2-VL-72B-Instruct',
  26.         'Pro/Qwen/Qwen2-VL-7B-Instruct',
  27.         'OpenGVLab/InternVL2-Llama3-76B',
  28.         'OpenGVLab/InternVL2-26B',
  29.         'Pro/OpenGVLab/InternVL2-8B'
  30.     ];
  31.  
  32.     // 定义GLM-4V系列模型
  33.     const glm4vModels = [
  34.         'glm-4v',
  35.         'glm-4v-flash'
  36.     ];
  37.  
  38.     // 添加样式
  39.     GM_addStyle(`
  40.         .ai-config-modal {
  41.             position: fixed;
  42.             top: 50%;
  43.             left: 50%;
  44.             transform: translate(-50%, -50%);
  45.             background: white;
  46.             padding: 20px;
  47.             border-radius: 8px;
  48.             box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  49.             z-index: 10000;
  50.             min-width: 500px;
  51.             height: auto;
  52.         }
  53.         .ai-config-modal h3 {
  54.             margin: 0 0 15px 0;
  55.             font-size: 14px;
  56.             font-weight: bold;
  57.             color: #333;
  58.         }
  59.         .ai-config-modal label {
  60.             display: inline-block;
  61.             font-size: 12px;
  62.             font-weight: bold;
  63.             color: #333;
  64.             margin: 0;
  65.             line-height: normal;
  66.             height: auto;
  67.         }
  68.         .ai-config-modal .input-wrapper {
  69.             position: relative;
  70.             display: flex;
  71.             align-items: center;
  72.         }
  73.         .ai-config-modal input {
  74.             display: block;
  75.             width: 100%;
  76.             padding: 2px 24px 2px 2px;
  77.             margin: 2px;
  78.             border: 1px solid #ddd;
  79.             border-radius: 4px;
  80.             font-size: 13px;
  81.             line-height: normal;
  82.             height: auto;
  83.             box-sizing: border-box;
  84.         }
  85.         .ai-config-modal .input-icon {
  86.             position: absolute;
  87.             right: 4px;
  88.             width: 16px;
  89.             height: 16px;
  90.             cursor: pointer;
  91.             display: flex;
  92.             align-items: center;
  93.             justify-content: center;
  94.             color: #666;
  95.             font-size: 12px;
  96.             user-select: none;
  97.         }
  98.         .ai-config-modal .clear-icon {
  99.             right: 24px;
  100.         }
  101.         .ai-config-modal .toggle-password {
  102.             right: 4px;
  103.         }
  104.         .ai-config-modal .input-icon:hover {
  105.             color: #333;
  106.         }
  107.         .ai-config-modal .input-group {
  108.             margin-bottom: 12px;
  109.             height: auto;
  110.             display: flex;
  111.             flex-direction: column;
  112.         }
  113.         .ai-config-modal .button-row {
  114.             display: flex;
  115.             gap: 10px;
  116.             align-items: center;
  117.             margin-top: 5px;
  118.         }
  119.         .ai-config-modal .check-button {
  120.             padding: 4px 8px;
  121.             border: none;
  122.             border-radius: 4px;
  123.             background: #007bff;
  124.             color: white;
  125.             cursor: pointer;
  126.             font-size: 12px;
  127.         }
  128.         .ai-config-modal .check-button:hover {
  129.             background: #0056b3;
  130.         }
  131.         .ai-config-modal .check-button:disabled {
  132.             background: #cccccc;
  133.             cursor: not-allowed;
  134.         }
  135.         .ai-config-modal select {
  136.             width: 100%;
  137.             padding: 4px;
  138.             border: 1px solid #ddd;
  139.             border-radius: 4px;
  140.             font-size: 13px;
  141.             margin-top: 2px;
  142.         }
  143.         .ai-config-modal .status-text {
  144.             font-size: 12px;
  145.             margin-left: 10px;
  146.         }
  147.         .ai-config-modal .status-success {
  148.             color: #28a745;
  149.         }
  150.         .ai-config-modal .status-error {
  151.             color: #dc3545;
  152.         }
  153.         .ai-config-modal button {
  154.             margin: 10px 5px;
  155.             padding: 8px 15px;
  156.             border: none;
  157.             border-radius: 4px;
  158.             cursor: pointer;
  159.             font-size: 14px;
  160.         }
  161.         .ai-config-modal button#ai-save-config {
  162.             background: #4CAF50;
  163.             color: white;
  164.         }
  165.         .ai-config-modal button#ai-cancel-config {
  166.             background: #dc3545;
  167.             color: white;
  168.         }
  169.         .ai-config-modal button:hover {
  170.             opacity: 0.9;
  171.         }
  172.         .ai-floating-btn {
  173.             position: fixed;
  174.             width: 32px;
  175.             height: 32px;
  176.             background: #4CAF50;
  177.             color: white;
  178.             border-radius: 50%;
  179.             cursor: move;
  180.             z-index: 9999;
  181.             box-shadow: 0 2px 5px rgba(0,0,0,0.2);
  182.             display: flex;
  183.             align-items: center;
  184.             justify-content: center;
  185.             user-select: none;
  186.             transition: background-color 0.3s;
  187.         }
  188.         .ai-floating-btn:hover {
  189.             background: #45a049;
  190.         }
  191.         .ai-floating-btn svg {
  192.             width: 20px;
  193.             height: 20px;
  194.             fill: white;
  195.         }
  196.         .ai-menu {
  197.             position: absolute;
  198.             background: white;
  199.             border-radius: 5px;
  200.             box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  201.             padding: 8px;
  202.             z-index: 10000;
  203.             display: flex;
  204.             gap: 8px;
  205.         }
  206.         .ai-menu-item {
  207.             width: 32px;
  208.             height: 32px;
  209.             padding: 6px;
  210.             cursor: pointer;
  211.             border-radius: 50%;
  212.             display: flex;
  213.             align-items: center;
  214.             justify-content: center;
  215.             transition: background-color 0.3s;
  216.         }
  217.         .ai-menu-item:hover {
  218.             background: #f5f5f5;
  219.         }
  220.         .ai-menu-item svg {
  221.             width: 20px;
  222.             height: 20px;
  223.             fill: #666;
  224.         }
  225.         .ai-menu-item:hover svg {
  226.             fill: #4CAF50;
  227.         }
  228.         .ai-image-options {
  229.             display: flex;
  230.             flex-direction: column;
  231.             gap: 10px;
  232.             margin: 15px 0;
  233.         }
  234.         .ai-image-options button {
  235.             padding: 8px 15px;
  236.             border: none;
  237.             border-radius: 4px;
  238.             background: #4CAF50;
  239.             color: white;
  240.             cursor: pointer;
  241.             transition: background-color 0.3s;
  242.             font-size: 14px;
  243.         }
  244.         .ai-image-options button:hover {
  245.             background: #45a049;
  246.         }
  247.         #ai-cancel {
  248.             background: #dc3545;
  249.             color: white;
  250.         }
  251.         #ai-cancel:hover {
  252.             opacity: 0.9;
  253.         }
  254.         .ai-toast {
  255.             position: fixed;
  256.             top: 20px;
  257.             left: 50%;
  258.             transform: translateX(-50%);
  259.             padding: 10px 20px;
  260.             background: rgba(0, 0, 0, 0.8);
  261.             color: white;
  262.             border-radius: 4px;
  263.             font-size: 14px;
  264.             z-index: 10000;
  265.             animation: fadeInOut 3s ease;
  266.             pointer-events: none;
  267.             white-space: pre-line;
  268.             text-align: center;
  269.             max-width: 80%;
  270.             box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  271.         }
  272.         @keyframes fadeInOut {
  273.             0% { opacity: 0; transform: translate(-50%, 10px); }
  274.             10% { opacity: 1; transform: translate(-50%, 0); }
  275.             90% { opacity: 1; transform: translate(-50%, 0); }
  276.             100% { opacity: 0; transform: translate(-50%, -10px); }
  277.         }
  278.         .ai-config-modal .button-group {
  279.             display: flex;
  280.             justify-content: flex-end;
  281.             gap: 10px;
  282.             margin-top: 20px;
  283.         }
  284.         .ai-config-modal .button-group button {
  285.             padding: 6px 16px;
  286.             border: none;
  287.             border-radius: 4px;
  288.             cursor: pointer;
  289.             font-size: 14px;
  290.             transition: background-color 0.2s;
  291.         }
  292.         .ai-config-modal .save-button {
  293.             background: #007bff;
  294.             color: white;
  295.         }
  296.         .ai-config-modal .save-button:hover {
  297.             background: #0056b3;
  298.         }
  299.         .ai-config-modal .save-button:disabled {
  300.             background: #cccccc;
  301.             cursor: not-allowed;
  302.         }
  303.         .ai-config-modal .cancel-button {
  304.             background: #f8f9fa;
  305.             color: #333;
  306.         }
  307.         .ai-config-modal .cancel-button:hover {
  308.             background: #e2e6ea;
  309.         }
  310.         .ai-selecting-image {
  311.             cursor: crosshair !important;
  312.         }
  313.         .ai-selecting-image * {
  314.             cursor: crosshair !important;
  315.         }
  316.         .ai-image-description {
  317.             position: fixed;
  318.             background: rgba(0, 0, 0, 0.8);
  319.             color: white;
  320.             padding: 8px 12px;
  321.             border-radius: 4px;
  322.             font-size: 14px;
  323.             line-height: 1.4;
  324.             max-width: 300px;
  325.             text-align: center;
  326.             word-wrap: break-word;
  327.             z-index: 10000;
  328.             pointer-events: none;
  329.             animation: fadeIn 0.3s ease;
  330.             box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  331.         }
  332.         @keyframes fadeIn {
  333.             from { opacity: 0; }
  334.             to { opacity: 1; }
  335.         }
  336.         .ai-modal-overlay {
  337.             position: fixed;
  338.             top: 0;
  339.             left: 0;
  340.             width: 100%;
  341.             height: 100%;
  342.             background: rgba(0, 0, 0, 0.5);
  343.             display: flex;
  344.             justify-content: center;
  345.             align-items: center;
  346.             z-index: 9999;
  347.         }
  348.         .ai-result-modal {
  349.             background: white;
  350.             padding: 20px;
  351.             border-radius: 8px;
  352.             box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  353.             position: relative;
  354.             min-width: 300px;
  355.             max-width: 1000px;
  356.             max-height: 540px;
  357.             overflow-y: auto;
  358.             width: 90%;
  359.         }
  360.         .ai-result-modal h3 {
  361.             margin: 0 0 10px 0;
  362.             font-size: 14px;
  363.             color: #333;
  364.         }
  365.         .ai-result-modal .description-code {
  366.             background: #1e1e1e;
  367.             color: #ffffff;
  368.             padding: 12px;
  369.             border-radius: 4px;
  370.             margin: 5px 0;
  371.             cursor: pointer;
  372.             white-space: pre-wrap;
  373.             word-wrap: break-word;
  374.             font-family: monospace;
  375.             border: 1px solid #333;
  376.             position: relative;
  377.             max-height: 500px;
  378.             overflow-y: auto;
  379.             font-size: 12px;
  380.             line-height: 1.4;
  381.         }
  382.         .ai-result-modal .description-code * {
  383.             color: #ffffff !important;
  384.         }
  385.         .ai-result-modal .description-code code {
  386.             color: #ffffff;
  387.             display: block;
  388.             width: 100%;
  389.         }
  390.         .ai-result-modal .description-code:hover {
  391.             background: #2d2d2d;
  392.             color: #ffffff;
  393.         }
  394.         .ai-result-modal .copy-hint {
  395.             font-size: 11px;
  396.             color: #666;
  397.             text-align: center;
  398.             margin: 2px 0;
  399.         }
  400.         .ai-result-modal .close-button {
  401.             position: absolute;
  402.             top: 8px;
  403.             right: 8px;
  404.             background: none;
  405.             border: none;
  406.             font-size: 18px;
  407.             cursor: pointer;
  408.             color: #666;
  409.             padding: 2px 6px;
  410.             line-height: 1;
  411.         }
  412.         .ai-result-modal .close-button:hover {
  413.             color: #333;
  414.         }
  415.         .ai-progress-modal {
  416.             position: fixed;
  417.             top: 50%;
  418.             left: 50%;
  419.             transform: translate(-50%, -50%);
  420.             background: white;
  421.             padding: 20px;
  422.             border-radius: 8px;
  423.             box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  424.             z-index: 10001;
  425.             min-width: 500px;
  426.             height: auto;
  427.         }
  428.         .ai-progress-modal .progress-bar {
  429.             width: 100%;
  430.             height: 20px;
  431.             background-color: #f3f3f3;
  432.         }
  433.         .ai-selection-overlay {
  434.             position: fixed;
  435.             top: 0;
  436.             left: 0;
  437.             width: 100%;
  438.             height: 100%;
  439.             background: rgba(0, 0, 0, 0.5);
  440.             z-index: 9998;
  441.             cursor: crosshair;
  442.             pointer-events: none;
  443.         }
  444.         
  445.         .ai-selecting-image img {
  446.             position: relative;
  447.             z-index: 9999;
  448.             cursor: pointer !important;
  449.             transition: outline 0.2s ease;
  450.         }
  451.         
  452.         .ai-selecting-image img:hover {
  453.             outline: 2px solid white;
  454.             outline-offset: 2px;
  455.         }
  456.         .ai-result-modal .balance-info {
  457.             font-size: 9px;
  458.             color: #666;
  459.             text-align: right;
  460.             margin-top: 3px;
  461.             padding-top: 3px;
  462.             border-top: 1px solid #eee;
  463.         }
  464.         /* 移动端样式优化 */
  465.         @media (max-width: 768px) {
  466.             .ai-floating-btn {
  467.                 width: 40px;
  468.                 height: 40px;
  469.                 touch-action: none; /* 防止触屏滚动 */
  470.             }
  471.             
  472.             .ai-floating-btn svg {
  473.                 width: 24px;
  474.                 height: 24px;
  475.             }
  476.             
  477.             .ai-config-modal {
  478.                 width: 90%;
  479.                 min-width: auto;
  480.                 max-width: 400px;
  481.             }
  482.             
  483.             .ai-result-modal {
  484.                 width: 95%;
  485.                 min-width: auto;
  486.             }
  487.         }
  488.     `);
  489.  
  490.     // 密码显示切换功能
  491.     function togglePassword(element) {
  492.         const input = element.parentElement.querySelector('input');
  493.         if (input.type === 'password') {
  494.             input.type = 'text';
  495.             element.textContent = '👁️🗨️';
  496.         } else {
  497.             input.type = 'password';
  498.             element.textContent = '👁️';
  499.         }
  500.     }
  501.  
  502.     // 检查API配置并获取可用模型
  503.     async function checkApiAndGetModels(apiEndpoint, apiKey) {
  504.         try {
  505.             const response = await fetch(`${apiEndpoint}/v1/models`, {
  506.                 method: 'GET',
  507.                 headers: {
  508.                     'Authorization': `Bearer ${apiKey}`,
  509.                     'Content-Type': 'application/json'
  510.                 }
  511.             });
  512.  
  513.             if (!response.ok) {
  514.                 throw new Error(`HTTP error! status: ${response.status}`);
  515.             }
  516.  
  517.             const result = await response.json();
  518.             if (result.data && Array.isArray(result.data)) {
  519.                 // 过滤出多模态模型
  520.                 const multimodalModels = result.data
  521.                     .filter(model => model.id.includes('vision') || model.id.includes('gpt-4-v'))
  522.                     .map(model => ({
  523.                         id: model.id,
  524.                         name: model.id
  525.                     }));
  526.                 return multimodalModels;
  527.             } else {
  528.                 throw new Error('Invalid response format');
  529.             }
  530.         } catch (error) {
  531.             console.error('Error fetching models:', error);
  532.             throw error;
  533.         }
  534.     }
  535.  
  536.     // 检查API配置
  537.     async function checkApiConfig() {
  538.         const apiEndpoint = GM_getValue('apiEndpoint', '').trim();
  539.         const apiKey = GM_getValue('apiKey', '').trim();
  540.         const selectedModel = GM_getValue('selectedModel', '').trim();
  541.  
  542.         if (!apiEndpoint || !apiKey || !selectedModel) {
  543.             alert('请先配置API Endpoint、API Key和模型');
  544.             showConfigModal();
  545.             return false;
  546.         }
  547.  
  548.         try {
  549.             // 如果是智谱AI的endpoint,跳过API检查
  550.             if(apiEndpoint.includes('bigmodel.cn')) {
  551.                 return true;
  552.             }
  553.  
  554.             // 其他endpoint进行API检查
  555.             const models = await checkApiAndGetModels(apiEndpoint, apiKey);
  556.             if (models.length === 0) {
  557.                 alert('无法获取可用模型列表，请检查API配置是否正确');
  558.                 return false;
  559.             }
  560.             return true;
  561.         } catch (error) {
  562.             console.error('Error checking API config:', error);
  563.             alert('API配置验证失败，请检查配置是否正确');
  564.             return false;
  565.         }
  566.     }
  567.  
  568.     // 获取图片的Base64内容
  569.     async function getImageBase64(imageUrl) {
  570.         console.log('[Debug] Starting image to Base64 conversion for:', imageUrl);
  571.         
  572.         // 尝试将HTTP URL换为HTTPS
  573.         if (imageUrl.startsWith('http:')) {
  574.             imageUrl = imageUrl.replace('http:', 'https:');
  575.             console.log('[Debug] Converted to HTTPS URL:', imageUrl);
  576.         }
  577.  
  578.         // 获取图片的多种方法
  579.         async function tryFetchImage(method) {
  580.             return new Promise((resolve, reject) => {
  581.                 switch(method) {
  582.                     case 'direct':
  583.                         // 直接请求
  584.                         GM_xmlhttpRequest({
  585.                             method: 'GET',
  586.                             url: imageUrl,
  587.                             responseType: 'blob',
  588.                             headers: {
  589.                                 'Accept': 'image/avif,image/webp,image/apng,image/svg+xml,image/*,*/*;q=0.8',
  590.                                 'Accept-Language': 'zh-CN,zh;q=0.9,en;q=0.8',
  591.                                 'Cache-Control': 'no-cache',
  592.                                 'Pragma': 'no-cache',
  593.                                 'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36'
  594.                             },
  595.                             anonymous: true,
  596.                             onload: response => resolve(response),
  597.                             onerror: error => reject(error)
  598.                         });
  599.                         break;
  600.  
  601.                     case 'withReferer':
  602.                         // 带原始Referer的请求
  603.                         GM_xmlhttpRequest({
  604.                             method: 'GET',
  605.                             url: imageUrl,
  606.                             responseType: 'blob',
  607.                             headers: {
  608.                                 'Accept': 'image/avif,image/webp,image/apng,image/svg+xml,image/*,*/*;q=0.8',
  609.                                 'Accept-Language': 'zh-CN,zh;q=0.9,en;q=0.8',
  610.                                 'Cache-Control': 'no-cache',
  611.                                 'Pragma': 'no-cache',
  612.                                 'Referer': new URL(imageUrl).origin,
  613.                                 'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36'
  614.                             },
  615.                             anonymous: true,
  616.                             onload: response => resolve(response),
  617.                             onerror: error => reject(error)
  618.                         });
  619.                         break;
  620.  
  621.                     case 'proxy':
  622.                         // 通过代理服务获取
  623.                         const proxyUrl = `https://images.weserv.nl/?url=${encodeURIComponent(imageUrl)}`;
  624.                         GM_xmlhttpRequest({
  625.                             method: 'GET',
  626.                             url: proxyUrl,
  627.                             responseType: 'blob',
  628.                             headers: {
  629.                                 'Accept': 'image/avif,image/webp,image/apng,image/svg+xml,image/*,*/*;q=0.8',
  630.                                 'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36'
  631.                             },
  632.                             anonymous: true,
  633.                             onload: response => resolve(response),
  634.                             onerror: error => reject(error)
  635.                         });
  636.                         break;
  637.  
  638.                     case 'corsProxy':
  639.                         // 通过CORS代理获取
  640.                         const corsProxyUrl = `https://corsproxy.io/?${encodeURIComponent(imageUrl)}`;
  641.                         GM_xmlhttpRequest({
  642.                             method: 'GET',
  643.                             url: corsProxyUrl,
  644.                             responseType: 'blob',
  645.                             headers: {
  646.                                 'Accept': 'image/avif,image/webp,image/apng,image/svg+xml,image/*,*/*;q=0.8',
  647.                                 'Origin': window.location.origin
  648.                             },
  649.                             anonymous: true,
  650.                             onload: response => resolve(response),
  651.                             onerror: error => reject(error)
  652.                         });
  653.                         break;
  654.                 }
  655.             });
  656.         }
  657.  
  658.         // 处理响应
  659.         async function handleResponse(response) {
  660.             if (response.status === 200) {
  661.                 const blob = response.response;
  662.                 console.log('[Debug] Image blob size:', blob.size, 'bytes');
  663.                 
  664.                 return new Promise((resolve, reject) => {
  665.                     const reader = new FileReader();
  666.                     reader.onloadend = () => {
  667.                         const base64 = reader.result.split(',')[1];
  668.                         console.log('[Debug] Base64 conversion completed, length:', base64.length);
  669.                         resolve(base64);
  670.                     };
  671.                     reader.onerror = error => reject(error);
  672.                     reader.readAsDataURL(blob);
  673.                 });
  674.             }
  675.             throw new Error(`Failed with status: ${response.status}`);
  676.         }
  677.  
  678.         // 依次尝试不同的方法
  679.         const methods = ['direct', 'withReferer', 'proxy', 'corsProxy'];
  680.         for (const method of methods) {
  681.             try {
  682.                 console.log(`[Debug] Trying method: ${method}`);
  683.                 const response = await tryFetchImage(method);
  684.                 if (response.status === 200) {
  685.                     return await handleResponse(response);
  686.                 }
  687.                 console.log(`[Debug] Method ${method} failed with status:`, response.status);
  688.             } catch (error) {
  689.                 console.log(`[Debug] Method ${method} failed:`, error);
  690.             }
  691.         }
  692.  
  693.         throw new Error('All methods to fetch image failed');
  694.     }
  695.  
  696.     // 调用API获取图片描述
  697.     async function getImageDescription(imageUrl, apiEndpoint, apiKey, selectedModel) {
  698.         console.log('[Debug] Starting image description request:', {
  699.             apiEndpoint,
  700.             selectedModel,
  701.             imageUrl,
  702.             timestamp: new Date().toISOString()
  703.         });
  704.  
  705.         try {
  706.             const base64Image = await getImageBase64(imageUrl);
  707.             console.log('[Debug] Image converted to base64, length:', base64Image.length);
  708.  
  709.             // 退出选择图片模式
  710.             exitImageSelectionMode();
  711.             
  712.             const timeout = 30000; // 30秒超时
  713.             const controller = new AbortController();
  714.             const timeoutId = setTimeout(() => controller.abort(), timeout);
  715.             
  716.             const imageSize = base64Image.length * 0.75; // 转换为字节数
  717.             
  718.             // 获取当前余额
  719.             const userInfo = await checkUserInfo(apiEndpoint, apiKey);
  720.             const currentBalance = userInfo.totalBalance;
  721.             
  722.             // 计算每次调用的预估花费（根据图片大小和模型）
  723.             const costPerCall = calculateCost(imageSize, selectedModel);
  724.             
  725.             // 计算可识别的剩余图片量
  726.             const remainingImages = Math.floor(currentBalance / costPerCall);
  727.  
  728.             // 根据不同的API构建不同的请求体和endpoint
  729.             let requestBody;
  730.             let finalEndpoint;
  731.  
  732.             if(selectedModel.startsWith('glm-')) {
  733.                 // GLM系列模型的请求格式
  734.                 requestBody = {
  735.                     model: selectedModel,
  736.                     messages: [{
  737.                         role: "user",
  738.                         content: [{
  739.                             type: "text",
  740.                             text: "请描述这张图片的主要内容。如果是人物图片,请至少用15个字描述人物。"
  741.                         }, {
  742.                             type: "image_url",
  743.                             image_url: {
  744.                                 url: `data:image/jpeg;base64,${base64Image}`
  745.                             }
  746.                         }]
  747.                     }],
  748.                     stream: true
  749.                 };
  750.                 finalEndpoint = 'https://open.bigmodel.cn/api/paas/v4/chat/completions';
  751.             } else {
  752.                 // 原有模型的请求格式
  753.                 requestBody = {
  754.                     model: selectedModel,
  755.                     messages: [{
  756.                         role: "user",
  757.                         content: [
  758.                             {
  759.                                 type: "image_url",
  760.                                 image_url: {
  761.                                     url: `data:image/jpeg;base64,${base64Image}`
  762.                                 }
  763.                             },
  764.                             {
  765.                                 type: "text",
  766.                                 text: "Describe the main content of the image. If it is a person, provide a description of the person with at least 15 words. Answer in Chinese."
  767.                             }
  768.                         ]
  769.                     }],
  770.                     stream: true
  771.                 };
  772.                 finalEndpoint = `${apiEndpoint}/chat/completions`;
  773.             }
  774.  
  775.             console.log('[Debug] API Request body:', JSON.stringify(requestBody, null, 2));
  776.  
  777.             console.log('[Debug] Sending request to:', finalEndpoint);
  778.             console.log('[Debug] Request headers:', {
  779.                 'Authorization': 'Bearer ***' + apiKey.slice(-4),
  780.                 'Content-Type': 'application/json'
  781.             });
  782.             console.log('[Debug] Request body:', requestBody);
  783.  
  784.             return new Promise((resolve, reject) => {
  785.                 GM_xmlhttpRequest({
  786.                     method: 'POST',
  787.                     url: finalEndpoint,
  788.                     headers: {
  789.                         'Authorization': `Bearer ${apiKey}`,
  790.                         'Content-Type': 'application/json'
  791.                     },
  792.                     data: JSON.stringify(requestBody),
  793.                     onload: function(response) {
  794.                         console.log('[Debug] Response received:', {
  795.                             status: response.status,
  796.                             statusText: response.statusText,
  797.                             headers: response.responseHeaders
  798.                         });
  799.  
  800.                         if (response.status === 200) {
  801.                             try {
  802.                                 let description = '';
  803.                                 const lines = response.responseText.split('\n').filter(line => line.trim() !== '');
  804.                                 
  805.                                 for (const line of lines) {
  806.                                     if (line.startsWith('data: ')) {
  807.                                         const jsonStr = line.slice(6);
  808.                                         if (jsonStr === '[DONE]') continue;
  809.                                         
  810.                                         try {
  811.                                             const jsonData = JSON.parse(jsonStr);
  812.                                             console.log('[Debug] Parsed chunk:', jsonData);
  813.                                             
  814.                                             const content = jsonData.choices[0]?.delta?.content;
  815.                                             if (content) {
  816.                                                 description += content;
  817.                                                 console.log('[Debug] Current description:', description);
  818.                                             }
  819.                                         } catch (e) {
  820.                                             console.error('[Debug] Error parsing chunk JSON:', e);
  821.                                         }
  822.                                     }
  823.                                 }
  824.  
  825.                                 console.log('[Debug] Final description:', description);
  826.                                 removeDescriptionTooltip();
  827.                                 const balanceInfo = `剩余额度为：${currentBalance.toFixed(4)}，大约还可以识别 ${remainingImages} 张图片`;
  828.                                 showDescriptionModal(description, balanceInfo);
  829.                                 resolve(description);
  830.                             } catch (error) {
  831.                                 console.error('[Debug] Error processing response:', error);
  832.                                 reject(error);
  833.                             }
  834.                         } else {
  835.                             console.error('[Debug] Error response:', {
  836.                                 status: response.status,
  837.                                 statusText: response.statusText,
  838.                                 response: response.responseText
  839.                             });
  840.                             reject(new Error(`Request failed with status ${response.status}`));
  841.                         }
  842.                     },
  843.                     onerror: function(error) {
  844.                         console.error('[Debug] Request error:', error);
  845.                         reject(error);
  846.                     },
  847.                     onprogress: function(progress) {
  848.                         // 用于处理流式响应的进度
  849.                         console.log('[Debug] Progress:', progress);
  850.                         
  851.                         try {
  852.                             const lines = progress.responseText.split('\n').filter(line => line.trim() !== '');
  853.                             let latestContent = '';
  854.                             
  855.                             for (const line of lines) {
  856.                                 if (line.startsWith('data: ')) {
  857.                                     const jsonStr = line.slice(6);
  858.                                     if (jsonStr === '[DONE]') continue;
  859.                                     
  860.                                     try {
  861.                                         const jsonData = JSON.parse(jsonStr);
  862.                                         const content = jsonData.choices[0]?.delta?.content;
  863.                                         if (content) {
  864.                                             latestContent += content;
  865.                                         }
  866.                                     } catch (e) {
  867.                                         console.error('[Debug] Error parsing progress JSON:', e);
  868.                                     }
  869.                                 }
  870.                             }
  871.                             
  872.                             if (latestContent) {
  873.                                 updateDescriptionTooltip('正在生成描述: ' + latestContent);
  874.                             }
  875.                         } catch (error) {
  876.                             console.error('[Debug] Error processing progress:', error);
  877.                         }
  878.                     }
  879.                 });
  880.             });
  881.         } catch (error) {
  882.             if (error.name === 'AbortError') {
  883.                 showToast('请求超时，请重试');
  884.             }
  885.             removeDescriptionTooltip();
  886.             console.error('[Debug] Error in getImageDescription:', {
  887.                 error,
  888.                 stack: error.stack,
  889.                 timestamp: new Date().toISOString()
  890.             });
  891.             throw error;
  892.         }
  893.     }
  894.  
  895.     // 显示描述tooltip
  896.     function showDescriptionTooltip(description) {
  897.         const tooltip = document.createElement('div');
  898.         tooltip.className = 'ai-image-description';
  899.         tooltip.textContent = description;
  900.         
  901.         // 获取视口宽度
  902.         const viewportWidth = window.innerWidth || document.documentElement.clientWidth;
  903.         
  904.         // 计算tooltip位置（水平居中，距顶部20px）
  905.         const tooltipX = Math.max(0, (viewportWidth - 300) / 2); // 300是tooltip的max-width
  906.         
  907.         tooltip.style.position = 'fixed';
  908.         tooltip.style.left = `${tooltipX}px`;
  909.         tooltip.style.top = '20px';
  910.         
  911.         document.body.appendChild(tooltip);
  912.  
  913.         // 添加动态点的动画
  914.         let dots = 1;
  915.         const updateInterval = setInterval(() => {
  916.             if (!document.body.contains(tooltip)) {
  917.                 clearInterval(updateInterval);
  918.                 return;
  919.             }
  920.             dots = dots % 6 + 1;
  921.             tooltip.textContent = '正在生成描述' + '.'.repeat(dots);
  922.         }, 500); // 每500ms更新一次
  923.  
  924.         return tooltip;
  925.     }
  926.  
  927.     // 更新描述tooltip内容
  928.     function updateDescriptionTooltip(description) {
  929.         const tooltip = document.querySelector('.ai-image-description');
  930.         if (tooltip) {
  931.             tooltip.textContent = description;
  932.         }
  933.     }
  934.  
  935.     // 移除描述tooltip
  936.     function removeDescriptionTooltip() {
  937.         const tooltip = document.querySelector('.ai-image-description');
  938.         if (tooltip) {
  939.             tooltip.remove();
  940.         }
  941.     }
  942.  
  943.     // 进入图片选择模式
  944.     function enterImageSelectionMode() {
  945.         console.log('[Debug] Entering image selection mode');
  946.         if(isSelectionMode) return; // 防止重复进入选择模式
  947.         
  948.         isSelectionMode = true;
  949.  
  950.         // 隐藏悬浮按钮
  951.         const floatingBtn = document.querySelector('.ai-floating-btn');
  952.         if(floatingBtn) {
  953.             floatingBtn.style.display = 'none';
  954.         }
  955.  
  956.         // 创建遮罩层
  957.         const overlay = document.createElement('div');
  958.         overlay.className = 'ai-selection-overlay';
  959.         document.body.appendChild(overlay);
  960.         
  961.         // 添加选择状态的类名
  962.         document.body.classList.add('ai-selecting-image');
  963.  
  964.         // 创建点击事件处理函数
  965.         const clickHandler = async function(e) {
  966.             if (!isSelectionMode) return;
  967.  
  968.             if (e.target.tagName === 'IMG') {
  969.                 console.log('[Debug] Image clicked:', e.target.src);
  970.                 e.preventDefault();
  971.                 e.stopPropagation();
  972.                 
  973.                 // 获取配置
  974.                 const endpoint = GM_getValue('apiEndpoint', '');
  975.                 const apiKey = GM_getValue('apiKey', '');
  976.                 const selectedModel = GM_getValue('selectedModel', '');
  977.  
  978.                 console.log('[Debug] Current configuration:', {
  979.                     endpoint,
  980.                     selectedModel,
  981.                     hasApiKey: !!apiKey
  982.                 });
  983.  
  984.                 if (!endpoint || !apiKey || !selectedModel) {
  985.                     showToast('请先配置API配置');
  986.                     exitImageSelectionMode();
  987.                     return;
  988.                 }
  989.  
  990.                 // 显示加载中的tooltip
  991.                 showDescriptionTooltip('正在生成描述...');
  992.  
  993.                 try {
  994.                     await getImageDescription(e.target.src, endpoint, apiKey, selectedModel);
  995.                 } catch (error) {
  996.                     console.error('[Debug] Description generation failed:', error);
  997.                     removeDescriptionTooltip();
  998.                     showToast('生成描述失败: ' + error.message);
  999.                 }
  1000.             }
  1001.         };
  1002.  
  1003.         // 添加点击事件监听器
  1004.         document.addEventListener('click', clickHandler, true);
  1005.         
  1006.         // ESC键退选择模式
  1007.         const escHandler = (e) => {
  1008.             if (e.key === 'Escape') {
  1009.                 exitImageSelectionMode();
  1010.             }
  1011.         };
  1012.         document.addEventListener('keydown', escHandler);
  1013.  
  1014.         // 保存事件理函数以便后续移除
  1015.         window._imageSelectionHandlers = {
  1016.             click: clickHandler,
  1017.             keydown: escHandler
  1018.         };
  1019.     }
  1020.  
  1021.     // 退出图片选择模式
  1022.     function exitImageSelectionMode() {
  1023.         console.log('[Debug] Exiting image selection mode');
  1024.         isSelectionMode = false;
  1025.  
  1026.         // 显示悬浮按钮
  1027.         const floatingBtn = document.querySelector('.ai-floating-btn');
  1028.         if(floatingBtn) {
  1029.             floatingBtn.style.display = 'flex';
  1030.         }
  1031.  
  1032.         // 移除遮罩层
  1033.         const overlay = document.querySelector('.ai-selection-overlay');
  1034.         if (overlay) {
  1035.             overlay.remove();
  1036.         }
  1037.  
  1038.         // 移除选择状态的类名
  1039.         document.body.classList.remove('ai-selecting-image');
  1040.  
  1041.         // 移除所有事件监听器
  1042.         if (window._imageSelectionHandlers) {
  1043.             document.removeEventListener('click', window._imageSelectionHandlers.click, true);
  1044.             document.removeEventListener('keydown', window._imageSelectionHandlers.keydown);
  1045.             window._imageSelectionHandlers = null;
  1046.         }
  1047.     }
  1048.  
  1049.     // 显示toast提示
  1050.     function showToast(message, duration = 3000) {
  1051.         const toast = document.createElement('div');
  1052.         toast.className = 'ai-toast';
  1053.         toast.textContent = message;
  1054.         document.body.appendChild(toast);
  1055.         
  1056.         setTimeout(() => {
  1057.             toast.remove();
  1058.         }, duration);
  1059.     }
  1060.  
  1061.     // 检查用户信息
  1062.     async function checkUserInfo(apiEndpoint, apiKey) {
  1063.         try {
  1064.             // 对智谱AI的endpoint返回默认值
  1065.             if(apiEndpoint.includes('bigmodel.cn')) {
  1066.                 const defaultUserData = {
  1067.                     name: 'GLM User',
  1068.                     balance: 1000,  // 默认余额
  1069.                     chargeBalance: 0,
  1070.                     totalBalance: 1000
  1071.                 };
  1072.                 console.log('[Debug] Using default user data for GLM:', defaultUserData);
  1073.                 return defaultUserData;
  1074.             }
  1075.  
  1076.             // 其他endpoint使用原有逻辑
  1077.             return new Promise((resolve, reject) => {
  1078.                 console.log('[Debug] Sending user info request to:', `${apiEndpoint}/v1/user/info`);
  1079.                 GM_xmlhttpRequest({
  1080.                     method: 'GET',
  1081.                     url: `${apiEndpoint}/v1/user/info`,
  1082.                     headers: {
  1083.                         'Authorization': `Bearer ${apiKey}`,
  1084.                         'Content-Type': 'application/json'
  1085.                     },
  1086.                     onload: function(response) {
  1087.                         console.log('[Debug] User Info Raw Response:', {
  1088.                             status: response.status,
  1089.                             statusText: response.statusText,
  1090.                             responseText: response.responseText,
  1091.                             headers: response.responseHeaders
  1092.                         });
  1093.  
  1094.                         if (response.status === 200) {
  1095.                             try {
  1096.                                 const result = JSON.parse(response.responseText);
  1097.                                 console.log('[Debug] User Info Parsed Response:', result);
  1098.                                 
  1099.                                 if (result.code === 20000 && result.status && result.data) {
  1100.                                     const { name, balance, chargeBalance, totalBalance } = result.data;
  1101.                                     resolve({
  1102.                                         name,
  1103.                                         balance: parseFloat(balance),
  1104.                                         chargeBalance: parseFloat(chargeBalance),
  1105.                                         totalBalance: parseFloat(totalBalance)
  1106.                                     });
  1107.                                 } else {
  1108.                                     throw new Error(result.message || 'Invalid response format');
  1109.                                 }
  1110.                             } catch (error) {
  1111.                                 console.error('[Debug] JSON Parse Error:', error);
  1112.                                 reject(error);
  1113.                             }
  1114.                         } else {
  1115.                             console.error('[Debug] HTTP Error Response:', {
  1116.                                 status: response.status,
  1117.                                 statusText: response.statusText,
  1118.                                 response: response.responseText
  1119.                             });
  1120.                             reject(new Error(`HTTP error! status: ${response.status}`));
  1121.                         }
  1122.                     },
  1123.                     onerror: function(error) {
  1124.                         console.error('[Debug] Request Error:', error);
  1125.                         reject(error);
  1126.                     }
  1127.                 });
  1128.             });
  1129.         } catch (error) {
  1130.             console.error('[Debug] User Info Error:', error);
  1131.             throw error;
  1132.         }
  1133.     }
  1134.  
  1135.     // 获取可用模型列表
  1136.     async function getAvailableModels(apiEndpoint, apiKey) {
  1137.         console.log('[Debug] Getting available models from:', apiEndpoint);
  1138.  
  1139.         try {
  1140.             // 如果是智谱AI的endpoint,直接返回GLM模型列表
  1141.             if(apiEndpoint.includes('bigmodel.cn')) {
  1142.                 const glmModels = [
  1143.                     {
  1144.                         id: 'glm-4',
  1145.                         name: 'GLM-4'
  1146.                     },
  1147.                     {
  1148.                         id: 'glm-4v',
  1149.                         name: 'GLM-4V'
  1150.                     },
  1151.                     {
  1152.                         id: 'glm-4v-flash',
  1153.                         name: 'GLM-4V-Flash'
  1154.                     }
  1155.                 ];
  1156.                 console.log('[Debug] Available GLM models:', glmModels);
  1157.                 return glmModels;
  1158.             }
  1159.  
  1160.             // 其他endpoint使用原有逻辑
  1161.             return new Promise((resolve, reject) => {
  1162.                 console.log('[Debug] Sending models request to:', `${apiEndpoint}/v1/models`);
  1163.                 GM_xmlhttpRequest({
  1164.                     method: 'GET',
  1165.                     url: `${apiEndpoint}/v1/models`,
  1166.                     headers: {
  1167.                         'Authorization': `Bearer ${apiKey}`,
  1168.                         'Content-Type': 'application/json'
  1169.                     },
  1170.                     onload: function(response) {
  1171.                         console.log('[Debug] Models API Raw Response:', {
  1172.                             status: response.status,
  1173.                             statusText: response.statusText,
  1174.                             responseText: response.responseText,
  1175.                             headers: response.responseHeaders
  1176.                         });
  1177.  
  1178.                         if (response.status === 200) {
  1179.                             try {
  1180.                                 const result = JSON.parse(response.responseText);
  1181.                                 console.log('[Debug] Models API Parsed Response:', result);
  1182.                                 
  1183.                                 if (result.object === 'list' && Array.isArray(result.data)) {
  1184.                                     const models = result.data
  1185.                                         .filter(model => supportedVLModels.includes(model.id))
  1186.                                         .map(model => ({
  1187.                                             id: model.id,
  1188.                                             name: model.id.split('/').pop()
  1189.                                                 .replace('Qwen2-VL-', 'Qwen2-')
  1190.                                                 .replace('InternVL2-Llama3-', 'InternVL2-')
  1191.                                                 .replace('-Instruct', '')
  1192.                                         }));
  1193.                                     console.log('[Debug] Filtered and processed models:', models);
  1194.                                     resolve(models);
  1195.                                 } else {
  1196.                                     console.error('[Debug] Invalid models response format:', result);
  1197.                                     reject(new Error('Invalid models response format'));
  1198.                                 }
  1199.                             } catch (error) {
  1200.                                 console.error('[Debug] JSON Parse Error:', error);
  1201.                                 reject(error);
  1202.                             }
  1203.                         } else {
  1204.                             console.error('[Debug] HTTP Error Response:', {
  1205.                                 status: response.status,
  1206.                                 statusText: response.statusText,
  1207.                                 response: response.responseText
  1208.                             });
  1209.                             reject(new Error(`HTTP error! status: ${response.status}`));
  1210.                         }
  1211.                     },
  1212.                     onerror: function(error) {
  1213.                         console.error('[Debug] Models API Request Error:', error);
  1214.                         reject(error);
  1215.                     }
  1216.                 });
  1217.             });
  1218.         } catch (error) {
  1219.             console.error('[Debug] Models API Error:', error);
  1220.             throw error;
  1221.         }
  1222.     }
  1223.  
  1224.     // 更新模型下拉菜单
  1225.     function updateModelSelect(selectElement, models) {
  1226.         if (models.length === 0) {
  1227.             selectElement.innerHTML = '<option value="">未找到可用的视觉模型</option>';
  1228.             selectElement.disabled = true;
  1229.             return;
  1230.         }
  1231.  
  1232.         selectElement.innerHTML = '<option value="">请选择视觉模型</option>' +
  1233.             models.map(model => 
  1234.                 `<option value="${model.id}" title="${model.id}">${model.name}</option>`
  1235.             ).join('');
  1236.         selectElement.disabled = false;
  1237.     }
  1238.  
  1239.     // 保存模型列表到GM存储
  1240.     function saveModelList(models) {
  1241.         GM_setValue('availableModels', models);
  1242.     }
  1243.  
  1244.     // 从GM存储获取模型列表
  1245.     function getStoredModelList() {
  1246.         return GM_getValue('availableModels', []);
  1247.     }
  1248.  
  1249.     // 创建悬浮按钮
  1250.     function createFloatingButton() {
  1251.         const btn = document.createElement('div');
  1252.         btn.className = 'ai-floating-btn';
  1253.         btn.innerHTML = `
  1254.             <svg viewBox="0 0 24 24">
  1255.                 <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"/>
  1256.             </svg>
  1257.         `;
  1258.  
  1259.         // 设置初始位置
  1260.         const savedPos = JSON.parse(GM_getValue('btnPosition', '{"x": 20, "y": 20}'));
  1261.         btn.style.left = (savedPos.x || 20) + 'px';
  1262.         btn.style.top = (savedPos.y || 20) + 'px';
  1263.         btn.style.right = 'auto';
  1264.         btn.style.bottom = 'auto';
  1265.  
  1266.         let isDragging = false;
  1267.         let hasMoved = false;
  1268.         let startX, startY;
  1269.         let initialLeft, initialTop;
  1270.         let longPressTimer;
  1271.         let touchStartTime;
  1272.  
  1273.         // 触屏事件处理
  1274.         btn.addEventListener('touchstart', function(e) {
  1275.             e.preventDefault();
  1276.             touchStartTime = Date.now();
  1277.             
  1278.             // 设置长按定时器
  1279.             longPressTimer = setTimeout(() => {
  1280.                 exitImageSelectionMode();
  1281.                 createConfigUI();
  1282.             }, 500); // 500ms长按触发
  1283.  
  1284.             const touch = e.touches[0];
  1285.             startX = touch.clientX;
  1286.             startY = touch.clientY;
  1287.             const rect = btn.getBoundingClientRect();
  1288.             initialLeft = rect.left;
  1289.             initialTop = rect.top;
  1290.         });
  1291.  
  1292.         btn.addEventListener('touchmove', function(e) {
  1293.             e.preventDefault();
  1294.             clearTimeout(longPressTimer); // 移动时取消长按
  1295.  
  1296.             const touch = e.touches[0];
  1297.             const deltaX = touch.clientX - startX;
  1298.             const deltaY = touch.clientY - startY;
  1299.             
  1300.             if (Math.abs(deltaX) > 5 || Math.abs(deltaY) > 5) {
  1301.                 hasMoved = true;
  1302.             }
  1303.             
  1304.             const newLeft = Math.max(0, Math.min(window.innerWidth - btn.offsetWidth, initialLeft + deltaX));
  1305.             const newTop = Math.max(0, Math.min(window.innerHeight - btn.offsetHeight, initialTop + deltaY));
  1306.             
  1307.             btn.style.left = newLeft + 'px';
  1308.             btn.style.top = newTop + 'px';
  1309.         });
  1310.  
  1311.         btn.addEventListener('touchend', function(e) {
  1312.             e.preventDefault();
  1313.             clearTimeout(longPressTimer);
  1314.             
  1315.             const touchDuration = Date.now() - touchStartTime;
  1316.             
  1317.             if (!hasMoved && touchDuration < 500) {
  1318.                 // 短按进入图片选择模式
  1319.                 enterImageSelectionMode();
  1320.             }
  1321.             
  1322.             if (hasMoved) {
  1323.                 // 保存新位置
  1324.                 const rect = btn.getBoundingClientRect();
  1325.                 GM_setValue('btnPosition', JSON.stringify({
  1326.                     x: rect.left,
  1327.                     y: rect.top
  1328.                 }));
  1329.             }
  1330.             
  1331.             hasMoved = false;
  1332.         });
  1333.  
  1334.         // 保留原有的鼠标事件处理
  1335.         btn.addEventListener('click', function(e) {
  1336.             if (e.button === 0 && !hasMoved) { // 左键点击且没有移动
  1337.                 enterImageSelectionMode();
  1338.                 e.stopPropagation();
  1339.             }
  1340.             hasMoved = false;
  1341.         });
  1342.  
  1343.         btn.addEventListener('contextmenu', function(e) {
  1344.             e.preventDefault();
  1345.             exitImageSelectionMode();
  1346.             createConfigUI();
  1347.         });
  1348.  
  1349.         // 拖拽相关事件
  1350.         function dragStart(e) {
  1351.             if (e.target === btn || btn.contains(e.target)) {
  1352.                 isDragging = true;
  1353.                 hasMoved = false;
  1354.                 const rect = btn.getBoundingClientRect();
  1355.                 startX = e.clientX;
  1356.                 startY = e.clientY;
  1357.                 initialLeft = rect.left;
  1358.                 initialTop = rect.top;
  1359.                 e.preventDefault();
  1360.             }
  1361.         }
  1362.  
  1363.         function drag(e) {
  1364.             if (isDragging) {
  1365.                 e.preventDefault();
  1366.                 const deltaX = e.clientX - startX;
  1367.                 const deltaY = e.clientY - startY;
  1368.                 
  1369.                 if (Math.abs(deltaX) > 5 || Math.abs(deltaY) > 5) {
  1370.                     hasMoved = true;
  1371.                 }
  1372.                 
  1373.                 const newLeft = Math.max(0, Math.min(window.innerWidth - btn.offsetWidth, initialLeft + deltaX));
  1374.                 const newTop = Math.max(0, Math.min(window.innerHeight - btn.offsetHeight, initialTop + deltaY));
  1375.                 
  1376.                 btn.style.left = newLeft + 'px';
  1377.                 btn.style.top = newTop + 'px';
  1378.             }
  1379.         }
  1380.  
  1381.         function dragEnd(e) {
  1382.             if (isDragging) {
  1383.                 isDragging = false;
  1384.                 const rect = btn.getBoundingClientRect();
  1385.                 GM_setValue('btnPosition', JSON.stringify({
  1386.                     x: rect.left,
  1387.                     y: rect.top
  1388.                 }));
  1389.             }
  1390.         }
  1391.  
  1392.         btn.addEventListener('mousedown', dragStart);
  1393.         document.addEventListener('mousemove', drag);
  1394.         document.addEventListener('mouseup', dragEnd);
  1395.  
  1396.         // 将按钮添加到文档中
  1397.         document.body.appendChild(btn);
  1398.         return btn;
  1399.     }
  1400.  
  1401.     // 创建配置界面
  1402.     function createConfigUI() {
  1403.         const overlay = document.createElement('div');
  1404.         overlay.className = 'ai-modal-overlay';
  1405.         
  1406.         const modal = document.createElement('div');
  1407.         modal.className = 'ai-config-modal';
  1408.         modal.innerHTML = `
  1409.             <h3>AI图像描述配置</h3>
  1410.             <div class="input-group">
  1411.                 <label>API Endpoint:</label>
  1412.                 <div class="input-wrapper">
  1413.                     <input type="text" id="ai-endpoint" placeholder="https://api.openai.com" value="${GM_getValue('apiEndpoint', '')}">
  1414.                     <span class="input-icon clear-icon" title="清空" onclick="this.previousElementSibling.value=''">✕</span>
  1415.                 </div>
  1416.             </div>
  1417.             <div class="input-group">
  1418.                 <label>API Key:</label>
  1419.                 <div class="input-wrapper">
  1420.                     <input type="password" id="ai-apikey" value="${GM_getValue('apiKey', '')}">
  1421.                     <span class="input-icon clear-icon" title="清空" onclick="this.previousElementSibling.value=''">✕</span>
  1422.                     <span class="input-icon toggle-password" title="显示/隐藏密码">👁️</span>
  1423.                 </div>
  1424.                 <div class="button-row">
  1425.                     <button class="check-button" id="check-api">检测可用性</button>
  1426.                 </div>
  1427.             </div>
  1428.             <div class="input-group">
  1429.                 <label>可用模型:</label>
  1430.                 <select id="ai-model">
  1431.                     <option value="">加载中...</option>
  1432.                 </select>
  1433.             </div>
  1434.             <div class="button-group">
  1435.                 <button class="cancel-button" id="ai-cancel-config">取消</button>
  1436.                 <button class="save-button" id="ai-save-config">保存</button>
  1437.             </div>
  1438.         `;
  1439.  
  1440.         overlay.appendChild(modal);
  1441.         document.body.appendChild(overlay);
  1442.  
  1443.         // 初始化模型下拉菜单
  1444.         const modelSelect = modal.querySelector('#ai-model');
  1445.         const storedModels = getStoredModelList();
  1446.         const selectedModel = GM_getValue('selectedModel', '');
  1447.         
  1448.         if (storedModels.length > 0) {
  1449.             updateModelSelect(modelSelect, storedModels);
  1450.             if (selectedModel) {
  1451.                 modelSelect.value = selectedModel;
  1452.             }
  1453.         } else {
  1454.             modelSelect.innerHTML = '<option value="">请先检测API可用性</option>';
  1455.             modelSelect.disabled = true;
  1456.         }
  1457.  
  1458.         // 添加密码显示切换事件监听
  1459.         const toggleBtn = modal.querySelector('.toggle-password');
  1460.         toggleBtn.addEventListener('click', function() {
  1461.             togglePassword(this);
  1462.         });
  1463.  
  1464.         // 自动保存配置
  1465.         const inputs = modal.querySelectorAll('input');
  1466.         inputs.forEach(input => {
  1467.             input.addEventListener('blur', function() {
  1468.                 const endpoint = modal.querySelector('#ai-endpoint').value.trim();
  1469.                 const apiKey = modal.querySelector('#ai-apikey').value.trim();
  1470.                 
  1471.                 if (endpoint && apiKey) {
  1472.                     GM_setValue('apiEndpoint', endpoint);
  1473.                     GM_setValue('apiKey', apiKey);
  1474.                     showToast('配置已保存');
  1475.                 }
  1476.             });
  1477.         });
  1478.  
  1479.         // 检测API可用性
  1480.         const checkButton = modal.querySelector('#check-api');
  1481.         checkButton.addEventListener('click', async function() {
  1482.             const endpoint = modal.querySelector('#ai-endpoint').value.trim();
  1483.             const apiKey = modal.querySelector('#ai-apikey').value.trim();
  1484.  
  1485.             if (!endpoint || !apiKey) {
  1486.                 showToast('请先填写API Endpoint和API Key');
  1487.                 return;
  1488.             }
  1489.  
  1490.             checkButton.disabled = true;
  1491.             modelSelect.disabled = true;
  1492.             modelSelect.innerHTML = '<option value="">检测中...</option>';
  1493.  
  1494.             try {
  1495.                 // 并行请求用户信息和模型列表
  1496.                 const [userInfo, models] = await Promise.all([
  1497.                     checkUserInfo(endpoint, apiKey),
  1498.                     getAvailableModels(endpoint, apiKey)
  1499.                 ]);
  1500.  
  1501.                 // 保存模型列表
  1502.                 saveModelList(models);
  1503.  
  1504.                 // 更新模型下拉菜单
  1505.                 updateModelSelect(modelSelect, models);
  1506.  
  1507.                 // 显示用户信息
  1508.                 showToast(`检测通过，欢迎 ${userInfo.name}！\n账户余额：${userInfo.balance.toFixed(2)}\n充值余额：${userInfo.chargeBalance.toFixed(2)}\n总余额：${userInfo.totalBalance.toFixed(2)}`);
  1509.  
  1510.                 // 如果之前存过模型选择，恢复选择
  1511.                 const savedModel = GM_getValue('selectedModel', '');
  1512.                 if (savedModel && models.some(m => m.id === savedModel)) {
  1513.                     modelSelect.value = savedModel;
  1514.                 }
  1515.             } catch (error) {
  1516.                 showToast('API检测失败：' + error.message);
  1517.                 modelSelect.innerHTML = '<option value="">获取模型列表失败</option>';
  1518.                 modelSelect.disabled = true;
  1519.             } finally {
  1520.                 checkButton.disabled = false;
  1521.             }
  1522.         });
  1523.  
  1524.         // 模型选择变更时保存
  1525.         modelSelect.addEventListener('change', function() {
  1526.             if (this.value) {
  1527.                 GM_setValue('selectedModel', this.value);
  1528.                 showToast('已保存模型选择');
  1529.             }
  1530.         });
  1531.  
  1532.         // 保存配置
  1533.         const saveButton = modal.querySelector('#ai-save-config');
  1534.         saveButton.addEventListener('click', function() {
  1535.             const endpoint = modal.querySelector('#ai-endpoint').value.trim();
  1536.             const apiKey = modal.querySelector('#ai-apikey').value.trim();
  1537.             const selectedModel = modelSelect.value;
  1538.  
  1539.             if (!endpoint || !apiKey) {
  1540.                 showToast('请填写API Endpoint和API Key');
  1541.                 return;
  1542.             }
  1543.  
  1544.             if (!selectedModel) {
  1545.                 showToast('请选择一个视觉模型');
  1546.                 return;
  1547.             }
  1548.  
  1549.             GM_setValue('apiEndpoint', endpoint);
  1550.             GM_setValue('apiKey', apiKey);
  1551.             GM_setValue('selectedModel', selectedModel);
  1552.             showToast('配置已保存');
  1553.             overlay.remove();
  1554.         });
  1555.  
  1556.         // 更新保存按钮状态
  1557.         function updateSaveButtonState() {
  1558.             const endpoint = modal.querySelector('#ai-endpoint').value.trim();
  1559.             const apiKey = modal.querySelector('#ai-apikey').value.trim();
  1560.             const selectedModel = modelSelect.value;
  1561.             
  1562.             saveButton.disabled = !endpoint || !apiKey || !selectedModel;
  1563.         }
  1564.  
  1565.         // 监听输入变化
  1566.         modal.querySelector('#ai-endpoint').addEventListener('input', updateSaveButtonState);
  1567.         modal.querySelector('#ai-apikey').addEventListener('input', updateSaveButtonState);
  1568.         modelSelect.addEventListener('change', updateSaveButtonState);
  1569.  
  1570.         // 初始化保存按钮状态
  1571.         updateSaveButtonState();
  1572.  
  1573.         // 取消配置
  1574.         modal.querySelector('#ai-cancel-config').onclick = () => {
  1575.             overlay.remove();
  1576.         };
  1577.  
  1578.         // 点击遮罩层关闭
  1579.         overlay.addEventListener('click', (e) => {
  1580.             if (e.target === overlay) {
  1581.                 overlay.remove();
  1582.             }
  1583.         });
  1584.     }
  1585.  
  1586.     // 显示图像选择面
  1587.     function showImageSelectionModal() {
  1588.         const overlay = document.createElement('div');
  1589.         overlay.className = 'ai-modal-overlay';
  1590.         
  1591.         const modal = document.createElement('div');
  1592.         modal.className = 'ai-config-modal';
  1593.         modal.innerHTML = `
  1594.             <h3>选择要识别的图像</h3>
  1595.             <div class="ai-image-options">
  1596.                 <button id="ai-all-images">识别所有图片</button>
  1597.                 <button id="ai-visible-images">仅识别可见图片</button>
  1598.             </div>
  1599.             <button id="ai-cancel">取消</button>
  1600.         `;
  1601.  
  1602.         overlay.appendChild(modal);
  1603.         document.body.appendChild(overlay);
  1604.  
  1605.         // 添加事件监听
  1606.         modal.querySelector('#ai-all-images').onclick = () => {
  1607.             if (checkApiConfig()) {
  1608.                 describeAllImages();
  1609.                 overlay.remove();
  1610.             }
  1611.         };
  1612.  
  1613.         modal.querySelector('#ai-visible-images').onclick = () => {
  1614.             if (checkApiConfig()) {
  1615.                 describeVisibleImages();
  1616.                 overlay.remove();
  1617.             }
  1618.         };
  1619.  
  1620.         modal.querySelector('#ai-cancel').onclick = () => {
  1621.             overlay.remove();
  1622.         };
  1623.  
  1624.         // 点击遮罩层关闭
  1625.         overlay.addEventListener('click', (e) => {
  1626.             if (e.target === overlay) {
  1627.                 overlay.remove();
  1628.             }
  1629.         });
  1630.     }
  1631.  
  1632.     function showDescriptionModal(description, balanceInfo) {
  1633.         const overlay = document.createElement('div');
  1634.         overlay.className = 'ai-modal-overlay';
  1635.         
  1636.         const modal = document.createElement('div');
  1637.         modal.className = 'ai-result-modal';
  1638.         modal.innerHTML = `
  1639.             <h3>图片描述结果</h3>
  1640.             <pre class="description-code"><code>${description}</code></pre>
  1641.             <div class="copy-hint">点击上方代码块复制内容</div>
  1642.             ${balanceInfo ? `<div class="balance-info">${balanceInfo}</div>` : ''}
  1643.             <button class="close-button">&times;</button>
  1644.         `;
  1645.     
  1646.         // 添加复制功能
  1647.         const codeBlock = modal.querySelector('.description-code');
  1648.         codeBlock.addEventListener('click', async () => {
  1649.             try {
  1650.                 await navigator.clipboard.writeText(description);
  1651.                 showToast('已复制描述');
  1652.             } catch (err) {
  1653.                 console.error('[Debug] Copy failed:', err);
  1654.                 showToast('复制失败，请手动复制');
  1655.             }
  1656.         });
  1657.     
  1658.         // 添加闭按钮功能
  1659.         const closeButton = modal.querySelector('.close-button');
  1660.         closeButton.addEventListener('click', () => {
  1661.             overlay.remove();
  1662.         });
  1663.     
  1664.         // 点击遮罩层关闭
  1665.         overlay.addEventListener('click', (e) => {
  1666.             if (e.target === overlay) {
  1667.                 overlay.remove();
  1668.             }
  1669.         });
  1670.     
  1671.         // ESC键关闭
  1672.         const escHandler = (e) => {
  1673.             if (e.key === 'Escape') {
  1674.                 overlay.remove();
  1675.                 document.removeEventListener('keydown', escHandler);
  1676.             }
  1677.         };
  1678.         document.addEventListener('keydown', escHandler);
  1679.     
  1680.         overlay.appendChild(modal);
  1681.         document.body.appendChild(overlay);
  1682.     }
  1683.  
  1684.     // 添加计算成本的函数
  1685.     function calculateCost(imageSize, modelName) {
  1686.         let baseCost;
  1687.         switch (modelName) {
  1688.             case 'glm-4v':
  1689.                 baseCost = 0.015; // GLM-4V的基础成本
  1690.                 break;
  1691.             case 'glm-4v-flash':
  1692.                 baseCost = 0.002; // GLM-4V-Flash的基础成本
  1693.                 break;
  1694.             case 'Qwen/Qwen2-VL-72B-Instruct':
  1695.                 baseCost = 0.015;
  1696.                 break;
  1697.             case 'Pro/Qwen/Qwen2-VL-7B-Instruct':
  1698.                 baseCost = 0.005;
  1699.                 break;
  1700.             case 'OpenGVLab/InternVL2-Llama3-76B':
  1701.                 baseCost = 0.015;
  1702.                 break;
  1703.             case 'OpenGVLab/InternVL2-26B':
  1704.                 baseCost = 0.008;
  1705.                 break;
  1706.             case 'Pro/OpenGVLab/InternVL2-8B':
  1707.                 baseCost = 0.003;
  1708.                 break;
  1709.             default:
  1710.                 baseCost = 0.01;
  1711.         }
  1712.  
  1713.         // 图片大小影响因子（每MB增加一定成本）
  1714.         const imageSizeMB = imageSize / (1024 * 1024);
  1715.         const sizeMultiplier = 1 + (imageSizeMB * 0.1); // 每MB增加10%成本
  1716.  
  1717.         return baseCost * sizeMultiplier;
  1718.     }
  1719.  
  1720.     // 初始化
  1721.     function initialize() {
  1722.         // 确保DOM加载成后再创建按钮
  1723.         if (document.readyState === 'loading') {
  1724.             document.addEventListener('DOMContentLoaded', () => {
  1725.                 createFloatingButton();
  1726.             });
  1727.         } else {
  1728.             createFloatingButton();
  1729.         }
  1730.     }
  1731.  
  1732.     // 启动脚本
  1733.     initialize();
  1734. })();