In modern translation management systems, the ability to quickly generate high-quality translation suggestions directly within the editing interface can significantly streamline the translation workflow. This article explores how we integrated OpenAI's ChatGPT API with Payload CMS to provide inline translation suggestions, creating a seamless experience for content editors and translators.
The system combines several key components:
A custom Payload CMS field component for the user interface
An API endpoint that interfaces with OpenAI's ChatGPT
Integration with our Settings global for configuration
Function calling for structured translation responses
This integration allows translators to:
Receive AI-powered translation suggestions directly in the editing interface
Choose from multiple translation variations
Maintain context awareness through description fields
Customize the AI's behavior through configurable prompts
The heart of our implementation is a custom Payload CMS field that extends the standard text input with AI translation capabilities:
const InputField: React.FC<Props & {
minVariations: number;
maxVariations: number
}> = ({
path,
label,
required,
admin: { readOnly },
minVariations,
maxVariations,
}) => {
const documentInfo = useDocumentInfo();
const { code: locale } = useLocale();
const [translations, setTranslations] = useState([]);
const [load, setLoad] = useState("");
const [term, setTerm] = useState("");
const [context, setContext] = useState("");
// ... component implementation
};Key features of the field component:
Extends Payload's text field functionality
Provides a familiar interface for manual translation
Adds an "Ask ChatGPT" button for AI suggestions
Displays multiple translation options in a dropdown
Preserves context through description fields
The component is designed to be non-intrusive - it maintains all standard text field functionality while adding AI capabilities when appropriate:
return (
<div className="custom-translation-picker field-type text">
<Label htmlFor={path} label={`${label} (${locale})`} required={required} />
<input
type="text"
id={path}
value={value.toString()}
onChange={(e) => setValue(e.target.value)}
disabled={readOnly}
/>
{locale !== defaultLocale && documentInfo.id && (
// AI translation interface
)}
</div>
);The translation endpoint leverages OpenAI's function calling feature to ensure structured responses:
const tools = [
{
type: "function",
function: {
name: "display_translation_options",
description: `Display a list of translation options...`,
parameters: {
type: "object",
properties: {
translations: {
type: "array",
items: {
type: "string",
},
description: "List of translation options",
},
},
},
},
},
];This approach offers several advantages:
Structured responses that can be reliably parsed
Clear guidance to the AI about expected output format
Flexibility in the number of variations requested
Easy extension for additional metadata in the future
The system uses our previously implemented Settings global for configuration:
const settings = await payload.findGlobal({
slug: "payload-settings",
}) as PayloadSetting;
const model = settings.chatgptModel ?? "gpt-4-turbo-preview";
let content = settings.askChatgptPrompt;This allows administrators to:
Select the ChatGPT model to use
Customize prompts for different scenarios
Configure the number of variations
Set default behaviors
The custom field can be used in various contexts throughout the CMS:
{
name: "title",
label: "Title",
type: "text",
localized: true,
admin: {
components: {
Field: (props) => (
<InputField {...props} minVariations={3} maxVariations={5} />
),
},
},
}{
name: "text",
type: "text",
label: "Text",
localized: true,
admin: {
components: {
Field: (props) => (
<InputField {...props} minVariations={3} maxVariations={5} />
),
},
},
}The system maintains translation context by:
Fetching the original content and description
Including context in the ChatGPT prompt
Allowing customization of context handling through settings
await fetch(`/api/${documentInfo.slug}/${documentInfo.id}?draft=false&depth=1`)
.then((response) => response.json())
.then((data) => {
setContext(data.description);
setTerm(data[path]);
});Several areas have been identified for future improvement:
Enhanced Error Handling
Better validation of API responses
Graceful fallback for API failures
User-friendly error messages
Performance Optimization
Caching of common translations
Batch translation capabilities
Request rate limiting
Quality Assurance
Translation confidence scores
Automatic quality checks
Context-specific validation
User Interface Improvements
Preview of translations in context
Keyboard shortcuts for efficiency
Bulk translation interface
The integration of AI-powered translations directly into the CMS editing interface represents a significant improvement in translation workflow efficiency. By combining the power of ChatGPT with a carefully designed user interface, we've created a system that:
Reduces translation time and effort
Maintains translation quality through context awareness
Provides flexibility through configuration
Integrates seamlessly with existing workflows
This implementation demonstrates how modern AI capabilities can be thoughtfully integrated into content management systems to enhance productivity while maintaining user control and content quality.
Pas encore de commentaires, soyez le premier :
© 2024 par Moritz Thomas