Enabled Automatic Generation of English Articles When Posting Articles

13 June, 2024

AI
Engineering

This blog's content is managed by microCMS.

When thrown into AI, it smoothly translates into English, so I prepared a frame for posting English articles about half a year ago and initially operated it manually each time.

It takes about 5 minutes to finish the AI translation & copy-paste work, but this blog makes heavy use of microCMS's repeating fields, so it was quite cumbersome, prompting me to automate the process.

Flow of Process

Although not overly complex, the generalized flow is as follows:

Post articles on the Japanese API side
↓
Trigger GitHub Actions with Webhook
↓
Run a script from GitHub Actions to retrieve the Japanese articles published from microCMS, and translate them with the ChatGPT API
↓
Format the translated content and POST it to the English API side
↓
Deploy to Cloudflare Pages

Script

The script for translation processing & English submissions looks something like the following:

import OpenAI from 'openai';
import { createClient } from 'microcms-js-sdk';

const openai = new OpenAI({
  apiKey: process.env.OPENAI_API_KEY
});

const client = createClient({
  serviceDomain: process.env.MICROCMS_SERVICE_DOMAIN,
  apiKey: process.env.MICROCMS_API_KEY
});

// Determine the content ID of the published article from the Webhook payload and retrieve the content
const ja = await client.getListDetail({
  endpoint: 'blog',
  contentId: process.env.CONTENT_ID
});

async function main() {
  // Translate Japanese article into English
  const chatCompletion = await openai.chat.completions.create({
    messages: [
      {
        role: 'system',
        content:
          'Please translate the title, description, and body parts of the JSON data input by the user into English and respond in the original JSON format.'
      },
      { role: 'user', content: JSON.stringify(ja) }
    ],
    model: 'gpt-3.5-turbo-0125',
    response_format: {
      type: 'json_object'
    }
  });
  const en = JSON.parse(chatCompletion.choices[0]?.message.content);
  console.log(en);

  // Check if an article with the same content ID already exists on the English article side
  const isExist = await client
    .getListDetail({
      endpoint: 'en-blog',
      contentId: en.id
    })
    .then(() => true)
    .catch(() => false);

  const content = {
    title: en.title,
    tags: en.tags.map((tag) => tag.id),
    ogimage: en.ogimage.url,
    body: en.body,
    description: en.description,
    books: en.books.map((book) => ({
      ...book,
      image: book.image.url
    })),
    author: en.author.id
  };

  // Update if an article with the same content ID already exists on the English side, create a new article if it doesn't exist
  if (isExist) {
    await client
      .update({
        endpoint: 'en-blog',
        contentId: en.id,
        content
      })
      .catch((err) => console.error(err));
    return;
  }

  await client
    .create({
      endpoint: 'en-blog',
      contentId: en.id,
      content
    })
    .catch((err) => console.error(err));
}

main();

ChatGPT API allows specifying the response format as JSON, which worked well.

response_format: {
  type: 'json_object'
}

Price

Depending on the length of the blog article, it ranges from 1 to 5 cents.

If you don't have to do a 5-minute copy-paste job, it's quite cheap.

Summary

First and foremost, it's important to apply AI in practical ways that benefit oneself.

By the way, if all goes well, the English version of this article should be generated at the following URL.

Enabled Automatic Generation of English Articles When Posting Articles | Kazuki Shibata: When thrown into AI, it smoothly translates into English, so I prepared a frame for posting English articles about half a year ago and initially operated it manually each time. It takes about 5 minutes to finish the AI translation & copy-paste work, but this blog makes heavy use of microCMS's repeating fields, so it was quite cumbersome, prompting me to automate the process.; https://www.mythinkings.net/en/auto-translation