記事投稿をしたら英語記事が自動生成されるようにした

13 June, 2024

AI
開発

このブログの内容はmicroCMSで管理している。

AIに投げたらサクッと良い感じに英訳してくれるから、半年前くらいに英語記事投稿用の枠も用意して、ひとまず毎回手動で運用していた。

時間にして5分くらいあればAI翻訳＆コピペの作業は終わるが、本ブログはmicroCMSの繰り返しフィールドを多用していて、そこそこ面倒だったので自動化してみた。

処理の流れ

そんなに複雑なことはしていないが、ざっくり次のような流れ。

日本語API側で記事投稿する
↓
WebhookでGitHub Actionsを動かす
↓
GitHun Actionsからスクリプトを動かし、microCMSから公開した日本語記事を取得し、ChatGPT APIで翻訳させる
↓
翻訳させたものを整形し、英語API側にPOST
↓
Cloudflare Pagesにデプロイ

スクリプト

翻訳処理&英語入稿部分のスクリプトは下記のような感じ。

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
});

// Webhookのペイロードから公開した記事のコンテンツIDを判断し、内容を取得
const ja = await client.getListDetail({
  endpoint: 'blog',
  contentId: process.env.CONTENT_ID
});

async function main() {
  // 日本語記事を英語に翻訳
  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);

  // 英語記事側にすでに同じコンテンツIDの記事が存在するかどうかを確認
  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
  };

  // 英語記事側にすでに同じコンテンツIDの記事が存在する場合は更新、存在しない場合は新規作成
  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ではレスポンスのフォーマットをJSON指定できるので、そこも良かった。

response_format: {
  type: 'json_object'
}

料金

ブログ記事の長さにもよるが、1〜5円くらい。

5分間のコピペ作業をしなくていいなら全然安い。

まとめ

まずは自分の役に立つ範囲でどんどんAIを実用化していくのが大事。

ちなみに本記事はうまくいけば下記の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