|
|
<!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"> |
|
|
|
|
|
<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> |
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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"> |
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
