app example

app.py

@@ -0,0 +1,204 @@
+import gradio as gr
+import requests
+import markdown
+
+
+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):
+        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 = f'<div class="user-message" style="justify-content: right;">'
+        user_html += f'<div class="message-content">'
+        user_html += (
+            f"<strong>Turn {turn_number} - {user_role.capitalize()}:</strong><br>"
+        )
+        user_html += f"<em>Length: {user_content_length} characters</em><br><br>"
+        user_html += f"{user_content_html}"
+        user_html += "</div></div>"
+        chat_html += user_html
+        if system_message:
+            system_role = system_message["role"]
+            system_content = system_message["content"]
+            system_content_html = markdown.markdown(system_content)
+            system_content_length = len(system_content)
+            system_html = f'<div class="system-message" style="justify-content: left;">'
+            system_html += f'<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>"
+            )
+            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>'
+
+    style = """
+    <style>
+        .user-message, .system-message {
+            display: flex;
+            margin: 10px;
+        }
+        .user-message .message-content {
+            background-color: #c2e3f7;
+            color: #000000;
+        }
+        .system-message .message-content {
+            background-color: #f5f5f5;
+            color: #000000;
+        }
+        .message-content {
+            padding: 10px;
+            border-radius: 10px;
+            max-width: 70%;
+            word-wrap: break-word;
+        }
+        .container {
+            display: flex;
+            justify-content: space-between;
+        }
+        .column {
+            width: 48%;
+        }
+    </style>
+    """
+
+    dataset_url = f"https://huggingface.co/datasets/{dataset_id}/viewer/default/train?row={offset}"
+    dataset_link = f"[View dataset row]({dataset_url})"
+
+    return dataset_link, style + chat_html
+
+
+def fetch_data(
+    dataset_id, chosen_column, rejected_column, current_offset, direction, compare_mode
+):
+    change = 1 if direction == "Next" else -1
+    new_offset = max(0, current_offset + change)
+
+    base_url = f"https://datasets-server.huggingface.co/rows?dataset={dataset_id}&config=default&split=train&offset={new_offset}&length=1"
+    response = requests.get(base_url)
+    if response.status_code != 200:
+        return "", "Failed to fetch data", new_offset
+    data = response.json()
+
+    if compare_mode:
+        if chosen_column and rejected_column:
+            chosen_messages = data["rows"][0]["row"].get(chosen_column, [])
+            rejected_messages = data["rows"][0]["row"].get(rejected_column, [])
+            chosen_link, chosen_html = create_chat_html(
+                chosen_messages,
+                dataset_id,
+                new_offset,
+                compare_mode=True,
+                column="chosen",
+            )
+            rejected_link, rejected_html = create_chat_html(
+                rejected_messages,
+                dataset_id,
+                new_offset,
+                compare_mode=True,
+                column="rejected",
+            )
+            chat_html = f'<div class="container">{chosen_html}{rejected_html}</div>'
+        else:
+            return (
+                "",
+                "Please provide both chosen and rejected columns for comparison",
+                new_offset,
+            )
+    else:
+        if chosen_column:
+            messages = data["rows"][0]["row"].get(chosen_column, [])
+        else:
+            for key, value in data["rows"][0]["row"].items():
+                if (
+                    isinstance(value, list)
+                    and len(value) > 0
+                    and isinstance(value[0], dict)
+                    and "role" in value[0]
+                ):
+                    messages = value
+                    break
+            else:
+                return "", "No suitable chat column found", new_offset
+        _, chat_html = create_chat_html(messages, dataset_id, new_offset)
+
+    dataset_url = f"https://huggingface.co/datasets/{dataset_id}/viewer/default/train?row={new_offset}"
+    dataset_link = f"[View dataset row]({dataset_url})"
+
+    return dataset_link, chat_html, new_offset
+
+
+def update_column_names(compare_mode):
+    if compare_mode:
+        return "chosen", "rejected"
+    else:
+        return "", ""
+
+
+with gr.Blocks() as demo:
+    with gr.Row():
+        dataset_id = gr.Textbox(
+            label="Dataset ID", placeholder="e.g., davanstrien/cosmochat"
+        )
+        chosen_column = gr.Textbox(
+            label="Chosen Column",
+            placeholder="Column containing chosen chat data",
+        )
+        rejected_column = gr.Textbox(
+            label="Rejected Column",
+            placeholder="Column containing rejected chat data",
+        )
+        compare_mode = gr.Checkbox(label="Compare chosen and rejected chats")
+        current_offset = gr.State(value=0)
+
+    with gr.Row():
+        back_button = gr.Button("Back")
+        next_button = gr.Button("Next")
+
+    dataset_link = gr.Markdown()
+    output_html = gr.HTML()
+
+    compare_mode.change(
+        fn=update_column_names,
+        inputs=compare_mode,
+        outputs=[chosen_column, rejected_column],
+    )
+
+    back_button.click(
+        lambda data, chosen, rejected, offset, compare: fetch_data(
+            data, chosen, rejected, offset, "Back", compare
+        ),
+        inputs=[
+            dataset_id,
+            chosen_column,
+            rejected_column,
+            current_offset,
+            compare_mode,
+        ],
+        outputs=[dataset_link, output_html, current_offset],
+    )
+
+    next_button.click(
+        lambda data, chosen, rejected, offset, compare: fetch_data(
+            data, chosen, rejected, offset, "Next", compare
+        ),
+        inputs=[
+            dataset_id,
+            chosen_column,
+            rejected_column,
+            current_offset,
+            compare_mode,
+        ],
+        outputs=[dataset_link, output_html, current_offset],
+    )
+
+demo.launch(debug=True, share=True)

requirements.in

@@ -0,0 +1,2 @@
+gradio
+markdown

requirements.txt

@@ -0,0 +1,223 @@
+# This file was autogenerated by uv via the following command:
+#    uv pip compile requirements.in -o requirements.txt
+aiofiles==23.2.1
+    # via gradio
+altair==5.3.0
+    # via gradio
+annotated-types==0.6.0
+    # via pydantic
+anyio==4.3.0
+    # via
+    #   httpx
+    #   starlette
+    #   watchfiles
+attrs==23.2.0
+    # via
+    #   jsonschema
+    #   referencing
+certifi==2024.2.2
+    # via
+    #   httpcore
+    #   httpx
+    #   requests
+charset-normalizer==3.3.2
+    # via requests
+click==8.1.7
+    # via
+    #   typer
+    #   uvicorn
+contourpy==1.2.1
+    # via matplotlib
+cycler==0.12.1
+    # via matplotlib
+dnspython==2.6.1
+    # via email-validator
+email-validator==2.1.1
+    # via fastapi
+fastapi==0.111.0
+    # via
+    #   fastapi-cli
+    #   gradio
+fastapi-cli==0.0.3
+    # via fastapi
+ffmpy==0.3.2
+    # via gradio
+filelock==3.14.0
+    # via huggingface-hub
+fonttools==4.51.0
+    # via matplotlib
+fsspec==2024.3.1
+    # via
+    #   gradio-client
+    #   huggingface-hub
+gradio==4.29.0
+gradio-client==0.16.1
+    # via gradio
+h11==0.14.0
+    # via
+    #   httpcore
+    #   uvicorn
+httpcore==1.0.5
+    # via httpx
+httptools==0.6.1
+    # via uvicorn
+httpx==0.27.0
+    # via
+    #   fastapi
+    #   gradio
+    #   gradio-client
+huggingface-hub==0.23.0
+    # via
+    #   gradio
+    #   gradio-client
+idna==3.7
+    # via
+    #   anyio
+    #   email-validator
+    #   httpx
+    #   requests
+importlib-resources==6.4.0
+    # via gradio
+jinja2==3.1.4
+    # via
+    #   altair
+    #   fastapi
+    #   gradio
+jsonschema==4.22.0
+    # via altair
+jsonschema-specifications==2023.12.1
+    # via jsonschema
+kiwisolver==1.4.5
+    # via matplotlib
+markdown==3.6
+markdown-it-py==3.0.0
+    # via rich
+markupsafe==2.1.5
+    # via
+    #   gradio
+    #   jinja2
+matplotlib==3.8.4
+    # via gradio
+mdurl==0.1.2
+    # via markdown-it-py
+numpy==1.26.4
+    # via
+    #   altair
+    #   contourpy
+    #   gradio
+    #   matplotlib
+    #   pandas
+orjson==3.10.3
+    # via
+    #   fastapi
+    #   gradio
+packaging==24.0
+    # via
+    #   altair
+    #   gradio
+    #   gradio-client
+    #   huggingface-hub
+    #   matplotlib
+pandas==2.2.2
+    # via
+    #   altair
+    #   gradio
+pillow==10.3.0
+    # via
+    #   gradio
+    #   matplotlib
+pydantic==2.7.1
+    # via
+    #   fastapi
+    #   gradio
+pydantic-core==2.18.2
+    # via pydantic
+pydub==0.25.1
+    # via gradio
+pygments==2.18.0
+    # via rich
+pyparsing==3.1.2
+    # via matplotlib
+python-dateutil==2.9.0.post0
+    # via
+    #   matplotlib
+    #   pandas
+python-dotenv==1.0.1
+    # via uvicorn
+python-multipart==0.0.9
+    # via
+    #   fastapi
+    #   gradio
+pytz==2024.1
+    # via pandas
+pyyaml==6.0.1
+    # via
+    #   gradio
+    #   huggingface-hub
+    #   uvicorn
+referencing==0.35.1
+    # via
+    #   jsonschema
+    #   jsonschema-specifications
+requests==2.31.0
+    # via huggingface-hub
+rich==13.7.1
+    # via typer
+rpds-py==0.18.1
+    # via
+    #   jsonschema
+    #   referencing
+ruff==0.4.3
+    # via gradio
+semantic-version==2.10.0
+    # via gradio
+shellingham==1.5.4
+    # via typer
+six==1.16.0
+    # via python-dateutil
+sniffio==1.3.1
+    # via
+    #   anyio
+    #   httpx
+starlette==0.37.2
+    # via fastapi
+tomlkit==0.12.0
+    # via gradio
+toolz==0.12.1
+    # via altair
+tqdm==4.66.4
+    # via huggingface-hub
+typer==0.12.3
+    # via
+    #   fastapi-cli
+    #   gradio
+typing-extensions==4.11.0
+    # via
+    #   fastapi
+    #   gradio
+    #   gradio-client
+    #   huggingface-hub
+    #   pydantic
+    #   pydantic-core
+    #   typer
+tzdata==2024.1
+    # via pandas
+ujson==5.9.0
+    # via fastapi
+urllib3==2.2.1
+    # via
+    #   gradio
+    #   requests
+uvicorn==0.29.0
+    # via
+    #   fastapi
+    #   fastapi-cli
+    #   gradio
+uvloop==0.19.0
+    # via uvicorn
+watchfiles==0.21.0
+    # via uvicorn
+websockets==11.0.3
+    # via
+    #   gradio-client
+    #   uvicorn