Spaces:
Runtime error
Runtime error
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>AI Code Assistant</title> | |
| <style> | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; | |
| background-color: #f9fafb; | |
| min-height: 100vh; | |
| padding: 2rem 1rem; | |
| line-height: 1.6; | |
| } | |
| .container { | |
| max-width: 64rem; | |
| margin: 0 auto; | |
| } | |
| .header { | |
| text-align: center; | |
| margin-bottom: 2rem; | |
| } | |
| .header h1 { | |
| font-size: 2.5rem; | |
| font-weight: bold; | |
| color: #1f2937; | |
| margin-bottom: 0.5rem; | |
| } | |
| .header p { | |
| color: #6b7280; | |
| font-size: 1.1rem; | |
| } | |
| .card { | |
| background: white; | |
| border-radius: 0.5rem; | |
| box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); | |
| padding: 1.5rem; | |
| margin-bottom: 1.5rem; | |
| } | |
| .form-group { | |
| margin-bottom: 1rem; | |
| } | |
| .form-label { | |
| display: block; | |
| font-size: 0.875rem; | |
| font-weight: 500; | |
| color: #374151; | |
| margin-bottom: 0.5rem; | |
| } | |
| .textarea { | |
| width: 100%; | |
| padding: 0.75rem; | |
| border: 1px solid #d1d5db; | |
| border-radius: 0.375rem; | |
| font-size: 1rem; | |
| resize: vertical; | |
| min-height: 100px; | |
| font-family: inherit; | |
| } | |
| .textarea:focus { | |
| outline: none; | |
| border-color: #3b82f6; | |
| box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1); | |
| } | |
| .button-group { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 0.75rem; | |
| margin-top: 1rem; | |
| } | |
| .btn { | |
| padding: 0.75rem 1rem; | |
| border: none; | |
| border-radius: 0.375rem; | |
| font-weight: 500; | |
| cursor: pointer; | |
| transition: all 0.2s ease; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 0.5rem; | |
| font-size: 0.875rem; | |
| } | |
| .btn:hover { | |
| transform: translateY(-1px); | |
| box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); | |
| } | |
| .btn:disabled { | |
| opacity: 0.6; | |
| cursor: not-allowed; | |
| transform: none; | |
| } | |
| .btn-primary { | |
| background-color: #3b82f6; | |
| color: white; | |
| flex: 1; | |
| } | |
| .btn-primary:hover:not(:disabled) { | |
| background-color: #2563eb; | |
| } | |
| .btn-secondary { | |
| background-color: #f97316; | |
| color: white; | |
| } | |
| .btn-secondary:hover:not(:disabled) { | |
| background-color: #ea580c; | |
| } | |
| .btn-gray { | |
| background-color: #6b7280; | |
| color: white; | |
| } | |
| .btn-gray:hover:not(:disabled) { | |
| background-color: #4b5563; | |
| } | |
| .btn-light { | |
| background-color: #f3f4f6; | |
| color: #374151; | |
| padding: 0.5rem 0.75rem; | |
| font-size: 0.8rem; | |
| } | |
| .btn-light:hover:not(:disabled) { | |
| background-color: #e5e7eb; | |
| } | |
| .output-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-bottom: 1rem; | |
| } | |
| .output-title { | |
| font-size: 1.125rem; | |
| font-weight: 600; | |
| color: #1f2937; | |
| } | |
| .button-controls { | |
| display: flex; | |
| gap: 0.5rem; | |
| } | |
| .code-container { | |
| background-color: #1f2937; | |
| border-radius: 0.5rem; | |
| padding: 1rem; | |
| overflow-x: auto; | |
| } | |
| .code-output { | |
| color: #e5e7eb; | |
| font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace; | |
| font-size: 0.875rem; | |
| line-height: 1.5; | |
| white-space: pre-wrap; | |
| word-wrap: break-word; | |
| } | |
| .modal { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background-color: rgba(0, 0, 0, 0.5); | |
| display: none; | |
| align-items: center; | |
| justify-content: center; | |
| padding: 1rem; | |
| z-index: 1000; | |
| } | |
| .modal.show { | |
| display: flex; | |
| } | |
| .modal-content { | |
| background: white; | |
| border-radius: 0.5rem; | |
| box-shadow: 0 20px 25px rgba(0, 0, 0, 0.1); | |
| max-width: 32rem; | |
| width: 100%; | |
| max-height: 24rem; | |
| overflow: hidden; | |
| animation: modalSlideIn 0.3s ease-out; | |
| } | |
| @keyframes modalSlideIn { | |
| from { | |
| opacity: 0; | |
| transform: translateY(-20px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| .modal-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding: 1rem; | |
| border-bottom: 1px solid #e5e7eb; | |
| } | |
| .modal-title { | |
| font-size: 1.125rem; | |
| font-weight: 600; | |
| color: #1f2937; | |
| } | |
| .modal-close { | |
| background: none; | |
| border: none; | |
| color: #9ca3af; | |
| cursor: pointer; | |
| padding: 0.25rem; | |
| border-radius: 0.25rem; | |
| } | |
| .modal-close:hover { | |
| color: #6b7280; | |
| background-color: #f3f4f6; | |
| } | |
| .modal-body { | |
| padding: 1rem; | |
| overflow-y: auto; | |
| max-height: 20rem; | |
| } | |
| .toast { | |
| position: fixed; | |
| top: 1rem; | |
| right: 1rem; | |
| padding: 0.75rem 1rem; | |
| border-radius: 0.375rem; | |
| color: white; | |
| font-weight: 500; | |
| transform: translateX(100%); | |
| transition: transform 0.3s ease; | |
| z-index: 1100; | |
| } | |
| .toast.show { | |
| transform: translateX(0); | |
| } | |
| .toast.success { | |
| background-color: #10b981; | |
| } | |
| .toast.error { | |
| background-color: #ef4444; | |
| } | |
| .toast.warning { | |
| background-color: #f59e0b; | |
| } | |
| .loading { | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0%, 100% { opacity: 1; } | |
| 50% { opacity: 0.5; } | |
| } | |
| .spinner { | |
| width: 1rem; | |
| height: 1rem; | |
| border: 2px solid transparent; | |
| border-top: 2px solid currentColor; | |
| border-radius: 50%; | |
| animation: spin 1s linear infinite; | |
| } | |
| @keyframes spin { | |
| to { transform: rotate(360deg); } | |
| } | |
| @media (max-width: 640px) { | |
| .button-group { | |
| flex-direction: column; | |
| } | |
| .btn-primary { | |
| flex: none; | |
| } | |
| .output-header { | |
| flex-direction: column; | |
| gap: 1rem; | |
| align-items: flex-start; | |
| } | |
| .button-controls { | |
| align-self: stretch; | |
| justify-content: space-between; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <!-- Header --> | |
| <div class="header"> | |
| <h1>AI Code Assistant</h1> | |
| <p>Generate, explain, and manage your code with AI assistance</p> | |
| </div> | |
| <!-- Input Section --> | |
| <div class="card"> | |
| <div class="form-group"> | |
| <label for="prompt" class="form-label"> | |
| Enter your coding question or prompt: | |
| </label> | |
| <textarea | |
| id="prompt" | |
| class="textarea" | |
| placeholder="e.g., Create a Python function to calculate fibonacci numbers..." | |
| ></textarea> | |
| </div> | |
| <!-- Action Buttons --> | |
| <div class="button-group"> | |
| <button id="generateBtn" class="btn btn-primary"> | |
| <span>⚡</span> | |
| Generate Code | |
| </button> | |
| <button id="explainBtn" class="btn btn-secondary"> | |
| <span>❓</span> | |
| Explain Code | |
| </button> | |
| <button id="clearBtn" class="btn btn-gray"> | |
| <span>🗑️</span> | |
| Clear | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Output Section --> | |
| <div class="card"> | |
| <div class="output-header"> | |
| <h2 class="output-title">Generated Code</h2> | |
| <div class="button-controls"> | |
| <button id="copyBtn" class="btn btn-light"> | |
| <span>📋</span> | |
| Copy Code | |
| </button> | |
| <button id="downloadBtn" class="btn btn-light"> | |
| <span>💾</span> | |
| Download | |
| </button> | |
| </div> | |
| </div> | |
| <div class="code-container"> | |
| <pre id="codeOutput" class="code-output">// Your generated code will appear here...</pre> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Explanation Modal --> | |
| <div id="explanationModal" class="modal"> | |
| <div class="modal-content"> | |
| <div class="modal-header"> | |
| <h3 class="modal-title">Code Explanation</h3> | |
| <button id="closeModal" class="modal-close"> | |
| <span>✕</span> | |
| </button> | |
| </div> | |
| <div class="modal-body"> | |
| <div id="explanationContent"> | |
| <!-- Explanation content will be inserted here --> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Toast Notification --> | |
| <div id="toast" class="toast"> | |
| <span id="toastMessage">Code copied to clipboard!</span> | |
| </div> | |
| <script> | |
| const promptTextarea = document.getElementById('prompt'); | |
| const generateBtn = document.getElementById('generateBtn'); | |
| const explainBtn = document.getElementById('explainBtn'); | |
| const clearBtn = document.getElementById('clearBtn'); | |
| const copyBtn = document.getElementById('copyBtn'); | |
| const downloadBtn = document.getElementById('downloadBtn'); | |
| const codeOutput = document.getElementById('codeOutput'); | |
| const explanationModal = document.getElementById('explanationModal'); | |
| const explanationContent = document.getElementById('explanationContent'); | |
| const closeModal = document.getElementById('closeModal'); | |
| const toast = document.getElementById('toast'); | |
| const toastMessage = document.getElementById('toastMessage'); | |
| let currentCode = ''; | |
| // Backend API URL (your HF Space) | |
| const API_URL = "https://Agasthya0-colabmind-coder-qlora.hf.space/run/predict"; | |
| // Generate Code | |
| generateBtn.addEventListener('click', async () => { | |
| const prompt = promptTextarea.value.trim(); | |
| if (!prompt) { | |
| showToast('Please enter a prompt first!', 'error'); | |
| return; | |
| } | |
| await fetch("/run/predict", { | |
| method: "POST", | |
| headers: {"Content-Type": "application/json"}, | |
| body: JSON.stringify({ data: [prompt, max_tokens, temperature, top_p] }) | |
| }); | |
| setLoading(generateBtn, true); | |
| codeOutput.textContent = "⏳ Generating code..."; | |
| try { | |
| const res = await fetch(API_URL, { | |
| method: "POST", | |
| headers: { "Content-Type": "application/json" }, | |
| body: JSON.stringify({ data: [prompt] }) | |
| }); | |
| const result = await res.json(); | |
| currentCode = result?.data?.[0] || "⚠️ No output from backend."; | |
| codeOutput.textContent = currentCode; | |
| showToast('Code generated successfully!', 'success'); | |
| } catch (err) { | |
| console.error(err); | |
| showToast('Backend error: Could not generate code.', 'error'); | |
| codeOutput.textContent = "// Error generating code"; | |
| } finally { | |
| setLoading(generateBtn, false); | |
| } | |
| }); | |
| // Explain Code | |
| explainBtn.addEventListener('click', async () => { | |
| if (!currentCode) { | |
| showToast('No code to explain. Generate code first!', 'error'); | |
| return; | |
| } | |
| await fetch("/run/explain", { | |
| method: "POST", | |
| headers: {"Content-Type": "application/json"}, | |
| body: JSON.stringify({ data: [code_text, max_tokens, temperature, top_p] }) | |
| }); | |
| setLoading(explainBtn, true); | |
| explanationContent.textContent = "⏳ Explaining code..."; | |
| try { | |
| const res = await fetch(API_URL, { | |
| method: "POST", | |
| headers: { "Content-Type": "application/json" }, | |
| body: JSON.stringify({ data: [`Explain this code:\n\n${currentCode}`] }) | |
| }); | |
| const result = await res.json(); | |
| explanationContent.textContent = result?.data?.[0] || "⚠️ No explanation returned."; | |
| explanationModal.classList.add('show'); | |
| } catch (err) { | |
| console.error(err); | |
| explanationContent.textContent = "❌ Error explaining code."; | |
| } finally { | |
| setLoading(explainBtn, false); | |
| } | |
| }); | |
| // Clear | |
| clearBtn.addEventListener('click', () => { | |
| promptTextarea.value = ''; | |
| currentCode = ''; | |
| codeOutput.textContent = '// Your generated code will appear here...'; | |
| showToast('Cleared successfully!', 'success'); | |
| }); | |
| // Copy Code | |
| copyBtn.addEventListener('click', async () => { | |
| if (!currentCode) { | |
| showToast('No code to copy!', 'error'); | |
| return; | |
| } | |
| await navigator.clipboard.writeText(currentCode); | |
| showToast('Code copied to clipboard!', 'success'); | |
| }); | |
| // Download Code | |
| downloadBtn.addEventListener('click', () => { | |
| if (!currentCode) { | |
| showToast('No code to download!', 'error'); | |
| return; | |
| } | |
| const blob = new Blob([currentCode], { type: 'text/plain' }); | |
| const url = URL.createObjectURL(blob); | |
| const a = document.createElement('a'); | |
| a.href = url; | |
| a.download = 'generated_code.py'; | |
| document.body.appendChild(a); | |
| a.click(); | |
| document.body.removeChild(a); | |
| URL.revokeObjectURL(url); | |
| }); | |
| // Modal | |
| closeModal.addEventListener('click', () => { | |
| explanationModal.classList.remove('show'); | |
| }); | |
| explanationModal.addEventListener('click', (e) => { | |
| if (e.target === explanationModal) { | |
| explanationModal.classList.remove('show'); | |
| } | |
| }); | |
| // Utils | |
| function setLoading(button, isLoading) { | |
| if (isLoading) { | |
| button.disabled = true; | |
| button.setAttribute('data-original', button.innerHTML); | |
| button.innerHTML = `<div class="spinner"></div> Loading...`; | |
| } else { | |
| button.disabled = false; | |
| button.innerHTML = button.getAttribute('data-original'); | |
| } | |
| } | |
| function showToast(message, type = 'success') { | |
| toastMessage.textContent = message; | |
| toast.className = `toast ${type} show`; | |
| setTimeout(() => toast.classList.remove('show'), 3000); | |
| } | |
| </script> | |
| <footer> | |
| <h2><b>Developed by Eshwar Gajula. </b></h2> | |
| </footer> | |
| </body> | |
| </html> |