Spaces:
Running
Running
| <html><head><base href="https://websim.ai/code-consultant"><title>Code Consultant: Python Performance Optimizer</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/styles/atom-one-dark.min.css"> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/highlight.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/languages/python.min.js"></script> | |
| <style> | |
| @keyframes typing { | |
| from { width: 0 } | |
| to { width: 100% } | |
| } | |
| .typing-animation { | |
| overflow: hidden; | |
| border-right: .15em solid #10B981; | |
| white-space: nowrap; | |
| margin: 0 auto; | |
| letter-spacing: .15em; | |
| animation: | |
| typing 3.5s steps(40, end), | |
| blink-caret .75s step-end infinite; | |
| } | |
| @keyframes blink-caret { | |
| from, to { border-color: transparent } | |
| 50% { border-color: #10B981; } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gradient-to-br from-gray-900 to-green-900 text-white min-h-screen font-mono"> | |
| <header class="py-6 relative"> | |
| <div class="container mx-auto px-4"> | |
| <h1 class="text-4xl font-bold text-center text-green-400">Code Consultant</h1> | |
| <p class="mt-2 text-center text-gray-300">Python Performance Optimization Assistant</p> | |
| </div> | |
| </header> | |
| <main class="container mx-auto px-4 py-8"> | |
| <div class="bg-gray-800 rounded-lg shadow-lg p-6 mb-8"> | |
| <h2 class="text-2xl font-semibold mb-4 text-green-400">Optimize Your Python Code</h2> | |
| <form id="code-form" method="GET" action="https://websim.ai/code-consultant" class="space-y-4"> | |
| <div> | |
| <label for="code-input" class="block text-sm font-medium text-gray-300">Paste your Python code here:</label> | |
| <textarea id="code-input" name="code" rows="10" class="mt-1 block w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-green-500 text-white font-mono" placeholder="def example_function(): | |
| result = [] | |
| for i in range(1000): | |
| result.append(i * 2) | |
| return result"></textarea> | |
| </div> | |
| <div> | |
| <button type="submit" class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-gray-900 bg-green-500 hover:bg-green-400 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500"> | |
| Analyze and Optimize | |
| </button> | |
| </div> | |
| </form> | |
| </div> | |
| <div id="result-container" class="bg-gray-800 rounded-lg shadow-lg p-6 hidden"> | |
| <h2 class="text-2xl font-semibold mb-4 text-green-400">Optimization Suggestions</h2> | |
| <div id="optimization-result" class="space-y-4"> | |
| <!-- Optimization suggestions will be inserted here --> | |
| </div> | |
| </div> | |
| <div class="mt-8 bg-gray-800 rounded-lg shadow-lg p-6"> | |
| <h2 class="text-2xl font-semibold mb-4 text-green-400">Python Performance Tips</h2> | |
| <ul class="list-disc list-inside space-y-2 text-gray-300"> | |
| <li>Use list comprehensions instead of loops when possible</li> | |
| <li>Utilize built-in functions and libraries for better performance</li> | |
| <li>Avoid global variables and use local variables when possible</li> | |
| <li>Use generators for large datasets to save memory</li> | |
| <li>Profile your code to identify bottlenecks</li> | |
| </ul> | |
| </div> | |
| </main> | |
| <script> | |
| const codeForm = document.getElementById('code-form'); | |
| const resultContainer = document.getElementById('result-container'); | |
| const optimizationResult = document.getElementById('optimization-result'); | |
| codeForm.addEventListener('submit', function(e) { | |
| e.preventDefault(); | |
| const codeInput = document.getElementById('code-input').value.trim(); | |
| if (!codeInput) { | |
| alert('Please enter some Python code to analyze.'); | |
| return; | |
| } | |
| analyzeCode(codeInput); | |
| }); | |
| function analyzeCode(code) { | |
| // Show loading state | |
| resultContainer.classList.remove('hidden'); | |
| optimizationResult.innerHTML = '<p class="text-gray-300 typing-animation">Analyzing code and generating optimization suggestions...</p>'; | |
| // Simulate API call with setTimeout | |
| setTimeout(() => { | |
| const optimizationData = generateOptimizations(code); | |
| displayOptimizationResult(optimizationData); | |
| }, 2000); | |
| } | |
| function generateOptimizations(code) { | |
| // This is a simplified optimization suggestion generator. In a real application, this would use advanced static analysis tools. | |
| const optimizations = [ | |
| { | |
| issue: "Use of append in a loop", | |
| suggestion: "Consider using a list comprehension for better performance.", | |
| example: "result = [i * 2 for i in range(1000)]" | |
| }, | |
| { | |
| issue: "Potential inefficient range usage", | |
| suggestion: "If you don't need the index, consider using 'for _ in range(1000)' to slightly improve performance.", | |
| example: "for _ in range(1000):\n # Your code here" | |
| }, | |
| { | |
| issue: "Function could benefit from type hinting", | |
| suggestion: "Add type hints to improve code readability and enable better tooling support.", | |
| example: "def example_function() -> List[int]:" | |
| } | |
| ]; | |
| return { | |
| originalCode: code, | |
| optimizations: optimizations | |
| }; | |
| } | |
| function displayOptimizationResult(optimizationData) { | |
| let optimizationHTML = ` | |
| <div class="space-y-6"> | |
| <div> | |
| <h3 class="text-lg font-semibold text-green-400 mb-2">Original Code:</h3> | |
| <pre><code class="language-python">${optimizationData.originalCode}</code></pre> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-semibold text-green-400 mb-2">Optimization Suggestions:</h3> | |
| ${optimizationData.optimizations.map(opt => ` | |
| <div class="mb-4 bg-gray-700 rounded-lg p-4"> | |
| <h4 class="font-semibold text-green-300">${opt.issue}</h4> | |
| <p class="text-gray-300 mt-2">${opt.suggestion}</p> | |
| <pre class="mt-2"><code class="language-python">${opt.example}</code></pre> | |
| </div> | |
| `).join('')} | |
| </div> | |
| </div> | |
| <p class="mt-6 text-sm text-gray-400">Remember, these are general suggestions. The best optimizations depend on your specific use case and the full context of your code.</p> | |
| `; | |
| optimizationResult.innerHTML = optimizationHTML; | |
| // Apply syntax highlighting | |
| document.querySelectorAll('pre code').forEach((block) => { | |
| hljs.highlightBlock(block); | |
| }); | |
| } | |
| </script> | |
| </body></html> |