Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>ThreatLens OSINT - Ethical Intelligence Platform</title> | |
| <link rel="stylesheet" href="style.css"> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet"> | |
| </head> | |
| <body> | |
| <div class="app-container"> | |
| <!-- Header --> | |
| <header class="header"> | |
| <div class="header-content"> | |
| <div class="logo"> | |
| <div class="logo-icon"> | |
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> | |
| <circle cx="12" cy="12" r="10"/> | |
| <path d="M12 6v6l4 2"/> | |
| </svg> | |
| </div> | |
| <div class="logo-text"> | |
| <h1>ThreatLens OSINT</h1> | |
| <span class="tagline">Ethical Intelligence Platform</span> | |
| </div> | |
| </div> | |
| <div class="header-actions"> | |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="built-with"> | |
| Built with anycoder | |
| </a> | |
| <div class="compliance-badge"> | |
| <span class="badge-icon">π‘οΈ</span> | |
| <span>Compliance Mode Active</span> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Main Content --> | |
| <main class="main-content"> | |
| <!-- Sidebar --> | |
| <aside class="sidebar"> | |
| <nav class="nav-menu"> | |
| <button class="nav-item active" data-tab="analyze"> | |
| <span class="nav-icon">π</span> | |
| <span>Threat Analysis</span> | |
| </button> | |
| <button class="nav-item" data-tab="entities"> | |
| <span class="nav-icon">π·οΈ</span> | |
| <span>Entity Extraction</span> | |
| </button> | |
| <button class="nav-item" data-tab="sentiment"> | |
| <span class="nav-icon">π</span> | |
| <span>Sentiment Analysis</span> | |
| </button> | |
| <button class="nav-item" data-tab="summarize"> | |
| <span class="nav-icon">π</span> | |
| <span>Report Summary</span> | |
| </button> | |
| <button class="nav-item" data-tab="classify"> | |
| <span class="nav-icon">π</span> | |
| <span>Threat Classification</span> | |
| </button> | |
| </nav> | |
| <div class="sidebar-footer"> | |
| <div class="model-status"> | |
| <div class="status-indicator loading" id="modelStatus"></div> | |
| <span id="modelStatusText">Loading AI Models...</span> | |
| </div> | |
| <div class="legal-notice"> | |
| <p>β οΈ This platform only processes publicly available data. All operations comply with GDPR, CCPA, and ethical OSINT standards.</p> | |
| </div> | |
| </div> | |
| </aside> | |
| <!-- Content Area --> | |
| <div class="content-area"> | |
| <!-- Threat Analysis Tab --> | |
| <section class="tab-content active" id="analyze-tab"> | |
| <div class="section-header"> | |
| <h2>Threat Intelligence Analysis</h2> | |
| <p>Analyze publicly available threat intelligence data using AI-powered NLP</p> | |
| </div> | |
| <div class="analysis-container"> | |
| <div class="input-section"> | |
| <label for="threatInput">Paste threat intelligence report, security advisory, or public data:</label> | |
| <textarea id="threatInput" placeholder="Enter text for analysis... Example: Paste a CVE description, security advisory, or threat report from public sources." rows="8"></textarea> | |
| <div class="input-actions"> | |
| <button class="btn btn-secondary" onclick="loadSampleData()"> | |
| Load Sample Data | |
| </button> | |
| <button class="btn btn-primary" onclick="analyzeThreat()" id="analyzeBtn"> | |
| <span class="btn-text">Analyze</span> | |
| <span class="btn-loader hidden"></span> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="output-section" id="analysisOutput"> | |
| <div class="empty-state"> | |
| <div class="empty-icon">π‘οΈ</div> | |
| <h3>No Analysis Yet</h3> | |
| <p>Enter threat intelligence data and click Analyze to begin</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Entity Extraction Tab --> | |
| <section class="tab-content" id="entities-tab"> | |
| <div class="section-header"> | |
| <h2>Named Entity Recognition</h2> | |
| <p>Extract organizations, locations, and threat actors from public intelligence reports</p> | |
| </div> | |
| <div class="analysis-container"> | |
| <div class="input-section"> | |
| <label for="entityInput">Enter text for entity extraction:</label> | |
| <textarea id="entityInput" placeholder="Paste intelligence report text..." rows="6"></textarea> | |
| <div class="input-actions"> | |
| <button class="btn btn-primary" onclick="extractEntities()" id="entityBtn"> | |
| Extract Entities | |
| </button> | |
| </div> | |
| </div> | |
| <div class="output-section" id="entityOutput"> | |
| <div class="empty-state"> | |
| <div class="empty-icon">π·οΈ</div> | |
| <h3>No Entities Extracted</h3> | |
| <p>Enter text and click Extract to identify named entities</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Sentiment Analysis Tab --> | |
| <section class="tab-content" id="sentiment-tab"> | |
| <div class="section-header"> | |
| <h2>Threat Sentiment Analysis</h2> | |
| <p>Analyze sentiment of security communications and public disclosures</p> | |
| </div> | |
| <div class="analysis-container"> | |
| <div class="input-section"> | |
| <label for="sentimentInput">Enter text for sentiment analysis:</label> | |
| <textarea id="sentimentInput" placeholder="Paste security communication or public statement..." rows="6"></textarea> | |
| <div class="input-actions"> | |
| <button class="btn btn-primary" onclick="analyzeSentiment()" id="sentimentBtn"> | |
| Analyze Sentiment | |
| </button> | |
| </div> | |
| </div> | |
| <div class="output-section" id="sentimentOutput"> | |
| <div class="empty-state"> | |
| <div class="empty-icon">π</div> | |
| <h3>No Sentiment Analysis</h3> | |
| <p>Enter text to analyze its sentiment and urgency level</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Summarize Tab --> | |
| <section class="tab-content" id="summarize-tab"> | |
| <div class="section-header"> | |
| <h2>Report Summarization</h2> | |
| <p>Generate concise summaries of lengthy threat intelligence reports</p> | |
| </div> | |
| <div class="analysis-container"> | |
| <div class="input-section"> | |
| <label for="summaryInput">Enter long-form report text:</label> | |
| <textarea id="summaryInput" placeholder="Paste a lengthy threat report or security advisory..." rows="10"></textarea> | |
| <div class="input-actions"> | |
| <button class="btn btn-primary" onclick="summarizeReport()" id="summaryBtn"> | |
| Generate Summary | |
| </button> | |
| </div> | |
| </div> | |
| <div class="output-section" id="summaryOutput"> | |
| <div class="empty-state"> | |
| <div class="empty-icon">π</div> | |
| <h3>No Summary Generated</h3> | |
| <p>Enter a report and click Generate to create a summary</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Classify Tab --> | |
| <section class="tab-content" id="classify-tab"> | |
| <div class="section-header"> | |
| <h2>Threat Classification</h2> | |
| <p>Classify threats by type, severity, and category</p> | |
| </div> | |
| <div class="analysis-container"> | |
| <div class="input-section"> | |
| <label for="classifyInput">Enter threat description:</label> | |
| <textarea id="classifyInput" placeholder="Describe a security threat or incident..." rows="6"></textarea> | |
| <div class="input-actions"> | |
| <button class="btn btn-primary" onclick="classifyThreat()" id="classifyBtn"> | |
| Classify Threat | |
| </button> | |
| </div> | |
| </div> | |
| <div class="output-section" id="classifyOutput"> | |
| <div class="empty-state"> | |
| <div class="empty-icon">π</div> | |
| <h3>No Classification</h3> | |
| <p>Enter a threat description to classify it</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| </div> | |
| </main> | |
| <!-- Compliance Modal --> | |
| <div class="modal" id="complianceModal"> | |
| <div class="modal-content"> | |
| <div class="modal-header"> | |
| <h3>π‘οΈ Compliance & Ethics Notice</h3> | |
| <button class="modal-close" onclick="closeModal()">×</button> | |
| </div> | |
| <div class="modal-body"> | |
| <p>This platform is designed exclusively for <strong>legitimate cybersecurity professionals</strong> operating within legal and ethical boundaries.</p> | |
| <ul> | |
| <li>β Only analyze publicly available data</li> | |
| <li>β Maintain proper authorization for all activities</li> | |
| <li>β Comply with GDPR, CCPA, and local regulations</li> | |
| <li>β Respect privacy rights and data protection laws</li> | |
| <li>β No unauthorized access to private systems</li> | |
| <li>β No credential harvesting or exploitation</li> | |
| <li>β No activities that violate applicable laws</li> | |
| </ul> | |
| <p class="warning">β οΈ All actions are logged for compliance auditing purposes.</p> | |
| </div> | |
| <div class="modal-footer"> | |
| <button class="btn btn-primary" onclick="acceptCompliance()">I Understand & Accept</button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Progress Overlay --> | |
| <div class="progress-overlay hidden" id="progressOverlay"> | |
| <div class="progress-card"> | |
| <div class="progress-spinner"></div> | |
| <h3 id="progressTitle">Processing...</h3> | |
| <p id="progressText">AI model is analyzing your data</p> | |
| <div class="progress-bar"> | |
| <div class="progress-fill" id="progressFill"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script type="module" src="index.js"></script> | |
| </body> | |
| </html> |