☰

Text Explainer

Explain selected text using LLM

  1. // ==UserScript==
  2. // @name         Text Explainer
  3. // @namespace    http://tampermonkey.net/
  4. // @version      0.2.14
  5. // @description  Explain selected text using LLM
  6. // @author       RoCry
  7. // @icon         data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODAwcHgiIGhlaWdodD0iODAwcHgiIHZpZXdCb3g9IjAgMCAxOTIgMTkyIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiPjxjaXJjbGUgY3g9IjExNiIgY3k9Ijc2IiByPSI1NCIgc3Ryb2tlPSIjMDAwMDAwIiBzdHJva2Utd2lkdGg9IjEyIi8+PHBhdGggc3Ryb2tlPSIjMDAwMDAwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMTIiIGQ9Ik04Ni41IDEyMS41IDQxIDE2N2MtNC40MTggNC40MTgtMTEuNTgyIDQuNDE4LTE2IDB2MGMtNC40MTgtNC40MTgtNC40MTgtMTEuNTgyIDAtMTZsNDQuNS00NC41TTkyIDYybDEyIDMyIDEyLTMyIDEyIDMyIDEyLTMyIi8+PC9zdmc+
  8. // @match        *://*/*
  9. // @grant        GM_setValue
  10. // @grant        GM_getValue
  11. // @grant        GM_addStyle
  12. // @grant        GM_xmlhttpRequest
  13. // @grant        GM_registerMenuCommand
  14. // @connect      generativelanguage.googleapis.com
  15. // @connect      *
  16. // @run-at       document-end
  17. // @inject-into  content
  18. // @require      https://update.greatest.deepsurf.us/scripts/528704/1549030/SmolLLM.js
  19. // @require      https://update.greatest.deepsurf.us/scripts/528703/1546610/SimpleBalancer.js
  20. // @require      https://update.greatest.deepsurf.us/scripts/528763/1549028/Text%20Explainer%20Settings.js
  21. // @require      https://update.greatest.deepsurf.us/scripts/528822/1547803/Selection%20Context.js
  22. // @license MIT
  23. // ==/UserScript==
  24.  
  25. (function () {
  26.   'use strict';
  27.  
  28.   // Initialize settings manager with extended default config
  29.   const settingsManager = new TextExplainerSettings({
  30.     model: "gemini-2.0-flash",
  31.     apiKey: null,
  32.     baseUrl: "https://generativelanguage.googleapis.com",
  33.     provider: "gemini",
  34.     language: "Chinese", // Default language
  35.     shortcut: {
  36.       key: "d",
  37.       ctrlKey: false,
  38.       altKey: true,
  39.       shiftKey: false,
  40.       metaKey: false
  41.     },
  42.     floatingButton: {
  43.       enabled: true,
  44.       size: "medium",
  45.       position: "bottom-right"
  46.     },
  47.   });
  48.  
  49.   // Get current configuration
  50.   let config = settingsManager.getAll();
  51.  
  52.   // Initialize SmolLLM
  53.   let llm;
  54.   try {
  55.     llm = new SmolLLM();
  56.   } catch (error) {
  57.     console.error('Failed to initialize SmolLLM:', error);
  58.     llm = null;
  59.   }
  60.  
  61.   // Check if device is touch-enabled
  62.   const isTouchDevice = () => {
  63.     return ('ontouchstart' in window) ||
  64.       (navigator.maxTouchPoints > 0) ||
  65.       (navigator.msMaxTouchPoints > 0);
  66.   };
  67.  
  68.   // Create and manage floating button
  69.   let floatingButton = null;
  70.   let isProcessingText = false;
  71.  
  72.   function createFloatingButton() {
  73.     if (floatingButton) return;
  74.  
  75.     floatingButton = document.createElement('div');
  76.     floatingButton.id = 'explainer-floating-button';
  77.  
  78.     // Determine size based on settings
  79.     let buttonSize;
  80.     switch (config.floatingButton.size) {
  81.       case 'small': buttonSize = '40px'; break;
  82.       case 'large': buttonSize = '60px'; break;
  83.       default: buttonSize = '50px'; // medium
  84.     }
  85.  
  86.     floatingButton.style.cssText = `
  87.       width: ${buttonSize};
  88.       height: ${buttonSize};
  89.       border-radius: 50%;
  90.       background-color: rgba(33, 150, 243, 0.8);
  91.       color: white;
  92.       display: flex;
  93.       align-items: center;
  94.       justify-content: center;
  95.       position: fixed;
  96.       z-index: 9999;
  97.       box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  98.       cursor: pointer;
  99.       font-weight: bold;
  100.       font-size: ${parseInt(buttonSize) * 0.4}px;
  101.       opacity: 0;
  102.       transition: opacity 0.3s ease, transform 0.2s ease;
  103.       pointer-events: none;
  104.       touch-action: manipulation;
  105.       -webkit-tap-highlight-color: transparent;
  106.     `;
  107.  
  108.     // Add icon or text
  109.     floatingButton.innerHTML = '💬';
  110.  
  111.     // Add to DOM
  112.     document.body.appendChild(floatingButton);
  113.  
  114.     // Handle button click/tap
  115.     function handleButtonAction(e) {
  116.       e.preventDefault();
  117.       e.stopPropagation();
  118.  
  119.       // Prevent multiple clicks while processing
  120.       if (isProcessingText) return;
  121.  
  122.       // Get selection context before clearing selection
  123.       const selectionContext = GetSelectionContext();
  124.  
  125.       if (!selectionContext.selectedText) {
  126.         console.log('No valid selection to process');
  127.         return;
  128.       }
  129.  
  130.       // Set processing flag
  131.       isProcessingText = true;
  132.  
  133.       // Hide the floating button
  134.       hideFloatingButton();
  135.  
  136.       // Blur selection to dismiss iOS menu
  137.       window.getSelection().removeAllRanges();
  138.  
  139.       // Now trigger the explainer with the stored selection
  140.       // Create popup
  141.       createPopup();
  142.       const contentDiv = document.getElementById('explainer-content');
  143.       const loadingDiv = document.getElementById('explainer-loading');
  144.       const errorDiv = document.getElementById('explainer-error');
  145.  
  146.       // Reset display
  147.       errorDiv.style.display = 'none';
  148.       loadingDiv.style.display = 'block';
  149.  
  150.       // Assemble prompt with language preference
  151.       const { prompt, systemPrompt } = getPrompt(
  152.         selectionContext.selectedText,
  153.         selectionContext.paragraphText,
  154.         selectionContext.textBefore,
  155.         selectionContext.textAfter
  156.       );
  157.  
  158.       // Variable to store ongoing response text
  159.       let responseText = '';
  160.  
  161.       // Call LLM with progress callback
  162.       callLLM(prompt, systemPrompt, (textChunk, currentFullText) => {
  163.         // Update response text with new chunk
  164.         responseText = currentFullText || (responseText + textChunk);
  165.  
  166.         // Hide loading message if this is the first chunk
  167.         if (loadingDiv.style.display !== 'none') {
  168.           loadingDiv.style.display = 'none';
  169.         }
  170.  
  171.         // Update content with either HTML or markdown
  172.         updateContentDisplay(contentDiv, responseText);
  173.       })
  174.         .catch(error => {
  175.           console.error('Error in LLM call:', error);
  176.           errorDiv.textContent = error.message || 'Error processing request';
  177.           errorDiv.style.display = 'block';
  178.           loadingDiv.style.display = 'none';
  179.         })
  180.         .finally(() => {
  181.           // Reset processing flag
  182.           setTimeout(() => {
  183.             isProcessingText = false;
  184.           }, 1000);
  185.         });
  186.     }
  187.  
  188.     // Add click event
  189.     floatingButton.addEventListener('click', handleButtonAction);
  190.  
  191.     // Add touch events
  192.     floatingButton.addEventListener('touchstart', (e) => {
  193.       e.preventDefault();
  194.       e.stopPropagation();
  195.       floatingButton.style.transform = 'scale(0.95)';
  196.     }, { passive: false });
  197.  
  198.     floatingButton.addEventListener('touchend', (e) => {
  199.       e.preventDefault();
  200.       e.stopPropagation();
  201.       floatingButton.style.transform = 'scale(1)';
  202.       handleButtonAction(e);
  203.     }, { passive: false });
  204.  
  205.     // Prevent text selection on button
  206.     floatingButton.addEventListener('mousedown', (e) => {
  207.       e.preventDefault();
  208.       e.stopPropagation();
  209.     });
  210.   }
  211.  
  212.   function showFloatingButton() {
  213.     if (!floatingButton || !config.floatingButton.enabled || isProcessingText) return;
  214.  
  215.     const selection = window.getSelection();
  216.     if (!selection || selection.rangeCount === 0) {
  217.       hideFloatingButton();
  218.       return;
  219.     }
  220.  
  221.     const range = selection.getRangeAt(0);
  222.     const rect = range.getBoundingClientRect();
  223.  
  224.     // Calculate position near the selection
  225.     const buttonSize = parseInt(floatingButton.style.width);
  226.     const margin = 10; // Distance from selection
  227.  
  228.     // Calculate position in viewport coordinates
  229.     let top = rect.bottom + margin;
  230.     let left = rect.left + (rect.width / 2) - (buttonSize / 2);
  231.  
  232.     // If button would go off screen, try positioning above
  233.     if (top + buttonSize > window.innerHeight) {
  234.       top = rect.top - buttonSize - margin;
  235.     }
  236.  
  237.     // Ensure button stays within viewport horizontally
  238.     left = Math.max(10, Math.min(left, window.innerWidth - buttonSize - 10));
  239.  
  240.     // Apply position (using viewport coordinates for fixed positioning)
  241.     floatingButton.style.top = `${top}px`;
  242.     floatingButton.style.left = `${left}px`;
  243.  
  244.     // Make visible and enable pointer events
  245.     floatingButton.style.opacity = '1';
  246.     floatingButton.style.pointerEvents = 'auto';
  247.   }
  248.  
  249.   function hideFloatingButton() {
  250.     if (!floatingButton) return;
  251.     floatingButton.style.opacity = '0';
  252.     floatingButton.style.pointerEvents = 'none';
  253.   }
  254.  
  255.   // Add minimal styles for UI components
  256.   GM_addStyle(`
  257.     /* Base popup styles */
  258.     #explainer-popup {
  259.         position: absolute;
  260.         width: 450px;
  261.         max-width: 90vw;
  262.         max-height: 80vh;
  263.         padding: 20px;
  264.         z-index: 2147483647;
  265.         overflow: auto;
  266.         overscroll-behavior: contain;
  267.         -webkit-overflow-scrolling: touch;
  268.         
  269.         /* Visual styles */
  270.         background: rgba(255, 255, 255, 0.85);
  271.         backdrop-filter: blur(10px);
  272.         -webkit-backdrop-filter: blur(10px);
  273.         border-radius: 8px;
  274.         box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  275.         border: 1px solid rgba(0, 0, 0, 0.15);
  276.         
  277.         /* Text styles */
  278.         color: #111;
  279.         text-shadow: 0 0 1px rgba(255, 255, 255, 0.3);
  280.         
  281.         /* Animations */
  282.         transition: all 0.3s ease;
  283.     }
  284.     
  285.     /* Dark theme */
  286.     #explainer-popup.dark-theme {
  287.         background: rgba(45, 45, 50, 0.85);
  288.         backdrop-filter: blur(10px);
  289.         -webkit-backdrop-filter: blur(10px);
  290.         color: #e0e0e0;
  291.         border: 1px solid rgba(255, 255, 255, 0.15);
  292.         box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4);
  293.         text-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
  294.     }
  295.     
  296.     /* iOS-specific overrides */
  297.     @supports (-webkit-touch-callout: none) {
  298.         #explainer-popup {
  299.             background: rgba(255, 255, 255, 0.98);
  300.             /* Disable backdrop-filter on iOS for better performance */
  301.             backdrop-filter: none;
  302.             -webkit-backdrop-filter: none;
  303.         }
  304.         
  305.         #explainer-popup.dark-theme {
  306.             background: rgba(35, 35, 40, 0.98);
  307.         }
  308.     }
  309.  
  310.     @keyframes slideInFromTop {
  311.         from { transform: translateY(-20px); opacity: 0; }
  312.         to { transform: translateY(0); opacity: 1; }
  313.     }
  314.     @keyframes slideInFromBottom {
  315.         from { transform: translateY(20px); opacity: 0; }
  316.         to { transform: translateY(0); opacity: 1; }
  317.     }
  318.     @keyframes slideInFromLeft {
  319.         from { transform: translateX(-20px); opacity: 0; }
  320.         to { transform: translateX(0); opacity: 1; }
  321.     }
  322.     @keyframes slideInFromRight {
  323.         from { transform: translateX(20px); opacity: 0; }
  324.         to { transform: translateX(0); opacity: 1; }
  325.     }
  326.     @keyframes fadeIn {
  327.         from { opacity: 0; }
  328.         to { opacity: 1; }
  329.     }
  330.     #explainer-loading {
  331.         text-align: center;
  332.         padding: 20px 0;
  333.         display: flex;
  334.         align-items: center;
  335.         justify-content: center;
  336.     }
  337.     #explainer-loading:after {
  338.         content: "";
  339.         width: 24px;
  340.         height: 24px;
  341.         border: 3px solid #ddd;
  342.         border-top: 3px solid #2196F3;
  343.         border-radius: 50%;
  344.         animation: spin 1s linear infinite;
  345.         display: inline-block;
  346.     }
  347.     @keyframes spin {
  348.         0% { transform: rotate(0deg); }
  349.         100% { transform: rotate(360deg); }
  350.     }
  351.     #explainer-error {
  352.         color: #d32f2f;
  353.         padding: 8px;
  354.         border-radius: 4px;
  355.         margin-bottom: 10px;
  356.         font-size: 14px;
  357.         display: none;
  358.     }
  359.     /* iOS-specific styles */
  360.     @supports (-webkit-touch-callout: none) {
  361.         #explainer-popup {
  362.             background: rgba(255, 255, 255, 0.98);
  363.             box-shadow: 0 5px 25px rgba(0, 0, 0, 0.3);
  364.             border: 1px solid rgba(0, 0, 0, 0.1);
  365.         }
  366.         /* Dark mode for iOS */
  367.         @media (prefers-color-scheme: dark) {
  368.             #explainer-popup {
  369.                 background: rgba(35, 35, 40, 0.98);
  370.                 border: 1px solid rgba(255, 255, 255, 0.1);
  371.             }
  372.         }
  373.     }
  374.     /* Dark mode support - minimal */
  375.     @media (prefers-color-scheme: dark) {
  376.         #explainer-popup {
  377.             background: rgba(35, 35, 40, 0.85);
  378.             color: #e0e0e0;
  379.         }
  380.         #explainer-error {
  381.             background-color: rgba(100, 25, 25, 0.4);
  382.             color: #ff8a8a;
  383.         }
  384.         #explainer-floating-button {
  385.             background-color: rgba(33, 150, 243, 0.9);
  386.         }
  387.     }
  388.     /* Add touch-specific styles */
  389.     @media (hover: none) and (pointer: coarse) {
  390.         #explainer-popup {
  391.             width: 95vw;
  392.             max-height: 90vh;
  393.             padding: 15px;
  394.             font-size: 16px;
  395.         }
  396.         #explainer-popup p, 
  397.         #explainer-popup li {
  398.             line-height: 1.6;
  399.             margin-bottom: 12px;
  400.         }
  401.         #explainer-popup a {
  402.             padding: 8px 0;
  403.         }
  404.     }
  405.   `);
  406.  
  407.   // Function to detect if the page has a dark background
  408.   function isPageDarkMode() {
  409.     // Try to get the background color of the body or html element
  410.     const bodyEl = document.body;
  411.     const htmlEl = document.documentElement;
  412.  
  413.     // Get computed style
  414.     const bodyStyle = window.getComputedStyle(bodyEl);
  415.     const htmlStyle = window.getComputedStyle(htmlEl);
  416.  
  417.     // Extract background color
  418.     const bodyBg = bodyStyle.backgroundColor;
  419.     const htmlBg = htmlStyle.backgroundColor;
  420.  
  421.     // Parse RGB values
  422.     function getRGBValues(color) {
  423.       const match = color.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*[\d.]+)?\)/);
  424.       if (!match) return null;
  425.  
  426.       const r = parseInt(match[1], 10);
  427.       const g = parseInt(match[2], 10);
  428.       const b = parseInt(match[3], 10);
  429.  
  430.       return { r, g, b };
  431.     }
  432.  
  433.     // Calculate luminance (brightness) - higher values are brighter
  434.     function getLuminance(color) {
  435.       const rgb = getRGBValues(color);
  436.       if (!rgb) return 128; // Default to middle gray if can't parse
  437.  
  438.       // Perceived brightness formula
  439.       return (0.299 * rgb.r + 0.587 * rgb.g + 0.114 * rgb.b);
  440.     }
  441.  
  442.     const bodyLuminance = getLuminance(bodyBg);
  443.     const htmlLuminance = getLuminance(htmlBg);
  444.  
  445.     // If either background is dark, consider the page dark
  446.     const threshold = 128; // Middle of 0-255 range
  447.  
  448.     // Check system preference as a fallback
  449.     const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
  450.  
  451.     // Page is dark if:
  452.     // 1. Body background is dark, or
  453.     // 2. HTML background is dark and body has no background set, or
  454.     // 3. Both have no background set but system prefers dark
  455.     if (bodyLuminance < threshold) {
  456.       return true;
  457.     } else if (bodyBg === 'rgba(0, 0, 0, 0)' && htmlLuminance < threshold) {
  458.       return true;
  459.     } else if (bodyBg === 'rgba(0, 0, 0, 0)' && htmlBg === 'rgba(0, 0, 0, 0)') {
  460.       return prefersDark;
  461.     }
  462.  
  463.     return false;
  464.   }
  465.  
  466.   // Function to close the popup
  467.   function closePopup() {
  468.     const popup = document.getElementById('explainer-popup');
  469.     if (popup) {
  470.       popup.style.animation = 'fadeOut 0.3s ease';
  471.       setTimeout(() => {
  472.         popup.remove();
  473.         const overlay = document.getElementById('explainer-overlay');
  474.         if (overlay) {
  475.           overlay.remove();
  476.         }
  477.       }, 300);
  478.     }
  479.  
  480.     // Always clean up the global variables from previous implementation
  481.     if (window.explainerTouchTracker) {
  482.       window.explainerTouchTracker = null;
  483.     }
  484.   }
  485.  
  486.   // Calculate optimal popup position based on selection
  487.   function calculatePopupPosition() {
  488.     const selection = window.getSelection();
  489.     if (!selection || selection.rangeCount === 0) return null;
  490.  
  491.     // Get selection position
  492.     const range = selection.getRangeAt(0);
  493.     const selectionRect = range.getBoundingClientRect();
  494.  
  495.     // Get scroll position to convert viewport coordinates to absolute
  496.     const scrollLeft = window.scrollX || document.documentElement.scrollLeft;
  497.     const scrollTop = window.scrollY || document.documentElement.scrollTop;
  498.  
  499.     // Get document dimensions
  500.     const viewportWidth = window.innerWidth;
  501.     const viewportHeight = window.innerHeight;
  502.  
  503.     // Estimate popup dimensions (will be adjusted once created)
  504.     const popupWidth = 450;
  505.     const popupHeight = Math.min(500, viewportHeight * 0.8);
  506.  
  507.     // Calculate optimal position
  508.     let position = {};
  509.  
  510.     // Default margin from selection
  511.     const margin = 20;
  512.  
  513.     // Try to position below the selection
  514.     if (selectionRect.bottom + margin + popupHeight <= viewportHeight) {
  515.       position.top = selectionRect.bottom + scrollTop + margin;
  516.       position.left = Math.min(
  517.         Math.max(10 + scrollLeft, selectionRect.left + scrollLeft + (selectionRect.width / 2) - (popupWidth / 2)),
  518.         viewportWidth + scrollLeft - popupWidth - 10
  519.       );
  520.       position.placement = 'below';
  521.     }
  522.     // Try to position above the selection
  523.     else if (selectionRect.top - margin - popupHeight >= 0) {
  524.       position.top = selectionRect.top + scrollTop - margin - popupHeight;
  525.       position.left = Math.min(
  526.         Math.max(10 + scrollLeft, selectionRect.left + scrollLeft + (selectionRect.width / 2) - (popupWidth / 2)),
  527.         viewportWidth + scrollLeft - popupWidth - 10
  528.       );
  529.       position.placement = 'above';
  530.     }
  531.     // Try to position to the right
  532.     else if (selectionRect.right + margin + popupWidth <= viewportWidth) {
  533.       position.top = Math.max(10 + scrollTop, Math.min(
  534.         selectionRect.top + scrollTop,
  535.         viewportHeight + scrollTop - popupHeight - 10
  536.       ));
  537.       position.left = selectionRect.right + scrollLeft + margin;
  538.       position.placement = 'right';
  539.     }
  540.     // Try to position to the left
  541.     else if (selectionRect.left - margin - popupWidth >= 0) {
  542.       position.top = Math.max(10 + scrollTop, Math.min(
  543.         selectionRect.top + scrollTop,
  544.         viewportHeight + scrollTop - popupHeight - 10
  545.       ));
  546.       position.left = selectionRect.left + scrollLeft - margin - popupWidth;
  547.       position.placement = 'left';
  548.     }
  549.     // Fallback to centered position if no good placement found
  550.     else {
  551.       position.top = Math.max(10 + scrollTop, Math.min(
  552.         selectionRect.top + selectionRect.height + scrollTop + margin,
  553.         viewportHeight / 2 + scrollTop - popupHeight / 2
  554.       ));
  555.       position.left = Math.max(10 + scrollLeft, Math.min(
  556.         selectionRect.left + selectionRect.width / 2 + scrollLeft - popupWidth / 2,
  557.         viewportWidth + scrollLeft - popupWidth - 10
  558.       ));
  559.       position.placement = 'center';
  560.     }
  561.  
  562.     return position;
  563.   }
  564.  
  565.   // Create popup
  566.   function createPopup() {
  567.     // Remove existing popup if any
  568.     closePopup();
  569.  
  570.     const popup = document.createElement('div');
  571.     popup.id = 'explainer-popup';
  572.  
  573.     // Add dark-theme class if the page has a dark background
  574.     if (isPageDarkMode()) {
  575.       popup.classList.add('dark-theme');
  576.     }
  577.  
  578.     popup.innerHTML = `
  579.       <div id="explainer-error"></div>
  580.       <div id="explainer-loading"></div>
  581.       <div id="explainer-content"></div>
  582.     `;
  583.  
  584.     document.body.appendChild(popup);
  585.  
  586.     // For touch devices, use fixed positioning with transform
  587.     if (isTouchDevice()) {
  588.       popup.style.position = 'fixed';
  589.       popup.style.top = '50%';
  590.       popup.style.left = '50%';
  591.       popup.style.transform = 'translate(-50%, -50%)';
  592.       popup.style.width = '90vw';
  593.       popup.style.maxHeight = '85vh';
  594.     } else {
  595.       // Desktop positioning logic
  596.       const position = calculatePopupPosition();
  597.       if (position) {
  598.         popup.style.transform = 'none';
  599.         if (position.top !== undefined) popup.style.top = `${position.top}px`;
  600.         if (position.bottom !== undefined) popup.style.bottom = `${position.bottom}px`;
  601.         if (position.left !== undefined) popup.style.left = `${position.left}px`;
  602.         if (position.right !== undefined) popup.style.right = `${position.right}px`;
  603.       } else {
  604.         popup.style.top = '50%';
  605.         popup.style.left = '50%';
  606.         popup.style.transform = 'translate(-50%, -50%)';
  607.       }
  608.     }
  609.  
  610.     // Add animation
  611.     popup.style.animation = 'fadeIn 0.3s ease';
  612.  
  613.     // Add event listeners
  614.     document.addEventListener('keydown', handleEscKey);
  615.  
  616.     // Use a simpler approach for touch devices - attach a click/touch handler directly
  617.     if (isTouchDevice()) {
  618.       // Create an overlay for capturing outside touches
  619.       const overlay = document.createElement('div');
  620.       overlay.id = 'explainer-overlay';
  621.       overlay.style.cssText = `
  622.         position: fixed;
  623.         top: 0;
  624.         left: 0;
  625.         right: 0;
  626.         bottom: 0;
  627.         z-index: ${parseInt(popup.style.zIndex || 2147483647) - 1};
  628.         background: transparent;
  629.       `;
  630.       document.body.appendChild(overlay);
  631.  
  632.       // Handle iPad-specific touch behavior
  633.       let touchStarted = false;
  634.       let startX = 0;
  635.       let startY = 0;
  636.  
  637.       // Higher threshold for iPad - more forgiving for slight movements
  638.       const moveThreshold = 30; // pixels
  639.  
  640.       overlay.addEventListener('touchstart', (e) => {
  641.         touchStarted = true;
  642.         startX = e.touches[0].clientX;
  643.         startY = e.touches[0].clientY;
  644.       }, { passive: true });
  645.  
  646.       overlay.addEventListener('touchmove', () => {
  647.         // Just having a touchmove listener prevents default behavior on iOS
  648.       }, { passive: true });
  649.  
  650.       overlay.addEventListener('touchend', (e) => {
  651.         if (!touchStarted) return;
  652.  
  653.         const touch = e.changedTouches[0];
  654.         const moveX = Math.abs(touch.clientX - startX);
  655.         const moveY = Math.abs(touch.clientY - startY);
  656.  
  657.         // If user didn't move much, consider it a tap to dismiss
  658.         if (moveX < moveThreshold && moveY < moveThreshold) {
  659.           closePopup();
  660.           removeAllPopupListeners();
  661.         }
  662.  
  663.         touchStarted = false;
  664.       }, { passive: true });
  665.  
  666.       // Prevent popup from capturing overlay events
  667.       popup.addEventListener('touchstart', (e) => {
  668.         e.stopPropagation();
  669.       }, { passive: false });
  670.  
  671.     } else {
  672.       document.addEventListener('click', handleOutsideClick);
  673.     }
  674.  
  675.     return popup;
  676.   }
  677.  
  678.   // Handle Escape key to close popup
  679.   function handleEscKey(e) {
  680.     if (e.key === 'Escape') {
  681.       closePopup();
  682.       removeAllPopupListeners();
  683.     }
  684.   }
  685.  
  686.   // For desktop - more straightforward approach
  687.   function handleOutsideClick(e) {
  688.     const popup = document.getElementById('explainer-popup');
  689.     if (!popup || popup.contains(e.target)) return;
  690.  
  691.     closePopup();
  692.     removeAllPopupListeners();
  693.   }
  694.  
  695.   // Clean up all event listeners
  696.   function removeAllPopupListeners() {
  697.     document.removeEventListener('keydown', handleEscKey);
  698.  
  699.     // Only remove click listener if we're not on a touch device
  700.     if (!isTouchDevice()) {
  701.       document.removeEventListener('click', handleOutsideClick);
  702.     }
  703.  
  704.     const overlay = document.getElementById('explainer-overlay');
  705.     if (overlay) {
  706.       overlay.remove();
  707.     }
  708.   }
  709.  
  710.   // Function to show an error in the popup
  711.   function showError(message) {
  712.     const errorDiv = document.getElementById('explainer-error');
  713.     if (errorDiv) {
  714.       errorDiv.textContent = message;
  715.       errorDiv.style.display = 'block';
  716.       document.getElementById('explainer-loading').style.display = 'none';
  717.     }
  718.   }
  719.  
  720.   // Function to call the LLM using SmolLLM
  721.   async function callLLM(prompt, systemPrompt, progressCallback) {
  722.     if (!config.apiKey) {
  723.       throw new Error("Please set up your API key in the settings.");
  724.     }
  725.  
  726.     if (!llm) {
  727.       throw new Error("SmolLLM library not initialized. Please check console for errors.");
  728.     }
  729.  
  730.     console.log(`prompt: ${prompt}`);
  731.     console.log(`systemPrompt: ${systemPrompt}`);
  732.     try {
  733.       return await llm.askLLM({
  734.         prompt: prompt,
  735.         systemPrompt: systemPrompt,
  736.         model: config.model,
  737.         apiKey: config.apiKey,
  738.         baseUrl: config.baseUrl,
  739.         providerName: config.provider,
  740.         handler: progressCallback,
  741.         timeout: 60000
  742.       });
  743.     } catch (error) {
  744.       console.error('LLM API error:', error);
  745.       throw error;
  746.     }
  747.   }
  748.  
  749.   function getPrompt(selectedText, paragraphText, textBefore, textAfter) {
  750.     const wordsCount = selectedText.split(' ').length;
  751.     const systemPrompt = `Respond in ${config.language} with HTML tags to improve readability.
  752. - Prioritize clarity and conciseness
  753. - Use bullet points when appropriate`;
  754.  
  755.     if (wordsCount >= 500) {
  756.       return {
  757.         prompt: `Create a structured summary in ${config.language}:
  758. - Identify key themes and concepts
  759. - Extract 3-5 main points
  760. - Use nested <ul> lists for hierarchy
  761. - Keep bullets concise
  762.  
  763. for the following selected text:
  764. \n\n${selectedText}
  765. `,
  766.         systemPrompt
  767.       };
  768.     }
  769.  
  770.     // For short text that looks like a sentence, offer translation
  771.     if (wordsCount >= 5) {
  772.       return {
  773.         prompt: `Translate exactly to ${config.language} without commentary:
  774. - Preserve technical terms and names
  775. - Maintain original punctuation
  776. - Match formal/informal tone of source
  777.  
  778. for the following selected text:
  779. \n\n${selectedText}
  780. `,
  781.         systemPrompt
  782.       };
  783.     }
  784.  
  785.     const pinYinExtraPrompt = config.language === "Chinese" ? ' DO NOT add Pinyin for it.' : '';
  786.     const ipaExtraPrompt = config.language === "Chinese" ? '(with IPA if necessary)' : '';
  787.     const asciiChars = selectedText.replace(/[\s\.,\-_'"!?()]/g, '')
  788.       .split('')
  789.       .filter(char => char.charCodeAt(0) <= 127).length;
  790.     const sampleSentenceLanguage = selectedText.length === asciiChars ? "English" : config.language;
  791.  
  792.     // If we have context before/after, include it in the prompt
  793.     const contextPrompt = textBefore || textAfter ?
  794.       `# Context:
  795. ## Before selected text:
  796. ${textBefore || 'None'}
  797. ## Selected text:
  798. ${selectedText}
  799. ## After selected text:
  800. ${textAfter || 'None'}` : paragraphText;
  801.  
  802.  
  803.     // Explain words prompt
  804.     return {
  805.       prompt: `Provide an explanation for the word: "${selectedText}${ipaExtraPrompt}" in ${config.language} without commentary.${pinYinExtraPrompt}
  806.  
  807. Use the context from the surrounding paragraph to inform your explanation when relevant:
  808.  
  809. ${contextPrompt}
  810.  
  811. # Consider these scenarios:
  812.  
  813. ## Names
  814. If "${selectedText}" is a person's name, company name, or organization name, provide a brief description (e.g., who they are or what they do).
  815. e.g.
  816. Alan Turing was a British mathematician and computer scientist. He is widely considered to be the father of theoretical computer science and artificial intelligence.
  817. His work was crucial to:
  818. 	•	Formalizing the concepts of algorithm and computation with the Turing machine.
  819. 	•	Breaking the German Enigma code during World War II, significantly contributing to the Allied victory.
  820. 	•	Developing the Turing test, a benchmark for artificial intelligence.
  821.  
  822.  
  823. ## Technical Terms
  824. If "${selectedText}" is a technical term or jargon
  825. - give a concise definition and explain.
  826. - Some best practice of using it
  827. - Explain how it works. 
  828. - No need example sentence for the technical term.
  829. e.g. GAN → 生成对抗网络
  830. 生成对抗网络(Generative Adversarial Network)，是一种深度学习框架，由Ian Goodfellow在2014年提出。GAN包含两个神经网络：生成器(Generator)和判别器(Discriminator)，它们相互对抗训练。生成器尝试创建看起来真实的数据，而判别器则尝试区分真实数据和生成的假数据。通过这种"博弈"过程，生成器逐渐学会创建越来越逼真的数据。
  831.  
  832. ## Normal Words
  833. - For any other word, explain its meaning and provide 1-2 example sentences with the word in ${sampleSentenceLanguage}.
  834. e.g. jargon \\ˈdʒɑrɡən\\ → 行话，专业术语，特定领域内使用的专业词汇。在计算机科学和编程领域，指那些对外行人难以理解的专业术语和缩写。
  835. 例句: "When explaining code to beginners, try to avoid using too much technical jargon that might confuse them."（向初学者解释代码时，尽量避免使用太多可能让他们困惑的技术行话。）
  836.  
  837. # Format
  838.  
  839. - Output the words first, then the explanation, and then the example sentences in ${sampleSentenceLanguage} if necessary.
  840. - No extra explanation
  841. - Remember to using proper html format like <p> <b> <i> <a> <li> <ol> <ul> to improve readability.
  842. `,
  843.       systemPrompt
  844.     };
  845.   }
  846.  
  847.   // Main function to process selected text
  848.   async function processSelectedText() {
  849.     // Use the utility function instead of the local getSelectedText
  850.     const { selectedText, textBefore, textAfter, paragraphText } = GetSelectionContext();
  851.  
  852.     if (!selectedText) {
  853.       showError('No text selected');
  854.       return;
  855.     }
  856.  
  857.     console.log(`Selected text: '${selectedText}', Paragraph text:\n${paragraphText}`);
  858.     // Create popup
  859.     createPopup();
  860.     const contentDiv = document.getElementById('explainer-content');
  861.     const loadingDiv = document.getElementById('explainer-loading');
  862.     const errorDiv = document.getElementById('explainer-error');
  863.  
  864.     // Reset display
  865.     errorDiv.style.display = 'none';
  866.     loadingDiv.style.display = 'block';
  867.  
  868.     // Assemble prompt with language preference
  869.     const { prompt, systemPrompt } = getPrompt(selectedText, paragraphText, textBefore, textAfter);
  870.  
  871.     // Variable to store ongoing response text
  872.     let responseText = '';
  873.  
  874.     try {
  875.       // Call LLM with progress callback and await the full response
  876.       const fullResponse = await callLLM(prompt, systemPrompt, (textChunk, currentFullText) => {
  877.         // Update response text with new chunk
  878.         responseText = currentFullText || (responseText + textChunk);
  879.  
  880.         // Hide loading message if this is the first chunk
  881.         if (loadingDiv.style.display !== 'none') {
  882.           loadingDiv.style.display = 'none';
  883.         }
  884.  
  885.         // Update content with either HTML or markdown
  886.         updateContentDisplay(contentDiv, responseText);
  887.       });
  888.  
  889.       console.log('fullResponse\n', fullResponse);
  890.  
  891.       // If we got a response
  892.       if (fullResponse && fullResponse.length > 0) {
  893.         responseText = fullResponse;
  894.         loadingDiv.style.display = 'none';
  895.         updateContentDisplay(contentDiv, fullResponse);
  896.       }
  897.       // If no response was received at all
  898.       else if (!fullResponse || fullResponse.length === 0) {
  899.         // If we've received chunks but the final response is empty, use the accumulated text
  900.         if (responseText && responseText.length > 0) {
  901.           updateContentDisplay(contentDiv, responseText);
  902.         } else {
  903.           showError("No response received from the model. Please try again.");
  904.         }
  905.       }
  906.  
  907.       // Hide loading indicator if it's still visible
  908.       if (loadingDiv.style.display !== 'none') {
  909.         loadingDiv.style.display = 'none';
  910.       }
  911.     } catch (error) {
  912.       console.error('Error:', error);
  913.       // Display error in popup
  914.       showError(`Error: ${error.message}`);
  915.     }
  916.   }
  917.  
  918.   // Main function to handle keyboard shortcuts
  919.   function handleKeyPress(e) {
  920.     // Get shortcut configuration from settings
  921.     const shortcut = config.shortcut || { key: 'd', ctrlKey: false, altKey: true, shiftKey: false, metaKey: false };
  922.  
  923.     // More robust shortcut detection using both key and code properties
  924.     if (isShortcutMatch(e, shortcut)) {
  925.       e.preventDefault();
  926.       processSelectedText();
  927.     }
  928.   }
  929.  
  930.   // Helper function for more robust shortcut detection
  931.   function isShortcutMatch(event, shortcutConfig) {
  932.     // Check all modifier keys first
  933.     if (event.ctrlKey !== !!shortcutConfig.ctrlKey ||
  934.       event.altKey !== !!shortcutConfig.altKey ||
  935.       event.shiftKey !== !!shortcutConfig.shiftKey ||
  936.       event.metaKey !== !!shortcutConfig.metaKey) {
  937.       return false;
  938.     }
  939.  
  940.     const key = shortcutConfig.key.toLowerCase();
  941.  
  942.     // Method 1: Direct key match (works for most standard keys)
  943.     if (event.key.toLowerCase() === key) {
  944.       return true;
  945.     }
  946.  
  947.     // Method 2: Key code match (more reliable for letter keys)
  948.     // This handles the physical key position regardless of keyboard layout
  949.     if (key.length === 1 && /^[a-z]$/.test(key) &&
  950.       event.code === `Key${key.toUpperCase()}`) {
  951.       return true;
  952.     }
  953.  
  954.     // Method 3: Handle known special characters from Option/Alt key combinations
  955.     // These are the most common mappings on macOS when using Option+key
  956.     const macOptionKeyMap = {
  957.       'a': 'å', 'b': '∫', 'c': 'ç', 'd': '∂', 'e': '´', 'f': 'ƒ',
  958.       'g': '©', 'h': '˙', 'i': 'ˆ', 'j': '∆', 'k': '˚', 'l': '¬',
  959.       'm': 'µ', 'n': '˜', 'o': 'ø', 'p': 'π', 'q': 'œ', 'r': '®',
  960.       's': 'ß', 't': '†', 'u': '¨', 'v': '√', 'w': '∑', 'x': '≈',
  961.       'y': '¥', 'z': 'Ω'
  962.     };
  963.  
  964.     if (shortcutConfig.altKey && macOptionKeyMap[key] === event.key) {
  965.       return true;
  966.     }
  967.  
  968.     return false;
  969.   }
  970.  
  971.   // Helper function to update content display
  972.   function updateContentDisplay(contentDiv, text) {
  973.     if (!text) return;
  974.  
  975.     text = text.trim();
  976.     if (text.length === 0) {
  977.       return;
  978.     }
  979.  
  980.     try {
  981.       // drop first line if it's a code block
  982.       if (text.startsWith('```')) {
  983.         if (text.endsWith('```')) {
  984.           text = text.split('\n').slice(1, -1).join('\n');
  985.         } else {
  986.           text = text.split('\n').slice(1).join('\n');
  987.         }
  988.       }
  989.       if (!text.startsWith('<')) {
  990.         // fallback
  991.         console.log(`Seems like the response is not HTML: ${text}`);
  992.         text = `<p>${text.replace(/\n/g, '<br>')}</p>`;
  993.       }
  994.       contentDiv.innerHTML = text;
  995.     } catch (e) {
  996.       // Fallback if parsing fails
  997.       console.error(`Error parsing content: ${e.message}`);
  998.       contentDiv.innerHTML = `<p>${text.replace(/\n/g, '<br>')}</p>`;
  999.     }
  1000.   }
  1001.  
  1002.   // Monitor selection changes for floating button
  1003.   function handleSelectionChange() {
  1004.     // Don't update button visibility if we're processing text
  1005.     if (isProcessingText) return;
  1006.  
  1007.     const selection = window.getSelection();
  1008.     const hasSelection = selection && selection.toString().trim() !== '';
  1009.  
  1010.     if (hasSelection && isTouchDevice() && config.floatingButton.enabled) {
  1011.       // Small delay to ensure selection is fully updated
  1012.       setTimeout(showFloatingButton, 100);
  1013.     } else {
  1014.       hideFloatingButton();
  1015.     }
  1016.   }
  1017.  
  1018.   // Settings update callback
  1019.   function onSettingsChanged(updatedConfig) {
  1020.     config = updatedConfig;
  1021.     console.log('Settings updated:', config);
  1022.  
  1023.     // Recreate floating button if settings changed
  1024.     if (floatingButton) {
  1025.       floatingButton.remove();
  1026.       floatingButton = null;
  1027.  
  1028.       if (isTouchDevice() && config.floatingButton.enabled) {
  1029.         createFloatingButton();
  1030.         handleSelectionChange(); // Check if there's already a selection
  1031.       }
  1032.     }
  1033.   }
  1034.  
  1035.   // Initialize the script
  1036.   function init() {
  1037.     // Register settings menu in Tampermonkey
  1038.     GM_registerMenuCommand("Text Explainer Settings", () => {
  1039.       settingsManager.openDialog(onSettingsChanged);
  1040.     });
  1041.  
  1042.     // Add keyboard shortcut listener
  1043.     document.addEventListener('keydown', handleKeyPress);
  1044.  
  1045.     // For touch devices, create floating button
  1046.     if (isTouchDevice() && config.floatingButton.enabled) {
  1047.       createFloatingButton();
  1048.  
  1049.       // Monitor text selection
  1050.       document.addEventListener('selectionchange', handleSelectionChange);
  1051.  
  1052.       // Add touchend handler to show button after selection
  1053.       document.addEventListener('touchend', () => {
  1054.         // Small delay to ensure selection is updated
  1055.         setTimeout(handleSelectionChange, 100);
  1056.       });
  1057.     }
  1058.  
  1059.     console.log('Text Explainer script initialized with language: ' + config.language);
  1060.     console.log('Touch device detected: ' + isTouchDevice());
  1061.   }
  1062.  
  1063.   // Run initialization
  1064.   init();
  1065. })();