king007's picture
Duplicate from deepset/wikipedia-assistant
039aebb
import streamlit as st
def app():
with open('style.css') as f:
st.markdown(f"<style>{f.read()}</style>", unsafe_allow_html=True)
footer = """
<div class="footer-custom">
Streamlit app - <a href="https://www.linkedin.com/in/danijel-petkovic-573309144/" target="_blank">Danijel Petkovic</a> |
LFQA/DPR models - <a href="https://www.linkedin.com/in/blagojevicvladimir/" target="_blank">Vladimir Blagojevic</a> |
Guidance & Feedback - <a href="https://yjernite.github.io/" target="_blank">Yacine Jernite</a>
</div>
"""
st.markdown(footer, unsafe_allow_html=True)
st.subheader("Intro")
intro = """
<div class="text">
Wikipedia Assistant is an example of a task usually referred to as the Long-Form Question Answering (LFQA).
These systems function by querying large document stores for relevant information and subsequently using
the retrieved documents to generate accurate, multi-sentence answers. The documents related to a given
query, colloquially called context passages, are not used merely as source tokens for extracted answers,
but instead provide a larger context for the synthesis of original, abstractive long-form answers.
LFQA systems usually consist of three components:
<ul>
<li>A document store including content passages for a variety of topics</li>
<li>Encoder models to encode documents/questions such that it is possible to query the document store</li>
<li>A Seq2Seq language model capable of generating paragraph-long answers when given a question and
context passages retrieved from the document store</li>
</ul>
</div>
<br>
"""
st.markdown(intro, unsafe_allow_html=True)
st.image("lfqa.png", caption="LFQA Architecture")
st.subheader("UI/UX")
st.write("Each sentence in the generated answer ends with a coloured tooltip; the colour ranges from red to green. "
"The tooltip contains a value representing answer sentence similarity to a specific sentence in the "
"Wikipedia context passages retrieved. Mouseover on the tooltip will show the sentence from the "
"Wikipedia context passage. If a sentence similarity is 1.0, the seq2seq model extracted and "
"copied the sentence verbatim from Wikipedia context passages. Lower values of sentence "
"similarity indicate the seq2seq model is struggling to generate a relevant sentence for the question "
"asked.")
st.image("wikipedia_answer.png", caption="Answer with similarity tooltips")
st.write("Below the generated answer are question-related Wikipedia context paragraphs (passages). One can view "
"these passages in a raw format retrieved using the 'Paragraphs' select menu option. The 'Sentences' menu "
"option shows the same paragraphs but on a sentence level. Finally, the 'Answer Similarity' menu option "
"shows the most similar three sentences from context paragraphs to each sentence in the generated answer.")
st.image("wikipedia_context.png", caption="Context paragraphs (passages)")
tts = """
<div class="text">
Wikipedia Assistant converts the text-based answer to speech via either Google text-to-speech engine or
<a href="https://github.com/espnet" target=_blank">Espnet model</a> hosted on
<a href="https://huggingface.co/espnet/kan-bayashi_ljspeech_joint_finetune_conformer_fastspeech2_hifigan" target=_blank">
HuggingFace hub</a>
<br>
<br>
"""
st.markdown(tts, unsafe_allow_html=True)
st.subheader("Tips")
tips = """
<div class="text">
LFQA task is far from solved. Wikipedia Assistant will sometimes generate an answer unrelated to a question asked,
even downright wrong. However, if the question is elaborate and more specific, there is a decent chance of
getting a legible answer. LFQA systems are targeting ELI5 non-factoid type of questions. A general guideline
is - questions starting with why, what, and how are better suited than where and who questions. Be elaborate.
<br><br>
For example, to ask a science-based question, Wikipedia Assistant is better suited to answer the question: "Why do
airplane jet engines leave contrails in the sky?" than "Why do contrails exist?". Detailed and precise questions
are more likely to match the right half a dozen relevant passages in a 20+ GB Wikipedia dump to construct a good
answer.
</div>
<br>
"""
st.markdown(tips, unsafe_allow_html=True)
st.subheader("Technical details")
techinical_intro = """
<div class="text technical-details-info">
A question asked will be encoded with an <a href="https://huggingface.co/vblagoje/dpr-question_encoder-single-lfqa-wiki" target=_blank">encoder</a>
and sent to a server to find the most relevant Wikipedia passages. The Wikipedia <a href="https://huggingface.co/datasets/kilt_wikipedia" target=_blank">passages</a>
were previously encoded using a passage <a href="https://huggingface.co/vblagoje/dpr-ctx_encoder-single-lfqa-wiki" target=_blank">encoder</a> and
stored in the <a href="https://github.com/facebookresearch/faiss" target=_blank">Faiss</a> index. The question matching passages (a.k.a context passages) are retrieved from the Faiss
index and passed to a BART-based seq2seq <a href="https://huggingface.co/vblagoje/bart_lfqa" target=_blank">model</a> to
synthesize an original answer to the question.
</div>
"""
st.markdown(techinical_intro, unsafe_allow_html=True)