changing some styles

app.css

@@ -0,0 +1,31 @@
+:root {
+  --color-primary: #65db9d;
+  --color-secondary: #023b1d;
+    
+  --class_1-maxWidth: 1024px;
+}
+
+/* GLOBAL STYLING */
+.class_1 {
+  background-color: var(--color-secondary);
+  display: grid;
+  grid-gap: 1rem;
+  height: auto;
+  width: 100%;
+  max-width: var(--class_1-maxWidth);
+  margin: 0 auto;
+}
+
+@media (min-width: 768px) {
+  .class_1 {
+    grid-template-columns: 1fr 1fr;
+  }
+}
+
+.bg-primary {
+  background-color: var(--color-primary);
+}
+
+.text-primary {
+  color: var(--color-primary);
+}

app.py

@@ -1,20 +1,13 @@
 import streamlit as st
+import streamlit.components.v1 as component
 
 from googletrans import Translator
-from transformers import AutoTokenizer, AutoModelForCausalLM, pipeline
+from model import load_model
 # from huggingface_hub import snapshot_download
 
 page = st.sidebar.selectbox("Model ", ["Finetuned on News data", "Pretrained GPT2"])
 translator = Translator()
 
-def load_model(model_name):
-    with st.spinner('Waiting for the model to load.....'):
-        # snapshot_download('flax-community/Sinhala-gpt2')
-        tokenizer = AutoTokenizer.from_pretrained(model_name)
-        model = AutoModelForCausalLM.from_pretrained(model_name, pad_token_id=tokenizer.eos_token_id)
-    st.success('Model loaded!!')
-    return model, tokenizer
-
 seed = st.sidebar.text_input('Starting text', 'ආයුබෝවන්')
 seq_num = st.sidebar.number_input('Number of sequences to generate ', 1, 20, 5)
 max_len = st.sidebar.number_input('Length of a sequence ', 5, 300, 100)
@@ -37,6 +30,53 @@ def generate(model, tokenizer, seed, seq_num, max_len):
     for beam_out in beam_outputs:
         sentences.append(tokenizer.decode(beam_out, skip_special_tokens=True))
     return sentences
+
+
+def html(body):
+    st.markdown(body, unsafe_allow_html=True)
+
+
+def card_begin_str(Sinhala_sentence):
+    return (
+        "<style>div.card{background-color:#023b1d;border-radius: 5px;box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);transition: 0.3s;} small{ margin: 5px;}</style>"
+        '<div class="card">'
+        '<div class="container">'
+        f"<small>{Sinhala_sentence}</small>"
+    )
+
+
+def card_end_str():
+    return "</div></div>"
+
+
+def card(sinhala_sentence, english_sentence):
+    lines = [card_begin_str(sinhala_sentence), f"<p>{english_sentence}</p>", card_end_str()]
+    html("".join(lines))
+
+
+def br(n):
+    html(n * "<br>")
+
+def card_html(sinhala_sentence, english_sentence):
+    with open('./app.css') as f:
+        css_file = f.read()
+    return component.html(
+    f"""
+    <style>{css_file}</style>
+    <article class="class_1 bg-white rounded-lg p-4 relative">
+    <p class="font-bold items-center text-sm text-primary relative mb-1">{sinhala_sentence}</p>
+    
+    <div class="flex items-center text-white-400 mb-4">
+    <i class="fab fa-google mx-2"></i>
+      <small class="text-white-400">English Translations are by Google Translate</small>   
+    </div>
+     
+    <p class="not-italic items-center text-sm text-primary relative mb-4">
+      {english_sentence}
+    </p>
+  </article>
+    """
+    )
     
 if page == 'Pretrained GPT2':
     st.title('Sinhala Text generation with GPT2')
@@ -51,11 +91,13 @@ if page == 'Pretrained GPT2':
                 # generator = pipeline('text-generation', model=model, tokenizer=tokenizer)
                 # seqs = generator(seed, max_length=max_len, num_return_sequences=seq_num)
                 seqs = generate(model, tokenizer, seed, seq_num, max_len)
+            st.warning("English sentences were translated by Google Translate.")
             for i, seq in enumerate(seqs):
-                st.info(f'Generated sequence {i+1}:')
-                st.write(seq)
-                st.info(f'English translation (by Google Translation):')
-                st.write(translator.translate(seq, src='si', dest='en').text)
+                english_sentence = translator.translate(seq, src='si', dest='en').text
+                # card(seq, english_sentence)
+                html(card_begin_str(seq))
+                st.info(english_sentence)
+                html(card_end_str())
         except Exception as e:
             st.exception(f'Exception: {e}')
 else:
@@ -72,11 +114,17 @@ else:
                 # generator = pipeline('text-generation', model=model, tokenizer=tokenizer)
                 # seqs = generator(seed, max_length=max_len, num_return_sequences=seq_num)
                 seqs = generate(model, tokenizer, seed, seq_num, max_len)
+            st.warning("English sentences were translated by Google Translate.")
             for i, seq in enumerate(seqs):
-                st.info(f'Generated sequence {i+1}:')
-                st.write(seq)
-                st.info(f'English translation (by Google Translation):')
-                st.write(translator.translate(seq, src='si', dest='en').text)
+                # st.info(f'Generated sequence {i+1}:')
+                # st.write(seq)
+                # st.info(f'English translation (by Google Translation):')
+                # st.write(translator.translate(seq, src='si', dest='en').text)
+                english_sentence = translator.translate(seq, src='si', dest='en').text
+                # card(seq, english_sentence)
+                html(card_begin_str(seq))
+                st.info(english_sentence)
+                html(card_end_str())
         except Exception as e:
             st.exception(f'Exception: {e}')
 st.markdown('____________')

model.py

@@ -0,0 +1,11 @@
+import streamlit as st
+
+from transformers import AutoTokenizer, AutoModelForCausalLM
+
+def load_model(model_name):
+    with st.spinner('Waiting for the model to load.....'):
+        # snapshot_download('flax-community/Sinhala-gpt2')
+        tokenizer = AutoTokenizer.from_pretrained(model_name)
+        model = AutoModelForCausalLM.from_pretrained(model_name, pad_token_id=tokenizer.eos_token_id)
+    st.success('Model loaded!!')
+    return model, tokenizer