Text Explainer

Explain selected text using LLM
当前为 2025-03-06 提交的版本，查看最新版本。
换行
// ==UserScript==
// @name         Text Explainer
// @namespace    http://tampermonkey.net/
// @version      0.2.12
// @description  Explain selected text using LLM
// @author       RoCry
// @icon         data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODAwcHgiIGhlaWdodD0iODAwcHgiIHZpZXdCb3g9IjAgMCAxOTIgMTkyIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiPjxjaXJjbGUgY3g9IjExNiIgY3k9Ijc2IiByPSI1NCIgc3Ryb2tlPSIjMDAwMDAwIiBzdHJva2Utd2lkdGg9IjEyIi8+PHBhdGggc3Ryb2tlPSIjMDAwMDAwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMTIiIGQ9Ik04Ni41IDEyMS41IDQxIDE2N2MtNC40MTggNC40MTgtMTEuNTgyIDQuNDE4LTE2IDB2MGMtNC40MTgtNC40MTgtNC40MTgtMTEuNTgyIDAtMTZsNDQuNS00NC41TTkyIDYybDEyIDMyIDEyLTMyIDEyIDMyIDEyLTMyIi8+PC9zdmc+
// @match        *://*/*
// @grant        GM_setValue
// @grant        GM_getValue
// @grant        GM_addStyle
// @grant        GM_xmlhttpRequest
// @grant        GM_registerMenuCommand
// @connect      generativelanguage.googleapis.com
// @connect      *
// @run-at       document-end
// @inject-into  content
// @require      https://update.greasyfork.org/scripts/528704/1547031/SmolLLM.js
// @require      https://update.greasyfork.org/scripts/528703/1546610/SimpleBalancer.js
// @require      https://update.greasyfork.org/scripts/528763/1547460/Text%20Explainer%20Settings.js
// @require      https://update.greasyfork.org/scripts/528822/1547803/Selection%20Context.js
// @license MIT
// ==/UserScript==
 
(function () {
  'use strict';
 
  // Initialize settings manager with extended default config
  const settingsManager = new TextExplainerSettings({
    model: "gemini-2.0-flash",
    apiKey: null,
    baseUrl: "https://generativelanguage.googleapis.com",
    provider: "gemini",
    language: "Chinese", // Default language
    shortcut: {
      key: "d",
      ctrlKey: false,
      altKey: true,
      shiftKey: false,
      metaKey: false
    },
    floatingButton: {
      enabled: true,
      size: "medium",
      position: "bottom-right"
    },
  });
 
  // Get current configuration
  let config = settingsManager.getAll();
 
  // Initialize SmolLLM
  let llm;
  try {
    llm = new SmolLLM();
  } catch (error) {
    console.error('Failed to initialize SmolLLM:', error);
    llm = null;
  }
 
  // Check if device is touch-enabled
  const isTouchDevice = () => {
    return ('ontouchstart' in window) ||
      (navigator.maxTouchPoints > 0) ||
      (navigator.msMaxTouchPoints > 0);
  };
 
  // Create and manage floating button
  let floatingButton = null;
  let isProcessingText = false;
 
  function createFloatingButton() {
    if (floatingButton) return;
 
    floatingButton = document.createElement('div');
    floatingButton.id = 'explainer-floating-button';
 
    // Determine size based on settings
    let buttonSize;
    switch (config.floatingButton.size) {
      case 'small': buttonSize = '40px'; break;
      case 'large': buttonSize = '60px'; break;
      default: buttonSize = '50px'; // medium
    }
 
    floatingButton.style.cssText = `
      width: ${buttonSize};
      height: ${buttonSize};
      border-radius: 50%;
      background-color: rgba(33, 150, 243, 0.8);
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      position: fixed;
      z-index: 9999;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
      cursor: pointer;
      font-weight: bold;
      font-size: ${parseInt(buttonSize) * 0.4}px;
      opacity: 0;
      transition: opacity 0.3s ease, transform 0.2s ease;
      pointer-events: none;
      touch-action: manipulation;
      -webkit-tap-highlight-color: transparent;
    `;
 
    // Add icon or text
    floatingButton.innerHTML = '💬';
 
    // Add to DOM
    document.body.appendChild(floatingButton);
 
    // Handle button click/tap
    function handleButtonAction(e) {
      e.preventDefault();
      e.stopPropagation();
 
      // Prevent multiple clicks while processing
      if (isProcessingText) return;
 
      // Get selection context before clearing selection
      const selectionContext = GetSelectionContext();
 
      if (!selectionContext.selectedText) {
        console.log('No valid selection to process');
        return;
      }
 
      // Set processing flag
      isProcessingText = true;
 
      // Hide the floating button
      hideFloatingButton();
 
      // Blur selection to dismiss iOS menu
      window.getSelection().removeAllRanges();
 
      // Now trigger the explainer with the stored selection
      // Create popup
      createPopup();
      const contentDiv = document.getElementById('explainer-content');
      const loadingDiv = document.getElementById('explainer-loading');
      const errorDiv = document.getElementById('explainer-error');
 
      // Reset display
      errorDiv.style.display = 'none';
      loadingDiv.style.display = 'block';
 
      // Assemble prompt with language preference
      const { prompt, systemPrompt } = getPrompt(
        selectionContext.selectedText,
        selectionContext.paragraphText,
        selectionContext.textBefore,
        selectionContext.textAfter
      );
 
      // Variable to store ongoing response text
      let responseText = '';
 
      // Call LLM with progress callback
      callLLM(prompt, systemPrompt, (textChunk, currentFullText) => {
        // Update response text with new chunk
        responseText = currentFullText || (responseText + textChunk);
 
        // Hide loading message if this is the first chunk
        if (loadingDiv.style.display !== 'none') {
          loadingDiv.style.display = 'none';
        }
 
        // Update content with either HTML or markdown
        updateContentDisplay(contentDiv, responseText);
      })
        .catch(error => {
          console.error('Error in LLM call:', error);
          errorDiv.textContent = error.message || 'Error processing request';
          errorDiv.style.display = 'block';
          loadingDiv.style.display = 'none';
        })
        .finally(() => {
          // Reset processing flag
          setTimeout(() => {
            isProcessingText = false;
          }, 1000);
        });
    }
 
    // Add click event
    floatingButton.addEventListener('click', handleButtonAction);
 
    // Add touch events
    floatingButton.addEventListener('touchstart', (e) => {
      e.preventDefault();
      e.stopPropagation();
      floatingButton.style.transform = 'scale(0.95)';
    }, { passive: false });
 
    floatingButton.addEventListener('touchend', (e) => {
      e.preventDefault();
      e.stopPropagation();
      floatingButton.style.transform = 'scale(1)';
      handleButtonAction(e);
    }, { passive: false });
 
    // Prevent text selection on button
    floatingButton.addEventListener('mousedown', (e) => {
      e.preventDefault();
      e.stopPropagation();
    });
  }
 
  function showFloatingButton() {
    if (!floatingButton || !config.floatingButton.enabled || isProcessingText) return;
 
    const selection = window.getSelection();
    if (!selection || selection.rangeCount === 0) {
      hideFloatingButton();
      return;
    }
 
    const range = selection.getRangeAt(0);
    const rect = range.getBoundingClientRect();
 
    // Calculate position near the selection
    const buttonSize = parseInt(floatingButton.style.width);
    const margin = 10; // Distance from selection
 
    // Calculate position in viewport coordinates
    let top = rect.bottom + margin;
    let left = rect.left + (rect.width / 2) - (buttonSize / 2);
 
    // If button would go off screen, try positioning above
    if (top + buttonSize > window.innerHeight) {
      top = rect.top - buttonSize - margin;
    }
 
    // Ensure button stays within viewport horizontally
    left = Math.max(10, Math.min(left, window.innerWidth - buttonSize - 10));
 
    // Apply position (using viewport coordinates for fixed positioning)
    floatingButton.style.top = `${top}px`;
    floatingButton.style.left = `${left}px`;
 
    // Make visible and enable pointer events
    floatingButton.style.opacity = '1';
    floatingButton.style.pointerEvents = 'auto';
  }
 
  function hideFloatingButton() {
    if (!floatingButton) return;
    floatingButton.style.opacity = '0';
    floatingButton.style.pointerEvents = 'none';
  }
 
  // Add minimal styles for UI components
  GM_addStyle(`
    /* Base popup styles */
    #explainer-popup {
        position: absolute;
        width: 450px;
        max-width: 90vw;
        max-height: 80vh;
        padding: 20px;
        z-index: 2147483647;
        overflow: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        
        /* Visual styles */
        background: rgba(255, 255, 255, 0.85);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        border-radius: 8px;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
        border: 1px solid rgba(0, 0, 0, 0.15);
        
        /* Text styles */
        color: #111;
        text-shadow: 0 0 1px rgba(255, 255, 255, 0.3);
        
        /* Animations */
        transition: all 0.3s ease;
    }
    
    /* Dark theme */
    #explainer-popup.dark-theme {
        background: rgba(45, 45, 50, 0.85);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        color: #e0e0e0;
        border: 1px solid rgba(255, 255, 255, 0.15);
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4);
        text-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
    }
    
    /* iOS-specific overrides */
    @supports (-webkit-touch-callout: none) {
        #explainer-popup {
            background: rgba(255, 255, 255, 0.98);
            /* Disable backdrop-filter on iOS for better performance */
            backdrop-filter: none;
            -webkit-backdrop-filter: none;
        }
        
        #explainer-popup.dark-theme {
            background: rgba(35, 35, 40, 0.98);
        }
    }
 
    @keyframes slideInFromTop {
        from { transform: translateY(-20px); opacity: 0; }
        to { transform: translateY(0); opacity: 1; }
    }
    @keyframes slideInFromBottom {
        from { transform: translateY(20px); opacity: 0; }
        to { transform: translateY(0); opacity: 1; }
    }
    @keyframes slideInFromLeft {
        from { transform: translateX(-20px); opacity: 0; }
        to { transform: translateX(0); opacity: 1; }
    }
    @keyframes slideInFromRight {
        from { transform: translateX(20px); opacity: 0; }
        to { transform: translateX(0); opacity: 1; }
    }
    @keyframes fadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }
    #explainer-loading {
        text-align: center;
        padding: 20px 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    #explainer-loading:after {
        content: "";
        width: 24px;
        height: 24px;
        border: 3px solid #ddd;
        border-top: 3px solid #2196F3;
        border-radius: 50%;
        animation: spin 1s linear infinite;
        display: inline-block;
    }
    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }
    #explainer-error {
        color: #d32f2f;
        padding: 8px;
        border-radius: 4px;
        margin-bottom: 10px;
        font-size: 14px;
        display: none;
    }
    /* iOS-specific styles */
    @supports (-webkit-touch-callout: none) {
        #explainer-popup {
            background: rgba(255, 255, 255, 0.98);
            box-shadow: 0 5px 25px rgba(0, 0, 0, 0.3);
            border: 1px solid rgba(0, 0, 0, 0.1);
        }
        /* Dark mode for iOS */
        @media (prefers-color-scheme: dark) {
            #explainer-popup {
                background: rgba(35, 35, 40, 0.98);
                border: 1px solid rgba(255, 255, 255, 0.1);
            }
        }
    }
    /* Dark mode support - minimal */
    @media (prefers-color-scheme: dark) {
        #explainer-popup {
            background: rgba(35, 35, 40, 0.85);
            color: #e0e0e0;
        }
        #explainer-error {
            background-color: rgba(100, 25, 25, 0.4);
            color: #ff8a8a;
        }
        #explainer-floating-button {
            background-color: rgba(33, 150, 243, 0.9);
        }
    }
    /* Add touch-specific styles */
    @media (hover: none) and (pointer: coarse) {
        #explainer-popup {
            width: 95vw;
            max-height: 90vh;
            padding: 15px;
            font-size: 16px;
        }
        #explainer-popup p, 
        #explainer-popup li {
            line-height: 1.6;
            margin-bottom: 12px;
        }
        #explainer-popup a {
            padding: 8px 0;
        }
    }
  `);
 
  // Function to detect if the page has a dark background
  function isPageDarkMode() {
    // Try to get the background color of the body or html element
    const bodyEl = document.body;
    const htmlEl = document.documentElement;
 
    // Get computed style
    const bodyStyle = window.getComputedStyle(bodyEl);
    const htmlStyle = window.getComputedStyle(htmlEl);
 
    // Extract background color
    const bodyBg = bodyStyle.backgroundColor;
    const htmlBg = htmlStyle.backgroundColor;
 
    // Parse RGB values
    function getRGBValues(color) {
      const match = color.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*[\d.]+)?\)/);
      if (!match) return null;
 
      const r = parseInt(match[1], 10);
      const g = parseInt(match[2], 10);
      const b = parseInt(match[3], 10);
 
      return { r, g, b };
    }
 
    // Calculate luminance (brightness) - higher values are brighter
    function getLuminance(color) {
      const rgb = getRGBValues(color);
      if (!rgb) return 128; // Default to middle gray if can't parse
 
      // Perceived brightness formula
      return (0.299 * rgb.r + 0.587 * rgb.g + 0.114 * rgb.b);
    }
 
    const bodyLuminance = getLuminance(bodyBg);
    const htmlLuminance = getLuminance(htmlBg);
 
    // If either background is dark, consider the page dark
    const threshold = 128; // Middle of 0-255 range
 
    // Check system preference as a fallback
    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
 
    // Page is dark if:
    // 1. Body background is dark, or
    // 2. HTML background is dark and body has no background set, or
    // 3. Both have no background set but system prefers dark
    if (bodyLuminance < threshold) {
      return true;
    } else if (bodyBg === 'rgba(0, 0, 0, 0)' && htmlLuminance < threshold) {
      return true;
    } else if (bodyBg === 'rgba(0, 0, 0, 0)' && htmlBg === 'rgba(0, 0, 0, 0)') {
      return prefersDark;
    }
 
    return false;
  }
 
  // Function to close the popup
  function closePopup() {
    const popup = document.getElementById('explainer-popup');
    if (popup) {
      popup.style.animation = 'fadeOut 0.3s ease';
      setTimeout(() => {
        popup.remove();
        const overlay = document.getElementById('explainer-overlay');
        if (overlay) {
          overlay.remove();
        }
      }, 300);
    }
 
    // Always clean up the global variables from previous implementation
    if (window.explainerTouchTracker) {
      window.explainerTouchTracker = null;
    }
  }
 
  // Calculate optimal popup position based on selection
  function calculatePopupPosition() {
    const selection = window.getSelection();
    if (!selection || selection.rangeCount === 0) return null;
 
    // Get selection position
    const range = selection.getRangeAt(0);
    const selectionRect = range.getBoundingClientRect();
 
    // Get scroll position to convert viewport coordinates to absolute
    const scrollLeft = window.scrollX || document.documentElement.scrollLeft;
    const scrollTop = window.scrollY || document.documentElement.scrollTop;
 
    // Get document dimensions
    const viewportWidth = window.innerWidth;
    const viewportHeight = window.innerHeight;
 
    // Estimate popup dimensions (will be adjusted once created)
    const popupWidth = 450;
    const popupHeight = Math.min(500, viewportHeight * 0.8);
 
    // Calculate optimal position
    let position = {};
 
    // Default margin from selection
    const margin = 20;
 
    // Try to position below the selection
    if (selectionRect.bottom + margin + popupHeight <= viewportHeight) {
      position.top = selectionRect.bottom + scrollTop + margin;
      position.left = Math.min(
        Math.max(10 + scrollLeft, selectionRect.left + scrollLeft + (selectionRect.width / 2) - (popupWidth / 2)),
        viewportWidth + scrollLeft - popupWidth - 10
      );
      position.placement = 'below';
    }
    // Try to position above the selection
    else if (selectionRect.top - margin - popupHeight >= 0) {
      position.top = selectionRect.top + scrollTop - margin - popupHeight;
      position.left = Math.min(
        Math.max(10 + scrollLeft, selectionRect.left + scrollLeft + (selectionRect.width / 2) - (popupWidth / 2)),
        viewportWidth + scrollLeft - popupWidth - 10
      );
      position.placement = 'above';
    }
    // Try to position to the right
    else if (selectionRect.right + margin + popupWidth <= viewportWidth) {
      position.top = Math.max(10 + scrollTop, Math.min(
        selectionRect.top + scrollTop,
        viewportHeight + scrollTop - popupHeight - 10
      ));
      position.left = selectionRect.right + scrollLeft + margin;
      position.placement = 'right';
    }
    // Try to position to the left
    else if (selectionRect.left - margin - popupWidth >= 0) {
      position.top = Math.max(10 + scrollTop, Math.min(
        selectionRect.top + scrollTop,
        viewportHeight + scrollTop - popupHeight - 10
      ));
      position.left = selectionRect.left + scrollLeft - margin - popupWidth;
      position.placement = 'left';
    }
    // Fallback to centered position if no good placement found
    else {
      position.top = Math.max(10 + scrollTop, Math.min(
        selectionRect.top + selectionRect.height + scrollTop + margin,
        viewportHeight / 2 + scrollTop - popupHeight / 2
      ));
      position.left = Math.max(10 + scrollLeft, Math.min(
        selectionRect.left + selectionRect.width / 2 + scrollLeft - popupWidth / 2,
        viewportWidth + scrollLeft - popupWidth - 10
      ));
      position.placement = 'center';
    }
 
    return position;
  }
 
  // Create popup
  function createPopup() {
    // Remove existing popup if any
    closePopup();
 
    const popup = document.createElement('div');
    popup.id = 'explainer-popup';
 
    // Add dark-theme class if the page has a dark background
    if (isPageDarkMode()) {
      popup.classList.add('dark-theme');
    }
 
    popup.innerHTML = `
      <div id="explainer-error"></div>
      <div id="explainer-loading"></div>
      <div id="explainer-content"></div>
    `;
 
    document.body.appendChild(popup);
 
    // For touch devices, use fixed positioning with transform
    if (isTouchDevice()) {
      popup.style.position = 'fixed';
      popup.style.top = '50%';
      popup.style.left = '50%';
      popup.style.transform = 'translate(-50%, -50%)';
      popup.style.width = '90vw';
      popup.style.maxHeight = '85vh';
    } else {
      // Desktop positioning logic
      const position = calculatePopupPosition();
      if (position) {
        popup.style.transform = 'none';
        if (position.top !== undefined) popup.style.top = `${position.top}px`;
        if (position.bottom !== undefined) popup.style.bottom = `${position.bottom}px`;
        if (position.left !== undefined) popup.style.left = `${position.left}px`;
        if (position.right !== undefined) popup.style.right = `${position.right}px`;
      } else {
        popup.style.top = '50%';
        popup.style.left = '50%';
        popup.style.transform = 'translate(-50%, -50%)';
      }
    }
 
    // Add animation
    popup.style.animation = 'fadeIn 0.3s ease';
 
    // Add event listeners
    document.addEventListener('keydown', handleEscKey);
 
    // Use a simpler approach for touch devices - attach a click/touch handler directly
    if (isTouchDevice()) {
      // Create an overlay for capturing outside touches
      const overlay = document.createElement('div');
      overlay.id = 'explainer-overlay';
      overlay.style.cssText = `
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: ${parseInt(popup.style.zIndex || 2147483647) - 1};
        background: transparent;
      `;
      document.body.appendChild(overlay);
 
      // Handle iPad-specific touch behavior
      let touchStarted = false;
      let startX = 0;
      let startY = 0;
 
      // Higher threshold for iPad - more forgiving for slight movements
      const moveThreshold = 30; // pixels
 
      overlay.addEventListener('touchstart', (e) => {
        touchStarted = true;
        startX = e.touches[0].clientX;
        startY = e.touches[0].clientY;
      }, { passive: true });
 
      overlay.addEventListener('touchmove', () => {
        // Just having a touchmove listener prevents default behavior on iOS
      }, { passive: true });
 
      overlay.addEventListener('touchend', (e) => {
        if (!touchStarted) return;
 
        const touch = e.changedTouches[0];
        const moveX = Math.abs(touch.clientX - startX);
        const moveY = Math.abs(touch.clientY - startY);
 
        // If user didn't move much, consider it a tap to dismiss
        if (moveX < moveThreshold && moveY < moveThreshold) {
          closePopup();
          removeAllPopupListeners();
        }
 
        touchStarted = false;
      }, { passive: true });
 
      // Prevent popup from capturing overlay events
      popup.addEventListener('touchstart', (e) => {
        e.stopPropagation();
      }, { passive: false });
 
    } else {
      document.addEventListener('click', handleOutsideClick);
    }
 
    return popup;
  }
 
  // Handle Escape key to close popup
  function handleEscKey(e) {
    if (e.key === 'Escape') {
      closePopup();
      removeAllPopupListeners();
    }
  }
 
  // For desktop - more straightforward approach
  function handleOutsideClick(e) {
    const popup = document.getElementById('explainer-popup');
    if (!popup || popup.contains(e.target)) return;
 
    closePopup();
    removeAllPopupListeners();
  }
 
  // Clean up all event listeners
  function removeAllPopupListeners() {
    document.removeEventListener('keydown', handleEscKey);
 
    // Only remove click listener if we're not on a touch device
    if (!isTouchDevice()) {
      document.removeEventListener('click', handleOutsideClick);
    }
 
    const overlay = document.getElementById('explainer-overlay');
    if (overlay) {
      overlay.remove();
    }
  }
 
  // Function to show an error in the popup
  function showError(message) {
    const errorDiv = document.getElementById('explainer-error');
    if (errorDiv) {
      errorDiv.textContent = message;
      errorDiv.style.display = 'block';
      document.getElementById('explainer-loading').style.display = 'none';
    }
  }
 
  // Function to call the LLM using SmolLLM
  async function callLLM(prompt, systemPrompt, progressCallback) {
    if (!config.apiKey) {
      throw new Error("Please set up your API key in the settings.");
    }
 
    if (!llm) {
      throw new Error("SmolLLM library not initialized. Please check console for errors.");
    }
 
    console.log(`prompt: ${prompt}`);
    console.log(`systemPrompt: ${systemPrompt}`);
    try {
      return await llm.askLLM({
        prompt: prompt,
        systemPrompt: systemPrompt,
        model: config.model,
        apiKey: config.apiKey,
        baseUrl: config.baseUrl,
        providerName: config.provider,
        handler: progressCallback,
        timeout: 60000
      });
    } catch (error) {
      console.error('LLM API error:', error);
      throw error;
    }
  }
 
  function getPrompt(selectedText, paragraphText, textBefore, textAfter) {
    const wordsCount = selectedText.split(' ').length;
    const systemPrompt = `Respond in ${config.language} with HTML tags to improve readability.
- Prioritize clarity and conciseness
- Use bullet points when appropriate
- Do not add any code blocks for response`;
 
    if (wordsCount >= 500) {
      return {
        prompt: `Create a structured summary in ${config.language}:
- Identify key themes and concepts
- Extract 3-5 main points
- Use nested <ul> lists for hierarchy
- Keep bullets concise
 
for the following selected text:
\n\n${selectedText}
`,
        systemPrompt
      };
    }
 
    // For short text that looks like a sentence, offer translation
    if (wordsCount >= 5) {
      return {
        prompt: `Translate exactly to ${config.language} without commentary:
- Preserve technical terms and names
- Maintain original punctuation
- Match formal/informal tone of source
 
for the following selected text:
\n\n${selectedText}
`,
        systemPrompt
      };
    }
 
    const pinYinExtraPrompt = config.language === "Chinese" ? ' DO NOT add Pinyin for it.' : '';
    const ipaExtraPrompt = config.language === "Chinese" ? '(with IPA if necessary)' : '';
    const asciiChars = selectedText.replace(/[\s\.,\-_'"!?()]/g, '')
      .split('')
      .filter(char => char.charCodeAt(0) <= 127).length;
    const sampleSentenceLanguage = selectedText.length === asciiChars ? "English" : config.language;
 
    // If we have context before/after, include it in the prompt
    const contextPrompt = textBefore || textAfter ?
      `# Context:
## Before selected text:
${textBefore || 'None'}
## Selected text:
${selectedText}
## After selected text:
${textAfter || 'None'}` : paragraphText;
 
 
    // Explain words prompt
    return {
      prompt: `Provide an explanation for the word: "${selectedText}${ipaExtraPrompt}" in ${config.language} without commentary.${pinYinExtraPrompt}
 
Use the context from the surrounding paragraph to inform your explanation when relevant:
 
${contextPrompt}
 
# Consider these scenarios:
 
## Names
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).
e.g.
Alan Turing was a British mathematician and computer scientist. He is widely considered to be the father of theoretical computer science and artificial intelligence.
His work was crucial to:
	•	Formalizing the concepts of algorithm and computation with the Turing machine.
	•	Breaking the German Enigma code during World War II, significantly contributing to the Allied victory.
	•	Developing the Turing test, a benchmark for artificial intelligence.
 
 
## Technical Terms
If "${selectedText}" is a technical term or jargon
- give a concise definition and explain.
- Some best practice of using it
- Explain how it works. 
- No need example sentence for the technical term.
e.g. GAN → 生成对抗网络
生成对抗网络(Generative Adversarial Network)，是一种深度学习框架，由Ian Goodfellow在2014年提出。GAN包含两个神经网络：生成器(Generator)和判别器(Discriminator)，它们相互对抗训练。生成器尝试创建看起来真实的数据，而判别器则尝试区分真实数据和生成的假数据。通过这种"博弈"过程，生成器逐渐学会创建越来越逼真的数据。
 
## Normal Words
- For any other word, explain its meaning and provide 1-2 example sentences with the word in ${sampleSentenceLanguage}.
e.g. jargon \\ˈdʒɑrɡən\\ → 行话，专业术语，特定领域内使用的专业词汇。在计算机科学和编程领域，指那些对外行人难以理解的专业术语和缩写。
例句: "When explaining code to beginners, try to avoid using too much technical jargon that might confuse them."（向初学者解释代码时，尽量避免使用太多可能让他们困惑的技术行话。）
 
# Format
 
- Output the words first, then the explanation, and then the example sentences in ${sampleSentenceLanguage} if necessary.
- No extra explanation
- Remember to using proper html format like <p> <b> <i> <a> <li> <ol> <ul> to improve readability.
`,
      systemPrompt
    };
  }
 
  // Main function to process selected text
  async function processSelectedText() {
    // Use the utility function instead of the local getSelectedText
    const { selectedText, textBefore, textAfter, paragraphText } = GetSelectionContext();
 
    if (!selectedText) {
      showError('No text selected');
      return;
    }
 
    console.log(`Selected text: '${selectedText}', Paragraph text:\n${paragraphText}`);
    // Create popup
    createPopup();
    const contentDiv = document.getElementById('explainer-content');
    const loadingDiv = document.getElementById('explainer-loading');
    const errorDiv = document.getElementById('explainer-error');
 
    // Reset display
    errorDiv.style.display = 'none';
    loadingDiv.style.display = 'block';
 
    // Assemble prompt with language preference
    const { prompt, systemPrompt } = getPrompt(selectedText, paragraphText, textBefore, textAfter);
 
    // Variable to store ongoing response text
    let responseText = '';
 
    try {
      // Call LLM with progress callback and await the full response
      const fullResponse = await callLLM(prompt, systemPrompt, (textChunk, currentFullText) => {
        // Update response text with new chunk
        responseText = currentFullText || (responseText + textChunk);
 
        // Hide loading message if this is the first chunk
        if (loadingDiv.style.display !== 'none') {
          loadingDiv.style.display = 'none';
        }
 
        // Update content with either HTML or markdown
        updateContentDisplay(contentDiv, responseText);
      });
 
      console.log('fullResponse\n', fullResponse);
 
      // If we got a response
      if (fullResponse && fullResponse.length > 0) {
        responseText = fullResponse;
        loadingDiv.style.display = 'none';
        updateContentDisplay(contentDiv, fullResponse);
      }
      // If no response was received at all
      else if (!fullResponse || fullResponse.length === 0) {
        // If we've received chunks but the final response is empty, use the accumulated text
        if (responseText && responseText.length > 0) {
          updateContentDisplay(contentDiv, responseText);
        } else {
          showError("No response received from the model. Please try again.");
        }
      }
 
      // Hide loading indicator if it's still visible
      if (loadingDiv.style.display !== 'none') {
        loadingDiv.style.display = 'none';
      }
    } catch (error) {
      console.error('Error:', error);
      // Display error in popup
      showError(`Error: ${error.message}`);
    }
  }
 
  // Main function to handle keyboard shortcuts
  function handleKeyPress(e) {
    // Get shortcut configuration from settings
    const shortcut = config.shortcut || { key: 'd', ctrlKey: false, altKey: true, shiftKey: false, metaKey: false };
 
    // More robust shortcut detection using both key and code properties
    if (isShortcutMatch(e, shortcut)) {
      e.preventDefault();
      processSelectedText();
    }
  }
 
  // Helper function for more robust shortcut detection
  function isShortcutMatch(event, shortcutConfig) {
    // Check all modifier keys first
    if (event.ctrlKey !== !!shortcutConfig.ctrlKey ||
      event.altKey !== !!shortcutConfig.altKey ||
      event.shiftKey !== !!shortcutConfig.shiftKey ||
      event.metaKey !== !!shortcutConfig.metaKey) {
      return false;
    }
 
    const key = shortcutConfig.key.toLowerCase();
 
    // Method 1: Direct key match (works for most standard keys)
    if (event.key.toLowerCase() === key) {
      return true;
    }
 
    // Method 2: Key code match (more reliable for letter keys)
    // This handles the physical key position regardless of keyboard layout
    if (key.length === 1 && /^[a-z]$/.test(key) &&
      event.code === `Key${key.toUpperCase()}`) {
      return true;
    }
 
    // Method 3: Handle known special characters from Option/Alt key combinations
    // These are the most common mappings on macOS when using Option+key
    const macOptionKeyMap = {
      'a': 'å', 'b': '∫', 'c': 'ç', 'd': '∂', 'e': '´', 'f': 'ƒ',
      'g': '©', 'h': '˙', 'i': 'ˆ', 'j': '∆', 'k': '˚', 'l': '¬',
      'm': 'µ', 'n': '˜', 'o': 'ø', 'p': 'π', 'q': 'œ', 'r': '®',
      's': 'ß', 't': '†', 'u': '¨', 'v': '√', 'w': '∑', 'x': '≈',
      'y': '¥', 'z': 'Ω'
    };
 
    if (shortcutConfig.altKey && macOptionKeyMap[key] === event.key) {
      return true;
    }
 
    return false;
  }
 
  // Helper function to update content display
  function updateContentDisplay(contentDiv, text) {
    if (!text) return;
 
    try {
      if (!text.trim().startsWith('<')) {
        // fallback
        console.log(`Seems like the response is not HTML: ${text}`);
        text = `<p>${text.replace(/\n/g, '<br>')}</p>`;
      }
      contentDiv.innerHTML = text;
    } catch (e) {
      // Fallback if parsing fails
      console.error(`Error parsing content: ${e.message}`);
      contentDiv.innerHTML = `<p>${text.replace(/\n/g, '<br>')}</p>`;
    }
  }
 
  // Monitor selection changes for floating button
  function handleSelectionChange() {
    // Don't update button visibility if we're processing text
    if (isProcessingText) return;
 
    const selection = window.getSelection();
    const hasSelection = selection && selection.toString().trim() !== '';
 
    if (hasSelection && isTouchDevice() && config.floatingButton.enabled) {
      // Small delay to ensure selection is fully updated
      setTimeout(showFloatingButton, 100);
    } else {
      hideFloatingButton();
    }
  }
 
  // Settings update callback
  function onSettingsChanged(updatedConfig) {
    config = updatedConfig;
    console.log('Settings updated:', config);
 
    // Recreate floating button if settings changed
    if (floatingButton) {
      floatingButton.remove();
      floatingButton = null;
 
      if (isTouchDevice() && config.floatingButton.enabled) {
        createFloatingButton();
        handleSelectionChange(); // Check if there's already a selection
      }
    }
  }
 
  // Initialize the script
  function init() {
    // Register settings menu in Tampermonkey
    GM_registerMenuCommand("Text Explainer Settings", () => {
      settingsManager.openDialog(onSettingsChanged);
    });
 
    // Add keyboard shortcut listener
    document.addEventListener('keydown', handleKeyPress);
 
    // For touch devices, create floating button
    if (isTouchDevice() && config.floatingButton.enabled) {
      createFloatingButton();
 
      // Monitor text selection
      document.addEventListener('selectionchange', handleSelectionChange);
 
      // Add touchend handler to show button after selection
      document.addEventListener('touchend', () => {
        // Small delay to ensure selection is updated
        setTimeout(handleSelectionChange, 100);
      });
    }
 
    console.log('Text Explainer script initialized with language: ' + config.language);
    console.log('Touch device detected: ' + isTouchDevice());
  }
 
  // Run initialization
  init();
})();