Update demo

app.py

@@ -9,13 +9,12 @@ from transformers import set_seed
 debug = False
 
 MODEL = "flax-community/t5-base-dutch-demo"
-#MODEL: str = "."
+# MODEL: str = "."
 
-DEFAULT_TEXT: str = """Bij meerdere dijken in gemeenten langs de Maas in de veiligheidsregio Limburg-Noord zijn lekkages ontstaan. Dat vertelde burgemeester van Venlo Antoin Scholten - tevens voorzitter van de veiligheidsregio - zaterdagmiddag op een persconferentie. Een bedrijventerrein aan de Prins Willem Alexanderhaven in Roermond wordt om die reden ontruimd. Scholten vraagt Nederlanders de komende dagen weg te blijven uit de regio.
-"We zien dat zwakke plekken zich voordoen", aldus Scholten. "De situatie is nog onzeker. Het water is ongelofelijk grillig." Volgens hem is het onzeker of de dijken langs de Prins Willem Alexanderhaven het gaan houden. Daar zou al water doorheen sijpelen.
-Vanuit Defensie staat een interventieteam paraat om hulp te bieden als het ergens onverhoopt toch misgaat. Scholten prijst ook de vele vrijwilligers die klaarstaan voor Limburg. "De vele handjes zijn hartverwarmend. Vanuit de dorpen, de kernen, de wijken."
-Ook vanuit elders in Europa is hulp aangeboden, weet Scholten. "Men weet ons spontaan te vinden, zonder dat wij ook een oproep hebben gedaan om hulp."
-De burgemeester riep alle ramptoeristen er opnieuw toe op nog even weg te blijven. Dat kan volgens hem tot gevaarlijke situaties leiden en de ramptoeristen lopen bovendien hulpdiensten in de weg, aldus Scholten. Jos Teeuwen, bestuurslid van Waterschap Limburg, beaamt dat er gevaarlijke situaties kunnen ontstaan. "De dijken zijn door het vocht en de grote hoeveelheden water verzwakt."
+DEFAULT_TEXT: str = """De Japanse onderzoekers gebruikten geavanceerde glasvezeltechnologie om de hoge snelheid te halen. Hiervoor werd onder meer gebruikgemaakt van zeldzame mineralen en een zogeheten microkam, waarbij laserstralen in bundels worden afgeschoten.
+Het NICT simuleerde de data op zo'n manier dat de downloadsnelheid over een gebied van 3.000 kilometer kon worden gemeten. Over die afstand werd door de onderzoekers geen vertraging in de snelheid of verzwakking in het signaal gemeten.
+Met een snelheid van 319 Tb/s zouden 57.000 films per seconde kunnen worden gedownload of de gehele Spotify-bibliotheek in drie seconden, schrijft Yahoo News.
+Voorlopig lijkt de techniek overigens niet meer te zijn dan een experiment, vanwege de hoge kosten die ermee zijn gemoeid. In Nederland zijn providers bezig met het aanleggen van internet met een hoge downloadsnelheid. Deze glasvezelnetwerken bereiken snelheden tot 1 gigabit per seconde.
 """
 
 generator_kwargs_beam = {
@@ -44,7 +43,7 @@ class TextSummarizer:
         self.tokenizer = None
         self.model = None
         self.generator = None
-        # set_seed(42)
+        set_seed(42)
 
     def load(self):
         os.environ["TOKENIZERS_PARALLELISM"] = "false"
@@ -71,7 +70,7 @@ def instantiate_generator():
 def main():
     st.set_page_config(  # Alternate names: setup_page, page, layout
         page_title="Netherformer",  # String or None. Strings get appended with "• Streamlit".
-        # layout="",  # Can be "centered" or "wide". In the future also "dashboard", etc.
+        layout="wide",  # Can be "centered" or "wide". In the future also "dashboard", etc.
         initial_sidebar_state="expanded",  # Can be "auto", "expanded", "collapsed"
         page_icon="📰",  # String, anything supported by st.image, or None.
     )
@@ -82,21 +81,54 @@ def main():
     generator = instantiate_generator()
 
     st.markdown(
-        """# Netherformer 📰
-This demo uses [T5 Dutch finetuned on CNN DM](https://huggingface.co/flax-community/t5-base-dutch-demo)
-to generate summaries of a news story
+        """
+        <style>
+        [data-testid="stSidebar"][aria-expanded="true"] > div:first-child {
+            width: 500px;
+        }
+        [data-testid="stSidebar"][aria-expanded="false"] > div:first-child {
+            width: 500px;
+            margin-left: -500px;
+        }
+        </style>
+        """,
+        unsafe_allow_html=True,
+    )
+    st.sidebar.image("NewsCovid-19-512.png", width=200)
+    st.sidebar.markdown(
+        """# Netherformer
+* Create summaries of Dutch news stories.
+* Copy paste any Dutch news text and press the Generate Summary botton.
+* This demo the [T5 Dutch finetuned on CNN DM](https://huggingface.co/flax-community/t5-base-dutch-demo)
+transformer model. Please refer to the [model page](https://huggingface.co/flax-community/t5-base-dutch-demo) for more information.
 """
     )
+    st.sidebar.title("Mode:")
+
+    if sampling_mode := st.sidebar.selectbox(
+        "select a Mode", index=0, options=["Beam Search", "Top-k Sampling"]
+    ):
+        if sampling_mode == "Beam Search":
+            params = generator_kwargs_beam
+        else:
+            params = generator_kwargs_top_k
+        st.sidebar.json(params)
 
-    input_text = st.text_area("Enter a Dutch news text", DEFAULT_TEXT)
+    input_text = st.text_area("Enter a Dutch news text", DEFAULT_TEXT, height=500)
 
     if st.button("Generate summary"):
-        if debug:
-            response = """Een bedrijventerrein aan de Prins Willem Alexanderhaven in Roermond heeft de komende dagen weg te blijven uit de regio. De burgemeester van Roermond roept alle ramptoeristen er opnieuw toe op meer dan 10.00 uur weg."""
-        else:
-            response = generator.summarize(input_text, generator_kwargs_beam)
-        st.header("Summary:")
-        st.markdown(response)
+
+        with st.spinner("Generating summary ..."):
+            if debug:
+                from time import sleep
+
+                sleep(2)
+                response = """Een bedrijventerrein aan de Prins Willem Alexanderhaven in Roermond heeft de komende dagen weg te blijven uit de regio. De burgemeester van Roermond roept alle ramptoeristen er opnieuw toe op meer dan 10.00 uur weg."""
+            else:
+                response = generator.summarize(input_text, params)
+
+            st.header("Summary:")
+            st.markdown(response)
 
 
 if __name__ == "__main__":

style.css

@@ -1,10 +1,10 @@
 body {
     background-color: #eee;
 }
-.fullScreenFrame > div {
-    display: flex;
-    justify-content: center;
-}
+/*.fullScreenFrame > div {*/
+/*    display: flex;*/
+/*    justify-content: center;*/
+/*}*/
 /*.stButton>button {*/
 /*    color: #4F8BF9;*/
 /*    border-radius: 50%;*/
@@ -17,21 +17,22 @@ body {
 }
 .stTextArea>div>div>input {
     color: #4F8BF9;
+    min-height: 500px;
 }
 
 
-.st-cj {
-    min-height: 500px;
-    spellcheck="false";
-    color: #4F8BF9;
-}
-.st-ch {
-    min-height: 500px;
-    spellcheck="false";
-    color: #4F8BF9;
-}
-.st-bb {
-    min-height: 500px;
-    spellcheck="false";
-    color: #4F8BF9;
-}
+/*.st-cj {*/
+/*    min-height: 500px;*/
+/*    spellcheck="false";*/
+/*    color: #4F8BF9;*/
+/*}*/
+/*.st-ch {*/
+/*    min-height: 500px;*/
+/*    spellcheck="false";*/
+/*    color: #4F8BF9;*/
+/*}*/
+/*.st-bb {*/
+/*    min-height: 500px;*/
+/*    spellcheck="false";*/
+/*    color: #4F8BF9;*/
+/*}*/