Spaces:
Sleeping
Sleeping
| """ | |
| Main application file for PyDeploy Studio | |
| Professional Gradio application for converting Python code to deployable Gradio apps | |
| Created by Veerakumar C B | |
| """ | |
| import gradio as gr | |
| import tempfile | |
| import os | |
| import sys | |
| from pathlib import Path | |
| # Add utils and components to path | |
| sys.path.append(str(Path(__file__).parent)) | |
| from utils.converter import convert_code | |
| from utils.deployer import deploy_to_space | |
| from utils.file_handler import ( | |
| create_zip_archive, | |
| read_file_content, | |
| parse_notebook, | |
| save_individual_file | |
| ) | |
| from utils.validator import validate_inputs | |
| from components.header import create_header | |
| from components.sidebar import create_sidebar | |
| from components.api_guide import create_api_guide | |
| from components.file_downloader import create_file_download_section | |
| # Constants | |
| MAX_FILE_SIZE = 10 * 1024 * 1024 # 10MB | |
| SUPPORTED_EXTENSIONS = ['.py', '.ipynb', '.txt'] | |
| class SpaceCreatorApp: | |
| """Main application class for PyDeploy Studio""" | |
| def __init__(self): | |
| self.temp_files = [] | |
| self.current_step = 1 | |
| self.generated_files = {} | |
| def cleanup(self): | |
| """Clean up temporary files""" | |
| for file_path in self.temp_files: | |
| try: | |
| if os.path.exists(file_path): | |
| os.remove(file_path) | |
| except: | |
| pass | |
| self.temp_files = [] | |
| def process_step1(self, input_text, input_file, groq_api_key): | |
| """Step 1: Convert code to Gradio app""" | |
| try: | |
| # Validate inputs | |
| validation_errors = validate_inputs(groq_api_key, None, None, "Convert Only") | |
| if validation_errors: | |
| return None, None, None, None, self._format_errors(validation_errors), 1 | |
| # Get source code | |
| code_content = self._extract_code(input_text, input_file) | |
| if not code_content.strip(): | |
| return None, None, None, None, "Please provide Python code to convert.", 1 | |
| # Convert code | |
| conversion_result = convert_code(code_content, groq_api_key) | |
| # Store generated files | |
| self.generated_files = { | |
| "app.py": conversion_result["app_py"], | |
| "requirements.txt": conversion_result["requirements_txt"], | |
| "README.md": conversion_result["readme_md"] | |
| } | |
| # Create individual files for download | |
| file_paths = {} | |
| for filename, content in self.generated_files.items(): | |
| file_path = save_individual_file(filename, content) | |
| self.temp_files.append(file_path) | |
| file_paths[filename] = file_path | |
| status = self._create_status_message("success", "Code conversion successful!") | |
| return (file_paths["app.py"], file_paths["requirements.txt"], | |
| file_paths["README.md"], None, status, 2) | |
| except Exception as e: | |
| error_msg = self._create_status_message("error", f"Conversion failed: {str(e)}") | |
| return None, None, None, None, error_msg, 1 | |
| def process_step2(self, hf_token, space_name, deploy_mode): | |
| """Step 2: Deploy to Hugging Face""" | |
| try: | |
| if deploy_mode != "Deploy to Hugging Face Space": | |
| status = self._create_status_message("info", "Skipping deployment as requested.") | |
| return None, status, 2 | |
| # Validate deployment inputs | |
| validation_errors = validate_inputs(None, hf_token, space_name, "Deploy") | |
| if validation_errors: | |
| return None, self._format_errors(validation_errors), 2 | |
| # Deploy to Hugging Face | |
| deploy_url = deploy_to_space(hf_token, space_name, self.generated_files) | |
| # Create zip archive of all files | |
| zip_bytes = create_zip_archive(self.generated_files) | |
| zip_path = save_individual_file("gradio_app_full_package.zip", zip_bytes, binary=True) | |
| self.temp_files.append(zip_path) | |
| status = self._create_status_message("success", | |
| f"Deployment successful! Space URL: {deploy_url}") | |
| return zip_path, status, 3 | |
| except Exception as e: | |
| error_msg = self._create_status_message("error", f"Deployment failed: {str(e)}") | |
| return None, error_msg, 2 | |
| def _extract_code(self, input_text, input_file): | |
| """Extract code from text or file""" | |
| code_content = "" | |
| if input_file is not None: | |
| file_content = read_file_content(input_file) | |
| if input_file.name.endswith('.ipynb') if hasattr(input_file, 'name') else False: | |
| with tempfile.NamedTemporaryFile(mode='w', suffix='.ipynb', delete=False, encoding='utf-8') as tmp: | |
| tmp.write(file_content) | |
| tmp_path = tmp.name | |
| try: | |
| code_content = parse_notebook(tmp_path) | |
| finally: | |
| os.unlink(tmp_path) | |
| else: | |
| code_content = file_content | |
| elif input_text.strip(): | |
| code_content = input_text | |
| return code_content | |
| def _format_errors(self, errors): | |
| """Format validation errors""" | |
| error_html = '<div class="error-message"><h4>Validation Errors:</h4><ul>' | |
| for error in errors: | |
| error_html += f'<li>{error}</li>' | |
| error_html += '</ul></div>' | |
| return error_html | |
| def _create_status_message(self, msg_type, message): | |
| """Create formatted status message""" | |
| icons = { | |
| "success": "✓", | |
| "error": "✗", | |
| "warning": "⚠", | |
| "info": "ℹ" | |
| } | |
| colors = { | |
| "success": "#16a34a", | |
| "error": "#dc2626", | |
| "warning": "#d97706", | |
| "info": "#2563eb" | |
| } | |
| return f''' | |
| <div class="status-message {msg_type}"> | |
| <span style="font-weight: bold; color: {colors[msg_type]}; margin-right: 8px;"> | |
| {icons[msg_type]} | |
| </span> | |
| <span>{message}</span> | |
| </div> | |
| ''' | |
| def create_app(): | |
| """Create the Gradio application interface""" | |
| app = SpaceCreatorApp() | |
| # Custom theme with yellow and elephant grey | |
| theme = gr.themes.Base( | |
| primary_hue="yellow", | |
| secondary_hue="gray", | |
| neutral_hue="gray", | |
| font=("Inter", "Segoe UI", "Roboto", "Helvetica", "Arial", "sans-serif") | |
| ) | |
| with gr.Blocks( | |
| title="PyDeploy Studio", | |
| theme=theme, | |
| css=""" | |
| /* PyDeploy Studio CSS - Yellow & Elephant Grey Theme */ | |
| .gradio-container { | |
| max-width: 1300px !important; | |
| margin: 20px auto !important; | |
| font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; | |
| background: #f8f9fa !important; | |
| } | |
| body { | |
| background: #f1f3f4 !important; | |
| } | |
| /* Header with gradient */ | |
| .header-main { | |
| background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%); | |
| color: white; | |
| padding: 2.5rem 2rem; | |
| border-radius: 12px; | |
| margin-bottom: 24px; | |
| box-shadow: 0 4px 20px rgba(0,0,0,0.1); | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .header-main::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| right: 0; | |
| width: 200px; | |
| height: 200px; | |
| background: linear-gradient(45deg, #fbbf24 0%, transparent 70%); | |
| opacity: 0.1; | |
| border-radius: 50%; | |
| } | |
| .header-content { | |
| position: relative; | |
| z-index: 2; | |
| } | |
| .header-content h1 { | |
| margin: 0 0 0.5rem 0; | |
| font-size: 2.5rem; | |
| font-weight: 700; | |
| background: linear-gradient(90deg, #fbbf24 0%, #f59e0b 100%); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| } | |
| .header-content .subtitle { | |
| font-size: 1.1rem; | |
| color: #cbd5e1; | |
| margin-bottom: 1rem; | |
| } | |
| .creator-info { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| font-size: 0.9rem; | |
| color: #fbbf24; /* Changed to yellow */ | |
| margin-top: 0.5rem; | |
| } | |
| .creator-info a { | |
| color: #fbbf24; | |
| text-decoration: none; | |
| font-weight: 500; | |
| transition: color 0.2s; | |
| } | |
| .creator-info a:hover { | |
| color: #f59e0b; | |
| text-decoration: underline; | |
| } | |
| .creator-info .linkedin-icon { | |
| color: #0077b5; | |
| } | |
| /* Main Layout */ | |
| .main-wrapper { | |
| display: flex; | |
| gap: 24px; | |
| margin-top: 20px; | |
| } | |
| /* Sidebar */ | |
| .sidebar-container { | |
| flex: 0 0 300px; | |
| background: white; | |
| padding: 1.75rem; | |
| border-radius: 12px; | |
| border: 1px solid #e5e7eb; | |
| box-shadow: 0 2px 10px rgba(0,0,0,0.05); | |
| height: fit-content; | |
| } | |
| .sidebar-title { | |
| font-size: 1.1rem; | |
| font-weight: 600; | |
| color: #374151; | |
| margin-bottom: 1.5rem; | |
| padding-bottom: 0.75rem; | |
| border-bottom: 2px solid #fbbf24; | |
| } | |
| /* Steps */ | |
| .step-container { | |
| margin-bottom: 2rem; | |
| } | |
| .step-item { | |
| display: flex; | |
| align-items: flex-start; | |
| gap: 1rem; | |
| padding: 1.25rem; | |
| margin-bottom: 0.75rem; | |
| background: #f9fafb; | |
| border-radius: 10px; | |
| border: 1px solid #e5e7eb; | |
| transition: all 0.3s ease; | |
| cursor: pointer; | |
| } | |
| .step-item:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 4px 12px rgba(0,0,0,0.08); | |
| } | |
| .step-item.active { | |
| background: linear-gradient(135deg, #fef3c7 0%, #fffbeb 100%); | |
| border-color: #fbbf24; | |
| border-left: 4px solid #fbbf24; | |
| } | |
| .step-number { | |
| width: 32px; | |
| height: 32px; | |
| background: #e5e7eb; | |
| color: #6b7280; | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-weight: 600; | |
| font-size: 0.9rem; | |
| flex-shrink: 0; | |
| transition: all 0.3s ease; | |
| } | |
| .step-item.active .step-number { | |
| background: #fbbf24; | |
| color: #1f2937; | |
| } | |
| .step-content { | |
| flex: 1; | |
| } | |
| .step-title { | |
| font-weight: 600; | |
| color: #374151; | |
| margin-bottom: 0.25rem; | |
| } | |
| .step-item.active .step-title { | |
| color: #1f2937; | |
| } | |
| .step-description { | |
| font-size: 0.875rem; | |
| color: #6b7280; | |
| line-height: 1.5; | |
| } | |
| /* Tips Box */ | |
| .tips-container { | |
| background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%); | |
| border: 1px solid #e2e8f0; | |
| border-radius: 10px; | |
| padding: 1.5rem; | |
| } | |
| .tips-title { | |
| font-size: 1rem; | |
| font-weight: 600; | |
| color: #374151; | |
| margin-bottom: 1rem; | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| } | |
| .tips-title::before { | |
| content: "💡"; | |
| } | |
| .tip-item { | |
| display: flex; | |
| align-items: flex-start; | |
| gap: 0.75rem; | |
| margin-bottom: 0.875rem; | |
| } | |
| .tip-item:last-child { | |
| margin-bottom: 0; | |
| } | |
| .tip-bullet { | |
| color: #fbbf24; | |
| font-weight: bold; | |
| flex-shrink: 0; | |
| margin-top: 0.125rem; | |
| } | |
| .tip-text { | |
| font-size: 0.875rem; | |
| color: #4b5563; | |
| line-height: 1.5; | |
| } | |
| /* Main Content */ | |
| .content-container { | |
| flex: 1; | |
| background: white; | |
| padding: 2rem; | |
| border-radius: 12px; | |
| border: 1px solid #e5e7eb; | |
| box-shadow: 0 2px 10px rgba(0,0,0,0.05); | |
| } | |
| /* Step Groups */ | |
| .step-group { | |
| margin-bottom: 2rem; | |
| } | |
| .step-header { | |
| font-size: 1.5rem; | |
| font-weight: 600; | |
| color: #1f2937; | |
| margin-bottom: 1.5rem; | |
| padding-bottom: 0.75rem; | |
| border-bottom: 2px solid #fbbf24; | |
| } | |
| /* Form Elements */ | |
| .form-group { | |
| margin-bottom: 1.5rem; | |
| } | |
| .form-label { | |
| display: block; | |
| margin-bottom: 0.5rem; | |
| font-weight: 500; | |
| color: #374151; | |
| font-size: 0.95rem; | |
| } | |
| .form-info { | |
| font-size: 0.85rem; | |
| color: #6b7280; | |
| margin-top: 0.25rem; | |
| } | |
| input, textarea, select { | |
| width: 100%; | |
| padding: 0.875rem 1rem; | |
| border: 1px solid #d1d5db; | |
| border-radius: 8px; | |
| font-size: 0.95rem; | |
| font-family: 'Inter', sans-serif; | |
| transition: all 0.2s ease; | |
| color: #374151; | |
| } | |
| input:focus, textarea:focus, select:focus { | |
| outline: none; | |
| border-color: #fbbf24; | |
| box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.1); | |
| } | |
| input::placeholder, textarea::placeholder { | |
| color: #9ca3af; | |
| } | |
| /* Buttons */ | |
| button { | |
| font-family: 'Inter', sans-serif !important; | |
| font-weight: 500 !important; | |
| font-size: 0.95rem !important; | |
| padding: 0.875rem 1.75rem !important; | |
| border-radius: 8px !important; | |
| transition: all 0.3s ease !important; | |
| border: none !important; | |
| } | |
| button.primary { | |
| background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%) !important; | |
| color: #1f2937 !important; | |
| font-weight: 600 !important; | |
| } | |
| button.primary:hover { | |
| transform: translateY(-2px) !important; | |
| box-shadow: 0 4px 12px rgba(251, 191, 36, 0.3) !important; | |
| } | |
| button.secondary { | |
| background: white !important; | |
| color: #4b5563 !important; | |
| border: 1px solid #d1d5db !important; | |
| } | |
| button.secondary:hover { | |
| background: #f9fafb !important; | |
| border-color: #9ca3af !important; | |
| } | |
| /* Tabs */ | |
| .tab-nav { | |
| border-bottom: 1px solid #e5e7eb !important; | |
| margin-bottom: 1.5rem !important; | |
| } | |
| .tab-nav button { | |
| padding: 0.75rem 1.5rem !important; | |
| background: none !important; | |
| border: none !important; | |
| border-bottom: 3px solid transparent !important; | |
| color: #6b7280 !important; | |
| border-radius: 0 !important; | |
| } | |
| .tab-nav button.selected { | |
| color: #1f2937 !important; | |
| border-bottom-color: #fbbf24 !important; | |
| font-weight: 600 !important; | |
| } | |
| /* Code Editor */ | |
| #code_editor { | |
| font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace !important; | |
| font-size: 0.9rem !important; | |
| line-height: 1.6 !important; | |
| background: #f8fafc !important; | |
| border: 1px solid #e2e8f0 !important; | |
| border-radius: 8px !important; | |
| padding: 1.25rem !important; | |
| } | |
| /* Status Messages */ | |
| .status-message { | |
| padding: 1rem 1.25rem; | |
| border-radius: 8px; | |
| margin: 1.25rem 0; | |
| border-left: 4px solid; | |
| background: #f8fafc; | |
| font-size: 0.95rem; | |
| display: flex; | |
| align-items: flex-start; | |
| gap: 0.75rem; | |
| } | |
| .status-message.success { | |
| border-left-color: #16a34a; | |
| background: #f0fdf4; | |
| } | |
| .status-message.error { | |
| border-left-color: #dc2626; | |
| background: #fef2f2; | |
| } | |
| .status-message.warning { | |
| border-left-color: #d97706; | |
| background: #fffbeb; | |
| } | |
| .status-message.info { | |
| border-left-color: #2563eb; | |
| background: #eff6ff; | |
| } | |
| /* File Cards */ | |
| .file-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); | |
| gap: 1rem; | |
| margin: 1.5rem 0; | |
| } | |
| .file-card { | |
| background: #f8fafc; | |
| border: 1px solid #e2e8f0; | |
| border-radius: 10px; | |
| padding: 1.5rem; | |
| transition: all 0.3s ease; | |
| } | |
| .file-card:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 4px 12px rgba(0,0,0,0.1); | |
| border-color: #fbbf24; | |
| } | |
| .file-card-title { | |
| font-weight: 600; | |
| color: #1f2937; | |
| margin-bottom: 0.75rem; | |
| font-size: 1.1rem; | |
| } | |
| .file-card-description { | |
| font-size: 0.875rem; | |
| color: #6b7280; | |
| margin-bottom: 1rem; | |
| } | |
| /* Error Message */ | |
| .error-message { | |
| background: linear-gradient(135deg, #fef2f2 0%, #fff5f5 100%); | |
| border: 1px solid #fecaca; | |
| border-radius: 10px; | |
| padding: 1.5rem; | |
| margin: 1.5rem 0; | |
| } | |
| .error-message h4 { | |
| margin: 0 0 0.75rem 0; | |
| color: #dc2626; | |
| font-size: 1.1rem; | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| } | |
| .error-message h4::before { | |
| content: "⚠"; | |
| } | |
| .error-message ul { | |
| margin: 0; | |
| padding-left: 1.5rem; | |
| } | |
| .error-message li { | |
| margin-bottom: 0.5rem; | |
| color: #7f1d1d; | |
| } | |
| /* Radio Group */ | |
| .radio-group { | |
| display: flex; | |
| gap: 2rem; | |
| margin: 1.5rem 0; | |
| } | |
| .radio-item { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| } | |
| /* Footer */ | |
| .footer { | |
| text-align: center; | |
| padding: 1.5rem; | |
| margin-top: 2rem; | |
| color: #6b7280; | |
| font-size: 0.875rem; | |
| border-top: 1px solid #e5e7eb; | |
| } | |
| .footer a { | |
| color: #f59e0b; | |
| text-decoration: none; | |
| } | |
| .footer a:hover { | |
| text-decoration: underline; | |
| } | |
| /* Responsive Design */ | |
| @media (max-width: 1024px) { | |
| .main-wrapper { | |
| flex-direction: column; | |
| } | |
| .sidebar-container { | |
| width: 100%; | |
| } | |
| .gradio-container { | |
| padding: 10px !important; | |
| } | |
| } | |
| @media (max-width: 768px) { | |
| .header-content h1 { | |
| font-size: 2rem; | |
| } | |
| .content-container { | |
| padding: 1.5rem; | |
| } | |
| .file-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| .radio-group { | |
| flex-direction: column; | |
| gap: 1rem; | |
| } | |
| } | |
| /* Animation for active step */ | |
| @keyframes pulse { | |
| 0% { transform: scale(1); } | |
| 50% { transform: scale(1.05); } | |
| 100% { transform: scale(1); } | |
| } | |
| .step-item.active { | |
| animation: pulse 2s infinite; | |
| } | |
| """ | |
| ) as demo: | |
| # Add fonts | |
| gr.HTML(''' | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet"> | |
| <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet"> | |
| ''') | |
| # Header with branding | |
| header_html = ''' | |
| <div class="header-main"> | |
| <div class="header-content"> | |
| <h1>PyDeploy Studio</h1> | |
| <div class="subtitle">Professional Python to Gradio Application Converter</div> | |
| <div class="subtitle" style="color: #fbbf24; margin-top: 0.5rem;"> | |
| <span>Created by</span> | |
| <a href="https://linkedin.com/in/cbvk28" target="_blank" style="color: #fbbf24; font-weight: 600; text-decoration: none;"> | |
| Veerakumar C B | |
| </a> | |
| <span>Streamline your deployment workflow</span> | |
| </div> | |
| </div> | |
| </div> | |
| ''' | |
| 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 = ''' | |
| <div class="sidebar-title">Workflow Steps</div> | |
| <div class="step-container"> | |
| <div class="step-item active"> | |
| <div class="step-number">1</div> | |
| <div class="step-content"> | |
| <div class="step-title">Input Code</div> | |
| <div class="step-description">Upload or paste your Python code</div> | |
| </div> | |
| </div> | |
| <div class="step-item"> | |
| <div class="step-number">2</div> | |
| <div class="step-content"> | |
| <div class="step-title">Generate Files</div> | |
| <div class="step-description">Download app.py, requirements.txt & README</div> | |
| </div> | |
| </div> | |
| <div class="step-item"> | |
| <div class="step-number">3</div> | |
| <div class="step-content"> | |
| <div class="step-title">Deploy</div> | |
| <div class="step-description">Deploy to Hugging Face Spaces</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="tips-container"> | |
| <div class="tips-title">Quick Tips</div> | |
| <div class="tip-item"> | |
| <span class="tip-bullet">•</span> | |
| <span class="tip-text">Ensure your code has clear functions for best conversion</span> | |
| </div> | |
| <div class="tip-item"> | |
| <span class="tip-bullet">•</span> | |
| <span class="tip-text">API keys are used securely and never stored</span> | |
| </div> | |
| <div class="tip-item"> | |
| <span class="tip-bullet">•</span> | |
| <span class="tip-text">Test locally before deploying to production</span> | |
| </div> | |
| </div> | |
| ''' | |
| 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('<div class="step-header">Step 1: Provide Your Code</div>') | |
| 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('<div class="step-header" style="margin-top: 2rem;">Step 2: API Configuration</div>') | |
| 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('<div class="step-header">Step 2: Generated Files</div>') | |
| gr.Markdown("### Your Gradio Application is Ready!") | |
| # File Cards Grid | |
| file_cards_html = ''' | |
| <div class="file-grid"> | |
| <div class="file-card"> | |
| <div class="file-card-title">app.py</div> | |
| <div class="file-card-description">Main application file with Gradio interface</div> | |
| </div> | |
| <div class="file-card"> | |
| <div class="file-card-title">requirements.txt</div> | |
| <div class="file-card-description">Python dependencies for your application</div> | |
| </div> | |
| <div class="file-card"> | |
| <div class="file-card-title">README.md</div> | |
| <div class="file-card-description">Documentation with YAML frontmatter</div> | |
| </div> | |
| </div> | |
| ''' | |
| 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('<div class="step-header" style="margin-top: 2rem;">Step 3: Deployment Options</div>') | |
| 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('<div class="step-header">Step 3: Deployment Complete 🎉</div>') | |
| success_html = ''' | |
| <div style="text-align: center; padding: 2rem;"> | |
| <div style="font-size: 4rem; margin-bottom: 1rem;">✅</div> | |
| <h2 style="color: #16a34a; margin-bottom: 1rem;">Deployment Successful!</h2> | |
| <p style="color: #6b7280; margin-bottom: 2rem;">Your application is now live on Hugging Face Spaces</p> | |
| </div> | |
| ''' | |
| gr.HTML(success_html) | |
| with gr.Row(): | |
| with gr.Column(scale=2): | |
| gr.Markdown("### Download Complete Package") | |
| full_package_download = gr.File( | |
| label="gradio_app_full_package.zip", | |
| file_types=[".zip"], | |
| interactive=False | |
| ) | |
| gr.Markdown("*Contains all files ready for deployment*") | |
| with gr.Column(scale=1): | |
| gr.Markdown("### Next Steps") | |
| gr.Markdown(""" | |
| 1. **Visit** your Space on Hugging Face | |
| 2. **Monitor** deployment logs | |
| 3. **Share** your app with others | |
| 4. **Customize** further if needed | |
| """) | |
| deployment_status = gr.Markdown() | |
| with gr.Row(): | |
| back_btn_step3 = gr.Button("🔄 Start New Project", variant="secondary") | |
| finish_btn = gr.Button("🎯 Finish", variant="primary") | |
| # Status output | |
| status_output = gr.HTML( | |
| value='', | |
| elem_id="status_output" | |
| ) | |
| # Footer | |
| footer_html = ''' | |
| <div class="footer"> | |
| <p>PyDeploy Studio • Created by <a href="https://linkedin.com/in/cbvk28" target="_blank">Veerakumar C B</a></p> | |
| <p style="font-size: 0.8rem; color: #9ca3af; margin-top: 0.5rem;">Transform your Python code into production-ready applications</p> | |
| </div> | |
| ''' | |
| gr.HTML(footer_html) | |
| # JavaScript for updating steps | |
| js_code = """ | |
| <script> | |
| function updateSteps(step) { | |
| const steps = document.querySelectorAll('.step-item'); | |
| steps.forEach((stepEl, index) => { | |
| stepEl.classList.remove('active'); | |
| if (index === step - 1) { | |
| stepEl.classList.add('active'); | |
| } | |
| }); | |
| } | |
| // Initialize | |
| document.addEventListener('DOMContentLoaded', function() { | |
| updateSteps(1); | |
| }); | |
| </script> | |
| """ | |
| gr.HTML(js_code) | |
| # Event handlers | |
| def update_step_display(step): | |
| return f""" | |
| <script> | |
| updateSteps({step}); | |
| </script> | |
| """ | |
| convert_btn.click( | |
| fn=app.process_step1, | |
| inputs=[text_input, file_input, groq_api_key], | |
| outputs=[ | |
| app_py_download, | |
| requirements_download, | |
| readme_download, | |
| full_package_download, | |
| status_output, | |
| current_step | |
| ] | |
| ).then( | |
| 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_step_display, | |
| inputs=[current_step], | |
| outputs=[status_output] | |
| ) | |
| deploy_btn.click( | |
| fn=app.process_step2, | |
| inputs=[hf_token, space_name, deploy_mode], | |
| outputs=[full_package_download, status_output, current_step] | |
| ).then( | |
| 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_step_display, | |
| 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_step_display, | |
| inputs=[current_step], | |
| outputs=[status_output] | |
| ) | |
| back_btn_step3.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=app.cleanup, | |
| inputs=None, | |
| outputs=None | |
| ).then( | |
| fn=update_step_display, | |
| inputs=[current_step], | |
| outputs=[status_output] | |
| ) | |
| finish_btn.click( | |
| fn=app.cleanup, | |
| inputs=None, | |
| outputs=None | |
| ) | |
| return demo | |
| if __name__ == "__main__": | |
| print("=" * 60) | |
| print("PyDeploy Studio - Professional Deployment Platform") | |
| print("Created by Veerakumar C B") | |
| print("=" * 60) | |
| print("Starting server...") | |
| print(f"Local URL: http://localhost:7860") | |
| print("=" * 60) | |
| app = create_app() | |
| app.launch( | |
| server_name="0.0.0.0", | |
| server_port=7860, | |
| share=False, | |
| debug=False, | |
| favicon_path=None, | |
| show_error=True | |
| ) |