[UI] Put more informations on the page.

app.py

@@ -17,18 +17,19 @@ if not has_prepared:
     has_prepared = True
 
 st.markdown("""
-<center><h2 style="padding-top: 0px; padding-bottom: 0px;">Entity Referring Classifier</h2></center>
-<center><small>Ver 2.0.1208.01</small></center>
-<center><h6><b>It knows exactly when you are calling it.</b></h6></center>
+<center><h2 style="padding-top: 0px; padding-bottom: 8px;">Entity Referring Classifier</h2></center>
+<center><h6 style="color: #bfbfbf"><b>It knows exactly when you are calling it.</b></h6></center>
 <br/>
 """, unsafe_allow_html=True)
 
 livedemo_col1, livedemo_col2, livedemo_col3 = st.columns([12,1,6])
 
 with livedemo_col1:
-    st.subheader('Live Demo')
+    st.markdown("""
+    <h3>Live Demo <small style="font-size:12px; color: #cfcfcf">version 2.0.1.1208</small></h3>
+    """, unsafe_allow_html=True)
 
-    with st.form("my_form"):
+    with st.form("live_demo_form"):
         entity = st.text_input('Entity Name:', 'Jimmy')
         sentence = st.text_input('Sentence Input:', 'Are you feeling good, Jimmy?',
                 help='The classifier is going to analyze this sentence.')
@@ -49,6 +50,30 @@ with livedemo_col1:
     elif st.session_state['running_status'] == STATUS_ERROR:
         st.warning('The entity name is not in the sentence!')
 
+    st.markdown("""
+    #### Corpus
+    """)
+    st.markdown("""
+    <small style="font-size: 19px; padding-bottom: 6px;"><b><code>Calling</code></b></small>
+    means that the sentence contains the name and is telling to the entity.<br/>
+    <small style="color: #afafaf">
+        <b><i>Examples:</i></b><br/>
+        <b>-</b> Are you feeling good about it Jimmy?<br/>
+        <b>-</b> Are you feeling good Jimmy?<br/>
+        <b>-</b> Jimmy you are so cool!
+    </small>
+    """, unsafe_allow_html=True)
+    st.markdown("""
+    <small style="font-size: 19px; padding-bottom: 6px;"><b><code>Mentioning</code></b></small>
+    means that the sentence contains the name but is telling to other person.<br/>
+    <small style="color: #afafaf">
+        <b><i>Examples:</i></b><br/>
+        <b>-</b> Are you feeling good about Jimmy?<br/>
+        <b>-</b> Have you heard about Jimmy?<br/>
+        <b>-</b> Jimmy said that you are so cool!
+    </small>
+    """, unsafe_allow_html=True)
+
 with livedemo_col2:
     st.empty()
 
@@ -58,14 +83,25 @@ with livedemo_col3:
     """)
     st.markdown("""
     Hi! I'm the Entity Referring Classifier.
-    I will fill this part later.
+    Specify an entity name, and then type a sentence to get started!
     """)
+
     st.markdown("""
-    #### Terms
+    #### Background
     """)
     st.markdown("""
-    ##### `Calling`
+    There are a lot of voice assistants and bots out there,
+    but they all need a specific prefix to wake them like “hey siri” or “hey alexa”.
+    At our real world, nobody is communicating with others with such prefix all the time.
+    Everyone should be able to communicate in a comfortable way including with bots and virtual assistants.
+    Our aim here is to get rid of the "wake phrase".
+    """)
+
+    st.markdown("""
+    #### Applications
     """)
     st.markdown("""
-    ##### `Mentioning`
+    Developers can apply it on their virtual bots or voice assistants to detect
+    if the user is calling the bot or just mentioning the bot rather than detecting a fixed wake-up phrase.
+    It will improve the human-computer interaction and usability.
     """)