Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>AI Analysis Suite | HTS Investigation Suite</title> | |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&family=Rubik:wght@300;400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Rubik', sans-serif; | |
| } | |
| .code-font { | |
| font-family: 'JetBrains Mono', monospace; | |
| } | |
| .vanta-canvas { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| z-index: 0; | |
| opacity: 0.15; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50"> | |
| <div id="vanta-bg" class="vanta-canvas"></div> | |
| <!-- Header --> | |
| <header class="relative z-10 bg-white shadow-lg border-b border-gray-200"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4"> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center space-x-4"> | |
| <div class="bg-blue-600 p-2 rounded-lg"> | |
| <i data-feather="shield" class="text-white w-6 h-6"></i> | |
| </div> | |
| <div> | |
| <h1 class="text-2xl font-bold text-gray-900">HIGH TECH SECURITY</h1> | |
| <p class="text-sm text-gray-600">HTS Investigation Suite v2.1</p> | |
| </div> | |
| </div> | |
| <div class="hidden md:flex items-center space-x-6"> | |
| <div class="text-right"> | |
| <div class="text-gray-600">203-205 The Vale, London W3 7QS</div> | |
| <div class="text-gray-600">UK: +44 7591 665201 | Company: 7849187</div> | |
| </div> | |
| <div class="flex items-center space-x-2"> | |
| <i data-feather="lock" class="w-5 h-5 text-green-500"></i> | |
| <span class="text-sm text-green-600 font-medium">Sécurisé</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Navigation --> | |
| <nav class="relative z-10 bg-gray-800 text-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex space-x-1 overflow-x-auto py-2 hide-scrollbar"> | |
| <a href="/" class="flex items-center space-x-2 px-4 py-3 border-b-2 border-transparent hover:border-gray-600 transition-colors"> | |
| <i data-feather="trending-up" class="w-4 h-4"></i> | |
| <span>Dashboard</span> | |
| </a> | |
| <a href="/darkbert" class="flex items-center space-x-2 px-4 py-3 border-b-2 border-blue-400 text-blue-400 transition-colors"> | |
| <i data-feather="brain" class="w-4 h-4"></i> | |
| <span>AI Analysis Suite</span> | |
| </a> | |
| <a href="/investigations" class="flex items-center space-x-2 px-4 py-3 border-b-2 border-transparent hover:border-gray-600 transition-colors"> | |
| <i data-feather="search" class="w-4 h-4"></i> | |
| <span>Investigations</span> | |
| </a> | |
| <a href="/monitoring" class="flex items-center space-x-2 px-4 py-3 border-b-2 border-transparent hover:border-gray-600 transition-colors"> | |
| <i data-feather="eye" class="w-4 h-4"></i> | |
| <span>Monitoring</span> | |
| </a> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Main Content --> | |
| <main class="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8"> | |
| <div class="bg-white rounded-xl shadow-lg p-6 mb-8"> | |
| <h2 class="text-2xl font-bold text-gray-900 mb-6">AI Analysis Suite - Deux IA pour la paye AI</h2> | |
| <!-- Model Selection --> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8"> | |
| <!-- KAT-Dev Model --> | |
| <div class="bg-gradient-to-br from-blue-50 to-blue-100 rounded-xl shadow-lg p-6 border border-blue-200"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <div class="flex items-center space-x-3"> | |
| <div class="bg-blue-600 p-2 rounded-lg"> | |
| <i data-feather="cpu" class="text-white w-6 h-6"></i> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-semibold text-gray-900">KAT-Dev Model</h3> | |
| <p class="text-sm text-gray-600">Kwaipilot/KAT-Dev</p> | |
| </div> | |
| </div> | |
| <span class="px-3 py-1 bg-green-100 text-green-800 text-xs font-medium rounded-full">Fast</span> | |
| </div> | |
| <p class="text-sm text-gray-700 mb-4">Specialized AI model for rapid analysis and processing of investigative data with enhanced security capabilities.</p> | |
| <div class="space-y-3"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-2">Input Text</label> | |
| <textarea id="kat-input" placeholder="Enter text for analysis..." class="w-full h-24 p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 text-sm mb-2"></textarea> | |
| <div class="mb-2"> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Or upload files</label> | |
| <div class="flex items-center justify-center w-full"> | |
| <label for="kat-files" class="flex flex-col items-center justify-center w-full h-32 border-2 border-gray-300 border-dashed rounded-lg cursor-pointer bg-gray-50 hover:bg-gray-100"> | |
| <div class="flex flex-col items-center justify-center pt-5 pb-6"> | |
| <i data-feather="upload" class="w-8 h-8 text-gray-500 mb-2"></i> | |
| <p class="text-sm text-gray-500">Click to upload or drag and drop</p> | |
| <p class="text-xs text-gray-500">PDF, DOCX, TXT (Max 10MB)</p> | |
| </div> | |
| <input id="kat-files" type="file" class="hidden" multiple> | |
| </label> | |
| </div> | |
| </div> | |
| </div> | |
| <button onclick="runKATAnalysis()" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-semibold py-3 px-6 rounded-lg transition-colors flex items-center justify-center gap-2"> | |
| <i data-feather="zap" class="w-4 h-4"></i> | |
| Run KAT-Dev Analysis | |
| </button> | |
| </div> | |
| </div> | |
| <!-- DeepSeek-V3.1-Terminus Model --> | |
| <div class="bg-gradient-to-br from-purple-50 to-purple-100 rounded-xl shadow-lg p-6 border border-purple-200"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <div class="flex items-center space-x-3"> | |
| <div class="bg-purple-600 p-2 rounded-lg"> | |
| <i data-feather="brain" class="text-white w-6 h-6"></i> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-semibold text-gray-900">DeepSeek-V3.1-Terminus</h3> | |
| <p class="text-sm text-gray-600">deepseek-ai/DeepSeek-V3.1-Terminus</p> | |
| </div> | |
| </div> | |
| <span class="px-3 py-1 bg-purple-100 text-purple-800 text-xs font-medium rounded-full">Advanced</span> | |
| </div> | |
| <p class="text-sm text-gray-700 mb-4">Advanced AI model for comprehensive analysis with deep contextual understanding and superior reasoning capabilities.</p> | |
| <div class="space-y-3"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-2">Input Text</label> | |
| <textarea id="deepseek-input" placeholder="Enter text for analysis..." class="w-full h-24 p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 text-sm mb-2"></textarea> | |
| <div class="mb-2"> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Or upload files</label> | |
| <div class="flex items-center justify-center w-full"> | |
| <label for="deepseek-files" class="flex flex-col items-center justify-center w-full h-32 border-2 border-gray-300 border-dashed rounded-lg cursor-pointer bg-gray-50 hover:bg-gray-100"> | |
| <div class="flex flex-col items-center justify-center pt-5 pb-6"> | |
| <i data-feather="upload" class="w-8 h-8 text-gray-500 mb-2"></i> | |
| <p class="text-sm text-gray-500">Click to upload or drag and drop</p> | |
| <p class="text-xs text-gray-500">PDF, DOCX, TXT (Max 10MB)</p> | |
| </div> | |
| <input id="deepseek-files" type="file" class="hidden" multiple> | |
| </label> | |
| </div> | |
| </div> | |
| </div> | |
| <button onclick="runDeepSeekAnalysis()" class="w-full bg-purple-600 hover:bg-purple-700 text-white font-semibold py-3 px-6 rounded-lg transition-colors flex items-center justify-center gap-2"> | |
| <i data-feather="layers" class="w-4 h-4"></i> | |
| Run DeepSeek Analysis | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Common Configuration --> | |
| <div class="bg-gray-50 rounded-xl shadow-lg p-6 border border-gray-200"> | |
| <h3 class="text-lg font-semibold text-gray-900 mb-4">Analysis Configuration</h3> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-2">Client Type</label> | |
| <select id="client-type" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 bg-white"> | |
| <option value="police">Police Forces</option> | |
| <option value="fiscal">Tax Administration</option> | |
| <option value="customs">Customs Services</option> | |
| <option value="court">Courts</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-2">Investigation Title</label> | |
| <input id="investigation-title" type="text" placeholder="Ex: Criminal Network Investigation 2025" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 bg-white"> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-2">Security Level</label> | |
| <select id="security-level" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 bg-white"> | |
| <option value="standard">Standard</option> | |
| <option value="enhanced">Enhanced</option> | |
| <option value="maximum">Maximum</option> | |
| </select> | |
| </div> | |
| </div> | |
| <div class="mt-6"> | |
| <label class="block text-sm font-medium text-gray-700 mb-2">Documents to Analyze (one per line)</label> | |
| <textarea id="documents-input" placeholder="Insert your documents here, one per line..." class="w-full h-32 p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 font-mono text-sm bg-white"></textarea> | |
| <p class="text-xs text-gray-500 mt-1">0 documents | Minimum 3 documents required for batch processing</p> | |
| </div> | |
| </div> | |
| <!-- Results Section --> | |
| <div class="mt-8 bg-white rounded-xl shadow-lg p-6 border border-gray-200"> | |
| <h3 class="text-lg font-semibold text-gray-900 mb-4">Analysis Results</h3> | |
| <div id="results-container" class="bg-gray-50 rounded-lg p-4 min-h-32"> | |
| <p class="text-gray-500 text-center">Run an analysis to see results here...</p> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <script> | |
| feather.replace(); | |
| VANTA.GLOBE({ | |
| el: "#vanta-bg", | |
| mouseControls: true, | |
| touchControls: true, | |
| gyroControls: false, | |
| minHeight: 200.00, | |
| minWidth: 200.00, | |
| scale: 1.00, | |
| scaleMobile: 1.00, | |
| color: 0x3b82f6, | |
| backgroundColor: 0xf8fafc, | |
| size: 0.8 | |
| }); | |
| function runKATAnalysis() { | |
| const input = document.getElementById('kat-input').value; | |
| const clientType = document.getElementById('client-type').value; | |
| const investigationTitle = document.getElementById('investigation-title').value; | |
| const securityLevel = document.getElementById('security-level').value; | |
| const documents = document.getElementById('documents-input').value.split('\n').filter(doc => doc.trim() !== ''); | |
| const files = document.getElementById('kat-files').files; | |
| if (!input.trim() && files.length === 0) { | |
| alert('Please enter some text or upload files for analysis'); | |
| return; | |
| } | |
| if (!input.trim()) { | |
| alert('Please enter some text for analysis'); | |
| return; | |
| } | |
| document.getElementById('results-container').innerHTML = ` | |
| <div class="space-y-3"> | |
| <div class="flex items-center space-x-2"> | |
| <div class="w-3 h-3 rounded-full bg-blue-500 animate-pulse"></div> | |
| <span class="text-sm font-medium">Running KAT-Dev Analysis...</span> | |
| </div> | |
| <div class="bg-white p-4 rounded border"> | |
| <p class="text-sm text-gray-700">Processing your request with Kwaipilot/KAT-Dev model...</p> | |
| </div> | |
| </div> | |
| `; | |
| // Simulate API call | |
| setTimeout(() => { | |
| document.getElementById('results-container').innerHTML = ` | |
| <div class="space-y-4"> | |
| <div class="flex items-center space-x-2 text-green-600"> | |
| <i data-feather="check-circle" class="w-5 h-5"></i> | |
| <span class="font-medium">Analysis Complete</span> | |
| </div> | |
| <div class="bg-white p-4 rounded border"> | |
| <h4 class="font-medium mb-2">KAT-Dev Analysis Results:</h4> | |
| <p class="text-sm text-gray-700">Input processed successfully. The model has analyzed the provided content and identified key patterns and insights relevant to your investigation.</p> | |
| <div class="mt-3 p-3 bg-blue-50 rounded"> | |
| <p class="text-xs font-mono">Model: Kwaipilot/KAT-Dev<br>Client: ${clientType}<br>Security Level: ${securityLevel}<br>Documents Processed: ${documents.length}</p> | |
| </div> | |
| </div> | |
| </div> | |
| `; | |
| feather.replace(); | |
| }, 2000); | |
| } | |
| function runDeepSeekAnalysis() { | |
| const input = document.getElementById('deepseek-input').value; | |
| const clientType = document.getElementById('client-type').value; | |
| const investigationTitle = document.getElementById('investigation-title').value; | |
| const securityLevel = document.getElementById('security-level').value; | |
| const documents = document.getElementById('documents-input').value.split('\n').filter(doc => doc.trim() !== ''); | |
| const files = document.getElementById('deepseek-files').files; | |
| if (!input.trim() && files.length === 0) { | |
| alert('Please enter some text or upload files for analysis'); | |
| return; | |
| } | |
| if (!input.trim()) { | |
| alert('Please enter some text for analysis'); | |
| return; | |
| } | |
| document.getElementById('results-container').innerHTML = ` | |
| <div class="space-y-3"> | |
| <div class="flex items-center space-x-2"> | |
| <div class="w-3 h-3 rounded-full bg-purple-500 animate-pulse"></div> | |
| <span class="text-sm font-medium">Running DeepSeek Analysis...</span> | |
| </div> | |
| <div class="bg-white p-4 rounded border"> | |
| <p class="text-sm text-gray-700">Processing your request with deepseek-ai/DeepSeek-V3.1-Terminus model...</p> | |
| </div> | |
| </div> | |
| `; | |
| // Simulate API call | |
| setTimeout(() => { | |
| document.getElementById('results-container').innerHTML = ` | |
| <div class="space-y-4"> | |
| <div class="flex items-center space-x-2 text-green-600"> | |
| <i data-feather="check-circle" class="w-5 h-5"></i> | |
| <span class="font-medium">Analysis Complete</span> | |
| </div> | |
| <div class="bg-white p-4 rounded border"> | |
| <h4 class="font-medium mb-2">DeepSeek Analysis Results:</h4> | |
| <p class="text-sm text-gray-700">Comprehensive analysis completed. The DeepSeek model has provided detailed insights and contextual understanding of the input data, highlighting relevant patterns and potential connections.</p> | |
| <div class="mt-3 p-3 bg-purple-50 rounded"> | |
| <p class="text-xs font-mono">Model: deepseek-ai/DeepSeek-V3.1-Terminus<br>Client: ${clientType}<br>Security Level: ${securityLevel}<br>Documents Processed: ${documents.length}</p> | |
| </div> | |
| </div> | |
| </div> | |
| `; | |
| feather.replace(); | |
| }, 3000); | |
| } | |
| // Update document count | |
| document.getElementById('documents-input').addEventListener('input', function() { | |
| const count = this.value.split('\n').filter(doc => doc.trim() !== '').length; | |
| document.querySelector('.text-xs.text-gray-500').textContent = `${count} documents | Minimum 3 documents required for batch processing`; | |
| }); | |
| // Handle file upload display | |
| document.getElementById('kat-files').addEventListener('change', function() { | |
| if (this.files.length > 0) { | |
| document.getElementById('kat-input').placeholder = `${this.files.length} file(s) selected for analysis`; | |
| } | |
| }); | |
| document.getElementById('deepseek-files').addEventListener('change', function() { | |
| if (this.files.length > 0) { | |
| document.getElementById('deepseek-input').placeholder = `${this.files.length} file(s) selected for analysis`; | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> | |