Hugging Face's logo

Spaces:
ai4privacy
/
general-english-anonymiser-openpii-500k
Running

App Files Community
general-english-anonymiser-openpii-500k
File size: 5,314 Bytes 
d46aa0f
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Short Text and Open Source: Anonymiser</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/iconify/2.0.0/iconify.min.js"></script>
  <style>
    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap');
    * {
      font-family: 'Inter', sans-serif;
    }
    ::-webkit-scrollbar {
      width: 6px;
    }
    ::-webkit-scrollbar-track {
      background: #2d2d2d;
    }
    ::-webkit-scrollbar-thumb {
      background: #4a4a4a;
      border-radius: 3px;
    }
  </style>
</head>
<body class="bg-gray-900 min-h-screen">
  <!-- Branding Header -->
  <div class="bg-black/30 py-4 border-b border-white/10">
    <div class="max-w-7xl mx-auto px-4 flex items-center justify-between">
      <div class="flex items-center space-x-3">
        <img src="ai4privacy-logo.png" alt="Logo" class="h-8 w-8">
        <div>
          <span class="text-xl font-bold text-white">Ai4Privacy</span>
          <span class="block text-xs text-white/60">Short Text Anonymization Locally in Your Browser</span>
        </div>
      </div>
      <!-- Settings Button -->
      <button id="settingsButton" class="text-white/60 hover:text-white transition-colors">
        <span class="iconify" data-icon="mdi:cog" data-width="24"></span>
      </button>
    </div>
  </div>

  <!-- Settings Panel -->
  <div id="settingsPanel" class="hidden absolute right-4 top-20 bg-gray-800 border border-white/10 rounded-xl p-4 w-64 space-y-4 z-50">
    <div>
      <label class="block text-sm text-white/80 mb-2">Detection Threshold</label>
      <input type="number" id="thresholdInput" step="0.001" min="0" max="1" value="0.3"
             class="w-full bg-gray-700 border border-white/10 rounded-lg px-3 py-2 text-white">
    </div>
    <div>
      <label class="block text-sm text-white/80 mb-2">Language Model</label>
      <select id="modelSelect" class="w-full bg-gray-700 border border-white/10 rounded-lg px-3 py-2 text-white">
        <option value="english">English - ai4privacy/llama-ai4privacy-english-anonymiser-openpii</option>
      </select>
    </div>
  </div>

  <div class="max-w-7xl mx-auto px-4 py-8">
    <div class="flex flex-col lg:flex-row gap-8">
      <!-- Input/Output Section -->
      <div class="flex-1 space-y-6">
        <div>
          <label class="block text-sm font-medium text-white/80 mb-2">Input Text</label>
          <textarea 
            id="inputText"
            class="w-full p-4 bg-gray-800 border border-white/10 rounded-xl text-white placeholder-white/30 focus:border-blue-500 focus:ring-2 focus:ring-blue-500/30 resize-none transition duration-200 ease-in-out"
            rows="6"
            placeholder="Enter sensitive text to anonymize..."
          ></textarea>
        </div>
        
        <div>
          <label class="block text-sm font-medium text-white/80 mb-2">Anonymized Output</label>
          <textarea 
            id="outputText"
            class="w-full p-4 bg-gray-800 border border-white/10 rounded-xl text-white/80 resize-none transition duration-200 ease-in-out"
            rows="6"
            readonly
          ></textarea>
        </div>
      </div>

      <!-- Privacy Mask Panel -->
      <div class="lg:w-96">
        <div class="sticky top-8">
          <label class="block text-sm font-medium text-white/80 mb-2">Detected Entities</label>
          <div class="bg-gray-800 border border-white/10 rounded-xl p-4">
            <div class="mb-4">
              <span id="processingStatus" class="text-xs text-white/40">Ready</span>
            </div>
            <div 
              id="privacyMask"
              class="h-96 bg-gray-850 rounded-lg p-3 overflow-y-auto text-sm space-y-2 transition duration-200 ease-in-out"
            >
              <div class="text-center text-white/40 py-4">Processing results will appear here</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- Sample Buttons -->
    <div class="mt-8 flex justify-center space-x-4">
      <button id="sampleEmailButton" class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition">
        Sample Customer Email
      </button>
      <button id="sampleDocumentButton" class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition">
        Sample Document
      </button>
    </div>
  </div>

  <!-- Branding Footer -->
  <div class="fixed bottom-0 left-0 right-0 bg-black/30 border-t border-white/10 py-3">
    <div class="max-w-7xl mx-auto px-4">
      <div class="flex items-center justify-between">
        <div class="text-sm text-white/50">© 2025 Ai4Privacy. All rights reserved. Use at your own risk. Ai4Privacy assumes no responsibility for implementation, accuracy, or any resulting damages.</div>
        <div class="flex items-center space-x-4">
          <span class="text-sm text-white/50">v2.1.0</span>
          <div class="w-px h-4 bg-white/10"></div>
          <img src="ai4privacy-logo.png" alt="Logo" class="h-6 w-6 opacity-70">
        </div>
      </div>
    </div>
  </div>

  <script type="module" src="components.js"></script>
</body>
</html>