Update app.py

app.py

@@ -146,10 +146,10 @@ class SpaceCreatorApp:
     def _create_status_message(self, msg_type, message):
         """Create formatted status message"""
         icons = {
-            "success": "check_circle",
-            "error": "error",
-            "warning": "warning",
-            "info": "info"
+            "success": "✓",
+            "error": "✗",
+            "warning": "⚠",
+            "info": "ℹ"
         }
         colors = {
             "success": "#10B981",
@@ -160,10 +160,10 @@ class SpaceCreatorApp:
         
         return f'''
         <div class="status-message {msg_type}">
-            <span class="material-icons" style="color: {colors[msg_type]}; vertical-align: middle;">
+            <span style="font-weight: bold; color: {colors[msg_type]}; margin-right: 8px;">
                 {icons[msg_type]}
             </span>
-            <span style="vertical-align: middle; margin-left: 8px;">{message}</span>
+            <span>{message}</span>
         </div>
         '''
 
@@ -172,74 +172,448 @@ def create_app():
     """Create the Gradio application interface"""
     app = SpaceCreatorApp()
     
-    # Use a simple, clean theme
+    # Use a clean, professional theme
     theme = gr.themes.Base(
         primary_hue="blue",
         secondary_hue="gray",
         neutral_hue="gray",
-        font=["Inter", "sans-serif"]
+        font=("Inter", "Segoe UI", "Roboto", "Helvetica", "Arial", "sans-serif")
     )
     
     with gr.Blocks(
         title="Hugging Face Space Creator",
         theme=theme,
-        css="static/css/style.css"
+        css="""
+        /* Simple, clean CSS */
+        .gradio-container {
+            max-width: 1200px !important;
+            margin: 20px auto !important;
+            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+        }
+        
+        body {
+            background: #f8fafc;
+        }
+        
+        /* Header */
+        .header {
+            background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
+            color: white;
+            padding: 2rem;
+            border-radius: 8px 8px 0 0;
+            margin-bottom: 20px;
+        }
+        
+        .header h1 {
+            margin: 0;
+            font-size: 1.875rem;
+            font-weight: 600;
+        }
+        
+        .header p {
+            margin: 0.5rem 0 0 0;
+            color: #cbd5e1;
+            font-size: 1rem;
+        }
+        
+        /* Layout */
+        .main-layout {
+            display: flex;
+            gap: 20px;
+            margin-top: 20px;
+        }
+        
+        .sidebar {
+            flex: 1;
+            background: white;
+            padding: 1.5rem;
+            border-radius: 8px;
+            border: 1px solid #e2e8f0;
+        }
+        
+        .content {
+            flex: 3;
+            background: white;
+            padding: 1.5rem;
+            border-radius: 8px;
+            border: 1px solid #e2e8f0;
+        }
+        
+        /* Steps */
+        .step {
+            padding: 1rem;
+            margin-bottom: 0.75rem;
+            background: #f8fafc;
+            border-radius: 6px;
+            border: 1px solid #e2e8f0;
+        }
+        
+        .step.active {
+            background: #eff6ff;
+            border-color: #3b82f6;
+            border-left: 4px solid #3b82f6;
+        }
+        
+        .step-number {
+            display: inline-block;
+            width: 24px;
+            height: 24px;
+            background: #cbd5e1;
+            color: #475569;
+            border-radius: 50%;
+            text-align: center;
+            line-height: 24px;
+            font-size: 0.875rem;
+            font-weight: 500;
+            margin-right: 0.75rem;
+        }
+        
+        .step.active .step-number {
+            background: #3b82f6;
+            color: white;
+        }
+        
+        .step-title {
+            font-weight: 600;
+            color: #1e293b;
+        }
+        
+        .step-description {
+            font-size: 0.875rem;
+            color: #64748b;
+            margin-top: 0.25rem;
+            margin-left: 2.5rem;
+        }
+        
+        /* Form Elements */
+        .form-group {
+            margin-bottom: 1.5rem;
+        }
+        
+        input, textarea, select {
+            width: 100%;
+            padding: 0.75rem 1rem;
+            border: 1px solid #cbd5e1;
+            border-radius: 6px;
+            font-size: 0.875rem;
+        }
+        
+        input:focus, textarea:focus, select:focus {
+            outline: none;
+            border-color: #3b82f6;
+            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+        }
+        
+        /* Buttons */
+        button {
+            padding: 0.75rem 1.5rem !important;
+            border-radius: 6px !important;
+            font-weight: 500 !important;
+        }
+        
+        button.primary {
+            background: #3b82f6 !important;
+            color: white !important;
+            border: none !important;
+        }
+        
+        button.primary:hover {
+            background: #2563eb !important;
+        }
+        
+        button.secondary {
+            background: white !important;
+            color: #475569 !important;
+            border: 1px solid #cbd5e1 !important;
+        }
+        
+        button.secondary:hover {
+            background: #f8fafc !important;
+        }
+        
+        /* Tabs */
+        .tab-nav button {
+            padding: 0.75rem 1.5rem !important;
+            background: none !important;
+            border: none !important;
+            border-bottom: 2px solid transparent !important;
+            color: #64748b !important;
+        }
+        
+        .tab-nav button.selected {
+            color: #3b82f6 !important;
+            border-bottom-color: #3b82f6 !important;
+            font-weight: 600 !important;
+        }
+        
+        /* Code Editor */
+        #code_editor {
+            font-family: 'JetBrains Mono', 'Consolas', monospace !important;
+            font-size: 0.875rem !important;
+            background: #f8fafc !important;
+            border: 1px solid #e2e8f0 !important;
+            border-radius: 6px !important;
+            padding: 1rem !important;
+        }
+        
+        /* Status Messages */
+        .status-message {
+            padding: 1rem;
+            border-radius: 6px;
+            margin: 1rem 0;
+            border-left: 4px solid;
+            background: #f8fafc;
+            font-size: 0.875rem;
+        }
+        
+        .status-message.success {
+            border-left-color: #10b981;
+            background: #f0fdf4;
+        }
+        
+        .status-message.error {
+            border-left-color: #ef4444;
+            background: #fef2f2;
+        }
+        
+        .status-message.warning {
+            border-left-color: #f59e0b;
+            background: #fffbeb;
+        }
+        
+        .status-message.info {
+            border-left-color: #3b82f6;
+            background: #eff6ff;
+        }
+        
+        /* File Cards */
+        .file-card {
+            border: 1px solid #e2e8f0;
+            border-radius: 6px;
+            padding: 1rem;
+            margin-bottom: 1rem;
+            background: #f8fafc;
+        }
+        
+        .file-card-title {
+            font-weight: 600;
+            color: #1e293b;
+            margin-bottom: 0.5rem;
+        }
+        
+        /* Error Message */
+        .error-message {
+            background: #fef2f2;
+            border: 1px solid #fecaca;
+            border-radius: 6px;
+            padding: 1rem;
+            margin: 1rem 0;
+        }
+        
+        .error-message h4 {
+            margin: 0 0 0.5rem 0;
+            color: #dc2626;
+        }
+        
+        .error-message ul {
+            margin: 0;
+            padding-left: 1.25rem;
+        }
+        
+        .error-message li {
+            margin-bottom: 0.25rem;
+            color: #57534e;
+        }
+        
+        /* Progress Bar */
+        .progress-bar {
+            height: 4px;
+            background: #e2e8f0;
+            border-radius: 2px;
+            margin: 1rem 0;
+            overflow: hidden;
+        }
+        
+        .progress-fill {
+            height: 100%;
+            background: #3b82f6;
+            width: 33.33%;
+            transition: width 0.3s ease;
+        }
+        
+        .progress-fill.step2 { width: 66.66%; }
+        .progress-fill.step3 { width: 100%; }
+        
+        /* Tips Box */
+        .tips-box {
+            background: #eff6ff;
+            border: 1px solid #bfdbfe;
+            border-radius: 6px;
+            padding: 1rem;
+            margin-top: 1.5rem;
+        }
+        
+        .tips-box h4 {
+            margin: 0 0 0.75rem 0;
+            color: #1e40af;
+            font-size: 0.875rem;
+            font-weight: 600;
+        }
+        
+        .tip {
+            display: flex;
+            align-items: flex-start;
+            gap: 0.75rem;
+            margin-bottom: 0.75rem;
+        }
+        
+        .tip:last-child {
+            margin-bottom: 0;
+        }
+        
+        .tip-icon {
+            color: #3b82f6;
+            flex-shrink: 0;
+            margin-top: 0.125rem;
+        }
+        
+        .tip-text {
+            font-size: 0.875rem;
+            color: #374151;
+            line-height: 1.5;
+        }
+        """
     ) as demo:
         
-        # Custom CSS
-        gr.HTML('<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">')
+        # Add font
+        gr.HTML('<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet">')
         
-        # Header
-        create_header()
+        # Simple Header
+        header_html = '''
+        <div class="header">
+            <h1>Space Creator</h1>
+            <p>Convert Python code to deployable Gradio applications</p>
+        </div>
+        '''
+        gr.HTML(header_html)
         
-        with gr.Row():
-            # Sidebar with steps
-            with gr.Column(scale=1, min_width=300):
+        # Progress Bar
+        progress_html = '''
+        <div class="progress-bar">
+            <div class="progress-fill" id="progress-fill"></div>
+        </div>
+        '''
+        gr.HTML(progress_html)
+        
+        with gr.Row(elem_classes="main-layout"):
+            # Sidebar
+            with gr.Column(scale=1, min_width=280, elem_classes="sidebar"):
                 current_step = gr.State(1)
-                sidebar = create_sidebar(current_step)
+                
+                # Steps
+                steps_html = '''
+                <div style="margin-bottom: 1.5rem;">
+                    <h3 style="margin: 0 0 1rem 0; font-size: 1rem; font-weight: 600; color: #1e293b;">
+                        Workflow Steps
+                    </h3>
+                    <div class="step active">
+                        <span class="step-number">1</span>
+                        <span class="step-title">Input Code</span>
+                        <div class="step-description">Provide your Python code</div>
+                    </div>
+                    <div class="step">
+                        <span class="step-number">2</span>
+                        <span class="step-title">Generate Files</span>
+                        <div class="step-description">Create Gradio app files</div>
+                    </div>
+                    <div class="step">
+                        <span class="step-number">3</span>
+                        <span class="step-title">Deploy</span>
+                        <div class="step-description">Deploy to Hugging Face</div>
+                    </div>
+                </div>
+                '''
+                gr.HTML(steps_html)
+                
+                # Tips
+                tips_html = '''
+                <div class="tips-box">
+                    <h4>Quick Tips</h4>
+                    <div class="tip">
+                        <div class="tip-icon">•</div>
+                        <div class="tip-text">Ensure your code is well-structured for best results</div>
+                    </div>
+                    <div class="tip">
+                        <div class="tip-icon">•</div>
+                        <div class="tip-text">API keys are used securely and not stored</div>
+                    </div>
+                    <div class="tip">
+                        <div class="tip-icon">•</div>
+                        <div class="tip-text">One-click deployment to Hugging Face Spaces</div>
+                    </div>
+                </div>
+                '''
+                gr.HTML(tips_html)
             
-            # Main content area
-            with gr.Column(scale=3):
-                # Step 1: Code Input and Conversion
+            # Main Content
+            with gr.Column(scale=3, elem_classes="content"):
+                # 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", id="upload_tab"):
+                        with gr.Tab("Upload File"):
                             file_input = gr.File(
                                 label="Upload Python or Jupyter Notebook",
                                 file_types=SUPPORTED_EXTENSIONS,
                                 type="filepath"
                             )
                         
-                        with gr.Tab("Paste Code", id="paste_tab"):
+                        with gr.Tab("Paste Code"):
                             text_input = gr.Textbox(
                                 label="Python Code",
-                                lines=20,
-                                placeholder="# Paste your Python code here...\n\n# Example:\ndef add(a, b):\n    return a + b\n\ndef greet(name):\n    return f\"Hello, {name}!\"",
+                                lines=15,
+                                placeholder="# Paste your Python code here...\n# Example:\ndef add(a, b):\n    return a + b",
                                 elem_id="code_editor"
                             )
                     
-                    gr.Markdown("### Step 1b: API Configuration")
-                    with gr.Row():
-                        with gr.Column():
-                            groq_api_key = gr.Textbox(
-                                label="Groq API Key",
-                                type="password",
-                                placeholder="Enter your Groq API key starting with gsk_",
-                                info="Required for AI-powered conversion"
-                            )
+                    gr.Markdown("### Step 2: API Configuration")
+                    groq_api_key = gr.Textbox(
+                        label="Groq API Key",
+                        type="password",
+                        placeholder="Enter your Groq API key (starts with gsk_)",
+                        info="Required for AI-powered conversion"
+                    )
                     
-                    # API Key Creation Guide
-                    api_guide = create_api_guide()
+                    # API Guide
+                    with gr.Accordion("Need help creating API keys?", open=False):
+                        with gr.Tabs():
+                            with gr.Tab("Groq API Key"):
+                                gr.Markdown("""
+                                1. Go to [Groq Console](https://console.groq.com)
+                                2. Sign up or log in
+                                3. Navigate to **API Keys** section
+                                4. Click **Create API Key**
+                                5. Copy the key (starts with `gsk_`)
+                                6. Paste it in the field above
+                                """)
+                            
+                            with gr.Tab("Hugging Face Token"):
+                                gr.Markdown("""
+                                1. Go to [Hugging Face](https://huggingface.co)
+                                2. Click profile → **Settings**
+                                3. Navigate to **Access Tokens**
+                                4. Click **New Token**
+                                5. Select token type: **Write**
+                                6. Copy the token (starts with `hf_`)
+                                7. Paste it in Step 2
+                                """)
                     
-                    with gr.Row():
-                        convert_btn = gr.Button(
-                            "Convert Code",
-                            variant="primary",
-                            size="lg",
-                            elem_id="convert_btn"
-                        )
+                    convert_btn = gr.Button(
+                        "Convert Code",
+                        variant="primary",
+                        size="lg"
+                    )
                 
                 # Step 2: Generated Files
                 with gr.Group(visible=False) as step2_group:
@@ -247,49 +621,51 @@ def create_app():
                     
                     with gr.Row():
                         with gr.Column():
+                            gr.Markdown("**app.py**")
                             app_py_download = gr.File(
-                                label="app.py",
+                                label="Download app.py",
                                 file_types=[".py"],
                                 interactive=False
                             )
                         
                         with gr.Column():
+                            gr.Markdown("**requirements.txt**")
                             requirements_download = gr.File(
-                                label="requirements.txt",
+                                label="Download requirements.txt",
                                 file_types=[".txt"],
                                 interactive=False
                             )
                         
                         with gr.Column():
+                            gr.Markdown("**README.md**")
                             readme_download = gr.File(
-                                label="README.md",
+                                label="Download README.md",
                                 file_types=[".md"],
                                 interactive=False
                             )
                     
-                    gr.Markdown("### Step 2b: Deployment Options")
+                    gr.Markdown("### Step 3: Deployment Options")
                     
                     with gr.Row():
                         with gr.Column():
                             hf_token = gr.Textbox(
                                 label="Hugging Face Token",
                                 type="password",
-                                placeholder="Enter your Hugging Face token starting with hf_",
+                                placeholder="Enter your Hugging Face token (starts with hf_)",
                                 info="Required for deployment"
                             )
                         
                         with gr.Column():
                             space_name = gr.Textbox(
                                 label="Space Name",
-                                placeholder="my-gradio-application",
+                                placeholder="my-gradio-app",
                                 info="Lowercase letters, numbers, and hyphens only"
                             )
                     
                     deploy_mode = gr.Radio(
                         choices=["Download Only", "Deploy to Hugging Face Space"],
                         label="Select Action",
-                        value="Download Only",
-                        elem_id="deploy_mode"
+                        value="Download Only"
                     )
                     
                     with gr.Row():
@@ -301,12 +677,21 @@ def create_app():
                     gr.Markdown("### Step 3: Deployment Complete")
                     
                     with gr.Row():
-                        with gr.Column():
+                        with gr.Column(scale=2):
+                            gr.Markdown("**Complete Application Package**")
                             full_package_download = gr.File(
-                                label="Complete Application Package",
+                                label="Download full package",
                                 file_types=[".zip"],
                                 interactive=False
                             )
+                        with gr.Column(scale=1):
+                            gr.Markdown("**Next Steps**")
+                            gr.Markdown("""
+                            1. Your app is now deployed
+                            2. Visit your Hugging Face Space
+                            3. Monitor deployment logs
+                            4. Share your app with others
+                            """)
                     
                     deployment_status = gr.Markdown()
                     
@@ -316,11 +701,40 @@ def create_app():
                 
                 # Status output
                 status_output = gr.HTML(
-                    value='<div class="status-container"></div>',
+                    value='',
                     elem_id="status_output"
                 )
         
+        # JavaScript for updating progress bar
+        js_code = """
+        <script>
+        function updateProgress(step) {
+            const progressFill = document.getElementById('progress-fill');
+            progressFill.className = 'progress-fill';
+            if (step === 2) progressFill.classList.add('step2');
+            if (step === 3) progressFill.classList.add('step3');
+            
+            // Update steps in sidebar
+            const steps = document.querySelectorAll('.step');
+            steps.forEach((stepEl, index) => {
+                stepEl.classList.remove('active');
+                if (index + 1 === step) {
+                    stepEl.classList.add('active');
+                }
+            });
+        }
+        </script>
+        """
+        gr.HTML(js_code)
+        
         # Event handlers
+        def update_progress_bar(step):
+            return f"""
+            <script>
+            updateProgress({step});
+            </script>
+            """
+        
         convert_btn.click(
             fn=app.process_step1,
             inputs=[text_input, file_input, groq_api_key],
@@ -336,6 +750,10 @@ def create_app():
             fn=lambda step: (gr.update(visible=step==1), gr.update(visible=step==2), gr.update(visible=step==3)),
             inputs=[current_step],
             outputs=[step1_group, step2_group, step3_group]
+        ).then(
+            fn=update_progress_bar,
+            inputs=[current_step],
+            outputs=[status_output]
         )
         
         deploy_btn.click(
@@ -346,11 +764,19 @@ def create_app():
             fn=lambda step: (gr.update(visible=step==1), gr.update(visible=step==2), gr.update(visible=step==3)),
             inputs=[current_step],
             outputs=[step1_group, step2_group, step3_group]
+        ).then(
+            fn=update_progress_bar,
+            inputs=[current_step],
+            outputs=[status_output]
         )
         
         back_btn_step2.click(
             fn=lambda: (1, gr.update(visible=True), gr.update(visible=False), gr.update(visible=False)),
             outputs=[current_step, step1_group, step2_group, step3_group]
+        ).then(
+            fn=update_progress_bar,
+            inputs=[current_step],
+            outputs=[status_output]
         )
         
         back_btn_step3.click(
@@ -360,6 +786,10 @@ def create_app():
             fn=app.cleanup,
             inputs=None,
             outputs=None
+        ).then(
+            fn=update_progress_bar,
+            inputs=[current_step],
+            outputs=[status_output]
         )
         
         finish_btn.click(