Refactor app.py for improved readability and maintainability

app.py

@@ -2,19 +2,29 @@ import gradio as gr
 import markdown
 import requests
 
+example_dpo_datasets = [
+    "mlabonne/orpo-dpo-mix-40k",
+    "argilla/ultrafeedback-binarized-preferences-cleaned",
+    "argilla/Capybara-Preferences",
+]
+general_examples = ["davanstrien/cosmochat", "HuggingFaceH4/no_robots"]
+
+datasets_examples = example_dpo_datasets + general_examples
+
 
 def create_chat_html(messages, dataset_id, offset, compare_mode=False, column=""):
     chat_html = ""
-    turn_number = 1
-    for i in range(0, len(messages), 2):
+    for turn_number, i in enumerate(range(0, len(messages), 2), start=1):
         user_message = messages[i]
         system_message = messages[i + 1] if i + 1 < len(messages) else None
         user_role = user_message["role"]
         user_content = user_message["content"]
         user_content_html = markdown.markdown(user_content)
         user_content_length = len(user_content)
-        user_html = '<div class="user-message" style="justify-content: right;">'
-        user_html += '<div class="message-content">'
+        user_html = (
+            '<div class="user-message" style="justify-content: right;">'
+            + '<div class="message-content">'
+        )
         user_html += (
             f"<strong>Turn {turn_number} - {user_role.capitalize()}:</strong><br>"
         )
@@ -27,8 +37,10 @@ def create_chat_html(messages, dataset_id, offset, compare_mode=False, column=""
             system_content = system_message["content"]
             system_content_html = markdown.markdown(system_content)
             system_content_length = len(system_content)
-            system_html = '<div class="system-message" style="justify-content: left;">'
-            system_html += '<div class="message-content">'
+            system_html = (
+                '<div class="system-message" style="justify-content: left;">'
+                + '<div class="message-content">'
+            )
             system_html += f"<strong>{system_role.capitalize()}:</strong><br>"
             system_html += (
                 f"<em>Length: {system_content_length} characters</em><br><br>"
@@ -36,8 +48,6 @@ def create_chat_html(messages, dataset_id, offset, compare_mode=False, column=""
             system_html += f"{system_content_html}"
             system_html += "</div></div>"
             chat_html += system_html
-        turn_number += 1
-
     if compare_mode:
         chat_html = f'<div class="column {column}">{chat_html}</div>'
 
@@ -138,10 +148,7 @@ def fetch_data(
 
 
 def update_column_names(compare_mode):
-    if compare_mode:
-        return "chosen", "rejected"
-    else:
-        return "", ""
+    return ("chosen", "rejected") if compare_mode else ("", "")
 
 
 with gr.Blocks() as demo:
@@ -156,8 +163,10 @@ with gr.Blocks() as demo:
         "This app allows you to view chat data from a Hugging Face dataset via the datasets viewer API. ChatML formatted data consists of messages formatted as lists of dictionaries, where each dictionary represents a message with a 'role' (e.g., 'user' or 'assistant') and 'content'. This is a very basic demo built in less than 30 minutes but it hopefully gives you an idea of the kinds of things you can build with the datasets viewer. You can get started building your own apps by going to the datasets viewer documentation [here](https://huggingface.co/docs/datasets-server/index)."
     )
     with gr.Row():
-        dataset_id = gr.Textbox(
-            label="Dataset ID", placeholder="e.g., davanstrien/cosmochat"
+        dataset_id = gr.Dropdown(
+            datasets_examples,
+            label="Dataset ID",
+            allow_custom_value=True,
         )
         chosen_column = gr.Textbox(
             label="Chosen Column",
@@ -211,4 +220,4 @@ with gr.Blocks() as demo:
         outputs=[dataset_link, output_html, current_offset],
     )
 
-demo.launch(debug=True, share=True)
+demo.launch(debug=True)