Test new layout

app.py

@@ -52,7 +52,7 @@ def get_annotated_text(text, keyphrases):
             rf"$K:{keyphrases.index(keyphrase)}\2",
             text,
             flags=re.I,
-            count=1
+            count=1,
         )
 
     result = []
@@ -91,7 +91,7 @@ def get_annotated_text(text, keyphrases):
 
 
 def rerender_output(layout):
-    layout.subheader("🐧 Output")
+    layout.write("⚙️ Output")
     if (
         len(st.session_state.keyphrases) > 0
         and len(st.session_state.selected_rows) == 0
@@ -142,31 +142,65 @@ if "select_rows" not in st.session_state:
 st.set_page_config(
     page_icon="🔑",
     page_title="Keyphrase extraction/generation with Transformers",
-    layout="wide",
+    layout="centered",
 )
 
-st.header("🔑 Keyphrase extraction/generation with Transformers")
-col1, col2 = st.columns(2)
-
+with open("css/style.css") as f:
+    st.markdown(f"<style>{f.read()}</style>", unsafe_allow_html=True)
 
-chosen_model = col1.selectbox(
-    "Choose your model:",
-    st.session_state.config.get("models"),
-)
-st.session_state.chosen_model = chosen_model
+st.header("🔑 Keyphrase extraction/generation with Transformers")
 
-with st.spinner("Loading pipeline..."):
-    pipe = load_pipeline(
-        f"{st.session_state.config.get('model_author')}/{st.session_state.chosen_model}"
+description = """
+Keyphrase extraction is a technique in text analysis where you extract the important keyphrases
+from a text. Since this is a time-consuming process, Artificial Intelligence is used to automate it.
+Currently, classical machine learning methods, that use statistics and linguistics, are widely used
+for the extraction process. The fact that these methods have been widely used in the community has
+the advantage that there are many easy-to-use libraries. Now with the recent innovations in
+deep learning methods (such as recurrent neural networks and transformers, GANS, …),
+keyphrase extraction can be improved. These new methods also focus on the semantics and
+context of a document, which is quite an improvement.
+
+This space gives you the ability to test around with some keyphrase extraction and generation models.
+Keyphrase extraction models are transformers models fine-tuned as a token classification problem where
+the tokens in a text are annotated as:
+
+* B: Beginning of a keyphrase
+* I: Inside a keyphrases
+* O: Outside a keyhprase.
+
+While keyphrase extraction can only extract keyphrases from a given text. Keyphrase generation models
+work a bit differently. Here you use an encoder-decoder model like BART to generate keyphrases from a given text.
+These models also have the ability to generate keyphrases, which are not present in the text 🤯.
+
+Do you want to see some magic 🧙‍♂️? Try it out yourself! 👇
+"""
+
+st.write(description)
+
+with st.form("test"):
+    chosen_model = st.selectbox(
+        "Choose your model:",
+        st.session_state.config.get("models"),
+    )
+    st.session_state.chosen_model = chosen_model
+    st.markdown(
+        f"For more information about the chosen model, please be sure to check it out the [🤗 Model Card](https://huggingface.co/DeDeckerThomas/{chosen_model})."
     )
 
+    with st.spinner("Loading pipeline..."):
+        pipe = load_pipeline(
+            f"{st.session_state.config.get('model_author')}/{st.session_state.chosen_model}"
+        )
+
+    st.session_state.input_text = st.text_area(
+        "✍ Input", st.session_state.config.get("example_text"), height=300
+    ).replace("\n", " ")
 
-st.session_state.input_text = col1.text_area(
-    "Input", st.session_state.config.get("example_text"), height=300
-).replace("\n", " ")
-with st.spinner("Extracting keyphrases..."):
-    pressed = col1.button("Extract", on_click=extract_keyphrases)
+    with st.spinner("Extracting keyphrases..."):
+        pressed = st.form_submit_button("Extract", on_click=extract_keyphrases)
 
+if len(st.session_state.selected_rows) > 0 or len(st.session_state.keyphrases) > 0:
+    rerender_output(st)
 
 if len(st.session_state.data_frame.columns) > 0:
     st.subheader("📜 History")
@@ -182,6 +216,3 @@ if len(st.session_state.data_frame.columns) > 0:
         update_mode=GridUpdateMode.SELECTION_CHANGED,
     )
     st.session_state.selected_rows = pd.DataFrame(data["selected_rows"])
-
-if len(st.session_state.selected_rows) > 0 or len(st.session_state.keyphrases) > 0:
-    rerender_output(col2)

css/style.css

@@ -0,0 +1,5 @@
+@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
+
+body {
+  font-family: 'Roboto', 'Source Sans Pro', sans-serif;
+}