Introduce tabs <-> URL relation for easier sharing

app.py

@@ -1820,30 +1820,89 @@ data = {
         ]
     }
 }
+
 dataframes = []
+tabs = []
+
+# The following JavaScript function updates the URL parameters based on the selected task and language
+# Additionally, `update_url_task` and `update_url_language` are used to update the current task and language
+# The current task and language are stored in the `current_task_language` and `language_per_task` JSON objects
+# This is all a bit hacky, but it might be the only way to pass options to a JavaScript function via Gradio
+set_window_url_params = """
+function(goalUrlObject) {
+    const params = new URLSearchParams(window.location.search);
+    for (const [key, value] of Object.entries(goalUrlObject)) {
+        params.set(key, value);
+    };
+    const queryString = '?' + params.toString();
+    console.log(queryString);
+    window.history.replaceState({}, '', queryString);
+    return [];
+}
+"""
+
+def update_url_task(event: gr.SelectData, current_task_language: dict, language_per_task: dict):
+    current_task_language["task"] = event.target.id
+    # Either use the cached language for this task or the 1st language
+    current_task_language["language"] = language_per_task.get(event.target.id, event.target.children[0].children[0].id)
+    return current_task_language, language_per_task
+
+def update_url_language(event: gr.SelectData, current_task_language: dict, language_per_task: dict):
+    current_task_language["language"] = event.target.id
+    if "task" not in current_task_language:
+        current_task_language["task"] = "overall"
+    language_per_task[current_task_language["task"]] = event.target.id
+    return current_task_language, language_per_task
 
 with gr.Blocks(css=css) as block:
-    with gr.Tabs():
+
+    # Store the current task and language for updating the URL. This is a bit hacky, but it works
+    # for passing the current task and language to the JavaScript function via Gradio
+    current_task_language = gr.JSON(value=dict(), visible=False)
+    language_per_task = gr.JSON(value=dict(), visible=False)
+
+    with gr.Tabs() as outer_tabs:
+        # Store the tabs for updating them on load based on URL parameters
+        tabs.append(outer_tabs)
+
         for task, task_values in data.items():
             metric = task_values["metric"]
-            with gr.Tab(task):
-                for item in task_values["data"]:
-                    with gr.Tab(item["language"]):
-                        with gr.Row():
-                            gr.Markdown(f"""
-                            {item['description']}
-
-                            - **Metric:** {metric}
-                            - **Languages:** {item['language_long'] if 'language_long' in item else item['language']}
-                            {"- **Credits:** " + item['credits'] if "credits" in item else ''}
-                            """)
-                        with gr.Row():
-                            datatype = ["number", "markdown"] + ["number"] * len(item["data"])
-                            dataframe = gr.Dataframe(item["data"], datatype=datatype, type="pandas", height=600)
-                            dataframes.append(dataframe)
-                        with gr.Row():
-                            refresh_button = gr.Button("Refresh")
-                            refresh_button.click(item["refresh"], inputs=None, outputs=dataframe)
+            task_tab_id = task.lower().replace(" ", "-")
+
+            # Overall, Bitext Mining, Classification, etc.
+            with gr.Tab(task, id=task_tab_id) as task_tab:
+                # For updating the 'task' in the URL
+                task_tab.select(update_url_task, [current_task_language, language_per_task], [current_task_language, language_per_task]).then(None, [current_task_language], [], js=set_window_url_params)
+
+                with gr.Tabs() as task_tabs:
+                    # Store the task tabs for updating them on load based on URL parameters
+                    tabs.append(task_tabs)
+
+                    for item in task_values["data"]:
+                        item_tab_id = item["language"].lower().replace(" ", "-")
+
+                        # English, Chinese, French, etc.
+                        with gr.Tab(item["language"], id=item_tab_id) as item_tab:
+                            # For updating the 'language' in the URL
+                            item_tab.select(update_url_language, [current_task_language, language_per_task], [current_task_language, language_per_task], trigger_mode="always_last").then(None, [current_task_language], [], js=set_window_url_params)
+
+                            with gr.Row():
+                                gr.Markdown(f"""
+                                {item['description']}
+
+                                - **Metric:** {metric}
+                                - **Languages:** {item['language_long'] if 'language_long' in item else item['language']}
+                                {"- **Credits:** " + item['credits'] if "credits" in item else ''}
+                                """)
+
+                            with gr.Row():
+                                datatype = ["number", "markdown"] + ["number"] * len(item["data"])
+                                dataframe = gr.Dataframe(item["data"], datatype=datatype, type="pandas", height=600)
+                                dataframes.append(dataframe)
+
+                            with gr.Row():
+                                refresh_button = gr.Button("Refresh")
+                                refresh_button.click(item["refresh"], inputs=None, outputs=dataframe)
 
     gr.Markdown(f"""
     - **Total Datasets**: {NUM_DATASETS}
@@ -1866,6 +1925,27 @@ with gr.Blocks(css=css) as block:
     ```
     """)
 
+    def set_tabs_on_load(request: gr.Request):
+        """Set the selected tab based on the URL parameters on load."""
+        global tabs
+        valid_task_keys = [child.id for child in tabs[0].children]
+        return_tabs = [gr.Tabs()] * len(tabs)
+
+        query_params = request.request.query_params
+        task_key = query_params.get("task", "overall")
+        if task_key not in valid_task_keys:
+            task_key = "overall"
+        return_tabs[0] = gr.Tabs(selected=task_key)
+
+        tabs_idx = valid_task_keys.index(task_key) + 1
+        language_key = query_params.get("language", "english")
+        return_tabs[tabs_idx] = gr.Tabs(selected=language_key)
+        current_task_language = {"task": task_key, "language": language_key}
+        language_per_task = {task_key: language_key}
+        return return_tabs + [current_task_language, language_per_task]
+
+    block.load(set_tabs_on_load, inputs=[], outputs=tabs + [current_task_language, language_per_task])
+
 block.queue(max_size=10)
 block.launch()