Fix gif and add more info

streamlit_app.py

@@ -69,6 +69,7 @@ def display_chat_messages() -> None:
 )
 
 with st.sidebar:
+    st.title("🔮 Magic Chat")
     st.subheader("The Generative Gathering")
     st.markdown(
         """Magic Chat is a chatbot built with [Streamlit](https://streamlit.io/) and [Weaviate](https://weaviate.io/) to search for [Magic the Gathering](https://magic.wizards.com/en) cards. 
@@ -227,7 +228,7 @@ def display_chat_messages() -> None:
         """
         This project is a submission for the [Streamlit Connections Hackathon 2023](https://discuss.streamlit.io/t/connections-hackathon/47574).
         It delivers a Streamlit connector for the open-source vector database, [Weaviate](https://weaviate.io/). 
-        Magic Chat is using the Weaviate connector to search through [Magic The Gathering](https://magic.wizards.com/en) cards with various search options, such as BM25, Semantic Search, Hybrid Search and Generative Search. 
+        Magic Chat uses the Weaviate connector to search through [Magic The Gathering](https://magic.wizards.com/en) cards with various search options, such as BM25, Semantic Search, Hybrid Search and Generative Search. 
         You can find the submission in this [GitHub repo](https://github.com/weaviate/st-weaviate-connection/tree/main)
         """
     )
@@ -239,24 +240,24 @@ def display_chat_messages() -> None:
 - Power, Toughness, Rarity
 - Set name and Card description """
     )
-    st.subheader("How it works")
+    st.subheader("How the demo works")
     st.markdown(
-        """The demo offers four search options with defined GraphQL queries:
+        """The demo offers four search options with defined GraphQL queries, which you can use to search for various Magic cards. 
+        You can search for card types such as "Vampires", "Humans", "Wizards", or you can search for abilities, mana color, descriptions, and more.
+        If you're interested you can read more about the anatomy of a Magic card in this [documentation from the Magic Academy](https://magic.wizards.com/en/news/feature/anatomy-magic-card-2006-10-21).
 """
     )
-    st.image("./img/anim.gif")
-    st.divider()
     st.markdown(
         """The first is the **BM25 search**, 
         it's a method used by search engines to rank documents based on their relevance to a given query, 
-        factoring in both the frequency of keywords and the length of the document. 
+        factoring in both the frequency of keywords and the length of the document. In simple terms, we're conducting keyword matching.
         We can simply pass a query to the `query` parameter ([see docs](https://weaviate.io/developers/weaviate/search/bm25))"""
     )
     st.code(
         """
         {
             Get {
-                Card(limit: {card_limit}, bm25: { query: "{query_input}" }) 
+                Card(limit: {card_limit}, bm25: { query: "Vampires with flying ability" }) 
                 {
                     ...
                 }
@@ -266,14 +267,14 @@ def display_chat_messages() -> None:
     )
     st.markdown(
         """The second option is **Vector search**, a method used to find and rank results based on their similarity to a given search query. 
-        Instead of matching keywords, it understands the context and meaning behind the query, offering relevant and nuanced results. 
+        Instead of matching keywords, it understands the context and meaning behind the query, offering relevant and more semantic related results. For example, when we search for "Vampires" we might also get cards like a "Bat" or "Undead" because they are semantically related.
         We use the `nearText` function in which we pass our query to the `concepts` parameter ([see docs](https://weaviate.io/developers/weaviate/api/graphql/search-operators#neartext))"""
     )
     st.code(
         """
         {
             Get {
-                Card(limit: {card_limit}, nearText: { concepts: ["{query_input}"] }) 
+                Card(limit: {card_limit}, nearText: { concepts: ["Vampires with flying ability"] }) 
                 {
                     ...
                 }
@@ -290,7 +291,7 @@ def display_chat_messages() -> None:
         """
         {
             Get {
-                Card(limit: {card_limit}, hybrid: { query: "{input}" alpha:0.5 }) 
+                Card(limit: {card_limit}, hybrid: { query: "Vampires with flying ability" alpha:0.5 }) 
                 {
                     ...
                 }
@@ -300,14 +301,14 @@ def display_chat_messages() -> None:
     )
     st.markdown(
         """The last option is **Generative search** which is an advanced method that combines information retrieval with AI language models. 
-        In our configuration, it retrieves results with **Hybrid search** and passes them to a `gpt-3.5-turbo model` to determine the best Magic card based on the user query. 
+        In our configuration, it retrieves results with **Hybrid search** and passes them to a `gpt-3.5-turbo model` to determine the best Magic card based on the user query. For this, we rely on its knowledge about Magic The Gathering, but this model could be easily exchanged. 
         We use the `generate` module and `groupedResult` task which uses the data of the result as context for the given prompt and query. ([see docs](https://weaviate.io/developers/weaviate/modules/reader-generator-modules/generative-openai))"""
     )
     st.code(
         """
         {
             Get {
-                Card(limit: {card_limit}, hybrid: { query: "{input}" alpha:0.5 }) 
+                Card(limit: {card_limit}, hybrid: { query: "Vampires with flying ability" alpha:0.5 }) 
                 {
                     _additional {
                         generate(
@@ -324,6 +325,17 @@ def display_chat_messages() -> None:
         }""",
         language="graphql",
     )
+    st.subheader("Future ideas")
+    st.markdown(
+        """Magic The Gathering is a very complex and exciting game, and there were many ideas we got when building this demo. 
+        We thought about an actual deck builder interface, where you could search for similar cards or predict the next card based on your already established deck. 
+        Or even a meta-finder that simulates battles between two sets of cards, trying out different combinations and more. With Magic, the possibilities for an exciting demo are endless, and we hope to enhance the demo further!
+"""
+    )
+
+col1, col2, col3 = st.columns([0.2, 0.5, 0.2])
+
+col2.image("./img/anim.gif")
 
 # User Configuration Sidebar
 with st.sidebar:
@@ -360,19 +372,42 @@ def display_chat_messages() -> None:
 # Example prompts
 example_prompts = [
     "You gain life and enemy loses life",
-    "Vampires for black deck with flying",
-    "Blue and green sorcery cards",
+    "Vampires for black deck with flying ability",
+    "Blue and green colored sorcery cards",
+    "White card with protection from black",
+    "The famous 'Black Lotus' card",
+    "Wizard card with Vigiliance ability",
+]
+
+example_prompts_help = [
+    "Look for a specific card effect",
+    "Search for card type: 'Vampires', card color: 'black', and ability: 'flying'",
+    "Color cards and card type",
+    "Specifc card effect to another mana color",
+    "Search for card names",
+    "Search for card types with specific abilities",
 ]
 
 button_cols = st.columns(3)
+button_cols_2 = st.columns(3)
+
 button_pressed = ""
-if button_cols[0].button(example_prompts[0]):
+
+if button_cols[0].button(example_prompts[0], help=example_prompts_help[0]):
     button_pressed = example_prompts[0]
-elif button_cols[1].button(example_prompts[1]):
+elif button_cols[1].button(example_prompts[1], help=example_prompts_help[1]):
     button_pressed = example_prompts[1]
-elif button_cols[2].button(example_prompts[2]):
+elif button_cols[2].button(example_prompts[2], help=example_prompts_help[2]):
     button_pressed = example_prompts[2]
 
+elif button_cols_2[0].button(example_prompts[3], help=example_prompts_help[3]):
+    button_pressed = example_prompts[3]
+elif button_cols_2[1].button(example_prompts[4], help=example_prompts_help[4]):
+    button_pressed = example_prompts[4]
+elif button_cols_2[2].button(example_prompts[5], help=example_prompts_help[5]):
+    button_pressed = example_prompts[5]
+
+
 if prompt := (st.chat_input("What cards are you looking for?") or button_pressed):
     # Display user message in chat message container
     with st.chat_message("user"):