Spaces:

Agasthya0
/

colabmind-coder-qlora

Runtime error

App Files Files Community

Agasthya0 commited on Aug 15

Commit

96ecaab

verified ·

1 Parent(s): 5f268ee

Update index.html

Browse files

Files changed (1) hide show

index.html +559 -668

index.html CHANGED Viewed

@@ -1,669 +1,560 @@
-<!DOCTYPE html>
-<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>
-        // DOM Elements
-        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 = '';
-        // Generate Code
-        generateBtn.addEventListener('click', async () => {
-            const prompt = promptTextarea.value.trim();
-            if (!prompt) {
-                showToast('Please enter a prompt first!', 'error');
-                return;
-            }
-            setLoading(generateBtn, true);
-            // Simulate API delay
-            await new Promise(resolve => setTimeout(resolve, 1500));
-            try {
-                currentCode = generateSampleCode(prompt);
-                codeOutput.textContent = currentCode;
-                showToast('Code generated successfully!', 'success');
-            } catch (error) {
-                console.error('Error generating code:', error);
-                showToast('Failed to generate code', 'error');
-            } finally {
-                setLoading(generateBtn, false);
-            }
-        });
-        // Explain Code
-        explainBtn.addEventListener('click', async () => {
-            if (!currentCode) {
-                showToast('No code to explain. Generate code first!', 'error');
-                return;
-            }
-            setLoading(explainBtn, true);
-            // Simulate API delay
-            await new Promise(resolve => setTimeout(resolve, 1000));
-            try {
-                const explanation = generateSampleExplanation(currentCode);
-                explanationContent.innerHTML = explanation;
-                explanationModal.classList.add('show');
-            } catch (error) {
-                console.error('Error explaining code:', error);
-                showToast('Failed to explain code', 'error');
-            } 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;
-            }
-            try {
-                await navigator.clipboard.writeText(currentCode);
-                showToast('Code copied to clipboard!', 'success');
-            } catch (error) {
-                // Fallback for older browsers
-                const textArea = document.createElement('textarea');
-                textArea.value = currentCode;
-                document.body.appendChild(textArea);
-                textArea.select();
-                document.execCommand('copy');
-                document.body.removeChild(textArea);
-                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);
-            showToast('Code downloaded successfully!', 'success');
-        });
-        // Modal Controls
-        closeModal.addEventListener('click', () => {
-            explanationModal.classList.remove('show');
-        });
-        explanationModal.addEventListener('click', (e) => {
-            if (e.target === explanationModal) {
-                explanationModal.classList.remove('show');
-            }
-        });
-        // Utility Functions
-        function setLoading(button, isLoading) {
-            if (isLoading) {
-                button.disabled = true;
-                button.classList.add('loading');
-                const originalHTML = button.innerHTML;
-                button.setAttribute('data-original', originalHTML);
-                button.innerHTML = `<div class="spinner"></div> Loading...`;
-            } else {
-                button.disabled = false;
-                button.classList.remove('loading');
-                button.innerHTML = button.getAttribute('data-original');
-            }
-        }
-        function showToast(message, type = 'success') {
-            toastMessage.textContent = message;
-            toast.className = `toast ${type}`;
-            toast.classList.add('show');
-            setTimeout(() => {
-                toast.classList.remove('show');
-            }, 3000);
-        }
-        function generateSampleCode(prompt) {
-            const lowerPrompt = prompt.toLowerCase();
-            if (lowerPrompt.includes('fibonacci')) {
-                return `def fibonacci(n):
-    """Generate fibonacci sequence up to n terms."""
-    if n <= 0:
-        return []
-    elif n == 1:
-        return [0]
-    elif n == 2:
-        return [0, 1]
-    sequence = [0, 1]
-    for i in range(2, n):
-        sequence.append(sequence[i-1] + sequence[i-2])
-    return sequence
-# Example usage
-print(fibonacci(10))
-# Output: [0, 1, 1, 2, 3, 5, 8, 13, 21, 34]`;
-            } else if (lowerPrompt.includes('sort')) {
-                return `def bubble_sort(arr):
-    """Sort array using bubble sort algorithm."""
-    n = len(arr)
-    for i in range(n):
-        for j in range(0, n - i - 1):
-            if arr[j] > arr[j + 1]:
-                arr[j], arr[j + 1] = arr[j + 1], arr[j]
-    return arr
-# Example usage
-numbers = [64, 34, 25, 12, 22, 11, 90]
-sorted_numbers = bubble_sort(numbers.copy())
-print(f"Original: {numbers}")
-print(f"Sorted: {sorted_numbers}")`;
-            } else if (lowerPrompt.includes('calculator')) {
-                return `class Calculator:
-    """A simple calculator class."""
-    def add(self, a, b):
-        return a + b
-    def subtract(self, a, b):
-        return a - b
-    def multiply(self, a, b):
-        return a * b
-    def divide(self, a, b):
-        if b == 0:
-            raise ValueError("Cannot divide by zero")
-        return a / b
-# Example usage
-calc = Calculator()
-print(f"5 + 3 = {calc.add(5, 3)}")
-print(f"10 - 4 = {calc.subtract(10, 4)}")
-print(f"6 * 7 = {calc.multiply(6, 7)}")
-print(f"15 / 3 = {calc.divide(15, 3)}")`;
-            } else {
-                return `def hello_world():
-    """A simple hello world function."""
-    message = "Hello, World!"
-    print(message)
-    return message
-# Example usage
-result = hello_world()
-print(f"Function returned: {result}")
-# Additional functionality
-def greet_user(name):
-    """Greet a specific user."""
-    greeting = f"Hello, {name}!"
-    print(greeting)
-    return greeting
-# Example with user input
-user_greeting = greet_user("Python Developer")`;
-            }
-        }
-        function generateSampleExplanation(code) {
-            return `
-                <p><strong>Code Explanation:</strong></p>
-                <p>This code demonstrates a Python implementation with the following key components:</p>
-                <ul style="margin: 1rem 0; padding-left: 1.5rem;">
-                    <li><strong>Function Definition:</strong> The function is defined with proper parameters and includes a docstring for documentation.</li>
-                    <li><strong>Logic Implementation:</strong> The core algorithm is implemented with appropriate error handling and edge cases considered.</li>
-                    <li><strong>Example Usage:</strong> The code includes practical examples showing how to use the function with sample data.</li>
-                    <li><strong>Best Practices:</strong> The code follows Python naming conventions, includes comments, and demonstrates clean, readable structure.</li>
-                </ul>
-                <p>The implementation is efficient and follows Python best practices for readability and maintainability.</p>
-            `;
-        }
-    </script>
-</body>
 </html>

+<!DOCTYPE html>
+<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;
+        }
+        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;
+        }
+        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>
+</body>
 </html>