Update app.py

app.py

@@ -1,5 +1,5 @@
 import gradio as gr
-from huggingface_hub import HfApi
+from huggingface_hub import HfApi, login
 import uuid 
 from slugify import slugify
 import os
@@ -432,24 +432,30 @@ if __name__ == "__main__":
         "summary": f"Smart template created for {repo_name}"
     }
 
-def clone(repo_git, repo_hf, sdk_type, skip_lfs, enable_smart_generation):
+def clone(repo_git, repo_hf, sdk_type, skip_lfs, enable_smart_generation, hf_token=None):
     folder = str(uuid.uuid4())
     
-    hf_token = os.getenv("HF_TOKEN")
+    # HF Token 처리 - 환경변수보다 입력값 우선
     if not hf_token:
-        yield "❌ Error: HF_TOKEN not found in environment variables."
+        hf_token = os.getenv("HF_TOKEN")
+    
+    if not hf_token:
+        yield "❌ Error: HuggingFace token not provided. Please enter your token or use OAuth login."
         return
     
     try:
         yield "🔄 Starting clone process..."
         
-        api = HfApi(token=hf_token)
+        # HuggingFace 로그인 및 인증
         try:
+            login(token=hf_token)
+            api = HfApi(token=hf_token)
             user_info = api.whoami()
             username = user_info["name"]
-            yield f"✅ Authenticated as: {username}"
+            yield f"✅ Authenticated as HuggingFace user: @{username}"
         except Exception as e:
-            yield f"❌ Authentication failed: {str(e)}"
+            yield f"❌ HuggingFace authentication failed: {str(e)}"
+            yield "Please check your token or try OAuth login"
             return
         
         # URL 정규화 및 검증
@@ -1180,6 +1186,58 @@ with gr.Blocks(css=css, theme=gr.themes.Soft(
     
     with gr.Tabs(elem_classes="tabs"):
         with gr.Tab("🚀 GitHub → HF Space", elem_id="tab1"):
+            # OAuth 로그인 섹션
+            with gr.Group(elem_classes="input-section", visible=True) as auth_section:
+                gr.HTML("""
+                <div style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); 
+                            padding: 20px; border-radius: 10px; color: white; margin-bottom: 20px;">
+                    <h3 style="margin: 0 0 10px 0;">🔐 HuggingFace Authentication Required</h3>
+                    <p style="margin: 5px 0;">Choose one of the following methods to authenticate:</p>
+                </div>
+                """)
+                
+                with gr.Row():
+                    with gr.Column():
+                        gr.Markdown("""
+                        ### Option 1: OAuth Login (Recommended)
+                        Click the button below to login with your HuggingFace account
+                        """)
+                        gr.HTML("""
+                        <a href="https://huggingface.co/login?next=%2Fsettings%2Ftokens" target="_blank">
+                            <button style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+                                         color: white; border: none; padding: 12px 24px;
+                                         border-radius: 8px; font-size: 16px; font-weight: 600;
+                                         cursor: pointer; width: 100%; margin: 10px 0;">
+                                🤗 Login with HuggingFace
+                            </button>
+                        </a>
+                        """)
+                        gr.Markdown("""
+                        After login:
+                        1. Go to [Settings → Access Tokens](https://huggingface.co/settings/tokens)
+                        2. Create a new token with **write** access
+                        3. Copy and paste it below
+                        """)
+                    
+                    with gr.Column():
+                        gr.Markdown("""
+                        ### Option 2: Direct Token Input
+                        If you already have a token, enter it here
+                        """)
+                        hf_token_input = gr.Textbox(
+                            label="HuggingFace Token",
+                            type="password",
+                            placeholder="hf_xxxxxxxxxxxxxxxxxxxxx",
+                            info="Your HF token with write access"
+                        )
+                        gr.Markdown("""
+                        **Need a token?**
+                        1. Visit [HuggingFace Tokens](https://huggingface.co/settings/tokens)
+                        2. Click "New token"
+                        3. Give it a name and select "write" role
+                        4. Copy the token here
+                        """)
+            
             with gr.Row():
                 with gr.Column(scale=5):
                     with gr.Group(elem_classes="input-section"):
@@ -1233,25 +1291,40 @@ with gr.Blocks(css=css, theme=gr.themes.Soft(
                             show_copy_button=True
                         )
             
-            # Status indicator
-            if not os.getenv("HF_TOKEN"):
-                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.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>
+            # Token 상태 표시
+            with gr.Row():
+                token_status = gr.HTML("""
+                <div id="token-status" style="background: #fef2f2; border: 1px solid #fecaca; 
+                                              border-radius: 8px; padding: 12px; margin-top: 10px;">
+                    <span style="color: #dc2626; font-weight: 600;">⚠️ Status:</span>
+                    <span style="color: #7f1d1d;"> No token provided. Please login or enter your token above.</span>
                 </div>
                 """)
             
+            # Token 입력시 상태 업데이트
+            def update_token_status(token):
+                if token and token.strip():
+                    return """
+                    <div style="background: #f0fdf4; border: 1px solid #bbf7d0; 
+                               border-radius: 8px; padding: 12px; margin-top: 10px;">
+                        <span style="color: #16a34a; font-weight: 600;">✅ Status:</span>
+                        <span style="color: #14532d;"> Token provided. Ready to deploy!</span>
+                    </div>
+                    """
+                else:
+                    return """
+                    <div style="background: #fef2f2; border: 1px solid #fecaca; 
+                               border-radius: 8px; padding: 12px; margin-top: 10px;">
+                        <span style="color: #dc2626; font-weight: 600;">⚠️ Status:</span>
+                        <span style="color: #7f1d1d;"> No token provided. Please login or enter your token above.</span>
+                    </div>
+                    """
+            
+            hf_token_input.change(update_token_status, inputs=[hf_token_input], outputs=[token_status])
+            
             btn_to_hf.click(
                 fn=clone,
-                inputs=[repo_git, repo_hf, sdk_choices, skip_lfs, enable_smart_generation],
+                inputs=[repo_git, repo_hf, sdk_choices, skip_lfs, enable_smart_generation, hf_token_input],
                 outputs=output_to_hf
             )
         
@@ -1330,16 +1403,61 @@ with gr.Blocks(css=css, theme=gr.themes.Soft(
             </div>
         </div>
         
-        <div style="margin-top: 30px;">
-            <h4 style="color: #334155;">Required Tokens</h4>
+        <div style="margin-top: 30px; background: #f1f5f9; padding: 20px; border-radius: 10px;">
+            <h4 style="color: #334155;">🔐 Authentication Setup</h4>
+            
+            <div style="text-align: left; max-width: 600px; margin: auto;">
+                <h5 style="color: #667eea;">For GitHub → HuggingFace:</h5>
+                <ol style="line-height: 1.8;">
+                    <li>Click "Login with HuggingFace" button above</li>
+                    <li>Authorize the application if prompted</li>
+                    <li>Go to <a href="https://huggingface.co/settings/tokens" target="_blank">Settings → Access Tokens</a></li>
+                    <li>Create a new token with <strong>write</strong> access</li>
+                    <li>Copy and paste the token in the input field</li>
+                </ol>
+                
+                <h5 style="color: #667eea; margin-top: 20px;">For HuggingFace → GitHub:</h5>
+                <ol style="line-height: 1.8;">
+                    <li>Go to <a href="https://github.com/settings/tokens" target="_blank">GitHub Settings → Tokens</a></li>
+                    <li>Generate new token (classic)</li>
+                    <li>Select <code>repo</code> scope</li>
+                    <li>Copy and use in the GitHub export tab</li>
+                </ol>
+            </div>
+        </div>
+        
+        <div style="margin-top: 20px;">
+            <h4 style="color: #334155;">Optional API Keys</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
+                <code style="background: #e2e8f0; padding: 4px 8px; border-radius: 4px;">FIREWORKS_API_KEY</code> - For AI-powered app generation
             </p>
         </div>
     </div>
+    
+    ## README.md Configuration
+    
+    When deploying to HuggingFace Spaces, the following YAML header will be automatically added to your README.md:
+    
+    ```yaml
+    ---
+    title: Your Space Title
+    emoji: 🚀
+    colorFrom: blue
+    colorTo: green
+    sdk: gradio  # or streamlit, docker, static
+    sdk_version: "5.35.0"
+    app_file: app.py
+    pinned: false
+    ---
+    ```
+    
+    This configuration ensures your Space runs correctly on HuggingFace infrastructure.
     """)
 
 if __name__ == "__main__":
+    # OAuth 환경 설정 체크
+    if os.getenv("SPACE_ID"):
+        print("Running on HuggingFace Spaces")
+        print("OAuth callback URL: https://huggingface.co/spaces/" + os.getenv("SPACE_ID"))
+    
     demo.launch()