style: redesign UI with modern glassmorphism, ambient animations, and refreshed typography

index.html

@@ -4,292 +4,374 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>OpenAI Privacy Filter</title>
-    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Outfit:wght@500;700;800&display=swap" rel="stylesheet">
     <style>
+        /* Modern CSS Reset & Variables */
         :root {
-            --bg-color: #0f172a;
-            --panel-bg: rgba(30, 41, 59, 0.7);
-            --border-color: rgba(255, 255, 255, 0.1);
-            --text-main: #f8fafc;
-            --text-muted: #94a3b8;
-            --accent: #3b82f6;
-            --accent-hover: #2563eb;
-            --glass-blur: blur(12px);
+            /* Palette */
+            --bg-color: #030712;
+            --surface: rgba(17, 24, 39, 0.65);
+            --surface-hover: rgba(31, 41, 55, 0.75);
+            --border: rgba(255, 255, 255, 0.08);
+            --text-primary: #f9fafb;
+            --text-secondary: #9ca3af;
+            --accent: #6366f1;
+            --accent-glow: rgba(99, 102, 241, 0.5);
             
             /* Entity Colors */
-            --entity-account_number: #ef4444;
-            --entity-private_address: #f59e0b;
-            --entity-private_email: #10b981;
-            --entity-private_person: #8b5cf6;
-            --entity-private_phone: #ec4899;
-            --entity-private_url: #06b6d4;
-            --entity-private_date: #eab308;
-            --entity-secret: #ef4444;
+            --entity-account_number: #ef4444; /* Red */
+            --entity-private_address: #f59e0b; /* Amber */
+            --entity-private_email: #10b981; /* Emerald */
+            --entity-private_person: #8b5cf6; /* Violet */
+            --entity-private_phone: #ec4899; /* Pink */
+            --entity-private_url: #06b6d4; /* Cyan */
+            --entity-private_date: #eab308; /* Yellow */
+            --entity-secret: #f43f5e; /* Rose */
         }
-
+        
         body {
             margin: 0;
             padding: 0;
+            background-color: var(--bg-color);
+            color: var(--text-primary);
             font-family: 'Inter', sans-serif;
-            background: radial-gradient(circle at 50% -20%, #1e293b, var(--bg-color));
-            color: var(--text-main);
             min-height: 100vh;
             display: flex;
             flex-direction: column;
-            align-items: center;
+            position: relative;
             overflow-x: hidden;
         }
 
+        /* Ambient Background Orbs */
+        .ambient-orb {
+            position: absolute;
+            border-radius: 50%;
+            filter: blur(120px);
+            z-index: -1;
+            animation: float 20s infinite ease-in-out alternate;
+        }
+        .orb-1 { width: 400px; height: 400px; background: rgba(99, 102, 241, 0.15); top: -100px; left: -100px; }
+        .orb-2 { width: 500px; height: 500px; background: rgba(139, 92, 246, 0.12); bottom: -150px; right: -100px; animation-delay: -5s; }
+        .orb-3 { width: 300px; height: 300px; background: rgba(16, 185, 129, 0.1); top: 40%; left: 50%; transform: translate(-50%, -50%); animation-delay: -10s; }
+
+        @keyframes float {
+            0% { transform: translate(0, 0) scale(1); }
+            100% { transform: translate(30px, 50px) scale(1.1); }
+        }
+
         .container {
-            width: 100%;
             max-width: 1000px;
-            margin: 40px auto;
-            padding: 0 20px;
+            margin: 0 auto;
+            padding: 4rem 2rem;
+            width: 100%;
             box-sizing: border-box;
+            z-index: 1;
             display: flex;
             flex-direction: column;
-            gap: 24px;
+            gap: 2.5rem;
         }
 
         header {
             text-align: center;
-            margin-bottom: 20px;
-            animation: fadeIn 0.8s ease-out;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            gap: 1.25rem;
+            animation: fadeDown 0.8s ease-out;
         }
 
+        .badge-container {
+            display: flex;
+            gap: 0.75rem;
+            flex-wrap: wrap;
+            justify-content: center;
+        }
+
+        .badge {
+            background: rgba(255, 255, 255, 0.05);
+            border: 1px solid var(--border);
+            padding: 0.35rem 0.85rem;
+            border-radius: 100px;
+            font-size: 0.8rem;
+            font-weight: 500;
+            color: var(--text-secondary);
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+            backdrop-filter: blur(10px);
+        }
+
+        .badge svg { width: 14px; height: 14px; color: var(--accent); }
+
         h1 {
-            font-size: 2.5rem;
-            font-weight: 700;
-            margin-bottom: 10px;
-            background: linear-gradient(to right, #60a5fa, #a78bfa);
+            font-family: 'Outfit', sans-serif;
+            font-size: 3.5rem;
+            font-weight: 800;
+            margin: 0;
+            line-height: 1.1;
+            letter-spacing: -0.02em;
+            background: linear-gradient(135deg, #fff 0%, #a5b4fc 100%);
             -webkit-background-clip: text;
             -webkit-text-fill-color: transparent;
         }
 
-        p.subtitle {
-            color: var(--text-muted);
-            font-size: 1.1rem;
-            max-width: 600px;
-            margin: 0 auto;
+        .subtitle {
+            color: var(--text-secondary);
+            font-size: 1.15rem;
+            max-width: 680px;
             line-height: 1.6;
+            margin: 0;
         }
 
         .glass-panel {
-            background: var(--panel-bg);
-            backdrop-filter: var(--glass-blur);
-            -webkit-backdrop-filter: var(--glass-blur);
-            border: 1px solid var(--border-color);
-            border-radius: 16px;
-            padding: 24px;
-            box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
-            animation: slideUp 0.6s ease-out;
+            background: var(--surface);
+            backdrop-filter: blur(24px);
+            -webkit-backdrop-filter: blur(24px);
+            border: 1px solid var(--border);
+            border-radius: 20px;
+            padding: 2.5rem;
+            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
+            transition: transform 0.3s ease, border-color 0.3s ease;
+        }
+
+        .input-wrapper {
+            position: relative;
+            margin-bottom: 1.5rem;
         }
 
         textarea {
             width: 100%;
-            height: 150px;
-            background: rgba(15, 23, 42, 0.6);
-            border: 1px solid var(--border-color);
+            min-height: 180px;
+            background: rgba(0, 0, 0, 0.2);
+            border: 1px solid var(--border);
             border-radius: 12px;
-            color: var(--text-main);
+            color: var(--text-primary);
             font-family: 'Inter', sans-serif;
-            font-size: 1rem;
-            padding: 16px;
-            box-sizing: border-box;
+            font-size: 1.05rem;
+            line-height: 1.6;
+            padding: 1.25rem;
             resize: vertical;
-            transition: border-color 0.3s;
-            line-height: 1.5;
+            box-sizing: border-box;
+            transition: all 0.3s ease;
         }
 
         textarea:focus {
             outline: none;
             border-color: var(--accent);
-            box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
+            background: rgba(0, 0, 0, 0.3);
+            box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1);
         }
 
-        button {
-            background: var(--accent);
+        textarea::placeholder { color: #4b5563; }
+
+        .btn-primary {
+            background: linear-gradient(135deg, var(--accent) 0%, #4f46e5 100%);
             color: white;
             border: none;
-            border-radius: 8px;
-            padding: 12px 24px;
+            border-radius: 10px;
+            padding: 0.875rem 2rem;
             font-size: 1rem;
             font-weight: 600;
             cursor: pointer;
-            transition: all 0.3s;
             display: flex;
             align-items: center;
             justify-content: center;
-            gap: 8px;
-            width: fit-content;
+            gap: 0.5rem;
+            transition: all 0.2s ease;
+            box-shadow: 0 4px 14px 0 var(--accent-glow);
         }
 
-        button:hover {
-            background: var(--accent-hover);
+        .btn-primary:hover {
             transform: translateY(-2px);
-            box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
-        }
-
-        button:active {
-            transform: translateY(0);
+            box-shadow: 0 6px 20px 0 var(--accent-glow);
+            filter: brightness(1.1);
         }
 
-        button:disabled {
-            background: #475569;
-            cursor: not-allowed;
-            transform: none;
-            box-shadow: none;
-        }
+        .btn-primary:active { transform: translateY(0); }
+        .btn-primary:disabled { opacity: 0.6; cursor: not-allowed; transform: none; box-shadow: none; }
 
-        .loading-spinner {
-            width: 20px;
-            height: 20px;
-            border: 3px solid rgba(255,255,255,0.3);
+        /* Spinner */
+        .spinner {
+            width: 18px;
+            height: 18px;
+            border: 2px solid rgba(255,255,255,0.3);
             border-radius: 50%;
             border-top-color: white;
-            animation: spin 1s ease-in-out infinite;
+            animation: spin 0.8s linear infinite;
             display: none;
         }
 
-        .results-area {
-            display: flex;
-            flex-direction: column;
-            gap: 20px;
-        }
+        @keyframes spin { 100% { transform: rotate(360deg); } }
+        @keyframes fadeDown { 0% { opacity: 0; transform: translateY(-20px); } 100% { opacity: 1; transform: translateY(0); } }
+        @keyframes fadeUp { 0% { opacity: 0; transform: translateY(20px); } 100% { opacity: 1; transform: translateY(0); } }
 
-        .highlighted-text {
-            font-size: 1.1rem;
-            line-height: 1.8;
-            white-space: pre-wrap;
-            background: rgba(15, 23, 42, 0.4);
-            padding: 20px;
-            border-radius: 12px;
-            border: 1px solid rgba(255, 255, 255, 0.05);
-            min-height: 100px;
+        /* Results Area */
+        .results-container {
+            display: none;
+            animation: fadeUp 0.6s ease-out forwards;
+            gap: 1.5rem;
+            flex-direction: column;
         }
 
-        .entity {
-            display: inline-flex;
+        .results-header {
+            display: flex;
+            justify-content: space-between;
             align-items: center;
-            border-radius: 4px;
-            padding: 2px 6px;
-            margin: 0 2px;
-            font-weight: 500;
-            position: relative;
-            cursor: help;
-            transition: all 0.2s;
+            border-bottom: 1px solid var(--border);
+            padding-bottom: 1rem;
         }
 
-        .entity:hover {
-            transform: scale(1.05);
-            z-index: 10;
+        .results-header h2 {
+            font-family: 'Outfit', sans-serif;
+            font-size: 1.5rem;
+            margin: 0;
+            font-weight: 600;
         }
 
-        .entity-label {
-            font-size: 0.7rem;
-            text-transform: uppercase;
-            letter-spacing: 0.5px;
-            margin-left: 6px;
-            opacity: 0.8;
-            background: rgba(0,0,0,0.2);
-            padding: 2px 4px;
-            border-radius: 3px;
+        .summary-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+            gap: 1rem;
         }
 
-        .summary-panel {
-            display: grid;
-            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
-            gap: 12px;
+        .stat-card {
+            background: rgba(255, 255, 255, 0.02);
+            border: 1px solid var(--border);
+            border-radius: 12px;
+            padding: 1rem;
+            display: flex;
+            align-items: center;
+            gap: 1rem;
+            transition: transform 0.2s;
         }
+        
+        .stat-card:hover { background: rgba(255, 255, 255, 0.04); transform: translateY(-2px); }
 
-        .summary-card {
-            background: rgba(255, 255, 255, 0.03);
-            border: 1px solid rgba(255, 255, 255, 0.05);
+        .stat-icon {
+            width: 40px;
+            height: 40px;
             border-radius: 8px;
-            padding: 12px;
             display: flex;
-            flex-direction: column;
-            gap: 4px;
+            align-items: center;
+            justify-content: center;
+            font-size: 1.2rem;
         }
 
-        .summary-card .count {
-            font-size: 1.5rem;
-            font-weight: 700;
-        }
+        .stat-info { display: flex; flex-direction: column; }
+        .stat-value { font-size: 1.25rem; font-weight: 700; font-family: 'Outfit', sans-serif; }
+        .stat-label { font-size: 0.75rem; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.05em; margin-top: 0.2rem; }
 
-        .summary-card .label {
-            font-size: 0.85rem;
-            color: var(--text-muted);
-            text-transform: uppercase;
-            letter-spacing: 0.5px;
+        .output-text {
+            background: rgba(0, 0, 0, 0.3);
+            border: 1px solid var(--border);
+            border-radius: 12px;
+            padding: 1.5rem;
+            font-size: 1.05rem;
+            line-height: 1.9;
+            white-space: pre-wrap;
+            min-height: 100px;
         }
 
-        @keyframes fadeIn {
-            from { opacity: 0; }
-            to { opacity: 1; }
+        .entity {
+            display: inline-flex;
+            align-items: center;
+            border-radius: 6px;
+            padding: 0.1rem 0.3rem 0.1rem 0.4rem;
+            margin: 0 0.2rem;
+            font-weight: 500;
+            position: relative;
+            cursor: default;
+            transition: all 0.2s;
+            color: var(--text-primary);
         }
 
-        @keyframes slideUp {
-            from { opacity: 0; transform: translateY(20px); }
-            to { opacity: 1; transform: translateY(0); }
-        }
+        .entity:hover { filter: brightness(1.2); }
 
-        @keyframes spin {
-            to { transform: rotate(360deg); }
-        }
-        
-        .controls {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            margin-top: 16px;
+        .entity-tag {
+            font-size: 0.65rem;
+            text-transform: uppercase;
+            letter-spacing: 0.05em;
+            margin-left: 0.4rem;
+            background: rgba(0,0,0,0.5);
+            padding: 0.15rem 0.35rem;
+            border-radius: 4px;
+            font-weight: 600;
         }
-        
+
+        /* Footer Legend */
         .legend {
             display: flex;
             flex-wrap: wrap;
-            gap: 10px;
-            margin-top: 20px;
+            gap: 1rem;
             justify-content: center;
+            margin-top: 1rem;
+            padding: 1.5rem;
+            background: var(--surface);
+            border: 1px solid var(--border);
+            border-radius: 16px;
         }
-        
+
         .legend-item {
             display: flex;
             align-items: center;
-            gap: 6px;
+            gap: 0.5rem;
             font-size: 0.85rem;
-            color: var(--text-muted);
-        }
-        
-        .legend-color {
-            width: 12px;
-            height: 12px;
-            border-radius: 50%;
+            color: var(--text-secondary);
         }
 
+        .legend-color { width: 10px; height: 10px; border-radius: 50%; }
+
     </style>
 </head>
 <body>
+    <div class="ambient-orb orb-1"></div>
+    <div class="ambient-orb orb-2"></div>
+    <div class="ambient-orb orb-3"></div>
+
     <div class="container">
         <header>
+            <div class="badge-container">
+                <div class="badge">
+                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 7h-3a2 2 0 0 1-2-2V2"/><path d="M9 18a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h7l4 4v10a2 2 0 0 1-2 2Z"/><path d="M3 15h6"/><path d="M3 18h6"/></svg>
+                    1.5B Parameters
+                </div>
+                <div class="badge">
+                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z"/><path d="M12 6v6l4 2"/></svg>
+                    128k Token Context
+                </div>
+                <div class="badge">
+                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
+                    Apache 2.0 License
+                </div>
+            </div>
+            
             <h1>OpenAI Privacy Filter</h1>
-            <p class="subtitle">Detect and mask personally identifiable information (PII) in text securely and efficiently using the bidirectional token-classification model.</p>
+            <p class="subtitle">A state-of-the-art bidirectional token-classification model for highly accurate PII detection and text sanitization. Built for high-throughput privacy workflows.</p>
         </header>
 
         <div class="glass-panel">
-            <textarea id="inputText" placeholder="Paste your text here... For example: My name is Alice Smith and my email is alice@example.com."></textarea>
-            <div class="controls">
-                <button id="analyzeBtn">
+            <div class="input-wrapper">
+                <textarea id="inputText" placeholder="Enter text to detect and mask sensitive information...&#10;For example: My name is Alice Smith, I live at 123 Main St, and my email is alice@example.com. Call me at 555-0198."></textarea>
+            </div>
+            <div style="display: flex; justify-content: flex-end;">
+                <button id="analyzeBtn" class="btn-primary">
+                    <svg class="btn-icon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8"/><path d="M21 3v5h-5"/></svg>
                     <span class="btn-text">Analyze Text</span>
-                    <div class="loading-spinner" id="spinner"></div>
+                    <div class="spinner" id="spinner"></div>
                 </button>
             </div>
         </div>
 
-        <div class="glass-panel results-area" style="display: none;" id="resultsPanel">
-            <h3>Detection Results</h3>
-            <div class="summary-panel" id="summaryPanel"></div>
-            <div class="highlighted-text" id="outputText"></div>
+        <div class="glass-panel results-container" id="resultsPanel">
+            <div class="results-header">
+                <h2>Analysis Results</h2>
+            </div>
+            
+            <div class="summary-grid" id="summaryGrid">
+                <!-- Summary cards injected here -->
+            </div>
+
+            <div class="output-text" id="outputText"></div>
         </div>
         
         <div class="legend" id="legend"></div>
@@ -310,12 +392,24 @@
             'secret': 'var(--entity-secret)'
         };
 
-        // Setup legend
+        const icons = {
+            'account_number': '💳',
+            'private_address': '📍',
+            'private_email': '✉️',
+            'private_person': '👤',
+            'private_phone': '📱',
+            'private_url': '🔗',
+            'private_date': '📅',
+            'secret': '🔑'
+        };
+
+        // Initialize Legend
         const legendContainer = document.getElementById('legend');
         for (const [entity, color] of Object.entries(entityColors)) {
             const item = document.createElement('div');
             item.className = 'legend-item';
-            item.innerHTML = `<div class="legend-color" style="background-color: ${color}"></div><span>${entity.replace('private_', '').toUpperCase()}</span>`;
+            const label = entity.replace('private_', '').replace('_', ' ');
+            item.innerHTML = `<div class="legend-color" style="background-color: ${color}"></div><span style="text-transform: capitalize">${label}</span>`;
             legendContainer.appendChild(item);
         }
 
@@ -323,9 +417,10 @@
         const analyzeBtn = document.getElementById('analyzeBtn');
         const spinner = document.getElementById('spinner');
         const btnText = document.querySelector('.btn-text');
+        const btnIcon = document.querySelector('.btn-icon');
         const resultsPanel = document.getElementById('resultsPanel');
         const outputText = document.getElementById('outputText');
-        const summaryPanel = document.getElementById('summaryPanel');
+        const summaryGrid = document.getElementById('summaryGrid');
 
         let client = null;
 
@@ -333,7 +428,7 @@
             try {
                 client = await Client.connect(window.location.origin);
             } catch (error) {
-                console.error("Failed to connect to Gradio server:", error);
+                console.error("Gradio connection error:", error);
             }
         }
         
@@ -346,66 +441,74 @@
             if (!client) {
                 await initClient();
                 if (!client) {
-                    alert("Could not connect to the backend. Is it running?");
+                    alert("Unable to connect to the analysis server.");
                     return;
                 }
             }
 
             analyzeBtn.disabled = true;
+            btnText.textContent = 'Processing...';
+            btnIcon.style.display = 'none';
             spinner.style.display = 'block';
-            btnText.textContent = 'Analyzing...';
             resultsPanel.style.display = 'none';
 
             try {
-                // Call the Gradio API
                 const result = await client.predict("/predict", { text });
                 const entities = result.data[0];
-                
                 renderResults(text, entities);
                 
                 resultsPanel.style.display = 'flex';
-                resultsPanel.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+                resultsPanel.scrollIntoView({ behavior: 'smooth', block: 'start' });
             } catch (error) {
-                console.error("Analysis error:", error);
-                alert("An error occurred during analysis: " + error.message);
+                console.error("Prediction failed:", error);
+                alert("An error occurred during text analysis.");
             } finally {
                 analyzeBtn.disabled = false;
-                spinner.style.display = 'none';
                 btnText.textContent = 'Analyze Text';
+                btnIcon.style.display = 'block';
+                spinner.style.display = 'none';
             }
         });
 
         function renderResults(text, entities) {
             if (!entities || entities.length === 0) {
                 outputText.textContent = text;
-                summaryPanel.innerHTML = '<div class="summary-card"><span class="count">0</span><span class="label">Entities Found</span></div>';
+                summaryGrid.innerHTML = `
+                    <div class="stat-card">
+                        <div class="stat-icon" style="background: rgba(255,255,255,0.05); color: #fff;">✅</div>
+                        <div class="stat-info">
+                            <span class="stat-value">0</span>
+                            <span class="stat-label">Entities Found</span>
+                        </div>
+                    </div>`;
                 return;
             }
 
-            // Count summary
+            // Group counts
             const counts = {};
             entities.forEach(ent => {
                 let type = ent.entity || ent.entity_group;
-                if (type.startsWith('B-') || type.startsWith('I-') || type.startsWith('E-') || type.startsWith('S-')) {
-                    type = type.substring(2);
-                }
+                if (/^[BIES]-/.test(type)) type = type.substring(2);
                 counts[type] = (counts[type] || 0) + 1;
             });
             
-            summaryPanel.innerHTML = Object.entries(counts).map(([type, count]) => {
+            summaryGrid.innerHTML = Object.entries(counts).map(([type, count]) => {
                 const color = entityColors[type] || '#888';
                 const label = type.replace('private_', '').replace('_', ' ');
-                return `<div class="summary-card" style="border-left: 4px solid ${color}">
-                    <span class="count" style="color: ${color}">${count}</span>
-                    <span class="label">${label}</span>
-                </div>`;
+                const icon = icons[type] || '📌';
+                return `
+                    <div class="stat-card" style="border-left: 3px solid ${color}">
+                        <div class="stat-icon" style="background: ${color}20">${icon}</div>
+                        <div class="stat-info">
+                            <span class="stat-value" style="color: ${color}">${count}</span>
+                            <span class="stat-label">${label}</span>
+                        </div>
+                    </div>`;
             }).join('');
 
-            // Highlight text based on start/end
+            // Highlight text
             let lastIdx = 0;
             let html = '';
-            
-            // Sort by start index
             entities.sort((a, b) => (a.start || 0) - (b.start || 0));
             
             for (const ent of entities) {
@@ -415,16 +518,14 @@
                     }
                     
                     let type = ent.entity || ent.entity_group;
-                    if (type.startsWith('B-') || type.startsWith('I-') || type.startsWith('E-') || type.startsWith('S-')) {
-                        type = type.substring(2);
-                    }
+                    if (/^[BIES]-/.test(type)) type = type.substring(2);
                     
                     const color = entityColors[type] || '#888';
                     const label = type.replace('private_', '');
                     
-                    html += `<span class="entity" style="background-color: ${color}40; border: 1px solid ${color}80; color: #fff;">
+                    html += `<span class="entity" style="background-color: ${color}20; border-bottom: 2px solid ${color};">
                         ${escapeHtml(text.substring(ent.start, ent.end))}
-                        <span class="entity-label" style="background-color: ${color}">${label}</span>
+                        <span class="entity-tag" style="color: ${color};">${label}</span>
                     </span>`;
                     
                     lastIdx = ent.end;