大規模言語モデルではじめる 自動化 ー LLMはWordPress 制作・運用をどう変えるのか？

セッション ⼤規模⾔語モデルではじめる ⾃動化 ー LLMはWordPress 制作‧運⽤をどう変えるのか？ スピーカー：岡本 秀⾼

はじめる前に ● 登壇者は、「AIやLLMの専門家」ではありません ● WordPressサイトの運用保守や機能開発に、 OpenAIとそのAPIを利用した「体験」を紹介します ● AIやLLMに関する学術的な情報や 著作権等に関する議論については、専門家にご相談ください

今日 会話したい トピック ● LLMで、どんな作業が 効率化できるのか ● LLMは、 WordPress / Web制作の どんな課題を解決するか ● WordPress & LLMでの 新サービスの可能性

今日話す トピック ● OpenAIで、個人サイトの 運用保守を効率化した話 ● OpenAI APIを WordPressに組み込んだ話 ● LLM活用が 上手くいかなかったケース

岡本セッション 秀⾼( @hidetaka_dev ) ● ⼤規模⾔語モデルではじめる Kansai WordPress Meetup ⾃動化 ー LLMはWordPress WordCamp Kyoto 2017 / Kansai 2024 制作‧運⽤をどう変えるのか？ ● React / TypeScript / AWS / Cloudflare ● ● スピーカー：岡本 秀⾼ Stripe Developer Advocate

今日話す トピック ● OpenAIで、個人サイトの 運用保守を効率化した話 ● OpenAI APIを WordPressに組み込んだ話 ● LLM活用が 上手くいかなかったケース

OpenAI / LLMとは

Large Language Model ● パラメータや ラベルなしテキストを 膨大な量使用して トレーニングされた言語モデル ● 事前に提供された テキストデータを元に予測する ● 幅広いタスクに利用できる 汎用性を持つことが多い

これもテキスト あれもテキスト ● ブログコンテンツ ● PHPやJavaScriptコード ● nginx / Apacheログ ● 検索キーワード

紹介したい記事や情報または プラグイン/APIなどのアプデ情報を LLMで要約してもらう

サーバーで発生したエラーを ChatGPT( GPT-3.5 )に 相談しつつ解決方法を模索

PHPのエラーやWarningについても 相談することができる

ただし提示されたコードや手順が 常に正しいとは限らない

ハルシネーション Hallucination ● LLMなどのモデルが、 「事実に基づかない情報を生成 する」現象 ● 学習データの偏りや誤情報 「学習時点では存在しなかった 概念」などによって発生する 参考: https://www.nri.com/jp/knowledge/glossary/lst/ha/hallucination

WordPress.orgなどで「情報の裏をとる」か、 テスト環境などで「事前の検証作業」を必ず行おう

● LLMを 業務フローに 組み込む前に 検索エンジンとは別物と考える ○ ● 対話では「意図」を明確に ○ ○ ○ ● LLMは「誤った情報」を 提供してくる可能性がある アイディアだし？ 文章の要約や提案？ エラー文の解説依頼？ LLMの性質を理解して使う ○ そのモデルはいつ学習したか？

今日話す トピック ● OpenAIで、個人サイトの 運用保守を効率化した話 ● OpenAI APIを WordPressに組み込んだ話 ● LLM活用が 上手くいかなかったケース

We ❤ Automation

https://platform.openai.com/overview

• https://platform.openai.com/overview

APIキーを生成する

$response = wp_remote_post(
'https://api.openai.com/v1/chat/completions',
array(
'body' => json_encode($data),
'headers' => array(
'Content-Type' => 'application/json',
'Authorization' => 'Bearer ' . $api_key,
),
'timeout' => 100
)
);
if ( is_wp_error( $response ) ) {
$error_message = $response->get_error_message();
error_log( print_r( $error_message, true ) );
return '';
}
$json = json_decode(
wp_remote_retrieve_body( $response ),
t
rue
);

●

公式SDKはPythonとNode.js

●

WordPressでは、
wp_remote_postを使う

●

APIキーはAuthorization
ヘッダーで利用する

add_action(
‘transition_post_status',
function( $new_status, $old_status, $post ) {
if ( 'publish' !== $new_status ) {
return;
}
$OpenaiWP = new OpenAIWOrdPress();
$OpenaiWP->generate_excerpt_by_post( $post );
}, 10, 3 );

記事を公開した時「だけ」
処理が走るように
フックを追加する

<?php
function generate_excerpt_by_post( $post ) {
if ( $post->post_excerpt ) {
return;
}
$content = get_post_field( 'post_content', $post->ID );

Postの概要（excerpt）が
$generated_excerpt = $this->generate_excerpt( $content);
if ( ! $generated_excerpt ) {
return;
}
wp_update_post( array(
'ID' => $post->ID,
'post_excerpt' => $generated_excerpt,
) );
}

存在しない時は、
OpenAI APIで生成する

$data = array(
'model' => 'gpt-3.5-turbo',
'messages' => array(
array(
'role' => 'system',
'content' => "You're the blog writer good at the
summarizing existing posts. Please generate a
short summary of the user input text by the
following conditions. rule1: The summary
should be written in ' . $lang . '. rule2: The
summary should less than ' .
$summary_length . ' words. rule3: The
summary should not include any code
example."
),
array(
'role' => 'user',
'content' => $content,
)
)
);

●

role: systemで
「前提条件」を設定する
○

●

文字数や言語など

role: userで
返答を要求する内容を送信
○

要約目的ならば、
ここに記事本文を入れる

抜粋文章を作る必要がなくなった（OpenAIが自動生成）

記事一覧の概要文が「...」で省略されなくなった

● OpenAI API呼び出しの 「非同期化」 ○ Next Step ○ ● 保存処理時に APIを呼び出すと タイムアウトが稀に発生する 保存後、裏側で要約を生成したい プロンプトのチューニング ○ ○ ハードコードは調整しにくい wp_optionsを使うか 非同期化に合わせて外部化する

無限ループなどの事故に備えて、 OpenAI APIの「上限設定」を必ず行おう

Deep dive into LLM

Langchain (Python / JS) https://www.langchain.com/

• https://www.langchain.com/

const chat = new ChatOpenAI({
temperature: 0,
openAIApiKey: process.env.OPENAI_API_KEY
});
chat.call([
new SystemChatMessage("You're a helpful assistant that translates Japanese to
English"),
new HumanChatMessage("こんにちは"),
new AIChatMessage("Hello! That's \"Konnichiwa\" in Japanese."),
new HumanChatMessage("ほかの言い方を、英語で教えてください。"),
]).then(result => console.log(result.text))

「それまでの会話の流れ」を
再現することで、
「コンテキストのある会話」を
実現する

const chat = new ChatOpenAI({
temperature: 0,
openAIApiKey: process.env.OPENAI_API_KEY
});
const loader = new DirectoryLoader(
'/Users/sandbox/langchain-ts-starter/dummy-data',
{
'.md': path => new TextLoader(path),
'.json': path => new JSONLoader(path)
}
)
const docs = await loader.load()
const embeddings = new OpenAIEmbeddings({
openAIApiKey: process.env.OPENAI_API_KEY
})
const vectorStoreData = await MemoryVectorStore.fromDocuments(docs, embeddings)
writeFileSync('./dummy-data.json', JSON.stringify(vectorStoreData))

JSONやMarkdownで、
「追加の情報」をOpenAIに
提供できるようにする
Retrieval
Augmented
Generation（RAG）

// 記事データを取得
const response = await fetch('https://<Your WordPress site URL>/wp-json/wp/v2/posts')
const jsonResponse = await response.json()
// ベクターストアが利用できるように、レスポンスを変換する
const indexData = jsonResponse.map((data) => data.content.rendered)
const jsonString = JSON.stringify(indexData)
const bytes = new TextEncoder().encode(jsonString)
const jsonBlobData = new Blob([bytes], {
type: 'application/json:charset=utf-8'
})
const jsonLoader = new JSONLoader(jsonBlobData)
// 長い文章も処理できるようにするために、テキストを分割する
const docs = await jsonLoader.loadAndSplit()
// ベクトル化したデータを元に、モデルやChainをセットアップ
const vectorStoreData = await MemoryVectorStore.fromDocuments(docs, embeddings)
const chain = RetrievalQAChain.fromLLM(model, vectorStoreData.asRetriever())
// ユーザーからの質問を、LangChain経由でOpenAI APIに渡す
chain.call({ query: "Astroの使い方を教えて" })

WP APIで記事情報を取得し、
その情報を利用して質問に回答するサンプルコード

Learn JavaScript / Python Deeply ● PHPでもOpenAIなどの モデルは「利用できる」 ● 周辺ツール・フレームワークは Pythonに集中している状況 ○ ● Node.jsがその次点。ただし大差 本格的な組み込みは Python、せめてNode.jsで ○ WordPressは 「作ったAPI」を呼び出すだけ

今日話す トピック ● OpenAIで、個人サイトの 運用保守を効率化した話 ● OpenAI APIを WordPressに組み込んだ話 ● LLM活用が 上手くいかなかったケース

なんのために ブログ書いてたっけ🧐

手段を目的化 すると迷走する ● LLMもOpenAIも 手段であって目的ではない ● 目的を達成するために 使いこなすのが本来の使い方 ● 「なんのためにWordPress サイトを作りましたか？」

● 障害やエラー対応など苦手な 作業をLLMの支援で効率化した ○ ● おさらい OpenAI APIを使えば、 記事の要約自動化や アシスタント作成も可能になる ○ ● ただし作業前に「裏どり」しよう Python / Node.jsをはじめよう 汎用性が高い分、 「手段の目的化」には要注意