Summarize with AI

Single-button AI summarization (OpenAI/Gemini) with model selection dropdown for articles/news. Uses Alt+S shortcut. Allows adding custom models. Adapts summary overlay to system dark mode.

目前為 2025-05-03 提交的版本,檢視 最新版本

  1. // ==UserScript==
  2. // @name Summarize with AI
  3. // @namespace https://github.com/insign/userscripts
  4. // @version 2025.05.02.2253
  5. // @description Single-button AI summarization (OpenAI/Gemini) with model selection dropdown for articles/news. Uses Alt+S shortcut. Allows adding custom models. Adapts summary overlay to system dark mode.
  6. // @author Hélio <open@helio.me>
  7. // @license WTFPL
  8. // @match *://*/*
  9. // @grant GM.addStyle
  10. // @grant GM.xmlHttpRequest
  11. // @grant GM.setValue
  12. // @grant GM.getValue
  13. // @connect api.openai.com
  14. // @connect generativelanguage.googleapis.com
  15. // @require https://cdnjs.cloudflare.com/ajax/libs/readability/0.5.0/Readability.min.js
  16. // @require https://cdnjs.cloudflare.com/ajax/libs/readability/0.5.0/Readability-readerable.min.js
  17. // ==/UserScript==
  18.  
  19. (function () {
  20. 'use strict'
  21.  
  22. // --- Constantes ---
  23. // IDs dos elementos da interface do script
  24. const BUTTON_ID = 'summarize-button' // Botão principal flutuante 'S'
  25. const DROPDOWN_ID = 'model-dropdown' // Dropdown de seleção de modelo
  26. const OVERLAY_ID = 'summarize-overlay' // Overlay de fundo para o sumário
  27. const CLOSE_BUTTON_ID = 'summarize-close' // Botão de fechar no overlay
  28. const CONTENT_ID = 'summarize-content' // Div que contém o texto do sumário
  29. const ERROR_ID = 'summarize-error' // Div para exibir notificações de erro
  30. const ADD_MODEL_ITEM_ID = 'add-custom-model' // ID para o item "Adicionar Modelo" no dropdown
  31. const RETRY_BUTTON_ID = 'summarize-retry-button' // ID para o botão "Tentar Novamente" no overlay de erro
  32.  
  33. // Chave para armazenar modelos customizados no GM storage
  34. const CUSTOM_MODELS_KEY = 'custom_ai_models'
  35.  
  36. // Limite de tokens padrão
  37. const DEFAULT_MAX_TOKENS = 1000
  38. // Limite de tokens alto (para modelos específicos)
  39. const HIGH_MAX_TOKENS = 1500
  40. // Tempo para considerar long press (em milissegundos)
  41. const LONG_PRESS_DURATION = 500
  42.  
  43. // Configuração dos serviços e modelos de IA *padrão* suportados
  44. // Nova estrutura: models é um array de objetos com id, name (opcional), params (opcional)
  45. const MODEL_GROUPS = {
  46. openai: {
  47. name: 'OpenAI',
  48. baseUrl: 'https://api.openai.com/v1/chat/completions',
  49. models: [
  50. {id: 'o4-mini', name: 'o4 mini (better)', params: {max_completion_tokens: HIGH_MAX_TOKENS}},
  51. {id: 'o3-mini', name: 'o3 mini', params: {max_completion_tokens: HIGH_MAX_TOKENS}}, // Nome pode precisar de ajuste
  52. {id: 'gpt-4.1', name: 'GPT-4.1'}, // Usa params padrão
  53. {id: 'gpt-4.1-mini', name: 'GPT-4.1 mini'},
  54. {id: 'gpt-4.1-nano', name: 'GPT-4.1 nano (faster)'},
  55. ],
  56. // Parâmetros padrão específicos para OpenAI (se não definidos no modelo)
  57. defaultParams: {max_completion_tokens: DEFAULT_MAX_TOKENS}
  58. },
  59. gemini: {
  60. name: 'Gemini',
  61. baseUrl: 'https://generativelanguage.googleapis.com/v1beta/models/',
  62. models: [
  63. {id: 'gemini-2.5-flash-preview-04-17',
  64. name: 'Gemini 2.5 Flash (faster)',
  65. params: {maxOutputTokens: HIGH_MAX_TOKENS}
  66. },
  67. {id: 'gemini-2.5-pro-exp-03-25', name: 'Gemini 2.5 Pro (better)', params: {maxOutputTokens: HIGH_MAX_TOKENS}},
  68. ],
  69. // Parâmetros padrão específicos para Gemini (se não definidos no modelo)
  70. defaultParams: {maxOutputTokens: DEFAULT_MAX_TOKENS} // Mantemos o padrão original aqui
  71. },
  72. }
  73.  
  74. // Template do prompt enviado para a IA
  75. // Instruções atualizadas para usar as classes CSS específicas de qualidade
  76. const PROMPT_TEMPLATE = (title, content, lang) => `You are a summarizer bot that provides clear and affirmative explanations of content.
  77. Generate a concise summary that includes:
  78. - 2-sentence introduction
  79. - Relevant emojis as bullet points
  80. - No section headers
  81. - Use HTML formatting, never use \`\`\` code blocks, never use markdown.
  82. - After the last bullet point add a 2-sentence conclusion with your own opinion based on your general knowledge, including if you agree or disagree and why. Give your opinion as a human. Start this conclusion with "<strong>Opinion:</strong> ". Do not add things like "I agree" or "I disagree", instead just your opinion.
  83. - User language to be used in the entire summary: ${lang}
  84. - Before everything, add quality of the article, like "<strong>Article Quality:</strong> <span class=article-good>8/10</span>", where 1 is bad and 10 is excellent.
  85. - For the quality class use:
  86. <span class=article-excellent>9/10</span> (or 10)
  87. <span class=article-good>8/10</span>
  88. <span class=article-average>7/10</span>
  89. <span class=article-bad>6/10</span>
  90. <span class=article-very-bad>5/10</span> (or less)
  91. - "Opinion:", "Article Quality:" should be in user language, e.g. "Opinião:", "Qualidade do artigo:" for Português.
  92.  
  93. Article Title: ${title}
  94. Article Content: ${content}`
  95.  
  96. // --- Variáveis de Estado ---
  97. let activeModel = 'gemini-2.5-flash-preview-04-17' // ID do modelo ativo selecionado por padrão ou pelo usuário
  98. let articleData = null // Armazena o título e conteúdo extraído do artigo { title, content }
  99. let customModels = [] // Array para armazenar modelos customizados carregados do storage { id, service }
  100. let longPressTimer = null // Timer para detectar long press no botão 'S'
  101. let isLongPress = false // Flag para indicar se ocorreu long press
  102.  
  103. // --- Funções Principais ---
  104.  
  105. /**
  106. * Função principal de inicialização do script.
  107. * Carrega modelos customizados, adiciona listener de teclado,
  108. * tenta extrair dados do artigo, e se bem-sucedido, adiciona o botão e listeners de foco.
  109. */
  110. async function initialize() {
  111. customModels = await getCustomModels() // Carrega modelos customizados do storage
  112. document.addEventListener('keydown', handleKeyPress) // Listener para atalhos (Alt+S, Esc)
  113. articleData = getArticleData() // Tenta extrair o conteúdo do artigo
  114. if (articleData) { // Se encontrou conteúdo legível:
  115. addSummarizeButton() // Adiciona o botão flutuante e o dropdown
  116. showElement(BUTTON_ID) // Torna o botão visível
  117. setupFocusListeners() // Configura para esconder/mostrar botão em campos de input
  118. // Define o último modelo usado (ou padrão) como ativo
  119. activeModel = await GM.getValue('last_used_model', activeModel)
  120. }
  121. }
  122.  
  123. /**
  124. * Tenta extrair o conteúdo principal da página usando a biblioteca Readability.js.
  125. * @returns {object|null} - Um objeto { title, content } se bem-sucedido, ou null se não for legível ou ocorrer erro.
  126. */
  127. function getArticleData() {
  128. try {
  129. const docClone = document.cloneNode(true) // Clona o documento para não modificar o original
  130. // Remove elementos que podem interferir com a extração
  131. docClone.querySelectorAll('script, style, noscript, iframe, figure, img, svg, header, footer, nav').forEach(el => el.remove())
  132. // Verifica se a página é provavelmente legível
  133. if (!isProbablyReaderable(docClone)) {
  134. console.log('Summarize with AI: Page not detected as readerable.')
  135. return null
  136. }
  137. const reader = new Readability(docClone)
  138. const article = reader.parse()
  139. // Retorna dados se o conteúdo foi extraído e não está vazio
  140. return (article?.content && article.textContent?.trim())
  141. ? {title: article.title, content: article.textContent.trim()}
  142. : null
  143. } catch (error) {
  144. console.error('Summarize with AI: Article parsing failed:', error)
  145. return null // Retorna null em caso de erro
  146. }
  147. }
  148.  
  149. /**
  150. * Adiciona o botão flutuante 'S' e o dropdown de seleção de modelo ao DOM.
  151. * Configura os event listeners do botão (click, dblclick, long press) e injeta estilos.
  152. */
  153. function addSummarizeButton() {
  154. // Evita adicionar o botão múltiplas vezes
  155. if (document.getElementById(BUTTON_ID)) return
  156.  
  157. // Cria o botão 'S'
  158. const button = document.createElement('div')
  159. button.id = BUTTON_ID
  160. button.textContent = 'S' // Texto simples e pequeno
  161. button.title = 'Summarize (Alt+S) / Dbl-Click or Long Press to Select Model' // Tooltip atualizado
  162. document.body.appendChild(button)
  163.  
  164. // Cria o dropdown (inicialmente oculto)
  165. const dropdown = createDropdownElement() // Cria o elemento base do dropdown
  166. document.body.appendChild(dropdown)
  167. populateDropdown(dropdown) // Preenche o dropdown com modelos
  168.  
  169. // Listener para clique simples: Inicia a sumarização com o modelo ativo
  170. button.addEventListener('click', () => {
  171. // Só executa se não foi um long press
  172. if (!isLongPress) {
  173. processSummarization() // Chama a função principal de sumarização
  174. }
  175. // Reseta a flag de long press para o próximo clique
  176. isLongPress = false
  177. })
  178.  
  179. // Listener para duplo clique: Mostra/esconde o dropdown
  180. button.addEventListener('dblclick', toggleDropdown)
  181.  
  182. // Listeners para Long Press: Mostra/esconde o dropdown
  183. button.addEventListener('mousedown', (e) => {
  184. // Inicia o timer para detectar long press
  185. isLongPress = false // Reseta a flag
  186. clearTimeout(longPressTimer) // Limpa timer anterior se houver
  187. longPressTimer = setTimeout(() => {
  188. isLongPress = true // Marca que ocorreu long press
  189. toggleDropdown(e) // Abre/fecha o dropdown
  190. }, LONG_PRESS_DURATION)
  191. })
  192.  
  193. button.addEventListener('mouseup', () => {
  194. // Cancela o timer se o botão for solto antes do tempo
  195. clearTimeout(longPressTimer)
  196. })
  197.  
  198. button.addEventListener('mouseleave', () => {
  199. // Cancela o timer se o mouse sair do botão
  200. clearTimeout(longPressTimer)
  201. })
  202.  
  203. // Listener para clique fora do dropdown para fechá-lo
  204. document.addEventListener('click', handleOutsideClick)
  205.  
  206. // Injeta os estilos CSS necessários para a interface
  207. injectStyles()
  208. }
  209.  
  210.  
  211. // --- Funções de UI (Dropdown, Overlay, Notificações) ---
  212.  
  213. /**
  214. * Cria o elemento base (container) do dropdown.
  215. * @returns {HTMLElement} - O elemento div do dropdown, inicialmente vazio e oculto.
  216. */
  217. function createDropdownElement() {
  218. const dropdown = document.createElement('div')
  219. dropdown.id = DROPDOWN_ID
  220. dropdown.style.display = 'none' // Começa oculto
  221. return dropdown
  222. }
  223.  
  224. /**
  225. * Preenche o elemento dropdown com os grupos de modelos (padrão e customizados)
  226. * e a opção para adicionar novos modelos. Adiciona links de reset de API Key.
  227. * @param {HTMLElement} dropdownElement - O elemento do dropdown a ser preenchido.
  228. */
  229. function populateDropdown(dropdownElement) {
  230. dropdownElement.innerHTML = '' // Limpa conteúdo anterior
  231.  
  232. Object.entries(MODEL_GROUPS).forEach(([service, group]) => {
  233. // Combina modelos padrão e customizados para este serviço
  234. const standardModels = group.models || [] // Array de objetos {id, name?, params?}
  235. const serviceCustomModels = customModels
  236. .filter(m => m.service === service) // Filtra customizados por serviço {id, service}
  237. .map(m => ({id: m.id})) // Mapeia para o formato {id}, sem name ou params definidos aqui
  238.  
  239. const allModelObjects = [...standardModels, ...serviceCustomModels]
  240. // Remove duplicatas baseadas no ID (case-insensitive)
  241. .reduce((acc, model) => {
  242. if (!acc.some(existing => existing.id.toLowerCase() === model.id.toLowerCase())) {
  243. acc.push(model)
  244. }
  245. return acc
  246. }, [])
  247. .sort((a, b) => a.id.localeCompare(b.id)) // Ordena alfabeticamente pelo ID
  248.  
  249. if (allModelObjects.length > 0) {
  250. const groupDiv = document.createElement('div')
  251. groupDiv.className = 'model-group'
  252. // Cria o cabeçalho com link de reset
  253. groupDiv.appendChild(createHeader(group.name, service))
  254. // Adiciona cada item de modelo
  255. allModelObjects.forEach(modelObj => groupDiv.appendChild(createModelItem(modelObj)))
  256. dropdownElement.appendChild(groupDiv)
  257. }
  258. })
  259.  
  260. // Adiciona separador e item "+ Adicionar"
  261. const separator = document.createElement('hr')
  262. separator.style.margin = '8px 0'
  263. separator.style.border = 'none'
  264. separator.style.borderTop = '1px solid #eee'
  265. dropdownElement.appendChild(separator)
  266. dropdownElement.appendChild(createAddModelItem())
  267. }
  268.  
  269. /**
  270. * Cria um elemento de cabeçalho para um grupo de modelos no dropdown,
  271. * incluindo um link para resetar a API Key do serviço.
  272. * @param {string} text - O texto do cabeçalho (nome do serviço).
  273. * @param {string} service - A chave do serviço ('openai' ou 'gemini').
  274. * @returns {HTMLElement} - O elemento div do cabeçalho.
  275. */
  276. function createHeader(text, service) {
  277. const headerContainer = document.createElement('div')
  278. headerContainer.className = 'group-header-container' // Container para flex layout
  279.  
  280. const headerText = document.createElement('span') // Span para o texto
  281. headerText.className = 'group-header-text'
  282. headerText.textContent = text
  283.  
  284. const resetLink = document.createElement('a') // Link para resetar
  285. resetLink.href = '#'
  286. resetLink.textContent = 'Reset Key'
  287. resetLink.className = 'reset-key-link'
  288. resetLink.title = `Reset ${text} API Key`
  289. resetLink.addEventListener('click', (e) => {
  290. e.preventDefault() // Previne navegação
  291. e.stopPropagation() // Impede que feche o dropdown
  292. handleApiKeyReset(service) // Chama o reset para o serviço específico
  293. })
  294.  
  295. headerContainer.appendChild(headerText)
  296. headerContainer.appendChild(resetLink)
  297. return headerContainer
  298. }
  299.  
  300. /**
  301. * Cria um item clicável para um modelo específico no dropdown.
  302. * Usa a nova estrutura de objeto do modelo.
  303. * @param {object} modelObj - O objeto do modelo { id, name?, params? }.
  304. * @returns {HTMLElement} - O elemento div do item do modelo.
  305. */
  306. function createModelItem(modelObj) {
  307. const item = document.createElement('div')
  308. item.className = 'model-item'
  309. // Usa o nome amigável se disponível, senão o ID
  310. item.textContent = modelObj.name || modelObj.id
  311. // Adiciona um marcador visual se for o modelo ativo atualmente
  312. if (modelObj.id === activeModel) {
  313. item.style.fontWeight = 'bold'
  314. item.style.color = '#1A73E8' // Azul para destacar
  315. }
  316. // Listener de clique: seleciona o ID do modelo, esconde dropdown e inicia sumarização
  317. item.addEventListener('click', async () => {
  318. activeModel = modelObj.id // Define o ID do modelo ativo
  319. await GM.setValue('last_used_model', activeModel) // Salva a última seleção
  320. hideElement(DROPDOWN_ID) // Esconde o dropdown
  321. processSummarization() // Inicia o processo de sumarização
  322. })
  323. return item
  324. }
  325.  
  326. /**
  327. * Cria o item clicável "+ Adicionar Modelo Customizado" no dropdown.
  328. * @returns {HTMLElement} - O elemento div do item.
  329. */
  330. function createAddModelItem() {
  331. const item = document.createElement('div')
  332. item.id = ADD_MODEL_ITEM_ID
  333. item.className = 'model-item add-model-item' // Classe adicional para estilização
  334. item.textContent = '+ Add Custom Model'
  335. // Listener de clique: inicia o fluxo para adicionar um novo modelo
  336. item.addEventListener('click', async (e) => {
  337. e.stopPropagation() // Impede que feche o dropdown
  338. hideElement(DROPDOWN_ID) // Esconde o dropdown antes de mostrar os prompts
  339. await handleAddModel()
  340. })
  341. return item
  342. }
  343.  
  344. /**
  345. * Mostra ou esconde o dropdown de seleção de modelo.
  346. * @param {Event} [e] - O objeto do evento de clique (opcional).
  347. */
  348. function toggleDropdown(e) {
  349. if (e) e.stopPropagation() // Impede que o clique feche imediatamente o dropdown
  350. const dropdown = document.getElementById(DROPDOWN_ID)
  351. if (dropdown) {
  352. const isHidden = dropdown.style.display === 'none'
  353. if (isHidden) {
  354. // Repopula o dropdown caso modelos tenham sido adicionados/removidos ou para atualizar link de reset
  355. populateDropdown(dropdown)
  356. showElement(DROPDOWN_ID)
  357. } else {
  358. hideElement(DROPDOWN_ID)
  359. }
  360. }
  361. }
  362.  
  363. /**
  364. * Fecha o dropdown se o clique ocorrer fora dele ou do botão 'S'.
  365. * @param {Event} event - O objeto do evento de clique.
  366. */
  367. function handleOutsideClick(event) {
  368. const dropdown = document.getElementById(DROPDOWN_ID)
  369. const button = document.getElementById(BUTTON_ID)
  370. // Verifica se o dropdown está visível e se o clique foi fora dele e fora do botão
  371. if (dropdown && dropdown.style.display !== 'none' &&
  372. !dropdown.contains(event.target) &&
  373. !button?.contains(event.target)) { // Verifica se o botão existe
  374. hideElement(DROPDOWN_ID)
  375. }
  376. }
  377.  
  378. /**
  379. * Exibe o overlay de sumarização com o conteúdo fornecido.
  380. * Cria o overlay se ele não existir.
  381. * Simplificado: O botão retry apenas chama processSummarization.
  382. * @param {string} contentHTML - O conteúdo HTML a ser exibido (pode ser loading, sumário ou erro com retry).
  383. * @param {boolean} [isError=false] - Indica se o conteúdo é uma mensagem de erro para adicionar botão de retry.
  384. */
  385. function showSummaryOverlay(contentHTML, isError = false) {
  386. // Se o overlay já existe, apenas atualiza o conteúdo
  387. if (document.getElementById(OVERLAY_ID)) {
  388. updateSummaryOverlay(contentHTML, isError)
  389. return
  390. }
  391.  
  392. // Cria o elemento do overlay
  393. const overlay = document.createElement('div')
  394. overlay.id = OVERLAY_ID
  395. // Define o HTML interno com container, botão de fechar e conteúdo inicial
  396. let finalContent = `<div id="${CLOSE_BUTTON_ID}" title="Close (Esc)">×</div>${contentHTML}`
  397. // Adiciona botão de Tentar Novamente se for um erro
  398. if (isError) {
  399. finalContent += `<button id="${RETRY_BUTTON_ID}" class="retry-button">Try Again</button>`
  400. }
  401. overlay.innerHTML = `<div id="${CONTENT_ID}">${finalContent}</div>`
  402.  
  403. document.body.appendChild(overlay)
  404. document.body.style.overflow = 'hidden' // Trava o scroll do body
  405.  
  406. // Adiciona listeners para fechar o overlay
  407. document.getElementById(CLOSE_BUTTON_ID).addEventListener('click', closeOverlay)
  408. overlay.addEventListener('click', (e) => { // Fecha clicando no fundo (fora do content)
  409. if (e.target === overlay) closeOverlay()
  410. })
  411. // Adiciona listener para o botão de Tentar Novamente, se existir
  412. // Apenas chama processSummarization() novamente
  413. document.getElementById(RETRY_BUTTON_ID)?.addEventListener('click', processSummarization)
  414. }
  415.  
  416. /**
  417. * Fecha e remove o overlay de sumarização do DOM. Restaura o scroll do body.
  418. */
  419. function closeOverlay() {
  420. const overlay = document.getElementById(OVERLAY_ID)
  421. if (overlay) {
  422. overlay.remove()
  423. document.body.style.overflow = '' // Libera o scroll do body
  424. }
  425. }
  426.  
  427. /**
  428. * Atualiza o conteúdo dentro do overlay de sumarização já existente.
  429. * Simplificado: O botão retry apenas chama processSummarization.
  430. * @param {string} contentHTML - O novo conteúdo HTML.
  431. * @param {boolean} [isError=false] - Indica se o conteúdo é uma mensagem de erro para adicionar botão de retry.
  432. */
  433. function updateSummaryOverlay(contentHTML, isError = false) {
  434. const contentDiv = document.getElementById(CONTENT_ID)
  435. if (contentDiv) {
  436. // Recria o conteúdo interno, garantindo que o botão de fechar permaneça
  437. let finalContent = `<div id="${CLOSE_BUTTON_ID}" title="Close (Esc)">×</div>${contentHTML}`
  438. // Adiciona botão de Tentar Novamente se for um erro
  439. if (isError) {
  440. finalContent += `<button id="${RETRY_BUTTON_ID}" class="retry-button">Try Again</button>`
  441. }
  442. contentDiv.innerHTML = finalContent
  443. // Reatribui o listener ao novo botão de fechar
  444. document.getElementById(CLOSE_BUTTON_ID)?.addEventListener('click', closeOverlay)
  445. // Reatribui listener ao botão de Tentar Novamente, se existir
  446. // Apenas chama processSummarization() novamente
  447. document.getElementById(RETRY_BUTTON_ID)?.addEventListener('click', processSummarization)
  448. }
  449. }
  450.  
  451. /**
  452. * Exibe uma notificação de erro temporária na parte inferior central da tela.
  453. * @param {string} message - A mensagem de erro.
  454. */
  455. function showErrorNotification(message) {
  456. document.getElementById(ERROR_ID)?.remove() // Remove notificação anterior
  457.  
  458. const errorDiv = document.createElement('div')
  459. errorDiv.id = ERROR_ID
  460. errorDiv.innerText = message
  461. document.body.appendChild(errorDiv)
  462.  
  463. // Remove a notificação após 4 segundos
  464. setTimeout(() => errorDiv.remove(), 4000)
  465. }
  466.  
  467. /**
  468. * Esconde um elemento pelo seu ID, definindo display como 'none'.
  469. * @param {string} id - O ID do elemento.
  470. */
  471. function hideElement(id) {
  472. const el = document.getElementById(id)
  473. if (el) el.style.display = 'none'
  474. }
  475.  
  476. /**
  477. * Mostra um elemento pelo seu ID.
  478. * @param {string} id - O ID do elemento.
  479. */
  480. function showElement(id) {
  481. const el = document.getElementById(id)
  482. if (el) {
  483. // Usa 'flex' para o botão e 'block' para os outros por padrão
  484. el.style.display = (id === BUTTON_ID) ? 'flex' : 'block'
  485. }
  486. }
  487.  
  488. // --- Funções de Lógica (Sumarização, API, Modelos) ---
  489.  
  490. /**
  491. * Encontra o objeto de configuração completo para o modelo ativo (padrão ou customizado).
  492. * @returns {object|null} Um objeto contendo { id, service, name?, params? } ou null se não encontrado.
  493. */
  494. function getActiveModelConfig() {
  495. for (const service in MODEL_GROUPS) {
  496. const group = MODEL_GROUPS[service]
  497. const modelConfig = group.models.find(m => m.id === activeModel)
  498. if (modelConfig) {
  499. // Retorna uma cópia do objeto, adicionando a chave do serviço
  500. return {...modelConfig, service: service}
  501. }
  502. }
  503. // Verifica modelos customizados
  504. const customConfig = customModels.find(m => m.id === activeModel)
  505. if (customConfig) {
  506. // Custom models não tem 'name' ou 'params' definidos por padrão aqui
  507. // Retorna uma cópia do objeto customizado { id, service }
  508. return {...customConfig}
  509. }
  510. console.error(`Summarize with AI: Active model configuration not found for ID: ${activeModel}`)
  511. return null // Modelo não encontrado
  512. }
  513.  
  514. /**
  515. * Orquestra o processo de sumarização: obtém API key, mostra overlay de loading com nome do modelo,
  516. * envia requisição à API e trata a resposta.
  517. */
  518. async function processSummarization() {
  519. try {
  520. // Garante que temos dados do artigo antes de prosseguir
  521. if (!articleData) {
  522. showErrorNotification('Article content not found or not readable.')
  523. return
  524. }
  525.  
  526. const modelConfig = getActiveModelConfig() // Obtém a configuração completa do modelo ativo
  527. if (!modelConfig) {
  528. // Mensagem de erro mais informativa se o modelo não for encontrado
  529. showErrorNotification(`Configuration for model "${activeModel}" not found. Please select another model.`)
  530. return // Interrompe a execução se a configuração não for encontrada
  531. }
  532.  
  533. // Determina o nome a ser exibido (usa 'name' se disponível, senão 'id')
  534. const modelDisplayName = modelConfig.name || modelConfig.id
  535. const service = modelConfig.service // Determina 'openai' ou 'gemini' a partir da config
  536.  
  537. const apiKey = await getApiKey(service) // Obtém a API key (pede ao usuário se não tiver)
  538. if (!apiKey) { // Aborta se não houver API key
  539. // Mostra erro no overlay se estiver aberto, senão como notificação
  540. const errorMsg = `API key for ${service.toUpperCase()} is required. Click the 'Reset Key' link in the model selection menu (double-click or long-press 'S' button).`
  541. if (document.getElementById(OVERLAY_ID)) {
  542. // Mostra o erro no overlay existente, sem botão de retry para este caso
  543. updateSummaryOverlay(`<p style="color: red;">${errorMsg}</p>`, false)
  544. } else {
  545. // Se o overlay não estava aberto, mostra como notificação
  546. showErrorNotification(errorMsg)
  547. }
  548. return // Interrompe se não houver chave
  549. }
  550.  
  551. // Mostra feedback de loading com o nome do modelo
  552. // Verifica se o overlay já existe (caso seja um retry)
  553. const loadingMessage = `<p class="glow">Summarizing with ${modelDisplayName}... </p>`
  554. if (document.getElementById(OVERLAY_ID)) {
  555. updateSummaryOverlay(loadingMessage) // Atualiza overlay existente
  556. } else {
  557. showSummaryOverlay(loadingMessage) // Cria novo overlay
  558. }
  559.  
  560. // Prepara os dados para a API
  561. const payload = {title: articleData.title, content: articleData.content, lang: navigator.language || 'en-US'}
  562.  
  563. // Passa a configuração do modelo para sendApiRequest
  564. const response = await sendApiRequest(service, apiKey, payload, modelConfig)
  565.  
  566. handleApiResponse(response, service) // Processa a resposta
  567.  
  568. } catch (error) {
  569. // Exibe erros no overlay com botão de Tentar Novamente
  570. const errorMsg = `Error: ${error.message}`
  571. console.error('Summarize with AI:', errorMsg, error) // Loga o erro completo
  572. // Mostra erro no overlay (ou cria um novo se não existir), com botão de retry
  573. showSummaryOverlay(`<p style="color: red;">${errorMsg}</p>`, true)
  574. hideElement(DROPDOWN_ID) // Garante que o dropdown esteja oculto em caso de erro
  575. }
  576. }
  577.  
  578. /**
  579. * Envia a requisição HTTP para a API de IA (OpenAI ou Gemini).
  580. * @param {string} service - 'openai' ou 'gemini'.
  581. * @param {string} apiKey - A chave da API para o serviço.
  582. * @param {object} payload - Objeto com { title, content, lang }.
  583. * @param {object} modelConfig - Configuração do modelo ativo { id, service, name?, params? }.
  584. * @returns {Promise<object>} - A promessa resolve com o objeto de resposta da requisição.
  585. */
  586. async function sendApiRequest(service, apiKey, payload, modelConfig) {
  587. const group = MODEL_GROUPS[service]
  588. const url = service === 'openai'
  589. ? group.baseUrl // URL base da OpenAI
  590. : `${group.baseUrl}${modelConfig.id}:generateContent?key=${apiKey}` // URL Gemini (inclui ID do modelo e key)
  591.  
  592. return new Promise((resolve, reject) => {
  593. GM.xmlHttpRequest({
  594. method: 'POST',
  595. url: url,
  596. headers: getHeaders(service, apiKey), // Cabeçalhos específicos do serviço
  597. // Passa modelConfig para construir o corpo corretamente
  598. data: JSON.stringify(buildRequestBody(service, payload, modelConfig)),
  599. responseType: 'json', // Espera uma resposta JSON
  600. timeout: 60000, // Timeout de 60 segundos
  601. onload: response => {
  602. // GM.xmlHttpRequest pode retornar response.response em vez de responseText para JSON
  603. const responseData = response.response || response.responseText
  604. // Resolve com um objeto contendo status e dados parseados (ou texto original)
  605. resolve({
  606. status: response.status,
  607. // Tenta parsear mesmo que responseType seja json, pois pode falhar
  608. data: typeof responseData === 'object' ? responseData : JSON.parse(responseData || '{}'),
  609. statusText: response.statusText,
  610. })
  611. },
  612. onerror: error => reject(new Error(`Network error: ${error.statusText || 'Failed to connect'}`)),
  613. onabort: () => reject(new Error('Request aborted')),
  614. ontimeout: () => reject(new Error('Request timed out')),
  615. })
  616. })
  617. }
  618.  
  619. /**
  620. * Processa a resposta da API, extrai o sumário, limpa quebras de linha extras e atualiza o overlay.
  621. * @param {object} response - O objeto de resposta resolvido da Promise de `sendApiRequest` (contém status, data).
  622. * @param {string} service - 'openai' ou 'gemini'.
  623. */
  624. function handleApiResponse(response, service) {
  625. const {status, data, statusText} = response
  626.  
  627. // Verifica se o status HTTP indica sucesso (2xx)
  628. if (status < 200 || status >= 300) {
  629. // Tenta extrair uma mensagem de erro mais detalhada do corpo da resposta
  630. const errorDetails = data?.error?.message || data?.message || statusText || 'Unknown API error' // Gemini pode usar 'message' no erro
  631. throw new Error(`API Error (${status}): ${errorDetails}`)
  632. }
  633.  
  634. // Extrai o conteúdo do sumário dependendo do serviço
  635. let rawSummary = ''
  636. if (service === 'openai') {
  637. const choice = data?.choices?.[0]
  638. rawSummary = choice?.message?.content
  639.  
  640. // Loga o motivo pelo qual a geração parou
  641. const finishReason = choice?.finish_reason
  642. console.log(`Summarize with AI: OpenAI Finish Reason: ${finishReason} (Model: ${activeModel})`)
  643. if (finishReason === 'length') {
  644. console.warn('Summarize with AI: Summary may be incomplete because the max token limit was reached.')
  645. }
  646.  
  647. } else if (service === 'gemini') {
  648. const candidate = data?.candidates?.[0]
  649. const finishReason = candidate?.finishReason
  650. console.log(`Summarize with AI: Gemini Finish Reason: ${finishReason} (Model: ${activeModel})`)
  651.  
  652. if (finishReason === 'SAFETY') {
  653. const safetyRatings = candidate.safetyRatings?.map(r => `${r.category}: ${r.probability}`).join(', ')
  654. throw new Error(`Content blocked due to safety concerns (${safetyRatings || 'No details'}).`)
  655. }
  656. if (finishReason === 'MAX_TOKENS') {
  657. console.warn('Summarize with AI: Summary may be incomplete because the max token limit was reached.')
  658. }
  659.  
  660. // Verificação robusta: garante que parts existe e tem conteúdo
  661. if (candidate?.content?.parts?.length > 0 && candidate.content.parts[0].text) {
  662. rawSummary = candidate.content.parts[0].text
  663. } else if (finishReason && !['STOP', 'SAFETY', 'MAX_TOKENS'].includes(finishReason)) {
  664. // Loga aviso se motivo de finalização não for comum e não houver texto
  665. console.warn(`Summarize with AI: Gemini response structure missing expected text content or unusual finish reason: ${finishReason}`, candidate)
  666. } else if (!rawSummary && !data?.error) {
  667. console.warn('Summarize with AI: Gemini response structure missing expected text content.', candidate)
  668. }
  669. // Se rawSummary ainda estiver vazio aqui, o erro "did not contain valid summary" será lançado abaixo
  670. }
  671.  
  672. // Verifica se o sumário foi realmente obtido
  673. if (!rawSummary && !data?.error) { // Adicionada verificação !data?.error para não sobrescrever erros de API
  674. console.error('Summarize with AI: API Response Data:', data) // Loga a resposta para depuração
  675. throw new Error('API response did not contain a valid summary.')
  676. }
  677.  
  678. // Limpa quebras de linha (\n) que não fazem parte de tags HTML (substitui por espaço)
  679. // e comprime múltiplos espaços em um único espaço.
  680. // Isso ajuda a evitar espaçamento duplo estranho se a API retornar \n desnecessários.
  681. const cleanedSummary = rawSummary.replace(/\n/g, ' ').replace(/ {2,}/g, ' ').trim()
  682.  
  683. // Atualiza o overlay com o sumário limpo, sem botão de retry
  684. updateSummaryOverlay(cleanedSummary, false)
  685. }
  686.  
  687. /**
  688. * Constrói o corpo (payload) da requisição para a API (OpenAI ou Gemini).
  689. * Usa parâmetros definidos no modelConfig ou os padrões do serviço.
  690. * @param {string} service - 'openai' ou 'gemini'.
  691. * @param {object} payload - Objeto com { title, content, lang }.
  692. * @param {object} modelConfig - Configuração do modelo ativo { id, service, name?, params? }.
  693. * @returns {object} - O objeto do corpo da requisição.
  694. */
  695. function buildRequestBody(service, {title, content, lang}, modelConfig) {
  696. const systemPrompt = PROMPT_TEMPLATE(title, content, lang) // Gera o prompt principal
  697. const serviceDefaults = MODEL_GROUPS[service]?.defaultParams || {}
  698. const modelSpecificParams = modelConfig?.params || {}
  699.  
  700. if (service === 'openai') {
  701. // Mescla parâmetros padrão e específicos do modelo
  702. const finalParams = {...serviceDefaults, ...modelSpecificParams}
  703.  
  704. return {
  705. model: modelConfig.id, // Usa o ID do modelo da config
  706. messages: [
  707. {role: 'system', content: systemPrompt},
  708. {role: 'user', content: 'Generate the summary as requested.'},
  709. ],
  710. // Inclui parâmetros mesclados (ex: max_completion_tokens)
  711. ...finalParams
  712. // 'temperature' não está definido, usará o padrão da API ou o definido em params
  713. }
  714. } else { // gemini
  715. // Mescla parâmetros padrão e específicos do modelo para generationConfig
  716. const finalGenConfigParams = {...serviceDefaults, ...modelSpecificParams}
  717.  
  718. return {
  719. contents: [{
  720. parts: [{text: systemPrompt}], // Estrutura do Gemini
  721. }],
  722. // Inclui generationConfig com parâmetros mesclados
  723. generationConfig: finalGenConfigParams
  724. // 'temperature' não está definido, usará o padrão da API ou o definido em params
  725. }
  726. }
  727. }
  728.  
  729. /**
  730. * Retorna os cabeçalhos HTTP apropriados para a API.
  731. * @param {string} service - 'openai' ou 'gemini'.
  732. * @param {string} apiKey - A chave da API.
  733. * @returns {object} - O objeto de cabeçalhos.
  734. */
  735. function getHeaders(service, apiKey) {
  736. const headers = {'Content-Type': 'application/json'}
  737. if (service === 'openai') {
  738. headers['Authorization'] = `Bearer ${apiKey}` // OpenAI usa Bearer token
  739. }
  740. // Gemini usa a chave na URL, não no cabeçalho
  741. return headers
  742. }
  743.  
  744. /**
  745. * Obtém a chave da API para o serviço especificado a partir do armazenamento (GM.getValue).
  746. * Se não existir, retorna null (a verificação e mensagem de erro ocorrem em processSummarization).
  747. * @param {string} service - 'openai' ou 'gemini'.
  748. * @returns {Promise<string|null>} - A chave da API ou null se não for encontrada.
  749. */
  750. async function getApiKey(service) {
  751. const storageKey = `${service}_api_key`
  752. let apiKey = await GM.getValue(storageKey)
  753. // Retorna a chave encontrada ou null se não existir/vazia
  754. return apiKey?.trim() || null
  755. }
  756.  
  757. /**
  758. * Permite ao usuário resetar (redefinir) a chave da API para um serviço específico via prompt.
  759. * Ativado pelo link 'Reset Key' no dropdown.
  760. * @param {string} service - O serviço ('openai' ou 'gemini') para o qual resetar a chave.
  761. */
  762. async function handleApiKeyReset(service) {
  763. if (!service || !MODEL_GROUPS[service]) {
  764. console.error("Invalid service provided for API key reset:", service)
  765. alert("Internal error: Invalid service provided.")
  766. return
  767. }
  768.  
  769. const storageKey = `${service}_api_key`
  770. const newKey = prompt(`Enter the new ${service.toUpperCase()} API key (leave blank to clear):`)
  771.  
  772. if (newKey !== null) { // Verifica se o usuário não cancelou (clicou em OK ou deixou em branco)
  773. const keyToSave = newKey.trim()
  774. await GM.setValue(storageKey, keyToSave)
  775. if (keyToSave) {
  776. alert(`${service.toUpperCase()} API key updated!`)
  777. } else {
  778. alert(`${service.toUpperCase()} API key cleared!`)
  779. }
  780. // Opcional: Repopular dropdown para refletir alguma mudança visual se necessário
  781. // const dropdown = document.getElementById(DROPDOWN_ID)
  782. // if (dropdown && dropdown.style.display !== 'none') {
  783. // populateDropdown(dropdown)
  784. // }
  785. }
  786. // Se newKey for null (usuário clicou Cancelar), não faz nada.
  787. }
  788.  
  789. /**
  790. * Gerencia o fluxo para adicionar um novo modelo customizado.
  791. * Pede ao usuário o serviço e o ID do modelo via prompts.
  792. * Salva no formato { id, service }.
  793. */
  794. async function handleAddModel() {
  795. // 1. Pergunta o serviço (OpenAI ou Gemini)
  796. const service = prompt('Enter the service for the custom model (openai / gemini):')?.toLowerCase()?.trim()
  797. if (!service || !MODEL_GROUPS[service]) {
  798. if (service !== null) alert('Invalid service. Please enter "openai" or "gemini".')
  799. return // Cancela se inválido ou se o usuário cancelar
  800. }
  801.  
  802. // 2. Pergunta o nome exato (ID) do modelo
  803. const modelId = prompt(`Enter the exact ID of the ${service.toUpperCase()} model:`)?.trim()
  804. if (!modelId) {
  805. if (modelId !== null) alert('Model ID cannot be empty.')
  806. return // Cancela se vazio ou se o usuário cancelar
  807. }
  808.  
  809. // 3. Adiciona o modelo e salva
  810. await addCustomModel(service, modelId)
  811. // Opcional: reabrir dropdown após adicionar? Por ora, não.
  812. }
  813.  
  814. /**
  815. * Adiciona um novo modelo customizado à lista e salva no GM storage.
  816. * Atualiza a variável global `customModels`. Salva como { id, service }.
  817. * @param {string} service - 'openai' ou 'gemini'.
  818. * @param {string} modelId - O ID exato do modelo.
  819. */
  820. async function addCustomModel(service, modelId) {
  821. // Verifica se o ID do modelo já existe para este serviço (case-insensitive)
  822. const exists = customModels.some(m => m.service === service && m.id.toLowerCase() === modelId.toLowerCase()) ||
  823. MODEL_GROUPS[service]?.models.some(m => m.id.toLowerCase() === modelId.toLowerCase()) // Verifica também nos padrões
  824.  
  825. if (exists) {
  826. alert(`Model ID "${modelId}" already exists for ${service.toUpperCase()}.`)
  827. return
  828. }
  829.  
  830. // Adiciona o novo modelo à lista na memória
  831. customModels.push({id: modelId, service}) // Salva no formato { id, service }
  832. // Salva a lista atualizada no storage
  833. await GM.setValue(CUSTOM_MODELS_KEY, JSON.stringify(customModels))
  834. alert(`Custom model "${modelId}" (${service.toUpperCase()}) added!`)
  835. }
  836.  
  837. /**
  838. * Carrega a lista de modelos customizados salvos no GM storage.
  839. * Espera o formato [{ id, service }, ...].
  840. * @returns {Promise<Array<object>>} - Uma promessa que resolve com o array de modelos customizados.
  841. */
  842. async function getCustomModels() {
  843. try {
  844. const storedModels = await GM.getValue(CUSTOM_MODELS_KEY, '[]') // Obtém a string JSON, default '[]'
  845. const parsedModels = JSON.parse(storedModels)
  846. // Validação simples para garantir que é um array de objetos com id e service
  847. if (Array.isArray(parsedModels) && parsedModels.every(m => typeof m === 'object' && m.id && m.service)) {
  848. return parsedModels
  849. } else {
  850. console.warn("Summarize with AI: Invalid custom model format found in storage. Resetting.", parsedModels)
  851. await GM.setValue(CUSTOM_MODELS_KEY, '[]') // Reseta se formato inválido
  852. return []
  853. }
  854. } catch (error) {
  855. console.error('Summarize with AI: Failed to load/parse custom models:', error)
  856. // Em caso de erro de parse, retorna um array vazio e tenta limpar o storage
  857. await GM.setValue(CUSTOM_MODELS_KEY, '[]') // Reseta para um array vazio
  858. return []
  859. }
  860. }
  861.  
  862. // --- Funções de Eventos e Utilidades ---
  863.  
  864. /**
  865. * Manipulador para o atalho de teclado (Alt+S) e tecla Esc.
  866. * Alt+S: Simula clique no botão 'S' (inicia sumarização).
  867. * Esc: Fecha o overlay ou o dropdown.
  868. * @param {KeyboardEvent} e - O objeto do evento de teclado.
  869. */
  870. function handleKeyPress(e) {
  871. // Atalho Alt+S para iniciar sumarização (simula clique simples)
  872. if (e.altKey && e.code === 'KeyS') {
  873. e.preventDefault()
  874. const button = document.getElementById(BUTTON_ID)
  875. if (button) {
  876. // Chama a função principal de sumarização
  877. processSummarization()
  878. }
  879. }
  880. // Tecla Esc para fechar overlay ou dropdown
  881. if (e.key === 'Escape') {
  882. if (document.getElementById(OVERLAY_ID)) { // Prioriza fechar o overlay
  883. closeOverlay()
  884. } else if (document.getElementById(DROPDOWN_ID)?.style.display !== 'none') { // Fecha o dropdown se aberto
  885. hideElement(DROPDOWN_ID)
  886. }
  887. }
  888. }
  889.  
  890. /**
  891. * Configura listeners para esconder/mostrar o botão 'S' com base no foco em inputs.
  892. */
  893. function setupFocusListeners() {
  894. // Esconde o botão quando um campo editável ganha foco
  895. document.addEventListener('focusin', (event) => {
  896. if (event.target?.closest('input, textarea, select, [contenteditable="true"]')) {
  897. hideElement(BUTTON_ID)
  898. hideElement(DROPDOWN_ID) // Esconde dropdown também
  899. }
  900. })
  901.  
  902. // Mostra o botão quando o foco sai de um campo editável (clicando fora)
  903. document.addEventListener('focusout', (event) => {
  904. // Verifica se o elemento que perdeu o foco é um campo editável
  905. // e se o novo elemento focado (relatedTarget) NÃO é um campo editável
  906. const isLeavingInput = event.target?.closest('input, textarea, select, [contenteditable="true"]')
  907. const isEnteringInput = event.relatedTarget?.closest('input, textarea, select, [contenteditable="true"]')
  908.  
  909. // Só mostra o botão se estiver saindo de um input e não entrando em outro,
  910. // e se o artigo foi detectado.
  911. if (isLeavingInput && !isEnteringInput && articleData) {
  912. // Pequeno delay para evitar piscar se o foco mudar rapidamente entre inputs
  913. setTimeout(() => {
  914. // Reconfirma se o foco atual não é um input antes de mostrar
  915. if (!document.activeElement?.closest('input, textarea, select, [contenteditable="true"]')) {
  916. showElement(BUTTON_ID)
  917. }
  918. }, 50) // Delay de 50ms
  919. }
  920. }, true) // Usa captura para garantir que o evento seja pego
  921. }
  922.  
  923. /**
  924. * Injeta os estilos CSS necessários para a interface do script.
  925. */
  926. function injectStyles() {
  927. // Estilos CSS com adições para cores de qualidade e dark mode
  928. GM.addStyle(`
  929. /* --- Elementos Principais da UI --- */
  930. #${BUTTON_ID} {
  931. position: fixed; bottom: 20px; right: 20px;
  932. width: 50px; height: 50px; /* Tamanho */
  933. background: linear-gradient(145deg, #3a7bd5, #00d2ff); /* Gradiente azul */
  934. color: white; font-size: 24px; /* Texto */
  935. font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  936. border-radius: 50%; cursor: pointer; z-index: 2147483640;
  937. box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  938. display: flex !important; align-items: center !important; justify-content: center !important; /* Centraliza 'S' */
  939. transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
  940. line-height: 1; user-select: none; /* Previne seleção */
  941. }
  942. #${BUTTON_ID}:hover {
  943. transform: scale(1.1); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
  944. }
  945. #${DROPDOWN_ID} {
  946. position: fixed; bottom: 80px; right: 20px; /* Acima do botão */
  947. background: #ffffff; border: 1px solid #e0e0e0; border-radius: 10px;
  948. box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15); z-index: 2147483641; /* Acima do botão */
  949. max-height: 70vh; overflow-y: auto; /* Scroll */
  950. padding: 8px; width: 300px; /* Dimensões */
  951. font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  952. display: none; /* Começa oculto */
  953. animation: fadeIn 0.2s ease-out; /* Animação */
  954. }
  955. #${OVERLAY_ID} {
  956. position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  957. background-color: rgba(0, 0, 0, 0.6); /* Fundo semi-transparente (padrão light) */
  958. z-index: 2147483645; /* Muito alto */
  959. display: flex; align-items: center; justify-content: center;
  960. overflow: hidden; /* Impede scroll do body */
  961. font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  962. animation: fadeIn 0.3s ease-out;
  963. }
  964. #${CONTENT_ID} {
  965. background-color: #fff; /* Fundo branco (padrão light) */
  966. color: #333; /* Texto escuro (padrão light) */
  967. padding: 25px 35px; border-radius: 12px;
  968. box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  969. max-width: 800px; width: 90%; max-height: 85vh; /* Dimensões */
  970. overflow-y: auto; /* Scroll interno */
  971. position: relative; font-size: 16px; line-height: 1.6;
  972. animation: slideInUp 0.3s ease-out; /* Animação */
  973. white-space: normal; /* Permite quebra de linha HTML */
  974. }
  975. #${CONTENT_ID} p { margin-top: 0; margin-bottom: 1em; } /* Margem padrão para parágrafos */
  976. #${CONTENT_ID} ul { margin: 1em 0; padding-left: 1.5em; } /* Adiciona padding para bullet points */
  977. #${CONTENT_ID} li { list-style-type: none; margin-bottom: 0.5em; } /* Remove marcador padrão (usa emoji) */
  978. #${CLOSE_BUTTON_ID} {
  979. position: absolute; top: 10px; right: 15px;
  980. font-size: 28px; color: #aaa; /* Cinza claro (padrão light) */
  981. cursor: pointer;
  982. transition: color 0.2s; line-height: 1; z-index: 1; /* Garante que fique acima do conteúdo */
  983. }
  984. #${CLOSE_BUTTON_ID}:hover { color: #333; } /* Mais escuro no hover (light) */
  985. #${ERROR_ID} {
  986. position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); /* Centralizado */
  987. background-color: #e53e3e; color: white; padding: 12px 20px;
  988. border-radius: 6px; z-index: 2147483646; /* Acima de tudo */
  989. font-size: 14px; box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  990. font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  991. animation: fadeIn 0.3s, fadeOut 0.3s 3.7s forwards; /* Fade in e out */
  992. }
  993. .retry-button { /* Estilo para o botão Tentar Novamente */
  994. display: block; margin: 20px auto 0; padding: 8px 16px;
  995. background-color: #4a90e2; /* Azul (padrão light) */
  996. color: white; border: none; border-radius: 5px;
  997. cursor: pointer; font-size: 14px; transition: background-color 0.2s;
  998. }
  999. .retry-button:hover { background-color: #3a7bd5; } /* Azul mais escuro no hover (light) */
  1000.  
  1001. /* --- Estilos do Dropdown --- */
  1002. .model-group { margin-bottom: 8px; }
  1003. .group-header-container { /* Container para header e link reset */
  1004. display: flex; align-items: center; justify-content: space-between;
  1005. padding: 8px 12px; background: #f7f7f7;
  1006. border-radius: 6px; margin-bottom: 4px;
  1007. }
  1008. .group-header-text { /* Texto do header */
  1009. font-weight: 600; color: #333; font-size: 13px;
  1010. text-transform: uppercase; letter-spacing: 0.5px;
  1011. flex-grow: 1; /* Ocupa espaço disponível */
  1012. }
  1013. .reset-key-link { /* Link de reset */
  1014. font-size: 11px; color: #666; text-decoration: none;
  1015. margin-left: 10px; /* Espaçamento */
  1016. white-space: nowrap; /* Não quebrar linha */
  1017. cursor: pointer;
  1018. transition: color 0.2s;
  1019. }
  1020. .reset-key-link:hover { color: #1a73e8; }
  1021. .model-item {
  1022. padding: 10px 14px; margin: 2px 0; border-radius: 6px;
  1023. transition: background-color 0.15s ease-out, color 0.15s ease-out;
  1024. font-size: 14px; cursor: pointer; color: #444; display: block;
  1025. overflow: hidden; text-overflow: ellipsis; white-space: nowrap; /* Evita quebra de linha em nomes longos */
  1026. }
  1027. .model-item:hover { background-color: #eef6ff; color: #1a73e8; }
  1028. .add-model-item { /* Estilo específico para o item de adicionar modelo */
  1029. color: #666;
  1030. font-style: italic;
  1031. }
  1032. .add-model-item:hover { background-color: #f0f0f0; color: #333; }
  1033.  
  1034. /* --- Estilos de Conteúdo (Glow, Qualidade) --- */
  1035. .glow { /* Estilo para "Summarizing with [Model]..." / "Retrying with [Model]..." */
  1036. font-size: 1.4em; text-align: center; padding: 40px 0;
  1037. /* Aplica a animação 'glow' com ciclo infinito e duração de 2.5s */
  1038. animation: glow 2.5s ease-in-out infinite;
  1039. font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  1040. font-weight: 400;
  1041. }
  1042. /* Cores para as classes de qualidade do artigo */
  1043. span.article-excellent { color: #2ecc71; font-weight: bold; } /* Verde brilhante */
  1044. span.article-good { color: #3498db; font-weight: bold; } /* Azul */
  1045. span.article-average { color: #f39c12; font-weight: bold; } /* Laranja */
  1046. span.article-bad { color: #e74c3c; font-weight: bold; } /* Vermelho */
  1047. span.article-very-bad { color: #c0392b; font-weight: bold; } /* Vermelho escuro */
  1048.  
  1049. /* --- Animações --- */
  1050. /* Define os keyframes para a animação 'glow' ciclando entre azul, roxo e vermelho */
  1051. @keyframes glow {
  1052. 0%, 100% { /* Início e Fim: Azul */
  1053. color: #4a90e2;
  1054. text-shadow: 0 0 10px rgba(74, 144, 226, 0.6),
  1055. 0 0 20px rgba(74, 144, 226, 0.4);
  1056. }
  1057. 33% { /* Ponto intermediário 1: Roxo */
  1058. color: #9b59b6; /* Tom de roxo */
  1059. text-shadow: 0 0 12px rgba(155, 89, 182, 0.7), /* Sombra roxa */
  1060. 0 0 25px rgba(155, 89, 182, 0.5);
  1061. }
  1062. 66% { /* Ponto intermediário 2: Vermelho */
  1063. color: #e74c3c; /* Tom de vermelho */
  1064. text-shadow: 0 0 12px rgba(231, 76, 60, 0.7), /* Sombra vermelha */
  1065. 0 0 25px rgba(231, 76, 60, 0.5);
  1066. }
  1067. }
  1068. @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
  1069. @keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }
  1070. @keyframes slideInUp {
  1071. from { transform: translateY(30px); opacity: 0; }
  1072. to { transform: translateY(0); opacity: 1; }
  1073. }
  1074.  
  1075. /* --- Dark Mode Override (Adaptação automática ao tema escuro do sistema) --- */
  1076. @media (prefers-color-scheme: dark) {
  1077. /* Fundo do overlay mais escuro */
  1078. #${OVERLAY_ID} {
  1079. background-color: rgba(20, 20, 20, 0.7); /* Fundo mais opaco e escuro */
  1080. }
  1081. /* Conteúdo do sumário com fundo escuro e texto claro */
  1082. #${CONTENT_ID} {
  1083. background-color: #2c2c2c; /* Cinza bem escuro */
  1084. color: #e0e0e0; /* Texto cinza claro */
  1085. box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4); /* Sombra um pouco mais visível */
  1086. }
  1087. /* Botão de fechar com cores invertidas */
  1088. #${CLOSE_BUTTON_ID} {
  1089. color: #888; /* Cinza médio */
  1090. }
  1091. #${CLOSE_BUTTON_ID}:hover {
  1092. color: #eee; /* Quase branco no hover */
  1093. }
  1094. /* Botão Tentar Novamente com estilo adaptado */
  1095. .retry-button {
  1096. background-color: #555; /* Cinza médio */
  1097. color: #eee; /* Texto claro */
  1098. }
  1099. .retry-button:hover {
  1100. background-color: #666; /* Cinza um pouco mais claro no hover */
  1101. }
  1102. /* Dropdown também pode ter fundo escuro (opcional, mantendo legibilidade) */
  1103. #${DROPDOWN_ID} {
  1104. background: #333; /* Fundo escuro para dropdown */
  1105. border-color: #555; /* Borda mais escura */
  1106. }
  1107. .model-item {
  1108. color: #ccc; /* Texto do item mais claro */
  1109. }
  1110. .model-item:hover {
  1111. background-color: #444; /* Fundo de hover mais escuro */
  1112. color: #fff; /* Texto branco no hover */
  1113. }
  1114. .group-header-container {
  1115. background: #444; /* Fundo do cabeçalho do grupo */
  1116. }
  1117. .group-header-text {
  1118. color: #eee; /* Texto do cabeçalho claro */
  1119. }
  1120. .reset-key-link {
  1121. color: #aaa; /* Link de reset mais claro */
  1122. }
  1123. .reset-key-link:hover {
  1124. color: #fff; /* Link de reset branco no hover */
  1125. }
  1126. .add-model-item {
  1127. color: #999; /* Item de adicionar mais claro */
  1128. }
  1129. .add-model-item:hover {
  1130. background-color: #4a4a4a; /* Fundo de hover */
  1131. color: #eee; /* Texto claro no hover */
  1132. }
  1133. hr {
  1134. border-top-color: #555 !important; /* Separador mais escuro */
  1135. }
  1136. /* Ajuste de cor para o brilho no modo escuro se necessário (opcional) */
  1137. /* As cores atuais do glow parecem funcionar bem, mas podem ser ajustadas aqui */
  1138. /* @keyframes glow-dark { ... } */
  1139. /* .glow { animation-name: glow-dark; } */
  1140. }
  1141. `)
  1142. }
  1143.  
  1144. // --- Inicialização ---
  1145. initialize() // Chama a função principal para iniciar o script
  1146.  
  1147. })()