DeepSeek Tokens Remaining y Caracteres

Greasy Fork is available in English.
DeepSeek Tokens Remaining y Caracteres

Real-time token and character counter for DeepSeek Chat
当前为 2025-05-19 提交的版本，查看最新版本。
换行
// ==UserScript==
// @name         DeepSeek Tokens Remaining y Caracteres
// @version      1.1
// @description  Real-time token and character counter for DeepSeek Chat 
// @author       Steve Casanova
// @namespace    Steve Casanova
// @match        https://chat.deepseek.com/*
// @grant        none
// @license MIT 
// ==/UserScript==

(function() {
    'use strict';

    // Configuración
    const MAX_TOKENS_PER_MESSAGE = 4096; // Límite de tokens por mensaje en DeepSeek
    const TOKEN_RATIO = 4; // 1 token ≈ 4 caracteres (aproximación)

    // Esperar a que el textarea esté disponible
    const waitForTextarea = setInterval(() => {
        const textarea = document.getElementById('chat-input');
        if (textarea) {
            clearInterval(waitForTextarea);
            setupCounter(textarea);
        }
    }, 500);

    function setupCounter(textarea) {
        // Crear el contador
        const counter = document.createElement('div');
        counter.style.position = 'fixed';
        counter.style.bottom = '60px';
        counter.style.right = '20px';
        counter.style.backgroundColor = 'rgba(0, 0, 0, 0.7)';
        counter.style.color = 'white';
        counter.style.padding = '8px 12px';
        counter.style.borderRadius = '8px';
        counter.style.fontFamily = 'Arial, sans-serif';
        counter.style.fontSize = '14px';
        counter.style.zIndex = '9999';
        counter.style.boxShadow = '0 2px 5px rgba(0,0,0,0.3)';
        
        // Función para actualizar el contador
        const updateCounter = () => {
            const text = textarea.value;
            const charCount = text.length;
            const tokenEstimate = Math.ceil(charCount / TOKEN_RATIO);
            
            // Calcular porcentaje usado
            const percentUsed = Math.min(100, Math.round((tokenEstimate / MAX_TOKENS_PER_MESSAGE) * 100));
            
            // Determinar color basado en el porcentaje
            let color;
            if (percentUsed < 70) {
                color = '#4CAF50'; // Verde
            } else if (percentUsed < 90) {
                color = '#FFC107'; // Amarillo
            } else {
                color = '#F44336'; // Rojo
            }
            
            counter.innerHTML = `
                <div style="margin-bottom: 5px;"><strong>DeepSeek Token Counter</strong></div>
                <div>Caracteres: ${charCount}</div>
                <div>Tokens estimados: <span style="color: ${color}">${tokenEstimate}/${MAX_TOKENS_PER_MESSAGE}</span></div>
                <div style="width: 100%; height: 5px; background: #333; margin-top: 5px; border-radius: 3px;">
                    <div style="width: ${percentUsed}%; height: 100%; background: ${color}; border-radius: 3px;"></div>
                </div>
            `;
            
            // Mostrar advertencia si se excede el límite
            if (tokenEstimate >= MAX_TOKENS_PER_MESSAGE) {
                counter.innerHTML += `<div style="color: #F44336; font-weight: bold; margin-top: 5px;">¡Máximo de tokens alcanzado!</div>`;
            }
        };
        
        // Event listeners
        textarea.addEventListener('input', updateCounter);
        textarea.addEventListener('keyup', updateCounter);
        textarea.addEventListener('change', updateCounter);
        
        // Inicializar
        updateCounter();
        document.body.appendChild(counter);
        
        // Asegurarse de que el contador permanezca visible
        const observer = new MutationObserver(() => {
            if (!document.body.contains(counter)) {
                document.body.appendChild(counter);
            }
        });
        
        observer.observe(document.body, { childList: true });
    }
})();