// ==UserScript==
// @name Summarize with AI
// @namespace https://github.com/insign/userscripts
// @version 2025.05.04.1546
// @description Single-button AI summarization (OpenAI/Gemini) with model selection dropdown for articles/news. Uses Alt+S shortcut. Long press 'S' (or tap-and-hold on mobile) to select model. Allows adding custom models. Adapts summary overlay to system dark mode and mobile viewports.
// @author Hélio <[email protected]>
// @license WTFPL
// @match *://*/*
// @grant GM.addStyle
// @grant GM.xmlHttpRequest
// @grant GM.setValue
// @grant GM.getValue
// @connect api.openai.com
// @connect generativelanguage.googleapis.com
// @require https://cdnjs.cloudflare.com/ajax/libs/readability/0.6.0/Readability.min.js
// @require https://cdnjs.cloudflare.com/ajax/libs/readability/0.6.0/Readability-readerable.min.js
// ==/UserScript==
(function () {
'use strict'
// --- Constantes ---
// IDs dos elementos da interface do script
const BUTTON_ID = 'summarize-button' // Botão principal flutuante 'S'
const DROPDOWN_ID = 'model-dropdown' // Dropdown de seleção de modelo
const OVERLAY_ID = 'summarize-overlay' // Overlay de fundo para o sumário
const CLOSE_BUTTON_ID = 'summarize-close' // Botão de fechar no overlay
const CONTENT_ID = 'summarize-content' // Div que contém o texto do sumário
const ERROR_ID = 'summarize-error' // Div para exibir notificações de erro
const ADD_MODEL_ITEM_ID = 'add-custom-model' // ID para o item "Adicionar Modelo" no dropdown
const RETRY_BUTTON_ID = 'summarize-retry-button' // ID para o botão "Tentar Novamente" no overlay de erro
// Chave para armazenar modelos customizados no GM storage
const CUSTOM_MODELS_KEY = 'custom_ai_models'
// Limite de tokens padrão
const DEFAULT_MAX_TOKENS = 1000
// Limite de tokens alto (para modelos específicos)
const HIGH_MAX_TOKENS = 1500
// Tempo para considerar long press (em milissegundos)
const LONG_PRESS_DURATION = 500
// Configuração dos serviços e modelos de IA *padrão* suportados
// Estrutura: models é um array de objetos com id, name (opcional), params (opcional)
const MODEL_GROUPS = {
openai: {
name: 'OpenAI',
baseUrl: 'https://api.openai.com/v1/chat/completions',
models: [
{id: 'o4-mini', name: 'o4 mini (better)', params: {max_completion_tokens: HIGH_MAX_TOKENS}},
{id: 'o3-mini', name: 'o3 mini', params: {max_completion_tokens: HIGH_MAX_TOKENS}},
{id: 'gpt-4.1', name: 'GPT-4.1'}, // Usa params padrão (DEFAULT_MAX_TOKENS)
{id: 'gpt-4.1-mini', name: 'GPT-4.1 mini'}, // Usa params padrão
{id: 'gpt-4.1-nano', name: 'GPT-4.1 nano (faster)'}, // Usa params padrão
],
// Parâmetros padrão específicos para OpenAI (se não definidos no modelo)
defaultParams: {max_completion_tokens: DEFAULT_MAX_TOKENS}
},
gemini: {
name: 'Gemini',
baseUrl: 'https://generativelanguage.googleapis.com/v1beta/models/',
models: [
{id: 'gemini-2.5-flash-preview-04-17',
name: 'Gemini 2.5 Flash (faster)',
params: {maxOutputTokens: HIGH_MAX_TOKENS}
},
{id: 'gemini-2.5-pro-exp-03-25', name: 'Gemini 2.5 Pro (better)', params: {maxOutputTokens: HIGH_MAX_TOKENS}},
],
// Parâmetros padrão específicos para Gemini (se não definidos no modelo)
defaultParams: {maxOutputTokens: DEFAULT_MAX_TOKENS} // Mantemos o padrão original aqui
},
}
// Template do prompt enviado para a IA
// Instruções atualizadas para usar as classes CSS específicas de qualidade
const PROMPT_TEMPLATE = (title, content, lang) => `You are a summarizer bot that provides clear and affirmative explanations of content.
Generate a concise summary that includes:
- 2-sentence introduction
- Relevant emojis as bullet points
- No section headers
- Use HTML formatting, never use \`\`\` code blocks, never use markdown.
- 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.
- User language to be used in the entire summary: ${lang}
- 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.
- For the quality class use:
<span class=article-excellent>9/10</span> (or 10)
<span class=article-good>8/10</span>
<span class=article-average>7/10</span>
<span class=article-bad>6/10</span>
<span class=article-very-bad>5/10</span> (or less)
- "Opinion:", "Article Quality:" should be in user language, e.g. "Opinião:", "Qualidade do artigo:" for Português.
Article Title: ${title}
Article Content: ${content}`
// --- Variáveis de Estado ---
let activeModel = 'gemini-2.5-flash-preview-04-17' // ID do modelo ativo selecionado por padrão ou pelo usuário
let articleData = null // Armazena o título e conteúdo extraído do artigo { title, content }
let customModels = [] // Array para armazenar modelos customizados carregados do storage { id, service }
let longPressTimer = null // Timer para detectar long press (ou tap-and-hold) no botão 'S'
let isLongPress = false // Flag para indicar se ocorreu long press/tap-and-hold
// --- Funções Principais ---
/**
* Função principal de inicialização do script.
* Carrega modelos customizados, adiciona listener de teclado,
* tenta extrair dados do artigo, e se bem-sucedido, adiciona o botão e listeners de foco.
*/
async function initialize() {
customModels = await getCustomModels() // Carrega modelos customizados do storage
document.addEventListener('keydown', handleKeyPress) // Listener para atalhos (Alt+S, Esc)
articleData = getArticleData() // Tenta extrair o conteúdo do artigo
if (articleData) { // Se encontrou conteúdo legível:
addSummarizeButton() // Adiciona o botão flutuante e o dropdown
showElement(BUTTON_ID) // Torna o botão visível
setupFocusListeners() // Configura para esconder/mostrar botão em campos de input
// Define o último modelo usado (ou padrão) como ativo
activeModel = await GM.getValue('last_used_model', activeModel)
}
}
/**
* Tenta extrair o conteúdo principal da página usando a biblioteca Readability.js.
* @returns {object|null} - Um objeto { title, content } se bem-sucedido, ou null se não for legível ou ocorrer erro.
*/
function getArticleData() {
try {
const docClone = document.cloneNode(true) // Clona o documento para não modificar o original
// Remove elementos que podem interferir com a extração (scripts, estilos, imagens, etc.)
docClone.querySelectorAll('script, style, noscript, iframe, figure, img, svg, header, footer, nav').forEach(el => el.remove())
// Verifica se a página é provavelmente legível usando a heurística da biblioteca
if (!isProbablyReaderable(docClone)) {
console.log('Summarize with AI: Page not detected as readerable.')
return null // Retorna nulo se não parecer um artigo
}
const reader = new Readability(docClone) // Instancia o Readability
const article = reader.parse() // Tenta extrair o conteúdo principal
// Retorna dados se o conteúdo foi extraído e não está vazio/apenas espaços
return (article?.content && article.textContent?.trim())
? {title: article.title, content: article.textContent.trim()} // Retorna título e texto limpo
: null // Retorna nulo se não conseguiu extrair conteúdo de texto
} catch (error) {
console.error('Summarize with AI: Article parsing failed:', error)
return null // Retorna null em caso de erro na extração
}
}
/**
* Adiciona o botão flutuante 'S' e o dropdown de seleção de modelo ao DOM.
* Configura os event listeners do botão (click, long press, touch) e injeta estilos.
*/
function addSummarizeButton() {
// Evita adicionar o botão múltiplas vezes se o script for executado novamente por algum motivo
if (document.getElementById(BUTTON_ID)) return
// Cria o botão 'S'
const button = document.createElement('div')
button.id = BUTTON_ID
button.textContent = 'S' // Texto simples e pequeno 'S'
button.title = 'Summarize (Alt+S) / Long Press or Tap & Hold to Select Model' // Tooltip atualizado
document.body.appendChild(button)
// Cria o dropdown (inicialmente oculto)
const dropdown = createDropdownElement() // Cria o elemento base do dropdown
document.body.appendChild(dropdown)
populateDropdown(dropdown) // Preenche o dropdown com os modelos disponíveis
// Listener para clique simples (ou tap): Inicia a sumarização com o modelo ativo
button.addEventListener('click', () => {
// Só executa a sumarização se *não* foi um long press/tap-and-hold que abriu o menu
if (!isLongPress) {
processSummarization() // Chama a função principal de sumarização
}
// Reseta a flag de long press para o próximo clique/toque
isLongPress = false
})
// ---- Lógica para Long Press (Mouse) e Tap & Hold (Touch) ----
// Função para iniciar o timer de long press/tap-and-hold
const startLongPressTimer = (event) => {
isLongPress = false // Reseta a flag
clearTimeout(longPressTimer) // Limpa timer anterior, se houver
longPressTimer = setTimeout(() => {
isLongPress = true // Marca que ocorreu long press/tap-and-hold
toggleDropdown(event) // Abre/fecha o dropdown
}, LONG_PRESS_DURATION)
}
// Função para cancelar o timer
const cancelLongPressTimer = () => {
clearTimeout(longPressTimer)
}
// Listeners de Mouse
button.addEventListener('mousedown', startLongPressTimer)
button.addEventListener('mouseup', cancelLongPressTimer)
button.addEventListener('mouseleave', cancelLongPressTimer) // Cancela se o mouse sair
// Listeners de Touch (para dispositivos móveis)
button.addEventListener('touchstart', startLongPressTimer, {passive: true}) // Inicia o timer ao tocar
button.addEventListener('touchend', cancelLongPressTimer) // Cancela ao soltar o dedo
button.addEventListener('touchmove', cancelLongPressTimer) // Cancela se o dedo mover (evita abrir menu ao rolar)
button.addEventListener('touchcancel', cancelLongPressTimer) // Cancela se o toque for interrompido
// -------------------------------------------------------------
// Listener global para clique fora do dropdown para fechá-lo
document.addEventListener('click', handleOutsideClick)
// Injeta os estilos CSS necessários para a interface (botão, dropdown, overlay)
injectStyles()
}
// --- Funções de UI (Dropdown, Overlay, Notificações) ---
/**
* Cria o elemento base (container) do dropdown.
* @returns {HTMLElement} - O elemento div do dropdown, inicialmente vazio e oculto.
*/
function createDropdownElement() {
const dropdown = document.createElement('div')
dropdown.id = DROPDOWN_ID
dropdown.style.display = 'none' // Começa oculto por padrão
return dropdown
}
/**
* Preenche o elemento dropdown com os grupos de modelos (padrão e customizados)
* e a opção para adicionar novos modelos. Adiciona links de reset de API Key.
* @param {HTMLElement} dropdownElement - O elemento do dropdown a ser preenchido.
*/
function populateDropdown(dropdownElement) {
dropdownElement.innerHTML = '' // Limpa conteúdo anterior para reconstruir
// Itera sobre cada grupo de serviço (OpenAI, Gemini) definido em MODEL_GROUPS
Object.entries(MODEL_GROUPS).forEach(([service, group]) => {
// Combina modelos padrão e customizados para este serviço específico
const standardModels = group.models || [] // Modelos padrão do grupo
const serviceCustomModels = customModels
.filter(m => m.service === service) // Filtra modelos customizados pelo serviço atual
.map(m => ({id: m.id})) // Mapeia para o formato {id}, pois customizados não têm 'name' ou 'params' definidos aqui
// Combina as listas e remove duplicatas baseadas no ID (ignorando maiúsculas/minúsculas)
const allModelObjects = [...standardModels, ...serviceCustomModels]
.reduce((acc, model) => {
// Adiciona o modelo ao acumulador 'acc' apenas se um modelo com o mesmo ID (case-insensitive) ainda não existir
if (!acc.some(existing => existing.id.toLowerCase() === model.id.toLowerCase())) {
acc.push(model)
}
return acc
}, [])
.sort((a, b) => a.id.localeCompare(b.id)) // Ordena os modelos alfabeticamente pelo ID
// Se houver modelos para este serviço após a combinação e filtragem
if (allModelObjects.length > 0) {
const groupDiv = document.createElement('div') // Cria um container para o grupo
groupDiv.className = 'model-group' // Classe para estilização
// Cria o cabeçalho do grupo (Nome do Serviço + Link de Reset Key)
groupDiv.appendChild(createHeader(group.name, service))
// Adiciona cada item de modelo ao container do grupo
allModelObjects.forEach(modelObj => groupDiv.appendChild(createModelItem(modelObj)))
dropdownElement.appendChild(groupDiv) // Adiciona o grupo completo ao dropdown
}
})
// Adiciona um separador visual antes do item "+ Adicionar"
const separator = document.createElement('hr')
separator.style.margin = '8px 0'
separator.style.border = 'none'
separator.style.borderTop = '1px solid #eee' // Linha cinza clara
dropdownElement.appendChild(separator)
// Adiciona o item "+ Adicionar Modelo Customizado" ao final do dropdown
dropdownElement.appendChild(createAddModelItem())
}
/**
* Cria um elemento de cabeçalho para um grupo de modelos no dropdown,
* incluindo o nome do serviço e um link funcional para resetar a API Key associada.
* @param {string} text - O texto do cabeçalho (nome do serviço, ex: "OpenAI").
* @param {string} service - A chave do serviço ('openai' ou 'gemini').
* @returns {HTMLElement} - O elemento div do cabeçalho completo.
*/
function createHeader(text, service) {
// Container principal para alinhar o texto e o link usando flexbox
const headerContainer = document.createElement('div')
headerContainer.className = 'group-header-container'
// Span para exibir o nome do serviço
const headerText = document.createElement('span')
headerText.className = 'group-header-text'
headerText.textContent = text // Ex: "OpenAI"
// Link 'a' para a funcionalidade de resetar a API Key
const resetLink = document.createElement('a')
resetLink.href = '#' // Link vazio, a ação é via JS
resetLink.textContent = 'Reset Key' // Texto do link
resetLink.className = 'reset-key-link' // Classe para estilização
resetLink.title = `Reset ${text} API Key` // Tooltip informativo
// Listener de clique no link de reset
resetLink.addEventListener('click', (e) => {
e.preventDefault() // Previne a navegação padrão do link '#'
e.stopPropagation() // Impede que o clique feche o dropdown imediatamente
handleApiKeyReset(service) // Chama a função que lida com o reset da chave para este serviço
})
// Adiciona o texto e o link ao container
headerContainer.appendChild(headerText)
headerContainer.appendChild(resetLink)
return headerContainer // Retorna o container completo do cabeçalho
}
/**
* Cria um item clicável para um modelo específico dentro do dropdown.
* Ao ser clicado, seleciona o modelo, fecha o dropdown e inicia a sumarização.
* @param {object} modelObj - O objeto do modelo contendo { id, name?, params? }.
* @returns {HTMLElement} - O elemento div do item do modelo.
*/
function createModelItem(modelObj) {
const item = document.createElement('div') // Cria o elemento div para o item
item.className = 'model-item' // Classe para estilização
// Define o texto do item: usa o nome amigável (modelObj.name) se existir, caso contrário, usa o ID do modelo
item.textContent = modelObj.name || modelObj.id
// Adiciona um destaque visual (negrito e cor) se este item corresponde ao modelo ativo atualmente
if (modelObj.id === activeModel) {
item.style.fontWeight = 'bold' // Negrito
item.style.color = '#1A73E8' // Azul para destacar
}
// Listener de clique no item do modelo
item.addEventListener('click', async () => {
activeModel = modelObj.id // Atualiza a variável global 'activeModel' com o ID selecionado
await GM.setValue('last_used_model', activeModel) // Salva o ID do modelo selecionado no storage para persistência
hideElement(DROPDOWN_ID) // Esconde o dropdown após a seleção
processSummarization() // Inicia imediatamente o processo de sumarização com o novo modelo ativo
})
return item // Retorna o elemento do item criado
}
/**
* Cria o item clicável "+ Add Custom Model" no final do dropdown.
* Ao ser clicado, esconde o dropdown e inicia o fluxo para adicionar um novo modelo customizado.
* @returns {HTMLElement} - O elemento div do item "+ Add Custom Model".
*/
function createAddModelItem() {
const item = document.createElement('div') // Cria o elemento div
item.id = ADD_MODEL_ITEM_ID // ID específico para este item
item.className = 'model-item add-model-item' // Classes para estilização (geral e específica)
item.textContent = '+ Add Custom Model' // Texto do item
// Listener de clique no item "+ Add Custom Model"
item.addEventListener('click', async (e) => {
e.stopPropagation() // Impede que o clique feche o dropdown (que seria o comportamento padrão do handleOutsideClick)
hideElement(DROPDOWN_ID) // Esconde o dropdown antes de mostrar os prompts para adicionar modelo
await handleAddModel() // Chama a função que gerencia a adição de um modelo customizado
})
return item // Retorna o elemento do item criado
}
/**
* Mostra ou esconde o dropdown de seleção de modelo.
* Repopula o dropdown ao mostrar para garantir que a lista de modelos e o estado do link de reset estejam atualizados.
* @param {Event} [e] - O objeto do evento de clique/mousedown/touchstart (opcional, usado para stopPropagation).
*/
function toggleDropdown(e) {
if (e) e.stopPropagation() // Impede que o evento (que abriu o dropdown) também o feche imediatamente via handleOutsideClick
const dropdown = document.getElementById(DROPDOWN_ID)
if (dropdown) {
const isHidden = dropdown.style.display === 'none' // Verifica se o dropdown está atualmente oculto
if (isHidden) {
// Se estiver oculto, primeiro repopula com os dados mais recentes (modelos, status ativo)
populateDropdown(dropdown)
// Depois mostra o dropdown
showElement(DROPDOWN_ID)
} else {
// Se estiver visível, apenas esconde
hideElement(DROPDOWN_ID)
}
}
}
/**
* Fecha o dropdown se um clique ocorrer fora da área do dropdown e fora do botão 'S'.
* Previne o fechamento acidental ao clicar dentro do próprio dropdown ou no botão.
* @param {Event} event - O objeto do evento de clique global.
*/
function handleOutsideClick(event) {
const dropdown = document.getElementById(DROPDOWN_ID)
const button = document.getElementById(BUTTON_ID)
// Verifica se o dropdown existe, está visível, E se o alvo do clique NÃO está contido no dropdown NEM no botão 'S'
if (dropdown && dropdown.style.display !== 'none' &&
!dropdown.contains(event.target) && // O clique não foi dentro do dropdown
!button?.contains(event.target)) { // O clique não foi no botão 'S' (usa optional chaining por segurança)
hideElement(DROPDOWN_ID) // Esconde o dropdown
}
}
/**
* Exibe o overlay de sumarização com o conteúdo HTML fornecido.
* Cria os elementos do overlay (fundo, container de conteúdo, botão de fechar) se não existirem.
* Adiciona um botão "Try Again" se `isError` for verdadeiro.
* @param {string} contentHTML - O conteúdo HTML a ser exibido (pode ser mensagem de loading, sumário ou erro).
* @param {boolean} [isError=false] - Indica se o conteúdo é uma mensagem de erro, para adicionar o botão "Try Again".
*/
function showSummaryOverlay(contentHTML, isError = false) {
// Se o overlay já existe na página (por exemplo, de uma tentativa anterior),
// apenas atualiza seu conteúdo em vez de criar um novo.
if (document.getElementById(OVERLAY_ID)) {
updateSummaryOverlay(contentHTML, isError)
return
}
// Cria o elemento div principal do overlay (fundo escuro)
const overlay = document.createElement('div')
overlay.id = OVERLAY_ID // Define o ID para estilização e referência
// Cria o conteúdo interno do overlay, incluindo o botão de fechar ('×') e o conteúdo dinâmico (loading/sumário/erro)
let finalContentHTML = `<div id="${CLOSE_BUTTON_ID}" title="Close (Esc)">×</div>${contentHTML}`
// Se for uma mensagem de erro, adiciona o botão "Try Again" abaixo do conteúdo
if (isError) {
finalContentHTML += `<button id="${RETRY_BUTTON_ID}" class="retry-button">Try Again</button>`
}
// Define o HTML interno do container de conteúdo (caixa branca/escura no centro)
overlay.innerHTML = `<div id="${CONTENT_ID}">${finalContentHTML}</div>`
// Adiciona o overlay completo ao body do documento
document.body.appendChild(overlay)
// Trava o scroll da página principal enquanto o overlay estiver visível
document.body.style.overflow = 'hidden'
// Adiciona listeners de evento para fechar o overlay:
// 1. Clicar no botão '×'
document.getElementById(CLOSE_BUTTON_ID).addEventListener('click', closeOverlay)
// 2. Clicar no fundo escuro do overlay (fora da caixa de conteúdo)
overlay.addEventListener('click', e => e.target === overlay && closeOverlay()) // Fecha apenas se o clique for no próprio overlay
// Adiciona listener para o botão "Try Again", se ele existir (em caso de erro)
// Ao clicar, simplesmente chama a função processSummarization() novamente para tentar refazer a sumarização.
document.getElementById(RETRY_BUTTON_ID)?.addEventListener('click', processSummarization)
}
/**
* Fecha e remove completamente o overlay de sumarização do DOM.
* Restaura o scroll normal da página principal.
*/
function closeOverlay() {
const overlay = document.getElementById(OVERLAY_ID) // Encontra o elemento do overlay
if (overlay) {
overlay.remove() // Remove o overlay do DOM
document.body.style.overflow = '' // Libera o scroll do body, restaurando o estado anterior
}
}
/**
* Atualiza o conteúdo dentro de um overlay de sumarização já existente.
* Usado para mudar de "Loading..." para o sumário final ou para exibir uma mensagem de erro após o loading.
* Garante que o botão de fechar e o botão "Try Again" (se aplicável) sejam recriados corretamente com seus listeners.
* @param {string} contentHTML - O novo conteúdo HTML a ser inserido.
* @param {boolean} [isError=false] - Indica se o novo conteúdo é uma mensagem de erro, para adicionar o botão "Try Again".
*/
function updateSummaryOverlay(contentHTML, isError = false) {
const contentDiv = document.getElementById(CONTENT_ID) // Encontra o container interno do conteúdo
if (contentDiv) {
// Recria o HTML interno, garantindo que o botão de fechar '×' sempre exista
let finalContentHTML = `<div id="${CLOSE_BUTTON_ID}" title="Close (Esc)">×</div>${contentHTML}`
// Adiciona o botão "Try Again" se for um erro
if (isError) {
finalContentHTML += `<button id="${RETRY_BUTTON_ID}" class="retry-button">Try Again</button>`
}
contentDiv.innerHTML = finalContentHTML // Substitui o conteúdo antigo pelo novo
// Reatribui o listener de clique ao novo botão de fechar (o antigo foi removido com innerHTML)
document.getElementById(CLOSE_BUTTON_ID)?.addEventListener('click', closeOverlay)
// Reatribui o listener de clique ao novo botão "Try Again", se ele existir
document.getElementById(RETRY_BUTTON_ID)?.addEventListener('click', processSummarization)
}
}
/**
* Exibe uma notificação de erro temporária na parte inferior central da tela.
* Usada para erros que não justificam mostrar o overlay completo (ex: falha ao obter API key).
* @param {string} message - A mensagem de erro a ser exibida.
*/
function showErrorNotification(message) {
document.getElementById(ERROR_ID)?.remove() // Remove qualquer notificação de erro anterior
// Cria o elemento div para a notificação
const errorDiv = document.createElement('div')
errorDiv.id = ERROR_ID // ID para estilização e referência
errorDiv.innerText = message // Define o texto da mensagem
document.body.appendChild(errorDiv) // Adiciona ao body
// Define um timer para remover automaticamente a notificação após 4 segundos
setTimeout(() => errorDiv.remove(), 4000)
}
/**
* Esconde um elemento do DOM definindo seu estilo `display` como 'none'.
* @param {string} id - O ID do elemento a ser escondido.
*/
function hideElement(id) {
const el = document.getElementById(id)
if (el) el.style.display = 'none'
}
/**
* Mostra um elemento do DOM. Usa 'flex' para o botão 'S' (para centralizar o texto)
* e 'block' para outros elementos como o dropdown e o overlay.
* @param {string} id - O ID do elemento a ser mostrado.
*/
function showElement(id) {
const el = document.getElementById(id)
if (el) {
// Define 'display' como 'flex' para o botão (conforme estilo CSS) e 'block' para outros (dropdown/overlay)
el.style.display = (id === BUTTON_ID) ? 'flex' : 'block'
}
}
// --- Funções de Lógica (Sumarização, API, Modelos) ---
/**
* Encontra o objeto de configuração completo para o modelo atualmente ativo (`activeModel`).
* Busca primeiro nos modelos padrão (`MODEL_GROUPS`) e depois nos modelos customizados (`customModels`).
* @returns {object|null} Um objeto contendo { id, service, name?, params? } se encontrado, ou null caso contrário.
* 'name' e 'params' podem não estar presentes para modelos customizados.
*/
function getActiveModelConfig() {
// Itera sobre os serviços definidos (openai, gemini)
for (const service in MODEL_GROUPS) {
const group = MODEL_GROUPS[service] // Acessa a configuração do grupo (baseUrl, models, defaultParams)
// Tenta encontrar o modelo ativo dentro dos modelos padrão deste serviço
const modelConfig = group.models.find(m => m.id === activeModel)
if (modelConfig) {
// Se encontrado, retorna uma cópia do objeto de configuração do modelo,
// adicionando a chave 'service' para saber a qual serviço pertence.
return {...modelConfig, service: service}
}
}
// Se não encontrado nos modelos padrão, procura nos modelos customizados
const customConfig = customModels.find(m => m.id === activeModel)
if (customConfig) {
// Se encontrado nos customizados, retorna uma cópia do objeto customizado { id, service }.
// Modelos customizados, por padrão, não armazenam 'name' ou 'params' neste script.
return {...customConfig}
}
// Se não encontrado em nenhum lugar, loga um erro e retorna null
console.error(`Summarize with AI: Active model configuration not found for ID: ${activeModel}`)
return null
}
/**
* Orquestra todo o processo de sumarização:
* 1. Verifica se os dados do artigo foram extraídos.
* 2. Obtém a configuração do modelo ativo.
* 3. Obtém a chave da API para o serviço correspondente.
* 4. Mostra o overlay com uma mensagem de "Loading..." e o nome do modelo.
* 5. Prepara e envia a requisição para a API de IA.
* 6. Trata a resposta da API (sucesso ou erro).
* 7. Exibe o sumário ou uma mensagem de erro no overlay.
*/
async function processSummarization() {
try {
// Etapa 1: Verifica se temos o conteúdo do artigo
if (!articleData) {
showErrorNotification('Article content not found or not readable.') // Notificação se não há artigo
return // Interrompe se não há o que sumarizar
}
// Etapa 2: Obtém a configuração do modelo ativo
const modelConfig = getActiveModelConfig()
if (!modelConfig) {
// Exibe erro se a configuração do modelo selecionado não for encontrada (pode acontecer se for removido)
showErrorNotification(`Configuration for model "${activeModel}" not found. Please select another model.`)
return // Interrompe
}
// Determina o nome a ser exibido no overlay (usa 'name' se disponível, senão 'id')
const modelDisplayName = modelConfig.name || modelConfig.id
const service = modelConfig.service // Obtém o serviço ('openai' ou 'gemini') da configuração
// Etapa 3: Obtém a chave da API
const apiKey = await getApiKey(service)
if (!apiKey) { // Se a chave não for encontrada ou estiver vazia
// Monta mensagem de erro instruindo o usuário
const errorMsg = `API key for ${service.toUpperCase()} is required. Click the 'Reset Key' link in the model selection menu (long-press 'S' button).`
// Verifica se o overlay já está aberto (pode ser um retry após falha de chave)
if (document.getElementById(OVERLAY_ID)) {
// Mostra o erro dentro do overlay existente, sem botão de retry para este caso específico
updateSummaryOverlay(`<p style="color: red;">${errorMsg}</p>`, false)
} else {
// Se o overlay não estava aberto, mostra como uma notificação flutuante
showErrorNotification(errorMsg)
}
return // Interrompe se não houver chave de API
}
// Etapa 4: Mostra feedback de "Loading" no overlay
const loadingMessage = `<p class="glow">Summarizing with ${modelDisplayName}... </p>` // Mensagem com efeito 'glow'
// Verifica se o overlay já existe (caso seja um retry)
if (document.getElementById(OVERLAY_ID)) {
updateSummaryOverlay(loadingMessage) // Atualiza o overlay existente com a mensagem de loading
} else {
showSummaryOverlay(loadingMessage) // Cria um novo overlay com a mensagem de loading
}
// Etapa 5: Prepara e envia a requisição para a API
// Prepara o payload com título, conteúdo do artigo e idioma do navegador
const payload = {title: articleData.title, content: articleData.content, lang: navigator.language || 'en-US'}
// Envia a requisição passando serviço, chave, payload e a configuração do modelo
const response = await sendApiRequest(service, apiKey, payload, modelConfig)
// Etapa 6: Trata a resposta da API
handleApiResponse(response, service) // Processa a resposta (extrai sumário ou lança erro)
} catch (error) {
// Etapa 7: Exibe erros no overlay
const errorMsg = `Error: ${error.message}` // Mensagem de erro concisa
console.error('Summarize with AI:', errorMsg, error) // Loga o erro completo no console para depuração
// Mostra a mensagem de erro no overlay (criando um novo se não existir)
// e inclui o botão "Try Again" (isError = true)
showSummaryOverlay(`<p style="color: red;">${errorMsg}</p>`, true)
hideElement(DROPDOWN_ID) // Garante que o dropdown esteja oculto em caso de erro
}
}
/**
* Envia a requisição HTTP para a API de IA (OpenAI ou Gemini) usando GM.xmlHttpRequest.
* @param {string} service - O nome do serviço ('openai' ou 'gemini').
* @param {string} apiKey - A chave da API para autenticação.
* @param {object} payload - Objeto contendo { title, content, lang } do artigo.
* @param {object} modelConfig - A configuração completa do modelo ativo { id, service, name?, params? }.
* @returns {Promise<object>} - Uma promessa que resolve com um objeto contendo { status, data, statusText } da resposta HTTP.
* 'data' será o objeto JSON parseado ou um objeto vazio em caso de falha no parse.
*/
async function sendApiRequest(service, apiKey, payload, modelConfig) {
const group = MODEL_GROUPS[service] // Obtém a configuração base do serviço (URL, etc.)
// Define a URL da API específica para o serviço
const url = service === 'openai'
? group.baseUrl // URL base da API OpenAI (modelo é enviado no corpo)
: `${group.baseUrl}${modelConfig.id}:generateContent?key=${apiKey}` // URL da API Gemini (ID do modelo e chave na URL)
// Retorna uma nova Promise que encapsula a chamada GM.xmlHttpRequest
return new Promise((resolve, reject) => {
GM.xmlHttpRequest({
method: 'POST', // Método HTTP para enviar dados
url: url, // URL da API definida acima
headers: getHeaders(service, apiKey), // Obtém os cabeçalhos HTTP necessários (Content-Type, Authorization se OpenAI)
// Constrói o corpo da requisição (JSON) específico para o serviço e modelo
data: JSON.stringify(buildRequestBody(service, payload, modelConfig)),
responseType: 'json', // Indica ao Tampermonkey para tentar parsear a resposta como JSON automaticamente
timeout: 60000, // Define um timeout de 60 segundos para a requisição
// Callback executado quando a requisição é concluída com sucesso (status HTTP recebido)
onload: response => {
// GM.xmlHttpRequest pode retornar o JSON parseado em 'response.response'
// ou a string original em 'response.responseText'. Precisamos lidar com ambos.
const responseData = response.response || response.responseText
// Resolve a Promise com um objeto contendo o status HTTP, os dados (parseados ou string) e o statusText
resolve({
status: response.status,
// Tenta garantir que 'data' seja um objeto, mesmo que 'responseType: json' falhe
data: typeof responseData === 'object' ? responseData : JSON.parse(responseData || '{}'),
statusText: response.statusText,
})
},
// Callbacks para diferentes tipos de erro na requisição
onerror: error => reject(new Error(`Network error: ${error.statusText || 'Failed to connect'}`)), // Erro de rede
onabort: () => reject(new Error('Request aborted')), // Requisição abortada
ontimeout: () => reject(new Error('Request timed out after 60 seconds')), // Timeout atingido
})
})
}
/**
* Processa a resposta recebida da API de IA.
* Verifica o status HTTP, extrai o conteúdo do sumário do corpo da resposta (dependendo do serviço),
* lida com possíveis erros da API (como bloqueio por segurança ou limites de token),
* limpa o texto do sumário e atualiza o overlay com o resultado final.
* @param {object} response - O objeto de resposta resolvido da Promise de `sendApiRequest` (contém status, data, statusText).
* @param {string} service - O nome do serviço que respondeu ('openai' ou 'gemini').
* @throws {Error} - Lança um erro se a API retornar um status não-2xx, se a resposta não contiver um sumário válido,
* ou se ocorrer um bloqueio por segurança.
*/
function handleApiResponse(response, service) {
const {status, data, statusText} = response // Desestrutura o objeto de resposta
// Verifica se o status HTTP indica sucesso (códigos 200-299)
if (status < 200 || status >= 300) {
// Tenta extrair uma mensagem de erro mais específica do corpo da resposta JSON
// (OpenAI usa data.error.message, Gemini pode usar data.message ou data.error.message)
const errorDetails = data?.error?.message || data?.message || statusText || 'Unknown API error'
// Lança um erro que será capturado pelo 'catch' em processSummarization
throw new Error(`API Error (${status}): ${errorDetails}`)
}
// Extrai o texto bruto do sumário da resposta, dependendo da estrutura de cada API
let rawSummary = '' // Inicializa a variável para o sumário
if (service === 'openai') {
// Para OpenAI, o sumário está em choices[0].message.content
const choice = data?.choices?.[0]
rawSummary = choice?.message?.content
// Loga o motivo pelo qual a geração parou (útil para depuração)
const finishReason = choice?.finish_reason
console.log(`Summarize with AI: OpenAI Finish Reason: ${finishReason} (Model: ${activeModel})`)
// Adiciona um aviso se o sumário foi cortado por atingir o limite de tokens
if (finishReason === 'length') {
console.warn('Summarize with AI: Summary may be incomplete because the max token limit was reached.')
}
} else if (service === 'gemini') {
// Para Gemini, o sumário está em candidates[0].content.parts[0].text
const candidate = data?.candidates?.[0]
const finishReason = candidate?.finishReason // Motivo da finalização (STOP, MAX_TOKENS, SAFETY, etc.)
console.log(`Summarize with AI: Gemini Finish Reason: ${finishReason} (Model: ${activeModel})`)
// Verifica se a finalização foi devido a bloqueio de segurança
if (finishReason === 'SAFETY') {
// Tenta obter detalhes das categorias de segurança que causaram o bloqueio
const safetyRatings = candidate.safetyRatings?.map(r => `${r.category}: ${r.probability}`).join(', ')
// Lança um erro específico para bloqueio de segurança
throw new Error(`Content blocked due to safety concerns (${safetyRatings || 'No details'}).`)
}
// Adiciona um aviso se o sumário foi cortado por atingir o limite de tokens
if (finishReason === 'MAX_TOKENS') {
console.warn('Summarize with AI: Summary may be incomplete because the max token limit was reached.')
}
// Extrai o texto da parte principal da resposta do candidato
// Verificação robusta para garantir que 'parts' existe e contém texto
if (candidate?.content?.parts?.length > 0 && candidate.content.parts[0].text) {
rawSummary = candidate.content.parts[0].text
} else if (finishReason && !['STOP', 'SAFETY', 'MAX_TOKENS'].includes(finishReason)) {
// Loga um aviso se o motivo da finalização for inesperado e não houver texto
console.warn(`Summarize with AI: Gemini response structure missing expected text content or unusual finish reason: ${finishReason}`, candidate)
} else if (!rawSummary && !data?.error) { // Se não houver texto E não for um erro já tratado
// Loga um aviso se a estrutura esperada estiver ausente
console.warn('Summarize with AI: Gemini response structure missing expected text content.', candidate)
}
// Se rawSummary continuar vazio aqui, o erro "did not contain valid summary" será lançado abaixo.
}
// Verifica se, após a extração, a variável rawSummary contém algum texto.
// Ignora esta verificação se já houver um erro explícito na resposta (data.error)
if (!rawSummary && !data?.error) {
console.error('Summarize with AI: API Response Data:', data) // Loga a resposta completa para depuração
throw new Error('API response did not contain a valid summary.') // Lança erro se o sumário estiver vazio
}
// Limpa quebras de linha (\n) que não fazem parte de tags HTML (substitui por espaço)
// e comprime múltiplos espaços em um único espaço.
// Isso melhora a formatação caso a API retorne quebras de linha desnecessárias.
const cleanedSummary = rawSummary.replace(/\n/g, ' ').replace(/ {2,}/g, ' ').trim()
// Atualiza o overlay com o sumário final limpo.
// Passa 'false' para isError, indicando que é um sucesso e não precisa do botão "Try Again".
updateSummaryOverlay(cleanedSummary, false)
}
/**
* Constrói o objeto do corpo (payload) da requisição para a API (OpenAI ou Gemini).
* Inclui o prompt do sistema e os parâmetros de geração (como max tokens),
* usando valores específicos do modelo (modelConfig.params) ou os padrões do serviço (MODEL_GROUPS[service].defaultParams).
* @param {string} service - O nome do serviço ('openai' ou 'gemini').
* @param {object} payload - Objeto com { title, content, lang } do artigo.
* @param {object} modelConfig - A configuração completa do modelo ativo { id, service, name?, params? }.
* @returns {object} - O objeto pronto para ser serializado em JSON e enviado como corpo da requisição.
*/
function buildRequestBody(service, {title, content, lang}, modelConfig) {
// Gera o prompt completo que será enviado à IA, incluindo instruções e o conteúdo do artigo
const systemPrompt = PROMPT_TEMPLATE(title, content, lang)
// Obtém os parâmetros padrão definidos para o serviço (ex: default max tokens)
const serviceDefaults = MODEL_GROUPS[service]?.defaultParams || {}
// Obtém os parâmetros específicos definidos para este modelo (se houver)
const modelSpecificParams = modelConfig?.params || {}
if (service === 'openai') {
// Mescla os parâmetros: os específicos do modelo sobrescrevem os padrões do serviço
const finalParams = {...serviceDefaults, ...modelSpecificParams}
// Retorna a estrutura de corpo esperada pela API OpenAI Chat Completions
return {
model: modelConfig.id, // ID do modelo a ser usado
messages: [
{role: 'system', content: systemPrompt}, // O prompt principal como mensagem do sistema
{role: 'user', content: 'Generate the summary as requested.'} // Uma mensagem curta do usuário para iniciar a resposta
],
// Inclui os parâmetros de geração mesclados (ex: max_completion_tokens)
...finalParams
// 'temperature', 'top_p', etc., podem ser adicionados aqui ou nos params do modelo/serviço
}
} else { // gemini
// Mescla os parâmetros para a seção 'generationConfig' do Gemini
const finalGenConfigParams = {...serviceDefaults, ...modelSpecificParams}
// Retorna a estrutura de corpo esperada pela API Gemini generateContent
return {
contents: [{
parts: [{text: systemPrompt}], // O prompt principal vai dentro de 'contents' -> 'parts'
// role não é necessário aqui para um prompt simples
}],
// Inclui a 'generationConfig' com os parâmetros mesclados (ex: maxOutputTokens)
generationConfig: finalGenConfigParams
// 'temperature', 'topP', 'topK' podem ser adicionados aqui ou nos params do modelo/serviço
}
}
}
/**
* Retorna os cabeçalhos HTTP apropriados para a requisição à API.
* @param {string} service - O nome do serviço ('openai' ou 'gemini').
* @param {string} apiKey - A chave da API.
* @returns {object} - Um objeto contendo os cabeçalhos HTTP necessários.
*/
function getHeaders(service, apiKey) {
// Cabeçalho comum a todas as requisições
const headers = {'Content-Type': 'application/json'}
// Adiciona o cabeçalho de Autorização específico para OpenAI
if (service === 'openai') {
headers['Authorization'] = `Bearer ${apiKey}` // OpenAI usa autenticação Bearer Token
}
// Gemini inclui a chave de API na URL da requisição (veja sendApiRequest),
// então nenhum cabeçalho de autorização adicional é necessário aqui.
return headers
}
/**
* Obtém a chave da API para o serviço especificado a partir do armazenamento seguro do GM (GM.getValue).
* Se a chave não estiver armazenada ou estiver vazia, retorna null.
* A verificação se a chave é necessária e a solicitação ao usuário (se ausente) ocorrem em `processSummarization`.
* @param {string} service - O nome do serviço ('openai' ou 'gemini') para o qual obter a chave.
* @returns {Promise<string|null>} - Uma promessa que resolve com a string da chave da API ou null se não encontrada/vazia.
*/
async function getApiKey(service) {
const storageKey = `${service}_api_key` // Chave usada para armazenar no GM storage (ex: 'openai_api_key')
let apiKey = await GM.getValue(storageKey) // Lê o valor do storage
// Retorna a chave se ela existir e não for apenas espaços em branco, caso contrário, retorna null.
return apiKey?.trim() || null
}
/**
* Permite ao usuário resetar (redefinir ou limpar) a chave da API para um serviço específico.
* Solicita a nova chave através de um prompt do navegador.
* Ativado pelo link 'Reset Key' no cabeçalho de cada grupo no dropdown de modelos.
* @param {string} service - O serviço ('openai' ou 'gemini') para o qual resetar a chave.
*/
async function handleApiKeyReset(service) {
// Validação básica para garantir que um serviço válido foi passado
if (!service || !MODEL_GROUPS[service]) {
console.error("Invalid service provided for API key reset:", service)
alert("Internal error: Invalid service provided.")
return
}
const storageKey = `${service}_api_key` // Chave do storage para esta API key
// Pede a nova chave ao usuário via prompt. O usuário pode digitar a chave, deixar em branco ou cancelar.
const newKey = prompt(`Enter the new ${service.toUpperCase()} API key (leave blank to clear):`)
// Verifica se o usuário não clicou em "Cancelar" (prompt retorna null se cancelado)
if (newKey !== null) {
// Remove espaços extras da chave digitada (ou string vazia se deixado em branco)
const keyToSave = newKey.trim()
// Salva a nova chave (ou string vazia) no GM storage, sobrescrevendo a anterior
await GM.setValue(storageKey, keyToSave)
// Informa o usuário sobre a ação realizada
if (keyToSave) {
alert(`${service.toUpperCase()} API key updated!`) // Mensagem se a chave foi atualizada
} else {
alert(`${service.toUpperCase()} API key cleared!`) // Mensagem se a chave foi limpa
}
// Opcional: Se o dropdown estiver visível, poderia ser repopulado aqui para refletir
// alguma mudança visual, mas atualmente não há indicação visual da presença da chave.
// const dropdown = document.getElementById(DROPDOWN_ID)
// if (dropdown && dropdown.style.display !== 'none') {
// populateDropdown(dropdown)
// }
}
// Se newKey for null (usuário clicou em Cancelar no prompt), nenhuma ação é tomada.
}
/**
* Gerencia o fluxo interativo para adicionar um novo modelo customizado.
* Pede ao usuário, via prompts do navegador, o serviço (OpenAI/Gemini) e o ID exato do modelo.
* Valida as entradas e chama `addCustomModel` para salvar.
*/
async function handleAddModel() {
// 1. Pergunta o serviço (OpenAI ou Gemini)
// Converte para minúsculas e remove espaços para validação
const service = prompt('Enter the service for the custom model (openai / gemini):')?.toLowerCase()?.trim()
// Valida se o serviço é 'openai' ou 'gemini' e se não foi cancelado
if (!service || !MODEL_GROUPS[service]) {
// Mostra alerta apenas se o usuário digitou algo inválido (não se cancelou)
if (service !== null) alert('Invalid service. Please enter "openai" or "gemini".')
return // Cancela o fluxo se o serviço for inválido ou o prompt for cancelado
}
// 2. Pergunta o nome exato (ID) do modelo
// Remove espaços extras do ID digitado
const modelId = prompt(`Enter the exact ID of the ${service.toUpperCase()} model:`)?.trim()
// Valida se o ID não está vazio e se não foi cancelado
if (!modelId) {
// Mostra alerta apenas se o usuário deixou em branco (não se cancelou)
if (modelId !== null) alert('Model ID cannot be empty.')
return // Cancela o fluxo se o ID for vazio ou o prompt for cancelado
}
// 3. Chama a função para adicionar o modelo e salvar no storage
await addCustomModel(service, modelId)
// Nota: Após adicionar, o dropdown não é reaberto automaticamente. O usuário precisará
// fazer long-press novamente para ver o modelo adicionado na lista.
}
/**
* Adiciona um novo modelo customizado à lista em memória (`customModels`) e
* salva a lista atualizada no GM storage.
* Verifica se um modelo com o mesmo ID (case-insensitive) já existe (seja padrão ou customizado)
* para evitar duplicatas. Salva no formato { id: string, service: string }.
* @param {string} service - O serviço do modelo ('openai' ou 'gemini').
* @param {string} modelId - O ID exato do modelo a ser adicionado.
*/
async function addCustomModel(service, modelId) {
// Verifica se o ID do modelo já existe na lista de customizados para este serviço (ignorando case)
const existsInCustom = customModels.some(m => m.service === service && m.id.toLowerCase() === modelId.toLowerCase())
// Verifica também se o ID já existe nos modelos padrão definidos em MODEL_GROUPS (ignorando case)
const existsInStandard = MODEL_GROUPS[service]?.models.some(m => m.id.toLowerCase() === modelId.toLowerCase())
// Se o modelo já existir em qualquer uma das listas
if (existsInCustom || existsInStandard) {
alert(`Model ID "${modelId}" already exists for ${service.toUpperCase()}.`) // Informa o usuário
return // Interrompe a adição
}
// Se não existe, adiciona o novo modelo (como objeto {id, service}) à lista em memória
customModels.push({id: modelId, service})
// Salva a lista completa e atualizada de modelos customizados no GM storage como uma string JSON
await GM.setValue(CUSTOM_MODELS_KEY, JSON.stringify(customModels))
// Informa o usuário que o modelo foi adicionado com sucesso
alert(`Custom model "${modelId}" (${service.toUpperCase()}) added!`)
}
/**
* Carrega a lista de modelos customizados salvos no GM storage.
* Faz parse da string JSON armazenada e realiza uma validação básica
* para garantir que o formato seja um array de objetos, cada um com `id` e `service`.
* Em caso de formato inválido ou erro de parse, reseta o storage para '[]' e retorna um array vazio.
* @returns {Promise<Array<object>>} - Uma promessa que resolve com o array de objetos de modelos customizados [{ id, service }, ...].
*/
async function getCustomModels() {
try {
// Obtém a string JSON do storage, usando '[]' como valor padrão se a chave não existir
const storedModels = await GM.getValue(CUSTOM_MODELS_KEY, '[]')
// Faz o parse da string JSON para um objeto JavaScript
const parsedModels = JSON.parse(storedModels)
// Validação: Verifica se é um array e se cada item é um objeto com as propriedades 'id' e 'service'
if (Array.isArray(parsedModels) && parsedModels.every(m => typeof m === 'object' && m.id && m.service)) {
return parsedModels // Retorna os modelos customizados válidos
} else {
// Se o formato for inválido, loga um aviso, reseta o storage e retorna um array vazio
console.warn("Summarize with AI: Invalid custom model format found in storage. Resetting.", parsedModels)
await GM.setValue(CUSTOM_MODELS_KEY, '[]') // Limpa o valor inválido no storage
return []
}
} catch (error) {
// Se ocorrer um erro durante o getValue ou JSON.parse
console.error('Summarize with AI: Failed to load/parse custom models:', error)
// Tenta resetar o storage para um estado limpo em caso de erro de parse
await GM.setValue(CUSTOM_MODELS_KEY, '[]')
return [] // Retorna um array vazio em caso de erro
}
}
// --- Funções de Eventos e Utilidades ---
/**
* Manipulador global para eventos de teclado.
* Ouve por Alt+S para iniciar a sumarização e Esc para fechar o overlay ou o dropdown.
* @param {KeyboardEvent} e - O objeto do evento de teclado.
*/
function handleKeyPress(e) {
// Atalho Alt+S: Simula um clique simples no botão 'S' para iniciar a sumarização
if (e.altKey && e.code === 'KeyS' && !e.shiftKey && !e.ctrlKey && !e.metaKey) { // Verifica Alt+S sem outros modificadores
e.preventDefault() // Previne qualquer ação padrão do navegador para Alt+S
const button = document.getElementById(BUTTON_ID)
// Verifica se o botão 'S' existe na página (ou seja, se um artigo foi detectado)
if (button) {
// Verifica se um campo de input NÃO está focado antes de disparar
if (!document.activeElement?.closest('input, textarea, select, [contenteditable="true"]')) {
processSummarization() // Chama a função principal de sumarização
}
}
}
// Tecla Esc: Fecha elementos abertos pelo script
if (e.key === 'Escape') {
// Prioridade 1: Fechar o overlay de sumário/erro se estiver aberto
if (document.getElementById(OVERLAY_ID)) {
e.preventDefault() // Previne que o Esc feche outras coisas na página
closeOverlay()
}
// Prioridade 2: Fechar o dropdown de modelos se estiver aberto e o overlay não estiver
else if (document.getElementById(DROPDOWN_ID)?.style.display !== 'none') {
e.preventDefault() // Previne que o Esc feche outras coisas
hideElement(DROPDOWN_ID)
}
}
}
/**
* Configura listeners de foco para esconder/mostrar o botão 'S' automaticamente.
* Esconde o botão quando o usuário foca em um campo de input/textarea/select/contenteditable.
* Mostra o botão novamente quando o foco sai desses campos (e volta para o corpo da página, por exemplo).
*/
function setupFocusListeners() {
// Listener 'focusin': Disparado quando um elemento na página recebe foco (incluindo via tabulação).
document.addEventListener('focusin', (event) => {
// Verifica se o elemento que recebeu foco (event.target) é ou está dentro de um campo editável.
if (event.target?.closest('input, textarea, select, [contenteditable="true"]')) {
hideElement(BUTTON_ID) // Esconde o botão 'S'
hideElement(DROPDOWN_ID) // Esconde também o dropdown se estiver aberto
}
})
// Listener 'focusout': Disparado quando um elemento perde o foco.
document.addEventListener('focusout', (event) => {
// Verifica se o elemento que perdeu foco (event.target) era um campo editável.
const isLeavingInput = event.target?.closest('input, textarea, select, [contenteditable="true"]')
// Verifica se o novo elemento que recebeu foco (event.relatedTarget) NÃO é um campo editável.
// 'relatedTarget' é null se o foco saiu da janela ou foi para o body.
const isEnteringInput = event.relatedTarget?.closest('input, textarea, select, [contenteditable="true"]')
// Mostra o botão 'S' somente se as seguintes condições forem verdadeiras:
// 1. O foco estava em um campo editável (isLeavingInput).
// 2. O foco NÃO está indo para outro campo editável (isEnteringInput é falso/null).
// 3. O script detectou um artigo legível (articleData existe).
if (isLeavingInput && !isEnteringInput && articleData) {
// Usa um pequeno delay (50ms) antes de mostrar o botão.
// Isso evita que o botão pisque rapidamente se o usuário tabular entre campos editáveis.
setTimeout(() => {
// Reconfirma no momento de mostrar: garante que o foco *atual* não é um input
// (o foco pode ter mudado novamente durante o delay).
if (!document.activeElement?.closest('input, textarea, select, [contenteditable="true"]')) {
showElement(BUTTON_ID) // Mostra o botão 'S'
}
}, 50)
}
}, true) // Usa 'capture: true' para garantir que o evento 'focusout' seja capturado de forma confiável.
}
/**
* Injeta os estilos CSS necessários para a interface do script (botão, dropdown, overlay, etc.).
* Inclui estilos para dark mode e responsividade móvel.
*/
function injectStyles() {
// Estilos CSS injetados usando GM.addStyle
GM.addStyle(`
/* --- Elementos Principais da UI --- */
#${BUTTON_ID} {
position: fixed; bottom: 20px; right: 20px;
width: 50px; height: 50px; /* Tamanho */
background: linear-gradient(145deg, #3a7bd5, #00d2ff); /* Gradiente azul */
color: white; font-size: 24px; /* Texto */
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
border-radius: 50%; cursor: pointer; z-index: 2147483640;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
/* display é controlado por show/hideElement, mas !important garante sobreposição se necessário */
display: flex !important; align-items: center !important; justify-content: center !important; /* Centraliza 'S' */
transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
line-height: 1; user-select: none; /* Previne seleção de texto */
-webkit-tap-highlight-color: transparent; /* Remove highlight azul no toque (iOS/Android) */
}
#${BUTTON_ID}:hover {
transform: scale(1.1); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
}
#${DROPDOWN_ID} {
position: fixed; bottom: 80px; right: 20px; /* Posicionado acima do botão 'S' */
background: #ffffff; border: 1px solid #e0e0e0; border-radius: 10px;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15); z-index: 2147483641; /* Z-index maior que o botão */
max-height: 70vh; overflow-y: auto; /* Permite scroll se a lista for longa */
padding: 8px; width: 300px; /* Dimensões e espaçamento interno */
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
display: none; /* Começa oculto (controlado por show/hideElement) */
animation: fadeIn 0.2s ease-out; /* Animação suave ao aparecer */
}
#${OVERLAY_ID} {
position: fixed; top: 0; left: 0; width: 100%; height: 100%;
background-color: rgba(0, 0, 0, 0.6); /* Fundo semi-transparente (padrão light) */
z-index: 2147483645; /* Z-index muito alto para ficar sobre tudo */
display: flex; align-items: center; justify-content: center; /* Centraliza o conteúdo */
overflow: hidden; /* Impede scroll do body enquanto aberto */
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
animation: fadeIn 0.3s ease-out; /* Animação suave ao aparecer */
}
#${CONTENT_ID} {
background-color: #fff; /* Fundo branco (padrão light) */
color: #333; /* Texto escuro (padrão light) */
padding: 25px 35px; border-radius: 12px; /* Espaçamento interno e bordas arredondadas */
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
max-width: 800px; width: 90%; max-height: 85vh; /* Limites de tamanho */
overflow-y: auto; /* Scroll interno se o conteúdo for maior que a altura máxima */
position: relative; /* Para posicionamento absoluto do botão de fechar */
font-size: 16px; line-height: 1.6; /* Tamanho e espaçamento de linha do texto */
animation: slideInUp 0.3s ease-out; /* Animação de entrada (desliza de baixo para cima) */
white-space: normal; /* Permite quebra de linha normal baseada no HTML */
box-sizing: border-box; /* Garante que padding não aumente o tamanho total além de max-width/width */
}
#${CONTENT_ID} p { margin-top: 0; margin-bottom: 1em; } /* Margem padrão para parágrafos dentro do conteúdo */
#${CONTENT_ID} ul { margin: 1em 0; padding-left: 1.5em; } /* Adiciona padding à esquerda para listas (bullet points com emoji) */
#${CONTENT_ID} li { list-style-type: none; margin-bottom: 0.5em; } /* Remove marcador padrão da lista (usa emoji) e adiciona espaço abaixo */
#${CLOSE_BUTTON_ID} {
position: absolute; top: 10px; right: 15px; /* Canto superior direito do conteúdo */
font-size: 28px; color: #aaa; /* Cinza claro (padrão light) */
cursor: pointer;
transition: color 0.2s; line-height: 1; z-index: 1; /* Garante que fique acima do texto scrollável */
}
#${CLOSE_BUTTON_ID}:hover { color: #333; } /* Cor mais escura no hover (light) */
#${ERROR_ID} {
position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); /* Centralizado na parte inferior */
background-color: #e53e3e; color: white; padding: 12px 20px; /* Vermelho para erro */
border-radius: 6px; z-index: 2147483646; /* Acima de tudo, até do overlay */
font-size: 14px; box-shadow: 0 2px 8px rgba(0,0,0,0.2);
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
animation: fadeIn 0.3s, fadeOut 0.3s 3.7s forwards; /* Fade in, espera 3.7s, fade out */
}
.retry-button { /* Estilo para o botão "Try Again" em caso de erro */
display: block; margin: 20px auto 0; padding: 8px 16px; /* Centralizado abaixo do erro */
background-color: #4a90e2; /* Azul (padrão light) */
color: white; border: none; border-radius: 5px;
cursor: pointer; font-size: 14px; transition: background-color 0.2s;
}
.retry-button:hover { background-color: #3a7bd5; } /* Azul mais escuro no hover (light) */
/* --- Estilos do Dropdown --- */
.model-group { margin-bottom: 8px; } /* Espaço abaixo de cada grupo de modelos */
.group-header-container { /* Container para Nome do Serviço + Link Reset Key */
display: flex; align-items: center; justify-content: space-between; /* Alinhamento flex */
padding: 8px 12px; background: #f7f7f7; /* Fundo cinza claro */
border-radius: 6px; margin-bottom: 4px; /* Bordas arredondadas e espaço abaixo */
}
.group-header-text { /* Texto do nome do serviço (ex: OpenAI) */
font-weight: 600; color: #333; font-size: 13px;
text-transform: uppercase; letter-spacing: 0.5px; /* Estilo de título */
flex-grow: 1; /* Ocupa espaço disponível, empurrando o link para a direita */
}
.reset-key-link { /* Link "Reset Key" */
font-size: 11px; color: #666; text-decoration: none;
margin-left: 10px; /* Espaço à esquerda */
white-space: nowrap; /* Impede quebra de linha */
cursor: pointer;
transition: color 0.2s;
}
.reset-key-link:hover { color: #1a73e8; } /* Azul no hover */
.model-item { /* Estilo para cada item de modelo clicável */
padding: 10px 14px; margin: 2px 0; border-radius: 6px; /* Espaçamento e bordas */
transition: background-color 0.15s ease-out, color 0.15s ease-out; /* Transição suave no hover */
font-size: 14px; cursor: pointer; color: #444; display: block; /* Estilo de texto e cursor */
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; /* Evita quebra e adiciona '...' em nomes longos */
}
.model-item:hover { background-color: #eef6ff; color: #1a73e8; } /* Efeito hover (fundo azul claro, texto azul) */
.add-model-item { /* Estilo adicional para o item "+ Add Custom Model" */
color: #666; /* Cor mais apagada */
font-style: italic; /* Itálico */
}
.add-model-item:hover { background-color: #f0f0f0; color: #333; } /* Hover diferente para o item de adicionar */
/* --- Estilos de Conteúdo (Glow, Qualidade do Artigo) --- */
.glow { /* Efeito de brilho pulsante para a mensagem "Summarizing..." */
font-size: 1.4em; text-align: center; padding: 40px 0;
/* Aplica a animação 'glow' definida abaixo */
animation: glow 2.5s ease-in-out infinite;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
font-weight: 400;
}
/* Cores para as classes de qualidade do artigo (usadas no span dentro do sumário) */
span.article-excellent { color: #2ecc71; font-weight: bold; } /* Verde brilhante */
span.article-good { color: #3498db; font-weight: bold; } /* Azul */
span.article-average { color: #f39c12; font-weight: bold; } /* Laranja */
span.article-bad { color: #e74c3c; font-weight: bold; } /* Vermelho */
span.article-very-bad { color: #c0392b; font-weight: bold; } /* Vermelho escuro */
/* --- Animações --- */
/* Keyframes para a animação 'glow': cicla entre azul, roxo e vermelho com sombra de texto */
@keyframes glow {
0%, 100% { color: #4a90e2; text-shadow: 0 0 10px rgba(74, 144, 226, 0.6), 0 0 20px rgba(74, 144, 226, 0.4); } /* Azul */
33% { color: #9b59b6; text-shadow: 0 0 12px rgba(155, 89, 182, 0.7), 0 0 25px rgba(155, 89, 182, 0.5); } /* Roxo */
66% { color: #e74c3c; text-shadow: 0 0 12px rgba(231, 76, 60, 0.7), 0 0 25px rgba(231, 76, 60, 0.5); } /* Vermelho */
}
/* Animação simples de Fade In (usada no overlay, dropdown, notificação de erro) */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
/* Animação simples de Fade Out (usada na notificação de erro) */
@keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }
/* Animação de Slide In de baixo para cima (usada no conteúdo do overlay) */
@keyframes slideInUp {
from { transform: translateY(30px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
/* --- Dark Mode Override (Adaptação automática ao tema escuro do sistema) --- */
@media (prefers-color-scheme: dark) {
/* Fundo do overlay mais escuro */
#${OVERLAY_ID} {
background-color: rgba(20, 20, 20, 0.7); /* Fundo mais opaco e escuro */
}
/* Conteúdo do sumário com fundo escuro e texto claro */
#${CONTENT_ID} {
background-color: #2c2c2c; /* Cinza bem escuro */
color: #e0e0e0; /* Texto cinza claro */
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4); /* Sombra um pouco mais visível */
}
/* Botão de fechar ('×') com cores invertidas */
#${CLOSE_BUTTON_ID} {
color: #888; /* Cinza médio */
}
#${CLOSE_BUTTON_ID}:hover {
color: #eee; /* Quase branco no hover */
}
/* Botão "Try Again" com estilo adaptado para dark mode */
.retry-button {
background-color: #555; /* Cinza médio */
color: #eee; /* Texto claro */
}
.retry-button:hover {
background-color: #666; /* Cinza um pouco mais claro no hover */
}
/* Dropdown com fundo escuro e texto claro */
#${DROPDOWN_ID} {
background: #333; /* Fundo escuro para dropdown */
border-color: #555; /* Borda mais escura */
}
.model-item {
color: #ccc; /* Texto do item mais claro */
}
.model-item:hover {
background-color: #444; /* Fundo de hover mais escuro */
color: #fff; /* Texto branco no hover */
}
/* Itens do cabeçalho do grupo no dropdown */
.group-header-container {
background: #444; /* Fundo do cabeçalho do grupo */
}
.group-header-text {
color: #eee; /* Texto do cabeçalho claro */
}
.reset-key-link {
color: #aaa; /* Link de reset mais claro */
}
.reset-key-link:hover {
color: #fff; /* Link de reset branco no hover */
}
/* Item "+ Add Custom Model" no dropdown */
.add-model-item {
color: #999; /* Item de adicionar mais claro */
}
.add-model-item:hover {
background-color: #4a4a4a; /* Fundo de hover */
color: #eee; /* Texto claro no hover */
}
/* Separador (linha hr) no dropdown */
hr {
/* !important pode ser necessário para sobrescrever estilos inline */
border-top-color: #555 !important;
}
/* Cores de qualidade (opcionalmente ajustar para melhor contraste em dark mode) */
/* span.article-excellent { color: #36d880; } */
/* span.article-good { color: #4aa9f2; } */
/* As cores atuais parecem ter contraste razoável, mantendo por enquanto */
/* Ajuste de cor para o brilho 'glow' no modo escuro (opcional) */
/* As cores atuais do glow parecem funcionar bem, mas poderiam ser ajustadas aqui */
/* @keyframes glow-dark { ... } */
/* .glow { animation-name: glow-dark; } */
}
/* --- Mobile Responsiveness --- */
/* Ajustes para telas pequenas (ex: smartphones com largura máxima de 600px) */
@media (max-width: 600px) {
/* Faz o conteúdo do overlay ocupar a tela inteira para melhor uso do espaço */
#${CONTENT_ID} {
width: 100%; /* Largura total */
height: 100%; /* Altura total */
max-width: none; /* Remove limite de largura máxima */
max-height: none; /* Remove limite de altura máxima */
border-radius: 0; /* Remove cantos arredondados (visual edge-to-edge) */
padding: 20px 15px; /* Ajusta padding interno para telas menores */
box-shadow: none; /* Remove sombra (opcional, visual mais limpo) */
animation: none; /* Desabilita animação slideInUp em mobile (opcional) */
font-size: 15px; /* Pode reduzir um pouco a fonte se necessário */
}
/* Ajusta posição do botão de fechar para o novo padding e tamanho */
#${CLOSE_BUTTON_ID} {
top: 8px;
right: 8px;
font-size: 32px; /* Aumenta um pouco o tamanho do '×' para facilitar o toque */
}
/* Esconde explicitamente o botão flutuante 'S' e o dropdown quando o overlay estiver aberto */
/* Embora o overlay já tenha z-index maior, isso garante que não haja interações acidentais */
#${OVERLAY_ID} ~ #${BUTTON_ID},
#${OVERLAY_ID} ~ #${DROPDOWN_ID} {
display: none !important; /* Garante que fiquem escondidos */
}
/* Opcional: Posicionar o botão 'S' um pouco mais para dentro em telas pequenas */
/* #${BUTTON_ID} { bottom: 15px; right: 15px; } */
/* Opcional: Aumentar um pouco o tamanho do botão 'S' em mobile */
/* #${BUTTON_ID} { width: 55px; height: 55px; font-size: 26px; } */
}
`)
}
// --- Inicialização ---
// noinspection JSIgnoredPromiseFromCall
initialize() // Chama a função principal para iniciar o script assim que ele for carregado
})()
