Spaces:
Running
Running
File size: 13,334 Bytes
fb817b2 |
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 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>RabbitRedux Code Classifier</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
.gradient-bg {
background: linear-gradient(135deg, #6e8efb 0%, #a777e3 100%);
}
.code-input {
font-family: 'Courier New', monospace;
min-height: 200px;
}
.result-card {
transition: all 0.3s ease;
}
.result-card:hover {
transform: translateY(-5px);
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
.language-tag {
animation: pulse 2s infinite;
}
@keyframes pulse {
0% { opacity: 0.8; }
50% { opacity: 1; }
100% { opacity: 0.8; }
}
</style>
</head>
<body class="bg-gray-50">
<header class="gradient-bg text-white shadow-lg">
<div class="container mx-auto px-4 py-8">
<div class="flex items-center justify-between">
<div class="flex items-center space-x-3">
<i class="fas fa-code text-3xl"></i>
<h1 class="text-3xl font-bold">RabbitRedux</h1>
</div>
<div class="hidden md:flex space-x-6">
<a href="#" class="hover:text-gray-200 transition">Features</a>
<a href="#" class="hover:text-gray-200 transition">Documentation</a>
<a href="#" class="hover:text-gray-200 transition">API</a>
<a href="#" class="hover:text-gray-200 transition">Pricing</a>
</div>
<button class="bg-white text-purple-700 px-4 py-2 rounded-full font-semibold hover:bg-gray-100 transition">
Get Started
</button>
</div>
<div class="mt-16 text-center">
<h2 class="text-4xl md:text-5xl font-bold mb-4">Code Classification Model</h2>
<p class="text-xl max-w-3xl mx-auto">
AI-powered code classification for cybersecurity and software engineering
</p>
</div>
</div>
</header>
<main class="container mx-auto px-4 py-12 -mt-10">
<div class="bg-white rounded-xl shadow-xl overflow-hidden">
<div class="grid md:grid-cols-2 gap-0">
<!-- Input Section -->
<div class="p-6 bg-gray-50">
<h3 class="text-2xl font-semibold mb-4 text-gray-800">Analyze Your Code</h3>
<div class="mb-4">
<label class="block text-gray-700 mb-2">Select Language</label>
<div class="flex flex-wrap gap-2">
<button class="px-4 py-2 bg-purple-600 text-white rounded-full flex items-center">
<i class="fab fa-python mr-2"></i> Python
</button>
<button class="px-4 py-2 bg-yellow-400 text-gray-800 rounded-full flex items-center">
<i class="fab fa-js mr-2"></i> JavaScript
</button>
<button class="px-4 py-2 bg-blue-600 text-white rounded-full flex items-center">
<i class="fab fa-java mr-2"></i> Java
</button>
<button class="px-4 py-2 bg-red-500 text-white rounded-full flex items-center">
<i class="fas fa-code mr-2"></i> C++
</button>
</div>
</div>
<textarea
class="w-full code-input p-4 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
placeholder="Paste your code here..."></textarea>
<div class="mt-4 flex justify-between items-center">
<div class="flex items-center space-x-2 text-gray-500">
<i class="fas fa-info-circle"></i>
<span>Supports up to 1000 lines of code</span>
</div>
<button class="gradient-bg text-white px-6 py-3 rounded-lg font-semibold hover:opacity-90 transition flex items-center">
<i class="fas fa-play mr-2"></i> Analyze Code
</button>
</div>
</div>
<!-- Results Section -->
<div class="p-6 bg-white">
<h3 class="text-2xl font-semibold mb-4 text-gray-800">Classification Results</h3>
<div class="space-y-4">
<!-- Sample Result Card -->
<div class="result-card bg-gray-50 p-4 rounded-lg border-l-4 border-purple-500">
<div class="flex justify-between items-start">
<div>
<span class="inline-block bg-purple-100 text-purple-800 px-2 py-1 rounded-full text-xs font-semibold language-tag">
Python
</span>
<h4 class="font-semibold mt-2">Web Application</h4>
<p class="text-sm text-gray-600">Flask-based web service with SQLAlchemy ORM</p>
</div>
<span class="bg-green-100 text-green-800 px-2 py-1 rounded-full text-xs font-semibold">
92% Confidence
</span>
</div>
</div>
<!-- Sample Security Result -->
<div class="result-card bg-gray-50 p-4 rounded-lg border-l-4 border-red-500">
<div class="flex justify-between items-start">
<div>
<span class="inline-block bg-red-100 text-red-800 px-2 py-1 rounded-full text-xs font-semibold">
Security
</span>
<h4 class="font-semibold mt-2">Potential SQL Injection</h4>
<p class="text-sm text-gray-600">Raw SQL query detected without parameterization</p>
</div>
<span class="bg-yellow-100 text-yellow-800 px-2 py-1 rounded-full text-xs font-semibold">
87% Confidence
</span>
</div>
</div>
<!-- Sample Performance Result -->
<div class="result-card bg-gray-50 p-4 rounded-lg border-l-4 border-blue-500">
<div class="flex justify-between items-start">
<div>
<span class="inline-block bg-blue-100 text-blue-800 px-2 py-1 rounded-full text-xs font-semibold">
Performance
</span>
<h4 class="font-semibold mt-2">N+1 Query Issue</h4>
<p class="text-sm text-gray-600">Multiple database queries detected in loop</p>
</div>
<span class="bg-green-100 text-green-800 px-2 py-1 rounded-full text-xs font-semibold">
85% Confidence
</span>
</div>
</div>
</div>
<div class="mt-6 p-4 bg-purple-50 rounded-lg">
<h4 class="font-semibold text-purple-800 mb-2">Model Details</h4>
<div class="grid grid-cols-2 gap-4 text-sm">
<div>
<p class="text-gray-600">Model Version</p>
<p class="font-medium">RabbitRedux v2.3.1</p>
</div>
<div>
<p class="text-gray-600">Training Data</p>
<p class="font-medium">1.2M code samples</p>
</div>
<div>
<p class="text-gray-600">Last Updated</p>
<p class="font-medium">June 2023</p>
</div>
<div>
<p class="text-gray-600">Accuracy</p>
<p class="font-medium">94.7%</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Features Section -->
<div class="mt-20 text-center">
<h2 class="text-3xl font-bold mb-4">Key Features</h2>
<p class="text-gray-600 max-w-2xl mx-auto mb-12">
RabbitRedux is optimized for modern development workflows with specialized capabilities
</p>
<div class="grid md:grid-cols-3 gap-8">
<div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition">
<div class="w-12 h-12 gradient-bg rounded-full flex items-center justify-center text-white mb-4 mx-auto">
<i class="fas fa-shield-alt text-xl"></i>
</div>
<h3 class="font-semibold text-lg mb-2">Cybersecurity Focus</h3>
<p class="text-gray-600">
Detects vulnerabilities like SQLi, XSS, and insecure dependencies with high accuracy
</p>
</div>
<div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition">
<div class="w-12 h-12 gradient-bg rounded-full flex items-center justify-center text-white mb-4 mx-auto">
<i class="fas fa-language text-xl"></i>
</div>
<h3 class="font-semibold text-lg mb-2">Multi-Language</h3>
<p class="text-gray-600">
Supports Python, JavaScript, Java, C++, and more with specialized models for each
</p>
</div>
<div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition">
<div class="w-12 h-12 gradient-bg rounded-full flex items-center justify-center text-white mb-4 mx-auto">
<i class="fas fa-bolt text-xl"></i>
</div>
<h3 class="font-semibold text-lg mb-2">Performance Optimized</h3>
<p class="text-gray-600">
Identifies performance anti-patterns and suggests optimizations
</p>
</div>
</div>
</div>
<!-- Call to Action -->
<div class="mt-20 gradient-bg rounded-xl p-8 text-white text-center">
<h2 class="text-3xl font-bold mb-4">Ready to enhance your code security?</h2>
<p class="text-xl mb-8 max-w-2xl mx-auto">
Integrate RabbitRedux into your development workflow today
</p>
<div class="flex justify-center space-x-4">
<button class="bg-white text-purple-700 px-6 py-3 rounded-lg font-semibold hover:bg-gray-100 transition">
Get Started
</button>
<button class="border-2 border-white px-6 py-3 rounded-lg font-semibold hover:bg-white hover:bg-opacity-10 transition">
View Documentation
</button>
</div>
</div>
</main>
<footer class="bg-gray-800 text-white py-12">
<div class="container mx-auto px-4">
<div class="grid md:grid-cols-4 gap-8">
<div>
<h3 class="text-xl font-semibold mb-4 flex items-center">
<i class="fas fa-code mr-2"></i> RabbitRedux
</h3>
<p class="text-gray-400">
Advanced AI for code classification and security analysis
</p>
</div>
<div>
<h4 class="font-semibold mb-4">Product</h4>
<ul class="space-y-2">
<li><a href="#" class="text-gray-400 hover:text-white transition">Features</a
</html> |