Update app.py

app.py

@@ -1,400 +1,399 @@
-#############################################################################################################################
-# Filename   : app.py
-# Description: A Streamlit application to showcase the importance of Responsible AI in LLMs.
-# Author     : Georgios Ioannou
-#
-# TODO: Add code for Google Gemma 7b and 7b-it.
-# TODO: Write code documentation.
-# Copyright © 2024 by Georgios Ioannou
-#############################################################################################################################
-# Import libraries.
-
-import os  # Load environment variable(s).
-import requests  # Send HTTP GET request to Hugging Face models for inference.
-import streamlit as st  # Build the GUI of the application.
-import streamlit.components.v1 as components
-
-from dataclasses import dataclass
-from dotenv import find_dotenv, load_dotenv  # Read local .env file.
-from langchain.callbacks import get_openai_callback
-from langchain.chains import ConversationChain
-from langchain.llms import OpenAI
-from policies import complex_policy, simple_policy
-from transformers import pipeline  # Access to Hugging Face models.
-from typing import Literal
-
-
-#############################################################################################################################
-# Load environment variable(s).
-
-load_dotenv(find_dotenv())  # Read local .env file.
-HUGGINGFACEHUB_API_TOKEN = os.getenv("HUGGINGFACEHUB_API_TOKEN")
-OPENAI_API_KEY = os.getenv("OPENAI_API_KEY")
-
-
-#############################################################################################################################
-
-
-@dataclass
-class Message:
-    """Class for keeping track of a chat message."""
-
-    origin: Literal["human", "ai"]
-    message: str
-
-
-#############################################################################################################################
-# Remeber (Keep history) user's message in each rendering of the application.
-
-
-def initialize_session_state():
-    if "history" not in st.session_state:
-        st.session_state.history = []
-    if "token_count" not in st.session_state:
-        st.session_state.token_count = 0
-    if "policy" not in st.session_state:
-        st.session_state.policy = "No Policy"
-    if "is_gemma_model" not in st.session_state:
-        st.session_state.is_gemma_model = False
-    if "selected_ai_icon" not in st.session_state:
-        st.session_state.selected_ai_icon = "a1.png"
-    if "selected_user_icon" not in st.session_state:
-        st.session_state.selected_user_icon = "man.png"
-
-
-#############################################################################################################################
-
-
-def on_click_callback():
-    with get_openai_callback() as cb:
-        human_prompt = st.session_state.human_prompt
-
-        # Policy + User Query Text.
-
-        role = "User"  # This can be an Agent.
-
-        task = f"""
-        Task: Check if there is unsafe content in
-        '{role}' messages in conversations
-        according our safety policy with the below categories.
-        """
-
-        output_format = f"""
-        Provide your safety assessment for '{role}' in the above conversation:
-        - First line must read 'safe' or 'unsafe'.
-        - If unsafe, a second line must include a comma-separated list of violated categories.
-        """
-
-        query = human_prompt
-
-        conversation = f"""
-        <BEGIN CONVERSATION>
-        User: {query}
-        <END CONVERSATION>
-        """
-
-        if st.session_state.policy == "Simple Policy":
-            prompt = f"""
-            {task}
-            {simple_policy}
-            {conversation}
-            {output_format}
-            """
-        elif st.session_state.policy == "Complex Policy":
-            prompt = f"""
-            {task}
-            {complex_policy}
-            {conversation}
-            {output_format}
-            """
-        elif st.session_state.policy == "No Policy":
-            prompt = human_prompt
-
-        # Getting the llm response for safety check 1.
-        # "https://api-inference.huggingface.co/models/meta-llama/LlamaGuard-7b"
-        if st.session_state.is_gemma_model:
-            pass
-        else:
-            llm_response_safety_check_1 = st.session_state.conversation.run(prompt)
-            st.session_state.history.append(Message("human", human_prompt))
-            st.session_state.token_count += cb.total_tokens
-
-        # Checking if response is safe. Safety Check 1. Checking what goes in (user input).
-        if (
-            "unsafe" in llm_response_safety_check_1.lower()
-        ):  # If respone is unsafe return unsafe.
-            st.session_state.history.append(Message("ai", llm_response_safety_check_1))
-            return
-        else:  # If respone is safe answer the question.
-            if st.session_state.is_gemma_model:
-                pass
-            else:
-                conversation_chain = ConversationChain(
-                    llm=OpenAI(
-                        temperature=0.2,
-                        openai_api_key=OPENAI_API_KEY,
-                        model_name=st.session_state.model,
-                    ),
-                )
-                llm_response = conversation_chain.run(human_prompt)
-                # st.session_state.history.append(Message("ai", llm_response))
-                st.session_state.token_count += cb.total_tokens
-
-        # Policy + LLM Response.
-        query = llm_response
-
-        conversation = f"""
-        <BEGIN CONVERSATION>
-        User: {query}
-        <END CONVERSATION>
-        """
-
-        if st.session_state.policy == "Simple Policy":
-            prompt = f"""
-            {task}
-            {simple_policy}
-            {conversation}
-            {output_format}
-            """
-        elif st.session_state.policy == "Complex Policy":
-            prompt = f"""
-            {task}
-            {complex_policy}
-            {conversation}
-            {output_format}
-            """
-        elif st.session_state.policy == "No Policy":
-            prompt = llm_response
-
-        # Getting the llm response for safety check 2.
-        # "https://api-inference.huggingface.co/models/meta-llama/LlamaGuard-7b"
-        if st.session_state.is_gemma_model:
-            pass
-        else:
-            llm_response_safety_check_2 = st.session_state.conversation.run(prompt)
-            st.session_state.token_count += cb.total_tokens
-
-        # Checking if response is safe. Safety Check 2. Checking what goes out (llm output).
-        if (
-            "unsafe" in llm_response_safety_check_2.lower()
-        ):  # If respone is unsafe return.
-            st.session_state.history.append(
-                Message(
-                    "ai",
-                    "THIS FROM THE AUTHOR OF THE CODE: LLM WANTED TO RESPOND UNSAFELY!",
-                )
-            )
-        else:
-            st.session_state.history.append(Message("ai", llm_response))
-
-
-#############################################################################################################################
-# Function to apply local CSS.
-
-
-def local_css(file_name):
-    with open(file_name) as f:
-        st.markdown(f"<style>{f.read()}</style>", unsafe_allow_html=True)
-
-
-#############################################################################################################################
-
-
-# Main function to create the Streamlit web application.
-
-
-def main():
-    # try:
-    initialize_session_state()
-
-    # Page title and favicon.
-    st.set_page_config(page_title="Responsible AI", page_icon="⚖️")
-
-    # Load CSS.
-    local_css("./static/styles/styles.css")
-
-    # Title.
-    title = f"""<h1 align="center" style="font-family: monospace; font-size: 2.1rem; margin-top: -4rem">
-                Responsible AI</h1>"""
-    st.markdown(title, unsafe_allow_html=True)
-
-    # Subtitle 1.
-    title = f"""<h3 align="center" style="font-family: monospace; font-size: 1.5rem; margin-top: -2rem">
-                Showcase the importance of Responsible AI in LLMs</h3>"""
-    st.markdown(title, unsafe_allow_html=True)
-
-    # Subtitle 2.
-    title = f"""<h2 align="center" style="font-family: monospace; font-size: 1.5rem; margin-top: 0rem">
-                CUNY Tech Prep Tutorial 6</h2>"""
-    st.markdown(title, unsafe_allow_html=True)
-
-    # Image.
-    image = "./static/ctp.png"
-    left_co, cent_co, last_co = st.columns(3)
-    with cent_co:
-        st.image(image=image)
-
-    # Sidebar dropdown menu for Models.
-    models = [
-        "gpt-4-turbo",
-        "gpt-4",
-        "gpt-3.5-turbo",
-        "gpt-3.5-turbo-instruct",
-        "gemma-7b",
-        "gemma-7b-it",
-    ]
-    selected_model = st.sidebar.selectbox("Select Model:", models)
-    st.sidebar.write(f"Current Model: {selected_model}")
-
-    if selected_model == "gpt-4-turbo":
-        st.session_state.model = "gpt-4-turbo"
-    elif selected_model == "gpt-4":
-        st.session_state.model = "gpt-4"
-    elif selected_model == "gpt-3.5-turbo":
-        st.session_state.model = "gpt-3.5-turbo"
-    elif selected_model == "gpt-3.5-turbo-instruct":
-        st.session_state.model = "gpt-3.5-turbo-instruct"
-    elif selected_model == "gemma-7b":
-        st.session_state.model = "gemma-7b"
-    elif selected_model == "gemma-7b-it":
-        st.session_state.model = "gemma-7b-it"
-
-    if "gpt" in st.session_state.model:
-        st.session_state.conversation = ConversationChain(
-            llm=OpenAI(
-                temperature=0.2,
-                openai_api_key=OPENAI_API_KEY,
-                model_name=st.session_state.model,
-            ),
-        )
-    elif "gemma" in st.session_state.model:
-        # Load model from Hugging Face.
-        st.session_state.is_gemma_model = True
-        pass
-
-    # Sidebar dropdown menu for Policies.
-    policies = ["No Policy", "Complex Policy", "Simple Policy"]
-    selected_policy = st.sidebar.selectbox("Select Policy:", policies)
-    st.sidebar.write(f"Current Policy: {selected_policy}")
-
-    if selected_policy == "No Policy":
-        st.session_state.policy = "No Policy"
-    elif selected_policy == "Complex Policy":
-        st.session_state.policy = "Complex Policy"
-    elif selected_policy == "Simple Policy":
-        st.session_state.policy = "Simple Policy"
-
-    # Sidebar dropdown menu for AI Icons.
-    ai_icons = ["AI 1", "AI 2"]
-    selected_ai_icon = st.sidebar.selectbox("AI Icon:", ai_icons)
-    st.sidebar.write(f"Current AI Icon: {selected_ai_icon}")
-
-    if selected_ai_icon == "AI 1":
-        st.session_state.selected_ai_icon = "ai1.png"
-    elif selected_ai_icon == "AI 2":
-        st.session_state.selected_ai_icon = "ai2.png"
-
-    # Sidebar dropdown menu for User Icons.
-    user_icons = ["Man", "Woman"]
-    selected_user_icon = st.sidebar.selectbox("User Icon:", user_icons)
-    st.sidebar.write(f"Current User Icon: {selected_user_icon}")
-
-    if selected_user_icon == "Man":
-        st.session_state.selected_user_icon = "man.png"
-    elif selected_user_icon == "Woman":
-        st.session_state.selected_user_icon = "woman.png"
-
-    # Placeholder for the chat messages.
-    chat_placeholder = st.container()
-    # Placeholder for the user input.
-    prompt_placeholder = st.form("chat-form")
-    token_placeholder = st.empty()
-
-    with chat_placeholder:
-        for chat in st.session_state.history:
-            div = f"""
-    <div class="chat-row 
-        {'' if chat.origin == 'ai' else 'row-reverse'}">
-        <img class="chat-icon" src="app/static/{
-            st.session_state.selected_ai_icon if chat.origin == 'ai' 
-                        else st.session_state.selected_user_icon}"
-            width=32 height=32>
-        <div class="chat-bubble
-        {'ai-bubble' if chat.origin == 'ai' else 'human-bubble'}">
-            &#8203;{chat.message}
-        </div>
-    </div>
-            """
-            st.markdown(div, unsafe_allow_html=True)
-
-        for _ in range(3):
-            st.markdown("")
-
-    # User prompt.
-    with prompt_placeholder:
-        st.markdown("**Chat**")
-        cols = st.columns((6, 1))
-
-        # Large text input in the left column.
-        cols[0].text_input(
-            "Chat",
-            placeholder="What is your question?",
-            label_visibility="collapsed",
-            key="human_prompt",
-        )
-        # Red button in the right column.
-        cols[1].form_submit_button(
-            "Submit",
-            type="primary",
-            on_click=on_click_callback,
-        )
-
-    token_placeholder.caption(
-        f"""
-Used {st.session_state.token_count} tokens \n
-"""
-    )
-
-    # GitHub repository of author.
-
-    st.markdown(
-        f"""
-            <p align="center" style="font-family: monospace; color: #FAF9F6; font-size: 1rem;"><b> Check out our
-            <a href="https://github.com/GeorgiosIoannouCoder/" style="color: #FAF9F6;"> GitHub repository</a></b>
-            </p>
-    """,
-        unsafe_allow_html=True,
-    )
-
-    # Use the Enter key in the keyborad to click on the Submit button.
-    components.html(
-        """
-<script>
-const streamlitDoc = window.parent.document;
-
-const buttons = Array.from(
-    streamlitDoc.querySelectorAll('.stButton > button')
-);
-const submitButton = buttons.find(
-    el => el.innerText === 'Submit'
-);
-
-streamlitDoc.addEventListener('keydown', function(e) {
-    switch (e.key) {
-        case 'Enter':
-            submitButton.click();
-            break;
-    }
-});
-</script>
-""",
-        height=0,
-        width=0,
-    )
-
-
-#############################################################################################################################
-
-
-if __name__ == "__main__":
-    main()
+#############################################################################################################################
+# Filename   : app.py
+# Description: A Streamlit application to showcase the importance of Responsible AI in LLMs.
+# Author     : Georgios Ioannou
+#
+# TODO: Add code for Google Gemma 7b and 7b-it.
+# TODO: Write code documentation.
+# Copyright © 2024 by Georgios Ioannou
+#############################################################################################################################
+# Import libraries.
+
+import os  # Load environment variable(s).
+import requests  # Send HTTP GET request to Hugging Face models for inference.
+import streamlit as st  # Build the GUI of the application.
+import streamlit.components.v1 as components
+
+from dataclasses import dataclass
+from dotenv import find_dotenv, load_dotenv  # Read local .env file.
+from langchain.callbacks import get_openai_callback
+from langchain.chains import ConversationChain
+from langchain.llms import OpenAI
+from policies import complex_policy, simple_policy
+from transformers import pipeline  # Access to Hugging Face models.
+from typing import Literal
+
+
+#############################################################################################################################
+# Load environment variable(s).
+
+# HUGGINGFACEHUB_API_TOKEN = os.getenv("HUGGINGFACEHUB_API_TOKEN")
+OPENAI_API_KEY = os.getenv("OPENAI_API_KEY")
+
+
+#############################################################################################################################
+
+
+@dataclass
+class Message:
+    """Class for keeping track of a chat message."""
+
+    origin: Literal["human", "ai"]
+    message: str
+
+
+#############################################################################################################################
+# Remeber (Keep history) user's message in each rendering of the application.
+
+
+def initialize_session_state():
+    if "history" not in st.session_state:
+        st.session_state.history = []
+    if "token_count" not in st.session_state:
+        st.session_state.token_count = 0
+    if "policy" not in st.session_state:
+        st.session_state.policy = "No Policy"
+    if "is_gemma_model" not in st.session_state:
+        st.session_state.is_gemma_model = False
+    if "selected_ai_icon" not in st.session_state:
+        st.session_state.selected_ai_icon = "a1.png"
+    if "selected_user_icon" not in st.session_state:
+        st.session_state.selected_user_icon = "man.png"
+
+
+#############################################################################################################################
+
+
+def on_click_callback():
+    with get_openai_callback() as cb:
+        human_prompt = st.session_state.human_prompt
+
+        # Policy + User Query Text.
+
+        role = "User"  # This can be an Agent.
+
+        task = f"""
+        Task: Check if there is unsafe content in
+        '{role}' messages in conversations
+        according our safety policy with the below categories.
+        """
+
+        output_format = f"""
+        Provide your safety assessment for '{role}' in the above conversation:
+        - First line must read 'safe' or 'unsafe'.
+        - If unsafe, a second line must include a comma-separated list of violated categories.
+        """
+
+        query = human_prompt
+
+        conversation = f"""
+        <BEGIN CONVERSATION>
+        User: {query}
+        <END CONVERSATION>
+        """
+
+        if st.session_state.policy == "Simple Policy":
+            prompt = f"""
+            {task}
+            {simple_policy}
+            {conversation}
+            {output_format}
+            """
+        elif st.session_state.policy == "Complex Policy":
+            prompt = f"""
+            {task}
+            {complex_policy}
+            {conversation}
+            {output_format}
+            """
+        elif st.session_state.policy == "No Policy":
+            prompt = human_prompt
+
+        # Getting the llm response for safety check 1.
+        # "https://api-inference.huggingface.co/models/meta-llama/LlamaGuard-7b"
+        if st.session_state.is_gemma_model:
+            pass
+        else:
+            llm_response_safety_check_1 = st.session_state.conversation.run(prompt)
+            st.session_state.history.append(Message("human", human_prompt))
+            st.session_state.token_count += cb.total_tokens
+
+        # Checking if response is safe. Safety Check 1. Checking what goes in (user input).
+        if (
+            "unsafe" in llm_response_safety_check_1.lower()
+        ):  # If respone is unsafe return unsafe.
+            st.session_state.history.append(Message("ai", llm_response_safety_check_1))
+            return
+        else:  # If respone is safe answer the question.
+            if st.session_state.is_gemma_model:
+                pass
+            else:
+                conversation_chain = ConversationChain(
+                    llm=OpenAI(
+                        temperature=0.2,
+                        openai_api_key=OPENAI_API_KEY,
+                        model_name=st.session_state.model,
+                    ),
+                )
+                llm_response = conversation_chain.run(human_prompt)
+                # st.session_state.history.append(Message("ai", llm_response))
+                st.session_state.token_count += cb.total_tokens
+
+        # Policy + LLM Response.
+        query = llm_response
+
+        conversation = f"""
+        <BEGIN CONVERSATION>
+        User: {query}
+        <END CONVERSATION>
+        """
+
+        if st.session_state.policy == "Simple Policy":
+            prompt = f"""
+            {task}
+            {simple_policy}
+            {conversation}
+            {output_format}
+            """
+        elif st.session_state.policy == "Complex Policy":
+            prompt = f"""
+            {task}
+            {complex_policy}
+            {conversation}
+            {output_format}
+            """
+        elif st.session_state.policy == "No Policy":
+            prompt = llm_response
+
+        # Getting the llm response for safety check 2.
+        # "https://api-inference.huggingface.co/models/meta-llama/LlamaGuard-7b"
+        if st.session_state.is_gemma_model:
+            pass
+        else:
+            llm_response_safety_check_2 = st.session_state.conversation.run(prompt)
+            st.session_state.token_count += cb.total_tokens
+
+        # Checking if response is safe. Safety Check 2. Checking what goes out (llm output).
+        if (
+            "unsafe" in llm_response_safety_check_2.lower()
+        ):  # If respone is unsafe return.
+            st.session_state.history.append(
+                Message(
+                    "ai",
+                    "THIS FROM THE AUTHOR OF THE CODE: LLM WANTED TO RESPOND UNSAFELY!",
+                )
+            )
+        else:
+            st.session_state.history.append(Message("ai", llm_response))
+
+
+#############################################################################################################################
+# Function to apply local CSS.
+
+
+def local_css(file_name):
+    with open(file_name) as f:
+        st.markdown(f"<style>{f.read()}</style>", unsafe_allow_html=True)
+
+
+#############################################################################################################################
+
+
+# Main function to create the Streamlit web application.
+
+
+def main():
+    # try:
+    initialize_session_state()
+
+    # Page title and favicon.
+    st.set_page_config(page_title="Responsible AI", page_icon="⚖️")
+
+    # Load CSS.
+    local_css("./static/styles/styles.css")
+
+    # Title.
+    title = f"""<h1 align="center" style="font-family: monospace; font-size: 2.1rem; margin-top: -4rem">
+                Responsible AI</h1>"""
+    st.markdown(title, unsafe_allow_html=True)
+
+    # Subtitle 1.
+    title = f"""<h3 align="center" style="font-family: monospace; font-size: 1.5rem; margin-top: -2rem">
+                Showcase the importance of Responsible AI in LLMs</h3>"""
+    st.markdown(title, unsafe_allow_html=True)
+
+    # Subtitle 2.
+    title = f"""<h2 align="center" style="font-family: monospace; font-size: 1.5rem; margin-top: 0rem">
+                CUNY Tech Prep Tutorial 6</h2>"""
+    st.markdown(title, unsafe_allow_html=True)
+
+    # Image.
+    image = "./static/ctp.png"
+    left_co, cent_co, last_co = st.columns(3)
+    with cent_co:
+        st.image(image=image)
+
+    # Sidebar dropdown menu for Models.
+    models = [
+        "gpt-4-turbo",
+        "gpt-4",
+        "gpt-3.5-turbo",
+        "gpt-3.5-turbo-instruct",
+        "gemma-7b",
+        "gemma-7b-it",
+    ]
+    selected_model = st.sidebar.selectbox("Select Model:", models)
+    st.sidebar.write(f"Current Model: {selected_model}")
+
+    if selected_model == "gpt-4-turbo":
+        st.session_state.model = "gpt-4-turbo"
+    elif selected_model == "gpt-4":
+        st.session_state.model = "gpt-4"
+    elif selected_model == "gpt-3.5-turbo":
+        st.session_state.model = "gpt-3.5-turbo"
+    elif selected_model == "gpt-3.5-turbo-instruct":
+        st.session_state.model = "gpt-3.5-turbo-instruct"
+    elif selected_model == "gemma-7b":
+        st.session_state.model = "gemma-7b"
+    elif selected_model == "gemma-7b-it":
+        st.session_state.model = "gemma-7b-it"
+
+    if "gpt" in st.session_state.model:
+        st.session_state.conversation = ConversationChain(
+            llm=OpenAI(
+                temperature=0.2,
+                openai_api_key=OPENAI_API_KEY,
+                model_name=st.session_state.model,
+            ),
+        )
+    elif "gemma" in st.session_state.model:
+        # Load model from Hugging Face.
+        st.session_state.is_gemma_model = True
+        pass
+
+    # Sidebar dropdown menu for Policies.
+    policies = ["No Policy", "Complex Policy", "Simple Policy"]
+    selected_policy = st.sidebar.selectbox("Select Policy:", policies)
+    st.sidebar.write(f"Current Policy: {selected_policy}")
+
+    if selected_policy == "No Policy":
+        st.session_state.policy = "No Policy"
+    elif selected_policy == "Complex Policy":
+        st.session_state.policy = "Complex Policy"
+    elif selected_policy == "Simple Policy":
+        st.session_state.policy = "Simple Policy"
+
+    # Sidebar dropdown menu for AI Icons.
+    ai_icons = ["AI 1", "AI 2"]
+    selected_ai_icon = st.sidebar.selectbox("AI Icon:", ai_icons)
+    st.sidebar.write(f"Current AI Icon: {selected_ai_icon}")
+
+    if selected_ai_icon == "AI 1":
+        st.session_state.selected_ai_icon = "ai1.png"
+    elif selected_ai_icon == "AI 2":
+        st.session_state.selected_ai_icon = "ai2.png"
+
+    # Sidebar dropdown menu for User Icons.
+    user_icons = ["Man", "Woman"]
+    selected_user_icon = st.sidebar.selectbox("User Icon:", user_icons)
+    st.sidebar.write(f"Current User Icon: {selected_user_icon}")
+
+    if selected_user_icon == "Man":
+        st.session_state.selected_user_icon = "man.png"
+    elif selected_user_icon == "Woman":
+        st.session_state.selected_user_icon = "woman.png"
+
+    # Placeholder for the chat messages.
+    chat_placeholder = st.container()
+    # Placeholder for the user input.
+    prompt_placeholder = st.form("chat-form")
+    token_placeholder = st.empty()
+
+    with chat_placeholder:
+        for chat in st.session_state.history:
+            div = f"""
+    <div class="chat-row 
+        {'' if chat.origin == 'ai' else 'row-reverse'}">
+        <img class="chat-icon" src="app/static/{
+            st.session_state.selected_ai_icon if chat.origin == 'ai' 
+                        else st.session_state.selected_user_icon}"
+            width=32 height=32>
+        <div class="chat-bubble
+        {'ai-bubble' if chat.origin == 'ai' else 'human-bubble'}">
+            &#8203;{chat.message}
+        </div>
+    </div>
+            """
+            st.markdown(div, unsafe_allow_html=True)
+
+        for _ in range(3):
+            st.markdown("")
+
+    # User prompt.
+    with prompt_placeholder:
+        st.markdown("**Chat**")
+        cols = st.columns((6, 1))
+
+        # Large text input in the left column.
+        cols[0].text_input(
+            "Chat",
+            placeholder="What is your question?",
+            label_visibility="collapsed",
+            key="human_prompt",
+        )
+        # Red button in the right column.
+        cols[1].form_submit_button(
+            "Submit",
+            type="primary",
+            on_click=on_click_callback,
+        )
+
+    token_placeholder.caption(
+        f"""
+Used {st.session_state.token_count} tokens \n
+"""
+    )
+
+    # GitHub repository of author.
+
+    st.markdown(
+        f"""
+            <p align="center" style="font-family: monospace; color: #FAF9F6; font-size: 1rem;"><b> Check out our
+            <a href="https://github.com/GeorgiosIoannouCoder/" style="color: #FAF9F6;"> GitHub repository</a></b>
+            </p>
+    """,
+        unsafe_allow_html=True,
+    )
+
+    # Use the Enter key in the keyborad to click on the Submit button.
+    components.html(
+        """
+<script>
+const streamlitDoc = window.parent.document;
+
+const buttons = Array.from(
+    streamlitDoc.querySelectorAll('.stButton > button')
+);
+const submitButton = buttons.find(
+    el => el.innerText === 'Submit'
+);
+
+streamlitDoc.addEventListener('keydown', function(e) {
+    switch (e.key) {
+        case 'Enter':
+            submitButton.click();
+            break;
+    }
+});
+</script>
+""",
+        height=0,
+        width=0,
+    )
+
+
+#############################################################################################################################
+
+
+if __name__ == "__main__":
+    main()