Siêu tốc chatbot AI của bạn với trực quan hóa tương tác sử dụng Chart.js

Mục lục

Giới thiệu
Thách thức của khách hàng
Phương pháp tiếp cận
Sửa đổi ứng dụng web
Tích hợp Chart.js
- Mở rộng marked để xử lý khối "ngôn ngữ" chartjs
- Hiển thị biểu đồ
Kết luận và lời kêu gọi hành động

1. Giới thiệu

Bài viết này thuộc chuỗi bài đăng về tương lai của AI. Tôi là Rob Chambers, và trong bài viết này, tôi sẽ hướng dẫn bạn cách tăng cường đáng kể khả năng trực quan hóa tương tác của giải pháp chatbot AI bằng cách kết hợp Chart.js và Azure AI. Chúng ta sẽ khám phá cách tạo ra các biểu đồ động và hấp dẫn, nâng cao trải nghiệm người dùng lên một tầm cao mới.

2. Thách thức của khách hàng

Mới đây, một khách hàng đã liên hệ với chúng tôi với một yêu cầu thú vị: tạo biểu đồ từ dữ liệu bằng AI. Ban đầu, họ đã thử sử dụng Azure OpenAI Assistants với Code Interpreter, cho phép tạo ảnh tĩnh bằng cách xây dựng và thực thi mã Python theo thời gian thực. Mặc dù phương pháp ảnh tĩnh hoạt động tốt, nhưng khách hàng muốn một giải pháp tương tác hơn, tạo ra các biểu đồ sinh động và năng động hơn. Ví dụ về yêu cầu của khách hàng:

Hiển thị dữ liệu này bằng biểu đồ cột:

Nhãn  Nâu Hồng Vàng  Tổng
A        339  433    126  898
B         48  421    222  691

3. Phương pháp tiếp cận

Để giải quyết nhu cầu về biểu đồ tương tác và năng động, tôi đã có một vài cuộc trò chuyện với GPT-4o, khám phá các lựa chọn khác nhau. Cuối cùng, chúng tôi đã chọn Chart.js - một thư viện JavaScript phổ biến để tạo các biểu đồ sống động và phản hồi nhanh. Chart.js hoàn toàn phù hợp với nhu cầu của khách hàng, cho phép chúng tôi tạo các biểu đồ tương tác được tích hợp liền mạch vào các ứng dụng web.

Sau khi chọn Chart.js, chúng tôi cần xác định cách kết hợp các tính năng của nó với chatbot AI. Chúng tôi đã sử dụng Azure AI CLI để tạo một ứng dụng web HTML/JavaScript cơ bản, hỗ trợ markdown và tô sáng mã bằng marked và highlight.js. Chúng tôi chỉ cần mở rộng mẫu này để bao gồm Chart.js. Chúng tôi quyết định kết nối với quy trình xử lý markdown để hỗ trợ một ngôn ngữ mới, 'chartjs', chứa các đối tượng JSON đại diện cho các tham số chính cho biểu đồ Chart.js. Để làm điều này, chúng tôi đã cập nhật OpenAI Assistant để hiểu cách phát ra ngôn ngữ markdown mới này. Một đoạn trích từ tệp .ai/data/assistant.instructions:

Bạn là một trợ lý hữu ích.

Một trong những kỹ năng đặc biệt của bạn là tạo biểu đồ.
Bạn có thể làm điều đó vì bạn hiện hỗ trợ một ngôn ngữ markdown mới gọi là 'chartjs', chứa một đối tượng JSON đại diện cho một biểu đồ Chart.js.

Đây là ví dụ về cách markdown cho một biểu đồ Chart.js:

chartjs { "type": "bar", … }

```

Chúng tôi đã sử dụng Azure AI CLI để cập nhật OpenAI Assistant với các hướng dẫn mới và để tạo một ứng dụng web HTML/JavaScript đơn giản có thể chạy cục bộ:

bash ai chat assistant update --instructions "@assistant.instructions" ai dev new openai-asst-webpage-with-functions --javascript

**4. Sửa đổi ứng dụng web**

Giờ đây, OpenAI Assistant của chúng tôi đã sẵn sàng, chúng tôi cần cập nhật ứng dụng web cơ sở để hỗ trợ ngôn ngữ markdown `'chartjs'` mới.

Trong nhóm AI Futures, chúng tôi luôn cố gắng sử dụng AI tối đa trong quá trình phát triển, bằng cách sử dụng GitHub Copilot trong VS Code hoặc chạy Azure AI CLI theo giao diện tương tác. Lần này, chúng tôi đã sử dụng AI CLI để đọc mã hiện có, đưa ra đề xuất và thay đổi, sau đó lưu các tệp trở lại đĩa.  Chúng tôi đã xem xét các bản cập nhật dọc theo đường đi bằng trình xem diff tích hợp của VS Code, chấp nhận hoặc từ chối các thay đổi khi cần thiết. Bạn có thể xem một lời nhắc tổng hợp các thay đổi chúng tôi đã thực hiện trong kho GitHub [ở đây](https://github.com/robch/openai-asst-webpage-with-functions-and-chart-js/blob/main/.ai/data/updates-to-openai-asst-webpage-with-functions-js.md).

Đây là cách chúng tôi gọi AI CLI để đọc, hiểu và sửa đổi ứng dụng web:

markup cd openai-asst-webpage-with-functions-js ai chat --interactive --built-in-functions --system @SYSTEMPROMPT.md --user @USERPROMPT.md

Tùy chọn `'--built-in-functions'` là chìa khóa để cung cấp cho AI CLI và LLM quyền truy cập để đọc và ghi tệp trên đĩa.


**5. Tích hợp Chart.js**

**5.1 Mở rộng marked để xử lý khối "ngôn ngữ" chartjs**

Chúng tôi đã mở rộng thư viện `marked` để xử lý khối ngôn ngữ mới. Nếu ngôn ngữ của khối mã là `'chartjs'`, chúng tôi trả về một div mới với lớp `'chartjs'` nơi chúng tôi sẽ hiển thị biểu đồ bằng Chart.js:

javascript marked.setOptions({ highlight: function (code, lang) { if (lang === 'chartjs') { let chart = createNewChartJsChart(code); return <div class="chartjs">${chart}</div>; } let hl = lang === undefined || lang === '' ? hljs.highlightAuto(code).value : hljs.highlight(lang, code).value; return <div class="hljs">${hl}</div>; } });

**5.2 Hiển thị biểu đồ**

Hàm `createNewChartJsChart` ở trên phân tích cú pháp JSON, tạo các phần tử canvas HTML cần thiết và hoãn việc điền biểu đồ cho đến khi các phần tử DOM sẵn sàng. Sau khi các phần tử DOM sẵn sàng, hàm `populateNewChartNow` được gọi để hiển thị biểu đồ bằng Chart.js:

javascript function populateNewChartNow(chart) { let ctx = document.getElementById(chart.id).getContext('2d'); new Chart(ctx, { type: chart.config.type, data: chart.config.data, options: chart.config.options }); } ```

6. Kết luận và lời kêu gọi hành động

Kết quả cuối cùng là một chatbot năng động và tương tác sử dụng Chart.js để tạo biểu đồ từ dữ liệu, giúp trải nghiệm của khách hàng hấp dẫn và sâu sắc hơn. Khách hàng giờ đây chỉ cần cung cấp dữ liệu trong lời nhắc của họ và nhận được trực quan hóa tương tác để đáp lại.

Hành trình tích hợp Chart.js và nâng cao chatbot AI của chúng tôi cho thấy sức mạnh của Azure AI, cả ở dạng các giải pháp cuối cùng sáng tạo và hấp dẫn, cũng như trong việc phát triển các trải nghiệm như vậy.

Sẵn sàng biến đổi các ứng dụng AI của bạn với biểu đồ năng động?

Kiểm tra các liên kết sau để biết thêm thông tin:

Siêu tốc chatbot AI của bạn với trực quan hóa tương tác sử dụng Chart.js