Add Frequently bought together streamlit app

app.py

@@ -1,4 +1,67 @@
+import pickle
 import streamlit as st
+from html_information import html
 
-x = st.slider('Select a value')
-st.write(x, 'squared is', x * x)
+
+def read_pickle_files(pickle_file):
+    with open(pickle_file, 'rb') as f:
+        return pickle.load(f)
+
+
+def streamlit_carousel(header_name: str, rec_item_url: list,
+                       rec_item_name: list) -> None:
+    st.header(header_name)
+    if header_name == "Up-Sell Recommendations" or header_name == "Cross-Sell Recommendations":
+        st.write("Based on Products added to the Cart")
+    mid_section = ""
+    for index, value in enumerate(rec_item_url):
+        mid_section += """<div class="item"><div id="image-container"><img src='""" + str(value) + """' /></div><p>""" + str(rec_item_name[index]) + """</p></div>"""
+
+    mid_html = html + mid_section + """</div></div></body>"""
+    st.markdown(mid_html, unsafe_allow_html=True)
+
+def get_mapped_values(uid_list, dict_map):
+    res = []
+    for val in uid_list:
+        try:
+            res.append(dict_map[val])
+        except:
+            continue
+    return res
+
+def carousel_wrapper(rec_list, query_id, uid_media_map, uid_name_map, header_name, exception_header_name):
+    for val in rec_list:
+        if val["product_id"] == query_id:
+            text_rec_list = val["recommendations"]
+            if text_rec_list:
+                text_rec_url = []
+                text_rec_name = []
+                for val in text_rec_list:
+                    text_rec_url.append(uid_media_map[val["product_id"]])
+                    text_rec_name.append(uid_name_map[val["product_id"]])
+                streamlit_carousel(header_name, text_rec_url, text_rec_name)
+            else:
+                st.write(exception_header_name)
+
+
+filtered_products_list = read_pickle_files("filtered_products_list.pkl") 
+recommendation_products_list = read_pickle_files("recommendation_products_list.pkl")
+
+product_dict = {item['product_id']: item for item in filtered_products_list}
+
+uid_name_map = read_pickle_files("uid_name_map.pkl") 
+uid_url_map = read_pickle_files("uid_url_map.pkl") 
+
+
+st.set_page_config(page_title="My App", page_icon=":guardsman:", layout="wide", initial_sidebar_state="auto")
+st.header("Frequently Bought Together Recommendations")
+uid_list = list(product_dict)
+uid_name_list = get_mapped_values(uid_list, uid_name_map)
+st.subheader("Choose a Product")
+index = st.selectbox("Product List", range(len(uid_name_list)), format_func=lambda x: uid_name_list[x])
+query_id = uid_list[index]
+query_url = uid_url_map[query_id]
+st.image(query_url, width=200)
+
+
+carousel_wrapper(recommendation_products_list, query_id, uid_url_map, uid_name_map, "Frequently bought together items", "No BT recommendations found")

filtered_products_list.pkl

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:5c43b0ccf5edb9b29730a864e4ee419447ecc6d9b6454ea91a1308a6016251da
+size 135198

html_information.py

@@ -0,0 +1,69 @@
+html = """
+<style>
+ body{
+  font-family: sans-serif;
+}
+h1{
+  font-weight: 100;
+}
+.container{
+  width: 100%;
+  display:block;
+  overflow:hidden;
+}
+.carousel{
+  display:block;
+  width: 100%;
+  height: 320px;
+  background: white;
+  overflow-x: scroll;
+  padding: 10px;
+  margin: 0;
+  white-space: nowrap; 
+  border-top: 2px solid rgba(0, 0, 0, 0.1);
+  border-bottom: 2px solid rgba(0, 0, 0, 0.1);
+}
+.item {
+    display: inline-block;
+    overflow: hidden;
+    width: 250px;
+    margin: 0 10px;
+    height: calc(100%);
+    background: rgba(0, 0, 0, 0.05) no-repeat center center;
+    background-size: cover;
+    position:relative;
+    border-radius: 20px;
+    box-shadow: 0 0 10px #dfdfdf;
+}
+.item p {
+    padding: 20px;
+    word-break: break-all;
+    white-space: break-spaces;
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-line-clamp: 4;
+    -webkit-box-orient: vertical;
+    margin: 0;
+    align: center;
+}
+#image-container{
+  width: 100%;
+  height: 60%;
+  text-align:center;
+  font-size: 9em;
+  color: white;
+  overflow: hidden;
+}
+#image-container img{
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+}
+
+</style>
+</head>
+<body>
+<div class="container">
+  <div class="carousel">
+
+"""

recommendation_products_list.pkl

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:1d247deb860fbdcd24a13d63b30c56b937658e0dabfbcd592e67e22de0ec40f4
+size 146662

uid_name_map.pkl

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:897e0af2023a81ec6720d9bff75195f3d775e955b577b2508d5391e9bedea787
+size 943869

uid_url_map.pkl

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:d6c7ba7fb131e191bd0aea75aaf80ed22d6916c359bcd8b2aed3f40096190ff4
+size 2905809