OpenAIのAPIを使ってAI生成のHTMLをWordPressに自動投稿する趣味プロジェクトを始めました。
様々な方法があるかと思いますので大きな枠組みやキーとなったプロンプトなど重要な部分を絞っての紹介となりますが、何か参考になれば幸いです。
成果物 : ai.next-text.info
プロジェクトの特徴
- パーソナリティが異なる複数のWP投稿者を用意
- 投稿者毎に担当するカテゴリーを予め用意
- node-cronを使って自動生成した記事を自動投稿
node-cronでの自動化
import authors from "./authors/authors"
import * as cron from 'node-cron'
let authorIndex = 0
cron.schedule('* */5 * * *', async () => {
const author = authors[authorIndex]
//authorをローテーション
authorIndex = (authorIndex + 1) % authors.length
try{
await autoPost(author)
} catch(err : any){
console.log(err)
}
})
参考の投稿者 (ikuraとtarao)
const ikura = {
username: "ikura",
email: "ikura@namino",
password: "asdfa"
personality: "フロントエンドデベロッパーのZ世代女子",
categories: ["UXデザイン", "モバイルマーケティング"]
}
const tarao = {
username: "tarao",
email: "tarao@isono",
password: "fasdfas"
personality: "日本語勉強中の挙動不審なZ世代のマーケティングスペシャリスト",
categories: ["SNSマーケティング", "バイラルマーケティング"]
}
※ username, email, passwordはは投稿の際に必要なプロパティです
自動投稿の流れ(autoPost)
概要としては、自動投稿プログラムからOpen AIのAPIに必要なコンテンツをひとつずつ生成してもらい最終的にWordPressのREST APIを使って投稿するといった流れになっています。
キーとなるプロンプト
プロンプトエンジニアリングのテクニックを活用しています。
参考までに、以下のプロンプトで使っている手法はこちらの記事で紹介しています。
1. html生成のプロンプト
投稿者特有のパーソナリティとカテゴリーを使ったプロンプトをChat Completion APIに渡しています。
※成果物の投稿を見ていただくと一部HTMLの出力に失敗している事が確認出来るため改善が必要です
makeMessagesForHtmlPrompt(author){
const category = pickCategory(author.categories)
return [
{
"role":"system",
"content": `あなたの名前は${author.username}です。${author.personality}としてWordPressの記事を生成します。`
},
{
"role":"user",
"content":`カテゴリー:${category}に関する投稿を${author.personality}らしい口調で書いてください。次のHTMLタグのみを利用してください。[h2,h3,h4,ul,ol,li,table,thead,tbody,th,td,blockquote,p,hr] html, body, headなどは必要ありません。`
}
]
}
2. excerpt生成のプロンプト
Few Shotラーニングを活用しています。
はじめに例題を使って返して欲しい形式を学習させています。
また「###」はセクションを明確にするために使用しており、${generatedHTML}は1のプロンプトの成果物を使っています。
makeMessagesForWpPostPrompt(generatedHtml: string): ChatMessages{
return [
{
"role":"system",
"content":"You are JSON generator that returns JSON by reading HTML article and make JSON with user's instruction."
},
{
"role":"user",
"content":`以下の記事を読んでください。
###<h1>SEOって何？Z世代が教える"検索エンジン最適化"の裏技</h1><p>Hey fam! 今日は、みんな大好き（？）SEO、つまり検索エンジン最適化についておしゃべりしようと思います。</p><h2>SEOって何よ？</h2><p>簡単に言うと、SEOはGoogle先生に好かれるテクニックです。これでみんなのサイトやブログが検索結果で上位に表示されるわけ。</p>###
title、excerpt、categoryをJSON形式で出力してください。categoryは[SEO, Marketing]のどれかを選んでください。JSONのみを返してください。`
},
{
"role":"assistant",
"content":`
{
“title”:”SEOって何なん？”,
“excerpt”:”SEOはGoogle先生に好かれるテクニックです。キーワード選び、質の高いコンテンツ、バックリンクの重要性を抑えましょう。”,
“category”:”SEO”
}
`
},
{
"role":"user",
"content":`以下の記事を読んでください。###${generatedHtml}###
title、excerpt、categoryをJSON形式で出力してください。categoryは[${this.props.categories.join(", ")}]のどれかを選んでください。JSONのみを返してください。`
},
]
}
3. イメージ生成用のテキスト作成のためのプロンプト
画像生成のAPIは英語の方が精度が良いため以下のようなプロンプトとなっています。「---」はセクションを明確にするために使用しています。
このプロンプトの成果物の最後に" cubism painting."のようなスタイルを指定する事で生成される画像に統一感を持たせる事が出来ます。
こちらもまだ改善が必要ですが、現状の一例として「web analytics understanding visitor behavior for website improvement cubism painting」といったテキストが生成出来ています。
const makeThumbnailPromptFromText = async (text:string): Promise<string> => {
return [
{
"role":"system",
"content":"You are a machine that generate image generation idea from a given text."
},
{
"role":"user",
"content":"read a article excerpt and make suitable thumbnail image description for the excerpt in English. ---Kanazawa, often overshadowed by Tokyo and Kyoto, is a city in Japan's Ishikawa Prefecture that offers a rich blend of history, culture, and natural beauty. Known as Little Kyoto, it's a must-visit for anyone interested in traditional Japanese arts and crafts.---"
},
{
"role":"assistant",
"content":"Japanese historic arts and crafts"
},
{
"role":"user",
"content": `read a article excerpt and make suitable thumbnail image description for the excerpt in English. ---${text}---`
}
]
}
以上となります。最後までお読み頂きありがとうございました。
OpenAIのドキュメント: https://platform.openai.com/docs/introduction
このプロジェクトでは、GPTとImage generationを使用しました。