Update components/sidebar.py

components/sidebar.py

@@ -1,79 +1,73 @@
 """
-Sidebar component with step-by-step guide
+Simplified sidebar component
 """
 
 import gradio as gr
 
 
 def create_sidebar(current_step):
-    """Create the sidebar with progress steps"""
+    """Create a clean sidebar with progress steps"""
     
     with gr.Column(elem_classes="sidebar"):
-        gr.Markdown("### Workflow Steps")
+        gr.Markdown("### Workflow", elem_classes="font-semibold")
         
-        # Step indicators
+        # Simple step indicators
         steps = [
-            {"number": 1, "title": "Provide Code", "description": "Upload or paste your Python code"},
-            {"number": 2, "title": "Generate Files", "description": "Download individual components"},
+            {"number": 1, "title": "Input Code", "description": "Provide your Python code"},
+            {"number": 2, "title": "Generate", "description": "Create Gradio app files"},
             {"number": 3, "title": "Deploy", "description": "Deploy to Hugging Face"}
         ]
         
         step_html = '<div class="steps-container">'
         for step in steps:
-            active_class = "active" if step["number"] == current_step.value else ""
+            active = "active" if step["number"] == current_step.value else ""
             step_html += f'''
-            <div class="step {active_class}">
-                <div class="step-number">{step["number"]}</div>
-                <div class="step-content">
-                    <div class="step-title">{step["title"]}</div>
-                    <div class="step-description">{step["description"]}</div>
-                </div>
+            <div class="step {active}">
+                <span class="step-number">{step["number"]}</span>
+                <span class="step-title">{step["title"]}</span>
+                <div class="step-description">{step["description"]}</div>
             </div>
             '''
         step_html += '</div>'
         
         gr.HTML(step_html)
         
-        # Quick tips
-        gr.Markdown("### Quick Tips")
+        # Simple tips
+        gr.Markdown("### Tips", elem_classes="mt-4 font-semibold")
         
         tips_html = '''
         <div class="tips-container">
             <div class="tip">
-                <span class="material-icons tip-icon">code</span>
-                <div class="tip-content">
-                    <strong>Clean Code</strong>
-                    <p>Ensure your Python code is well-structured for better conversion results.</p>
-                </div>
+                <svg class="tip-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/>
+                </svg>
+                <p>Ensure your code is well-structured for best results.</p>
             </div>
             <div class="tip">
-                <span class="material-icons tip-icon">security</span>
-                <div class="tip-content">
-                    <strong>API Security</strong>
-                    <p>Your API keys are used only for conversion and are not stored.</p>
-                </div>
+                <svg class="tip-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <path d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/>
+                </svg>
+                <p>API keys are used securely and not stored.</p>
             </div>
             <div class="tip">
-                <span class="material-icons tip-icon">cloud_upload</span>
-                <div class="tip-content">
-                    <strong>Easy Deployment</strong>
-                    <p>Deploy with one click to Hugging Face Spaces.</p>
-                </div>
+                <svg class="tip-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <path d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M9 19l3 3m0 0l3-3m-3 3V10"/>
+                </svg>
+                <p>One-click deployment to Hugging Face Spaces.</p>
             </div>
         </div>
         '''
         
         gr.HTML(tips_html)
         
-        # System requirements
-        gr.Markdown("### System Requirements")
+        # Simple requirements
+        gr.Markdown("### Requirements", elem_classes="mt-4 font-semibold")
         requirements_html = '''
         <div class="requirements">
             <ul>
-                <li>Python 3.8 or higher</li>
-                <li>Valid Groq API Key</li>
-                <li>Hugging Face Account (for deployment)</li>
-                <li>Internet connection</li>
+                <li>Python 3.8+</li>
+                <li>Groq API Key</li>
+                <li>Hugging Face Account</li>
             </ul>
         </div>
         '''