Upload app.py

app.py

@@ -64,6 +64,63 @@ def add_new_task_type(new_type):
 def switch_tab(tab_name):
     return gr.Tabs.update(visible_tab=tab_name)
 
+# Function to display tasks as clickable cards with modal popups
+def display_tasks(task_type):
+    tasks = get_tasks_by_type(task_type)
+    html_content = """
+    <style>
+        .modal {{
+            display: none;
+            position: fixed;
+            z-index: 1;
+            left: 0;
+            top: 0;
+            width: 100%;
+            height: 100%;
+            overflow: auto;
+            background-color: rgba(0,0,0,0.4);
+        }}
+        .modal-content {{
+            background-color: #fefefe;
+            margin: 15% auto;
+            padding: 20px;
+            border: 1px solid #888;
+            width: 80%;
+            border-radius: 10px;
+        }}
+        .close {{
+            color: #aaa;
+            float: right;
+            font-size: 28px;
+            font-weight: bold;
+        }}
+        .close:hover,
+        .close:focus {{
+            color: black;
+            text-decoration: none;
+            cursor: pointer;
+        }}
+    </style>
+    """
+    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('modal-{idx}').style.display='block';">
+            <b>{task['description']}</b>
+        </div>
+        <div id='modal-{idx}' class='modal'>
+            <div class='modal-content'>
+                <span class='close' onclick="document.getElementById('modal-{idx}').style.display='none';">&times;</span>
+                <b>Task Type:</b> {task['task_type']}<br>
+                <b>Description:</b> {task['description']}<br>
+                <b>YAML/Text:</b><pre>{task['yaml']}</pre>
+            </div>
+        </div>
+        """
+    html_content += "</div>"
+    return html_content
+
 # Gradio App
 with gr.Blocks() as app:
     gr.Markdown("# Task Configuration Sharing Space")
@@ -135,26 +192,6 @@ with gr.Blocks() as app:
             task_display = gr.HTML(label="Submitted Tasks")
             go_to_submit_tab = gr.Button("Go to Submit Task")
 
-            # Function to display tasks as clickable cards
-            def display_tasks(task_type):
-                tasks = get_tasks_by_type(task_type)
-                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(
                 display_tasks,
@@ -169,4 +206,4 @@ with gr.Blocks() as app:
                 outputs=[tabs]
             )
 
-app.launch()
+app.launch()