|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Code Assistant AI</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<script src="https://unpkg.com/lucide@latest"></script> |
|
|
<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script> |
|
|
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script> |
|
|
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> |
|
|
<style> |
|
|
.code-editor { |
|
|
min-height: 300px; |
|
|
font-family: 'Courier New', monospace; |
|
|
tab-size: 4; |
|
|
} |
|
|
.dark .code-editor { |
|
|
background-color: #1e293b; |
|
|
color: #f8fafc; |
|
|
} |
|
|
.dark .output-panel { |
|
|
background-color: #1e293b; |
|
|
color: #f8fafc; |
|
|
} |
|
|
.dark .sidebar { |
|
|
background-color: #0f172a; |
|
|
} |
|
|
.dark .tab-active { |
|
|
border-bottom-color: #3b82f6; |
|
|
color: #3b82f6; |
|
|
} |
|
|
.dark .tab-inactive { |
|
|
border-bottom-color: transparent; |
|
|
color: #94a3b8; |
|
|
} |
|
|
.dark .file-upload-label { |
|
|
background-color: #1e293b; |
|
|
border-color: #334155; |
|
|
} |
|
|
.dark .file-upload-label:hover { |
|
|
background-color: #334155; |
|
|
} |
|
|
.transition-all { |
|
|
transition-property: all; |
|
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); |
|
|
transition-duration: 150ms; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-100 dark:bg-gray-900 transition-all duration-300"> |
|
|
<div id="root"></div> |
|
|
|
|
|
<script type="text/babel"> |
|
|
const { useState, useEffect, useRef } = React; |
|
|
|
|
|
const CodeAssistant = () => { |
|
|
|
|
|
const [darkMode, setDarkMode] = useState(false); |
|
|
const [inputCode, setInputCode] = useState(''); |
|
|
const [outputCode, setOutputCode] = useState(''); |
|
|
const [analysis, setAnalysis] = useState(''); |
|
|
const [htmlPreview, setHtmlPreview] = useState(''); |
|
|
const [activeTab, setActiveTab] = useState('output'); |
|
|
const [sourceLanguage, setSourceLanguage] = useState('auto'); |
|
|
const [targetLanguage, setTargetLanguage] = useState('javascript'); |
|
|
const [processingMode, setProcessingMode] = useState('improve'); |
|
|
const [isLoading, setIsLoading] = useState(false); |
|
|
const [error, setError] = useState(null); |
|
|
const [success, setSuccess] = useState(null); |
|
|
const [detectedLanguage, setDetectedLanguage] = useState(null); |
|
|
const [fileName, setFileName] = useState(''); |
|
|
|
|
|
|
|
|
const fileInputRef = useRef(null); |
|
|
const textareaRef = useRef(null); |
|
|
|
|
|
|
|
|
const languages = [ |
|
|
{ value: 'auto', label: 'Auto-detect' }, |
|
|
{ value: 'python', label: 'Python' }, |
|
|
{ value: 'javascript', label: 'JavaScript' }, |
|
|
{ value: 'java', label: 'Java' }, |
|
|
{ value: 'c++', label: 'C++' }, |
|
|
{ value: 'html', label: 'HTML' }, |
|
|
{ value: 'css', label: 'CSS' }, |
|
|
{ value: 'jsx', label: 'React JSX' } |
|
|
]; |
|
|
|
|
|
|
|
|
const modes = [ |
|
|
{ value: 'improve', label: 'Improve Code' }, |
|
|
{ value: 'convert', label: 'Convert Code' }, |
|
|
{ value: 'analyze', label: 'Analyze Code' } |
|
|
]; |
|
|
|
|
|
|
|
|
const toggleDarkMode = () => { |
|
|
setDarkMode(!darkMode); |
|
|
document.documentElement.classList.toggle('dark'); |
|
|
}; |
|
|
|
|
|
|
|
|
const detectLanguage = (code) => { |
|
|
if (!code.trim()) return null; |
|
|
|
|
|
|
|
|
if (code.includes('<html') || code.includes('<!DOCTYPE html')) return 'html'; |
|
|
if (code.includes('</style>') || code.includes('{') && code.includes('}') && code.includes(':')) return 'css'; |
|
|
if (code.includes('import React') || code.includes('</>')) return 'jsx'; |
|
|
if (code.includes('def ') || code.includes('lambda ') || code.includes('import ')) return 'python'; |
|
|
if (code.includes('function ') || code.includes('=>') || code.includes('const ') || code.includes('let ')) return 'javascript'; |
|
|
if (code.includes('public class') || code.includes('System.out.println')) return 'java'; |
|
|
if (code.includes('#include') || code.includes('std::')) return 'c++'; |
|
|
|
|
|
return null; |
|
|
}; |
|
|
|
|
|
|
|
|
const handleFileUpload = (e) => { |
|
|
const file = e.target.files[0]; |
|
|
if (!file) return; |
|
|
|
|
|
setFileName(file.name); |
|
|
const reader = new FileReader(); |
|
|
reader.onload = (event) => { |
|
|
setInputCode(event.target.result); |
|
|
const detected = detectLanguage(event.target.result); |
|
|
if (detected) setSourceLanguage(detected); |
|
|
}; |
|
|
reader.readAsText(file); |
|
|
}; |
|
|
|
|
|
|
|
|
const loadExample = (lang) => { |
|
|
const examples = { |
|
|
python: 'def greet(name):\n print(f"Hello, {name}!")\n\ngreet("World")', |
|
|
javascript: 'function greet(name) {\n console.log(`Hello, ${name}!`);\n}\n\ngreet("World");', |
|
|
java: 'public class Main {\n public static void greet(String name) {\n System.out.println("Hello, " + name + "!");\n }\n\n public static void main(String[] args) {\n greet("World");\n }\n}', |
|
|
'c++': '#include <iostream>\n\nvoid greet(std::string name) {\n std::cout << "Hello, " << name << "!" << std::endl;\n}\n\nint main() {\n greet("World");\n return 0;\n}', |
|
|
html: '<!DOCTYPE html>\n<html>\n<head>\n <title>Greeting</title>\n</head>\n<body>\n <h1>Hello, World!</h1>\n</body>\n</html>', |
|
|
css: 'body {\n font-family: Arial, sans-serif;\n background-color: #f0f0f0;\n}\n\nh1 {\n color: #333;\n text-align: center;\n}', |
|
|
jsx: 'import React from "react";\n\nfunction Greeting({ name }) {\n return (\n <div>\n <h1>Hello, {name}!</h1>\n </div>\n );\n}\n\nexport default Greeting;' |
|
|
}; |
|
|
|
|
|
setInputCode(examples[lang] || ''); |
|
|
setSourceLanguage(lang); |
|
|
}; |
|
|
|
|
|
|
|
|
const processCode = async () => { |
|
|
if (!inputCode.trim()) { |
|
|
setError('Please enter some code to process'); |
|
|
return; |
|
|
} |
|
|
|
|
|
setIsLoading(true); |
|
|
setError(null); |
|
|
setSuccess(null); |
|
|
|
|
|
try { |
|
|
|
|
|
|
|
|
|
|
|
const detectedLang = sourceLanguage === 'auto' ? detectLanguage(inputCode) || 'unknown' : sourceLanguage; |
|
|
setDetectedLanguage(detectedLang); |
|
|
|
|
|
|
|
|
await new Promise(resolve => setTimeout(resolve, 1500)); |
|
|
|
|
|
|
|
|
if (processingMode === 'improve') { |
|
|
setOutputCode(`// Improved ${detectedLang} code\n${inputCode}\n// Code has been optimized for better readability and performance`); |
|
|
setAnalysis(`Analysis of ${detectedLang} code:\n\n- Code structure is good\n- Could benefit from more comments\n- Consider using more modern language features`); |
|
|
} else if (processingMode === 'convert') { |
|
|
const targetLangName = languages.find(l => l.value === targetLanguage)?.label || targetLanguage; |
|
|
setOutputCode(`// Converted from ${detectedLang} to ${targetLangName}\n// This is a mock conversion\n${inputCode}`); |
|
|
setAnalysis(`Conversion analysis:\n\n- Some language-specific features may not translate directly\n- Manual review recommended for edge cases`); |
|
|
} else if (processingMode === 'analyze') { |
|
|
setOutputCode(inputCode); |
|
|
setAnalysis(`Detailed analysis of ${detectedLang} code:\n\n1. Syntax: No errors detected\n2. Performance: Good overall\n3. Security: No obvious vulnerabilities\n4. Best Practices: Follows most conventions\n\nRecommendations:\n- Add error handling\n- Consider edge cases`); |
|
|
} |
|
|
|
|
|
if (detectedLang === 'html') { |
|
|
setHtmlPreview(inputCode); |
|
|
} else { |
|
|
setHtmlPreview(''); |
|
|
} |
|
|
|
|
|
setActiveTab('output'); |
|
|
setSuccess('Code processed successfully!'); |
|
|
} catch (err) { |
|
|
setError('Failed to process code. Please try again.'); |
|
|
console.error(err); |
|
|
} finally { |
|
|
setIsLoading(false); |
|
|
} |
|
|
}; |
|
|
|
|
|
|
|
|
const copyToClipboard = (text) => { |
|
|
if (!text) return; |
|
|
|
|
|
navigator.clipboard.writeText(text) |
|
|
.then(() => setSuccess('Copied to clipboard!')) |
|
|
.catch(() => setError('Failed to copy to clipboard')); |
|
|
}; |
|
|
|
|
|
|
|
|
const downloadCode = (content, name) => { |
|
|
if (!content) return; |
|
|
|
|
|
const blob = new Blob([content], { type: 'text/plain' }); |
|
|
const url = URL.createObjectURL(blob); |
|
|
const a = document.createElement('a'); |
|
|
a.href = url; |
|
|
a.download = name || 'code.txt'; |
|
|
document.body.appendChild(a); |
|
|
a.click(); |
|
|
document.body.removeChild(a); |
|
|
URL.revokeObjectURL(url); |
|
|
|
|
|
setSuccess('Download started!'); |
|
|
}; |
|
|
|
|
|
|
|
|
const clearAll = () => { |
|
|
setInputCode(''); |
|
|
setOutputCode(''); |
|
|
setAnalysis(''); |
|
|
setHtmlPreview(''); |
|
|
setFileName(''); |
|
|
setError(null); |
|
|
setSuccess(null); |
|
|
setDetectedLanguage(null); |
|
|
if (fileInputRef.current) fileInputRef.current.value = ''; |
|
|
}; |
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
if (textareaRef.current) { |
|
|
textareaRef.current.style.height = 'auto'; |
|
|
textareaRef.current.style.height = `${textareaRef.current.scrollHeight}px`; |
|
|
} |
|
|
}, [inputCode]); |
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches; |
|
|
setDarkMode(prefersDark); |
|
|
if (prefersDark) { |
|
|
document.documentElement.classList.add('dark'); |
|
|
} |
|
|
}, []); |
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
lucide.createIcons(); |
|
|
}, []); |
|
|
|
|
|
return ( |
|
|
<div className={`min-h-screen flex flex-col ${darkMode ? 'dark' : ''}`}> |
|
|
{/* Header */} |
|
|
<header className="bg-blue-600 text-white p-4 shadow-md"> |
|
|
<div className="container mx-auto flex justify-between items-center"> |
|
|
<h1 className="text-2xl font-bold flex items-center"> |
|
|
<i data-lucide="code" className="mr-2"></i> |
|
|
Code Assistant AI |
|
|
</h1> |
|
|
<div className="flex items-center space-x-4"> |
|
|
<button |
|
|
onClick={toggleDarkMode} |
|
|
className="p-2 rounded-full hover:bg-blue-700 transition-colors" |
|
|
aria-label="Toggle dark mode" |
|
|
> |
|
|
{darkMode ? ( |
|
|
<i data-lucide="sun"></i> |
|
|
) : ( |
|
|
<i data-lucide="moon"></i> |
|
|
)} |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
{/* Main content */} |
|
|
<main className="flex-grow container mx-auto p-4 flex flex-col lg:flex-row gap-6"> |
|
|
{/* Input panel */} |
|
|
<div className="w-full lg:w-1/2 flex flex-col gap-4"> |
|
|
<div className="bg-white dark:bg-gray-800 rounded-lg shadow-md p-4"> |
|
|
<div className="flex justify-between items-center mb-4"> |
|
|
<h2 className="text-xl font-semibold">Input Code</h2> |
|
|
<div className="flex gap-2"> |
|
|
<select |
|
|
value={sourceLanguage} |
|
|
onChange={(e) => setSourceLanguage(e.target.value)} |
|
|
className="bg-gray-100 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded px-2 py-1 text-sm" |
|
|
> |
|
|
{languages.map((lang) => ( |
|
|
<option key={lang.value} value={lang.value}> |
|
|
{lang.label} |
|
|
</option> |
|
|
))} |
|
|
</select> |
|
|
<button |
|
|
onClick={() => loadExample(sourceLanguage === 'auto' ? 'javascript' : sourceLanguage)} |
|
|
className="bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 px-3 py-1 rounded text-sm flex items-center gap-1" |
|
|
> |
|
|
<i data-lucide="file-text" className="w-4 h-4"></i> |
|
|
Example |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<textarea |
|
|
ref={textareaRef} |
|
|
value={inputCode} |
|
|
onChange={(e) => setInputCode(e.target.value)} |
|
|
className="w-full code-editor p-3 border border-gray-300 dark:border-gray-600 rounded bg-white dark:bg-gray-900 text-gray-800 dark:text-gray-200 resize-none" |
|
|
placeholder="Paste your code here or upload a file..." |
|
|
spellCheck="false" |
|
|
></textarea> |
|
|
|
|
|
<div className="mt-3 flex flex-wrap gap-2 justify-between"> |
|
|
<div> |
|
|
<label className="file-upload-label inline-block bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 px-3 py-1 rounded cursor-pointer text-sm"> |
|
|
<i data-lucide="upload" className="inline mr-1 w-4 h-4"></i> |
|
|
Upload File |
|
|
<input |
|
|
type="file" |
|
|
ref={fileInputRef} |
|
|
onChange={handleFileUpload} |
|
|
className="hidden" |
|
|
accept=".txt,.js,.py,.java,.cpp,.html,.css,.jsx" |
|
|
/> |
|
|
</label> |
|
|
{fileName && ( |
|
|
<span className="ml-2 text-sm text-gray-600 dark:text-gray-400"> |
|
|
{fileName} |
|
|
</span> |
|
|
)} |
|
|
</div> |
|
|
|
|
|
<button |
|
|
onClick={clearAll} |
|
|
className="bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 px-3 py-1 rounded text-sm flex items-center gap-1" |
|
|
> |
|
|
<i data-lucide="trash-2" className="w-4 h-4"></i> |
|
|
Clear |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div className="bg-white dark:bg-gray-800 rounded-lg shadow-md p-4"> |
|
|
<h2 className="text-xl font-semibold mb-4">Processing Options</h2> |
|
|
|
|
|
<div className="grid grid-cols-3 gap-2 mb-4"> |
|
|
{modes.map((mode) => ( |
|
|
<button |
|
|
key={mode.value} |
|
|
onClick={() => setProcessingMode(mode.value)} |
|
|
className={`py-2 px-3 rounded text-sm font-medium ${processingMode === mode.value ? 'bg-blue-600 text-white' : 'bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600'}`} |
|
|
> |
|
|
{mode.label} |
|
|
</button> |
|
|
))} |
|
|
</div> |
|
|
|
|
|
{processingMode === 'convert' && ( |
|
|
<div className="mb-4"> |
|
|
<label className="block text-sm font-medium mb-1">Convert to:</label> |
|
|
<select |
|
|
value={targetLanguage} |
|
|
onChange={(e) => setTargetLanguage(e.target.value)} |
|
|
className="w-full bg-gray-100 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded px-3 py-2" |
|
|
> |
|
|
{languages.filter(l => l.value !== 'auto').map((lang) => ( |
|
|
<option key={lang.value} value={lang.value}> |
|
|
{lang.label} |
|
|
</option> |
|
|
))} |
|
|
</select> |
|
|
</div> |
|
|
)} |
|
|
|
|
|
<button |
|
|
onClick={processCode} |
|
|
disabled={isLoading || !inputCode.trim()} |
|
|
className={`w-full py-2 px-4 rounded font-medium flex items-center justify-center gap-2 ${isLoading || !inputCode.trim() ? 'bg-blue-400 dark:bg-blue-500 cursor-not-allowed' : 'bg-blue-600 hover:bg-blue-700 dark:hover:bg-blue-800 text-white'}`} |
|
|
> |
|
|
{isLoading ? ( |
|
|
<> |
|
|
<i data-lucide="loader" className="animate-spin w-5 h-5"></i> |
|
|
Processing... |
|
|
</> |
|
|
) : ( |
|
|
<> |
|
|
<i data-lucide="zap" className="w-5 h-5"></i> |
|
|
Process Code |
|
|
</> |
|
|
)} |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
{} |
|
|
<div className="w-full lg:w-1/2 flex flex-col gap-4"> |
|
|
<div className="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden"> |
|
|
<div className="flex border-b border-gray-200 dark:border-gray-700"> |
|
|
<button |
|
|
onClick={() => setActiveTab('output')} |
|
|
className={`px-4 py-3 font-medium ${activeTab === 'output' ? 'tab-active border-b-2' : 'tab-inactive'}`} |
|
|
> |
|
|
Output |
|
|
</button> |
|
|
<button |
|
|
onClick={() => setActiveTab('analysis')} |
|
|
className={`px-4 py-3 font-medium ${activeTab === 'analysis' ? 'tab-active border-b-2' : 'tab-inactive'}`} |
|
|
> |
|
|
Analysis |
|
|
</button> |
|
|
{htmlPreview && ( |
|
|
<button |
|
|
onClick={() => setActiveTab('preview')} |
|
|
className={`px-4 py-3 font-medium ${activeTab === 'preview' ? 'tab-active border-b-2' : 'tab-inactive'}`} |
|
|
> |
|
|
HTML Preview |
|
|
</button> |
|
|
)} |
|
|
</div> |
|
|
|
|
|
<div className="p-4"> |
|
|
{activeTab === 'output' && ( |
|
|
<div className="relative"> |
|
|
{outputCode ? ( |
|
|
<> |
|
|
<pre className="code-editor p-3 bg-gray-50 dark:bg-gray-900 rounded overflow-x-auto">{outputCode}</pre> |
|
|
<div className="absolute top-2 right-2 flex gap-2"> |
|
|
<button |
|
|
onClick={() => copyToClipboard(outputCode)} |
|
|
className="bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 p-1 rounded" |
|
|
title="Copy to clipboard" |
|
|
> |
|
|
<i data-lucide="copy" className="w-4 h-4"></i> |
|
|
</button> |
|
|
<button |
|
|
onClick={() => downloadCode(outputCode, 'output.txt')} |
|
|
className="bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 p-1 rounded" |
|
|
title="Download" |
|
|
> |
|
|
<i data-lucide="download" className="w-4 h-4"></i> |
|
|
</button> |
|
|
</div> |
|
|
</> |
|
|
) : ( |
|
|
<div className="text-center py-8 text-gray-500 dark:text-gray-400"> |
|
|
<i data-lucide="code" className="w-8 h-8 mx-auto mb-2"></i> |
|
|
<p>Process code to see the output</p> |
|
|
</div> |
|
|
)} |
|
|
</div> |
|
|
)} |
|
|
|
|
|
{activeTab === 'analysis' && ( |
|
|
<div className="relative"> |
|
|
{analysis ? ( |
|
|
<> |
|
|
<div className="code-editor p-3 bg-gray-50 dark:bg-gray-900 rounded whitespace-pre-wrap">{analysis}</div> |
|
|
<div className="absolute top-2 right-2"> |
|
|
<button |
|
|
onClick={() => copyToClipboard(analysis)} |
|
|
className="bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 p-1 rounded" |
|
|
title="Copy to clipboard" |
|
|
> |
|
|
<i data-lucide="copy" className="w-4 h-4"></i> |
|
|
</button> |
|
|
</div> |
|
|
</> |
|
|
) : ( |
|
|
<div className="text-center py-8 text-gray-500 dark:text-gray-400"> |
|
|
<i data-lucide="search" className="w-8 h-8 mx-auto mb-2"></i> |
|
|
<p>Process code to see the analysis</p> |
|
|
</div> |
|
|
)} |
|
|
</div> |
|
|
)} |
|
|
|
|
|
{activeTab === 'preview' && ( |
|
|
<div className="relative h-full"> |
|
|
<iframe |
|
|
srcDoc={htmlPreview} |
|
|
className="w-full h-96 border border-gray-300 dark:border-gray-600 rounded bg-white" |
|
|
title="HTML Preview" |
|
|
></iframe> |
|
|
</div> |
|
|
)} |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
{} |
|
|
{(error || success) && ( |
|
|
<div className={`p-3 rounded ${error ? 'bg-red-100 dark:bg-red-900 text-red-800 dark:text-red-200' : 'bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200'}`}> |
|
|
<div className="flex items-center gap-2"> |
|
|
<i data-lucide={error ? 'alert-circle' : 'check-circle'} className="w-5 h-5"></i> |
|
|
<span>{error || success}</span> |
|
|
</div> |
|
|
</div> |
|
|
)} |
|
|
|
|
|
{} |
|
|
{detectedLanguage && ( |
|
|
<div className="bg-white dark:bg-gray-800 rounded-lg shadow-md p-4"> |
|
|
<h3 className="font-medium mb-2">Language Information</h3> |
|
|
<div className="flex items-center gap-2"> |
|
|
<span className="px-2 py-1 bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 rounded text-sm"> |
|
|
{languages.find(l => l.value === detectedLanguage)?.label || detectedLanguage} |
|
|
</span> |
|
|
<span className="text-sm text-gray-600 dark:text-gray-400"> |
|
|
{sourceLanguage === 'auto' ? '(Auto-detected)' : '(User-selected)'} |
|
|
</span> |
|
|
</div> |
|
|
</div> |
|
|
)} |
|
|
</div> |
|
|
</main> |
|
|
|
|
|
{} |
|
|
<footer className="bg-gray-100 dark:bg-gray-800 py-4 text-center text-sm text-gray-600 dark:text-gray-400"> |
|
|
<p>Code Assistant AI © {new Date().getFullYear()}</p> |
|
|
</footer> |
|
|
</div> |
|
|
); |
|
|
}; |
|
|
|
|
|
const root = ReactDOM.createRoot(document.getElementById('root')); |
|
|
root.render(<CodeAssistant />); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
|
|
|
|
|
|
|
|
This implementation includes all the requested features: |
|
|
|
|
|
1. **Dark/Light Mode Toggle**: With smooth transitions using Tailwind CSS |
|
|
2. **Responsive Layout**: Two-column on large screens, stacked on mobile |
|
|
3. **Code Processing**: Three modes (improve, convert, analyze) |
|
|
4. **Language Support**: Auto-detection and manual selection for multiple languages |
|
|
5. **File Upload**: With filename display |
|
|
6. **Example Loading**: For each supported language |
|
|
7. **Output Tabs**: Switch between output, analysis, and HTML preview |
|
|
8. **Action Buttons**: Copy, download, clear functionality |
|
|
9. **Status Messages**: Error and success notifications |
|
|
10. **Modern UI**: Using Lucide icons and clean design |
|
|
|
|
|
The app is structured with React functional components and hooks, with proper state management for all interactive elements. The UI is fully responsive and accessible. |
