moved to gradio

README.md

@@ -3,12 +3,12 @@ title: Recommendation Engine
 emoji: 🚀
 colorFrom: green
 colorTo: blue
-sdk: streamlit
-sdk_version: 1.38.0
+sdk: gradio
+sdk_version: 5.7.1
 app_file: app.py
 pinned: false
 license: apache-2.0
-tags: ["streamlit", "recommendation", "tensorflow", "deep learning"]
+tags: ["recommendation system", "tensorflow", "deep learning"]
 ---
 
 Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

app.py

@@ -1,14 +1,12 @@
-import streamlit as st
 import pandas as pd
+import gradio as gr
 from datetime import datetime
-from inference import Inference
+from inference import RecommendationEngine
+import spaces
 
 
 class QueryInputForm:
     def __init__(self):
-        # Title of the Streamlit form
-        st.title("E-Commerce Recommendation Engine Demo")
-
         # Predefined options for channel and device type
         self.channel_options = [
             'Paid Social', 'Paid Search - Brand', 'Organic', 'Email - Transactional',
@@ -26,38 +24,94 @@ class QueryInputForm:
         self.default_query_text = "pizza"
 
         # Initialize the recommender engine
-        self.recommender_engine = Inference()
-
-    def display_form(self):
-        # Input fields for user ID, channel, device type, and query text
-        self.channel = st.selectbox("Channel", options=self.channel_options)
-        self.device_type = st.selectbox("Device Type", options=self.device_type_options)
-        self.query_text = st.text_input("Query Text", value=self.default_query_text)
-
-        # Submit button
-        if st.button("Submit"):
-            self.submit()
-
-    def submit(self):
+        self.recommender_engine = RecommendationEngine()
+   
+    @spaces.GPU
+    def get_recommendations(self, channel, device_type, query_text):
         # Pass the query information to the recommender engine
         raw_query = {
-            'user_id': "new_user", # any user will be considered as a new user
-            'channel': self.channel,
-            'device_type': self.device_type,
-            'query_text': self.query_text,
-            'time': datetime.now().strftime("%Y-%m-%d %H:%M:%S.%f"), # querytime
+            'user_id': "new_user",  # any user will be considered as a new user
+            'channel': channel,
+            'device_type': device_type,
+            'query_text': query_text,
+            'time': datetime.now().strftime("%Y-%m-%d %H:%M:%S.%f"),  # query time
         }
 
         # Get recommendations
         self.recommender_engine.get_recommendations(raw_query)
-        self.display_recommendations()
+        recommendations_df = pd.DataFrame(self.recommender_engine.recommendations)
+        recommendations_df = recommendations_df.style.format({'Score': '{:.2f}'})
+        # Return the recommendations as a dataframe
+        return gr.update(value=recommendations_df)
+
 
-    def display_recommendations(self):
-        # Output the recommendations from the inference engine
-        st.write("Top recommendations:")
-        st.dataframe(self.recommender_engine.recommendations, hide_index=True)
+# Instantiate the form
+form = QueryInputForm()
+
+# Gradio interface
+def recommendation_interface(channel, device_type, query_text):
+    return form.get_recommendations(channel, device_type, query_text)
+
+
+with gr.Blocks() as interface:
+    gr.Markdown("<h1 class='title'>E-Commerce Recommendation Engine Demo</h1>")
+    
+    with gr.Row():  # Use Row to place components side by side
+        with gr.Column():
+            channel_dropdown = gr.Dropdown(choices=form.channel_options, label="Channel")
+            device_dropdown = gr.Dropdown(choices=form.device_type_options, label="Device Type")
+            query_input = gr.Textbox(value=form.default_query_text, label="Query Text")
+            submit_button = gr.Button("Submit", elem_id="submit-button")
+        
+        with gr.Column(scale=3):
+            gr.Markdown("<h2>Top Recommendations:</h2>")
+            recommendation_output = gr.Dataframe(
+                show_label=False,
+                headers = [
+                    'Score', 'Product Name', 'Category', 'Price (in cents)', 'Reviews',
+                    'Merchant', 'City', 'State', 'Region',
+                    'Free Shipping', 'Sold Out', 'Editor\'s Pick', 'On Sale',
+                ],
+                interactive=False,
+                elem_id="recommendation-table",
+                max_height=400,
+                column_widths=["90px", "350px", "250px", "90px", "90px", "200px", "150px", "150px", "150px", "90px", "90px", "90px", "90px"]
+            )
+    
+    submit_button.click(
+        recommendation_interface,
+        inputs=[channel_dropdown, device_dropdown, query_input],
+        outputs=recommendation_output,
+    )
 
+# Add custom CSS for styling
+interface.css = """
+.title {
+    color: #E76E00;
+    text-align: center;
+    margin: 40px;
+    margin-bottom: 30px !important;
+    font-size: 36px;
+    font-weight: bold;
+}
+#submit-button {
+    background-color: #E76E00;
+    color: white;
+    border: none;
+    padding: 10px 20px;
+    font-size: 16px;
+    border-radius: 5px;
+    cursor: pointer;
+}
+#submit-button:hover {
+    background-color: #FF8C00;
+}
+#recommendation-table .gradio-header {
+    background-color: #FF8C00; /* Orange header */
+    color: white; /* White text */
+    font-weight: bold; /* Optional: Bold text */
+}
+"""
 
 if __name__ == "__main__":
-    form = QueryInputForm()
-    form.display_form()
+    interface.launch()

inference.py

@@ -2,7 +2,7 @@ import tensorflow as tf
 import os
 
 
-class Inference():
+class RecommendationEngine():
     def __init__(self):
         self.product_features = [
             'product_id', 'product_name', 'category_name', 
@@ -60,30 +60,32 @@ class Inference():
     
     def desired_output(self, item):
         return {
-            'product_name': item['product_name'],
-            'category_name': item['category_name'],
-            'price_in_cents': item['price_in_cents'],
-            'reviews': item['reviews'],
-            'merchant_name': item['merchant_name'],
-            'merchant_state': item['merchant_state'],
-            'merchant_region': item['merchant_region'],
-            'free_shipping': item['free_shipping'],
-            'is_sold_out': item['is_sold_out'],
-            'editor_pick': item['editor_pick'],
-            'on_sale': item['on_sale'],
-            'score': item['score']
+            'Score': item['score'],
+            'Product Name': item['product_name'],
+            'Category': item['category_name'],
+            'Price (in cents)': item['price_in_cents'],
+            'Reviews': item['reviews'],
+            'Merchant': item['merchant_name'],
+            'City': item['merchant_city'],
+            'State': item['merchant_state'],
+            'Region': item['merchant_region'],
+            'Free Shipping': item['free_shipping'],
+            'Sold Out': item['is_sold_out'],
+            'Editor\'s Pick': item['editor_pick'],
+            'On Sale': item['on_sale']
         }
 
+
     def order_by_score(self, recs):
         rec_list = list(recs.as_numpy_iterator())
 
         # Descending order by score
-        return sorted(rec_list, key=lambda x: x['score'], reverse=True)
+        return sorted(rec_list, key=lambda x: x['Score'], reverse=True)
 
     def decode_values(self, item):
         for key, value in item.items():
             if isinstance(value, bytes):
                 item[key] = value.decode('utf-8')
-            if key == 'score':
+            if key == 'Score':
                 item[key] = value[0]
         return item