TÍCH HỢP TRÍ TUỆ NHÂN TẠO OPENAI VÀO SHOP HARAVAN

NHÂN VIÊN TRÍ TUỆ NHÂN TẠO

• Làm thay việc của nhân viên: Nội dung/  Content. Demo
• Làm thay việc của nhân viên: Bình luận dạo/ Seeding. Demo tại sản phẩm, Demo tại blog, Demo tại trang chủ
• Làm thay việc của nhân viên: Kiểm duyệt. Demo
• Hỗ trợ tìm kiếm sản phẩm bằng trí tuệ nhân tạo: Demo

TÍNH NĂNG CỦA ỨNG DỤNG

TRÍ TUỆ NHÂN TẠO

• Tự động tạo đánh giá/bình luận bằng trí tuệ nhân tạo sau khi khách hàng đặt hàng ở các trang: Trang chủ,  Sản phẩm, Blog.
• Tự động duyệt đánh giá/bình luận của khách hàng bằng trí tuệ nhân tạo (Có thể thiết lập duyệt thủ công).
• Hiển thị ngẫu nhiên đánh giá/bình luận ở các trang: Trang chủ, Trang, Blog, Sản phẩm.
• Tự động viết Blog về sản phẩm bằng trí tuệ nhân tạo.
• Hỗ trợ tư vấn khách hàng bằng cách nâng cấp công cụ tìm kiếm trí tuệ nhân tạo.

KHÁCH HÀNG BÌNH LUẬN

• Chỉ khách hàng đã từng mua hàng mới được bình luận.
• Khách hàng được bình luận khi: Có thông tin mã đơn hàng và email hoặc số điện thoại.
• Khách hàng được bình luận khi: Đã đăng nhập và đã từng mua hàng.
• Bình luận sẽ được trí tuệ nhân tạo duyệt: Shop có thể tắt bật tính năng này.

LƯU Ý QUAN TRỌNG

• Để tránh hiện tượng AI tạo quá nhiều bình luận nếu shop phát sinh nhiều đơn hàng mỗi ngày, hãy chọn kênh bán hàng phù hợp tại: https://openai.hrvapps.com/haravan/settings.html

DEMO

Web Demo

• Xem demo tại: Link

Hình ảnh demo

HƯỚNG DẪN

CÀI ĐẶT

• Cài đặt ứng dụng bằng cách bấm vào đường link: https://openai.hrvapps.com/
• Cài đặt lên theme bằng cách vào Trang quản trị ->Website->Thiết lập theme->Chỉnh sửa code:

• Tạo 2 liquid trong Snippets: openai_customer_reviews.liquid và openai_js.liquid (Chi tiết ở cuối bài)

Hai snippest để cài đặt lên theme

• Ở Snippets: openai_js.liquid tìm 2 dòng code 

let shop_id = 'xxxxxxx';

 let max_comments_render = 6;

• Và thay xxxxxxx là id haravan của shop bạn, để lấy shop_id, bạn vào 1 sản phẩm bất kỳ, ở góc phải có nút Thao tác->OpenAI Bình luận, sẽ chuyển qua 1 đường link mới, ví dụ: https://openai.hrvapps.com/openai/comments.html?id=1050064191&orgid=200000608517&locale=vi, thì shop_id chính là  200000608517, thay xxxxxxxx = 200000608517

 let shop_id = '200000608517';
 let max_comments_render = 6;

Vào chi tiết một sản phẩm bất kỳ, ở góc phải bấm chọn như hình để lấy shop_id chính là orgid

• Thông số max_comments_render chính là số bình luận hiển thị trên website của bạn, tối đa là 10, Thay  let max_comments_render = 6; thành max_comments_render = 8; thì sẽ hiển thị 8 bình luận.
• Ở trang cần hiển thị bình luận thêm dòng code: {%- include 'openai_customer_reviews' -%}

THIẾT LẬP

• Sau khi cài đặt thiết lập Haravan và OpenAI tại trang: https://openai.hrvapps.com/
• Cài đặt lên theme xem tại đây hoặc liên hệ ZALO: 0979955664

MỘT SỐ VẤN ĐỀ THƯỜNG GẶP

• AI không hoạt động: Do bạn sử dụng OpenAI phiên bản mặc định nên bị hạn chế lưu lượng truy cập.
• Khách bình luận và chưa hiển thị luôn: Hệ thống lấy mặc định 10 bình luận ngẫu nhiên, nên có thể chưa hiển thị ngay hoặc hệ thống sẽ cập nhật bình luận khi phát sinh CẬP NHẬT đơn hàng, vì vậy nếu trong thời gian dài không phát sinh đơn hàng thì bình luận không cập nhật mới.

HƯỚNG DẪN LẤY OPENAI API KEY

Để hiểu hơn về API sau đây chúng ta sẽ tìm hiểu API key là gì? Tiếp theo tôi sẽ hướng dẫn cách lấy API key của tài khoản ChatGPT.

1. API Keys là gì?

API keys là một chuỗi các ký tự hoặc mã được cung cấp bởi một ứng dụng hoặc dịch vụ API cho phép người dùng truy cập vào các chức năng của API đó. Mỗi API key là duy nhất cho mỗi ứng dụng hoặc dịch vụ và được sử dụng để xác thực người dùng và đảm bảo rằng người dùng có quyền truy cập vào các tài nguyên hoặc chức năng của API. API key thường được yêu cầu để sử dụng các dịch vụ như Google Maps, Twitter, Facebook, Amazon Web Services và nhiều dịch vụ API khác. Việc bảo mật API key rất quan trọng, vì nếu bị rò rỉ hoặc bị sử dụng sai cách có thể gây ra nguy hiểm cho ứng dụng hoặc dịch vụ của bạn.

2. Cách lấy API key của tài khoản ChatGPT

Bước 1: Tất nhiên để có thể lấy API Key thì bạn phải có tài khoản ChatGPT, sau đó bạn truy cập https://platform.openai.com/account/api-keys và khi đó website sẽ yêu cầu bạn đăng nhập vào tài khoản ChatGPT.

Bước 2: Bạn tiến hành đăng nhập vào tài khoản ChatGPT và website sẽ chuyển hướng bạn đến trang lấy API key, thông thường nếu bạn chưa tạo API thì website OpenAI sẽ bảo mật cho bạn bằng cách chưa tạo mã API. Sau đó bạn click chuột vào Create new secret key.

Bước 3: Khi đó OpenAI sẽ tạo mã khóa bí mật API key như hình dưới đây, bạn chỉ việc sao chép nó và sử dụng cho mục đích phát triển API của mình.

Khi đó API key được tạo với thông tin như: Mã khóa bảo mật, Ngày tạo và Lần sử dụng gần đây nhất.

Vì API key rất quan trọng với tài khoản do đó bạn có thể xóa và thay thế API khác để đảm bảo an toàn cho tài khoản. Chúc bạn thành công!

HAI SNIPPETS ĐỂ CÀI ĐẶT LÊN THEME

openai_customer_reviews.liquid 

<div class="ai-body">
    <div class="row">
        <div class="col-sm-12 col-xs-12">
            <div style="padding:5px;">
                <h4>KHÁCH HÀNG ĐÁNH GIÁ</h4>
            </div>

        </div>
    </div>
    <div id="ai-comments" class="ai-comments">
        <div class="row">
            <div class="col-sm-12 col-xs-12">
                <p>Chưa có đánh giá nào</p>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-12 col-xs-12">
            <div style="padding:5px;">
                {% if customer %}
                <div class="row">
                    <div class="col-sm-12 col-xs-12"><h4>BẠN ĐÃ TỪNG ĐÁNH GIÁ</h4></div>
                </div>
                {% endif %}
                <div id="ai-customer-comments" class="ai-comments">

                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-12 col-xs-12">
            <div style="padding:5px;">
                <div class="row">
                    <div class="col-sm-12 col-xs-12"><h4>GỬI ĐÁNH GIÁ MỚI</h4></div>
                </div>
                <div class="contact-form">
                    <div class="row">
                        <div class="col-sm-6 col-xs-12">
                            <div class="input-group">
                                {% if customer %}
                                    <input disabled oninput="aiOnChangeText()" required type="text"
                                           id="ai-customer-phone-email"
                                           class="form-control" value="{{ customer.email }}"
                                           placeholder="Email/Số điện thoại">
                                {% else %}
                                    <input oninput="aiOnChangeText()" required type="text" id="ai-customer-phone-email"
                                           class="form-control"
                                           placeholder="Email/Số điện thoại">
                                {% endif %}
                                <p id="ai-valid-phone"></p>
                            </div>

                            <div class="input-group">
                                {% if customer %}
                                    {% if customer.orders.size == 0 %}
                                        <select disabled onchange="aiOnChangeText()" class="form-control"
                                                id="ai-customer-order-name">
                                            <option value="">Bạn chưa từng đặt hàng</option>
                                        </select>
                                    {% else %}
                                        <select onchange="aiOnChangeText()" class="form-control"
                                                id="ai-customer-order-name">
                                            {% for order in customer.orders %}
                                                {% if forloop.length == 0 %}
                                                    <option selected value="">Bạn chưa từng đặt hàng</option>
                                                {% else %}
                                                    <option {% if forloop.index==1 %} selected {% endif %}
                                                                                      value="{{ order.name }}">{{ order.name }}</option>
                                                {% endif %}
                                            {% endfor %}

                                        </select>
                                    {% endif %}
                                {% else %}
                                    <input oninput="aiOnChangeText()" required type="text" id="ai-customer-order-name"
                                           class="form-control"
                                           placeholder="Mã đơn hàng bạn đã mua">
                                {% endif %}

                            </div>
                        </div>
                        {% if customer %}
                            {% if customer.orders.size == 0 %}
                                <div class="col-sm-6 col-xs-12">
                                    <div class="input-group">
                                        <textarea disabled onchange="aiOnChangeText()" required id="ai-customer-comment"
                                                  placeholder="Bạn cần đã từng mua hàng mới có thể đánh giá"></textarea>
                                    </div>
                                    <p id="ai-post-comment-status"></p>

                                </div>
                            {% else %}
                                <div class="col-sm-6 col-xs-12">
                                    <div class="input-group">
                                    <textarea onchange="aiOnChangeText()" required id="ai-customer-comment"
                                              placeholder="Hãy viết cảm nhận của bạn"></textarea>
                                    </div>
                                    <p id="ai-post-comment-status"></p>
                                    <div class="input-group">
                                        <button onclick="aiOnCommentSubmit()" class="button dark"
                                                id="ai-customer-review-submit">Gửi
                                        </button>
                                    </div>
                                </div>
                            {% endif %}
                        {% else %}
                            <div class="col-sm-6 col-xs-12">
                                <div class="input-group">
                            <textarea onchange="aiOnChangeText()" required id="ai-customer-comment"
                                      placeholder="Hãy viết cảm nhận của bạn"></textarea>
                                </div>
                                <p id="ai-post-comment-status"></p>
                                <div class="input-group">
                                    <button onclick="aiOnCommentSubmit()" class="button dark"
                                            id="ai-customer-review-submit">Gửi
                                    </button>
                                </div>
                            </div>
                        {% endif %}

                    </div>
                </div>
            </div>
        </div>
    </div>

</div>

<style>
    .ai-body {
        width: 95%;
        background-color: white;
        margin: auto;
    }

    .ai-comments {
        width: 100%;
        padding: 5px;
        display: flex;
        flex-wrap: wrap;
        align-items: flex-end;
    }

    .ai-row {
        display: flex;
        width: 48%;
        max-width: 50%;
        border-bottom: 1px solid #007bff;
        padding: 5px;
        margin: 2px;
    }

    .ai-row-mobile {
        display: flex;
        width: 96%;
        border-bottom: 1px solid #007bff;
        border-radius: 5px;
        padding: 5px;
        margin: 2px;
    }

    .ai-customer-info {
        background-color: transparent;
        margin: auto;
        padding: 5px;
        width: 25%;
        min-height: 60px;

    }

    .ai-customer-image {
        background-color: transparent;
        margin: auto;
        padding: 5px;
        width: 20%;
        min-height: 60px;
    }

    .ai-commment-info {
        min-height: 60px;
        width: 55%;
        background-color: transparent;
        padding: 5px;
    }
</style>
{%- include 'openai_js' -%}

 

openai_js.liquid

{% if product %}
    <script>
        let is_product_review = true;
        let is_shop_reivew = false;
        let ai_comments = JSON.parse('{{ product.metafields.ai_comments_product.ai_comment_product }}');
    </script>
{% else %}
    <script>
        let is_product_review = false;
        let is_shop_reivew = true;
        let ai_comments = JSON.parse('{{ shop.metafields.ai_comments_shop.ai_comment_shop }}');</script>
{% endif %}

{% if customer %}
    <script>
        let is_customer_review = true;
        let haravan_customer_id = '{{ customer.id }}';
    </script>
{% else %}
    <script>
        let is_customer_review = false;
        let haravan_customer_id = '';
    </script>
{% endif %}
<script>
    let shop_id = 'xxxxxxx';
    let max_comments_render = 6;
    console.log(ai_comments);
    console.log("is_customer_review", is_customer_review);
    console.log("is_product_review", is_product_review);
    console.log("is_shop_reivew", is_shop_reivew);

    let ai_root_api_url = 'https://openai.hrvapps.com/api/haravan/review/' + shop_id;

    function openaiValidatePhoneEmail(phone_or_email) {
        return /(03|05|07|08|09|01[2|6|8|9])+([0-9]{8})\b/.test(phone_or_email) || /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(phone_or_email);
    }

    function openaiValidatePhone(number) {
        return /(03|05|07|08|09|01[2|6|8|9])+([0-9]{8})\b/.test(number);
    }

    function openaiValidateEmail(email) {
        return /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(email)
    }

    function aiDetectMobile() {
        console.log("window.innerWidth", window.innerWidth);
        return ((window.innerWidth <= 900));
    }

    async function aiFletchGet(path) {
        let url = ai_root_api_url + path;
        let options = {
            method: "GET",
            mode: 'cors', // no-cors, *cors, same-origin
            cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
            credentials: 'same-origin', // include, *same-origin, omit
            headers: {
                'Content-Type': 'application/json',
                "Access-Control-Allow-Origin": "*",
            },
        }
        let repsone_json = null;
        try {
            let response = await fetch(url, options);
            repsone_json = await response.json();
            console.log(repsone_json);
        } catch (e) {
            console.log(e);
        }

        return repsone_json;
    }

    async function aiFletchPost(path, json_data) {
        let url = ai_root_api_url + path;
        let options = {
            method: "POST",
            mode: 'cors', // no-cors, *cors, same-origin
            cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
            credentials: 'same-origin', // include, *same-origin, omit
            headers: {
                'Content-Type': 'application/json',
                "Access-Control-Allow-Origin": "*",
            },
            body: JSON.stringify(json_data)
        }
        if (json_data != null) {
            options.body = JSON.stringify(json_data)
        }
        let repsone_json = null;
        try {
            let response = await fetch(url, options);
            repsone_json = await response.json();
            console.log("aiFletchPost", repsone_json);
        } catch (e) {
            console.log(e);
        }

        return repsone_json;
    }

    function aiRenderComments(f_ai_comments, html_id) {
        console.log("aiRenderComments is_customer_review", is_customer_review);
        try {
            let image_src = 'https://file.hstatic.net/1000326886/file/4087930_a25d8a14c4e94d068e70a05aee7cf3fb.png';
            if (f_ai_comments.length > 0) {
                let new_html = ''
                let is_mobile = aiDetectMobile();
                console.log("is_mobile", is_mobile);
                let i = 0;
                for (let ai_comment of f_ai_comments) {
                    i++
                    if (i > max_comments_render) {
                        break
                    }
                    if (typeof ai_comment.product_image_url != "undefined" && ai_comment.product_image_url !== null) {
                        image_src = ai_comment.product_image_url;
                    }
                    let item_html = '<div class="ai-row">';
                    let product_url = 'https://giaylautay.com/';
                    if (typeof ai_comment.url != "undefined" && ai_comment.url != null) {
                        product_url = ai_comment.url;
                    }
                    let haravan_product_name = "Đánh gía sản phẩm sau khi mua";
                    if (typeof ai_comment.haravan_product_name != "undefined" && ai_comment.haravan_product_name != null) {
                        haravan_product_name = ai_comment.haravan_product_name;
                    }
                    if (is_mobile == true) {
                        item_html = '<div class="ai-row-mobile">';
                    }
                    let comment = ai_comment.comment;
                    let check_login_customer_review = false;
                    console.log(ai_comment.haravan_customer_id.toString(), haravan_customer_id)
                    if (haravan_customer_id == ai_comment.haravan_customer_id.toString()) {
                        check_login_customer_review = true;
                    }
                    if (check_login_customer_review == false) {
                        if (is_product_review == true) {
                            if (typeof ai_comment.ai_product_comment != "undefined" && ai_comment.ai_product_comment != null) {
                                comment = ai_comment.ai_product_comment;
                            }
                        } else {
                            if (typeof ai_comment.ai_shop_comment != "undefined" && ai_comment.ai_shop_comment != null) {
                                comment = ai_comment.ai_shop_comment;
                            }
                        }
                    }

                    item_html = item_html +
                        '<div class="ai-customer-info">' +
                        '<b>' +
                        ai_comment.name.substring(0, 30) +
                        '</b>' +
                        '<p>' +
                        ai_comment.phone +
                        '</p>' +
                        '<a>' +
                        ai_comment.email +
                        '</a>' +
                        '</div>' +
                        '<div class="ai-customer-image">' +
                        '<a href="' +
                        product_url +
                        '">' +
                        '<img style="width: 100%; max-height:100px;" src="' +
                        image_src +
                        '" alt="' +
                        haravan_product_name.substring(0, 150) +
                        '">' +
                        '</a>' +
                        '</div>' +
                        '<div class="ai-commment-info">' +
                        '<p>' +
                        comment +
                        '</p>';
                    if (typeof ai_comment.haravan_product_name != "undefined" && ai_comment.haravan_product_name != null) {
                        haravan_product_name = ai_comment.haravan_product_name;
                        console.log("haravan_product_name", haravan_product_name);
                        item_html = item_html + '<a href="' +
                            product_url +
                            '">' +
                            '<b>' +
                            haravan_product_name +
                            '</b>' +
                            '</a>';
                    }
                    item_html = item_html + '</div>' +
                        '</div>';
                    new_html += item_html;
                }
                //document.getElementById("ai-comments").innerHTML = new_html;
                document.getElementById(html_id).innerHTML = new_html;
            } else {
                document.getElementById(html_id).innerHTML = '<b>Bạn chưa đánh giá</b>';

            }
        } catch (e) {
            console.log("aiRenderComments", e);
        }
    }
</script>
<script>

    async function aiOnChangeText() {
        document.getElementById("ai-customer-comments").innerHTML = '<b>Đang tải dữ liệu</b>';
        let ai_phone_email = document.getElementById("ai-customer-phone-email").value;
        console.log(ai_phone_email);
        let is_valid_ai_phone_email = openaiValidatePhoneEmail(ai_phone_email);
        if (is_valid_ai_phone_email == false) {
            document.getElementById('ai-valid-phone').innerHTML = "Số điện thoại/email chưa đúng định dạng";
        } else {
            document.getElementById('ai-valid-phone').innerHTML = "Số điện thoại/email đúng định dạng";
        }
        console.log(is_valid_ai_phone_email);
        let ai_order_name = document.getElementById("ai-customer-order-name").value;
        console.log(ai_order_name);
        let ai_new_review = document.getElementById("ai-customer-comment").value;
        console.log(ai_new_review);
        let ai_api_path;
        if (openaiValidatePhone(ai_phone_email) == true) {
            ai_api_path = '?phone=' + encodeURIComponent(ai_phone_email) + '&order_name=' + encodeURIComponent(ai_order_name) + '&comment=' + encodeURIComponent(ai_new_review);
        } else {
            ai_api_path = '?email=' + encodeURIComponent(ai_phone_email) + '&order_name=' + encodeURIComponent(ai_order_name) + '&comment=' + encodeURIComponent(ai_new_review);
        }
        console.log(ai_api_path);
        if (is_valid_ai_phone_email == true && ai_order_name != '') {
            let response_json = await aiFletchGet(ai_api_path);
            if (typeof response_json != "undefined" && response_json != null) {
                document.getElementById("ai-post-comment-status").innerHTML = response_json.message;
                if (response_json.status == true) {
                    if (response_json.data.length > 0) {
                        haravan_customer_id = response_json.data[0].haravan_customer_id;
                        if (document.getElementById("ai-customer-comment").value == "") {
                            document.getElementById("ai-customer-comment").value = response_json.data[0].comment;
                        }

                    }
                    aiRenderComments(response_json.data, "ai-customer-comments");
                } else {
                    haravan_customer_id = "";
                    aiRenderComments([], "ai-customer-comments");

                }
            }
        } else {
            haravan_customer_id = "";
            aiRenderComments([], "ai-customer-comments");
        }
    }

    async function aiOnCommentSubmit() {
        try {
            console.log("aiOnCommentSubmit");
            document.getElementById("ai-customer-review-submit").disabled = false;
            document.getElementById("ai-customer-review-submit").innerHTML = "Đang gửi";
            document.getElementById("ai-post-comment-status").innerHTML = "Đang gửi đánh gía của bạn";
            //
            let ai_phone_email = document.getElementById("ai-customer-phone-email").value;
            console.log(ai_phone_email);
            let is_valid_ai_phone_email = openaiValidatePhoneEmail(ai_phone_email);
            if (is_valid_ai_phone_email == false) {
                document.getElementById('ai-valid-phone').innerHTML = "Số điện thoại/email chưa đúng định dạng";
            } else {
                document.getElementById('ai-valid-phone').innerHTML = "Số điện thoại/email đúng định dạng";
            }
            console.log(is_valid_ai_phone_email);
            let ai_order_name = document.getElementById("ai-customer-order-name").value;
            console.log(ai_order_name);
            let ai_new_review = document.getElementById("ai-customer-comment").value;
            console.log(ai_new_review);
            let ai_api_path;
            if (openaiValidatePhone(ai_phone_email) == true) {
                ai_api_path = '?phone=' + encodeURIComponent(ai_phone_email) + '&order_name=' + encodeURIComponent(ai_order_name) + '&comment=' + encodeURIComponent(ai_new_review);
            } else {
                ai_api_path = '?email=' + encodeURIComponent(ai_phone_email) + '&order_name=' + encodeURIComponent(ai_order_name) + '&comment=' + encodeURIComponent(ai_new_review);
            }
            console.log(ai_api_path);
            //
            if (ai_new_review.length >= 10) {
                if (is_valid_ai_phone_email == true && ai_order_name != '') {
                    let response_json = await aiFletchPost(ai_api_path, null);
                    if (typeof response_json != "undefined" && response_json != null) {
                        document.getElementById("ai-post-comment-status").innerHTML = response_json.message;
                        if (response_json.status == true) {
                            if (response_json.data.length > 0) {
                                haravan_customer_id = response_json.data[0].haravan_customer_id;
                                
                            }
                            aiRenderComments(response_json.data, "ai-customer-comments");
                        } else {
                            haravan_customer_id = "";
                            aiRenderComments([], "ai-customer-comments");

                        }
                    }
                } else {
                    haravan_customer_id = "";
                    aiRenderComments([], "ai-customer-comments");
                    document.getElementById("ai-post-comment-status").innerHTML = "Kiểm tra lại mã đơn hàng và số điện thoại";
                }
            } else {
                haravan_customer_id = "";
                document.getElementById("ai-post-comment-status").innerHTML = "Bình luận quá ngắn";
            }

        } catch (e) {
            console.log("aiOnCommentSubmit", e);
            haravan_customer_id = "";
        }
        document.getElementById("ai-customer-review-submit").disabled = false;
        document.getElementById("ai-customer-review-submit").innerHTML = "Gửi";

    }
</script>
<script>
    aiRenderComments(ai_comments, "ai-comments");
    aiOnChangeText();
</script>