File size: 15,923 Bytes
cc62306 | 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 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 | <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AI Code Deobfuscator</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/codemirror.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/theme/dracula.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/codemirror.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/mode/javascript/javascript.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/1.4.0/axios.min.js"></script>
<style>
.CodeMirror {
height: 100% !important;
font-size: 14px;
line-height: 1.5;
}
.explanation-line {
transition: all 0.2s ease;
}
.explanation-line:hover {
background-color: rgba(74, 222, 128, 0.1);
}
.cm-activeLine {
background-color: rgba(99, 102, 241, 0.1) !important;
}
</style>
</head>
<body class="bg-gray-900 text-gray-100 min-h-screen">
<div class="container mx-auto px-4 py-8">
<!-- Header -->
<header class="mb-8">
<div class="flex items-center justify-between">
<div>
<h1 class="text-3xl font-bold bg-gradient-to-r from-green-400 to-blue-500 bg-clip-text text-transparent">AI Code Deobfuscator</h1>
<p class="text-gray-400">Paste obfuscated code and get clean, explained output</p>
</div>
<div class="flex items-center space-x-4">
<button id="deobfuscateBtn" class="px-6 py-2 bg-gradient-to-r from-green-500 to-blue-600 rounded-md font-medium hover:opacity-90 transition 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="M4 2a1 1 0 011 1v2.101a7.002 7.002 0 0111.601 2.566 1 1 0 11-1.885.666A5.002 5.002 0 005.999 7H9a1 1 0 010 2H4a1 1 0 01-1-1V3a1 1 0 011-1zm.008 9.057a1 1 0 011.276.61A5.002 5.002 0 0014.001 13H11a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0v-2.101a7.002 7.002 0 01-11.601-2.566 1 1 0 01.61-1.276z" clip-rule="evenodd" />
</svg>
Deobfuscate
</button>
</div>
</div>
</header>
<!-- Main Content -->
<div class="flex flex-col lg:flex-row gap-6">
<!-- Left Panel - Obfuscated Code -->
<div class="flex-1 flex flex-col">
<div class="flex items-center justify-between mb-2">
<h2 class="text-lg font-semibold text-gray-300">Obfuscated Code</h2>
<div class="text-sm text-gray-500" id="charCount">0 characters</div>
</div>
<div class="bg-gray-800 rounded-lg overflow-hidden flex-1">
<textarea id="obfuscatedCode" class="hidden">// Paste your obfuscated code here
function _0x3d9e(_0x4c42e5,_0x5a6d3e){var _0x3d9e5e=_0x4c42();return _0x3d9e=function(_0x3d9e5e,_0x4c42e5){_0x3d9e5e=_0x3d9e5e-0x186;var _0x5a6d3e=_0x4c42[_0x3d9e5e];return _0x5a6d3e;},_0x3d9e(_0x4c42e5,_0x5a6d3e);}function hi(){console['log']('Hello\x20World!');}hi();</textarea>
</div>
</div>
<!-- Right Panel - Deobfuscated Code & Explanation -->
<div class="flex-1 flex flex-col">
<div class="flex items-center justify-between mb-2">
<h2 class="text-lg font-semibold text-gray-300">Deobfuscated Code</h2>
<div class="flex space-x-2">
<button id="copyBtn" class="text-sm text-gray-400 hover:text-white transition flex items-center" disabled>
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" viewBox="0 0 20 20" fill="currentColor">
<path d="M8 3a1 1 0 011-1h2a1 1 0 110 2H9a1 1 0 01-1-1z" />
<path d="M6 3a2 2 0 00-2 2v11a2 2 0 002 2h8a2 2 0 002-2V5a2 2 0 00-2-2 3 3 0 01-3 3H9a3 3 0 01-3-3z" />
</svg>
Copy
</button>
</div>
</div>
<div class="bg-gray-800 rounded-lg overflow-hidden flex-1 mb-6">
<textarea id="deobfuscatedCode" class="hidden" readonly></textarea>
</div>
<div class="flex-1 flex flex-col">
<h2 class="text-lg font-semibold text-gray-300 mb-2">Explanation</h2>
<div class="bg-gray-800 rounded-lg overflow-hidden flex-1 p-4 overflow-y-auto" id="explanationContainer">
<div class="text-center text-gray-500 py-12" id="defaultExplanationText">
<svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 mx-auto mb-4 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>Deobfuscated code will appear here with line-by-line explanations</p>
</div>
</div>
</div>
</div>
</div>
<!-- Status Bar -->
<div class="mt-6 text-sm text-gray-500 flex items-center justify-between">
<div id="statusMessage" class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" 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>Ready to deobfuscate</span>
</div>
<div class="flex items-center space-x-4">
<a href="#" class="hover:text-gray-300 transition">Docs</a>
<a href="#" class="hover:text-gray-300 transition">API</a>
<a href="#" class="hover:text-gray-300 transition">GitHub</a>
</div>
</div>
</div>
<script>
// Initialize CodeMirror editors
const obfuscatedEditor = CodeMirror.fromTextArea(document.getElementById('obfuscatedCode'), {
mode: 'javascript',
theme: 'dracula',
lineNumbers: true,
indentUnit: 4,
tabSize: 4,
autoCloseBrackets: true,
matchBrackets: true,
extraKeys: {"Ctrl-Space": "autocomplete"}
});
const deobfuscatedEditor = CodeMirror.fromTextArea(document.getElementById('deobfuscatedCode'), {
mode: 'javascript',
theme: 'dracula',
lineNumbers: true,
indentUnit: 4,
tabSize: 4,
readOnly: true
});
// Update character count
obfuscatedEditor.on('change', (editor) => {
const text = editor.getValue();
document.getElementById('charCount').textContent = `${text.length} characters`;
});
// API call to deobfuscate
document.getElementById('deobfuscateBtn').addEventListener('click', async () => {
const code = obfuscatedEditor.getValue();
if (!code.trim()) {
updateStatus('Please enter some code to deobfuscate', 'error');
return;
}
updateStatus('Deobfuscating...', 'loading');
try {
// Simulate API call (replace with actual axios call)
// const response = await axios.post('/deobfuscate', { code });
// const { deobfuscated, explanation } = response.data;
// Mock response for demo
await new Promise(resolve => setTimeout(resolve, 1500));
const mockResponse = {
deobfuscated: `// Simple hello world function\nfunction helloWorld() {\n console.log('Hello World!');\n}\n\nhelloWorld();`,
explanation: [
{ line: 1, text: "This is a comment explaining the purpose of the function" },
{ line: 2, text: "Declaration of a function named helloWorld" },
{ line: 3, text: "The function logs 'Hello World!' to the console" },
{ line: 4, text: "Closing brace for the function" },
{ line: 5, text: "Empty line for separation" },
{ line: 6, text: "Calling the helloWorld function to execute it" }
]
};
// Update UI with results
deobfuscatedEditor.setValue(mockResponse.deobfuscated);
renderExplanation(mockResponse.explanation);
document.getElementById('copyBtn').disabled = false;
updateStatus('Deobfuscation complete!', 'success');
} catch (error) {
console.error('Deobfuscation error:', error);
updateStatus('Failed to deobfuscate code', 'error');
}
});
// Copy button functionality
document.getElementById('copyBtn').addEventListener('click', () => {
const code = deobfuscatedEditor.getValue();
navigator.clipboard.writeText(code).then(() => {
const copyBtn = document.getElementById('copyBtn');
copyBtn.innerHTML = `
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1 text-green-400" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
</svg>
Copied!
`;
setTimeout(() => {
copyBtn.innerHTML = `
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" viewBox="0 0 20 20" fill="currentColor">
<path d="M8 3a1 1 0 011-1h2a1 1 0 110 2H9a1 1 0 01-1-1z" />
<path d="M6 3a2 2 0 00-2 2v11a2 2 0 002 2h8a2 2 0 002-2V5a2 2 0 00-2-2 3 3 0 01-3 3H9a3 3 0 01-3-3z" />
</svg>
Copy
`;
}, 2000);
});
});
// Helper functions
function updateStatus(message, type) {
const statusElement = document.getElementById('statusMessage');
let icon, color;
switch (type) {
case 'loading':
icon = `<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1 animate-spin" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M4 2a1 1 0 011 1v2.101a7.002 7.002 0 0111.601 2.566 1 1 0 11-1.885.666A5.002 5.002 0 005.999 7H9a1 1 0 010 2H4a1 1 0 01-1-1V3a1 1 0 011-1zm.008 9.057a1 1 0 011.276.61A5.002 5.002 0 0014.001 13H11a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0v-2.101a7.002 7.002 0 01-11.601-2.566 1 1 0 01.61-1.276z" clip-rule="evenodd" />
</svg>`;
color = 'text-blue-400';
break;
case 'success':
icon = `<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
</svg>`;
color = 'text-green-400';
break;
case 'error':
icon = `<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd" />
</svg>`;
color = 'text-red-400';
break;
default:
icon = `<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" 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>`;
color = 'text-gray-400';
}
statusElement.innerHTML = `${icon}<span class="${color}">${message}</span>`;
}
function renderExplanation(explanation) {
const container = document.getElementById('explanationContainer');
container.innerHTML = '';
if (!explanation || explanation.length === 0) {
container.innerHTML = '<div class="text-center text-gray-500 py-12">No explanation available</div>';
return;
}
explanation.forEach(item => {
const lineElement = document.createElement('div');
lineElement.className = 'explanation-line mb-2 pb-2 border-b border-gray-700 last:border-0';
lineElement.innerHTML = `
<div class="flex items-start">
<div class="bg-indigo-500 text-white text-xs px-2 py-1 rounded mr-3 mt-1">${item.line}</div>
<div class="text-gray-300 flex-1">${item.text}</div>
</div>
`;
container.appendChild(lineElement);
// Highlight corresponding line in deobfuscated editor when hovering explanation
lineElement.addEventListener('mouseenter', () => {
deobfuscatedEditor.addLineClass(item.line - 1, 'background', 'cm-highlight-line');
});
lineElement.addEventListener('mouseleave', () => {
deobfuscatedEditor.removeLineClass(item.line - 1, 'background', 'cm-highlight-line');
});
});
}
// Initialize with some default text
updateStatus('Ready to deobfuscate', 'default');
</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=HimanshuSaini01/ai-code-deobfuscator" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html> |