0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

画像の ALT を考えてくれるショートカットの作り方

Posted at

作るもの

SNSに画像をアップロードするとき、ALTを設定するのがよいとされています。このALTの内容を、ChatGPTに画像を送りつけて考えてもらいそれをクリップボードに入れて、あとはALTの入力欄にペーストするだけにするショートカットを作りました。
このショートカットはOpenAIのAPIキーと最低限のチャージ$5が必要になります。なので、作ったものをiCloudで共有したりはできないのですが、その代わりに作り方をここに残しておきます。
ある程度ショートカットの作り方を知ってる方向けに説明します。
また、ショートカットはiPhoneから作れるのが気軽なところですが、今回はPOST時に必要となるJSON(辞書)の構造が複雑なので、Macから作るのを想定して説明します。

MacOS14.5とiOS18.0.1で動作確認をしています。

OpenAIのAPIキーの取得方法

ここにも書いてありますが、ProjectKeyの方を作ります。作ったらその内容を控えておいてください。
また、このキーは他人に知られてしまうと勝手にお金を使われてしまう危険があるので、取り扱いは注意してください。これで作ったショートカットを共有しても他人に知られてしまうので、このショートカットは共有しないように気をつけましょう。

課金の方はまだしなくてもいいです。必要になるところまで進められたら課金しましょう。

作り方

大まかにいうと、画像をBase64エンコードしてから「URLの内容を取得」でPOSTを使ってAPIに送りつけ、その返答をクリップボードに入れます。
以下、細かくみていきます。

1. 画像をBase64エンコードし、パラメータをつけるまで

  1. 画像の入力を受け付けます
  2. 1-1の画像をjpegに変換します
  3. 1-2の画像を縮小します
  4. 1-3の画像をBase64エンコードして文字列にします
  5. 「テキスト」とマジック変数を組み合わせて、data:image/jpeg;base64, という文字列を1-4の先頭につけます

スクリーンショット 2024-10-26 16.50.35.png

画像縮小は絶対にしましょう。多分お金の節約になります。

2. 「URLの内容を取得」を使ってPOSTする

  1. 「テキスト」にAPIキーを貼り付けます
  2. 2-1とは違う、もう一つの「テキスト」とマジック変数を組み合わせて、 Bearer (スペースを入れるの大事です)という文字列を2-1の先頭につけます
  3. 「URLの内容を取得」のURLに https://api.openai.com/v1/chat/completions を設定します
  4. 方法を POST に設定します
  5. ヘッダー情報として、キーに Content-Type 値に application/json; charset=utf-8 を設定します
  6. ヘッダー情報として、キーに Authorization 値にマジック変数で2-2を設定します
  7. 本文を要求をJSONにします
  8. 以下の画像のように辞書を作ります

スクリーンショット 2024-10-26 17.07.17.png

キモになるのはcontent内のtextで「この画像には何が写っていますか?」と日本語で訊いてるところです。ここが日本語なんでお返事も日本語で帰ってきます。ここのテキストは目的に合わせてチューニングの余地あり。
もう一つのキモはimage_url内のurlでマジック変数を使い1-5を指定するところです。これでurlという名前ですが、パラメータが付けられたBase64エンコードされた画像をアップロード出来ます。

また、2-2がわかりづらいのですが、ここをスクショにしてしまうとAPIキーが写ってしまうのですみません。1-5と同じようなことをして、認証用の文字列を作ってください。

ここで一旦リクエストを飛ばしてみる

ここまででリクエストを飛ばす準備ができたので、試しに適当な画像をアップロードしてみます。
すると、エラーが返ってくると思います。課金をしてないからです。最低$5からチャージができるので、そこはご自分でやり方を探して課金してください。
お金の話は下手な説明ができない部分なのですみません。
レスポンスが無事に返ってくるようになったら、次に進みます

3. 返ってくるJSONの値を取りだし、クリップボードに入れる

目的のテキストはJSONの3階層目にあるので、「辞書の値を取得」を3回使って取り出します。

  1. 「辞書の値を取得」を使い、2-8の返答の内の choices の値を取得します
  2. 3-1の内の message の値を取得します
  3. 3-2の内の content の値を取得します
  4. 「結果を表示」で3-3の値を表示します
  5. 「クリップボードにコピー」で3-3の値をクリップボードに入れます

3-4での結果は全文見えませんが、大きく外れた結果が返っていないかの確認だけなので全文見えなくてもいいかなぁと思ってます。
最後に返答の値がクリップボードにコピーされるようにして、完成です。

参考URL

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?