汎用性は多分ある。
やりたいこと
プロンプト（命令文）は基本的にテンプレートなんで、一部を差し替えたら他のことにも使えたりする。
例えばブログとかを書かせるにしても、「りんご」についてを「ぶどう」に変えたらあとは同じでいいじゃん、みたいな感じで、一部だけ変えたらそれでいい。
でも、多少込み入ってくるとそのワードが重複したり、プロンプト自体が長くてどこを変えたらいいんだっけ？みたいなことにもなる。
そのへんを楽にするためのフォーム。
こんな感じにしてみた
<section class="breate">
<div class="input">
<textarea name="base"></textarea>
<button type="button" name="btn_create">create</button>
</div>
</section>
<section class="generate">
<div class="input">
<p id="generate_result"></p>
<ul class="input_list">
<li class="submit"><button type="button" name="btn_generate">generate</button></li>
</ul>
</div>
</section>
<section class="result">
<div class="input">
<textarea name="result"></textarea>
<button type="button" name="btn_copy">copy</button>
</div>
</section>
$(function(){
$('button[name="btn_create"]').on('click',function(){
var text = $('textarea[name="base"]').val();
// 正規表現で「{* *」で囲まれた文字列を抽出
var markedTextRegex = /\{\*(.*?)\*\}/g;
var matches = text.match(markedTextRegex);
if (matches) {
// 重複を除去するためにSetを使用
var uniqueMatches = Array.from(new Set(matches));
var generate_addList = '';
$('ul.input_list li.add').remove();
// 取得したマッチングをコンソールに出力
console.log("Extracted marked text:");
uniqueMatches.forEach(function(match) {
var extractedText = match.substring(2, match.length - 2); // {*}の部分を取得
console.log(extractedText);
generate_addList = generate_addList+'<li class="add"><label>'+extractedText+'</label><textarea data-inputname="'+extractedText+'"></textarea></li>';
});
// {**}で囲われた部分を<strong></strong>で置換して出力
var replacedHTML = text.replace(markedTextRegex, function(match) {
var extractedText = match.substring(2, match.length - 2);
return '<strong data-inputname="' + extractedText + '">' + extractedText + '</strong>';
});
// 置換後のHTMLを出力
$('p#generate_result').html(replacedHTML.replace(/\n/g, '<br>'));
$('ul.input_list').prepend(generate_addList);
}
})
$('button[name="btn_generate"]').on('click',function(){
// p#generate_result 内のテキストを取得
var text = $('#generate_result').html();
// ul.input_list 内の各 textarea の値を取得してオブジェクトに格納
var inputs = {};
$('.input_list textarea').each(function() {
var inputName = $(this).data('inputname');
var inputValue = $(this).val();
inputs[inputName] = inputValue;
});
// p#generate_result 内の strong 要素を置換
$('#generate_result strong').each(function() {
var strongInputName = $(this).data('inputname');
if (inputs.hasOwnProperty(strongInputName)) {
var newText = inputs[strongInputName];
text = text.replace('<strong data-inputname="'+strongInputName+ '">' + strongInputName + '</strong>', newText);
}
});
// 結果を textarea[name="result"] に出力
text_result = text.replace(/<br>/g,"\n");
$('textarea[name="result"]').val(text);
})
$('button[name="btn_copy"]').on('click',function(){
navigator.clipboard.writeText($('textarea[name="result"]').val());
})
})装飾（css）は割愛。
実際の動作はこんな感じ。
めっちゃ長いプロンプトだと見づらいからプレビューは横に逃がしたほうがいいかなとか、空欄で押したら動作止めといたほうがいいかなとかあるけど、まあいいや。
使い方
たとえばこんな感じ。
{*テーマ*}について1000文字で紹介してください。
{*ターゲット*}が読者であることを想定してください。
{*検索ワード*}またはそれに類する文言で検索した際に上位表示されることを想定してください。入替えたい部分を{**}で囲んでタグ代わりに名前を入れて、プロンプトを作る。
それをtextareaに入れて「create」を押す。
{**}に即したtextareaが出力される。
それぞれに内容を記入して「generate」を押す。
{**}に入力した内容が置換されて出力される。
出力内容は「copy」でコピー状態になるので、それをChatGPTとかGeminiとかに貼り付けて使う。
ちなみに
{*テーマ*}について1000文字で紹介してください。
{*テーマ*}について興味のない人にも読みやすいよう、専門用語は避けてください。こんな感じで同じものを使い回すことも想定して作ってある。
最後に
文章内の特定の囲いをどうのこうのしたり置換する内容は初めて作った。
取っ掛かりがなくて詰まりそうだったんでChatGPTに投げたらしっかり作ってくれた。
js、jQueryが読めたら人間はプロンプトと調整で済むんでマジでホント楽ですね、困るくらい楽。
「りんごについて」「バナナについて」みたいな、バリエーションを一気に出す内容も作れるけど、それは仕込まなかった。というのは活用シーンが思いつかなかったんで。必要になったら作ろうと思う。
コメント