Create.xyz備忘録 画像文字起こし
VisionAPIで画像OCRできるアプリ作った 無料で使えるよ
https://vision-api-ocr.created.app
↑ Create.promptと壁打ちして、プロンプト作ってもらった
もちろん一発でポンとは出なくて、思い通りの機能をしてもらうために10回くらいプロンプトを微修正したり、GPTsに添削してもらったりした
作成はClaude Opusで行った
以下、プロンプト
プロンプト
概要
ユーザーが写真をアップロードし、画像内のテキストを抽出して表示するアプリケーションを作成します。
主要機能
写真のアップロード: ユーザーが写真をファイルダイアログから選択する機能。
写真の表示：ユーザーが選択した写真のサムネイルを表示
画像解析: GPT-4 Vision APIを使用して画像内のテキストを抽出。
テキスト表示: 抽出されたテキストを表示および編集可能にする。
UIの設計
ファイル選択エリア
エリアのサイズは幅100%、高さ100px。
背景色はライトグレー（#f0f0f0）。
境界線は破線（#d3d3d3）。
エリア内に「写真を選択してください」という指示を表示。
ユーザーがクリックする四角形のフォルダの形ののロゴを配置。
フォルダロゴをクリックするとファイルダイアログを開いて選択可能。
ファイル表示エリア
初期表示時から表示。
ファイル選択エリアで選択したファイルを表示。
選択されたファイルのサムネイルを表示。
結果表示エリア
初期表示時から表示。
幅100%、高さ500px。
背景色は白（#ffffff）。
境界線は実線（#d3d3d3）。
フォントはサンセリフ系（例：Arial, sans-serif）。
抽出されたテキストを表示するテキストエリアを配置。
抽出されたテキストは編集可能にする。
APIの統合
GPT-4 Vision: 画像からテキストを抽出するために使用。
各部分の詳細
ファイル選択エリア
スタイル:
幅: 100%
高さ: 100px
背景色: #f0f0f0
境界線: 破線 #d3d3d3
コンテンツ:
テキスト: 「写真を選択してください」
フォルダロゴ: 四角形のフォルダアイコン（クリック可能）
ファイル表示エリア
スタイル:
幅: 100%
高さ: 自動調整
コンテンツ:
選択されたファイルのサムネイル画像
結果表示エリア
スタイル:
幅: 100%
高さ: 500px
背景色: #ffffff
境界線: 実線 #d3d3d3
フォント: Arial, sans-serif
コンテンツ:
テキストエリア: 抽出されたテキストを表示および編集可能
ワークフロー
ユーザーがファイル選択エリア内のフォルダロゴをクリック。
ファイルダイアログが開き、ユーザーが写真を選択。
選択された写真がファイル表示エリアに表示される。
GPT-4 Vision APIを使用して選択された写真からテキストを抽出。
抽出されたテキストが結果表示エリアに表示される。
ユーザーは必要に応じてテキストを編集可能。
具体的な動作例
ファイル選択エリア:html
<div id="file-select-area" style="width: 100%; height: 100px; background-color: #f0f0f0; border: 1px dashed #d3d3d3; display: flex; align-items: center; justify-content: center;">
<label for="file-upload" style="cursor: pointer;">
<img src="folder-icon.png" alt="フォルダアイコン" style="width: 50px; height: 50px;">
<p>写真を選択してください</p>
</label>
<input type="file" id="file-upload" style="display: none;" />
</div>ファイル表示エリア:html
<div id="file-display-area" style="width: 100%; height: auto;">
<img id="selected-image" src="" alt="選択された画像" style="max-width: 100%; display: none;">
</div>結果表示エリア:html
<div id="result-display-area" style="width: 100%; height: 500px; background-color: #ffffff; border: 1px solid #d3d3d3;">
<textarea id="extracted-text" style="width: 100%; height: 100%; font-family: Arial, sans-serif;"></textarea>
</div>
JavaScriptの例
javascript
document.getElementById('file-upload').addEventListener('change', function(event) {
const file = event.target.files[0];
const reader = new FileReader();
reader.onload = function(e) {
document.getElementById('selected-image').src = e.target.result;
document.getElementById('selected-image').style.display = 'block';
// GPT-4 Vision APIを使用して画像からテキストを抽出するコードをここに追加
};
reader.readAsDataURL(file);
});この記事が気に入ったらサポートをしてみませんか？