Author: Farhan Ahmed
Overview
The Visua11y Infographic API consists of two components: the admin plugin and the client-side plugin. The admin plugin is responsible for generating the API endpoint that processes the infographic images. This endpoint is used by the client-side plugin to submit images for processing. The admin plugin also features a metrics logging system, which tracks and stores each request made to the API endpoint. The logs include detailed information about each request to ensure transparency and assist with debugging and monitoring.Once an image is uploaded into the backend block, it is sent through the Infographic API for AI processing. The API generates detailed, accessibility-enhancing information, which is then available to be displayed on the frontend for users. This functionality ensures that infographic content is accessible and understandable to a broader audience, providing comprehensive descriptions and structured data, such as tables, to better explain the infographic’s content.
Features
- API Endpoint Generation: The admin plugin generates a secure API endpoint that processes infographic images, enabling seamless communication between the admin and client-side plugins.
- Metrics Logging System: Each request to the API is logged, capturing detailed information to monitor API usage and assist with troubleshooting.
- Infographic Image Processing: Once uploaded, images are processed by the Infographic API, generating accessibility-enhancing descriptions and structured data (e.g., tables) for better understanding.
- Accessibility Enhancement: The AI-generated output improves accessibility by providing detailed descriptions and tables that explain the infographic’s content to a wider audience.
- Integration with Client-Side Plugin: The admin plugin’s API endpoint allows the client-side plugin to submit images and retrieve the processed data for frontend display.
- Customizable Data Output: The AI API returns outputs in Markdown format, easily customizable to meet accessibility and design needs.
- Enhanced Monitoring and Reporting: The metrics logging system tracks request details, supporting debugging and performance optimization.
- Usage Metrics and API Settings: The admin plugin includes a comprehensive usage metrics system, logging detailed information for every API request made. This includes request time, status, and other relevant data to monitor and optimize API usage. The API settings page also allows for easy management of the API key and configuration settings.
- API Key Integration and Getting Started Guide: On the settings page, users can input their OpenAI API key to integrate the service. A “Getting Started” guide is also available, including detailed information about the model used, ensuring smooth onboarding and setup.
- Scalable and Multi-CMS Support: The plugin is designed for scalability and can be utilized with other CMS platforms for client-side integration, broadening its use case beyond WordPress.
Architecture
The Visua11y Infographic API operates in a two-step process to analyze and generate accessibility-enhancing content from infographic images:
The Markdown is then converted into HTML format to be easility integrated into WordPress or other CMS platforms, making it accessible to frontend users in a structured and readable format.
Step 1: Prompt Engineering for Type and Description
- The first AI prompt determines the type of the infographic (e.g., strategic) based on the content of the image.
- The AI is provided with detailed instructions to generate a comprehensive description of the infographic’s visual elements, key points, and any data trends.
- The AI returns an analysis of the infographic’s type along with a highly detailed description of its content.
Step 2: Output
- The second AI prompt processes the output from Step 1, using the image and description to generate the response in Markdown format.
- The response includes:
- A descriptive paragraph explaining the infographic’s key points.
- A table summarizing key data or insights from the infographic, depending on its type.
Example Markdown Response:
## Infographic Analysis: Strategic Trends in Marketing
This infographic outlines the strategic trends in digital marketing for the upcoming year. It provides insights into consumer behavior, digital platforms, and marketing spend. Key trends include a rise in mobile usage, increased investment in social media, and shifting priorities in content strategy.
| Trend | Percentage (%) |
|——————————-|—————-|
| Mobile Usage Increase | 30% |
| Social Media Marketing Growth | 45% |
| Content Strategy Shift | 25% |
This architecture ensures that infographic images are processed efficiently, and the output is optimized for accessibility, with clear descriptions and structured data that enhances understanding for a wide range of users.
Workflow
- Image Upload: The user uploads an infographic image into the backend block.
- AI Processing: The image is sent to the Infographic API for analysis. The AI processes the image in two steps:
- Step 1: Determines the infographic type and generates a detailed description.
- Step 2: Generates a response in Markdown format, including a descriptive paragraph and a data table.
- Output Display: The AI-generated Markdown output is displayed on the frontend in a clean, accessible format, including the descriptive paragraph and table.
- Error Handling: If no data can be generated due to an issue with the image or API processing, errors are handled gracefully, and a user-friendly message is shown.
- API Settings Configuration: In the admin panel, users can enter their OpenAI API key and configure the API settings.
- Usage Metrics Tracking: The admin plugin automatically logs detailed metrics for each API request, including the time, status, and additional request details, visible in the metrics section.
- Getting Started Guide: A step-by-step guide, along with model information, is available in the settings page to assist users with API key setup and initial configuration.
Technical Implementation
The Visua11y Infographic API integrates with WordPress to process infographic images and enhance accessibility. It consists of two plugins: the Admin Plugin and the Client-Side Plugin.
Admin Plugin
- API Settings: Provides a settings page to input the OpenAI API key and configure options, along with a Getting Started guide and model information.
- API Endpoint: Generates a secure RESTful API endpoint using WordPress’s REST API for processing infographic images.
- Metrics Logging: Logs detailed data for each API request, including time, status, and AI responses, stored in a custom database table for monitoring.
AI Integration
Step 1: The first prompt analyzes the infographic to determine its type and generate a detailed description.
Step 2: The second prompt processes the description and generates a Markdown response with a descriptive paragraph and data table.
Frontend Integration
The client-side plugin sends the image to the admin plugin’s API endpoint and displays the generated Markdown response on the frontend using a custom WordPress block.
Error Handling
- Errors are logged, and user-friendly messages are displayed if AI processing fails or no data can be generated.
This setup ensures efficient image processing, accessibility enhancements, and robust backend management for infographic content.
Future Enhancements
Support for Additional Infographic Types: Future versions will support more infographic types, such as “informational” and “statistical,” in addition to the current “strategic” type.
Audience-Specific Tone Customization: Users will be able to choose the tone of the AI-generated response to target specific audiences, such as the general public, university students, or professionals.
AI API Improvements: As AI technology advances, we will continuously refine prompt engineering and improve the quality of the generated output.
Complex Image Handling: Future updates will enhance the system’s ability to process more complex infographic images, providing better results for diverse image types.
Confidence Score Evaluation: A third system-generated prompt will be introduced to evaluate the final AI response and provide a confidence score, ensuring higher accuracy and reliability in the generated content.
Support for Additional Image Formats: Currently, the system supports PNG, JPEG, GIF, and WebP formats. Future versions will expand to include SVG and other image formats, providing broader compatibility for different types of infographics.
API Authentication: Future versions will include authentication for the API, ensuring secure access and usage by implementing methods such as API keys or token-based authentication.
Usage costs
The Visua11y Infographic API is costed at approximately $0.0036 per user request. This cost is based on the processing required for each image submission and the AI-generated output. Pricing is scalable, allowing for cost-efficient usage depending on the number of requests.
Testing
We have conducted tests using greyscale and blurred images, and the results have been very promising. The Visua11y Infographic API successfully processed these types of images, generating accurate and detailed descriptions, demonstrating the system’s robustness in handling diverse image conditions.