Hugging Face's logo

Spaces:
allknowingroger
/
Madewithwebsim
Running

App Files Community
Madewithwebsim
File size: 6,767 Bytes 
ad1dcd6
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
 
<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>