Updated app

app.py

@@ -1,36 +1,40 @@
 import streamlit as st
 
 from pages.pred_page import *
+from pages.guess_page import *
+import base64
 
 from streamlit_option_menu import option_menu
 
-def add_bg_from_url(url):
-    st.markdown(
-         f"""
-         <style>
-         .stApp {{
-             background-image: url({url});
-             background-attachment: fixed;
-             background-size: cover
-         }}
-         </style>
-         """,
-         unsafe_allow_html=True
-     )
-
+def get_base64(bin_file):
+    with open(bin_file, 'rb') as f:
+        data = f.read()
+    return base64.b64encode(data).decode()
+
+def set_background(png_file):
+    bin_str = get_base64(png_file)
+    page_bg_img = '''
+    <style>
+    .stApp {
+    background-image: url("data:image/jpg;base64,%s");
+    background-size: cover;
+    }
+    </style>
+    ''' % bin_str
+    st.markdown(page_bg_img, unsafe_allow_html=True)
 
 if __name__ == '__main__':
 
     st.set_page_config( page_title="Home", layout="wide", initial_sidebar_state="collapsed", page_icon = "🏟️")
 
-    add_bg_from_url("https://npr.brightspotcdn.com/legacy/sites/kmuw/files/201703/stand-up-comedy.jpg")
-
-
-    selected2 = option_menu(None, ["Predict", "Take A Guess", "Tasks", 'Settings'], 
+    selected2 = option_menu(None, ["Predict", "Take A Guess"], 
     icons=['house', 'cloud-upload', "list-task", 'gear'], 
     menu_icon="cast", default_index=0, orientation="horizontal")
 
     if selected2 == "Predict":
-        pred_page_config()
+        set_background("images/stand-up-comedy.jpg")
+        pred_page_config() 
     elif selected2 == "Take A Guess":
-        st.title(':white[Guessify]')
+        set_background("images/dropout.jpg")
+
+        guess_page_config()

pages/guess_page.py

@@ -0,0 +1,63 @@
+import streamlit as st
+
+from streamlit_extras.metric_cards import style_metric_cards 
+
+from streamlit_modal import Modal
+
+import streamlit.components.v1 as components
+
+import json, random
+
+with open("pred_jokes.json", "r") as f:
+    jokes = json.load(f)
+
+def make_grid(cols,rows):
+    grid = [0]*cols
+    for i in range(cols):
+        with st.container():
+            grid[i] = st.columns(rows)
+    return grid
+
+def guess_page_config():
+
+    st.header("Guess The Type: Guess the category of the randomly generated joke below",  divider='blue')
+
+    random_col, reveal_col, _, _, _, _, _, _, _, _, _, _ = st.columns(12)
+
+    with random_col:
+        random_but = st.button("Random", type="secondary")
+
+    with reveal_col:
+        reveal_but = st.button("Reveal", type="secondary")
+
+    if random_but:
+        random_joke = random.choice(jokes)
+
+        st.session_state.joke = random_joke
+
+        joke = st.session_state.joke["joke"].replace("\n", " ").strip()
+
+        tar_cat = random_joke["target_category"]
+
+        pred_cat = random_joke["pred_category"]
+
+        st.subheader(f"_{joke}_")
+    
+    if reveal_but:
+        joke = st.session_state.joke["joke"].replace("\n", " ").strip()
+
+        st.subheader(f"_{joke}_")
+
+        tar_cat = st.session_state.joke["target_category"]
+
+        pred_cat = st.session_state.joke["pred_category"]
+
+        with st.container():
+
+            cat_grid = make_grid(4, 4)
+
+            cat_grid[0][0].metric(":green[Actual Category]", tar_cat, "🎯")
+
+            cat_grid[0][1].metric(":red[Predicted Category]", pred_cat, "🎯")
+
+            style_metric_cards(border_left_color="#9AD8E1", background_color="#000000")

pages/pred_page.py

@@ -4,16 +4,13 @@ from torch import nn
 
 from transformers import GPT2Model, GPT2Tokenizer
 
-from audio_recorder_streamlit import audio_recorder
-
-import speech_recognition as sr
-
 import torch.nn.functional as F
 
 from streamlit_extras.metric_cards import style_metric_cards 
 
 from streamlit_card import card
 
+import base64
 
 class SimpleGPT2SequenceClassifier(nn.Module):
     def __init__(self, hidden_size: int, num_classes:int ,max_seq_len:int, gpt_model_name:str):
@@ -33,6 +30,15 @@ class SimpleGPT2SequenceClassifier(nn.Module):
         return linear_output
 
 
+def get_img(filepath):
+    with open(filepath, "rb") as f:
+        data = f.read()
+        encoded = base64.b64encode(data)
+    
+    data = "data:image/png;base64," + encoded.decode('utf-8')
+
+    return data
+
 def make_grid(cols,rows):
     grid = [0]*cols
     for i in range(cols):
@@ -103,7 +109,7 @@ def pred_page_config():
                 card(
                 title="Dad Joke",
                 text=f"Confidence: {prob_dict['Dad Joke 👨']}",
-                image="https://cdn1.edgedatg.com/aws/v2/abc/ModernFamily/person/737386/c04cab82627c6910b31c54b1357b2d73/579x579-Q90_c04cab82627c6910b31c54b1357b2d73.jpg",
+                image=get_img("./images/dad_joke.jpg"),
                 styles={
                     "card": {
                         "width": "100%",
@@ -116,7 +122,7 @@ def pred_page_config():
                 card(
                 title="Riddle",
                 text=f"Confidence: {prob_dict['Riddle ❓']}",
-                image="https://static.dc.com/dc/files/default_images/Char_Profile_Riddler_5c53a3b5e01958.22326638.jpg",
+                image=get_img("./images/riddle.jpg"),
                 styles={
                     "card": {
                         "width": "100%",
@@ -129,7 +135,7 @@ def pred_page_config():
                 card(
                 title="Dark Joke",
                 text=f"Confidence: {prob_dict['Dark Joke 🎭']}",
-                image="https://static.independent.co.uk/2024/02/09/16/newFile-4.jpg",
+                image=get_img("./images/dark_joke.jpg"),
                 styles={
                     "card": {
                         "width": "100%",
@@ -142,7 +148,7 @@ def pred_page_config():
                 card(
                 title="Pun",
                 text=f"Confidence: {prob_dict['Pun 😎']}",
-                image="https://www.ignitesocialmedia.com/wp-content/uploads/2017/11/ISM-Puns_0001_Layer-Comp-2.png",
+                image=get_img("./images/pun.png"),
                 styles={
                     "card": {
                         "width": "100%",
@@ -155,7 +161,7 @@ def pred_page_config():
                 card(
                 title="Anti Joke",
                 text=f"Confidence: {prob_dict['Anti Joke 🚫']}",
-                image="https://i.insider.com/62c79a5d8045920019ae23c4?width=700",
+                image=get_img("./images/anti_joke.jpg"),
                 styles={
                     "card": {
                         "width": "100%",
@@ -168,7 +174,7 @@ def pred_page_config():
                 card(
                 title="Neutral",
                 text=f"Confidence: {prob_dict['Neutral 💭']}",
-                image="https://cdn.britannica.com/00/146200-050-A60812DA/Thinker-Auguste-Rodin-Museum-garden-Paris-1904.jpg",
+                image=get_img("./images/neutral.jpg"),
                 styles={
                     "card": {
                         "width": "100%",