First

.gitignore

@@ -0,0 +1 @@
+*.pyc

app.py

@@ -0,0 +1,205 @@
+from pathlib import Path
+import requests
+import time
+from random import randrange
+from PIL import Image
+import cv2
+import numpy as np
+from io import BytesIO
+
+import streamlit as st
+from streamlit_option_menu import option_menu
+
+from src.styles.menu_styles import FOOTER_STYLES, HEADER_STYLES
+from src.utils.lang import en, vi
+from src.utils.ui import message_func
+from src.utils.footer import show_info
+from src.utils.helpers import get_random_img, get_files_in_dir
+
+
+# --- PATH SETTINGS ---
+current_dir: Path = Path(__file__).parent if "__file__" in locals() else Path.cwd()
+css_file: Path = current_dir / "src/styles/.css"
+assets_dir: Path = current_dir / "src/assets"
+img_dir: Path = assets_dir / "img"
+
+# --- GENERAL SETTINGS ---
+PAGE_TITLE: str = "VNPT Chatbot"
+PAGE_ICON: str = "🤖"
+LANG_EN: str = "En"
+LANG_VI: str = "Vi"
+AI_MODEL_OPTIONS: list[str] = [
+    "v.0.0.1",
+]
+API_ADDRESS: str = ""
+
+st.set_page_config(page_title=PAGE_TITLE, page_icon=PAGE_ICON, layout="wide")
+
+# --- LOAD CSS ---
+with open(css_file) as f:
+    st.markdown(f"<style>{f.read()}</style>", unsafe_allow_html=True)
+    
+selected_lang = option_menu(
+    menu_title=None,
+    options=[LANG_EN, LANG_VI, ],
+    icons=["globe2", "translate"],
+    menu_icon="cast",
+    default_index=0,
+    orientation="horizontal",
+    styles=HEADER_STYLES
+)
+    
+# Storing The Context
+if "locale" not in st.session_state:
+    st.session_state.locale = en
+if "seed" not in st.session_state:
+    st.session_state.seed = randrange(10**3)
+if "user_text" not in st.session_state:
+    st.session_state.user_text = ""
+
+def main(api_address, 
+         conversation_path_param,
+         new_chat_path_param,
+         chat_append_path_param,
+         process_path_param,
+         guide_path_param):
+    st.sidebar.selectbox(label=st.session_state.locale.select_placeholder1, key="model", options=AI_MODEL_OPTIONS)
+            
+    if st.sidebar.button(st.session_state.locale.reset_conversation):
+        response = requests.post(api_address + new_chat_path_param)
+        # Check if request was successful (status code 200)
+        assert response.status_code == 200, response.status_code
+    
+    # Add guide
+    st.sidebar.write("------------------------------------")
+    response = requests.post(api_address + guide_path_param,
+                             json={"language": st.session_state.locale.lang_code})
+    assert response.status_code == 200, response.status_code
+    guide_dict = response.json()["options_dict"]
+    guide_options = {}
+    option_is_selected = False
+    option_prompt = ""
+    for k, v in guide_dict.items():
+        guide_options[k] = st.sidebar.button(k, use_container_width=True)
+        if guide_options[k]:
+            option_is_selected = True
+            option_prompt = v
+        
+    prompt = st.chat_input()
+    print(prompt)
+    if option_is_selected:
+        print("Appending ...")
+        response = requests.post(api_address + chat_append_path_param, 
+                                 json={"role": "user", "content": option_prompt})
+        assert response.status_code == 200, response.status_code
+    if prompt:
+        print("Appending ...")
+        response = requests.post(api_address + chat_append_path_param, 
+                                 json={"role": "user", "content": prompt})
+        assert response.status_code == 200, response.status_code
+    
+    # Visual conversation
+    response = requests.get(api_address + conversation_path_param,
+                            json={"language": st.session_state.locale.lang_code})
+    assert response.status_code == 200, response.status_code
+    messages = response.json()["conversation"]
+    for message in messages:
+        message_func(
+            message["content"],
+            role = message["role"],
+        )
+        urls = message.get("urls", [])
+        titles = message.get("titles", [])
+        
+        if len(urls) and not isinstance(urls[0], list):
+            urls = [[url] for url in urls]
+        if len(titles) and not isinstance(titles[0], list):
+            titles = [[title] for title in titles]
+        
+        for sub_urls, sub_titles in zip(urls, titles):
+            display_images(sub_urls, sub_titles)
+        
+        # for url, title in zip(urls, titles):
+        #     display_image_with_title_and_url(title, url)
+        
+    # Process the conversation if prompt
+    if prompt or option_is_selected:
+        print("Processing ...")
+        start = time.time()
+        response = requests.post(api_address + process_path_param,
+                                 json={"language": st.session_state.locale.lang_code})
+        assert response.status_code == 200, response.status_code
+        logs = response.json()["logs"]
+        for data in logs:
+            urls = data["urls"]
+            titles = data["titles"]
+            end = time.time()
+            print("done")
+            print(data)
+            print(end - start)
+            message_func(
+                data["content"],
+                role=data["role"]
+            )
+            for url, title in zip(urls, titles):
+                display_image_with_title_and_url(title, url)
+    message_func(
+        "",
+        role="assistant"
+    )
+
+    # if st.session_state.user_text:
+    #     show_conversation()
+    #     st.session_state.user_text = ""
+    # get_user_input()
+    # show_chat_buttons()
+             
+def run_agi():
+    global API_ADDRESS
+    print(API_ADDRESS)
+    st.sidebar.text_input("API address", key="api_address")
+    api_address = st.session_state.api_address
+    ##TODO: Dynamic this
+    conversation_path_param = "/chatbot/"
+    new_chat_path_param = "/chatbot/new_chat"
+    chat_append_path_param = "/chatbot/append_text_from_user"
+    process_path_param = "/chatbot/process"
+    guide_path_param = "/chatbot/guide_options"
+    
+    match selected_lang:
+        case "En":
+            st.session_state.locale = en
+        case "Vi":
+            st.session_state.locale = vi
+        case _:
+            st.session_state.locale = en
+    st.markdown(f"<h1 style='text-align: center;'>{st.session_state.locale.title}</h1>", unsafe_allow_html=True)
+    selected_footer = option_menu(
+        menu_title=None,
+        options=[
+            st.session_state.locale.footer_option1,
+            st.session_state.locale.footer_option0,
+        ],
+        icons=["info-circle", "chat-square-text"],  # https://icons.getbootstrap.com/
+        menu_icon="cast",
+        default_index=0,
+        orientation="horizontal",
+        styles=FOOTER_STYLES
+    )
+    
+    match selected_footer:
+        case st.session_state.locale.footer_option0:
+            main(api_address, 
+                conversation_path_param,
+                new_chat_path_param,
+                chat_append_path_param,
+                process_path_param,
+                guide_path_param)
+        case st.session_state.locale.footer_option1:
+            show_info()
+        case _:
+            show_info()
+            
+                
+if __name__ == "__main__":
+    run_agi()

requirements.txt

@@ -0,0 +1,2 @@
+numpy
+opencv-python

src/styles/.css

@@ -0,0 +1,52 @@
+a {
+    text-decoration: none;
+    font-weight: 500;
+}
+
+.block-container {
+    padding: 0 16px 96px 16px;
+}
+
+a:hover {
+    text-decoration: none;
+    color: #d33682 !important;
+}
+
+ul {
+    list-style-type: none;
+}
+
+hr {
+    margin-top: 0;
+    margin-bottom: 5%;
+}
+
+#MainMenu {
+    visibility: hidden;
+}
+
+footer {
+    visibility: hidden;
+}
+
+header {
+    visibility: hidden;
+}
+
+audio::-webkit-media-controls-panel,
+audio::-webkit-media-controls-enclosure {
+    background-color: #326464;
+    max-height: 30px;
+    border-radius: 4px;
+}
+
+audio::-webkit-media-controls-time-remaining-display,
+audio::-webkit-media-controls-current-time-display {
+    color: #CBE4DE;
+    text-shadow: none;
+}
+
+audio::-webkit-media-controls-timeline {
+    border-radius: 8px;
+    margin: 10px;
+}

src/styles/menu_styles.py

@@ -0,0 +1,31 @@
+from typing import Dict
+
+HEADER_STYLES: Dict[str, Dict] = {
+    "container": {
+        "padding": "0px",
+        "display": "grid",
+        "margin": "0!important",
+        "background-color": "#2C3333"
+    },
+    "icon": {"color": "#CBE4DE", "font-size": "14px"},
+    "nav-link": {
+        "font-size": "14px",
+        "text-align": "center",
+        "margin": "auto",
+        "background-color": "#2C3333",
+        "height": "30px",
+        "width": "7rem",
+        "color": "#CBE4DE",
+        "border-radius": "5px"
+    },
+    "nav-link-selected": {
+        "background-color": "#2E4F4F",
+        "font-weight": "300",
+        "color": "#f5f5f5",
+        "border": "1px solid #0E8388"
+    }
+}
+
+FOOTER_STYLES: Dict[str, Dict] = {
+
+}

src/utils/constants.py

@@ -0,0 +1,7 @@
+AI_ROLE_OPTIONS_EN: list[str] = [
+    "fashion assistant",
+]
+
+AI_ROLE_OPTIONS_VI: list[str] = [
+    "trợ lý thời trang ảo",
+]

src/utils/footer.py

@@ -0,0 +1,12 @@
+from pathlib import Path
+
+import streamlit as st
+
+
+def show_info():
+    st.divider()
+    st.markdown(f"<div style='text-align: justify;'>{st.session_state.locale.product_information}</div>",
+                unsafe_allow_html=True)
+    st.divider()
+    st.markdown("""[**Contact us**](https://www.linkedin.com/in/manh-do-quang-50823a255/)""")
+    st.markdown("""[**Buy Me A Coffee**](https://www.buymeacoffee.com/doquangmanp)""")

src/utils/helpers.py

@@ -0,0 +1,17 @@
+import base64
+import os
+import random
+from pathlib import Path
+from typing import List
+
+
+def get_files_in_dir(path: Path) -> List[str]:
+    files = []
+    for file in os.listdir(path):
+        if os.path.isfile(os.path.join(path, file)):
+            files.append(file)
+    return files
+
+
+def get_random_img(img_names: List[str]) -> str:
+    return random.choice(img_names)

src/utils/lang.py

@@ -0,0 +1,104 @@
+from dataclasses import dataclass
+from typing import List  # NOQA: UP035
+
+from .constants import AI_ROLE_OPTIONS_EN, AI_ROLE_OPTIONS_VI
+
+
+@dataclass
+class Locale:
+    ai_role_options: List[str]
+    ai_role_prefix: str
+    ai_role_postfix: str
+    title: str
+    language: str
+    lang_code: str
+    chat_placeholder: str
+    chat_run_btn: str
+    chat_clear_btn: str
+    chat_save_btn: str
+    fill_api_address: str
+    select_placeholder1: str
+    select_placeholder2: str
+    select_placeholder3: str
+    radio_placeholder: str
+    radio_text1: str
+    radio_text2: str
+    reset_conversation: str
+    stt_placeholder: str
+    footer_title: str
+    footer_option0: str
+    footer_option1: str
+    footer_chat: str
+    footer_channel: str
+    product_information: str
+    tokens_count: str
+    message_cost: str
+    total_cost: str
+
+
+# --- LOCALE SETTINGS ---
+en = Locale(
+    ai_role_options=AI_ROLE_OPTIONS_EN,
+    ai_role_prefix="You are a female",
+    ai_role_postfix="Answer as concisely as possible.",
+    title="HangerAI Chatbot Assistant",
+    language="English",
+    lang_code="en",
+    chat_placeholder="Start Your Conversation With AI:",
+    chat_run_btn="Ask",
+    chat_clear_btn="Clear",
+    chat_save_btn="Save",
+    fill_api_address="Enter api address",
+    select_placeholder1="Select Model",
+    select_placeholder2="Select Role",
+    select_placeholder3="Create Role",
+    radio_placeholder="Role Interaction",
+    radio_text1="Select",
+    radio_text2="Create",
+    reset_conversation="New chat",
+    stt_placeholder="To Hear The Voice Of AI Press Play",
+    footer_title="Support & Feedback",
+    footer_option0="Chat",
+    footer_option1="Info",
+    footer_chat="AI Talks Chat",
+    footer_channel="AI Talks Channel",
+    product_information="""HangerChatbot tailored for the retail industry, specifically focusing on the fashion sector. Our chatbot is designed to provide exceptional assistance to customers in their product selection, exploration, and search. But that's not all – our product goes a step further by offering personalized clothing recommendations based on user interactions, preferences, history, and inquiries.\n
+Powered by cutting-edge and state-of-the-art artificial intelligence technologies, our chatbot is here to revolutionize the way customers engage with your fashion brand. Whether it's helping customers find the perfect outfit, suggesting the latest trends, or answering their fashion-related questions, our chatbot is the ultimate solution to enhance the shopping experience.\n
+Don't miss out on this opportunity to take your retail business to the next level with our advanced and customer-centric chatbot solution. Experience the future of retail with our innovative product today!""",
+    tokens_count="Tokens count: ",
+    message_cost="Message cost: ",
+    total_cost="Total cost of conversation: ",
+)
+
+vi = Locale(
+    ai_role_options=AI_ROLE_OPTIONS_VI,
+    ai_role_prefix="You are a female",
+    ai_role_postfix="Answer as concisely as possible.",
+    title="Trợ lý ảo Hanger",
+    language="Tiếng Việt",
+    lang_code="vi",
+    chat_placeholder="Start Your Conversation With AI:",
+    chat_run_btn="Ask",
+    chat_clear_btn="Clear",
+    chat_save_btn="Save",
+    fill_api_address="Nhập địa chỉ API",
+    select_placeholder1="Chọn mô hình",
+    select_placeholder2="Lựa chọn vai trò",
+    select_placeholder3="Tạo vai trò",
+    radio_placeholder="Lựa chọn phiên bản của trợ lý ảo",
+    radio_text1="Lựa chọn",
+    radio_text2="Tạo mới",
+    reset_conversation="Hội thoại mới",
+    stt_placeholder="To Hear The Voice Of AI Press Play",
+    footer_title="Support & Feedback",
+    footer_option0="Nói chuyện",
+    footer_option1="Thông tin",
+    footer_chat="AI Talks Chat",
+    footer_channel="AI Talks Channel",
+    product_information="""HangerChatbot được tùy chỉnh dành cho ngành bán lẻ, đặc biệt là tập trung vào lĩnh vực thời trang. Chatbot của chúng tôi được thiết kế để cung cấp sự hỗ trợ xuất sắc cho khách hàng trong việc lựa chọn sản phẩm, khám phá và tìm kiếm. Nhưng điều đó chưa đủ - sản phẩm của chúng tôi còn đi xa hơn bằng cách cung cấp các gợi ý về trang phục cá nhân dựa trên tương tác của người dùng, sở thích, lịch sử và câu hỏi.\n
+Được trang bị bởi các công nghệ trí tuệ nhân tạo tiên tiến và hiện đại, chatbot của chúng tôi sẽ cách mạng hóa cách khách hàng tương tác với thương hiệu thời trang của bạn. Cho dù đó là giúp khách hàng tìm trang phục hoàn hảo, đề xuất các xu hướng mới nhất hoặc trả lời các câu hỏi liên quan đến thời trang, chatbot của chúng tôi là giải pháp tối ưu để nâng cao trải nghiệm mua sắm.\n
+Đừng bỏ lỡ cơ hội này để đưa doanh nghiệp bán lẻ của bạn lên tầm cao mới với giải pháp chatbot tiên tiến và tập trung vào khách hàng của chúng tôi. Trải nghiệm tương lai của ngành bán lẻ với sản phẩm độc đáo của chúng tôi ngay hôm nay!""",
+    tokens_count="Tokens count: ",
+    message_cost="Message cost: ",
+    total_cost="Total cost of conversation: ",
+)

src/utils/ui.py

@@ -0,0 +1,70 @@
+import html
+import re
+import streamlit as st
+
+
+def format_message(text):
+    """
+    This function is used to format the messages in the chatbot UI.
+
+    Parameters:
+    text (str): The text to be formatted.
+    """
+    text_blocks = re.split(r"```[\s\S]*?```", text)
+    code_blocks = re.findall(r"```([\s\S]*?)```", text)
+
+    text_blocks = [html.escape(block) for block in text_blocks]
+
+    formatted_text = ""
+    for i in range(len(text_blocks)):
+        formatted_text += text_blocks[i].replace("\n", "<br>")
+        if i < len(code_blocks):
+            formatted_text += f'<pre style="white-space: pre-wrap; word-wrap: break-word;"><code>{html.escape(code_blocks[i])}</code></pre>'
+
+    return formatted_text
+
+
+def message_func(text, role):
+    """
+    This function is used to display the messages in the chatbot UI.
+
+    Parameters:
+    text (str): The text to be displayed.
+    role (str): Role for the text.
+    """
+    if role == "user":
+        avatar_url = "https://avataaars.io/?avatarStyle=Transparent&topType=ShortHairShortFlat&accessoriesType=Prescription01&hairColor=Auburn&facialHairType=BeardLight&facialHairColor=Black&clotheType=Hoodie&clotheColor=PastelBlue&eyeType=Squint&eyebrowType=DefaultNatural&mouthType=Smile&skinColor=Tanned"
+        message_alignment = "flex-end"
+        message_bg_color = "linear-gradient(135deg, #00B2FF 0%, #006AFF 100%)"
+        avatar_class = "user-avatar"
+        st.write(
+            f"""
+                <div style="display: flex; align-items: center; margin-bottom: 10px; justify-content: {message_alignment};">
+                    <div style="background: {message_bg_color}; color: white; border-radius: 20px; padding: 10px; margin-right: 5px; max-width: 75%; font-size: 14px;">
+                        {text} \n </div>
+                    <img src="{avatar_url}" class="{avatar_class}" alt="avatar" style="width: 50px; height: 50px;" />
+                </div>
+                """,
+            unsafe_allow_html=True,
+        )
+    elif role == "assistant":
+        avatar_url = "https://avataaars.io/?avatarStyle=Transparent&topType=WinterHat2&accessoriesType=Kurt&hatColor=Blue01&facialHairType=MoustacheMagnum&facialHairColor=Blonde&clotheType=Overall&clotheColor=Gray01&eyeType=WinkWacky&eyebrowType=SadConcernedNatural&mouthType=Sad&skinColor=Light"
+        message_alignment = "flex-start"
+        message_bg_color = "#71797E"
+        avatar_class = "bot-avatar"
+        
+        text = format_message(text)
+
+        st.write(
+            f"""
+                <div style="display: flex; align-items: center; margin-bottom: 10px; justify-content: {message_alignment};">
+                    <img src="{avatar_url}" class="{avatar_class}" alt="avatar" style="width: 50px; height: 50px;" />
+                    <div style="background: {message_bg_color}; color: white; border-radius: 20px; padding: 10px; margin-right: 5px; max-width: 75%; font-size: 14px;">
+                        {text} \n </div>
+                </div>
+                """,
+            unsafe_allow_html=True,
+        )
+        
+    else:
+        raise