Spaces:

iohaijg
/

codecleano-ai-wizard

Running

App Files Files Community

iohaijg commited on Oct 13, 2025

Commit

8b295c3

verified ·

1 Parent(s): 0dd9d7b

make the internals and make it so that i can send full repositories and it will clean it

Browse files

Files changed (2) hide show

api.html +163 -0
index.html +110 -14

api.html ADDED Viewed

	@@ -0,0 +1,163 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>CodeCleano API</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <style>
+        .endpoint-method {
+            font-family: monospace;
+            padding: 0.25rem 0.5rem;
+            border-radius: 0.25rem;
+            font-weight: bold;
+        }
+        .endpoint-get { background-color: #6EE7B7; color: #065F46; }
+        .endpoint-post { background-color: #93C5FD; color: #1E40AF; }
+    </style>
+</head>
+<body class="bg-gray-900 text-gray-100">
+    <nav class="bg-gray-800/80 backdrop-blur-md fixed w-full z-50">
+        <div class="container mx-auto px-6 py-4">
+            <div class="flex justify-between items-center">
+                <div class="flex items-center space-x-2">
+                    <i data-feather="cpu" class="text-blue-400"></i>
+                    <span class="text-xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-400 to-purple-500">CodeCleano API</span>
+                </div>
+                <div class="flex space-x-6">
+                    <a href="index.html" class="hover:text-blue-400 transition">Back to App</a>
+                </div>
+            </div>
+        </div>
+    </nav>
+    <main class="container mx-auto px-6 pt-24 pb-12">
+        <section class="mb-16">
+            <h1 class="text-4xl font-bold mb-6">CodeCleano API Documentation</h1>
+            <p class="text-xl text-gray-400 max-w-3xl">
+                Programmatic access to our code cleaning and refactoring engine. Process individual files or entire repositories.
+            </p>
+        </section>
+        <section class="mb-16">
+            <h2 class="text-2xl font-bold mb-6 border-b border-gray-700 pb-2">Authentication</h2>
+            <div class="bg-gray-800/70 p-6 rounded-lg mb-6">
+                <p class="mb-4">All API requests require an API key sent in the <code class="bg-gray-700 px-2 py-1 rounded">X-API-Key</code> header.</p>
+                <div class="code-block p-4 bg-gray-900 rounded">
+                    <pre class="text-green-400 overflow-x-auto text-sm">curl -H "X-API-Key: your_api_key_here" https://api.codecleano.ai/v1/clean</pre>
+                </div>
+            </div>
+        </section>
+        <section class="mb-16">
+            <h2 class="text-2xl font-bold mb-6 border-b border-gray-700 pb-2">Endpoints</h2>
+            <!-- Single File Cleaning -->
+            <div class="bg-gray-800/70 p-6 rounded-lg mb-8">
+                <div class="flex items-center mb-4">
+                    <span class="endpoint-method endpoint-post mr-4">POST</span>
+                    <span class="font-mono text-lg">/v1/clean</span>
+                </div>
+                <p class="mb-4">Clean and refactor a single code file.</p>
+                <h3 class="font-bold mb-2">Request</h3>
+                <div class="code-block p-4 bg-gray-900 rounded mb-4">
+                    <pre class="text-green-400 overflow-x-auto text-sm">{
+  "code": "def messy(x,y):\n    return x+y if x>y else 0",
+  "language": "python",
+  "options": {
+    "rename_vars": true,
+    "extract_methods": true,
+    "optimize": true
+  }
+}</pre>
+                </div>
+                <h3 class="font-bold mb-2">Response</h3>
+                <div class="code-block p-4 bg-gray-900 rounded">
+                    <pre class="text-green-400 overflow-x-auto text-sm">{
+  "cleaned_code": "def calculate_sum(x, y):\n    return x + y if x > y else 0",
+  "changes_made": 2,
+  "execution_time": "0.45s"
+}</pre>
+                </div>
+            </div>
+            <!-- Repository Cleaning -->
+            <div class="bg-gray-800/70 p-6 rounded-lg">
+                <div class="flex items-center mb-4">
+                    <span class="endpoint-method endpoint-post mr-4">POST</span>
+                    <span class="font-mono text-lg">/v1/clean-repo</span>
+                </div>
+                <p class="mb-4">Process an entire repository from GitHub, GitLab, or Bitbucket.</p>
+                <h3 class="font-bold mb-2">Request</h3>
+                <div class="code-block p-4 bg-gray-900 rounded mb-4">
+                    <pre class="text-green-400 overflow-x-auto text-sm">{
+  "repo_url": "https://github.com/user/repo",
+  "language": "javascript",
+  "branch": "main",
+  "options": {
+    "max_file_size": 10000,
+    "ignore_tests": true
+  }
+}</pre>
+                </div>
+                <h3 class="font-bold mb-2">Response</h3>
+                <div class="code-block p-4 bg-gray-900 rounded">
+                    <pre class="text-green-400 overflow-x-auto text-sm">{
+  "repo_name": "user/repo",
+  "files_processed": 42,
+  "issues_found": 127,
+  "download_url": "https://storage.codecleano.ai/clean-repos/abc123.zip",
+  "summary": "Found 15 variables to rename\nExtracted 8 methods\nFixed 32 style violations...",
+  "execution_time": "2m 15s"
+}</pre>
+                </div>
+            </div>
+        </section>
+        <section>
+            <h2 class="text-2xl font-bold mb-6 border-b border-gray-700 pb-2">Rate Limits</h2>
+            <div class="grid md:grid-cols-3 gap-6">
+                <div class="bg-gray-800/70 p-6 rounded-lg">
+                    <h3 class="font-bold mb-2 text-blue-400">Free Tier</h3>
+                    <ul class="text-gray-300 space-y-2">
+                        <li>20 requests/hour</li>
+                        <li>Max file size: 50KB</li>
+                        <li>Basic refactoring</li>
+                    </ul>
+                </div>
+                <div class="bg-gray-800/70 p-6 rounded-lg">
+                    <h3 class="font-bold mb-2 text-purple-400">Pro Tier</h3>
+                    <ul class="text-gray-300 space-y-2">
+                        <li>100 requests/hour</li>
+                        <li>Max file size: 500KB</li>
+                        <li>Advanced optimizations</li>
+                    </ul>
+                </div>
+                <div class="bg-gray-800/70 p-6 rounded-lg">
+                    <h3 class="font-bold mb-2 text-green-400">Enterprise</h3>
+                    <ul class="text-gray-300 space-y-2">
+                        <li>Unlimited requests</li>
+                        <li>No size limits</li>
+                        <li>Custom models</li>
+                    </ul>
+                </div>
+            </div>
+        </section>
+    </main>
+    <footer class="bg-gray-900/80 py-8 border-t border-gray-800">
+        <div class="container mx-auto px-6 text-center">
+            <p class="text-gray-500">© 2023 CodeCleano API. All rights reserved.</p>
+        </div>
+    </footer>
+    <script>
+        feather.replace();
+    </script>
+</body>
+</html>

index.html CHANGED Viewed

@@ -38,8 +38,8 @@
                     <a href="#" class="hover:text-blue-400 transition">Home</a>
                     <a href="#" class="hover:text-blue-400 transition">Features</a>
                     <a href="#" class="hover:text-blue-400 transition">Tutorial</a>
-                    <a href="#" class="hover:text-blue-400 transition">API</a>
-                    <a href="#" class="hover:text-blue-400 transition" onclick="document.getElementById('demo-modal').classList.remove('hidden')">Live Demo</a>
                 </div>
                     <button onclick="document.getElementById('demo-modal').classList.remove('hidden')" class="bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded-lg font-medium transition">
                         Live Demo
@@ -272,13 +272,36 @@ model.save_pretrained("code_cleaner_model")</code></pre>
                         </div>
                     </div>
                 </div>
-                <div class="flex justify-center">
-                    <button id="process-btn" class="bg-blue-600 hover:bg-blue-700 px-8 py-3 rounded-lg font-bold text-lg transition">
-                        Clean My Code
                     </button>
                 </div>
-            </div>
         </div>
     </div>
@@ -325,14 +348,27 @@ model.save_pretrained("code_cleaner_model")</code></pre>
             backgroundColor: 0x111827,
             size: 0.8
         });
         // Code Processing Functionality
         const codeEditor = document.getElementById('code-editor');
         const processBtn = document.getElementById('process-btn');
         const resultContainer = document.getElementById('result-container');
         processBtn.addEventListener('click', async () => {
-            const code = codeEditor.value;
             if (!code.trim()) return;
             processBtn.disabled = true;
@@ -342,20 +378,30 @@ model.save_pretrained("code_cleaner_model")</code></pre>
             try {
                 // Using a mock API for demonstration
                 // In production, replace with your actual API endpoint
-                const response = await fetch('https://api.mocki.io/v2/c4d7a195/gpt-3', {
                     method: 'POST',
                     headers: {
                         'Content-Type': 'application/json',
                     },
                     body: JSON.stringify({
-                        prompt: `Refactor this code following best practices:\n\n${code}\n\nRefactored code:`,
-                        max_tokens: 1000
                     })
                 });
                 const data = await response.json();
-                resultContainer.innerHTML = `<pre class="text-green-400 p-4 bg-gray-800 rounded-lg"><code>${data.choices[0].text.trim()}</code></pre>`;
-            } catch (error) {
                 resultContainer.innerHTML = `<div class="text-red-400 p-4 bg-gray-800 rounded-lg">Error: ${error.message}</div>`;
             } finally {
                 processBtn.disabled = false;
@@ -363,6 +409,56 @@ model.save_pretrained("code_cleaner_model")</code></pre>
                 feather.replace();
             }
         });
         feather.replace();
     </script>

                     <a href="#" class="hover:text-blue-400 transition">Home</a>
                     <a href="#" class="hover:text-blue-400 transition">Features</a>
                     <a href="#" class="hover:text-blue-400 transition">Tutorial</a>
+                    <a href="api.html" class="hover:text-blue-400 transition">API</a>
+<a href="#" class="hover:text-blue-400 transition" onclick="document.getElementById('demo-modal').classList.remove('hidden')">Live Demo</a>
                 </div>
                     <button onclick="document.getElementById('demo-modal').classList.remove('hidden')" class="bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded-lg font-medium transition">
                         Live Demo
                         </div>
                     </div>
                 </div>
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
+                    <div class="flex flex-col">
+                        <label class="text-gray-300 mb-2">Choose Language</label>
+                        <select id="language-select" class="bg-gray-700 text-white p-2 rounded">
+                            <option value="python">Python</option>
+                            <option value="javascript">JavaScript</option>
+                            <option value="java">Java</option>
+                            <option value="csharp">C#</option>
+                            <option value="php">PHP</option>
+                        </select>
+                    </div>
+                    <div class="flex items-end">
+                        <button id="process-btn" class="bg-blue-600 hover:bg-blue-700 px-8 py-3 rounded-lg font-bold text-lg transition w-full">
+                            Clean This Code
+                        </button>
+                    </div>
+                </div>
+                <div class="text-center">
+                    <p class="text-gray-400 mb-2">OR</p>
+                    <button id="repo-btn" class="border border-blue-500 text-blue-400 hover:bg-blue-500/10 px-6 py-2 rounded-lg transition">
+                        <i data-feather="github" class="inline mr-2"></i> Clean Entire Repository
                     </button>
+                    <div id="repo-input" class="hidden mt-4">
+                        <input type="text" id="repo-url" class="bg-gray-700 text-white p-2 rounded w-full mb-2" placeholder="https://github.com/user/repo">
+                        <button id="process-repo" class="bg-blue-600 hover:bg-blue-700 px-6 py-2 rounded-lg transition w-full">
+                            Process Repository
+                        </button>
+                    </div>
                 </div>
+</div>
         </div>
     </div>
             backgroundColor: 0x111827,
             size: 0.8
         });
         // Code Processing Functionality
         const codeEditor = document.getElementById('code-editor');
         const processBtn = document.getElementById('process-btn');
+        const repoBtn = document.getElementById('repo-btn');
+        const processRepoBtn = document.getElementById('process-repo');
+        const repoInput = document.getElementById('repo-input');
         const resultContainer = document.getElementById('result-container');
+        const repoUrl = document.getElementById('repo-url');
+        const languageSelect = document.getElementById('language-select');
+        // Toggle repository input
+        repoBtn.addEventListener('click', () => {
+            repoInput.classList.toggle('hidden');
+            if (!repoInput.classList.contains('hidden')) {
+                codeEditor.value = '';
+            }
+        });
+        // Process single code snippet
         processBtn.addEventListener('click', async () => {
+const code = codeEditor.value;
             if (!code.trim()) return;
             processBtn.disabled = true;
             try {
                 // Using a mock API for demonstration
                 // In production, replace with your actual API endpoint
+                const language = languageSelect.value;
+                const response = await fetch('/api/clean', {
                     method: 'POST',
                     headers: {
                         'Content-Type': 'application/json',
                     },
                     body: JSON.stringify({
+                        code: code,
+                        language: language
                     })
                 });
                 const data = await response.json();
+                resultContainer.innerHTML = `
+                    <div class="mb-4 flex justify-between items-center">
+                        <h4 class="font-bold text-blue-400">Cleaned Code</h4>
+                        <button onclick="copyResult()" class="text-xs bg-gray-700 px-2 py-1 rounded">
+                            <i data-feather="copy" class="w-3 h-3"></i> Copy
+                        </button>
+                    </div>
+                    <pre class="text-green-400 p-4 bg-gray-800 rounded-lg overflow-auto"><code>${data.cleaned_code}</code></pre>
+                `;
+                feather.replace();
+} catch (error) {
                 resultContainer.innerHTML = `<div class="text-red-400 p-4 bg-gray-800 rounded-lg">Error: ${error.message}</div>`;
             } finally {
                 processBtn.disabled = false;
                 feather.replace();
             }
         });
+        // Process entire repository
+        processRepoBtn.addEventListener('click', async () => {
+            const url = repoUrl.value.trim();
+            if (!url) return;
+            processRepoBtn.disabled = true;
+            processRepoBtn.innerHTML = '<i data-feather="loader" class="animate-spin"></i> Processing Repository...';
+            feather.replace();
+            try {
+                const response = await fetch('/api/clean-repo', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
+                    body: JSON.stringify({
+                        repo_url: url,
+                        language: languageSelect.value
+                    })
+                });
+                const data = await response.json();
+                resultContainer.innerHTML = `
+                    <div class="mb-4">
+                        <h4 class="font-bold text-blue-400">Repository Analysis</h4>
+                        <p class="text-sm text-gray-400">${data.files_processed} files processed</p>
+                    </div>
+                    <div class="flex justify-between mb-2">
+                        <span class="text-sm">Found ${data.issues_found} issues</span>
+                        <a href="${data.download_url}" class="text-blue-400 hover:underline text-sm">
+                            <i data-feather="download" class="inline mr-1 w-3 h-3"></i> Download Cleaned Code
+                        </a>
+                    </div>
+                    <div class="bg-gray-800 rounded-lg p-4 max-h-64 overflow-auto">
+                        ${data.summary.replace(/\n/g, '<br>')}
+                    </div>
+                `;
+            } catch (error) {
+                resultContainer.innerHTML = `<div class="text-red-400 p-4 bg-gray-800 rounded-lg">Error: ${error.message}</div>`;
+            } finally {
+                processRepoBtn.disabled = false;
+                processRepoBtn.innerHTML = 'Process Repository';
+                feather.replace();
+            }
+        });
+        function copyResult() {
+            const code = resultContainer.querySelector('code').textContent;
+            navigator.clipboard.writeText(code);
+        }
         feather.replace();
     </script>