Streamlit app

frontend/components/__init__.py

@@ -1,2 +1,3 @@
 from .authors import *
-from .user_greetings import *
+from .user_greetings import *
+from .logo import add_logo

frontend/components/logo.py

@@ -0,0 +1,55 @@
+import streamlit as st
+import re
+import base64
+import validators
+from pathlib import Path
+
+
+def add_logo(logo_url: str, height: int = 100, svg=False):
+    if svg:
+        svg_logo = read_svg(logo_url)
+        b64 = base64.b64encode(svg_logo.encode("utf-8")).decode("utf-8")
+        logo = f'url("data:image/svg+xml;base64,{b64}")'
+    elif validators.url(logo_url):
+        logo = f"url({logo_url})"
+    else:
+        logo = f'url("data:image/png;base64,{base64.b64encode(Path(logo_url).read_bytes()).decode()}")'
+    st.markdown(
+        f"""
+        <style>
+            [data-testid="stSidebarNav"] {{
+                background-image: {logo};
+                background-repeat: no-repeat;
+                background-position: center top; /* Center the logo at the top */
+                background-size: auto {height}px; /* Set the logo height */
+            }}
+        </style>
+        """,
+        unsafe_allow_html=True,
+    )
+
+
+def read_svg(path_svg):
+    try:
+        with open(path_svg, "r") as file:
+            svg_logo = file.read().splitlines()
+            _maped_list = map(str, svg_logo)
+            svg_logo = "".join(_maped_list)
+            temp_svg_logo = re.findall("<svg.*</svg>", svg_logo, flags=re.IGNORECASE)
+            svg_logo = temp_svg_logo[0]
+    except:
+        svg_logo = '<svg xmlns="http://www.w3.org/2000/svg" width="150px" height="1px" viewBox="0 0 150 1"></svg>'
+    return svg_logo
+
+
+def render_svg(svg):
+    b64 = base64.b64encode(svg.encode("utf-8")).decode("utf-8")
+    html = (
+        r"""
+        <div align="center">
+        <img src="data:image/svg+xml;base64,%s" alt="Techdocs Logo" style="width: 60em;"/>
+        </div>
+        """
+        % b64
+    )
+    st.markdown(html, unsafe_allow_html=True)

frontend/components/user_greetings.py

@@ -1,6 +1,11 @@
 import streamlit as st
 
+
 def user_greetings():
     with st.sidebar.expander("👋 Greetings!", expanded=True):
-        st.write("Welcome to Studybot! This is a tool to help you revise your subjects. You can use the sidebar to navigate to the different pages. Have fun!")
-        st.write("If you have any feedback, please contact me on [LinkedIn](https://www.linkedin.com/in/hemanthsai7/) or [GitHub](https://github.com/HemanthSai7).")
+        st.write(
+            "Welcome to Studybot! This is a tool to help you revise your subjects. You can use the sidebar to navigate to the different pages. Have fun!"
+        )
+        st.write(
+            "If you have any feedback, please contact me on [:orange[LinkedIn]](https://www.linkedin.com/in/hemanthsai7/) or [:orange[GitHub]](https://github.com/HemanthSai7)."
+        )

frontend/layouts/mainlayout.py

@@ -1,16 +1,23 @@
 import json
 import streamlit as st
 from typing import Callable
-from components import authors, user_greetings
+from components import authors, user_greetings, add_logo
 
 
 def mainlayout(func: Callable):
     def wrapper():
-        with open("frontend/layouts/st_page_layouts.json", "r", encoding="utf-8") as f:
+        with open("layouts/st_page_layouts.json", "r", encoding="utf-8") as f:
             st_page_layouts = json.load(f)
 
-        st.set_page_config(**st_page_layouts[f"{func.__name__}" if func.__name__ in st_page_layouts.keys() else "home"])
-        st.markdown('# :rainbow[Welcome to Studybot]🚀')
+        st.set_page_config(
+            **st_page_layouts[
+                f"{func.__name__}"
+                if func.__name__ in st_page_layouts.keys()
+                else "home"
+            ]
+        )
+        add_logo("images/studybotlogo.svg", svg=True)
+        st.markdown("# Studybot 📚")
         user_greetings()
         authors()
 

frontend/🏡_Home.py

@@ -20,14 +20,15 @@ def home():
         unsafe_allow_html=True,
     )
 
-    with st.expander("How does it work?", expanded=True):
-        st.markdown(
+    with st.expander("How does it work? ⚙️", expanded=True):
+        st.info(
             """
             - When you upload a document, it will be divided into smaller chunks and stored in a special type of database called a vector index that allows for semantic search and retrieval. I'm using Qdrant vector database for this purpose.
 
             - When you ask a question, Studybot will search through the document chunks and find the most relevant ones using the vector index. Then, it will use Mistral-7B-instruct to generate a final answer.
 
-            """
+            """,
+            icon="ℹ️",
         )
 
     with st.expander("FAQs 🤔"):
@@ -55,11 +56,14 @@ def home():
             """,
             unsafe_allow_html=True,
         )
-    
+
     st.divider()
     # architecture heading in the middle
-    st.markdown("<h2 style='text-align: center; color: black;'>Studybot Architecture</h1>", unsafe_allow_html=True)
-    st.image("frontend/images/architecture.png")
+    st.markdown(
+        "<h2 style='text-align: center; color: black;'>Studybot Architecture</h1>",
+        unsafe_allow_html=True,
+    )
+    st.image("images/architecture.png")
 
 
 home()