Update app.py

app.py

@@ -161,7 +161,6 @@ Return ONLY valid JSON with these exact keys:
 - requirements_txt: All necessary dependencies including gradio>=5.35.0
 - summary: Brief description of what the app does"""
     
-    # Fireworks AI API 시도
     fireworks_key = os.getenv("FIREWORKS_API_KEY")
     if fireworks_key:
         try:
@@ -722,7 +721,7 @@ Deployed from: {repo_git}
         yield f"""
 ✅ **Successfully created Space!**
 
-🔗 **Your Space URL**: {space_url}
+🔗 **Your Space URL**: [{space_url}]({space_url})
 
 📋 **Summary:**
 - Space ID: `{repo_id}`
@@ -747,7 +746,7 @@ Deployed from: {repo_git}
             shutil.rmtree(folder)
         yield f"❌ Error: {str(e)}"
 
-def space_to_github(hf_username, hf_space_name, github_repo_name, github_token):
+def space_to_github(hf_username, hf_space_name, github_username, github_repo_name, github_token):
     """Clone HuggingFace Space and push to GitHub"""
     tmp_dir = None
     try:
@@ -782,9 +781,15 @@ def space_to_github(hf_username, hf_space_name, github_repo_name, github_token):
         # 사용자 정보 가져오기
         user_response = requests.get("https://api.github.com/user", headers=headers)
         if user_response.status_code != 200:
-            raise Exception("GitHub authentication failed")
+            raise Exception("GitHub authentication failed. Please check your token.")
+        
+        actual_github_username = user_response.json()["login"]
+        
+        # 입력된 username과 실제 username이 다른 경우 처리
+        if github_username.lower() != actual_github_username.lower():
+            yield f"⚠️ Note: Using authenticated user '{actual_github_username}' instead of '{github_username}'"
+            github_username = actual_github_username
         
-        github_username = user_response.json()["login"]
         yield f"✅ Authenticated as GitHub user: {github_username}"
         
         # 레포지토리 생성
@@ -792,7 +797,8 @@ def space_to_github(hf_username, hf_space_name, github_repo_name, github_token):
         create_data = {
             "name": github_repo_name,
             "private": False,
-            "auto_init": False
+            "auto_init": False,
+            "description": f"Exported from HuggingFace Space: {hf_username}/{hf_space_name}"
         }
         
         create_response = requests.post(
@@ -803,13 +809,15 @@ def space_to_github(hf_username, hf_space_name, github_repo_name, github_token):
         
         if create_response.status_code == 201:
             repo_info = create_response.json()
-            yield f"✅ GitHub repository created: {repo_info['html_url']}"
+            github_url = repo_info['html_url']
+            yield f"✅ GitHub repository created: {github_url}"
         elif create_response.status_code == 422:
             # 레포가 이미 존재함
-            repo_info = {"html_url": f"https://github.com/{github_username}/{github_repo_name}"}
-            yield f"ℹ️ Repository already exists: {repo_info['html_url']}"
+            github_url = f"https://github.com/{github_username}/{github_repo_name}"
+            yield f"ℹ️ Repository already exists: {github_url}"
         else:
-            raise Exception(f"Failed to create repository: {create_response.json().get('message', 'Unknown error')}")
+            error_msg = create_response.json().get('message', 'Unknown error')
+            raise Exception(f"Failed to create repository: {error_msg}")
         
         # Git remote 변경 및 푸시
         yield "📤 Pushing to GitHub..."
@@ -826,7 +834,7 @@ def space_to_github(hf_username, hf_space_name, github_repo_name, github_token):
         
         # main 브랜치로 푸시
         push_result = subprocess.run(
-            ['git', 'push', '-u', 'origin', 'HEAD:main'],
+            ['git', 'push', '-u', 'origin', 'HEAD:main', '--force'],
             capture_output=True,
             text=True
         )
@@ -834,7 +842,7 @@ def space_to_github(hf_username, hf_space_name, github_repo_name, github_token):
         if push_result.returncode != 0:
             # master 브랜치로 재시도
             push_result = subprocess.run(
-                ['git', 'push', '-u', 'origin', 'HEAD:master'],
+                ['git', 'push', '-u', 'origin', 'HEAD:master', '--force'],
                 capture_output=True,
                 text=True
             )
@@ -843,8 +851,24 @@ def space_to_github(hf_username, hf_space_name, github_repo_name, github_token):
                 raise Exception(f"Push failed: {push_result.stderr}")
         
         yield "✅ Successfully pushed to GitHub!"
-        yield f"\n🔗 GitHub Repository: https://github.com/{github_username}/{github_repo_name}"
-        yield f"\n✨ Clone command: `git clone https://github.com/{github_username}/{github_repo_name}.git`"
+        
+        # 최종 결과 출력 - 클릭 가능한 링크
+        final_url = f"https://github.com/{github_username}/{github_repo_name}"
+        yield f"""
+🎉 **Export Complete!**
+
+📦 **GitHub Repository**: [{final_url}]({final_url})
+
+📋 **Details:**
+- Source: HuggingFace Space `{hf_username}/{hf_space_name}`
+- Destination: GitHub `{github_username}/{github_repo_name}`
+
+🔧 **Next Steps:**
+```bash
+git clone {final_url}.git
+cd {github_repo_name}
+```
+"""
         
     except Exception as e:
         yield f"❌ Error: {str(e)}"
@@ -853,72 +877,331 @@ def space_to_github(hf_username, hf_space_name, github_repo_name, github_token):
         if tmp_dir and os.path.exists(tmp_dir):
             os.chdir("/")  # 디렉토리 밖으로 이동
             shutil.rmtree(tmp_dir)
-            yield "🧹 Cleaned up temporary files"
 
 css = """
+/* Modern Professional UI */
 .container {
-    max-width: 900px;
+    max-width: 1200px !important;
     margin: auto;
     padding: 20px;
 }
+
+/* Gradient backgrounds */
+.main-header {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    padding: 2rem;
+    border-radius: 15px;
+    margin-bottom: 2rem;
+    color: white;
+    text-align: center;
+    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
+}
+
+/* Tab styling */
+.tabs {
+    box-shadow: 0 4px 6px rgba(0,0,0,0.07);
+    border-radius: 12px;
+    overflow: hidden;
+}
+
+/* Card-like sections */
+.input-section {
+    background: white;
+    padding: 25px;
+    border-radius: 12px;
+    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
+    margin-bottom: 20px;
+    border: 1px solid rgba(0,0,0,0.05);
+}
+
+/* Output box styling */
 .output-box {
-    min-height: 100px;
-    max-height: 400px;
-    overflow-y: auto;
-    font-family: monospace;
-    font-size: 14px;
-    line-height: 1.5;
+    min-height: 400px !important;
+    max-height: 600px !important;
+    overflow-y: auto !important;
+    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace !important;
+    font-size: 13px !important;
+    line-height: 1.6 !important;
+    background: linear-gradient(to bottom, #1e1e1e, #2d2d30) !important;
+    color: #d4d4d4 !important;
+    padding: 20px !important;
+    border-radius: 10px !important;
+    border: 1px solid rgba(255,255,255,0.1) !important;
+}
+
+/* Custom button styling */
+.primary-btn {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
+    color: white !important;
+    border: none !important;
+    padding: 12px 30px !important;
+    font-size: 16px !important;
+    font-weight: 600 !important;
+    border-radius: 8px !important;
+    cursor: pointer !important;
+    transition: all 0.3s ease !important;
+    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4) !important;
+}
+
+.primary-btn:hover {
+    transform: translateY(-2px) !important;
+    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6) !important;
+}
+
+/* Input field styling */
+input[type="text"], input[type="password"], textarea {
+    border: 2px solid #e2e8f0 !important;
+    border-radius: 8px !important;
+    padding: 10px 15px !important;
+    font-size: 14px !important;
+    transition: all 0.3s ease !important;
+    background: #f8fafc !important;
+}
+
+input[type="text"]:focus, input[type="password"]:focus, textarea:focus {
+    border-color: #667eea !important;
+    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1) !important;
+    background: white !important;
+}
+
+/* Radio button group styling */
+.radio-group {
+    background: #f8fafc;
+    padding: 15px;
+    border-radius: 8px;
+    border: 1px solid #e2e8f0;
+}
+
+/* Checkbox styling */
+input[type="checkbox"] {
+    width: 20px !important;
+    height: 20px !important;
+    cursor: pointer !important;
+}
+
+/* Label styling */
+label {
+    font-weight: 600 !important;
+    color: #334155 !important;
+    margin-bottom: 8px !important;
+    display: block !important;
+    font-size: 14px !important;
+}
+
+/* Info text styling */
+.info-text {
+    color: #64748b !important;
+    font-size: 13px !important;
+    margin-top: 5px !important;
+}
+
+/* Status badges */
+.status-badge {
+    display: inline-block;
+    padding: 6px 12px;
+    border-radius: 20px;
+    font-size: 13px;
+    font-weight: 600;
+    margin: 5px 0;
+}
+
+.status-success {
+    background: #10b981;
+    color: white;
+}
+
+.status-error {
+    background: #ef4444;
+    color: white;
+}
+
+.status-warning {
+    background: #f59e0b;
+    color: white;
+}
+
+/* Tab button styling */
+button.tab-nav {
+    padding: 12px 24px !important;
+    font-weight: 600 !important;
+    font-size: 15px !important;
+    border-bottom: 3px solid transparent !important;
+    transition: all 0.3s ease !important;
+}
+
+button.tab-nav:hover {
+    background: rgba(102, 126, 234, 0.05) !important;
+}
+
+button.tab-nav.selected {
+    border-bottom-color: #667eea !important;
+    color: #667eea !important;
+}
+
+/* Markdown styling */
+.markdown-text h1 {
+    color: #1e293b !important;
+    font-size: 28px !important;
+    font-weight: 700 !important;
+    margin-bottom: 10px !important;
+}
+
+.markdown-text h2 {
+    color: #334155 !important;
+    font-size: 20px !important;
+    font-weight: 600 !important;
+    margin-top: 20px !important;
+}
+
+.markdown-text a {
+    color: #667eea !important;
+    text-decoration: none !important;
+    font-weight: 500 !important;
 }
-.tab-content {
-    margin-top: 20px;
+
+.markdown-text a:hover {
+    text-decoration: underline !important;
+}
+
+.markdown-text code {
+    background: #f1f5f9 !important;
+    padding: 2px 6px !important;
+    border-radius: 4px !important;
+    font-size: 13px !important;
+    color: #e11d48 !important;
+}
+
+/* Scrollbar styling */
+.output-box::-webkit-scrollbar {
+    width: 10px;
+}
+
+.output-box::-webkit-scrollbar-track {
+    background: #2d2d30;
+    border-radius: 5px;
+}
+
+.output-box::-webkit-scrollbar-thumb {
+    background: #555;
+    border-radius: 5px;
+}
+
+.output-box::-webkit-scrollbar-thumb:hover {
+    background: #666;
+}
+
+/* Animation */
+@keyframes fadeIn {
+    from { opacity: 0; transform: translateY(10px); }
+    to { opacity: 1; transform: translateY(0); }
+}
+
+.input-section {
+    animation: fadeIn 0.5s ease;
+}
+
+/* Responsive design */
+@media (max-width: 768px) {
+    .container {
+        padding: 10px;
+    }
+    
+    .main-header {
+        padding: 1.5rem;
+    }
+    
+    .input-section {
+        padding: 15px;
+    }
 }
 """
 
-with gr.Blocks(css=css, theme=gr.themes.Soft()) as demo:
-    gr.Markdown("# 🔄 GitHub ↔ HuggingFace Space Converter")
+with gr.Blocks(css=css, theme=gr.themes.Soft(
+    primary_hue="purple",
+    secondary_hue="purple",
+    neutral_hue="slate"
+)) as demo:
+    gr.HTML("""
+    <div class="main-header">
+        <h1 style="font-size: 2.5rem; margin: 0; font-weight: 700;">
+            🔄 Repository Converter Pro
+        </h1>
+        <p style="font-size: 1.1rem; margin-top: 10px; opacity: 0.95;">
+            Seamlessly transfer repositories between GitHub and HuggingFace
+        </p>
+    </div>
+    """)
     
-    with gr.Tabs():
-        with gr.Tab("GitHub → HF Space"):
+    with gr.Tabs(elem_classes="tabs"):
+        with gr.Tab("🚀 GitHub → HF Space", elem_id="tab1"):
+            with gr.Row():
+                with gr.Column(scale=5):
+                    with gr.Group(elem_classes="input-section"):
+                        gr.Markdown("### 📦 Source Repository")
+                        repo_git = gr.Textbox(
+                            label="GitHub Repository URL",
+                            placeholder="https://github.com/username/repository",
+                            info="Enter the full GitHub repository URL"
+                        )
+                        
+                        gr.Markdown("### 🎯 Destination Settings")
+                        repo_hf = gr.Textbox(
+                            label="HuggingFace Space Name",
+                            placeholder="my-awesome-space",
+                            info="Choose a unique name for your Space"
+                        )
+                        
+                        sdk_choices = gr.Radio(
+                            ["gradio", "streamlit", "docker", "static"],
+                            label="Space SDK Type",
+                            value="gradio",
+                            elem_classes="radio-group"
+                        )
+                        
+                        gr.Markdown("### ⚙️ Advanced Options")
+                        with gr.Row():
+                            skip_lfs = gr.Checkbox(
+                                label="Skip Large Files (LFS)",
+                                value=True,
+                                info="Recommended for faster deployment"
+                            )
+                            enable_smart_generation = gr.Checkbox(
+                                label="🤖 AI-Powered App Generation",
+                                value=False,
+                                info="Generate app.py automatically"
+                            )
+                        
+                        btn_to_hf = gr.Button("🚀 Deploy to HuggingFace", 
+                                            variant="primary", 
+                                            elem_classes="primary-btn",
+                                            size="lg")
+                
+                with gr.Column(scale=7):
+                    with gr.Group(elem_classes="input-section"):
+                        gr.Markdown("### 📊 Deployment Progress")
+                        output_to_hf = gr.Textbox(
+                            label="",
+                            lines=20,
+                            elem_classes="output-box",
+                            interactive=False,
+                            show_copy_button=True
+                        )
+            
+            # Status indicator
             if not os.getenv("HF_TOKEN"):
-                gr.Markdown("❌ HF_TOKEN Required - Set it in Space settings")
+                gr.HTML("""
+                <div style="background: #fef2f2; border: 1px solid #fecaca; border-radius: 8px; padding: 12px; margin-top: 10px;">
+                    <span style="color: #dc2626; font-weight: 600;">⚠️ Configuration Required:</span>
+                    <span style="color: #7f1d1d;"> Please set HF_TOKEN in Space settings</span>
+                </div>
+                """)
             else:
-                gr.Markdown("✅ HF_TOKEN Found")
-            
-            with gr.Row():
-                with gr.Column():
-                    repo_git = gr.Textbox(
-                        label="GitHub Repository URL",
-                        placeholder="https://github.com/username/repository"
-                    )
-                    repo_hf = gr.Textbox(
-                        label="Hugging Face Space Name",
-                        placeholder="my-awesome-space"
-                    )
-                    sdk_choices = gr.Radio(
-                        ["gradio", "streamlit", "docker", "static"],
-                        label="Space SDK",
-                        value="gradio"
-                    )
-                    skip_lfs = gr.Checkbox(
-                        label="Skip Git LFS files",
-                        value=True
-                    )
-                    enable_smart_generation = gr.Checkbox(
-                        label="🤖 Enable Smart app.py Generation",
-                        value=False,
-                        info="Requires FIREWORKS_API_KEY in environment variables"
-                    )
-                    
-                    btn_to_hf = gr.Button("🚀 Deploy to HF Space", variant="primary")
-                    
-                with gr.Column():
-                    output_to_hf = gr.Textbox(
-                        label="Progress",
-                        lines=15,
-                        elem_classes=["output-box"],
-                        interactive=False,
-                        show_copy_button=True
-                    )
+                gr.HTML("""
+                <div style="background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 8px; padding: 12px; margin-top: 10px;">
+                    <span style="color: #16a34a; font-weight: 600;">✅ Ready:</span>
+                    <span style="color: #14532d;"> HF_TOKEN configured successfully</span>
+                </div>
+                """)
             
             btn_to_hf.click(
                 fn=clone,
@@ -926,69 +1209,90 @@ with gr.Blocks(css=css, theme=gr.themes.Soft()) as demo:
                 outputs=output_to_hf
             )
         
-        with gr.Tab("HF Space → GitHub"):
-            gr.Markdown("""
-            📌 **Export your HuggingFace Space to GitHub**
-            
-            Create a GitHub repository from your existing HuggingFace Space.
-            """)
-            
+        with gr.Tab("📤 HF Space → GitHub", elem_id="tab2"):
             with gr.Row():
-                with gr.Column():
-                    hf_username = gr.Textbox(
-                        label="HuggingFace Username",
-                        placeholder="e.g., john_doe"
-                    )
-                    hf_space_name = gr.Textbox(
-                        label="HuggingFace Space Name",
-                        placeholder="e.g., my-space"
-                    )
-                    github_repo_name = gr.Textbox(
-                        label="GitHub Repository Name",
-                        placeholder="e.g., my-new-repo"
-                    )
-                    github_token = gr.Textbox(
-                        label="GitHub Personal Access Token",
-                        type="password",
-                        placeholder="ghp_xxxxxxxxxxxx",
-                        info="Token needs 'repo' scope. Get it from: https://github.com/settings/tokens"
-                    )
-                    
-                    btn_to_github = gr.Button("📤 Export to GitHub", variant="primary")
-                    
-                with gr.Column():
-                    output_to_github = gr.Textbox(
-                        label="Progress",
-                        lines=15,
-                        elem_classes=["output-box"],
-                        interactive=False,
-                        show_copy_button=True
-                    )
+                with gr.Column(scale=5):
+                    with gr.Group(elem_classes="input-section"):
+                        gr.Markdown("### 🎯 Source Space")
+                        hf_username = gr.Textbox(
+                            label="HuggingFace Username",
+                            placeholder="your-hf-username",
+                            info="Your HuggingFace account name"
+                        )
+                        hf_space_name = gr.Textbox(
+                            label="Space Name",
+                            placeholder="your-space-name",
+                            info="Name of the Space to export"
+                        )
+                        
+                        gr.Markdown("### 📦 GitHub Destination")
+                        github_username = gr.Textbox(
+                            label="GitHub Username",
+                            placeholder="your-github-username",
+                            info="Your GitHub account name"
+                        )
+                        github_repo_name = gr.Textbox(
+                            label="Repository Name",
+                            placeholder="new-repo-name",
+                            info="Name for the new GitHub repository"
+                        )
+                        
+                        gr.Markdown("### 🔐 Authentication")
+                        github_token = gr.Textbox(
+                            label="GitHub Personal Access Token",
+                            type="password",
+                            placeholder="ghp_xxxxxxxxxxxxxxxxxxxx",
+                            info="Generate at: github.com/settings/tokens (needs 'repo' scope)"
+                        )
+                        
+                        btn_to_github = gr.Button("📤 Export to GitHub", 
+                                                variant="primary", 
+                                                elem_classes="primary-btn",
+                                                size="lg")
+                
+                with gr.Column(scale=7):
+                    with gr.Group(elem_classes="input-section"):
+                        gr.Markdown("### 📊 Export Progress")
+                        output_to_github = gr.Textbox(
+                            label="",
+                            lines=20,
+                            elem_classes="output-box",
+                            interactive=False,
+                            show_copy_button=True
+                        )
             
             btn_to_github.click(
                 fn=space_to_github,
-                inputs=[hf_username, hf_space_name, github_repo_name, github_token],
+                inputs=[hf_username, hf_space_name, github_username, github_repo_name, github_token],
                 outputs=output_to_github
             )
     
     gr.Markdown("""
     ---
-    ### 📖 Instructions
-    
-    **GitHub → HF Space:**
-    - Clone any public GitHub repository to your HuggingFace account
-    - Automatically handles LFS issues
-    - Optional AI-powered app.py generation
-    
-    **HF Space → GitHub:**
-    - Export your HuggingFace Space to a new GitHub repository
-    - Requires GitHub Personal Access Token with 'repo' scope
-    - Preserves all files and structure
-    
-    ### 🔑 Required Tokens
-    - **HF_TOKEN**: Set in Space settings for GitHub → HF
-    - **GitHub Token**: Required for HF → GitHub (create at [GitHub Settings](https://github.com/settings/tokens))
-    - **FIREWORKS_API_KEY**: Optional, for smart app generation
+    <div style="text-align: center; margin-top: 30px; color: #64748b;">
+        <h3 style="color: #334155;">🛠️ Quick Start Guide</h3>
+        
+        <div style="display: flex; justify-content: space-around; margin-top: 20px; flex-wrap: wrap;">
+            <div style="flex: 1; min-width: 250px; margin: 10px; padding: 20px; background: #f8fafc; border-radius: 10px;">
+                <h4 style="color: #667eea;">GitHub → HuggingFace</h4>
+                <p>Deploy any GitHub repository as a HuggingFace Space with automatic LFS handling and optional AI-powered interface generation.</p>
+            </div>
+            
+            <div style="flex: 1; min-width: 250px; margin: 10px; padding: 20px; background: #f8fafc; border-radius: 10px;">
+                <h4 style="color: #667eea;">HuggingFace → GitHub</h4>
+                <p>Export your HuggingFace Spaces to GitHub for version control, collaboration, and backup.</p>
+            </div>
+        </div>
+        
+        <div style="margin-top: 30px;">
+            <h4 style="color: #334155;">Required Tokens</h4>
+            <p>
+                <code style="background: #e2e8f0; padding: 4px 8px; border-radius: 4px;">HF_TOKEN</code> for GitHub → HF |
+                <code style="background: #e2e8f0; padding: 4px 8px; border-radius: 4px;">GitHub PAT</code> for HF → GitHub |
+                <code style="background: #e2e8f0; padding: 4px 8px; border-radius: 4px;">FIREWORKS_API_KEY</code> for AI features
+            </p>
+        </div>
+    </div>
     """)
 
 if __name__ == "__main__":