Update app.py

app.py

@@ -1,6 +1,8 @@
 import os
 import requests
 import gradio as gr
+import pandas as pd
+from datetime import datetime
 
 # Hugging Face API URL
 HF_API_URL = "https://huggingface.co/api/spaces"
@@ -8,7 +10,27 @@ HF_API_URL = "https://huggingface.co/api/spaces"
 # Hugging Face Token
 HF_TOKEN = os.getenv("HF_TOKEN")
 
-# Function to get all Spaces
+def format_timestamp(timestamp):
+    if timestamp:
+        dt = datetime.fromisoformat(timestamp.replace('Z', '+00:00'))
+        return dt.strftime('%Y-%m-%d %H:%M')
+    return 'N/A'
+
+def get_space_card(space):
+    return f"""
+    <div style='border: 1px solid #ddd; padding: 15px; margin: 10px; border-radius: 8px; 
+                background-color: white; box-shadow: 2px 2px 5px rgba(0,0,0,0.1);'>
+        <h3 style='color: #2d2d2d; margin: 0 0 10px 0;'>{space.get('name', 'N/A')}</h3>
+        <p style='margin: 5px 0;'><strong>Author:</strong> {space.get('author', 'N/A')}</p>
+        <p style='margin: 5px 0;'><strong>SDK:</strong> {space.get('sdk', 'N/A')}</p>
+        <p style='margin: 5px 0;'><strong>Status:</strong> 
+           <span style='color: {"green" if space.get("status") == "running" else "red"}'>
+           {space.get('status', 'N/A')}</span></p>
+        <p style='margin: 5px 0;'><strong>Created:</strong> {format_timestamp(space.get('createdAt'))}</p>
+        <p style='margin: 5px 0;'><strong>Updated:</strong> {format_timestamp(space.get('updatedAt'))}</p>
+    </div>
+    """
+
 def get_all_spaces():
     if not HF_TOKEN:
         return "Error: Hugging Face token not found."
@@ -24,15 +46,36 @@ def get_all_spaces():
     if not spaces:
         return "No Spaces found."
 
-    # Formatting Spaces into a grid, handling missing keys with .get()
-    space_info = [
-        f"Name: {space.get('name', 'N/A')}\nSDK: {space.get('sdk', 'N/A')}\nStatus: {space.get('status', 'N/A')}"
-        for space in spaces
-    ]
-    return "\n\n".join(space_info)
+    # Create HTML grid layout
+    html_content = f"""
+    <div style='
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+        gap: 20px;
+        padding: 20px;
+        background-color: #f5f5f5;
+    '>
+    {"".join(get_space_card(space) for space in spaces)}
+    </div>
+    """
+
+    return html_content
 
 # Creating the Gradio interface
-app = gr.Interface(fn=get_all_spaces, inputs=None, outputs="text")
+app = gr.Interface(
+    fn=get_all_spaces,
+    inputs=None,
+    outputs=gr.HTML(),
+    title="Hugging Face Spaces Dashboard",
+    description="Displays all available Spaces in a grid layout",
+    theme=gr.themes.Soft(),
+    css="""
+    .gradio-container {
+        max-width: 100% !important;
+    }
+    """
+)
 
 # Launch the Gradio app
-app.launch()
+if __name__ == "__main__":
+    app.launch()