Update app.py

app.py

@@ -1,6 +1,7 @@
 import streamlit as st
 from transformers import pipeline
 
+# Load the fill-mask model
 unmasker = pipeline('fill-mask', model='dsfsi/zabantu-sot-ven-170m')
 
 def fill_mask(sentences):
@@ -10,8 +11,10 @@ def fill_mask(sentences):
         results[sentence] = unmasked
     return results
 
+# Title of the app
 st.title("Fill Mask | Zabantu-sot-ven-170m")
 
+# Two columns layout
 col1, col2 = st.columns(2)
 
 with col1:
@@ -26,27 +29,41 @@ with col1:
         "\n".join(sample_sentences)
     )
 
+    # Split input sentences into a list
     input_sentences = text_input.split(",")
 
     if st.button("Submit"):
-        # Store the result after clicking submit
+        # Get fill-mask predictions after clicking the submit button
         result = fill_mask(input_sentences)
 
 with col2:
+    # If there is a result, display the predictions
     if 'result' in locals():  
         st.write("Predicted words and their probabilities:")
+        
         if result:
             for sentence, predictions in result.items():
+                st.write(f"**Sentence:** {sentence}")  # Show sentence
                 for prediction in predictions:
                     predicted_word = prediction['token_str']
                     score = prediction['score'] * 100
-                    # Display the predicted word with its probability
-                    st.write(f"**{predicted_word}** : {score:.2f}%")
 
+                    # Display the predicted word with a bar chart representing the score
+                    st.markdown(f"""
+                    <div class="container">
+                        <span>{predicted_word}</span>
+                        <div class="bar">
+                            <div class="bar-fill" style="width: {score}%;"></div>
+                        </div>
+                        <span>{score:.2f}%</span>
+                    </div>
+                    """, unsafe_allow_html=True)
+
+# Custom CSS for bar chart styling
 css = """
 <style>
-footer {display:none !important}
-.results-markdown{display:none !important}
+footer {display:none !important;}
+.results-markdown{display:none !important;}
 .gr-button-primary {
     z-index: 14;
     height: 43px;
@@ -108,7 +125,28 @@ footer {display:none !important}
     --tw-text-opacity: 1 !important;
     color:rgb(37 56 133 / var(--tw-text-opacity)) !important;
 }
+.container {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 5px;
+    width: 100%;
+}
+.bar {
+    width: 70%;
+    background-color: #e6e6e6;
+    border-radius: 12px;
+    overflow: hidden;
+    margin-right: 10px;
+    height: 20px;
+}
+.bar-fill {
+    background-color: #17152e;
+    height: 100%;
+    border-radius: 12px;
+}
 </style>
 """
 
-st.markdown(css, unsafe_allow_html=True)
+# Insert the custom CSS into the Streamlit app
+st.markdown(css, unsafe_allow_html=True)