Update app.py

app.py

@@ -9,8 +9,10 @@ from dotenv import load_dotenv
 load_dotenv()
 
 # API Configuration - Hugging Face Spaces stores secrets in environment variables
-API_KEY = os.getenv('StableCogKey', '')
-
+API_KEY = os.getenv('STABLECOG_API_KEY', '')
+if not API_KEY:
+    # For local testing fallback
+    API_KEY = "StableCogKey"
 
 API_HOST = 'https://api.stablecog.com'
 API_ENDPOINT = '/v1/credits'
@@ -29,14 +31,50 @@ def check_credits():
         if response.status_code == 200:
             res_json = response.json()
             
-            # Extract data
-            total_credits = res_json.get('total_credits', 0)
-            remaining_credits = res_json.get('remaining_credits', 0)
-            used_credits = res_json.get('used_credits', 0)
+            # 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"
+            total_remaining_credits = res_json.get('total_remaining_credits', 0)
+            credits_list = res_json.get('credits', [])
+            
+            # Calculate total initial credits from all credit entries
+            total_initial_credits = 0
+            total_used_credits = 0
+            credit_details = []
+            
+            for credit in credits_list:
+                credit_type = credit.get('type', {})
+                initial_amount = credit_type.get('amount', 0)
+                remaining_amount = credit.get('remaining_amount', 0)
+                credit_name = credit_type.get('name', 'Unknown')
+                
+                total_initial_credits += initial_amount
+                used_credits = initial_amount - remaining_amount
+                total_used_credits += used_credits
+                
+                # Store credit details for display
+                credit_details.append({
+                    'name': credit_name,
+                    'initial': initial_amount,
+                    'remaining': remaining_amount,
+                    'used': used_credits,
+                    'expires': credit.get('expires_at', 'Never'),
+                    'description': credit_type.get('description', '')
+                })
+            
+            # Use total_remaining_credits from API or calculate it
+            if total_remaining_credits == 0 and credits_list:
+                # Calculate total remaining from all credit entries
+                total_remaining_credits = sum(credit.get('remaining_amount', 0) for credit in credits_list)
+            
+            # Calculate total credits (max of initial total or used + remaining)
+            total_credits = max(total_initial_credits, total_remaining_credits + total_used_credits)
             
             # Calculate percentage used
             if total_credits > 0:
-                percentage_used = (used_credits / total_credits * 100)
+                percentage_used = (total_used_credits / total_credits * 100)
             else:
                 percentage_used = 0
             
@@ -46,13 +84,16 @@ def check_credits():
             result = {
                 "success": True,
                 "total_credits": total_credits,
-                "remaining_credits": remaining_credits,
-                "used_credits": used_credits,
+                "total_remaining_credits": total_remaining_credits,
+                "total_used_credits": total_used_credits,
                 "percentage_used": round(percentage_used, 2),
+                "credit_details": credit_details,
+                "total_credit_types": len(credits_list),
                 "timestamp": timestamp,
                 "raw_data": json.dumps(res_json, indent=2)
             }
             
+            print(f"Parsed result: Total={total_credits}, Remaining={total_remaining_credits}, Used={total_used_credits}")
             return result
             
         else:
@@ -102,6 +143,34 @@ def update_display():
             status = "🔴 Low"
             status_color = "#F44336"
         
+        # Build credit details HTML
+        credit_details_html = ""
+        for i, credit in enumerate(result["credit_details"]):
+            if credit['remaining'] > 0 or credit['initial'] > 0:
+                credit_percentage = (credit['used'] / credit['initial'] * 100) if credit['initial'] > 0 else 0
+                credit_details_html += f"""
+                <div style='margin-bottom: 15px; padding: 12px; background: rgba(255,255,255,0.05); border-radius: 8px;'>
+                    <div style='display: flex; justify-content: space-between; margin-bottom: 5px;'>
+                        <span style='font-weight: bold;'>{credit['name']}</span>
+                        <span>{credit['remaining']} / {credit['initial']} ⭐</span>
+                    </div>
+                    <div style='font-size: 12px; opacity: 0.8; margin-bottom: 8px;'>{credit['description']}</div>
+                    <div style='height: 6px; background: rgba(255,255,255,0.1); border-radius: 3px; overflow: hidden;'>
+                        <div style='height: 100%; width: {min(credit_percentage, 100)}%; background: {bar_color}; border-radius: 3px;'></div>
+                    </div>
+                </div>
+                """
+        
+        if credit_details_html:
+            credit_details_section = f"""
+            <div style='margin-top: 20px;'>
+                <h3 style='margin-bottom: 15px; font-size: 18px;'>📊 Credit Breakdown</h3>
+                {credit_details_html}
+            </div>
+            """
+        else:
+            credit_details_section = ""
+        
         html_content = f"""
         <div style='font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; padding: 25px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 15px; color: white; box-shadow: 0 10px 30px rgba(0,0,0,0.2);'>
             <h2 style='text-align: center; margin-bottom: 30px; font-size: 28px; font-weight: 600;'>🎨 StableCog Credit Status</h2>
@@ -114,21 +183,21 @@ def update_display():
                 
                 <div style='display: flex; justify-content: space-between; margin-bottom: 15px; padding-bottom: 10px; border-bottom: 1px solid rgba(255,255,255,0.1);'>
                     <span style='font-size: 16px; opacity: 0.9;'>Remaining Credits:</span>
-                    <span style='font-weight: bold; font-size: 24px; color: #90EE90;'>{result['remaining_credits']} ⭐</span>
+                    <span style='font-weight: bold; font-size: 24px; color: #90EE90;'>{result['total_remaining_credits']} ⭐</span>
                 </div>
                 
                 <div style='display: flex; justify-content: space-between; margin-bottom: 20px;'>
                     <span style='font-size: 16px; opacity: 0.9;'>Used Credits:</span>
-                    <span style='font-weight: bold; font-size: 20px;'>{result['used_credits']} ⭐</span>
+                    <span style='font-weight: bold; font-size: 20px;'>{result['total_used_credits']} ⭐</span>
                 </div>
                 
                 <div style='margin-bottom: 20px;'>
                     <div style='display: flex; justify-content: space-between; margin-bottom: 8px;'>
-                        <span style='font-size: 16px; opacity: 0.9;'>Usage Progress:</span>
+                        <span style='font-size: 16px; opacity: 0.9;'>Overall Usage:</span>
                         <span style='font-weight: bold;'>{result['percentage_used']}%</span>
                     </div>
                     <div style='height: 22px; background: rgba(255,255,255,0.15); border-radius: 11px; overflow: hidden; position: relative;'>
-                        <div style='height: 100%; width: {result['percentage_used']}%; background: {bar_color}; 
+                        <div style='height: 100%; width: {min(result['percentage_used'], 100)}%; background: {bar_color}; 
                                 border-radius: 11px; transition: width 0.5s ease-in-out; box-shadow: 0 0 10px {bar_color}80;'></div>
                         <div style='position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: white; font-size: 12px; font-weight: bold; text-shadow: 0 1px 2px rgba(0,0,0,0.5);'>
                             {result['percentage_used']}%
@@ -142,15 +211,17 @@ def update_display():
                         {status}
                     </span>
                 </div>
+                
+                {credit_details_section}
             </div>
             
             <div style='text-align: center; font-size: 14px; opacity: 0.7; margin-top: 10px;'>
-                ⏰ Last checked: {result['timestamp']}
+                ⏰ Last checked: {result['timestamp']} | 📋 Credit types: {result['total_credit_types']}
             </div>
         </div>
         """
         
-        return html_content, result['raw_data'], result['remaining_credits'], result['percentage_used']
+        return html_content, result['raw_data'], result['total_remaining_credits'], result['percentage_used']
     
     else:
         # Error display
@@ -283,16 +354,16 @@ with gr.Blocks(theme=theme, title="StableCog Credit Monitor", css="footer {displ
              - Key: `STABLECOG_API_KEY`
              - Value: `your_actual_api_key_here`
         
-        2. **API Key Safety:**
-           - Never hardcode your API key in the app
-           - Hugging Face Secrets encrypt your key
-           - The app will only work with a valid key
+        2. **Understanding Your Credits:**
+           - **Total Credits**: Sum of all initial credits received
+           - **Remaining Credits**: Currently available credits (sum of all credit types)
+           - **Used Credits**: Credits spent on image generation
+           - **Credit Types**: Different credit sources (Free, Refund, etc.)
         
-        3. **Understanding Credits:**
-           - **Total Credits**: Lifetime credits purchased
-           - **Remaining Credits**: Currently available for use
-           - **Used Credits**: Credits spent on generations
-           - **Usage %**: Percentage of total credits used
+        3. **Credit Breakdown:**
+           - **Free Credits**: Base credits provided to users
+           - **Refund Credits**: Credits returned for failed generations
+           - Each credit type may have different amounts and expiration
         
         4. **Recommendations are based on:**
            - Remaining credit count