| 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 history-based question, Wikipedia Assistant is better suited to answer the question: | |
| "What was the objective of the German commando raid on Drvar in Bosnia during the Second World War?" than | |
| "Why did Germans raid Drvar?". A precise science question like "Why do airplane jet engines leave contrails | |
| in the sky?" has a good chance of getting a decent answer. 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) | |