Create interface.py

interface.py

@@ -0,0 +1,83 @@
+# interface.py
+import gradio as gr
+from recommendations import recommend_products, generate_contextual_message
+from utils import process_csv
+
+css = """
+.lg.svelte-cmf5ev {background-color: #8A2BE2 !important;}
+.user.svelte-1pjfiar.svelte-1pjfiar.svelte-1pjfiar {padding: 7px !important;border-radius: 10px 10px 0px 10px;width: fit-content;background-color: #E6E6FA !important ;border-color:#E6E6FA !important}
+.bot.svelte-1pjfiar.svelte-1pjfiar.svelte-1pjfiar {padding: 7px !important;border-radius: 10px 10px 10px 0px;width : fit-content !important;border: 1.5px solid #9370DB !important;background: #FFFFFF 0% 0% no-repeat padding-box !important;box-shadow: 0px 3px 6px #0000001A !important;border: 2px solid #9370DB !important;}
+.primary.svelte-cmf5ev {box-shadow: 0px 3px 6px #0000001A !important;border: 2px solid #9370DB !important;background: #8A2BE2 !important;width: fit-content;}
+.primary.svelte-cmf5ev {color: white !important}
+textarea.scroll-hide.svelte-1f354aw {font-family:'Roboto','Arial',sans-serif;font-size:14px}
+label.svelte-1b6s6s { background: #9370DB 0% 0% no-repeat padding-box;color: white;width: 100%;}
+label.svelte-1b6s6s {background: #9370DB 0% 0% no-repeat padding-box;color: white;width: 100%;font-size:20px;font-family:'Roboto','Arial',sans-serif; border-radius: 0px 0px 10px 10px;}
+.wrapper.svelte-nab2ao{background-color : #F7F7F7 }
+svg.iconify.iconify--carbon{width:15px; height:15px}
+.thumbnail-item.svelte-fiatpe.svelte-fiatpe:hover {--ring-color: #9370DB !important;}
+"""
+
+default_chat = [["Welcome! I'm your AI-powered product recommendation bot. Ask me anything about finding the perfect product for you.", "I'm here to assist you with any product-related inquiries. Let's find what you need!"]]
+
+# Gradio interface functions
+def handle_file_upload(file, openai_api_key, pinecone_api_key, pinecone_env):
+    return process_csv(file, openai_api_key, pinecone_api_key, pinecone_env)
+
+def display_recommendations(user_input, openai_api_key, pinecone_api_key, pinecone_env, system_prompt):
+    recommendations = recommend_products(user_input, openai_api_key, pinecone_api_key, pinecone_env)
+    contextual_message = generate_contextual_message(user_input, recommendations, openai_api_key, system_prompt)
+    return recommendations, contextual_message
+
+def update_outputs(query_input, openai_api_key, pinecone_api_key, pinecone_env, chat_history, system_prompt):
+    recommendations, contextual_message = display_recommendations(query_input, openai_api_key, pinecone_api_key, pinecone_env, system_prompt)
+    
+    # Update chat history
+    new_chat_history = chat_history + [[query_input, contextual_message]]
+    
+    return recommendations, new_chat_history, gr.update(value="")
+
+# Create Gradio Interface
+def build_interface():
+    with gr.Blocks(title="AI Smart Shopper", head="True", css=css) as interface:
+        gr.Markdown("""<div style="text-align: center; font-weight: bold;"> <h1>AI Smart Shopper</h1> </div>""")
+        
+        with gr.Tab("API Keys"):
+            openai_api_key_input = gr.Textbox(label="OpenAI API Key", type="password")
+            pinecone_api_key_input = gr.Textbox(label="Pinecone API Key", type="password")
+            pinecone_env_input = gr.Textbox(label="Pinecone Environment", placeholder="e.g., us-east-1")
+            system_prompt_input = gr.Textbox(label="System Prompt", placeholder="Enter a system prompt for the assistant...")
+
+        with gr.Tab("Upload Catalog"):
+            upload_button = gr.File(label="Upload CSV", type="filepath")
+            output = gr.Textbox()
+            upload_button.upload(handle_file_upload, inputs=[upload_button, openai_api_key_input, pinecone_api_key_input, pinecone_env_input], outputs=output)
+        
+        with gr.Tab("Get Recommendations"):
+            with gr.Row():
+                with gr.Column(scale=1):
+                    chatbot = gr.Chatbot(value=default_chat, label="Recommender Chatbot", show_label=True)
+                    query_input = gr.Textbox(label="Enter your product preference...", show_label=False, placeholder="Type your query here...")
+                    with gr.Row():
+                        with gr.Column(scale=1, min_width=150):
+                            recommend_button = gr.Button("Get Recommendations")
+                        with gr.Column(scale=1, min_width=150):
+                            clear_button = gr.Button("Clear")
+                    # Define state for chat history
+                    chat_history = gr.State([])
+
+                    # Define outputs
+                with gr.Column(scale=1):
+                    recommendations_output = gr.Gallery(label="Recommendations For You", show_label=False, elem_id="gallery", columns=[3], rows=[1], object_fit="contain", height="auto", scale=5)
+
+                recommend_button.click(
+                    update_outputs,
+                    inputs=[query_input, openai_api_key_input, pinecone_api_key_input, pinecone_env_input, chat_history, system_prompt_input],
+                    outputs=[recommendations_output, chatbot, query_input]
+                )
+
+                clear_button.click(
+                    lambda: (gr.update(value=default_chat), gr.update(value=""), gr.update(value=[]), gr.update(value=[])),
+                    outputs=[chatbot, query_input, chat_history, recommendations_output]
+                )
+                
+    return interface