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 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...

Integrating Google Gemini AI in Laravel

Integrating Google Gemini AI in Laravel

Google Gemini Gemini là một mô hình trí tuệ nhân tạo mới mạnh mẽ từ Google không chỉ có khả năng hiểu văn bản mà còn có thể hiểu cả hình ảnh, video và âm thanh. Gemini là một mô hình đa phương ti...

Laravel Has Many Through Eloquent Relationship

Laravel Has Many Through Eloquent Relationship

Has Many Through Relationship hơi phức tạp để hiểu một cách đơn giản, nó sẽ cung cấp cho chúng ta một con đường tắt để có thể truy cập dữ liệu của một quan hệ xa xôi thông qua một mối quan hệ trung gi...

Laravel customize your API Versioning Route File

Laravel customize your API Versioning Route File

Trong khuôn khổ của Laravel, các route của api được tách thành một file duy nhất, đó là file api.php nằm trong thư mục routes . Nếu chúng ta muốn thêm version vào route api thì chúng ta sẽ làm như...

Laravel Many to Many Eloquent Relationship

Laravel Many to Many Eloquent Relationship

Many To many Relationship là mối quan hệ hơi phức tạp hơn mối quan hệ 1 - 1 và 1- n. Ví dụ một user có thể có nhiều role khác nhau, trong đó role cũng được liên kết với nhiều user khác nhau. Vì vậy...

Laravel Socialite Login With Gitlab

Laravel Socialite Login With Gitlab

GitLab GitLab là kho lưu trữ Git dựa trên web cung cấp các kho lưu trữ mở và riêng tư miễn phí, các khả năng theo dõi vấn đề và wiki. Đây là một nền tảng DevOps hoàn chỉnh cho phép các chuyên gia...

Laravel One to Many Polymorphic Relationship

Laravel One to Many Polymorphic Relationship

One to Many Polymorphic Model Relationship được sử dụng khi một model thuộc về nhiều model khác trên một model kết hợp duy nhất. Ví dụ: Nếu chúng ta có bảng post và video, cả hai đều cần thêm hệ thống...

Laravel Socialite Login With Facebook

Laravel Socialite Login With Facebook

Ngoài xác thực dựa trên biểu mẫu điển hình, Laravel cũng cung cấp một cách đơn giản và thuận tiện để sử dụng Laravel Socialite để xác thực với các nhà cung cấp OAuth. Socialite hiện hỗ trợ xác thực qu...

Laravel Queues and Jobs

Laravel Queues and Jobs

Các công ty có thẻ gặp khó khăn trong việc quản lý các dịch vụ hoặc ứng dụng của họ. Ví dụ, các công ty các thực hiện gửi email cho hàng triệu người dùng hoặc thực hiện sao lưu dữ liệu. Tất cả các hoạ...

ManhDanBlogs