Update app.py

app.py

@@ -17,15 +17,15 @@ try:
 except:
     pass
 
-# Available AI models (priority order)
+# Available models on HF Inference API (confirmed working)
 AVAILABLE_MODELS = [
-    "deepseek-ai/DeepSeek-V3.2-Exp",  # DeepSeek V3 - Most powerful
-    "deepseek-ai/DeepSeek-V3.1",
-    "deepseek-ai/deepseek-llm-67b-chat",  # DeepSeek alternative  
-    "Qwen/Qwen2.5-72B-Instruct",  # Qwen backup
+    "Qwen/Qwen2.5-72B-Instruct",           # Qwen 72B - Very good performance
+    "meta-llama/Llama-3.2-3B-Instruct",    # Llama 3B - Fast and reliable
+    "mistralai/Mistral-7B-Instruct-v0.3",  # Mistral 7B - Good balance
+    "microsoft/Phi-3-mini-4k-instruct",    # Phi 3 Mini - Small and fast
 ]
 
-# Initialize HF client
+# Initialize HF Inference client
 def create_client():
     """Create HF Inference Client"""
     # Get token from environment variable
@@ -41,17 +41,21 @@ def create_client():
             "4. Name: HF_TOKEN\n"
             "5. Value: Your token (get from https://huggingface.co/settings/tokens)\n"
             "6. Save and restart Space\n\n"
-            "The token should have READ permission and start with 'hf_'"
+            "Token should have READ permission and start with 'hf_'"
         )
     
-    # Try models in order
+    # Try models in priority order
     for model in AVAILABLE_MODELS:
         try:
-            return InferenceClient(model=model, token=hf_token)
-        except:
+            client = InferenceClient(model=model, token=hf_token)
+            print(f"✅ Successfully connected to model: {model}")
+            return client
+        except Exception as e:
+            print(f"⚠️ Failed to connect to {model}: {e}")
             continue
     
-    # Fallback to first model
+    # Fallback to first model if all failed
+    print(f"⚠️ All models failed, using fallback: {AVAILABLE_MODELS[0]}")
     return InferenceClient(model=AVAILABLE_MODELS[0], token=hf_token)
 
 def generate_machine(user_prompt, temperature=0.7, max_tokens=4096):
@@ -78,7 +82,7 @@ def generate_machine(user_prompt, temperature=0.7, max_tokens=4096):
             {"role": "user", "content": user_prompt}
         ]
         
-        # Try API call
+        # Call HF Inference API
         response = ""
         try:
             for message in client.chat_completion(
@@ -89,18 +93,27 @@ def generate_machine(user_prompt, temperature=0.7, max_tokens=4096):
             ):
                 if message.choices[0].delta.content:
                     response += message.choices[0].delta.content
+                    
         except Exception as api_error:
             error_msg = str(api_error)
-            if "401" in error_msg or "Unauthorized" in error_msg:
+            if "401" in error_msg or "Unauthorized" in error_msg or "authentication" in error_msg.lower():
                 return "", "", (
                     "❌ Authentication Failed!\n\n"
-                    "Please ensure HF_TOKEN is correctly set in Space Settings:\n\n"
-                    "1. Visit https://huggingface.co/settings/tokens\n"
-                    "2. Create a new token (Read permission)\n"
-                    "3. Add in Space Settings → Repository secrets:\n"
+                    "Please set your HF Token in Space Settings:\n\n"
+                    "1. Get token from https://huggingface.co/settings/tokens\n"
+                    "2. Go to Space Settings → Repository secrets\n"
+                    "3. Add secret:\n"
                     "   - Name: HF_TOKEN\n"
-                    "   - Value: your token\n"
+                    "   - Value: your token (starts with 'hf_')\n"
                     "4. Restart Space\n\n"
+                    "💡 Token is FREE and only needs READ permission!\n\n"
+                    f"Error details: {error_msg}"
+                )
+            elif "404" in error_msg:
+                return "", "", (
+                    "❌ Model Not Found!\n\n"
+                    "The current model is not available on Inference API.\n"
+                    "Trying backup models automatically...\n\n"
                     f"Error details: {error_msg}"
                 )
             raise
@@ -147,44 +160,36 @@ def save_xml_to_file(xml_content):
         f.write(xml_content)
     return output_path
 
-# Custom CSS matching index.html
+# Custom CSS matching index.html style
 custom_css = """
-* {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
-}
-
+/* Global Styles */
 .gradio-container {
     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
-    min-height: 100vh;
 }
 
-.main {
+/* Remove default padding/margin for better control */
+.contain {
     max-width: 1200px !important;
-    margin: 20px auto !important;
-    background: white !important;
-    border-radius: 20px !important;
-    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3) !important;
-    overflow: hidden !important;
+    margin: 0 auto !important;
 }
 
-.header {
+/* Header styles matching index.html */
+.header-box {
     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
     color: white;
     padding: 30px;
     text-align: center;
-    border-radius: 20px 20px 0 0;
+    border-radius: 10px;
     margin-bottom: 20px;
 }
 
-.header h1 {
+.header-box h1 {
     font-size: 2.5em;
     margin-bottom: 10px;
+    font-weight: 600;
 }
 
-.header p {
+.header-box p {
     font-size: 1.1em;
     opacity: 0.9;
 }
@@ -198,6 +203,7 @@ custom_css = """
     margin-top: 10px;
 }
 
+/* Info box styles */
 .info-box {
     background: #e7f3ff;
     border-left: 4px solid #2196F3;
@@ -209,27 +215,27 @@ custom_css = """
 .info-box h4 {
     margin-bottom: 10px;
     color: #1976D2;
+    font-weight: 600;
 }
 
 .info-box ul {
     margin-left: 20px;
     line-height: 1.8;
+    color: #333;
 }
 
-textarea, input {
-    width: 100% !important;
-    padding: 12px 15px !important;
+/* Input styles */
+.gr-textbox, .gr-text-input {
     border: 2px solid #e0e0e0 !important;
     border-radius: 8px !important;
     font-size: 16px !important;
-    transition: border-color 0.3s !important;
 }
 
-textarea:focus, input:focus {
-    outline: none !important;
+.gr-textbox:focus, .gr-text-input:focus {
     border-color: #667eea !important;
 }
 
+/* Button styles matching index.html */
 .gr-button {
     padding: 15px 30px !important;
     font-size: 16px !important;
@@ -240,6 +246,7 @@ textarea:focus, input:focus {
     transition: all 0.3s !important;
     text-transform: uppercase !important;
     letter-spacing: 0.5px !important;
+    min-width: 150px !important;
 }
 
 .gr-button-primary {
@@ -262,15 +269,35 @@ textarea:focus, input:focus {
     transform: translateY(-2px) !important;
 }
 
-.output-section {
-    background: #f8f9fa;
-    border: 2px solid #e0e0e0;
-    border-radius: 8px;
-    padding: 20px;
-    margin-top: 15px;
+/* Tab styles */
+.tabs {
+    border-bottom: 2px solid #e0e0e0 !important;
+    margin-bottom: 20px !important;
+}
+
+button[role="tab"] {
+    padding: 12px 24px !important;
+    font-size: 16px !important;
+    font-weight: 500 !important;
+    color: #666 !important;
+    border: none !important;
+    background: transparent !important;
+    cursor: pointer !important;
+    transition: all 0.3s !important;
+    border-bottom: 3px solid transparent !important;
 }
 
-.footer {
+button[role="tab"][aria-selected="true"] {
+    color: #667eea !important;
+    border-bottom-color: #667eea !important;
+}
+
+button[role="tab"]:hover {
+    color: #667eea !important;
+}
+
+/* Footer styles */
+.footer-box {
     text-align: center;
     margin-top: 30px;
     padding: 20px;
@@ -278,27 +305,71 @@ textarea:focus, input:focus {
     border-radius: 10px;
 }
 
-.footer p {
+.footer-box p {
     color: #666;
     margin: 5px 0;
+    font-size: 0.95em;
 }
 
-.tabs {
-    border-bottom: 2px solid #e0e0e0 !important;
+.footer-box a {
+    color: #667eea;
+    text-decoration: none;
 }
 
-.tab {
-    padding: 12px 24px !important;
-    font-size: 16px !important;
+.footer-box a:hover {
+    text-decoration: underline;
+}
+
+/* Accordion styles */
+.gr-accordion {
+    border: 2px solid #e0e0e0 !important;
+    border-radius: 8px !important;
+    margin-top: 15px !important;
+}
+
+/* Output text area styles */
+.gr-text-input textarea {
+    font-family: 'Consolas', 'Monaco', monospace !important;
+    font-size: 14px !important;
+    line-height: 1.6 !important;
+}
+
+/* Markdown output styles */
+.gr-markdown {
+    padding: 15px !important;
+    background: #f8f9fa !important;
+    border-radius: 8px !important;
+    border: 1px solid #e0e0e0 !important;
+}
+
+/* Label styles */
+label {
     font-weight: 500 !important;
-    color: #666 !important;
-    border-bottom: 3px solid transparent !important;
-    transition: all 0.3s !important;
+    color: #555 !important;
+    margin-bottom: 8px !important;
 }
 
-.tab-active {
-    color: #667eea !important;
-    border-bottom-color: #667eea !important;
+/* Examples section */
+.gr-examples {
+    margin-top: 15px !important;
+}
+
+/* Make sure content doesn't overflow */
+.gr-row, .gr-column {
+    width: 100% !important;
+}
+
+/* Adjust spacing */
+.gr-box {
+    padding: 20px !important;
+}
+
+/* File component styles */
+.gr-file {
+    margin-top: 15px !important;
+    padding: 15px !important;
+    border: 2px dashed #e0e0e0 !important;
+    border-radius: 8px !important;
 }
 """
 
@@ -307,7 +378,7 @@ with gr.Blocks(css=custom_css, theme=gr.themes.Soft(), title="🎮 Besiege Machi
     
     # Header
     gr.HTML("""
-        <div class="header">
+        <div class="header-box">
             <h1>🎮 Besiege Machine Generator</h1>
             <p>Generate your Besiege machine designs with AI</p>
             <span class="badge">✨ Powered by DeepSeek AI</span>
@@ -445,15 +516,15 @@ with gr.Blocks(css=custom_css, theme=gr.themes.Soft(), title="🎮 Besiege Machi
     
     # Footer
     gr.HTML(f"""
-        <div class="footer">
+        <div class="footer-box">
             <p>
-                🤖 Using <a href="https://huggingface.co/{AVAILABLE_MODELS[0]}" target="_blank">{AVAILABLE_MODELS[0]}</a> model
+                🤖 Using <a href="https://huggingface.co/{AVAILABLE_MODELS[0]}" target="_blank">{AVAILABLE_MODELS[0]}</a> (HF Inference API)
             </p>
             <p>
                 ⚠️ Note: Generated machines may require adjustments in-game
             </p>
-            <p style="color: #999; font-size: 0.9em;">
-                💡 AI generation requires HF Token - Free to use
+            <p style="color: #999;">
+                💡 Free to use with HF Token | 🔑 Get token: <a href="https://huggingface.co/settings/tokens" target="_blank">huggingface.co/settings/tokens</a>
             </p>
         </div>
     """)