Spaces:
Sleeping
Sleeping
File size: 2,943 Bytes
fcd463d 8d01d6d fcd463d 8d01d6d fcd463d 8d01d6d fcd463d 8d01d6d fcd463d 8d01d6d fcd463d 8d01d6d fcd463d 8d01d6d fcd463d 8d01d6d fcd463d 8d01d6d fcd463d 8d01d6d fcd463d 8d01d6d fcd463d 8d01d6d fcd463d 8d01d6d 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 |
"""
Simplified sidebar component
"""
import gradio as gr
def create_sidebar(current_step):
"""Create a clean sidebar with progress steps"""
with gr.Column(elem_classes="sidebar"):
gr.Markdown("### Workflow", elem_classes="font-semibold")
# Simple step indicators
steps = [
{"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 = "active" if step["number"] == current_step.value else ""
step_html += f'''
<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)
# Simple tips
gr.Markdown("### Tips", elem_classes="mt-4 font-semibold")
tips_html = '''
<div class="tips-container">
<div class="tip">
<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">
<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">
<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)
# Simple requirements
gr.Markdown("### Requirements", elem_classes="mt-4 font-semibold")
requirements_html = '''
<div class="requirements">
<ul>
<li>Python 3.8+</li>
<li>Groq API Key</li>
<li>Hugging Face Account</li>
</ul>
</div>
'''
gr.HTML(requirements_html) |