Upload app.py

app.py

@@ -0,0 +1,299 @@
+import pickle
+import streamlit as st
+from html_information2 import html2
+
+import streamlit as st
+
+st.set_page_config(page_title="My App", page_icon=":money_with_wings:", layout="wide", initial_sidebar_state="auto")
+st.header("Frequently Bought Together Recommendations")
+
+def read_pickle_files(pickle_file):
+    with open(pickle_file, 'rb') as f:
+        return pickle.load(f)
+
+# Load sephora pickle files
+corrected_fp_growth_results_sephora = read_pickle_files("sephora_corrected_fp_growth_results_cleaned.pkl")
+all_products_with_names_sephora = read_pickle_files ("item_catalog.pkl")
+dictionary_of_transactions_sephora = read_pickle_files("transaction_metadata.pkl")
+images_sephora = read_pickle_files("uid_url_map.pkl")
+
+# Load digital pickle files
+corrected_fp_growth_results = read_pickle_files("corrected_fp_growth_results.pkl")
+all_products_with_names = read_pickle_files ("all_products_with_names.pkl")
+dictionary_of_transactions = read_pickle_files("reliance_digital_transactions.pkl")
+
+# Dropdown for selecting the dataset
+dataset_choice = st.selectbox(
+    "Select A Dataset", 
+    ["Sephora Order Complete Dataset", "Reliance Digital Order Complete Dataset"]
+)
+
+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
+        if itemid in (list(corrected_fp_growth_results_sephora.keys())): #if the item has a result from fp-growth
+            list_of_products_to_display[itemid]= all_products_with_names_sephora[itemid] #show it in the drop down menu
+    
+
+    name_to_id = {name: product_id for product_id, name in list_of_products_to_display.items()}    # Reverse the dictionary to map product names to IDs
+    selected_product_name = st.selectbox('Select A Product:', list(name_to_id.keys()))    # Create a dropdown menu with the product names
+
+    # Get the corresponding product_id
+    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)
+    query_url = images_sephora[int(query_id)]
+    st.image(query_url, width=500)
+
+
+if dataset_choice == "Reliance Digital Order Complete Dataset": 
+    list_of_products_to_display = {}
+    for itemid in (list(all_products_with_names.keys())): #for items in the total list of items in all transactions
+        if itemid in (list(corrected_fp_growth_results.keys())): #if the item has a result from fp-growth
+            list_of_products_to_display[itemid]= all_products_with_names[itemid] #show it in the drop down menu
+
+    name_to_id = {name: product_id for product_id, name in list_of_products_to_display.items()}    # Reverse the dictionary to map product names to IDs
+    selected_product_name = st.selectbox('Select A Product:', list(name_to_id.keys()))    # Create a dropdown menu with the product names
+
+    # Get the corresponding product_id
+    query_id = name_to_id[selected_product_name]
+    url = "https://www.reliancedigital.in/"
+    st.write("Created using the clickstream order-completed data from [reliancedigital.com](%s)" % url)
+
+# Inject custom CSS for the tab headings
+st.markdown(
+    """
+    <style>
+    /* Style the tab container */
+    div[data-testid="stTabs"] button {
+        background-color: #e0e0e0; /* Light grey background */
+        color: #333333; /* Dark grey text color */
+        font-size: 18px; /* Increase font size */
+        font-weight: bold; /* Make text bold */
+        padding: 10px 20px; /* Add some padding to the tabs */
+        border-radius: 10px; /* Rounded corners */
+        border: none; /* Remove default border */
+        margin: 5px; /* Add margin between tabs */
+        transition: background-color 0.3s ease; /* Add hover effect */
+    }
+    
+    /* Hover effect for tabs */
+    div[data-testid="stTabs"] button:hover {
+        background-color: #b0b0b0; /* Darker grey on hover */
+        color: #333333; /* Keep text color the same */
+    }
+    
+    /* Active tab styling */
+    div[data-testid="stTabs"] button[aria-selected="true"] {
+        background-color: #808080; /* Dark grey for active tab */
+        color: white; /* White text for active tab */
+        font-size: 20px; /* Larger font size for active tab */
+    }
+    </style>
+    """,
+    unsafe_allow_html=True
+)
+
+tab2, tab3 = st.tabs(["Frequently Bought Together Demo",  "Historical Order Data"])
+
+with tab2:
+    if dataset_choice == "Sephora Order Complete Dataset":
+        if query_id in corrected_fp_growth_results_sephora:
+
+            # Separate the sorted items into IDs and counts
+            item_ids = [item for item in corrected_fp_growth_results_sephora[query_id]]
+            item_counts = [corrected_fp_growth_results_sephora[query_id][item] for item in corrected_fp_growth_results_sephora[query_id]]
+            item_image = [images_sephora[int(item)] for item in corrected_fp_growth_results_sephora[query_id]]
+
+            confidence_list = []
+            transactions_list_sephora = []
+
+            for i in dictionary_of_transactions_sephora:
+                transactions_list_sephora.append(i["transaction"])
+
+            transactions_with_querry_item = len([transaction for transaction in transactions_list_sephora if int(query_id) in transaction])
+            copurchase_count = []
+
+            # Generate a list of product names to display
+            product_names = []
+            for each_item in corrected_fp_growth_results_sephora[query_id]:
+                product_names.append(all_products_with_names_sephora[each_item])
+
+            for reccomended_item in item_ids:
+                transactions_with_item_and_query_item = []
+                transactions_with_item_and_query_item.extend([transaction for transaction in transactions_list_sephora if (int(reccomended_item) in transaction) and (int(query_id) in transaction)])
+                number_of_transactions_with_reccomended_item_and_query_item = len(transactions_with_item_and_query_item)
+                copurchase_count.append(number_of_transactions_with_reccomended_item_and_query_item)
+                confidence_list.append(number_of_transactions_with_reccomended_item_and_query_item/transactions_with_querry_item)
+        
+            mid_section = ""
+            for index, value in enumerate(product_names):
+                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)}"
+                
+                # Use <br> to display each line separately
+                mid_section += f"""<div class="item">
+                                    <div id="image-container"><img src='{item_image[index]}' /></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></p>
+                                </div>"""
+                
+
+            mid_html = html2 + mid_section + """</div></div></body>"""
+            st.markdown(mid_html, unsafe_allow_html=True)
+        else:
+            st.write("No frequent purchases found for this item.")
+
+    if dataset_choice == "Reliance Digital Order Complete Dataset":
+        if query_id in corrected_fp_growth_results:
+
+            # Separate the sorted items into IDs and counts
+            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]]
+
+            confidence_list = []
+            transactions_list_digital = []
+
+            for i in dictionary_of_transactions:
+                transactions_list_digital.append(i["transaction"])
+
+            transactions_with_querry_item = len([transaction for transaction in transactions_list_digital if query_id in transaction])
+            copurchase_count = []
+
+            # Generate a list of product names to display
+            product_names = []
+            for each_item in corrected_fp_growth_results[query_id]:
+                product_names.append(all_products_with_names[each_item])
+
+            for reccomended_item in item_ids:
+                transactions_with_item_and_query_item = []
+                transactions_with_item_and_query_item.extend([transaction for transaction in transactions_list_digital if (reccomended_item in transaction) and (query_id in transaction)])
+                number_of_transactions_with_reccomended_item_and_query_item = len(transactions_with_item_and_query_item)
+                copurchase_count.append(number_of_transactions_with_reccomended_item_and_query_item)
+                confidence_list.append(number_of_transactions_with_reccomended_item_and_query_item/transactions_with_querry_item)
+        
+            mid_section = ""
+            for index, value in enumerate(product_names):
+                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)}"
+                
+                # Use <br> to display each line separately
+                mid_section += f"""<div class="item">
+                                    <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></p>
+                                </div>"""
+                
+
+            mid_html = html2 + mid_section + """</div></div></body>"""
+            st.markdown(mid_html, unsafe_allow_html=True)
+        else:
+            st.write("No frequent purchases found for this item.")
+
+with tab3: #historical transactions tab
+    if dataset_choice == "Sephora Order Complete Dataset":
+        st.subheader("Historical Transactions With Chosen Product (shows maximum 20)")
+
+        example_transactions = []
+        for transaction_dict in dictionary_of_transactions_sephora: 
+            if int(query_id) in transaction_dict["transaction"]:
+                example_transactions.append(transaction_dict)
+        
+        if example_transactions:
+            # Begin constructing the carousel for transactions
+            for i, transaction in enumerate(example_transactions):
+                st.markdown(f"**Transaction {i+1}:** Placed on {transaction['event_timestamp']} by {transaction['user_id']}", unsafe_allow_html=True)
+
+                transaction_names = []
+                for i in transaction["transaction"]:
+                    transaction_names.append(all_products_with_names_sephora[str(i)])
+                item_image = [images_sephora[int(item)] for item in corrected_fp_growth_results_sephora[query_id]]
+
+
+                # Build the HTML for displaying the transaction in a carousel format
+                transaction_section = ""
+                for index, image_url in enumerate(transaction_names):
+                    transaction_section += f"""<div class="item">
+                                                    <div id="image-container"><img src='{item_image[index]}' /></div>
+                                                    <p style="font-size: 16px; font-weight: bold; white-space: normal; word-wrap: break-word;">{str(transaction_names[index])}</p>
+                                            </div>"""
+
+                # Complete the carousel HTML structure
+                transaction_html = html2 + transaction_section + """</div></div></body>"""
+
+                # Render the carousel for each transaction
+                st.markdown(transaction_html, unsafe_allow_html=True)
+
+        else:
+            st.write("No transactions found for this item.")
+
+
+    if dataset_choice == "Reliance Digital Order Complete Dataset":
+        st.subheader("Historical Transactions With Chosen Product (shows maximum 20)")
+
+        example_transactions = []
+        for transaction_dict in dictionary_of_transactions: 
+            if query_id in transaction_dict["transaction"]:
+                example_transactions.append(transaction_dict)
+
+        if example_transactions:
+            # Begin constructing the carousel for transactions
+            for i, transaction in enumerate(example_transactions):
+                st.markdown(f"**Transaction {i+1}:** Placed on {transaction['order_date']} by {transaction['customer_id']} from {transaction['delivery_city']}", unsafe_allow_html=True)
+
+                transaction_names = []
+                for i in transaction["transaction"]:
+                    transaction_names.append(all_products_with_names[i])
+
+                # Build the HTML for displaying the transaction in a carousel format
+                transaction_section = ""
+                for index, image_url in enumerate(transaction_names):
+                    transaction_section += f"""<div class="item">
+                                                    <p style="font-size: 16px; font-weight: bold; white-space: normal; word-wrap: break-word;">{str(transaction_names[index])}</p>
+                                            </div>"""
+
+                # Complete the carousel HTML structure
+                transaction_html = html2 + transaction_section + """</div></div></body>"""
+
+                # Render the carousel for each transaction
+                st.markdown(transaction_html, unsafe_allow_html=True)
+
+        else:
+            st.write("No transactions found for this item.")
+
+
+
+# Inject custom CSS for the 'Know More' button
+st.markdown(
+    """
+    <style>
+    .know-more-button {
+        background-color: #808080; /* Dark grey background */
+        color: white !important; /* Force white text color */
+        font-size: 18px; /* Font size */
+        font-weight: bold; /* Bold text */
+        padding: 10px 20px; /* Padding */
+        border-radius: 10px; /* Rounded corners */
+        border: none; /* Remove default border */
+        cursor: pointer; /* Mouse pointer */
+        text-align: center;
+        text-decoration: none; /* Remove underline */
+        display: inline-block; /* Make it inline */
+        transition: background-color 0.3s ease;
+    }
+    .know-more-button:hover {
+        background-color: #b0b0b0; /* Lighter grey background on hover */
+        color: #333333 !important; /* Dark grey text on hover */
+        text-decoration: none; /* Keep underline removed on hover */
+    }
+    </style>
+    """,
+    unsafe_allow_html=True
+)
+
+# Add the 'Know More' button with the link and no underline
+st.markdown(
+    '<a href="https://gofynd.quip.com/fOONA5yDkSr2/Frequently-Bought-Together-Recommendations" class="know-more-button">Know More</a>',
+    unsafe_allow_html=True
+)