Spaces:

Agasthya0
/

colabmind-coder-qlora

Runtime error

App Files Files Community

colabmind-coder-qlora / index.html

Agasthya0

Upload 3 files

5f268ee verified about 1 month ago

raw

history blame

20.4 kB

	<!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>