addCustomModal
GPT prompt(クッションページ)を自動インポートしたいなdone.icon
中身見るの面倒なので作ってない
nameなければtitle使う
systemなければページを無視する
1hop linkで
検索はブラケティングに乗るのもよさそう
![]とかでプロンプトを渡せるようにする？いや普通に全部展開して、その中にsystem等があれば分解して入れる、か？
getPages
あとモーダルにsave as は必須だと思うdone.icon
code:export.js
export let modalController = {};
function closeModal() {
$('.tzmk_customModal').addClass('tzmk_hidden');
$('.tzmk_customModalBack').addClass('tzmk_hidden');
};
function openModal() {
$('.tzmk_customModal').removeClass('tzmk_hidden');
$('.tzmk_customModalBack').removeClass('tzmk_hidden');
};
async function setPromptByChoice() {
let val = $('selectname="promptType"').val();
let systemPrompt = await fetch(https://scrapbox.io/api/code/tsuzumik-online/${val}/system).then(res=>{return res.text()});
$('#tzmk_systemPrompt').val(systemPrompt);
let userPrompt = await fetch(https://scrapbox.io/api/code/tsuzumik-online/${val}/user).then(res=>{return res.text()});
if (userPrompt){
$('#tzmk_userPrompt').val(userPrompt);
}
}
function saveAsPage() {
let systemInput = $('#tzmk_systemPrompt').val();
let userInput = $('#tzmk_userPrompt').val();
let content = ['code:system', ' ' + systemInput.replaceAll('\n', '\n '), '', 'code:user', ' ' + userInput.replaceAll('\n', '\n '), '', 'GPT_prompt'];
let encoded = encodeURI(content.join('\n'));
let project = "tsuzumik-online";
let title="New_Prompt";
window.open(https://scrapbox.io/${project}/${title}?body=${encoded}, "_blank");
}
function getGptAnswer(res) {
let list = []
for (let choice of res'choices') {
list.push(choice'message''content');
}
return list;
}
let lock = false;
function submitGpt() {
if (lock) {
alert('process running');
return;
}
lock = true;
setTimeout(function(){lock = false;}, 1000);
let systemInput = $('#tzmk_systemPrompt').val();
let userInput = $('#tzmk_userPrompt').val();
let userQuote = $('#tzmk_userQuote').val();
let pageContent = $('#tzmk_pageContent').val();
let model = $('selectname="model"').val();
let temperature = $('selectname="temperature"').val();
let logId = scrapbox.tzmk_hopBot.addLog(${userInput}: ${userQuote} by ${model});
scrapbox.tzmk_askChatGpt(systemInput, userInput, userQuote, pageContent,
function(res) {
let answers = getGptAnswer(res);
let answerText = '';
for (let answer of answers) {
answerText += answer;
}
scrapbox.tzmk_hopBot.addAnswer(logId, answerText);
scrapbox.tzmk_hopBot.completePase();
},
function(xhr, status, err) {
scrapbox.tzmk_hopBot.addAnswer(logId, err);
},
{model: model,
temperature: Number(temperature)}
);
closeModal();
scrapbox.tzmk_hopBot.startHopping();
}
modalController.openModal = function(quote="", prompt="", pageContent="") {
openModal();
if (prompt) {
$('selectname="promptType"').val(prompt);
}
if (quote) {
$('#tzmk_userQuote').val(quote);
}
if (pageContent) {
$('#tzmk_pageContent').val(pageContent);
}
}
async function getScrapboxRelatedPages(title, project="tsuzumik-online") {
let res = await fetch(https://scrapbox.io/api/pages/${project}/${title});
let pageData = await res.json();
let links = pageData.relatedPages.links1hop.map((item)=>{return item'title';});
return links;
}
let domString = [
'<div class="tzmk_customModalBack tzmk_hidden"></div>',
'<div class="tzmk_customModal tzmk_hidden">',
'<a href="https://scrapbox.io/tsuzumik-online/addCustomModal" target="_blank">customize</a>',
' <div><button class="tzmk_closeButton" href="#">close</button></div>',
' <div><button class="tzmk_saveButton" href="#">save</button></div>',
' <div>Model: <select class="tzmk_menu" name="model">',
' <option value="gpt-3.5-turbo">GPT3.5</option>',
' <option value="gpt-4-turbo">GPT4</option>',
' </select></div>',
' <div>Prompt: <select id="tzmk_promptSelect" class="tzmk_menu" name="promptType">',
' </select></div>',
' <div>temperature: <select class="tzmk_menu" name="temperature">',
' <option value="2.0">Chaos(2.0)</option>',
' <option value="1.2">Unique(1.2)</option>',
' <option value="0.7" selected="selected">Standard(0.7)</option>',
' <option value="0.2">Strict(0.2)</option>',
' </select></div>',
' <div>System</div>',
' <textarea id="tzmk_systemPrompt" class="tzmk_prompt"></textarea>',
' <div>Selected text</div>',
' <textarea id="tzmk_userQuote" class="tzmk_prompt"></textarea>',
' <div>User instruction</div>',
' <textarea id="tzmk_userPrompt" class="tzmk_prompt"></textarea>',
' <div>Page content</div>',
' <textarea id="tzmk_pageContent" class="tzmk_prompt"></textarea>',
' <div><button class="tzmk_submitButton" href="#">submit</button></div>',
' </div>'
].join('\n');
$('body').append(domString);
let promptSelect = $('selectname=promptType');
let prompts = await getScrapboxRelatedPages("GPT prompt");
for (let prompt of prompts) {
let name = prompt.replace('prompt', '');
promptSelect.append($('<option>', {value: prompt, text: name}));
}
$('.tzmk_closeButton').on('click', closeModal);
$('.tzmk_submitButton').on('click', submitGpt);
$('.tzmk_saveButton').on('click', saveAsPage);
$('selectname="promptType"').on('change', setPromptByChoice);
setPromptByChoice();
code:style.css
.tzmk_customModalBack {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 200;
background-color: rgba(0.5,0.5,0.5,0.5);
}
.tzmk_hidden {
display: none;
}
.tzmk_customModal {
z-index: 301;
position:fixed;
top: 10%;
right:20px;
min-width: 400px;
padding: 20px;
height: 80%;
overflow: scroll;
padding-bottom: 40px;
background-color: white;
}
select.tzmk_menu {
width: 60%;
min-height: 20px;
padding: 5px;
}
.tzmk_menu {
font-size: 20px;
}
.tzmk_prompt {
width: 80%;
min-height: 60px;
margin: 5px;
}
.tzmk_submitButton {
text-align:center;
padding: 4px;
background-color: #aaccff;
position:absolute;
right: 10px;
}
.tzmk_closeButton {
text-align:center;
padding: 4px;
background-color: #ff8800;
position:absolute;
right: 10px;
top: 10px;
}
.tzmk_saveButton {
text-align:center;
padding: 4px;
background-color: #0088ee;
position:absolute;
right: 10px;
top: 50px;
}