06 June, 2024

Bringing AI to Your Fashion Shop: Meet ShopBot, Your Friendly Shopping Assistant! 🛒

Welcome to the future of online shopping! Imagine having a friendly assistant right at your fingertips, ready to help you navigate through a variety of stylish clothing, accessories, and more. Say hello to ShopBot, an AI-powered assistant for your Fashion Shop, designed to enhance your shopping experience and make it more enjoyable than ever.

In this blog post, we’ll try to simulate a shopping store and dive into the exciting world of AI in e-commerce, showcase how ShopBot works, and provide you with all the code snippet to get started with your very own AI shopping assistant.

Why AI in E-Commerce?

Artificial Intelligence has revolutionized many industries, and e-commerce is no exception. Here are a few reasons why integrating AI into your online store can be a game-changer:

  • Personalized Shopping Experience: AI can tailor recommendations based on customer preferences and browsing history.
  • 24/7 Customer Support: AI chatbots can assist customers at any time, providing instant responses and support.
  • Efficient Navigation: AI can help customers find products quickly and easily, enhancing their overall shopping experience.

Introducing ShopBot

ShopBot is an AI assistant designed specifically for aFashion Shop. It assists customers in browsing products, providing information, and guiding them through the checkout process. Let’s see how you can create your very own ShopBot using Python, Streamlit and Azure Open AI

Setting Up ShopBot

Here’s a step-by-step guide to creating ShopBot. The code below demonstrates how to use Azure OpenAI, Streamlit, and a predefined product list to build an engaging shopping assistant.

Step 1: Import Required Libraries

First, import the necessary libraries:

import os
from openai import AzureOpenAI
from dotenv import load_dotenv
from langchain_core.messages import AIMessage, HumanMessage
import streamlit as st

Step 2: Load Environment Variables

Load your environment variables to access your Azure OpenAI API keys:

load_dotenv()

Step 3: Define the Product List

Here’s a sample product list. Credit goes to Yennhi95zz’s medium blog post for this comprehensive list:

product_list = '''
# Fashion Shop Product List

## Women's Clothing:
- T-shirt
- Price: $20
- Available Sizes: Small, Medium, Large, XL
- Available Colors: Red, White, Black, Gray, Navy

- Elegant Evening Gown
- Price: $150
- Available Sizes: Small, Medium, Large, XL
- Available Colors: Black, Navy Blue, Burgundy

- Floral Summer Dress
- Price: $45
- Available Sizes: Small, Medium, Large
- Available Colors: Floral Print, Blue, Pink

- Professional Blazer
- Price: $80
- Available Sizes: Small, Medium, Large, XL
- Available Colors: Black, Gray, Navy

## Men's Clothing:
- Classic Suit Set
- Price: $200
- Available Sizes: Small, Medium, Large, XL
- Available Colors: Charcoal Gray, Navy Blue, Black

- Casual Denim Jeans
- Price: $35
- Available Sizes: 28, 30, 32, 34
- Available Colors: Blue Denim, Black

- Polo Shirt Collection
- Price: $25 each
- Available Sizes: Small, Medium, Large, XL
- Available Colors: White, Blue, Red, Green

## Accessories:
- Stylish Sunglasses
- Price: $20
- Available Colors: Black, Brown, Tortoise Shell

- Leather Handbag
- Price: $60
- Available Colors: Brown, Black, Red

- Classic Wristwatch
- Price: $50
- Available Colors: Silver, Gold, Rose Gold

## Footwear:
- High-Heel Ankle Boots
- Price: $70
- Available Sizes: 5-10
- Available Colors: Black, Tan, Burgundy

- Comfortable Sneakers
- Price: $55
- Available Sizes: 6-12
- Available Colors: White, Black, Gray

- Formal Leather Shoes
- Price: $90
- Available Sizes: 7-11
- Available Colors: Brown, Black

## Kids' Collection:
- Cute Cartoon T-shirts
- Price: $15 each
- Available Sizes: 2T, 3T, 4T
- Available Colors: Blue, Pink, Yellow

- Adorable Onesies
- Price: $25
- Available Sizes: Newborn, 3M, 6M, 12M
- Available Colors: Pastel Blue, Pink, Mint Green

- Trendy Kids' Backpacks
- Price: $30
- Available Colors: Blue, Red, Purple

## Activewear:
- Yoga Leggings
- Price: $30
- Available Sizes: Small, Medium, Large
- Available Colors: Black, Gray, Teal

- Running Shoes
- Price: $40
- Available Sizes: 6-12
- Available Colors: White, Black, Neon Green

- Quick-Dry Sports T-shirt
- Price: $20
- Available Sizes: Small, Medium, Large
- Available Colors: Red, Blue, Gray

'''

Step 4: Create the Context for ShopBot

Define the context for your AI assistant:

def get_context():
context = [{'role': 'system',
'content': f"""
You are ShopBot, an AI assistant for my online fashion shop - My Fashion Shop.
Your role is to assist customers in browsing products, providing information, and guiding them through the checkout process.
Be friendly and helpful in your interactions. We offer a variety of products across categories such as Women's Clothing,
Men's clothing, Accessories, Kids' Collection, Footwears and Activewear products.
Feel free to ask customers about their preferences, recommend products, and inform them about any ongoing promotions.
The Current Product List is limited as below:

```{product_list}```

Make the shopping experience enjoyable and encourage customers to reach out if they have any questions or need assistance.
"""
}]
return context

Step 5: Define the Function to Get AI Responses

Create a function to get responses from the AI:

def get_completion_from_messages(messages):
client = AzureOpenAI(
api_key = os.environ["AZURE_OPENAI_API_KEY"],
api_version = os.environ["API_VERSION"],
azure_endpoint = os.environ["AZURE_OPENAI_ENDPOINT"]
)

chat_completion = client.chat.completions.create(
model = os.environ["DEPLOYMENT_MODEL"],
messages = messages
)

return chat_completion.choices[0].message.content

Step 6: Initialize Streamlit Session State

Initialize the chat history and context:

if "chat_history" not in st.session_state:
st.session_state.chat_history = [
AIMessage(content="Hello! I'm your Ecom Assistant. How can I help you today"),
]

if "chat_msg" not in st.session_state:
st.session_state.chat_msg = get_context()

Step 7: Set Up Streamlit UI

Configure Streamlit page and display the chat interface:

st.set_page_config(page_title="Chat with My Shop", page_icon=":speech_balloon:")

st.title("Ecommerce Chatbot :speech_balloon:")


for message in st.session_state.chat_history:
if isinstance(message, AIMessage):
with st.chat_message("AI"):
st.markdown(message.content)
elif isinstance(message, HumanMessage):
with st.chat_message("Human"):
st.markdown(message.content)

Step 8: Handle User Input

Capture and respond to user queries:

user_query = st.chat_input("Type a message...")
if user_query is not None and user_query.strip() != "":
st.session_state.chat_msg.append({"role" : "user", "content" : f"{user_query}"})
st.session_state.chat_history.append(HumanMessage(content=user_query))

with st.chat_message("Human"):
st.markdown(user_query)

with st.chat_message("AI"):
with st.spinner("Please wait ..."):
response = get_completion_from_messages(st.session_state.chat_msg)
st.markdown(response)

st.session_state.chat_msg.append({"role" : "user", "content" : f"{response}"})
st.session_state.chat_history.append(AIMessage(content=response))

Step 8: Run the application

Run the app:

streamlit run <<yourapp>>.py

Try It Yourself!

That’s it! You’ve now created your very own AI shopping assistant. With ShopBot, your customers can enjoy a personalized and efficient shopping experience, making them feel valued and well-assisted. Whether they need recommendations, product details, or help with the checkout process, ShopBot is here to help.

Feel free to customize the product list and enhance the functionality to suit your store’s unique needs. Happy coding and happy shopping!

 

No comments:

Post a Comment