Update app.py

app.py

@@ -29,6 +29,46 @@ dataset_choice = st.selectbox(
     ["Sephora Order Complete Dataset", "Reliance Digital Order Complete Dataset"]
 )
 
+# HTML and CSS for a hover tooltip
+tooltip_html = """
+<style>
+.tooltip {
+  position: relative;
+  display: inline-block;
+  border-bottom: 1px dotted black;
+}
+
+.tooltip .tooltiptext {
+  visibility: hidden;
+  width: 120px;
+  background-color: black;
+  color: #fff;
+  text-align: center;
+  border-radius: 5px;
+  padding: 5px;
+  position: absolute;
+  z-index: 1;
+  bottom: 150%;
+  left: 50%;
+  margin-left: -60px;
+  opacity: 0;
+  transition: opacity 0.3s;
+}
+
+.tooltip:hover .tooltiptext {
+  visibility: visible;
+  opacity: 1;
+}
+</style>
+
+<div class="tooltip">Hover over me
+  <span class="sachith">Tooltip text</span>
+</div>
+"""
+
+# Inject the custom HTML
+st.markdown(tooltip_html, unsafe_allow_html=True)
+
 if dataset_choice == "Sephora Order Complete Dataset":
     list_of_products_to_display = {}
     for itemid in (list(all_products_with_names_sephora.keys())): #for items in the total list of items in all transactions
@@ -43,10 +83,9 @@ if dataset_choice == "Sephora Order Complete Dataset":
     query_id = name_to_id[selected_product_name]
     url = "https://www.sephora.com/"
     st.write("Created using the clickstream order-completed and catalog data from [Sephora.com](%s)" % url)
+    st.write("Cost of chosen item:", str(round(item_costs_sephora_data[query_id], 2)))
     query_url = images_sephora[int(query_id)]
     st.image(query_url, width=500)
-    st.write("Product Cost:", str(round(item_costs_sephora_data[query_id], 2)))
-
 
 
 if dataset_choice == "Reliance Digital Order Complete Dataset": 
@@ -64,7 +103,7 @@ if dataset_choice == "Reliance Digital Order Complete Dataset":
     url = "https://www.reliancedigital.in/"
     st.write("Created using the clickstream order-completed data from [reliancedigital.com](%s)" % url)
     st.write("An item is only recommended if it costs less than the chosen item.")
-    st.write("Product Cost:", str(round(item_costs_digital_data[query_id], 2)))
+    st.write("Cost of chosen item:", str(round(item_costs_digital_data[query_id], 2)))
 
 
 
@@ -151,7 +190,7 @@ with tab2:
                 count_info = f"Co-purchased {copurchase_count[index]}/{transactions_with_query_item} times"
                 item_counts_info = f"item-count {item_counts[index]} "
                 confidence_info = f"Confidence: {round(confidence_list[index], 3)}"
-                item_cost_info_sephora = f"Product cost: {round(item_costs_sephora[index],2)}"
+                item_cost_info_sephora = f"Cost: {round(item_costs_sephora[index],2)}"
 
                 
                 # Use <br> to display each line separately
@@ -174,6 +213,7 @@ with tab2:
             item_ids = [item for item in corrected_fp_growth_results[query_id]]
             item_counts = [corrected_fp_growth_results[query_id][item] for item in corrected_fp_growth_results[query_id]]
             item_costs = [item_costs_digital_data.get(item, "cost missing") for item in corrected_fp_growth_results[query_id]]
+            no_image = "https://upload.wikimedia.org/wikipedia/commons/6/65/No-Image-Placeholder.svg"
 
 
             confidence_list = []
@@ -202,10 +242,11 @@ with tab2:
                 count_info = f"Co-purchased {copurchase_count[index]}/{transactions_with_querry_item} times"
                 item_counts_info = f"item-count {item_counts[index]} "
                 confidence_info = f"Confidence: {round(confidence_list[index], 3)}"
-                item_cost_info = f"Product cost: {round(item_costs[index],3)}"
+                item_cost_info = f"Cost: {round(item_costs[index],3)}"
                 
                 # Use <br> to display each line separately
                 mid_section += f"""<div class="item">
+                                    <div id="image-container"><img src='{no_image}' /></div>
                                     <p style="font-size: 16px; font-weight: bold; white-space: normal; word-wrap: break-word;">{str(product_names[index])}</p>
                                     <p>{count_info}<br>{confidence_info}<br>{item_cost_info}</p>
                                 </div>"""
@@ -231,6 +272,7 @@ with tab3:  # historical transactions tab
                 st.markdown(f"**Transaction {i+1}:** Placed on {transaction['event_timestamp']} by {transaction['user_id']}", unsafe_allow_html=True)
 
                 transaction_names = [all_products_with_names_sephora.get(str(item), "Unknown Product") for item in transaction["transaction"]]
+                no_image = "https://upload.wikimedia.org/wikipedia/commons/6/65/No-Image-Placeholder.svg"
 
                 item_images = []
                 for item in corrected_fp_growth_results_sephora.get(query_id, []):
@@ -290,6 +332,7 @@ with tab3:  # historical transactions tab
                 transaction_section = ""
                 for index, image_url in enumerate(transaction_names):
                     transaction_section += f"""<div class="item">
+                                                    <div id="image-container"><img src='{no_image}' /></div>
                                                     <p style="font-size: 16px; font-weight: bold; white-space: normal; word-wrap: break-word;">{str(transaction_names[index])}</p>
                                             </div>"""