Update app.py

app.py

@@ -34,8 +34,7 @@ def check_credits():
             # Debug: Print raw response to see structure
             print(f"Raw API Response: {json.dumps(res_json, indent=2)}")
             
-            # NEW: Parse the actual response structure
-            # The response has "credits" array and "total_remaining_credits"
+            # Parse the actual response structure
             total_remaining_credits = res_json.get('total_remaining_credits', 0)
             credits_list = res_json.get('credits', [])
             
@@ -264,19 +263,23 @@ def get_recommendation(remaining_credits, percentage_used):
     else:
         return "🚀 **Plenty of credits!** Ready for extensive image generation work and experimentation."
 
-# Create Gradio interface with custom theme
+# Create Gradio interface with Gradio 5 theme
 theme = gr.themes.Soft(
     primary_hue="purple",
     secondary_hue="indigo",
     font=[gr.themes.GoogleFont("Inter"), "ui-sans-serif", "system-ui", "sans-serif"]
-).set(
-    button_primary_background_fill="linear-gradient(135deg, #667eea 0%, #764ba2 100%)",
-    button_primary_background_fill_hover="linear-gradient(135deg, #764ba2 0%, #667eea 100%)",
-    button_primary_text_color="white",
-    button_primary_border_color="rgba(255,255,255,0.2)",
 )
 
-with gr.Blocks(theme=theme, title="StableCog Credit Monitor", css="footer {display: none !important;}") as demo:
+with gr.Blocks(
+    theme=theme, 
+    title="StableCog Credit Monitor",
+    css="""
+    footer {display: none !important;}
+    .gradio-container {max-width: 1200px !important;}
+    .stat-box input {font-weight: bold !important; font-size: 18px !important;}
+    .recommendation-box textarea {font-size: 16px !important; line-height: 1.5 !important;}
+    """
+) as demo:
     gr.Markdown("""
     # 🎯 StableCog Credit Dashboard
     
@@ -324,12 +327,27 @@ with gr.Blocks(theme=theme, title="StableCog Credit Monitor", css="footer {displ
         check_btn = gr.Button(
             "🔄 Check Credits Now", 
             variant="primary", 
+            scale=1,
+            size="lg"
+        )
+        gr.Button(
+            "📖 View Documentation",
+            variant="secondary",
+            scale=0,
             size="lg",
-            elem_classes="refresh-btn"
+            link="https://stablecog.com/docs/api"
         )
     
     # Auto-check on load
-    demo.load(fn=update_display, inputs=None, outputs=[html_output, raw_output, credits_display, usage_display])
+    demo.load(
+        fn=update_display, 
+        inputs=None, 
+        outputs=[html_output, raw_output, credits_display, usage_display]
+    ).then(
+        fn=get_recommendation,
+        inputs=[credits_display, usage_display],
+        outputs=recommendation_box
+    )
     
     # Connect button and update recommendation
     def update_all():
@@ -377,10 +395,11 @@ with gr.Blocks(theme=theme, title="StableCog Credit Monitor", css="footer {displ
     """)
 
 if __name__ == "__main__":
-    # For Hugging Face Spaces
+    # For Hugging Face Spaces - Gradio 5 syntax
     demo.launch(
         server_name="0.0.0.0",
         server_port=7860,
         share=False,
-        show_error=True
+        show_error=True,
+        debug=False
     )