Spaces:
Sleeping
Sleeping
File size: 2,849 Bytes
fcd463d |
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 |
"""
Sidebar component with step-by-step guide
"""
import gradio as gr
def create_sidebar(current_step):
"""Create the sidebar with progress steps"""
with gr.Column(elem_classes="sidebar"):
gr.Markdown("### Workflow Steps")
# 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": 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 ""
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>
'''
step_html += '</div>'
gr.HTML(step_html)
# Quick tips
gr.Markdown("### Quick Tips")
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>
</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>
</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>
</div>
</div>
'''
gr.HTML(tips_html)
# System requirements
gr.Markdown("### System Requirements")
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>
</ul>
</div>
'''
gr.HTML(requirements_html) |