app script added

app.py

@@ -0,0 +1,217 @@
+import json
+from collections import OrderedDict
+from pathlib import Path
+
+import streamlit as st
+
+
+SEEKER_ICON = "https://github.com/McGill-NLP/FaithDial/raw/gh-pages/assets/img/seeker.png"
+EXPERT_ICON = "https://github.com/McGill-NLP/FaithDial/raw/gh-pages/assets/img/expert.png"
+
+begin_badges = {
+    "Entailment": "success",
+    "Hallucination": "danger",
+    "Partial Hallucination": "warning",
+    "Generic": "secondary",
+    "Uncooperative": "secondary",
+}
+
+st.set_page_config(page_title="FaithDial Explorer", page_icon=":stars:", layout="wide")
+st.markdown(
+    """
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha256-DF7Zhf293AJxJNTmh5zhoYYIMs2oXitRfBjY+9L//AY=" crossorigin="anonymous">
+
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Permanent+Marker&display=swap" rel="stylesheet">
+
+    <style>
+    .dataset-title {
+        font-family: 'Permanent Marker', cursive;
+        font-size: 3.5rem;
+    }
+    .speaker-icon {
+        width: 20px;
+    }
+    p {
+        font-size: 2.8vmin;
+    }
+    span {
+        font-size: 2.8vmin;
+    }
+    .fa-flip-style {
+        --fa-animation-duration: 10s;
+    }
+    .faith-edit {
+    	background-color: #d0f0c0;
+    }
+    </style>""",
+    unsafe_allow_html=True,
+)
+
+st.sidebar.write(
+    """<center><p class="dataset-title">
+    <a href="https://mcgill-nlp.github.io/FaithDial/">FaithDial</a>
+    </p></center>""",
+    unsafe_allow_html=True,
+)
+# st.sidebar.image("datasets_logo_name.png", width=300)
+st.sidebar.subheader("A Faithful Benchmark for Information-Seeking Dialogue")
+
+
+@st.cache
+def load_dialogues():
+    """
+    Loads the samples from the data folder.
+    """
+    samples_path = Path(__file__).parent / "faithdial-samples.jsonl"
+
+    with samples_path.open("r") as f:
+        samples = [json.loads(line) for line in f]
+
+    topics = OrderedDict()
+    for i, sample in enumerate(samples):
+        if sample.get("topic", None):
+            if sample["topic"] not in topics:
+                key = sample["topic"]
+            else:
+                key = f"{sample['topic']} (dialogue {i + 1})"
+        else:
+            key = f"Dialogue {i + 1}"
+        topics[key] = sample
+
+    return topics
+
+
+dialogues = load_dialogues()
+topics = tuple(dialogues.keys())
+
+st.sidebar.markdown(
+    "FaithDial contains 50,761 turns spanning 5649 conversations. Below you can choose a topic and visualize the conversation on the right hand side. Download the data from [here](https://huggingface.co/datasets/McGill-NLP/FaithDial)."
+)
+
+selected_topic = st.sidebar.radio("Pick a topic", topics, help="", key="topic_picker")
+
+st.sidebar.markdown(
+    "<div class='mt-5'>Proudly collected at <a href='https://mcgill-nlp.github.io/'>McGill-NLP</a> in collaboration with <a href='https://www.amii.ca/'>Amii</a> & IBM</div>",
+    unsafe_allow_html=True
+)
+
+if selected_topic is not None:
+    selected_dialogue = dialogues[selected_topic]
+
+    st.write(
+        f"""<i class="far fa-comments fa-2x fa-flip fa-flip-style"></i>&nbsp;&nbsp;&nbsp;<span class="h1">{selected_topic}</span>""",
+        unsafe_allow_html=True)
+    st.markdown("***")
+
+    for i, exchange in enumerate(selected_dialogue["exchanges"]):
+        turn = i + 1
+        # if exchange["history"]:
+        #     history_template = """
+        #     <div class="card">
+        #         <div class="card-header">History</div>
+        #         <div class="card-body">
+        #     """
+        #     for i, history in enumerate(exchange["history"]):
+        #         icon = SEEKER_ICON if i % 2 == 0 else EXPERT_ICON
+        #         history_template += (
+        #             f"""        <p class="card-text"><img src="{icon}" class="rounded speaker-icon" /> {history}</p>"""
+        #         )
+        #     history_template += """</div></div>"""
+        # st.write(history_template, unsafe_allow_html=True)
+
+        # st.write(f"""<h3>Turn {turn}</h3>""", unsafe_allow_html=True)
+
+        evidence_col, exchange_col = st.columns((0.7, 1))
+
+        evidence_template = f"""
+        <div class="alert alert-secondary" role="alert">
+            <h6 class="alert-heading"><span class="font-weight-bold" id="knowledge-{turn}">Knowledge</h6>
+            <p class="card-text mb-1">{exchange["evidence"]}</p>
+        </div>
+        <br/>
+        """
+        evidence_col.write(evidence_template, unsafe_allow_html=True)
+
+        parallel_template = """
+        <div class="container">
+            <div class="row mb-3">
+                <div class="col">
+                    {seeker}
+                </div>
+            </div>
+            <div class="row mb-4">
+                <div class="col">
+                    {expert}
+                </div>
+            </div>
+        </div>
+        """
+
+        seeker = exchange["seeker"]
+        is_seeker_modified = bool(seeker.get("OldText", None))
+
+        expert = exchange["expert"]
+        is_expert_modified = bool(expert.get("OldText", None))
+
+        exchange_pane = exchange_col.empty()
+        seeker_template = f"""<img src="{SEEKER_ICON}" class="rounded" style="text-align:center; width: 20px"/>
+                                    <span class="font-weight-bold">Seeker:</span> <span>{seeker["Text"]}</span>"""
+        expert_template = f"""<img src="{EXPERT_ICON}" class="rounded" style="text-align:center; width: 20px"/>
+                                <span class="font-weight-bold">Wizard:</span> <span>{expert["Text"]}</span>"""
+
+        exchange_pane.write(
+            parallel_template.format(
+                seeker=seeker_template,
+                expert=expert_template,
+            ),
+            unsafe_allow_html=True,
+        )
+
+        show_original = exchange_col.checkbox("Show original", key=f"show-{selected_topic}-{turn}")
+        if show_original:
+            apprentice_template = f"<span class='font-weight-bold'>Apprentice:</span> <span class='font-italic'>{seeker.get('OldText', None) or seeker['Text']}</span>"
+
+            badges = f"""<span class='badge badge-{begin_badges[expert['BEGIN']]}'>{expert['BEGIN']}</span>
+                                {" ".join("<span class='badge badge-light'>{}</span>".format(v) for v in sorted(expert['VRM']))}"""
+            wizard_template = f"""<span class="font-weight-bold">Wizard:</span>
+                        <span class="font-italic">{expert.get("OldText", None) or expert["Text"]}</span> &nbsp;&nbsp; {badges}"""
+
+            original_template = """<div class="card card-body bg-secondary text-white">
+                <div class="row mb-3">
+                    <div class="col">
+                        {apprentice}
+                    </div>
+                </div>
+                <div class="row">
+                    <div class="col">
+                        {wizard}
+                    </div>
+                </div>
+            </div>
+            """
+
+            exchange_col.write(
+                original_template.format(apprentice=apprentice_template, wizard=wizard_template, turn=turn),
+                unsafe_allow_html=True,
+            )
+
+            seeker_template = f"""<img src="{SEEKER_ICON}" class="rounded" style="text-align:center; width: 20px"/>
+            <span class="font-weight-bold">Seeker:</span> {"<span class='faith-edit'>" if is_seeker_modified else "<span>"}{seeker["Text"]}</span>"""
+            expert_template = f"""<img src="{EXPERT_ICON}" class="rounded" style="text-align:center; width: 20px"/>
+            <span class="font-weight-bold">Wizard:</span> {"<span class='faith-edit'>" if is_expert_modified else "<span>"}{expert["Text"]}</span>"""
+
+            exchange_pane.write(
+                parallel_template.format(
+                    seeker=seeker_template,
+                    expert=expert_template,
+                ),
+                unsafe_allow_html=True,
+            )
+
+        exchange_col.markdown('')
+        exchange_col.markdown("""***""")