Spaces:
Running
Running
Agrega un botón para poder cambiar a modo claro (oscuro por defecto) en caso de que el usuario desee una interfaz más clara. Y los textos en toda la interfaz debe ser en Español, excepto por el nombre. Y añade además, un contador de palabras justo igual al contador de tokens (uno encima de otro de forma estetica y armoniosa).
Browse files- index.html +59 -25
index.html
CHANGED
|
@@ -3,8 +3,8 @@
|
|
| 3 |
<head>
|
| 4 |
<meta charset="UTF-8">
|
| 5 |
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 6 |
-
<title>TokenTally Tracker</title>
|
| 7 |
-
|
| 8 |
<script src="https://cdn.tailwindcss.com"></script>
|
| 9 |
<script src="https://unpkg.com/feather-icons"></script>
|
| 10 |
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
|
|
@@ -12,7 +12,10 @@
|
|
| 12 |
.gradient-bg {
|
| 13 |
background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
|
| 14 |
}
|
| 15 |
-
.
|
|
|
|
|
|
|
|
|
|
| 16 |
transition: all 0.3s ease;
|
| 17 |
}
|
| 18 |
.token-counter.pulse {
|
|
@@ -28,35 +31,39 @@
|
|
| 28 |
}
|
| 29 |
</style>
|
| 30 |
</head>
|
| 31 |
-
<body class="gradient-bg min-h-screen text-gray-200 flex flex-col">
|
| 32 |
-
|
| 33 |
<div class="max-w-7xl mx-auto flex justify-between items-center">
|
| 34 |
<div class="flex items-center space-x-2">
|
| 35 |
<i data-feather="hash" class="text-blue-400"></i>
|
| 36 |
<h1 class="text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-400 to-blue-600">TokenTally</h1>
|
| 37 |
</div>
|
| 38 |
<div class="flex items-center space-x-4">
|
|
|
|
|
|
|
|
|
|
|
|
|
| 39 |
<button class="px-4 py-2 rounded-lg bg-blue-600 hover:bg-blue-700 transition flex items-center space-x-2">
|
| 40 |
<i data-feather="info" class="w-4 h-4"></i>
|
| 41 |
-
<span>
|
| 42 |
</button>
|
| 43 |
</div>
|
| 44 |
-
|
| 45 |
</header>
|
| 46 |
|
| 47 |
<main class="flex-grow flex items-center justify-center px-4 sm:px-6 lg:px-8">
|
| 48 |
<div class="max-w-6xl w-full grid grid-cols-1 lg:grid-cols-2 gap-8 items-center">
|
| 49 |
<div class="space-y-6">
|
| 50 |
-
<h2 class="text-3xl font-bold text-white">
|
| 51 |
<p class="text-slate-300 max-w-lg">
|
| 52 |
-
|
| 53 |
</p>
|
| 54 |
-
|
| 55 |
<textarea
|
| 56 |
id="textInput"
|
| 57 |
class="w-full h-96 p-4 rounded-lg bg-slate-800 border border-slate-700 focus:border-blue-500 focus:ring-1 focus:ring-blue-500 text-slate-200 placeholder-slate-500 resize-none transition"
|
| 58 |
-
placeholder="
|
| 59 |
-
|
| 60 |
<div class="absolute bottom-4 right-4 flex items-center space-x-2">
|
| 61 |
<button id="clearBtn" class="p-2 rounded-full bg-slate-700 hover:bg-slate-600 transition">
|
| 62 |
<i data-feather="x" class="w-4 h-4"></i>
|
|
@@ -68,9 +75,17 @@
|
|
| 68 |
<div class="flex justify-center">
|
| 69 |
<div id="counter" class="token-counter w-64 h-64 rounded-full flex flex-col items-center justify-center bg-slate-800 border-2 border-blue-500 p-6 relative overflow-hidden glow">
|
| 70 |
<div class="absolute inset-0 bg-gradient-to-br from-blue-900/30 to-blue-600/10 rounded-full"></div>
|
| 71 |
-
<
|
| 72 |
-
|
| 73 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 74 |
</div>
|
| 75 |
</div>
|
| 76 |
</div>
|
|
@@ -79,26 +94,44 @@
|
|
| 79 |
<footer class="py-4 px-4 sm:px-6 lg:px-8 border-t border-slate-700">
|
| 80 |
<div class="max-w-7xl mx-auto flex justify-between items-center text-slate-400 text-sm">
|
| 81 |
<div>
|
| 82 |
-
|
| 83 |
</div>
|
| 84 |
<div>
|
| 85 |
-
<span id="lastUpdated">
|
| 86 |
</div>
|
| 87 |
-
|
| 88 |
</footer>
|
| 89 |
|
| 90 |
<script>
|
| 91 |
feather.replace();
|
| 92 |
-
|
| 93 |
const textInput = document.getElementById('textInput');
|
| 94 |
const tokenCount = document.getElementById('tokenCount');
|
|
|
|
| 95 |
const counter = document.getElementById('counter');
|
| 96 |
const clearBtn = document.getElementById('clearBtn');
|
| 97 |
const progressBar = document.getElementById('progressBar');
|
| 98 |
const lastUpdated = document.getElementById('lastUpdated');
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 99 |
|
| 100 |
-
|
| 101 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 102 |
if (!text.trim()) return 0;
|
| 103 |
const wordCount = text.trim().split(/\s+/).length;
|
| 104 |
const charCount = text.length;
|
|
@@ -109,9 +142,10 @@
|
|
| 109 |
function updateCounter() {
|
| 110 |
const text = textInput.value;
|
| 111 |
const count = estimateTokens(text);
|
|
|
|
| 112 |
tokenCount.textContent = count.toLocaleString();
|
| 113 |
-
|
| 114 |
-
|
| 115 |
if (count > 0) {
|
| 116 |
counter.classList.add('pulse');
|
| 117 |
} else {
|
|
@@ -123,8 +157,8 @@
|
|
| 123 |
progressBar.style.width = `${progress}%`;
|
| 124 |
|
| 125 |
// Update last updated time
|
| 126 |
-
lastUpdated.textContent = `
|
| 127 |
-
|
| 128 |
|
| 129 |
textInput.addEventListener('input', updateCounter);
|
| 130 |
|
|
|
|
| 3 |
<head>
|
| 4 |
<meta charset="UTF-8">
|
| 5 |
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 6 |
+
<title>TokenTally Tracker - Contador de Tokens</title>
|
| 7 |
+
<link rel="icon" type="image/x-icon" href="/static/favicon.ico">
|
| 8 |
<script src="https://cdn.tailwindcss.com"></script>
|
| 9 |
<script src="https://unpkg.com/feather-icons"></script>
|
| 10 |
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
|
|
|
|
| 12 |
.gradient-bg {
|
| 13 |
background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
|
| 14 |
}
|
| 15 |
+
.dark .gradient-bg {
|
| 16 |
+
background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
|
| 17 |
+
}
|
| 18 |
+
.token-counter {
|
| 19 |
transition: all 0.3s ease;
|
| 20 |
}
|
| 21 |
.token-counter.pulse {
|
|
|
|
| 31 |
}
|
| 32 |
</style>
|
| 33 |
</head>
|
| 34 |
+
<body class="gradient-bg min-h-screen text-gray-200 dark:text-gray-200 flex flex-col dark:bg-gray-900">
|
| 35 |
+
<header class="py-6 px-4 sm:px-6 lg:px-8 border-b border-slate-700">
|
| 36 |
<div class="max-w-7xl mx-auto flex justify-between items-center">
|
| 37 |
<div class="flex items-center space-x-2">
|
| 38 |
<i data-feather="hash" class="text-blue-400"></i>
|
| 39 |
<h1 class="text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-400 to-blue-600">TokenTally</h1>
|
| 40 |
</div>
|
| 41 |
<div class="flex items-center space-x-4">
|
| 42 |
+
<button id="themeToggle" class="p-2 rounded-full bg-slate-700 hover:bg-slate-600 transition">
|
| 43 |
+
<i data-feather="sun" class="w-4 h-4 hidden dark:block"></i>
|
| 44 |
+
<i data-feather="moon" class="w-4 h-4 block dark:hidden"></i>
|
| 45 |
+
</button>
|
| 46 |
<button class="px-4 py-2 rounded-lg bg-blue-600 hover:bg-blue-700 transition flex items-center space-x-2">
|
| 47 |
<i data-feather="info" class="w-4 h-4"></i>
|
| 48 |
+
<span>Acerca de</span>
|
| 49 |
</button>
|
| 50 |
</div>
|
| 51 |
+
</div>
|
| 52 |
</header>
|
| 53 |
|
| 54 |
<main class="flex-grow flex items-center justify-center px-4 sm:px-6 lg:px-8">
|
| 55 |
<div class="max-w-6xl w-full grid grid-cols-1 lg:grid-cols-2 gap-8 items-center">
|
| 56 |
<div class="space-y-6">
|
| 57 |
+
<h2 class="text-3xl font-bold text-white">Calculadora de Contexto para IA</h2>
|
| 58 |
<p class="text-slate-300 max-w-lg">
|
| 59 |
+
Escribe o pega tu texto a continuación para calcular el conteo de tokens para ventanas de contexto de IA. Ningún dato es almacenado o enviado a servidores.
|
| 60 |
</p>
|
| 61 |
+
<div class="relative">
|
| 62 |
<textarea
|
| 63 |
id="textInput"
|
| 64 |
class="w-full h-96 p-4 rounded-lg bg-slate-800 border border-slate-700 focus:border-blue-500 focus:ring-1 focus:ring-blue-500 text-slate-200 placeholder-slate-500 resize-none transition"
|
| 65 |
+
placeholder="Escribe o pega tu texto aquí..."
|
| 66 |
+
></textarea>
|
| 67 |
<div class="absolute bottom-4 right-4 flex items-center space-x-2">
|
| 68 |
<button id="clearBtn" class="p-2 rounded-full bg-slate-700 hover:bg-slate-600 transition">
|
| 69 |
<i data-feather="x" class="w-4 h-4"></i>
|
|
|
|
| 75 |
<div class="flex justify-center">
|
| 76 |
<div id="counter" class="token-counter w-64 h-64 rounded-full flex flex-col items-center justify-center bg-slate-800 border-2 border-blue-500 p-6 relative overflow-hidden glow">
|
| 77 |
<div class="absolute inset-0 bg-gradient-to-br from-blue-900/30 to-blue-600/10 rounded-full"></div>
|
| 78 |
+
<div class="text-center z-10">
|
| 79 |
+
<div class="mb-4">
|
| 80 |
+
<span class="text-4xl font-bold text-blue-400" id="wordCount">0</span>
|
| 81 |
+
<span class="text-slate-400 block text-sm">Palabras</span>
|
| 82 |
+
</div>
|
| 83 |
+
<div>
|
| 84 |
+
<span class="text-4xl font-bold text-blue-400" id="tokenCount">0</span>
|
| 85 |
+
<span class="text-slate-400 block text-sm">Tokens</span>
|
| 86 |
+
</div>
|
| 87 |
+
</div>
|
| 88 |
+
<div class="absolute bottom-0 left-0 right-0 h-1 bg-blue-500 transition-all duration-300" id="progressBar" style="width: 0%"></div>
|
| 89 |
</div>
|
| 90 |
</div>
|
| 91 |
</div>
|
|
|
|
| 94 |
<footer class="py-4 px-4 sm:px-6 lg:px-8 border-t border-slate-700">
|
| 95 |
<div class="max-w-7xl mx-auto flex justify-between items-center text-slate-400 text-sm">
|
| 96 |
<div>
|
| 97 |
+
Hecho con <i data-feather="heart" class="w-3 h-3 inline text-pink-500"></i> para entusiastas de IA
|
| 98 |
</div>
|
| 99 |
<div>
|
| 100 |
+
<span id="lastUpdated">Última actualización: Ahora mismo</span>
|
| 101 |
</div>
|
| 102 |
+
</div>
|
| 103 |
</footer>
|
| 104 |
|
| 105 |
<script>
|
| 106 |
feather.replace();
|
|
|
|
| 107 |
const textInput = document.getElementById('textInput');
|
| 108 |
const tokenCount = document.getElementById('tokenCount');
|
| 109 |
+
const wordCount = document.getElementById('wordCount');
|
| 110 |
const counter = document.getElementById('counter');
|
| 111 |
const clearBtn = document.getElementById('clearBtn');
|
| 112 |
const progressBar = document.getElementById('progressBar');
|
| 113 |
const lastUpdated = document.getElementById('lastUpdated');
|
| 114 |
+
const themeToggle = document.getElementById('themeToggle');
|
| 115 |
+
// Tema oscuro/claro
|
| 116 |
+
if (localStorage.getItem('theme') === 'light' || (!localStorage.getItem('theme') && window.matchMedia('(prefers-color-scheme: light)').matches)) {
|
| 117 |
+
document.documentElement.classList.remove('dark');
|
| 118 |
+
} else {
|
| 119 |
+
document.documentElement.classList.add('dark');
|
| 120 |
+
}
|
| 121 |
|
| 122 |
+
themeToggle.addEventListener('click', () => {
|
| 123 |
+
document.documentElement.classList.toggle('dark');
|
| 124 |
+
localStorage.setItem('theme', document.documentElement.classList.contains('dark') ? 'dark' : 'light');
|
| 125 |
+
});
|
| 126 |
+
|
| 127 |
+
// Contador de palabras
|
| 128 |
+
function countWords(text) {
|
| 129 |
+
if (!text.trim()) return 0;
|
| 130 |
+
return text.trim().split(/\s+/).length;
|
| 131 |
+
}
|
| 132 |
+
|
| 133 |
+
// Estimación simple de tokens (4 chars ≈ 1 token)
|
| 134 |
+
function estimateTokens(text) {
|
| 135 |
if (!text.trim()) return 0;
|
| 136 |
const wordCount = text.trim().split(/\s+/).length;
|
| 137 |
const charCount = text.length;
|
|
|
|
| 142 |
function updateCounter() {
|
| 143 |
const text = textInput.value;
|
| 144 |
const count = estimateTokens(text);
|
| 145 |
+
const words = countWords(text);
|
| 146 |
tokenCount.textContent = count.toLocaleString();
|
| 147 |
+
wordCount.textContent = words.toLocaleString();
|
| 148 |
+
// Visual feedback
|
| 149 |
if (count > 0) {
|
| 150 |
counter.classList.add('pulse');
|
| 151 |
} else {
|
|
|
|
| 157 |
progressBar.style.width = `${progress}%`;
|
| 158 |
|
| 159 |
// Update last updated time
|
| 160 |
+
lastUpdated.textContent = `Última actualización: ${new Date().toLocaleTimeString()}`;
|
| 161 |
+
}
|
| 162 |
|
| 163 |
textInput.addEventListener('input', updateCounter);
|
| 164 |
|