☰

Text Explainer

Explain selected text using LLM

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

  1. // ==UserScript==
  2. // @name         Text Explainer
  3. // @namespace    http://tampermonkey.net/
  4. // @version      0.2.1
  5. // @description  Explain selected text using LLM
  6. // @author       RoCry
  7. // @match        *://*/*
  8. // @grant        GM_setValue
  9. // @grant        GM_getValue
  10. // @grant        GM_addStyle
  11. // @grant        GM_xmlhttpRequest
  12. // @grant        GM_registerMenuCommand
  13. // @connect      generativelanguage.googleapis.com
  14. // @connect      *
  15. // @run-at       document-end
  16. // @inject-into  content
  17. // @require      https://update.greasyfork.org/scripts/528704/1547031/SmolLLM.js
  18. // @require      https://update.greasyfork.org/scripts/528703/1546610/SimpleBalancer.js
  19. // @require      https://update.greasyfork.org/scripts/528763/1547395/Text%20Explainer%20Settings.js
  20. // @license MIT
  21. // ==/UserScript==
  22.  
  23. (function () {
  24.   'use strict';
  25.  
  26.   // Initialize settings manager with extended default config
  27.   const settingsManager = new TextExplainerSettings({
  28.     model: "gemini-2.0-flash",
  29.     apiKey: null,
  30.     baseUrl: "https://generativelanguage.googleapis.com",
  31.     provider: "gemini",
  32.     language: "Chinese", // Default language
  33.     shortcut: {
  34.       key: "d",
  35.       ctrlKey: false,
  36.       altKey: true,
  37.       shiftKey: false,
  38.       metaKey: false
  39.     },
  40.     floatingButton: {
  41.       enabled: true,
  42.       size: "medium",
  43.       position: "bottom-right"
  44.     }
  45.   });
  46.   
  47.   // Get current configuration
  48.   let config = settingsManager.getAll();
  49.  
  50.   // Initialize SmolLLM
  51.   let llm;
  52.   try {
  53.     llm = new SmolLLM();
  54.   } catch (error) {
  55.     console.error('Failed to initialize SmolLLM:', error);
  56.     llm = null;
  57.   }
  58.  
  59.   // Check if device is touch-enabled
  60.   const isTouchDevice = () => {
  61.     return ('ontouchstart' in window) || 
  62.       (navigator.maxTouchPoints > 0) || 
  63.       (navigator.msMaxTouchPoints > 0);
  64.   };
  65.   
  66.   const isIOS = () => {
  67.     return /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
  68.   };
  69.   
  70.   // Create and manage floating button
  71.   let floatingButton = null;
  72.   
  73.   function createFloatingButton() {
  74.     if (floatingButton) return;
  75.     
  76.     floatingButton = document.createElement('div');
  77.     floatingButton.id = 'explainer-floating-button';
  78.     
  79.     // Determine size based on settings
  80.     let buttonSize;
  81.     switch (config.floatingButton.size) {
  82.       case 'small': buttonSize = '40px'; break;
  83.       case 'large': buttonSize = '60px'; break;
  84.       default: buttonSize = '50px'; // medium
  85.     }
  86.     
  87.     // Position based on settings
  88.     let positionCSS;
  89.     switch (config.floatingButton.position) {
  90.       case 'top-left': positionCSS = 'top: 20px; left: 20px;'; break;
  91.       case 'top-right': positionCSS = 'top: 20px; right: 20px;'; break;
  92.       case 'bottom-left': positionCSS = 'bottom: 20px; left: 20px;'; break;
  93.       default: positionCSS = 'bottom: 20px; right: 20px;'; // bottom-right
  94.     }
  95.     
  96.     floatingButton.style.cssText = `
  97.       width: ${buttonSize};
  98.       height: ${buttonSize};
  99.       border-radius: 50%;
  100.       background-color: rgba(33, 150, 243, 0.8);
  101.       color: white;
  102.       display: flex;
  103.       align-items: center;
  104.       justify-content: center;
  105.       position: fixed;
  106.       ${positionCSS}
  107.       z-index: 9999;
  108.       box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  109.       cursor: pointer;
  110.       font-weight: bold;
  111.       font-size: ${parseInt(buttonSize) * 0.4}px;
  112.       opacity: 0;
  113.       transition: opacity 0.3s ease, transform 0.2s ease;
  114.       pointer-events: none;
  115.       touch-action: manipulation;
  116.       -webkit-tap-highlight-color: transparent;
  117.     `;
  118.     
  119.     // Add icon or text
  120.     floatingButton.innerHTML = '✓';
  121.     
  122.     // Add to DOM
  123.     document.body.appendChild(floatingButton);
  124.     
  125.     // Add click event
  126.     floatingButton.addEventListener('click', (e) => {
  127.       e.preventDefault();
  128.       processSelectedText();
  129.     });
  130.     
  131.     // Prevent text selection on button
  132.     floatingButton.addEventListener('mousedown', (e) => {
  133.       e.preventDefault();
  134.     });
  135.   }
  136.   
  137.   function showFloatingButton() {
  138.     if (!floatingButton || !config.floatingButton.enabled) return;
  139.     
  140.     // Make visible and enable pointer events
  141.     floatingButton.style.opacity = '1';
  142.     floatingButton.style.pointerEvents = 'auto';
  143.     
  144.     // Add active effect for touch
  145.     floatingButton.addEventListener('touchstart', () => {
  146.       floatingButton.style.transform = 'scale(0.95)';
  147.     });
  148.     
  149.     floatingButton.addEventListener('touchend', () => {
  150.       floatingButton.style.transform = 'scale(1)';
  151.     });
  152.   }
  153.   
  154.   function hideFloatingButton() {
  155.     if (!floatingButton) return;
  156.     floatingButton.style.opacity = '0';
  157.     floatingButton.style.pointerEvents = 'none';
  158.   }
  159.  
  160.   // Add minimal styles for UI components
  161.   GM_addStyle(`
  162.     #explainer-popup {
  163.         position: fixed;
  164.         top: 50%;
  165.         left: 50%;
  166.         transform: translate(-50%, -50%);
  167.         width: 450px;
  168.         max-width: 90vw;
  169.         max-height: 80vh;
  170.         background: rgba(255, 255, 255, 0.3);
  171.         backdrop-filter: blur(15px);
  172.         -webkit-backdrop-filter: blur(15px);
  173.         border-radius: 8px;
  174.         box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  175.         z-index: 10000;
  176.         overflow: auto;
  177.         padding: 16px;
  178.     }
  179.     #explainer-loading {
  180.         text-align: center;
  181.         padding: 20px 0;
  182.         display: flex;
  183.         align-items: center;
  184.         justify-content: center;
  185.     }
  186.     #explainer-loading:after {
  187.         content: "";
  188.         width: 24px;
  189.         height: 24px;
  190.         border: 3px solid #ddd;
  191.         border-top: 3px solid #2196F3;
  192.         border-radius: 50%;
  193.         animation: spin 1s linear infinite;
  194.         display: inline-block;
  195.     }
  196.     @keyframes spin {
  197.         0% { transform: rotate(0deg); }
  198.         100% { transform: rotate(360deg); }
  199.     }
  200.     #explainer-error {
  201.         color: #d32f2f;
  202.         padding: 8px;
  203.         border-radius: 4px;
  204.         margin-bottom: 10px;
  205.         font-size: 14px;
  206.         display: none;
  207.     }
  208.     /* Dark mode support - minimal */
  209.     @media (prefers-color-scheme: dark) {
  210.         #explainer-popup {
  211.             background: rgba(35, 35, 40, 0.7);
  212.             color: #e0e0e0;
  213.         }
  214.         #explainer-error {
  215.             background-color: rgba(100, 25, 25, 0.4);
  216.             color: #ff8a8a;
  217.         }
  218.         #explainer-floating-button {
  219.             background-color: rgba(33, 150, 243, 0.9);
  220.         }
  221.     }
  222.   `);
  223.  
  224.   // Function to close the popup
  225.   function closePopup() {
  226.     const popup = document.getElementById('explainer-popup');
  227.     if (popup) {
  228.       popup.remove();
  229.     }
  230.   }
  231.  
  232.   // Create popup
  233.   function createPopup() {
  234.     // Remove existing popup if any
  235.     closePopup();
  236.  
  237.     const popup = document.createElement('div');
  238.     popup.id = 'explainer-popup';
  239.  
  240.     popup.innerHTML = `
  241.       <div id="explainer-error"></div>
  242.       <div id="explainer-loading"></div>
  243.       <div id="explainer-content"></div>
  244.     `;
  245.  
  246.     document.body.appendChild(popup);
  247.  
  248.     // Add event listener for Escape key
  249.     document.addEventListener('keydown', handleEscKey);
  250.     
  251.     // Add event listener for clicking outside popup
  252.     document.addEventListener('click', handleOutsideClick);
  253.  
  254.     return popup;
  255.   }
  256.  
  257.   // Handle Escape key to close popup
  258.   function handleEscKey(e) {
  259.     if (e.key === 'Escape') {
  260.       closePopup();
  261.       document.removeEventListener('keydown', handleEscKey);
  262.       document.removeEventListener('click', handleOutsideClick);
  263.     }
  264.   }
  265.   
  266.   // Handle clicks outside popup to close it
  267.   function handleOutsideClick(e) {
  268.     const popup = document.getElementById('explainer-popup');
  269.     if (popup && !popup.contains(e.target)) {
  270.       closePopup();
  271.       document.removeEventListener('keydown', handleEscKey);
  272.       document.removeEventListener('click', handleOutsideClick);
  273.     }
  274.   }
  275.  
  276.   // Function to show an error in the popup
  277.   function showError(message) {
  278.     const errorDiv = document.getElementById('explainer-error');
  279.     if (errorDiv) {
  280.       errorDiv.textContent = message;
  281.       errorDiv.style.display = 'block';
  282.       document.getElementById('explainer-loading').style.display = 'none';
  283.     }
  284.   }
  285.  
  286.   // Function to get text from selected element
  287.   function getSelectedText() {
  288.     const selection = window.getSelection();
  289.     if (!selection || selection.rangeCount === 0 || selection.toString().trim() === '') {
  290.       return { selectionText: null, paragraphText: null };
  291.     }
  292.  
  293.     const selectionText = selection.toString().trim();
  294.  
  295.     // Get the paragraph containing the selection
  296.     const range = selection.getRangeAt(0);
  297.     let paragraphElement = range.commonAncestorContainer;
  298.  
  299.     // Navigate up to find a paragraph or meaningful content container
  300.     while (paragraphElement &&
  301.       (paragraphElement.nodeType !== Node.ELEMENT_NODE ||
  302.         !['P', 'DIV', 'ARTICLE', 'SECTION', 'LI'].includes(paragraphElement.tagName))) {
  303.       paragraphElement = paragraphElement.parentNode;
  304.     }
  305.  
  306.     let paragraphText = '';
  307.     if (paragraphElement) {
  308.       // Get text content but limit to a reasonable size
  309.       paragraphText = paragraphElement.textContent.trim();
  310.       if (paragraphText.length > 500) {
  311.         paragraphText = paragraphText.substring(0, 497) + '...';
  312.       }
  313.     }
  314.  
  315.     return { selectionText, paragraphText };
  316.   }
  317.  
  318.   // Function to call the LLM using SmolLLM
  319.   async function callLLM(prompt, systemPrompt, progressCallback) {
  320.     if (!config.apiKey) {
  321.       throw new Error("Please set up your API key in the settings.");
  322.     }
  323.  
  324.     if (!llm) {
  325.       throw new Error("SmolLLM library not initialized. Please check console for errors.");
  326.     }
  327.  
  328.     console.log(`prompt: ${prompt}`);
  329.     console.log(`systemPrompt: ${systemPrompt}`);
  330.     try {
  331.       return await llm.askLLM({
  332.         prompt: prompt,
  333.         systemPrompt: systemPrompt,
  334.         model: config.model,
  335.         apiKey: config.apiKey,
  336.         baseUrl: config.baseUrl,
  337.         providerName: config.provider,
  338.         handler: progressCallback,
  339.         timeout: 60000
  340.       });
  341.     } catch (error) {
  342.       console.error('LLM API error:', error);
  343.       throw error;
  344.     }
  345.   }
  346.  
  347.   function getPrompt(selectionText, paragraphText) {
  348.     const wordsCount = selectionText.split(' ').length;
  349.     const defaultSystemPrompt = `You will response in ${config.language} with basic html format like <p> <b> <i> <a> <li> <ol> <ul> to improve readability.
  350. Do NOT wrap your response in code block.`;
  351.  
  352.     if (selectionText === paragraphText || wordsCount >= 500) {
  353.       // Summary prompt
  354.       return [
  355.         `Summarize the following text in ${config.language}, using bullet points to improve readability:\n\n${selectionText}`,
  356.         defaultSystemPrompt
  357.       ];
  358.     }
  359.  
  360.     if (wordsCount > 3) {
  361.       // Translate prompt
  362.       return [
  363.         `Translate the following text into ${config.language}, no extra explanation, just the translation:\n\n${selectionText}`,
  364.         defaultSystemPrompt
  365.       ];
  366.     }
  367.  
  368.     const pinYinExtraPrompt = config.language === "Chinese" ? ' DO NOT add Pinyin for it.' : '';
  369.     const ipaExtraPrompt = config.language === "Chinese" ? '(with IPA if necessary)' : '';
  370.     const asciiChars = selectionText.replace(/[\s\.,\-_'"!?()]/g, '')
  371.       .split('')
  372.       .filter(char => char.charCodeAt(0) <= 127).length;
  373.     const sampleSentenceLanguage = selectionText.length === asciiChars ? "English" : config.language;
  374.     // Explain words prompt
  375.     return [
  376.       `Provide an explanation for the word: "${selectionText}${ipaExtraPrompt}" in ${config.language}.${pinYinExtraPrompt}
  377.  
  378. Use the context from the surrounding paragraph to inform your explanation when relevant:
  379.  
  380. "${paragraphText}"
  381.  
  382. # Consider these scenarios:
  383.  
  384. ## Names
  385. If "${selectionText}" is a person's name, company name, or organization name, provide a brief description (e.g., who they are or what they do).
  386. e.g.
  387. Alan Turing was a British mathematician and computer scientist. He is widely considered to be the father of theoretical computer science and artificial intelligence.
  388. His work was crucial to:
  389. 	•	Formalizing the concepts of algorithm and computation with the Turing machine.
  390. 	•	Breaking the German Enigma code during World War II, significantly contributing to the Allied victory.
  391. 	•	Developing the Turing test, a benchmark for artificial intelligence.
  392.  
  393.  
  394. ## Technical Terms
  395. If "${selectionText}" is a technical term or jargon, give a concise definition and explain the use case or context where it is commonly used. No need example sentences.
  396. e.g. GAN → 生成对抗网络
  397. 生成对抗网络(Generative Adversarial Network)，是一种深度学习框架，由Ian Goodfellow在2014年提出。GAN包含两个神经网络：生成器(Generator)和判别器(Discriminator)，它们相互对抗训练。生成器尝试创建看起来真实的数据，而判别器则尝试区分真实数据和生成的假数据。通过这种"博弈"过程，生成器逐渐学会创建越来越逼真的数据。
  398.  
  399. ## Normal Words
  400. - For any other word, explain its meaning and provide 1-2 example sentences with the word in ${sampleSentenceLanguage}.
  401. e.g. jargon \\ˈdʒɑrɡən\\ → 行话，专业术语，特定领域内使用的专业词汇。在计算机科学和编程领域，指那些对外行人难以理解的专业术语和缩写。
  402. 例句: "When explaining code to beginners, try to avoid using too much technical jargon that might confuse them."（向初学者解释代码时，尽量避免使用太多可能让他们困惑的技术行话。）
  403.  
  404. # Format
  405.  
  406. - Output the words first, then the explanation, and then the example sentences in ${sampleSentenceLanguage} if necessary.
  407. - No extra explanation
  408. - Remember to using proper html format like <p> <b> <i> <a> <li> <ol> <ul> to improve readability.
  409. `,
  410.       defaultSystemPrompt
  411.     ];
  412.   }
  413.  
  414.   // Main function to process selected text
  415.   async function processSelectedText() {
  416.     const { selectionText, paragraphText } = getSelectedText();
  417.  
  418.     if (!selectionText) {
  419.       alert('Please select some text first.');
  420.       return;
  421.     }
  422.  
  423.     console.log(`Selected text: '${selectionText}', Paragraph text:\n${paragraphText}`);
  424.     // Create popup
  425.     createPopup();
  426.     const contentDiv = document.getElementById('explainer-content');
  427.     const loadingDiv = document.getElementById('explainer-loading');
  428.     const errorDiv = document.getElementById('explainer-error');
  429.  
  430.     // Reset display
  431.     errorDiv.style.display = 'none';
  432.     loadingDiv.style.display = 'block';
  433.  
  434.     // Assemble prompt with language preference
  435.     const [prompt, systemPrompt] = getPrompt(selectionText, paragraphText);
  436.  
  437.     // Variable to store ongoing response text
  438.     let responseText = '';
  439.     let responseStartTime = Date.now();
  440.  
  441.     try {
  442.       // Call LLM with progress callback and await the full response
  443.       const fullResponse = await callLLM(prompt, systemPrompt, (textChunk, currentFullText) => {
  444.         // Update response text with new chunk
  445.         responseText = currentFullText || (responseText + textChunk);
  446.  
  447.         // Hide loading message if this is the first chunk
  448.         if (loadingDiv.style.display !== 'none') {
  449.           loadingDiv.style.display = 'none';
  450.         }
  451.  
  452.         // Update content with either HTML or markdown
  453.         updateContentDisplay(contentDiv, responseText);
  454.       });
  455.  
  456.       // If we got a response
  457.       if (fullResponse && fullResponse.length > 0) {
  458.         responseText = fullResponse;
  459.         loadingDiv.style.display = 'none';
  460.         updateContentDisplay(contentDiv, fullResponse);
  461.       }
  462.       // If no response was received at all
  463.       else if (!fullResponse || fullResponse.length === 0) {
  464.         // If we've received chunks but the final response is empty, use the accumulated text
  465.         if (responseText && responseText.length > 0) {
  466.           updateContentDisplay(contentDiv, responseText);
  467.         } else {
  468.           showError("No response received from the model. Please try again.");
  469.         }
  470.       }
  471.  
  472.       // Hide loading indicator if it's still visible
  473.       if (loadingDiv.style.display !== 'none') {
  474.         loadingDiv.style.display = 'none';
  475.       }
  476.     } catch (error) {
  477.       console.error('Error:', error);
  478.       // Display error in popup
  479.       showError(`Error: ${error.message}`);
  480.     }
  481.   }
  482.  
  483.   // Main function to handle keyboard shortcuts
  484.   function handleKeyPress(e) {
  485.     // Get shortcut configuration from settings
  486.     const shortcut = config.shortcut || { key: 'd', ctrlKey: false, altKey: true, shiftKey: false, metaKey: false };
  487.     
  488.     // More robust shortcut detection using both key and code properties
  489.     if (isShortcutMatch(e, shortcut)) {
  490.       e.preventDefault();
  491.       processSelectedText();
  492.     }
  493.   }
  494.   
  495.   // Helper function for more robust shortcut detection
  496.   function isShortcutMatch(event, shortcutConfig) {
  497.     // Check all modifier keys first
  498.     if (event.ctrlKey !== !!shortcutConfig.ctrlKey ||
  499.         event.altKey !== !!shortcutConfig.altKey ||
  500.         event.shiftKey !== !!shortcutConfig.shiftKey ||
  501.         event.metaKey !== !!shortcutConfig.metaKey) {
  502.       return false;
  503.     }
  504.     
  505.     const key = shortcutConfig.key.toLowerCase();
  506.     
  507.     // Method 1: Direct key match (works for most standard keys)
  508.     if (event.key.toLowerCase() === key) {
  509.       return true;
  510.     }
  511.     
  512.     // Method 2: Key code match (more reliable for letter keys)
  513.     // This handles the physical key position regardless of keyboard layout
  514.     if (key.length === 1 && /^[a-z]$/.test(key) && 
  515.         event.code === `Key${key.toUpperCase()}`) {
  516.       return true;
  517.     }
  518.     
  519.     // Method 3: Handle known special characters from Option/Alt key combinations
  520.     // These are the most common mappings on macOS when using Option+key
  521.     const macOptionKeyMap = {
  522.       'a': 'å', 'b': '∫', 'c': 'ç', 'd': '∂', 'e': '´', 'f': 'ƒ',
  523.       'g': '©', 'h': '˙', 'i': 'ˆ', 'j': '∆', 'k': '˚', 'l': '¬',
  524.       'm': 'µ', 'n': '˜', 'o': 'ø', 'p': 'π', 'q': 'œ', 'r': '®',
  525.       's': 'ß', 't': '†', 'u': '¨', 'v': '√', 'w': '∑', 'x': '≈',
  526.       'y': '¥', 'z': 'Ω'
  527.     };
  528.     
  529.     if (shortcutConfig.altKey && macOptionKeyMap[key] === event.key) {
  530.       return true;
  531.     }
  532.     
  533.     return false;
  534.   }
  535.  
  536.   // Helper function to update content display
  537.   function updateContentDisplay(contentDiv, text) {
  538.     if (!text) return;
  539.  
  540.     try {
  541.       if (!text.trim().startsWith('<')) {
  542.         // fallback
  543.         console.log(`Seems like the response is not HTML: ${text}`);
  544.         text = `<p>${text.replace(/\n/g, '<br>')}</p>`;
  545.       }
  546.     } catch (e) {
  547.       // Fallback if parsing fails
  548.       console.error(`Error parsing content: ${e.message}`);
  549.       contentDiv.innerHTML = `<p>${text.replace(/\n/g, '<br>')}</p>`;
  550.     }
  551.   }
  552.   
  553.   // Monitor selection changes for floating button
  554.   function handleSelectionChange() {
  555.     const selection = window.getSelection();
  556.     const hasSelection = selection && selection.toString().trim() !== '';
  557.     
  558.     if (hasSelection && isTouchDevice() && config.floatingButton.enabled) {
  559.       showFloatingButton();
  560.     } else {
  561.       hideFloatingButton();
  562.     }
  563.   }
  564.  
  565.   // Settings update callback
  566.   function onSettingsChanged(updatedConfig) {
  567.     config = updatedConfig;
  568.     console.log('Settings updated:', config);
  569.     
  570.     // Recreate floating button if settings changed
  571.     if (floatingButton) {
  572.       floatingButton.remove();
  573.       floatingButton = null;
  574.       
  575.       if (isTouchDevice() && config.floatingButton.enabled) {
  576.         createFloatingButton();
  577.         handleSelectionChange(); // Check if there's already a selection
  578.       }
  579.     }
  580.   }
  581.  
  582.   // Initialize the script
  583.   function init() {
  584.     // Register settings menu in Tampermonkey
  585.     GM_registerMenuCommand("Text Explainer Settings", () => {
  586.       settingsManager.openDialog(onSettingsChanged);
  587.     });
  588.  
  589.     // Add keyboard shortcut listener
  590.     document.addEventListener('keydown', handleKeyPress);
  591.     
  592.     // For touch devices, create floating button
  593.     if (isTouchDevice() && config.floatingButton.enabled) {
  594.       createFloatingButton();
  595.       
  596.       // Monitor text selection
  597.       document.addEventListener('selectionchange', handleSelectionChange);
  598.       
  599.       // Add touchend handler to show button after selection
  600.       document.addEventListener('touchend', () => {
  601.         // Small delay to ensure selection is updated
  602.         setTimeout(handleSelectionChange, 100);
  603.       });
  604.     }
  605.  
  606.     console.log('Text Explainer script initialized with language: ' + config.language);
  607.     console.log('Touch device detected: ' + isTouchDevice());
  608.   }
  609.  
  610.   // Run initialization
  611.   init();
  612. })();