質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.35%
LINE Messaging API

LINE Messaging APIは、メッセージの送信・返信ができるAPIです。Web APIを経由しアプリケーションサーバとLINEのAPIでやり取りが可能。複数のメッセージタイプや分かりやすいAPIリファレンスを持ち、グループチャットにも対応しています。

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

GitHub

GitHubは、Gitバージョン管理システムを利用したソフトウェア開発向けの共有ウェブサービスです。GitHub商用プランおよびオープンソースプロジェクト向けの無料アカウントを提供しています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

ChatGPT

ChatGPTは、OpenAI社の提供するインタラクティブなテキストコミュニケーションを行うことができるAIサービスまたは、そのアルゴリズムのモデル名です。

Q&A

0回答

307閲覧

APIを使わずにLINE Botで画像を生成して送る方法を教えていただきたいです。

hiroaki0724_2

総合スコア0

LINE Messaging API

LINE Messaging APIは、メッセージの送信・返信ができるAPIです。Web APIを経由しアプリケーションサーバとLINEのAPIでやり取りが可能。複数のメッセージタイプや分かりやすいAPIリファレンスを持ち、グループチャットにも対応しています。

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

GitHub

GitHubは、Gitバージョン管理システムを利用したソフトウェア開発向けの共有ウェブサービスです。GitHub商用プランおよびオープンソースプロジェクト向けの無料アカウントを提供しています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

ChatGPT

ChatGPTは、OpenAI社の提供するインタラクティブなテキストコミュニケーションを行うことができるAIサービスまたは、そのアルゴリズムのモデル名です。

0グッド

0クリップ

投稿2023/05/28 12:44

実現したいこと

CanvaのAPIを使わずに、ChatGPTのAPI(gpt-3.5-turbo)を利用したLINE Botで画像を生成し、送りたい。

前提

開発環境は
GitHub Codespaces
JavaScript Node.jsで動かしています。

※恥ずかしながら、私は悲エンジニアでコードはもっぱらChatGPT頼りです。
初歩的、的外れ、そもそも概念、単語が違う。という内容が多々あると思います。申し訳ございません。

ChatGPTのAPI(gpt-3.5-turbo)を利用して、低温調理の時間を教えてくれるLINE Botを作成しております。

「食材」と「食材の厚み」を送ると、適した低温調理の温度と時間を返してくれます。
追加で、お勧めの付け合わせとお酒を提案してもらうところまでは出来ました。
最後に、テキストの後にその食材を低温調理した代表的な料理の画像(例えば鶏肉であれば鶏ハム)の画像を送りたいのですが、うまくいきません。

発生している問題・エラーメッセージ

当初、Webから適した画像を探して表示させることを考えた(以下のコード)のですが、
アクセス権限が制限されていたり、非公開の画像が出てきたりしてしまいます。

該当のソースコード

javascript

1'use strict'; 2 3// ######################################## 4// 初期設定など 5// ######################################## 6 7// モジュールの読み込み 8const line = require('@line/bot-sdk'); 9const openai = require('openai'); 10const express = require('express'); 11 12const PORT = process.env.PORT || 3000; 13 14// 設定 15const config = { 16 channelSecret: process.env.CHANNEL_SECRET || '●●●●●●●●●●●●●●●●●●●●', 17 channelAccessToken: process.env.CHANNEL_ACCESS_TOKEN || '●●●●●●●●●●●●●●●●●●●●', 18}; 19 20// クライアントの作成 21const client = new line.Client(config); 22 23const gptConfig = new openai.Configuration({ 24 organization: process.env.OPENAI_ORGANIZATION || "●●●●●●●●●●●●●●●●●●●●", 25 apiKey: process.env.OPENAI_API_KEY || '●●●●●●●●●●●●●●●●●●●●', 26}); 27 28const gpt = new openai.OpenAIApi(gptConfig); 29 30const makeCompletion = async (userMessage) => { 31 const prompt = { 32 role: "system", 33 content: `## あなたは低温調理の専門家です。 34 ## userが肉の種類と厚さを送ってくるので、適した温度と時間を教えてあげて下さい。 35 ## また、追加でおすすめの付け合わせ、味付け、お酒も教えてあげて下さい。 36 ## 更に追加でその肉を使った代表的な低温調理の画像を見つけて送ってください。` // プロンプトを入力 37 }; 38 39 userMessage.unshift(prompt); 40 console.log(userMessage); 41 return await gpt.createChatCompletion({ 42 model: "gpt-3.5-turbo", 43 messages: userMessage, 44 temperature: 0.5, 45 n: 1 46 }); 47}; 48 49// メッセージイベントの処理 50async function handleEvent(event) { 51 // テキストメッセージ以外は無視 52 if (event.type !== 'message' || event.message.type !== 'text') { 53 return Promise.resolve(null); 54 } 55 56 const userMessage = [{ 57 role: "user", 58 content: event.message.text 59 }]; 60 61 // ChatGPT APIにリクエストを送る 62 try { 63 const completion = await makeCompletion(userMessage); 64 // レスポンスから返答を取得 65 const reply = completion.data.choices[0].message.content; 66 // console.log(completion.data.choices[0].message.content); // レスポンスをみたいときにコメントアウトを外してください 67 // 返答をLINEに送る 68 return client.replyMessage(event.replyToken, { 69 type: 'text', 70 text: reply 71 }); 72 } catch (error) { 73 // エラーが発生した場合はログに出力 74 console.error(error); 75 return Promise.resolve(null); 76 } 77} 78 79const app = express(); 80app.get('/', (req, res) => res.send('Hello LINE BOT! (HTTP GET)')); 81app.post('/webhook', line.middleware(config), (req, res) => { 82 83 if (req.body.events.length === 0) { 84 res.send('Hello LINE BOT! (HTTP POST)'); 85 console.log('検証イベントを受信しました!'); 86 return; 87 } else { 88 console.log('受信しました:', req.body.events); 89 } 90 91 Promise.all(req.body.events.map(handleEvent)).then((result) => res.json(result)); 92}); 93 94 95app.listen(PORT); 96console.log(`ポート${PORT}番でExpressサーバーを実行中です…`);

やってみたこと

こちらの記事を元に、Node.jsで動くようにChatGPTにコードの書き換えを依頼
https://murasan-net.com/index.php/2023/04/27/chatgpt-dall-e-cookmenu/

得たコードはこちら

javascript

1const axios = require('axios'); 2const { createCanvas, loadImage } = require('canvas'); 3 4// Canva APIキー 5const API_KEY = 'your_canva_api_key'; 6 7// CanvaテンプレートのURL 8const TEMPLATE_URL = 'your_template_url'; 9 10async function generateCanvaImage(prompt) { 11 try { 12 // Canva APIにリクエストを送信 13 const response = await axios.post( 14 'https://api.canva.com/v1/images', 15 { 16 template_id: TEMPLATE_URL, 17 prompt: prompt 18 }, 19 { 20 headers: { 21 'Authorization': `Bearer ${API_KEY}` 22 } 23 } 24 ); 25 26 // 生成された画像のURLを取得 27 const imageUrl = response.data.shareUrl; 28 29 // 画像をダウンロードして表示 30 const imageResponse = await axios.get(imageUrl, { 31 responseType: 'arraybuffer' 32 }); 33 const imageBuffer = Buffer.from(imageResponse.data, 'binary'); 34 const image = await loadImage(imageBuffer); 35 const canvas = createCanvas(image.width, image.height); 36 const ctx = canvas.getContext('2d'); 37 ctx.drawImage(image, 0, 0); 38 canvas.createPNGStream().pipe(fs.createWriteStream('generated_image.png')); 39 console.log('画像が生成されました。'); 40 41 } catch (error) { 42 console.error('Canva APIリクエストエラー:', error); 43 } 44} 45 46// ユーザーからの入力を受け取る 47const ingredients = '材料'; 48const seasoning = '味付け'; 49 50// Canvaでの画像生成を実行 51const prompt = `${ingredients}${seasoning} の料理のイメージを作成してください。`; 52generateCanvaImage(prompt);

Canva APIキーが必要そうなので取得方法を調べてみたところ、Waitlistに登録してCanvaの審査をしばらく待つ必要があるようで、場合によっては1か月ぐらいかかることもある様子。

Canva以外のツールでも全く問題ございませんが、別の方法で画像を生成し、送れる方法をご存じの方がいらっしゃれば教えて頂けますと幸いです。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問