apurba09/python-pixel-similarity-sleuth
0
1<!DOCTYPE html>2<html lang="en">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>CodeCloneX</title>7 <script src="https://cdn.tailwindcss.com"></script>8 <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>9 <script src="https://unpkg.com/feather-icons"></script>10 <script src="https://cdn.jsdelivr.net/npm/animejs@3.2.1/lib/anime.min.js"></script>11 <style>12 @import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;500;700&family=Roboto:wght@300;400;500;700&display=swap');13 14 body {15 font-family: 'Roboto', sans-serif;16 background-image: url('https://huggingface.co/spaces/apurba09/python-pixel-similarity-sleuth/resolve/main/images/3213343.jpg');17 background-size: cover;18 background-position: center;19 background-attachment: fixed;20 }21 22 .container {23 background-color: rgba(255, 255, 255, 0.9);24 border-radius: 1rem;25 backdrop-filter: blur(5px);26 }27.code-input {28 font-family: 'Roboto Mono', monospace;29 min-height: 300px;30 transition: all 0.3s ease;31 }32 33 .pixel-bg {34 background-image: 35 linear-gradient(to right, #e2e8f0 1px, transparent 1px),36 linear-gradient(to bottom, #e2e8f0 1px, transparent 1px);37 background-size: 20px 20px;38 }39 40 .fade-in {41 animation: fadeIn 0.5s ease-out forwards;42 }43 44 @keyframes fadeIn {45 from { opacity: 0; transform: translateY(10px); }46 to { opacity: 1; transform: translateY(0); }47 }48 49 .highlight {50 background-color: rgba(94, 234, 212, 0.2);51 }52 </style>53</head>54<body class="min-h-screen pixel-bg">55 <div class="container mx-auto px-4 py-12 max-w-6xl">56 <header class="mb-12 text-center">57 <h1 class="text-4xl md:text-5xl font-bold text-gray-800 mb-4">CodeCloneX</h1>58 <p class="text-xl text-gray-600 max-w-2xl mx-auto">59 Advanced Code Similarity Detection for Python60 </p>61</header>62 63 <div class="flex flex-col lg:flex-row gap-8 mb-8">64 <div class="flex-1">65 <label for="code1" class="block text-lg font-medium text-gray-700 mb-2">66 <i data-feather="code" class="inline mr-2"></i> Code 167 </label>68 <textarea 69 id="code1" 70 class="code-input w-full p-4 border-2 border-gray-200 rounded-lg shadow-sm focus:ring-2 focus:ring-teal-500 focus:border-teal-500 bg-white"71 placeholder="Paste your first Python code here..."></textarea>72 </div>73 74 <div class="flex-1">75 <label for="code2" class="block text-lg font-medium text-gray-700 mb-2">76 <i data-feather="code" class="inline mr-2"></i> Code 277 </label>78 <textarea 79 id="code2" 80 class="code-input w-full p-4 border-2 border-gray-200 rounded-lg shadow-sm focus:ring-2 focus:ring-teal-500 focus:border-teal-500 bg-white"81 placeholder="Paste your second Python code here..."></textarea>82 </div>83 </div>84 85 <div class="text-center mb-12">86 <button 87 id="compareBtn"88 class="px-8 py-4 bg-gradient-to-r from-teal-500 to-cyan-600 text-white font-bold rounded-full shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-teal-500 focus:ring-opacity-50">89 <i data-feather="search" class="inline mr-2"></i> Find similarity between the above two codes90 </button>91 </div>92 93 <div id="resultContainer" class="hidden max-w-4xl mx-auto">94 <div class="bg-white p-6 rounded-xl shadow-lg border-l-4 border-teal-500 fade-in">95 <h3 class="text-xl font-bold text-gray-800 mb-4 flex items-center">96 <i data-feather="bar-chart-2" class="mr-2"></i> Similarity Analysis97 </h3>98 <div id="resultText" class="text-3xl font-bold text-center py-8">99 <span id="similarityValue" class="text-teal-600">0</span>% similarity100 </div>101 <div id="similarLines" class="mt-4 p-4 bg-gray-50 rounded-lg hidden">102 <h4 class="font-medium text-gray-700 mb-2">Matching Lines:</h4>103 <div id="matchesContainer" class="font-mono text-sm"></div>104 </div>105 </div>106 </div>107 108 <footer class="mt-16 text-center text-gray-500">109 <p>Made with <i data-feather="heart" class="inline text-red-500" style="width: 16px; height: 16px;"></i> for Python developers</p>110 </footer>111 </div>112 113 <script>114 feather.replace();115 116 document.getElementById('compareBtn').addEventListener('click', function() {117 const code1 = document.getElementById('code1').value;118 const code2 = document.getElementById('code2').value;119 120 if (!code1 || !code2) {121 alert('Please enter code in both boxes');122 return;123 }124 125 // Simulate similarity calculation (in a real app, this would be an API call)126 const similarity = calculateSimilarity(code1, code2);127 128 // Show result129 const resultContainer = document.getElementById('resultContainer');130 const similarityValue = document.getElementById('similarityValue');131 const matchesContainer = document.getElementById('matchesContainer');132 const similarLines = document.getElementById('similarLines');133 134 resultContainer.classList.remove('hidden');135 similarityValue.textContent = similarity.percentage;136 137 // Highlight similar lines138 matchesContainer.innerHTML = '';139 if (similarity.matches.length > 0) {140 similarLines.classList.remove('hidden');141 similarity.matches.forEach(match => {142 const matchElement = document.createElement('div');143 matchElement.className = 'mb-1 p-2 rounded highlight';144 matchElement.textContent = match;145 matchesContainer.appendChild(matchElement);146 });147 } else {148 similarLines.classList.add('hidden');149 }150 151 // Animate the percentage counter152 anime({153 targets: '#similarityValue',154 innerHTML: [0, similarity.percentage],155 round: 1,156 easing: 'easeOutExpo',157 duration: 1500158 });159 160 // Scroll to results161 resultContainer.scrollIntoView({ behavior: 'smooth' });162 });163 164 // Simple similarity calculation for demo purposes165 function calculateSimilarity(code1, code2) {166 const lines1 = code1.split('\n').filter(line => line.trim() !== '');167 const lines2 = code2.split('\n').filter(line => line.trim() !== '');168 169 if (lines1.length === 0 || lines2.length === 0) {170 return { percentage: 0, matches: [] };171 }172 173 const commonLines = [];174 const matches = [];175 176 lines1.forEach(line1 => {177 if (lines2.includes(line1) && !commonLines.includes(line1)) {178 commonLines.push(line1);179 matches.push(line1);180 }181 });182 183 const maxLength = Math.max(lines1.length, lines2.length);184 const similarity = (commonLines.length / maxLength) * 100;185 186 return {187 percentage: Math.round(similarity),188 matches: matches.slice(0, 5) // Show max 5 matches for demo189 };190 }191 </script>192</body>193</html>194