Week-by-Week Report: Building an Open Source AI-Powered Text Generator for CKEditor5 in Drupal
I’ve always been fascinated by the potential of artificial intelligence, especially when it comes to enhancing web applications. Recently, I decided to dive into a new project: creating an open-source AI-powered text generator for CKEditor5 in Drupal.
The idea was simple but exciting — helping content creators get smart text suggestions while they work, making writing faster and more creative.
Over the past several weeks, I’ve explored different AI models, solved integration issues, and refined the module to fit our project’s needs.
Why This Module?
While many existing tools for Drupal use token-based integrations with services like OpenAI, they often come with costs and limitations. Our module stands out by offering a free, open-source solution for content generation directly within CKEditor5.
By using open-source models from Hugging Face, it provides a cost-effective and flexible way to enhance content creation without the usual constraints, making AI accessible to more users and integrating seamlessly into their workflow.
In this blog, I’ll take you through each step of my journey — what tools I used, the challenges I faced, and how I solved them. Stick around for some behind-the-scenes insights and tips from my experience!
Week 1: Getting Started with AI Text Generation
Explored:
- Butler AI: I began by exploring the Butler AI project to understand its architecture and how it integrates AI models for text generation. This exploration provided insights into handling API calls and integrating AI functionality within web applications.
Resource: Butler AI - Transformers PHP: Alongside Butler AI, I also explored this library. This library is designed to bring powerful open-source models from hugging-face into a PHP environment, which is crucial for my project.
Resource: Transformers PHP Documentation
Built or Worked On:
- Normal PHP Project using Transformers PHP: I initiated a basic PHP project to test how Transformers PHP functions independently. This was a foundational step to ensure that the AI model could generate text as expected before integrating it with CKEditor5.
Refer: Test-TransformersPHP - Drupal Module: Using the learnings from my initial exploration, I began drafting the framework for a new Drupal module that would leverage Transformers PHP for AI text generation.
Refer: TransformersPHP-Module
Week 2: Integrating AI with CKEditor5
Explored:
- Integrating with CKEditor5: The next step involved understanding CKEditor5’s plugin architecture to smoothly integrate the AI text generation functionality. This exploration included learning about CKEditor5’s API, event handling, and plugin creation methods.
Resource: CKEditor 5 Dev Tools
Built or Worked On:
- CKEditor5 Icon Module: I developed a custom icon module for CKEditor5. This module included a new toolbar button that users could click to generate AI-powered content suggestions. This icon would serve as the interface for invoking the AI model.
Refer: Test-CKEditor5- Icon
Week 3: Developing the AI Module for CKEditor5
Explored:
- AI Module: With the groundwork laid, I focused on creating a dedicated AI module within CKEditor5 that could interact with the backend AI service.
Built or Worked On:
- CKEditor5 AI Module: Developed the core functionality of the AI module that communicates with the Transformers PHP backend. This involved setting up AJAX calls from CKEditor5 to send text and receive AI-generated suggestions.
Refer: AI_Module
Week 4: Resolving CKEditor5 Integration Errors
Explored:
- CKEditor5 Errors Resolution: During integration, several errors arose, such as duplicated modules and plugins not being found. I explored CKEditor5’s debugging tools and community forums to find solutions.
Resources: Duplicated Module Info, Plugin not found Info
Built or Worked On:
- Duplicated Modules, Plugin Not Found: Fixed the errors related to duplicated modules and missing plugins by reconfiguring the module setup and ensuring all dependencies were correctly included and registered within CKEditor5.
Refer: Duplicated modules, Plugin not found
Week 5: Implementing Coding Standards and Workflows
Explored:
- Workflows: Explored best practices for maintaining code quality and consistency, including tools like PHPCS (PHP CodeSniffer) and Prettier.
Resources: Run core development checks
Built or Worked On:
- PHPCS, Prettier: Integrated PHPCS and Prettier into the development workflow to enforce coding standards and maintain consistent formatting across the project.
Refer: PHPCS, Prettier
Week 6: Testing and Model Selection
Explored:
- Tested Several Models: Evaluated multiple AI models to determine which one provides the best balance of performance and output quality for the text generation feature.
Resource: Using different models (advanced)
Built or Worked On:
- Settled with the GPT-2 Model: After extensive testing, I decided to use the GPT-2 model for the final implementation due to its ability to generate coherent and contextually relevant text suggestions.
Refer: Implementation of gpt2 model
Week 7: Resolving CSS Conflicts with Drupal
Explored:
- CSS Conflicts with Drupal: Faced several CSS conflicts between the custom CKEditor5 plugins and Drupal’s default styles. Explored methods to isolate plugin styles and avoid global CSS conflicts.
Resource: Working with CSS
Built or Worked On:
- Dialog Box, Icon, Movable Element: Adjusted the styles for the CKEditor5 dialog box, icons, and movable elements to ensure compatibility and a seamless user interface within the Drupal environment.
Refer: Dialog box, Icon, Movable element
Week 8: GitLab Release and Code Migration
Explored:
- GitLab Release and Migration: Prepared for the first official release of the text generation module by setting up a version control strategy and planning the code migration to GitLab.
Resource: Creating a project release and migrating code
Built or Worked On:
- text_generation Module, 1.0 Release, Migrated Code: Released version 1.0 of the text_generation module on GitLab and successfully migrated all code to the repository, ensuring proper versioning and documentation for future updates.
Refer: text_generation module, 1.0 release, Migrated code
Week 9: Documentation and Instructions
Explored:
- Documentation, Instructions: Focused on creating comprehensive documentation to guide users through the installation, setup, and usage of the text generation module. This also included troubleshooting steps and FAQs.
Resource: Creating a project release and migrating code
Built or Worked On:
- Created README Files and User Instructions: Developed detailed README files and additional user instructions to accompany the GitLab release, ensuring that other developers and users can easily understand and implement the module.
Refer: text_generation module, 1.0 release, Migrated code
Week 10: Work Report in a Medium Article
Explored:
- Blogs: A detailed Blog post to share progress week-to-week updates, challenges faced, and solutions found during the development process.
Resource: Medium
Built or Worked On:
- Blog Content Preparation: Prepared content that summarizes the project journey, milestones, and technical details.
Article Link: Week-by-Week Report
Week 11: Demo Video
Explored:
- Focused on outlining the key features and flow of the project to showcase in a demo.
Built or Worked On:
- Created a comprehensive demo video that highlights the functionality of the AI-powered text generation module, including integration with CKEditor5 and Drupal. This video serves as a visual guide for users and developers to understand the module in action.
Video Link: Demo Video
Week 12: Final Tweaks and Enhancements
Explored:
- Final review of the project to identify any remaining issues or areas for improvement, including user feedback.
Built or Worked On:
- Implemented final tweaks to enhance performance, fixed minor bugs, and refined the user interface for better usability. Ensured the module is fully optimized for release.
Gratitude-
A huge thank you to my mentor, Gaurav Mahlawat, for his guidance and support, and to the Drupal community for their resources and encouragement. Your collective help made this project possible and truly rewarding.
I would also like to extend my gratitude to Tim Lehnen, CTO of Drupal, for his leadership and support within the Drupal community, which fostered an environment that made this project possible.
It’s been a rewarding experience to reflect on the progress made and to present the results of the Open-Source AI integration for CKEditor 5 project so far.
Stay tuned for more updates, and feel free to reach out with any questions or feedback!
