Upload app.py

app.py

@@ -1,6 +1,7 @@
 import gradio as gr
 import os
 import json
+import random
 
 # Directory to store submissions
 DATA_DIR = "submissions"
@@ -9,6 +10,9 @@ os.makedirs(DATA_DIR, exist_ok=True)
 # Predefined task types
 TASK_TYPES = ["Classification", "Regression", "Translation"]
 
+# Colors for task cards
+CARD_COLORS = ["#FFDDC1", "#FFABAB", "#FFC3A0", "#D5AAFF", "#85E3FF", "#B9FBC0"]
+
 # Function to handle task submission
 def submit_task(task_type, description, yaml_text):
     if not yaml_text.strip():
@@ -128,24 +132,34 @@ with gr.Blocks() as app:
                 interactive=True
             )
             view_button = gr.Button("View Tasks")
-            task_table = gr.HTML(label="Submitted Tasks")
+            task_display = gr.HTML(label="Submitted Tasks")
             go_to_submit_tab = gr.Button("Go to Submit Task")
 
-            # Function to filter tasks by type
-            def filter_tasks(task_type):
+            # Function to display tasks as clickable cards
+            def display_tasks(task_type):
                 tasks = get_tasks_by_type(task_type)
-                task_html = "<h3>Submitted Tasks:</h3>"
-                for task in tasks:
-                    task_html += f"<b>Task Type:</b> {task['task_type']}<br>"
-                    task_html += f"<b>Description:</b> {task['description']}<br>"
-                    task_html += f"<b>YAML/Text:</b><pre>{task['yaml']}</pre><hr>"
-                return task_html
-
-            # Handle task filtering
+                html_content = "<div style='display: flex; flex-wrap: wrap; gap: 10px;'>"
+                for idx, task in enumerate(tasks):
+                    color = random.choice(CARD_COLORS)
+                    html_content += f"""
+                    <div style='background-color: {color}; padding: 10px; border-radius: 5px; cursor: pointer;' onclick="document.getElementById('task-details-{idx}').style.display='block';">
+                        <b>{task['description']}</b>
+                    </div>
+                    <div id='task-details-{idx}' style='display: none; margin-top: 10px;'>
+                        <b>Task Type:</b> {task['task_type']}<br>
+                        <b>Description:</b> {task['description']}<br>
+                        <b>YAML/Text:</b><pre>{task['yaml']}</pre>
+                        <hr>
+                    </div>
+                    """
+                html_content += "</div>"
+                return html_content
+
+            # Handle task display
             view_button.click(
-                filter_tasks,
+                display_tasks,
                 inputs=[task_type_filter],
-                outputs=[task_table]
+                outputs=[task_display]
             )
 
             # Button to switch to "Submit Task" tab