'''
gr.HTML(header_html)
with gr.Row(elem_classes="main-wrapper"):
# Sidebar
with gr.Column(scale=1, elem_classes="sidebar-container"):
current_step = gr.State(1)
# Steps
steps_html = '''
Workflow Steps
1
Input Code
Upload or paste your Python code
2
Generate Files
Download app.py, requirements.txt & README
3
Deploy
Deploy to Hugging Face Spaces
Quick Tips
•Ensure your code has clear functions for best conversion
•API keys are used securely and never stored
•Test locally before deploying to production
'''
gr.HTML(steps_html)
# Main Content
with gr.Column(scale=3, elem_classes="content-container"):
# Step 1: Code Input
with gr.Group(visible=True) as step1_group:
gr.Markdown('
Step 1: Provide Your Code
')
with gr.Tabs():
with gr.Tab("📁 Upload File"):
file_input = gr.File(
label="Upload Python or Jupyter Notebook",
file_types=SUPPORTED_EXTENSIONS,
type="filepath",
elem_classes="form-group"
)
with gr.Tab("📝 Paste Code"):
text_input = gr.Textbox(
label="Python Code",
lines=15,
placeholder="# Paste your Python code here...\n# Example: Machine Learning model, Data processing function, etc.\n\nimport numpy as np\n\ndef process_data(input_data):\n # Your code here\n return processed_result",
elem_id="code_editor"
)
gr.Markdown('
Step 2: API Configuration
')
with gr.Row():
with gr.Column():
groq_api_key = gr.Textbox(
label="Groq API Key",
type="password",
placeholder="gsk_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
info="Required for AI-powered conversion. Get yours from console.groq.com",
elem_classes="form-group"
)
# API Guide
with gr.Accordion("🔑 Need help creating API keys?", open=False):
with gr.Tabs():
with gr.Tab("Groq API Key"):
gr.Markdown("""
### Creating a Groq API Key
1. Visit [console.groq.com](https://console.groq.com)
2. Sign up or log in to your account
3. Navigate to **API Keys** section
4. Click **Create API Key**
5. Give your key a descriptive name
6. Copy the generated key (starts with `gsk_`)
7. Paste it in the field above
*Note: Keep your API key secure and never share it publicly.*
""")
with gr.Tab("Hugging Face Token"):
gr.Markdown("""
### Creating a Hugging Face Token
1. Go to [huggingface.co](https://huggingface.co)
2. Click on your profile picture → **Settings**
3. Navigate to **Access Tokens**
4. Click **New Token**
5. Select token type: **Write**
6. Copy the generated token (starts with `hf_`)
7. Paste it in Step 2
*Write token is required for creating and updating Spaces.*
""")
convert_btn = gr.Button(
"🚀 Convert Code",
variant="primary",
size="lg",
elem_classes="mt-3"
)
# Step 2: Generated Files
with gr.Group(visible=False) as step2_group:
gr.Markdown('
Step 2: Generated Files
')
gr.Markdown("### Your Gradio Application is Ready!")
# File Cards Grid
file_cards_html = '''
app.py
Main application file with Gradio interface
requirements.txt
Python dependencies for your application
README.md
Documentation with YAML frontmatter
'''
gr.HTML(file_cards_html)
with gr.Row():
with gr.Column():
app_py_download = gr.File(
label="Download app.py",
file_types=[".py"],
interactive=False
)
with gr.Column():
requirements_download = gr.File(
label="Download requirements.txt",
file_types=[".txt"],
interactive=False
)
with gr.Column():
readme_download = gr.File(
label="Download README.md",
file_types=[".md"],
interactive=False
)
gr.Markdown('
Step 3: Deployment Options
')
with gr.Row():
with gr.Column():
hf_token = gr.Textbox(
label="Hugging Face Token",
type="password",
placeholder="hf_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
info="Write token required for deployment",
elem_classes="form-group"
)
with gr.Column():
space_name = gr.Textbox(
label="Space Name",
placeholder="my-awesome-gradio-app",
info="3-30 chars, lowercase letters, numbers, and hyphens only",
elem_classes="form-group"
)
gr.Markdown("### Select Deployment Action")
deploy_mode = gr.Radio(
choices=["📥 Download Only", "🚀 Deploy to Hugging Face Space"],
label="",
value="📥 Download Only",
elem_classes="radio-group"
)
with gr.Row():
back_btn_step2 = gr.Button("← Back", variant="secondary")
deploy_btn = gr.Button("Proceed to Deployment →", variant="primary")
# Step 3: Deployment Results
with gr.Group(visible=False) as step3_group:
gr.Markdown('
Step 3: Deployment Complete 🎉
')
success_html = '''
✅
Deployment Successful!
Your application is now live on Hugging Face Spaces