Spaces:

S-Dreamer
/

ai-code-classifier

Running

App Files Files Community

ai-code-classifier / index.html

S-Dreamer

Add 3 files

4817f27 verified 6 days ago

raw

history blame contribute delete

26.2 kB

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>AI Code Classifier \| Cybersecurity & Software Engineering</title>
	<script src="https://cdn.tailwindcss.com"></script>
	<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">
	<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/github-dark.min.css">
	<style>
	body {
	font-family: 'Inter', sans-serif;
	background-color: #22272E;
	color: #ADBAC7;
	}
	.code-font {
	font-family: 'JetBrains Mono', monospace;
	}
	.primary-bg {
	background-color: #2D333B;
	}
	.secondary-color {
	color: #539BF5;
	}
	.secondary-bg {
	background-color: #539BF5;
	}
	.accent-bg {
	background-color: #347D39;
	}
	.syntax-highlight {
	background-color: #2b313a;
	border-radius: 6px;
	}
	.sidebar {
	transition: all 0.3s ease;
	}
	.sidebar-collapsed {
	transform: translateX(-100%);
	}
	.tab-active {
	border-bottom: 2px solid #539BF5;
	color: #539BF5;
	}
	.confidence-bar {
	background: linear-gradient(90deg, #347D39 0%, #539BF5 100%);
	}
	</style>
	</head>
	<body class="min-h-screen flex flex-col">
	<!-- Header -->
	<header class="primary-bg border-b border-gray-700 py-4 px-6 flex items-center justify-between">
	<div class="flex items-center space-x-4">
	<button id="sidebarToggle" class="text-gray-400 hover:text-white">
	<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
	<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
	</svg>
	</button>
	<h1 class="text-xl font-semibold secondary-color">AI Code Classifier</h1>
	</div>
	<div class="flex items-center space-x-4">
	<button class="px-4 py-2 rounded-md bg-blue-900/30 text-blue-400 hover:bg-blue-900/50 flex items-center space-x-2">
	<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
	<path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd" />
	</svg>
	<span>Documentation</span>
	</button>
	<div class="w-8 h-8 rounded-full bg-blue-500 flex items-center justify-center">
	<span class="text-sm font-medium">AI</span>
	</div>
	</div>
	</header>

	<div class="flex flex-1 overflow-hidden">
	<!-- Sidebar -->
	<aside id="sidebar" class="primary-bg border-r border-gray-700 w-64 flex-shrink-0 flex flex-col sidebar">
	<div class="p-4 border-b border-gray-700">
	<h2 class="text-lg font-medium">Navigation</h2>
	</div>
	<nav class="flex-1 overflow-y-auto p-4 space-y-2">
	<a href="#" class="flex items-center space-x-3 p-2 rounded-md bg-blue-900/30 text-blue-400">
	<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
	<path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z" />
	</svg>
	<span>Dashboard</span>
	</a>
	<a href="#" class="flex items-center space-x-3 p-2 rounded-md hover:bg-gray-700/50 text-gray-400 hover:text-gray-200">
	<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
	<path fill-rule="evenodd" d="M12.316 3.051a1 1 0 01.633 1.265l-4 12a1 1 0 11-1.898-.632l4-12a1 1 0 011.265-.633zM5.707 6.293a1 1 0 010 1.414L3.414 10l2.293 2.293a1 1 0 11-1.414 1.414l-3-3a1 1 0 010-1.414l3-3a1 1 0 011.414 0zm8.586 0a1 1 0 011.414 0l3 3a1 1 0 010 1.414l-3 3a1 1 0 11-1.414-1.414L16.586 10l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd" />
	</svg>
	<span>Code Analysis</span>
	</a>
	<a href="#" class="flex items-center space-x-3 p-2 rounded-md hover:bg-gray-700/50 text-gray-400 hover:text-gray-200">
	<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
	<path fill-rule="evenodd" d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z" clip-rule="evenodd" />
	</svg>
	<span>Security Findings</span>
	</a>
	<a href="#" class="flex items-center space-x-3 p-2 rounded-md hover:bg-gray-700/50 text-gray-400 hover:text-gray-200">
	<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
	<path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd" />
	</svg>
	<span>History</span>
	</a>
	<a href="#" class="flex items-center space-x-3 p-2 rounded-md hover:bg-gray-700/50 text-gray-400 hover:text-gray-200">
	<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
	<path fill-rule="evenodd" d="M11.49 3.17c-.38-1.56-2.6-1.56-2.98 0a1.532 1.532 0 01-2.286.948c-1.372-.836-2.942.734-2.106 2.106.54.886.061 2.042-.947 2.287-1.561.379-1.561 2.6 0 2.978a1.532 1.532 0 01.947 2.287c-.836 1.372.734 2.942 2.106 2.106a1.532 1.532 0 012.287.947c.379 1.561 2.6 1.561 2.978 0a1.533 1.533 0 012.287-.947c1.372.836 2.942-.734 2.106-2.106a1.533 1.533 0 01-.947-2.287c.379-1.561-.734-2.942-2.106-2.106a1.533 1.533 0 01-2.287-.947zM10 13a3 3 0 100-6 3 3 0 000 6z" clip-rule="evenodd" />
	</svg>
	<span>Settings</span>
	</a>
	</nav>
	<div class="p-4 border-t border-gray-700">
	<div class="flex items-center space-x-3">
	<div class="w-10 h-10 rounded-full bg-gray-600 flex items-center justify-center">
	<span class="text-sm font-medium">U</span>
	</div>
	<div>
	<p class="text-sm font-medium">User Account</p>
	<p class="text-xs text-gray-400">[email protected]</p>
	</div>
	</div>
	</div>
	</aside>

	<!-- Main Content -->
	<main class="flex-1 flex flex-col overflow-hidden">
	<div class="border-b border-gray-700">
	<div class="flex space-x-6 px-6">
	<button class="py-3 px-1 font-medium tab-active">Code Analysis</button>
	<button class="py-3 px-1 font-medium text-gray-400 hover:text-gray-200">Batch Processing</button>
	<button class="py-3 px-1 font-medium text-gray-400 hover:text-gray-200">Model Settings</button>
	</div>
	</div>

	<div class="flex-1 overflow-auto p-6">
	<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
	<!-- Code Input Section -->
	<div class="primary-bg rounded-lg overflow-hidden border border-gray-700">
	<div class="p-4 border-b border-gray-700 flex justify-between items-center">
	<h3 class="font-medium">Input Code</h3>
	<div class="flex space-x-2">
	<select class="bg-gray-700 text-gray-300 text-sm rounded px-3 py-1">
	<option>JavaScript</option>
	<option>Python</option>
	<option>PHP</option>
	<option>Java</option>
	<option>C++</option>
	<option>Bash</option>
	<option>SQL</option>
	</select>
	<button class="bg-gray-700 text-gray-300 text-sm rounded px-3 py-1 hover:bg-gray-600">
	<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
	<path fill-rule="evenodd" d="M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4zm2 6a1 1 0 011-1h6a1 1 0 110 2H7a1 1 0 01-1-1zm1 3a1 1 0 100 2h6a1 1 0 100-2H7z" clip-rule="evenodd" />
	</svg>
	</button>
	</div>
	</div>
	<div class="p-4">
	<div id="codeEditor" class="syntax-highlight code-font p-4 rounded min-h-[300px] max-h-[500px] overflow-auto" contenteditable="true">// Enter your code here for analysis
	// Example JavaScript code:
	function processData(input) {
	// Potential XSS vulnerability
	document.getElementById('output').innerHTML = input;

	// SQL injection risk
	const query = `SELECT * FROM users WHERE username = '${input}'`;

	// Shell command injection
	const result = execSync(`ls ${input}`);

	return result;
	}</div>
	</div>
	<div class="p-4 border-t border-gray-700 flex justify-between">
	<div class="flex space-x-2">
	<button class="px-3 py-1 text-sm rounded bg-gray-700 hover:bg-gray-600 text-gray-300">
	<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 inline mr-1" viewBox="0 0 20 20" fill="currentColor">
	<path fill-rule="evenodd" d="M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4zm2 6a1 1 0 011-1h6a1 1 0 110 2H7a1 1 0 01-1-1zm1 3a1 1 0 100 2h6a1 1 0 100-2H7z" clip-rule="evenodd" />
	</svg>
	Load Sample
	</button>
	<button class="px-3 py-1 text-sm rounded bg-gray-700 hover:bg-gray-600 text-gray-300">
	<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 inline mr-1" viewBox="0 0 20 20" fill="currentColor">
	<path fill-rule="evenodd" d="M3 17a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm3.293-7.707a1 1 0 011.414 0L9 10.586V3a1 1 0 112 0v7.586l1.293-1.293a1 1 0 111.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z" clip-rule="evenodd" />
	</svg>
	Upload File
	</button>
	</div>
	<button id="analyzeBtn" class="px-4 py-2 rounded-md secondary-bg text-white hover:bg-blue-600 flex items-center">
	<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" viewBox="0 0 20 20" fill="currentColor">
	<path fill-rule="evenodd" d="M9.243 3.03a1 1 0 01.727 1.213L9.53 6h2.94l.56-2.243a1 1 0 111.94.486L14.53 6H17a1 1 0 110 2h-2.97l-1 4H15a1 1 0 110 2h-2.47l-.56 2.242a1 1 0 11-1.94-.485L10.47 14H7.53l-.56 2.242a1 1 0 11-1.94-.485L5.47 14H3a1 1 0 110-2h2.97l1-4H5a1 1 0 110-2h2.47l.56-2.243a1 1 0 011.213-.727zM9.03 8l-1 4h2.938l1-4H9.031z" clip-rule="evenodd" />
	</svg>
	Analyze Code
	</button>
	</div>
	</div>

	<!-- Results Section -->
	<div class="primary-bg rounded-lg overflow-hidden border border-gray-700">
	<div class="p-4 border-b border-gray-700">
	<h3 class="font-medium">Analysis Results</h3>
	</div>
	<div class="p-4">
	<div id="resultsContainer" class="min-h-[300px] max-h-[500px] overflow-auto">
	<div class="text-center py-12 text-gray-500">
	<svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 mx-auto text-gray-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
	<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
	</svg>
	<p class="mt-4">Submit code for analysis to see results</p>
	</div>
	</div>
	</div>
	</div>
	</div>

	<!-- Model Information -->
	<div class="primary-bg rounded-lg overflow-hidden border border-gray-700 mt-6">
	<div class="p-4 border-b border-gray-700">
	<h3 class="font-medium">AI Model Information</h3>
	</div>
	<div class="p-4 grid grid-cols-1 md:grid-cols-3 gap-4">
	<div class="border border-gray-700 rounded-lg p-4">
	<div class="flex items-center space-x-3 mb-3">
	<div class="w-10 h-10 rounded-full bg-blue-900/30 flex items-center justify-center">
	<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-blue-400" viewBox="0 0 20 20" fill="currentColor">
	<path fill-rule="evenodd" d="M11.3 1.046A1 1 0 0112 2v5h4a1 1 0 01.82 1.573l-7 10A1 1 0 018 18v-5H4a1 1 0 01-.82-1.573l7-10a1 1 0 011.12-.38z" clip-rule="evenodd" />
	</svg>
	</div>
	<h4 class="font-medium">replit-code-v1_5-3b</h4>
	</div>
	<p class="text-sm text-gray-400">Specialized for code understanding and generation with 3 billion parameters.</p>
	<div class="mt-3">
	<span class="text-xs px-2 py-1 rounded bg-blue-900/30 text-blue-400">Code Analysis</span>
	<span class="text-xs px-2 py-1 rounded bg-blue-900/30 text-blue-400">Syntax</span>
	</div>
	</div>
	<div class="border border-gray-700 rounded-lg p-4">
	<div class="flex items-center space-x-3 mb-3">
	<div class="w-10 h-10 rounded-full bg-green-900/30 flex items-center justify-center">
	<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-green-400" viewBox="0 0 20 20" fill="currentColor">
	<path fill-rule="evenodd" d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z" clip-rule="evenodd" />
	</svg>
	</div>
	<h4 class="font-medium">Llama-3.1-WhiteRabbitNeo-2-8B</h4>
	</div>
	<p class="text-sm text-gray-400">8 billion parameter model fine-tuned for cybersecurity and vulnerability detection.</p>
	<div class="mt-3">
	<span class="text-xs px-2 py-1 rounded bg-green-900/30 text-green-400">Security</span>
	<span class="text-xs px-2 py-1 rounded bg-green-900/30 text-green-400">Vulnerabilities</span>
	</div>
	</div>
	<div class="border border-gray-700 rounded-lg p-4">
	<div class="flex items-center space-x-3 mb-3">
	<div class="w-10 h-10 rounded-full bg-purple-900/30 flex items-center justify-center">
	<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-purple-400" viewBox="0 0 20 20" fill="currentColor">
	<path d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z" />
	</svg>
	</div>
	<h4 class="font-medium">Llama-3.1-WhiteRabbitNeo-2-70B</h4>
	</div>
	<p class="text-sm text-gray-400">70 billion parameter model for comprehensive code analysis and classification.</p>
	<div class="mt-3">
	<span class="text-xs px-2 py-1 rounded bg-purple-900/30 text-purple-400">Classification</span>
	<span class="text-xs px-2 py-1 rounded bg-purple-900/30 text-purple-400">Deep Analysis</span>
	</div>
	</div>
	</div>
	<div class="p-4 border-t border-gray-700 text-sm text-gray-400">
	<p>Models trained on specialized datasets including Canstralian/Wordlists, Canstralian/CyberExploitDB, Canstralian/pentesting_dataset, and Canstralian/ShellCommands (MIT License).</p>
	</div>
	</div>
	</div>
	</main>
	</div>

	<script>
	// Initialize syntax highlighting
	document.addEventListener('DOMContentLoaded', (event) => {
	// Toggle sidebar
	const sidebarToggle = document.getElementById('sidebarToggle');
	const sidebar = document.getElementById('sidebar');

	sidebarToggle.addEventListener('click', () => {
	sidebar.classList.toggle('sidebar-collapsed');
	});

	// Code analysis button
	const analyzeBtn = document.getElementById('analyzeBtn');
	const resultsContainer = document.getElementById('resultsContainer');

	analyzeBtn.addEventListener('click', () => {
	// Simulate analysis
	resultsContainer.innerHTML = `
	<div class="space-y-4">
	<div class="border-b border-gray-700 pb-4">
	<h4 class="font-medium text-lg mb-3">Classification Results</h4>
	<div class="space-y-3">
	<div>
	<div class="flex justify-between text-sm mb-1">
	<span>Security Vulnerability</span>
	<span>87%</span>
	</div>
	<div class="w-full bg-gray-700 rounded-full h-2">
	<div class="confidence-bar h-2 rounded-full" style="width: 87%"></div>
	</div>
	</div>
	<div>
	<div class="flex justify-between text-sm mb-1">
	<span>Code Quality Issue</span>
	<span>65%</span>
	</div>
	<div class="w-full bg-gray-700 rounded-full h-2">
	<div class="confidence-bar h-2 rounded-full" style="width: 65%"></div>
	</div>
	</div>
	<div>
	<div class="flex justify-between text-sm mb-1">
	<span>Potential Bug</span>
	<span>72%</span>
	</div>
	<div class="w-full bg-gray-700 rounded-full h-2">
	<div class="confidence-bar h-2 rounded-full" style="width: 72%"></div>
	</div>
	</div>
	</div>
	</div>

	<div class="border-b border-gray-700 pb-4">
	<h4 class="font-medium text-lg mb-3">Detailed Findings</h4>
	<div class="space-y-4">
	<div class="p-3 rounded-md bg-red-900/20 border border-red-900/50">
	<div class="flex justify-between items-start">
	<div>
	<span class="font-medium text-red-400">High Severity</span>
	<p class="text-sm mt-1">Potential XSS vulnerability detected in line 4: Unsanitized input being written directly to DOM.</p>
	</div>
	<span class="text-xs px-2 py-1 rounded bg-red-900/30 text-red-400">CWE-79</span>
	</div>
	</div>
	<div class="p-3 rounded-md bg-yellow-900/20 border border-yellow-900/50">
	<div class="flex justify-between items-start">
	<div>
	<span class="font-medium text-yellow-400">Medium Severity</span>
	<p class="text-sm mt-1">SQL injection risk detected in line 7: User input concatenated directly into SQL query.</p>
	</div>
	<span class="text-xs px-2 py-1 rounded bg-yellow-900/30 text-yellow-400">CWE-89</span>
	</div>
	</div>
	<div class="p-3 rounded-md bg-orange-900/20 border border-orange-900/50">
	<div class="flex justify-between items-start">
	<div>
	<span class="font-medium text-orange-400">Medium Severity</span>
	<p class="text-sm mt-1">Shell command injection detected in line 10: Unsanitized user input used in command execution.</p>
	</div>
	<span class="text-xs px-2 py-1 rounded bg-orange-900/30 text-orange-400">CWE-78</span>
	</div>
	</div>
	</div>
	</div>

	<div>
	<h4 class="font-medium text-lg mb-3">Recommendations</h4>
	<ul class="list-disc list-inside text-sm space-y-2 pl-2">
	<li>Use DOM text methods (textContent) instead of innerHTML when displaying user input</li>
	<li>Implement parameterized queries or use an ORM to prevent SQL injection</li>
	<li>Sanitize all user input before using in shell commands</li>
	<li>Consider implementing input validation for all external inputs</li>
	</ul>
	</div>
	</div>
	`;
	});

	// Apply syntax highlighting to code editor
	const codeEditor = document.getElementById('codeEditor');

	codeEditor.addEventListener('input', () => {
	// In a real implementation, we would use highlight.js here
	// For this demo, we'll just simulate it
	setTimeout(() => {
	const code = codeEditor.innerText;
	// This is where we would actually apply syntax highlighting
	// For now, we'll just keep it simple
	}, 100);
	});
	});
	</script>
	<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=S-Dreamer/ai-code-classifier" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
	</html>