Added app files

.gitignore

@@ -0,0 +1 @@
+caenv/

app.py

@@ -0,0 +1,14 @@
+import streamlit as st
+
+st.set_page_config(
+    page_title="Home"
+)
+
+st.title("Large Language Models Showcase")
+st.markdown(
+    """
+    This proof-of-concept web application aims to showcase the text generation capabilities
+    of ChatGPT together with prompt engineering techniques.
+    """
+)
+st.image("images/Chatgpt.jpg")

pages/1_Prompt Engineering.py

@@ -0,0 +1,109 @@
+import streamlit as st
+from openai import OpenAI
+
+@st.cache_resource
+def init_PE():
+    data = {"Persona Pattern":{"Intuition":"Tell the LLM to act as a specific person,object or entity and then provide them with a relevant task.","Format":"Act as entity X, perform task Y.","Examples":"Act as a expert AI Engineer, explain to me how back-propagation works." },
+            "Question Refinement":{"Intuition":"To ensure that the LLM can suggest potentially better or more refined questions for the user to ask.","Format":"Whenever I ask a question, suggest a better question and ask me if I would like to use it instead.","Examples":"Just enter the above prompt into the chat before asking your question" },
+            "Cognitive Verifier":{"Intuition":"To force the LLM to subdivide the original question into multiple questions and use the answers to all those questions to fit into the final answer","Format":"When you are asked a question,follow these rules:<br>Generate a number of additional questions that would help more accurately answer the question. Combine the answers to the individual questions to produce the final answer to the overall question.","Examples":"Just enter this prompt into the chat before asking your question." },
+            "Audience Persona":{"Intuition":"Intuition is for the LLM to know your level of expertise so that it can better tailor it's answers to your needs","Format":"Explain X to me. Assume I am persona Y.","Examples":"Explain the self-attention mechanism to me. Assume I am a beginner with 0 knowledge." },
+            "Flipped Interaction":{"Intuition":"For the LLM to be like a diagnoser and ask the user questions until a result is met.","Format":"I would like you to ask me questions to help me achieve X.","Examples":"I would like you to ask me questions to help me create variations of my marketing materials.  You should ask questions until you have sufficient information about my current draft messages, audience, and goals. Ask me the first question." },
+            "Few-Shot Prompting":{"Intuition":"To give the LLM some input and output pairs and hopefully it can learn and generate the expected output from given input. Very similar to conventional training paradigm minus weight updates.","Format":"Input:X, Output: Y(Simple)<br>Situation:X, Think_1:Y,Action_1:Z,Think_2: A, Action_2: B(Step by step) Situation:X, Think_1:Y,Action_1:Z,Think_2: A, Action_2: B(Step by step)","Examples":"1. Review: The film was absolutely fantastic, with a gripping storyline and excellent acting. Classification: Positive <br> 2. Review: I found the movie to be a complete waste of time, with poor plot development and bad acting. Classification: Negative"},
+            "Chain-Of-Thought":{"Intuition":"Similar to few-shot prompting except now we provide reasoning for the output as well.","Format":"Question, step by step solution and then solution","Examples":"Solve the following problem step-by-step:<br>Problem: What is the result of 8 multiplied by 7 plus 6?<br>Step-by-step solution:<br>1. First, calculate the multiplication: 8 * 7 = 56 <br>2. Then, add 6 to the result: 56 + 6 = 62 <br> Answer: 62"},
+            "Reason+Act Prompting":{"Intuition":"Very similar to Chain-Of-Thought except now we also teach the LLM to use external tools to get information.","Format":"Question,Think,Action,Result","Examples":"**Question:** Aside from the apple remote, what other device can control the program apple remote? <br>**Task:** I need to find out search Apple Remote and find out the devices it was originally programmed to interact with<br>**Action:** Search [Apple Remote](https://en.wikipedia.org/wiki/Apple_Remote_Desktop)<br>**Result:** Apple Remote Desktop (ARD) is a Macintosh application produced by Apple Inc., first released on March 14, 2002, that replaced a similar product called Apple Network Assistant" },
+            "Gameplay Pattern":{"Intuition":"Imagine you want to learn about a new topic, you can format it as a game and play with the LLM.","Format":"Create a game about X topic. Describe the rules.","Examples":"Create a game about prompt engineering. Ask me a series of questions about prompt engineering and see how many I get right. If I get it wrong correct me." },
+            "Template Pattern":{"Intuition":"Basically give a template of the output that you want the LLM to follow.","Format":"Task, template","Examples":"Create a random strength workout for me today with complementary exercises. I am going to provide a template for your output . CAPITALIZED WORDS are my placeholders for content. Try to fit the output into one or more of the placeholders that I list. Please preserve the formatting and overall template that I provide.This is the template: NAME, REPS @ SETS, MUSCLE GROUPS WORKED, DIFFICULTY SCALE 1-5, FORM NOTES" },
+            "Meta Language":{"Intuition":"Basically teaching the LLM your own secret language like when you say X you mean Y.","Format":"When I say X, I mean Y (or would like you to do Y)","Examples":"When I say variations of companies, I mean give me ten different variations of tech companies" },
+            "Recipe Prompting":{"Intuition":"Asking a question to the LLM and also letting it know that there exists intermediate steps required.","Format":"I would like to achieve X. I know that I need to perform steps A,B,C. Please provide me with the necessary steps as well as any missing steps.","Examples":"I would like to drive to MBS from Jurong. I know that I want to go through AYR and I don't want to drive more than 300 miles per day.Provide a complete sequence of steps for me. Fill in any missing steps." },
+            "Alternative Approach":{"Intuition":"To allow the LLM to return users alternative approaches to solve a problem","Format":"If there are alternative ways to accomplish a task X that I give you, list the best alternate approaches","Examples":"Just input the above prompt before asking your question or task" },
+            "Outline Expansion":{"Intuition":"Give the LLM a topic to provide an outline on and then proceed to ask it to expand on a certain part.","Format":"ct as an outline expander. Generate a bullet point outline based on the input that I give you and then ask me for which bullet point you should expand on. Create a new outline for the bullet point that I select. At the end, ask me for what bullet point to expand next.","Examples":"Act as an outline expander. Generate a bullet point outline based on the input that I give you and then ask me for which bullet point you should expand on. Each bullet can have at most 3-5 sub bullets. The bullets should be numbered using the pattern [A-Z].[i-v].[* through ****]. Create a new outline for the bullet point that I select.  At the end, ask me for what bullet point to expand next. Ask me for what to outline." }}
+    return data
+
+PE_info = init_PE()
+
+st.title("ChatGPT + Prompt Engineering")
+st.markdown(
+    """
+    Welcome to the main section! Here 
+    we aim to introduce some common techniques used to generate
+    consistent outputs from large language models like GPT.  
+    """
+)
+if "PE_options" not in st.session_state:
+    st.session_state.PE_options = ["Persona Pattern"]
+
+if "selector" not in st.session_state:
+    st.session_state.selector = "Default"
+
+if "use_case" not in st.session_state:
+    st.session_state.use_case = None
+
+st.session_state.selector = st.selectbox("Choose how you want to select your prompt engineering techniques",["Free and Easy","Recommendation"])
+if st.session_state.selector == "Free and Easy":
+    default_options = st.multiselect("Select which Prompt Engineering options you are interested in",["Persona Pattern","Question Refinement","Cognitive Verifier",
+                             "Audience Persona","Flipped Interaction", "Few-Shot Prompting","Chain-Of-Thought",
+                             "Reason+Act Prompting","Gameplay Pattern","Template Prompting",
+                             "Meta Language Creation","Recipe Prompting","Alternative Approach",
+                             "Outline Expansion"])
+
+else:
+    use_case = st.selectbox("Choose what you want the LLM to do",["Be adept at a new task", "Teach you something",
+                                                                "Diagnose Your Problem","Provide Solutions"])
+    if use_case == "Be adept at a new task":
+        default_options = ["Few-Shot Prompting","Chain-Of-Thought","Template Pattern","Meta Language","Reason+Act Prompting"]
+    elif use_case == "Teach you something":
+        default_options = ["Audience Persona","Outline Expansion","Gameplay Pattern"]
+    elif use_case == "Diagnose Your Problem":
+        default_options = ["Persona Pattern","Cognitive Verifier","Flipped Interaction","Question Refinement","Recipe Prompting"]
+    else:
+        default_options = ["Alternative Approach"]
+
+st.session_state.PE_options = default_options
+for PEs in st.session_state.PE_options:
+    with st.container():
+        st.subheader(PEs)
+        with st.expander("View Explanation and Examples"):
+            st.markdown(
+            f"""
+            **<span style="color: #AEC6CF;">1. Intuition </span>**  
+            <span style="color: lightgray;">{PE_info[PEs]["Intuition"]}</span>  
+            **<span style="color: #AEC6CF;">2. Format </span>**  
+            <span style="color: lightgray;">{PE_info[PEs]["Format"]}</span>  
+            **<span style="color: #AEC6CF;">3. Example</span>**  
+            <span style="color: lightgray;">{PE_info[PEs]["Examples"]}</span>  
+            """,
+            unsafe_allow_html=True
+        )
+
+st.session_state.API_key = st.sidebar.text_input("Insert your openAI API key here")
+if "openai_model" not in st.session_state:
+    st.session_state["openai_model"] = "gpt-3.5-turbo"
+
+if "GPTmessages" not in st.session_state:
+    st.session_state.GPTmessages = []
+
+if "API_key" not in st.session_state:
+    st.session_state.API_key = None
+
+if st.session_state.API_key:
+    client = OpenAI(api_key=st.session_state.API_key)
+for message in st.session_state.GPTmessages:
+    with st.chat_message(message["role"]):
+        st.markdown(message["content"])
+
+if prompt := st.chat_input("What is up?"):
+    st.session_state.GPTmessages.append({"role": "user", "content": prompt})
+    with st.chat_message("user"):
+        st.markdown(prompt)
+
+    with st.chat_message("assistant"):
+        stream = client.chat.completions.create(
+            model=st.session_state["openai_model"],
+            messages=[
+                {"role": m["role"], "content": m["content"]}
+                for m in st.session_state.GPTmessages
+            ],
+            stream=True,
+        )
+        response = st.write_stream(stream)
+    st.session_state.GPTmessages.append({"role": "assistant", "content": response})

unused_pages/1_ChatGPT.py

@@ -0,0 +1,42 @@
+import streamlit as st
+from openai import OpenAI
+
+st.set_page_config(
+    page_title="ChatGPT"
+)
+
+st.title("ChatGPT Showcase")
+st.session_state.API_key = st.sidebar.text_input("Insert your openAI API key here")
+
+client = OpenAI(api_key=st.session_state.API_key)
+
+if "openai_model" not in st.session_state:
+    st.session_state["openai_model"] = "gpt-3.5-turbo"
+
+if "GPTmessages" not in st.session_state:
+    st.session_state.GPTmessages = []
+
+if "API_key" not in st.session_state:
+    st.session_state.API_key = None
+
+if st.session_state.API_key:
+    for message in st.session_state.GPTmessages:
+        with st.chat_message(message["role"]):
+            st.markdown(message["content"])
+
+    if prompt := st.chat_input("What is up?"):
+        st.session_state.GPTmessages.append({"role": "user", "content": prompt})
+        with st.chat_message("user"):
+            st.markdown(prompt)
+
+        with st.chat_message("assistant"):
+            stream = client.chat.completions.create(
+                model=st.session_state["openai_model"],
+                messages=[
+                    {"role": m["role"], "content": m["content"]}
+                    for m in st.session_state.GPTmessages
+                ],
+                stream=True,
+            )
+            response = st.write_stream(stream)
+        st.session_state.GPTmessages.append({"role": "assistant", "content": response})

unused_pages/x_LlaMA.py

@@ -0,0 +1,52 @@
+# import streamlit as st
+# from transformers import AutoModelForCausalLM, AutoTokenizer, pipeline
+# import transformers
+# import torch
+#
+# st.set_page_config(
+#     page_title="Falcon 11B"
+# )
+#
+# st.title("Falcon 11B Showcase")
+# @st.cache_resource
+# def Chat_model():
+#     model_name = "tiiuae/falcon-11B"
+#     model = AutoModelForCausalLM.from_pretrained(model_name)
+#     tokenizer = AutoTokenizer.from_pretrained(model_name)
+#     pipeline = transformers.pipeline(
+#         "text-generation",
+#         model=model,
+#         tokenizer=tokenizer,
+#         torch_dtype=torch.bfloat16,
+#         device_map="auto",
+#     )
+#     return pipeline,tokenizer
+#
+# def get_text_output(user_input,pipeline,tokenizer):
+#     sequences = pipeline(
+#         user_input,
+#         max_length=200,
+#         do_sample=True,
+#         top_k=10,
+#         num_return_sequences=1,
+#         eos_token_id=tokenizer.eos_token_id,
+#     )
+#     return sequences
+#
+# if "Falcon_messages" not in st.session_state:
+#     st.session_state.Falcon_messages = []
+#
+# if "Falcon_model" not in st.session_state:
+#     st.session_state.Falcon_model,st.session_state.tokeniser = Chat_model()
+#
+# for message in st.session_state.Falcon_messages:
+#     with st.chat_message(message["role"]):
+#         st.markdown(message["content"])
+#
+# if prompt := st.chat_input("What is up?"):
+#     st.session_state.Falcon_messages.append({"role": "user", "content": prompt})
+#     with st.chat_message("user"):
+#         st.markdown(prompt)
+#     with st.chat_message("assistant"):
+#         response = get_text_output(prompt,st.session_state.Falcon_model,st.session_state.tokeniser)
+#     st.session_state.Falcon_messages.append({"role": "assistant", "content": response})

unused_pages/x_Prompt_Engineering.py

@@ -0,0 +1,350 @@
+# import streamlit as st
+#
+# # @st.cache_resource
+# # def init_PE():
+# #     data = {"Persona Pattern":{"Intuition":"","Format":2,"Examples":3 },
+# #             "Question Refinement":{"Intuition":,"Format":,"Examples": },
+# #             "Cognitive Verifier":{"Intuition":,"Format":,"Examples": },
+# #             "Audience Persona":{"Intuition":,"Format":,"Examples": },
+# #             "Flipped Interaction":{"Intuition":,"Format":,"Examples": },
+# #             "Few-Shot Prompting":{"Intuition":,"Format":,"Examples": },
+# #             "Chain-Of-Thought":{"Intuition":,"Format":,"Examples": },
+# #             "Reason+Act Prompting":{"Intuition":,"Format":,"Examples": },
+# #             "Gameplay Pattern":{"Intuition":,"Format":,"Examples": },
+# #             "Template Pattern":{"Intuition":,"Format":,"Examples": },
+# #             "Meta Language":{"Intuition":,"Format":,"Examples": },
+# #             "Alternative Approach":{"Intuition":,"Format":,"Examples": },
+# #             "Outline Expansion":{"Intuition":,"Format":,"Examples": }}
+# st.title("Prompt Engineering Techniques")
+# st.markdown(
+#     """
+#     Welcome to the prompt engineering section! Here
+#     we aim to introduce some common techniques used to generate
+#     consistent outputs from large language models like GPT and LlaMA.
+#     """
+# )
+# PE_options = st.multiselect("Select which Prompt Engineering options you are interested in",["Persona Pattern","Question Refinement","Cognitive Verifier",
+#                              "Audience Persona","Flipped Interaction", "Few-Shot Prompting","Chain-Of-Thought",
+#                              "Reason+Act Prompting","Gameplay Pattern","Template Prompting",
+#                              "Meta Language Creation","Recipe Prompting","Alternative Approach",
+#                              "Outline Expansion"])
+# c11,c21 = st.columns([1,1])
+# with c11:
+#     st.markdown(
+#         """
+#         ### Persona Pattern
+#         """
+#     )
+#     with st.expander("View Explanation and Examples"):
+#         st.markdown(
+#             """
+#             **<span style="color: #AEC6CF;">1. Intuition </span>**
+#             <span style="color: lightgray;">Tell the LLM to act as a specific person,object or entity and then
+#             provide them with a relevant task.</span>
+#             **<span style="color: #AEC6CF;">2. Format </span>**
+#             <span style="color: lightgray;">"Act as entity X, perform task Y."</span>
+#             **<span style="color: #AEC6CF;">3. Example</span>**
+#             <span style="color: lightgray;">"Act as a expert AI Engineer, explain to me how back-propagation works."</span>
+#             """,
+#             unsafe_allow_html=True
+#         )
+#
+# with c21:
+#     st.markdown(
+#         """
+#         ### Question Refinement
+#         """
+#     )
+#     with st.expander("View Explanation and Examples"):
+#         st.markdown(
+#             """
+#                 **<span style="color: #AEC6CF;">1. Intuition </span>**<br>
+#                 <span style="color: lightgray;">To ensure that the LLM can suggest
+#                 potentially better or more refined questions for the user to ask.</span><br>
+#                 **<span style="color: #AEC6CF;">2. Format </span>**<br>
+#                 <span style="color: lightgray;">"Whenever I ask a question, suggest a
+#                 better question and ask me if I would like to use it instead.</span><br>
+#                 **<span style="color: #AEC6CF;">3. Example</span>**<br>
+#                 <span style="color: lightgray;">Just enter this prompt into the chat before asking your question</span><br>
+#             """,
+#             unsafe_allow_html=True
+#
+#         )
+# c21,c22 = st.columns([1,1])
+# with c21:
+#     st.markdown(
+#         """
+#         ### Cognitive Verifier
+#         """
+#     )
+#     with st.expander("View Explanations and Examples"):
+#         st.markdown(
+#             """
+#                 **<span style="color: #AEC6CF;">1. Intuition </span>**
+#                 <span style="color: lightgray;">To force the LLM to subdivide the original question
+#                 into multiple questions and use the answers to all those questions to fit into the final answer</span>
+#                 **<span style="color: #AEC6CF;">2. Format </span>**
+#                 <span style="color: lightgray;">"When you are asked a question,follow these rules:<br>Generate a number of additional questions that would help more accurately answer the question.<br>
+#                 Combine the answers to the individual questions to produce the final answer to the overall question."</span>
+#                 **<span style="color: #AEC6CF;">3. Example</span>**
+#                 <span style="color: lightgray;">Just enter this prompt into the chat before asking your question.</span>
+#             """,
+#             unsafe_allow_html=True
+#         )
+#
+# with c22:
+#     st.markdown(
+#         """
+#         ### Audience Persona
+#         """
+#     )
+#     with st.expander("View Explanations and Examples"):
+#         st.markdown(
+#             """
+#                 **<span style="color: #AEC6CF;">1. Intuition </span>**<br>
+#                 <span style="color: lightgray;">Intuition is for the LLM to know your level of
+#                 expertise so that it can better tailor it's answers to your needs</span><br>
+#                 **<span style="color: #AEC6CF;">2. Format </span>**<br>
+#                 <span style="color: lightgray;">"Explain X to me. Assume I am persona Y."</span><br>
+#                 **<span style="color: #AEC6CF;">3. Example</span>**<br>
+#                 <span style="color: lightgray;">"Explain the self-attention mechanism to me.
+#                 Assume I am a beginner with 0 knowledge."</span>
+#             """,
+#             unsafe_allow_html=True
+#         )
+#
+# c31,c32 = st.columns([1,1])
+# with c31:
+#     st.markdown(
+#         """
+#         ### Flipped Interaction
+#         """
+#     )
+#     with st.expander("View Explanations and Examples"):
+#         st.markdown(
+#             """
+#                 **<span style="color: #AEC6CF;">1. Intuition </span>**<br>
+#                 <span style="color: lightgray;">For the LLM to be like a diagnoser and ask the
+#                 user questions until a result is met.</span><br>
+#                 **<span style="color: #AEC6CF;">2. Format </span>**<br>
+#                 <span style="color: lightgray;">"I would like you to ask me questions to help me
+#                 achieve X."</span><br>
+#                 **<span style="color: #AEC6CF;">3. Example</span>**<br>
+#                 <span style="color: lightgray;">"I would like you to ask me questions to help me create variations of my marketing materials.  You should ask questions until you have sufficient information about my
+#                 current draft messages, audience, and goals. Ask me the first question."</span><br>
+#             """,
+#             unsafe_allow_html=True
+#         )
+#
+# with c32:
+#     st.markdown(
+#         """
+#         ### Few-Shot Prompting
+#         """
+#     )
+#     with st.expander("View Explanations and Examples"):
+#         st.markdown(
+#         """
+#             **<span style="color: #AEC6CF;">1. Intuition </span>**<br>
+#             <span style="color: lightgray;">To give the LLM some input and output
+#             pairs and hopefully it can learn and generate the expected output
+#             from given input. Very similar to conventional training paradigm minus
+#             weight updates.</span><br>
+#             **<span style="color: #AEC6CF;">2. Format </span>**<br>
+#             <span style="color: lightgray;">"Input:X, Output: Y"(Simple)<br>
+#             "Situation:X, Think_1:Y,Action_1:Z,Think_2: A, Action_2: B"(Step by step)</span><br>
+#             **<span style="color: #AEC6CF;">3. Example</span>**<br>
+#             <span style="color: lightgray;">"1. Review: "The film was absolutely fantastic, with a gripping storyline and excellent acting."
+#             Classification: Positive <br> 2. Review: "I found the movie to be a complete waste of time, with poor plot development and bad acting."
+#             Classification: Negative"</span><br>
+#         """,
+#             unsafe_allow_html=True
+#         )
+#
+# c41,c42 = st.columns([1,1])
+#
+# with c41:
+#     st.markdown(
+#         """
+#             ### Chain-Of-Thought
+#         """
+#     )
+#     with st.expander("View Explanations and Examples"):
+#         st.markdown(
+#             """
+#                 **<span style="color: #AEC6CF;">1. Intuition </span>**<br>
+#                 <span style="color: lightgray;">Similar to few-shot prompting except
+#                 now we provide reasoning for the output as well.</span><br>
+#                 **<span style="color: #AEC6CF;">2. Format </span>**<br>
+#                 <span style="color: lightgray;">"Question, step by step solution and then solution"</span><br>
+#                 **<span style="color: #AEC6CF;">3. Example</span>**<br>
+#                 <span style="color: lightgray;">"Solve the following problem step-by-step:
+#
+#                 Problem: What is the result of 8 multiplied by 7 plus 6?
+#
+#                 Step-by-step solution:
+#                 1. First, calculate the multiplication: 8 * 7 = 56
+#                 2. Then, add 6 to the result: 56 + 6 = 62
+#
+#                 Answer: 62"</span><br>
+#             """,
+#             unsafe_allow_html=True
+#         )
+#
+# with c42:
+#     st.markdown(
+#         """
+#         ### Reason+Act Prompting
+#         """
+#     )
+#     with st.expander("View Explanations and Examples"):
+#         st.markdown(
+#         """
+#             **<span style="color: #AEC6CF;">1. Intuition </span>**<br>
+#             <span style="color: lightgray;">Very similar to Chain-Of-Thought except now
+#             we also teach the LLM to use external tools to get information.</span><br>
+#             **<span style="color: #AEC6CF;">2. Format </span>**<br>
+#             <span style="color: lightgray;">"Question,Think,Action,Result"</span><br>
+#             **<span style="color: #AEC6CF;">3. Example</span>**<br>
+#             <span style="color: lightgray;">"**Question:** Aside from the apple remote, what other
+#             device can control the program apple remote? <br>
+#             **Task:** I need to find out search Apple Remote and find out the devices it was originally programmed to interact with<br>
+#             **Action:** Search [Apple Remote](https://en.wikipedia.org/wiki/Apple_Remote_Desktop)<br>
+#             **Result:** Apple Remote Desktop (ARD) is a Macintosh application produced by Apple Inc., first released on March 14, 2002, that replaced a similar product called Apple Network Assistant"</span><br>
+#         """,
+#             unsafe_allow_html=True
+#         )
+#
+# c51,c52 = st.columns([1,1])
+# with c51:
+#     st.markdown(
+#         """
+#         ### Gameplay Pattern
+#         """
+#     )
+#     with st.expander("View Explanations and Examples"):
+#         st.markdown(
+#             """
+#                 **<span style="color: #AEC6CF;">1. Intuition </span>**<br>
+#                 <span style="color: lightgray;">Imagine you want to learn about a new topic
+#                 , you can format it as a game and play with the LLM.</span><br>
+#                 **<span style="color: #AEC6CF;">2. Format </span>**<br>
+#                 <span style="color: lightgray;">Create a game about X topic. Describe the rules.</span><br>
+#                 **<span style="color: #AEC6CF;">3. Example</span>**<br>
+#                 <span style="color: lightgray;">"Create a game about prompt engineering. Ask me a series of questions
+#                 about prompt engineering and see how many I get right. If I get it wrong correct me."</span><br>
+#             """,
+#             unsafe_allow_html=True
+#         )
+#
+# with c52:
+#     st.markdown(
+#         """
+#         ### Template Prompting
+#         """
+#     )
+#     with st.expander("View Explanations and Examples"):
+#         st.markdown(
+#             """
+#                 **<span style="color: #AEC6CF;">1. Intuition </span>**<br>
+#                 <span style="color: lightgray;">Basically give a template of the output that you want the
+#                 LLM to follow. </span><br>
+#                 **<span style="color: #AEC6CF;">2. Format </span>**<br>
+#                 <span style="color: lightgray;">Task, template </span><br>
+#                 **<span style="color: #AEC6CF;">3. Example</span>**<br>
+#                 <span style="color: lightgray;">"Create a random strength workout for me today with complementary exercises. I am going to provide a template for your output . CAPITALIZED WORDS are my placeholders for content. Try to fit the output into one or more of the placeholders that I list.
+#                 Please preserve the formatting and overall template that I provide.
+#                 This is the template: NAME, REPS @ SETS, MUSCLE GROUPS WORKED, DIFFICULTY SCALE 1-5, FORM NOTES"</span><br>
+#             """,
+#             unsafe_allow_html=True
+#         )
+#
+# c61,c62 = st.columns([1,1])
+#
+# with c61:
+#     st.markdown(
+#         """
+#         ### Meta Language Creation
+#         """
+#     )
+#     with st.expander("View Explanations and Examples"):
+#         st.markdown(
+#         """
+#             **<span style="color: #AEC6CF;">1. Intuition </span>**<br>
+#             <span style="color: lightgray;">Basically teaching the LLM your own
+#             secret language like when you say X you mean Y.</span><br>
+#             **<span style="color: #AEC6CF;">2. Format </span>**<br>
+#             <span style="color: lightgray;">"When I say X, I mean Y (or would like you to do Y)"</span><br>
+#             **<span style="color: #AEC6CF;">3. Example</span>**<br>
+#             <span style="color: lightgray;">"When I say "variations of companies", I mean give me ten different variations of tech companies"</span><br>
+#         """
+#         )
+#
+# with c62:
+#     st.markdown(
+#         """
+#         ### Recipe Prompting
+#         """
+#     )
+#     with st.expander("View Explanations and Examples"):
+#         st.markdown(
+#         """
+#             **<span style="color: #AEC6CF;">1. Intuition </span>**<br>
+#             <span style="color: lightgray;">Asking a question to the LLM and also
+#             letting it know that there exists intermediate steps required.</span><br>
+#             **<span style="color: #AEC6CF;">2. Format </span>**<br>
+#             <span style="color: lightgray;">I would like to achieve X.
+#             I know that I need to perform steps A,B,C. Please provide me with the
+#             necessary steps as well as any missing steps.</span><br>
+#             **<span style="color: #AEC6CF;">3. Example</span>**<br>
+#             <span style="color: lightgray;">"I would like to drive to MBS from Jurong. I know that I want to go through AYR and I don't want to drive more than 300 miles per day.
+#             Provide a complete sequence of steps for me. Fill in any missing steps."</span><br>
+#         """,
+#             unsafe_allow_html=True
+#         )
+#
+# c71,c72 = st.columns([1,1])
+#
+# with c71:
+#     st.markdown(
+#         """
+#         ### Alternative Approach
+#         """
+#     )
+#     with st.expander("View Explanations and Examples"):
+#         st.markdown(
+#         """
+#             **<span style="color: #AEC6CF;">1. Intuition </span>**<br>
+#             <span style="color: lightgray;">To allow the LLM to return users
+#             alternative approaches to solve a problem.</span><br>
+#             **<span style="color: #AEC6CF;">2. Format </span>**<br>
+#             <span style="color: lightgray;"></span>"If there are alternative ways to accomplish a task X that I give you, list the best alternate approaches "<br>
+#             **<span style="color: #AEC6CF;">3. Example</span>**<br>
+#             <span style="color: lightgray;">Just input the above prompt before asking your question or task.</span><br>
+#         """,
+#             unsafe_allow_html=True
+#         )
+#
+# with c72:
+#     st.markdown(
+#         """
+#         ### Outline Expansion
+#         """
+#     )
+#     with st.expander("View Explanations and Examples"):
+#         st.markdown(
+#         """
+#             **<span style="color: #AEC6CF;">1. Intuition </span>**<br>
+#             <span style="color: lightgray;">Give the LLM a topic to provide
+#             an outline on and then proceed to ask it to expand on a certain part.</span><br>
+#             **<span style="color: #AEC6CF;">2. Format </span>**<br>
+#             <span style="color: lightgray;">"Act as an outline expander.
+#             Generate a bullet point outline based on the input that I give you and then ask me for which bullet point you should expand on.
+#             Create a new outline for the bullet point that I select.
+#             At the end, ask me for what bullet point to expand next."</span><br>
+#             **<span style="color: #AEC6CF;">3. Example</span>**<br>
+#             <span style="color: lightgray;">"Act as an outline expander. Generate a bullet point outline based on the input that I give you and then ask me for which bullet point you should expand on. Each bullet can have at most 3-5 sub bullets. The bullets should be numbered using the pattern [A-Z].[i-v].[* through ****]. Create a new outline for the bullet point that I select.  At the end, ask me for what bullet point to expand next. Ask me for what to outline."</span><br>
+#         """,
+#             unsafe_allow_html=True
+#         )
+#