Spaces:

akhaliq
/

privacy-filter

Running on Zero

App Files Files Community

akhaliq HF Staff commited on 15 days ago

Commit

07d284c

1 Parent(s): fbdc786

feat: implement PII detection service with FastAPI, Gradio UI, and Transformer model

Browse files

Files changed (4) hide show

app.py +84 -0
index.html +451 -0
requirements.txt +5 -0
test.py +11 -0

app.py ADDED Viewed

	@@ -0,0 +1,84 @@

+import os
+from fastapi.responses import HTMLResponse
+from gradio import Server
+from transformers import pipeline
+import spaces
+app = Server()
+print("Loading OpenAI Privacy Filter model...")
+classifier = pipeline(
+    task="token-classification",
+    model="openai/privacy-filter",
+)
+print("Model loaded successfully.")
+@app.api("/predict")
+@spaces.GPU
+def predict(text: str):
+    """Detect PII in the given text and return aggregated spans."""
+    results = classifier(text)
+    merged = []
+    current_entity = None
+    for res in results:
+        label = res["entity"]
+        if label == "O":
+            if current_entity:
+                merged.append(current_entity)
+                current_entity = None
+            continue
+        base_label = label.split("-", 1)[-1] if "-" in label else label
+        if label.startswith("B-") or label.startswith("S-"):
+            if current_entity:
+                merged.append(current_entity)
+            current_entity = {
+                "entity": base_label,
+                "score": float(res["score"]),
+                "start": res["start"],
+                "end": res["end"],
+                "word": res["word"]
+            }
+        elif label.startswith("I-") or label.startswith("E-"):
+            if current_entity and current_entity["entity"] == base_label:
+                # Extend current entity
+                current_entity["end"] = res["end"]
+                current_entity["word"] += res["word"].replace("##", "").replace("Ġ", " ")
+            else:
+                if current_entity:
+                    merged.append(current_entity)
+                current_entity = {
+                    "entity": base_label,
+                    "score": float(res["score"]),
+                    "start": res["start"],
+                    "end": res["end"],
+                    "word": res["word"]
+                }
+        else:
+            # No prefix
+            if current_entity:
+                merged.append(current_entity)
+            current_entity = {
+                "entity": base_label,
+                "score": float(res["score"]),
+                "start": res["start"],
+                "end": res["end"],
+                "word": res["word"]
+            }
+    if current_entity:
+        merged.append(current_entity)
+    return merged
+@app.get("/")
+async def homepage():
+    html_path = os.path.join(os.path.dirname(os.path.abspath(__file__)), "index.html")
+    with open(html_path, "r", encoding="utf-8") as f:
+        return HTMLResponse(content=f.read())
+if __name__ == "__main__":
+    app.launch(show_error=True)

index.html ADDED Viewed

	@@ -0,0 +1,451 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <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">
+    <style>
+        :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);
+            /* 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;
+        }
+        body {
+            margin: 0;
+            padding: 0;
+            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;
+            overflow-x: hidden;
+        }
+        .container {
+            width: 100%;
+            max-width: 1000px;
+            margin: 40px auto;
+            padding: 0 20px;
+            box-sizing: border-box;
+            display: flex;
+            flex-direction: column;
+            gap: 24px;
+        }
+        header {
+            text-align: center;
+            margin-bottom: 20px;
+            animation: fadeIn 0.8s ease-out;
+        }
+        h1 {
+            font-size: 2.5rem;
+            font-weight: 700;
+            margin-bottom: 10px;
+            background: linear-gradient(to right, #60a5fa, #a78bfa);
+            -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;
+            line-height: 1.6;
+        }
+        .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;
+        }
+        textarea {
+            width: 100%;
+            height: 150px;
+            background: rgba(15, 23, 42, 0.6);
+            border: 1px solid var(--border-color);
+            border-radius: 12px;
+            color: var(--text-main);
+            font-family: 'Inter', sans-serif;
+            font-size: 1rem;
+            padding: 16px;
+            box-sizing: border-box;
+            resize: vertical;
+            transition: border-color 0.3s;
+            line-height: 1.5;
+        }
+        textarea:focus {
+            outline: none;
+            border-color: var(--accent);
+            box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
+        }
+        button {
+            background: var(--accent);
+            color: white;
+            border: none;
+            border-radius: 8px;
+            padding: 12px 24px;
+            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;
+        }
+        button:hover {
+            background: var(--accent-hover);
+            transform: translateY(-2px);
+            box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
+        }
+        button:active {
+            transform: translateY(0);
+        }
+        button:disabled {
+            background: #475569;
+            cursor: not-allowed;
+            transform: none;
+            box-shadow: none;
+        }
+        .loading-spinner {
+            width: 20px;
+            height: 20px;
+            border: 3px solid rgba(255,255,255,0.3);
+            border-radius: 50%;
+            border-top-color: white;
+            animation: spin 1s ease-in-out infinite;
+            display: none;
+        }
+        .results-area {
+            display: flex;
+            flex-direction: column;
+            gap: 20px;
+        }
+        .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;
+        }
+        .entity {
+            display: inline-flex;
+            align-items: center;
+            border-radius: 4px;
+            padding: 2px 6px;
+            margin: 0 2px;
+            font-weight: 500;
+            position: relative;
+            cursor: help;
+            transition: all 0.2s;
+        }
+        .entity:hover {
+            transform: scale(1.05);
+            z-index: 10;
+        }
+        .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-panel {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+            gap: 12px;
+        }
+        .summary-card {
+            background: rgba(255, 255, 255, 0.03);
+            border: 1px solid rgba(255, 255, 255, 0.05);
+            border-radius: 8px;
+            padding: 12px;
+            display: flex;
+            flex-direction: column;
+            gap: 4px;
+        }
+        .summary-card .count {
+            font-size: 1.5rem;
+            font-weight: 700;
+        }
+        .summary-card .label {
+            font-size: 0.85rem;
+            color: var(--text-muted);
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+        }
+        @keyframes fadeIn {
+            from { opacity: 0; }
+            to { opacity: 1; }
+        }
+        @keyframes slideUp {
+            from { opacity: 0; transform: translateY(20px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+        @keyframes spin {
+            to { transform: rotate(360deg); }
+        }
+        .controls {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-top: 16px;
+        }
+        .legend {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 10px;
+            margin-top: 20px;
+            justify-content: center;
+        }
+        .legend-item {
+            display: flex;
+            align-items: center;
+            gap: 6px;
+            font-size: 0.85rem;
+            color: var(--text-muted);
+        }
+        .legend-color {
+            width: 12px;
+            height: 12px;
+            border-radius: 50%;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <header>
+            <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>
+        </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">
+                    <span class="btn-text">Analyze Text</span>
+                    <div class="loading-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>
+        <div class="legend" id="legend"></div>
+    </div>
+    <!-- Gradio Client Library -->
+    <script type="module">
+        import { Client } from "https://cdn.jsdelivr.net/npm/@gradio/client/dist/index.min.js";
+        const entityColors = {
+            'account_number': 'var(--entity-account_number)',
+            'private_address': 'var(--entity-private_address)',
+            'private_email': 'var(--entity-private_email)',
+            'private_person': 'var(--entity-private_person)',
+            'private_phone': 'var(--entity-private_phone)',
+            'private_url': 'var(--entity-private_url)',
+            'private_date': 'var(--entity-private_date)',
+            'secret': 'var(--entity-secret)'
+        };
+        // Setup 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>`;
+            legendContainer.appendChild(item);
+        }
+        const inputText = document.getElementById('inputText');
+        const analyzeBtn = document.getElementById('analyzeBtn');
+        const spinner = document.getElementById('spinner');
+        const btnText = document.querySelector('.btn-text');
+        const resultsPanel = document.getElementById('resultsPanel');
+        const outputText = document.getElementById('outputText');
+        const summaryPanel = document.getElementById('summaryPanel');
+        let client = null;
+        async function initClient() {
+            try {
+                client = await Client.connect(window.location.origin);
+            } catch (error) {
+                console.error("Failed to connect to Gradio server:", error);
+            }
+        }
+        initClient();
+        analyzeBtn.addEventListener('click', async () => {
+            const text = inputText.value.trim();
+            if (!text) return;
+            if (!client) {
+                await initClient();
+                if (!client) {
+                    alert("Could not connect to the backend. Is it running?");
+                    return;
+                }
+            }
+            analyzeBtn.disabled = true;
+            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' });
+            } catch (error) {
+                console.error("Analysis error:", error);
+                alert("An error occurred during analysis: " + error.message);
+            } finally {
+                analyzeBtn.disabled = false;
+                spinner.style.display = 'none';
+                btnText.textContent = 'Analyze Text';
+            }
+        });
+        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>';
+                return;
+            }
+            // Count summary
+            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);
+                }
+                counts[type] = (counts[type] || 0) + 1;
+            });
+            summaryPanel.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>`;
+            }).join('');
+            // Highlight text based on start/end
+            let lastIdx = 0;
+            let html = '';
+            // Sort by start index
+            entities.sort((a, b) => (a.start || 0) - (b.start || 0));
+            for (const ent of entities) {
+                if (ent.start !== undefined && ent.end !== undefined) {
+                    if (ent.start > lastIdx) {
+                        html += escapeHtml(text.substring(lastIdx, ent.start));
+                    }
+                    let type = ent.entity || ent.entity_group;
+                    if (type.startsWith('B-') || type.startsWith('I-') || type.startsWith('E-') || type.startsWith('S-')) {
+                        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;">
+                        ${escapeHtml(text.substring(ent.start, ent.end))}
+                        <span class="entity-label" style="background-color: ${color}">${label}</span>
+                    </span>`;
+                    lastIdx = ent.end;
+                }
+            }
+            if (lastIdx < text.length) {
+                html += escapeHtml(text.substring(lastIdx));
+            }
+            outputText.innerHTML = html;
+        }
+        function escapeHtml(unsafe) {
+            return unsafe
+                 .replace(/&/g, "&amp;")
+                 .replace(/</g, "&lt;")
+                 .replace(/>/g, "&gt;")
+                 .replace(/"/g, "&quot;")
+                 .replace(/'/g, "&#039;");
+        }
+    </script>
+</body>
+</html>

requirements.txt ADDED Viewed

	@@ -0,0 +1,5 @@

+gradio
+fastapi
+transformers
+torch
+spaces

test.py ADDED Viewed

	@@ -0,0 +1,11 @@

+from transformers import pipeline
+import json
+classifier = pipeline(
+    task="token-classification",
+    model="openai/privacy-filter",
+    aggregation_strategy="simple"
+)
+res = classifier("My name is Alice Smith and my email is alice@example.com.")
+print(json.dumps(res, indent=2))