OpenAI

OpenAI là một công ty nghiên cứu và triển khai trí tuệ nhân tạo, nổi tiếng với việc phát triển các mô hình AI tiên tiến.

Mục tiêu của OpenAI là đảm bảo rằng trí tuệ nhân tạo tổng quát (AGI) mang lại lợi ích cho toàn nhân loại.

OpenAI luôn dẫn đầu trong việc phát triển công nghệ AI và làm cho chúng trở nên dễ tiếp cận hơn.

Tích hợp AI Assistant với CKEditor 5: Điều kiện tiên quyết

OpenAI API key

Để sử dụng plugin AI Assistant của CKEditor, bạn cần có một API Key từ OpenAI để có thể kết nối với plugin AI Assistant. Dưới đây là cách đăng ký:

1. Truy cập OpenAI
Mở trình duyệt và truy cập vào website của OpenAI. Đăng nhập vào tài khoản của bạn hoặc khởi tạo một tài khoản mới nếu bạn chưa có.

2. Tạo API Key
Sau khi đăng nhập, bạn hãy điều hướng đến mục API keys và tiến hành khởi tạo một API Key mới.

CKEditor 5 License key

AI Assistant là một plugin Premium cho CKEditor 5, yêu cầu phải có Commercial License để sử dụng. Nếu bạn chưa có Commercial License, bạn có thể lựa chọn một trong hai tùy chọn bên dưới:

1. Mua giấy phép
Liên hệ với CKEditor để có Commercial License phù hợp với nhu cầu của bạn. License này là cần thiết để mua và sử dụng bất kỳ plugin Premium nào.

2. Dùng thử miễn phí
Nếu bạn muốn thử plugin trước khi mua, CKEditor cung cấp một bản dùng thử miễn phí 30 ngày cho Commercial License và tất cả các plugin Premium.

Bạn có thể đăng ký bản dùng thử này tại đây.

Tích hợp AI Assistant với CKEditor 5: Sử dụng Laravel Vite

Trước khi, bắt đầu thực hiện tính năng này, bạn cần phải tích hợp CKEditor vào Laravel bằng Laravel Vite (Phiên bản được áp dụng trong bài viết là Laravel 11).

Nếu bạn chưa thực hiện thì có thể tham khảo lại bài viết Integrating CKEditor 5 In Laravel 10 Using Vite.

Sau khi bạn đã có OpenAI API key và CKEditor 5 License key. Bạn hãy mở tập tin .env và điền thông tin như sau:

VITE_OPENAI_API_KEY=xxxxxx
VITE_CKEDITOR_LICENSE_KEY=xxxxxx

Bây giờ, chúng ta sẽ tiến hành tích hợp Open AI vào plugin AI Assistant của CKEditor 5 trong dự án Laravel bằng Laravel Vite.

Dưới đây là một danh sách plugin cần thiết cho mục đích này:

npm install --save @ckeditor/ckeditor5-ai

Tiếp theo, chúng ta sẽ chỉnh sửa tập tin ckeditor.js trong thư mục src/resources/js với nội dung như sau:

import { ClassicEditor as ClassicEditorBase } from '@ckeditor/ckeditor5-editor-classic';
import { Essentials } from '@ckeditor/ckeditor5-essentials';
import { Autoformat } from '@ckeditor/ckeditor5-autoformat';
import { Bold, Italic } from '@ckeditor/ckeditor5-basic-styles';
import { BlockQuote } from '@ckeditor/ckeditor5-block-quote';
import { Heading } from '@ckeditor/ckeditor5-heading';
import { Link } from '@ckeditor/ckeditor5-link';
import { List } from '@ckeditor/ckeditor5-list';
import { Paragraph } from '@ckeditor/ckeditor5-paragraph';
import { AIAssistant, OpenAITextAdapter } from '@ckeditor/ckeditor5-ai';

export default class ClassicEditor extends ClassicEditorBase {}

ClassicEditor.builtinPlugins = [
    Essentials,
    Autoformat,
    Bold,
    Italic,
    BlockQuote,
    Heading,
    Link,
    List,
    Paragraph,
    OpenAITextAdapter,
    AIAssistant
];

ClassicEditor.defaultConfig = {
    toolbar: {
        items: [
            'heading',
            '|',
            'bold',
            'italic',
            'link',
            'bulletedList',
            'numberedList',
            'blockQuote',
            'undo',
            'redo',
            'aiCommands',
            'aiAssistant'
        ]
    },
    licenseKey: import.meta.env.VITE_CKEDITOR_LICENSE_KEY,
    ai: {
        openAI: {
            requestHeaders: {
                Authorization: `Bearer ${import.meta.env.VITE_OPENAI_API_KEY}`
            }
        }
    },
    language: 'en'
};


ClassicEditor
    // Note that you do not have to specify the plugin and toolbar configuration — using defaults from the build.
    .create( document.querySelector( '#editor' ))
    .then( editor => {
        console.log( 'Editor was initialized', editor );
    } )
    .catch( error => {
        console.error( error.stack );
    } );

Kết quả của công việc bạn đã làm đang chờ bạn khám phá!

Sau khi đã hoàn thành các bước trên, giờ là lúc để chúng ta cùng nhau khám phá thành quả của công sức mình.

Hãy thực thi lệnh sau để tiến hành tích hợp AI Assistant vào CKEditor bằng Laravel Vite:

npm run build

Cuối cùng, chúng ta hãy mở trình duyệt lên và truy cập vào địa chỉ  http://127.0.0.1 để chiêm ngưỡng kết quả do chính bản thân chúng ta tạo ra 🤤🤤🤤🏆🍨🍨🍨.

Tài liệu tham khảo:

https://ckeditor.com/docs/ckeditor5/latest/features/ai-assistant/ai-assistant-integration.html

CÓ THỂ BẠN QUAN TÂM

Laravel Custom Request

Laravel Custom Request

Nếu bạn có một form để người dùng nhập dữ liệu và bạn muốn kiểm tra dữ liệu đầu vào trước khi lưu xuống database chẳng hạn thì bạn có 2 cách sau đây: Cách 1: Bạn thêm validate trực tiếp vào hàm sto...

Laravel Socialite Login With Github

Laravel Socialite Login With Github

GitHub GitHub là một nền tảng phát triển phần mềm trực tuyến. Nó được sử dụng để lưu trữ, theo dõi và cộng tác trong các dự án phần mềm. Nó giúp các nhà phát triển dễ dàng chia sẻ các tập tin mã...

Laravel Mail Sending Redirector Listener

Laravel Mail Sending Redirector Listener

Trong quá trình phát triển web, việc gửi email là một chức năng quan trọng để thông báo, đặt lại mật khẩu, hoặc tương tác với người dùng. Tuy nhiên, khi chúng ta đang trong quá trình phát triển, vi...

Integrating elFinder Into CKEditor 5 In Laravel

Integrating elFinder Into CKEditor 5 In Laravel

CKEditor 5 CKEditor 5 là một trình soạn thảo văn bản phong phú JavaScript với nhiều tính năng và khả năng tùy chỉnh. CKEditor 5 có kiến trúc MVC hiện đại, mô hình dữ liệu tùy chỉnh và DOM ảo, mang...

Integrating CKFinder with Amazon S3 in Laravel

Integrating CKFinder with Amazon S3 in Laravel

CKFinder 3 CKFinder 3 là trình quản lý tập tin được tích hợp với CKEditor 4 và CKEditor 5. Nó giúp bạn dễ dàng đưa các tập tin và hình ảnh vào nội dung của Editor một cách an toàn. Đây là một tín...

Pipeline Design Pattern in Laravel

Pipeline Design Pattern in Laravel

Pipeline Design Pattern là nơi mà các dữ liệu được chuyển qua một chuỗi các nhiệm vụ hoặc giai đoạn. Pipeline hoạt động giống như một chuỗi dây chuyền lắp ráp, nơi dữ liệu được xử lý và sau đó, sẽ...

ZSH-Artisan CLI and Docker: The Perfect Match for Laravel Development

ZSH-Artisan CLI and Docker: The Perfect Match for Laravel Development

Zsh Zsh viết tắt của “ Z Shell ” là một shell nâng cao cho hệ thống Unix và Linux. Nó được phát triển nhằm cung cấp các tính năng và khả năng cao hơn so với shell mặc định trên hầu hết các hệ thố...

Csv import with Validation for Laravel

Csv import with Validation for Laravel

Trong một bài viết lúc trước, mình đã chia sẻ đến các bạn cách xây dựng một service import và export CSV sử dụng Facades, nếu có bạn nào không biết hoặc đã quên các bạn có thể tham khảo lại bài viết t...

Laravel Middlewares

Laravel Middlewares

Middleware cung cấp một cơ chế thuận tiện để lọc các yêu cầu HTTP gửi đến ứng dụng bạn. Nó là một lớp trung gian nằm giữa request và controller. Bạn có thể thêm các xử lý logic trước khi gửi đến contr...

ManhDanBlogs