Spaces:
Running
Running
Update index.html
Browse files- index.html +22 -13
index.html
CHANGED
@@ -102,48 +102,48 @@
|
|
102 |
<tr>
|
103 |
<th>Images</th>
|
104 |
<th>
|
105 |
-
<div style="display:flex;"><input style="flex-grow:1;" id="prompt1ServerOriginEl" oninput="localStorage.prompt1ServerOriginOverride=this.value" placeholder="(Optional) Override server URL"><input style="flex-grow:1;" id="prompt1ModelNameEl" oninput="localStorage.prompt1ModelNameOverride=this.value" placeholder="(Optional) Override model name"></div>
|
106 |
<div style="text-align:center; font-weight:bold; margin-top:0.5rem;">Prompt 1</div>
|
107 |
<textarea id="systemPrompt1El" placeholder="System prompt 1, e.g. 'You are an expert image captioner, ...'" oninput="localStorage.systemPrompt1=this.value"></textarea>
|
108 |
<textarea id="prompt1El" placeholder="Prompt 1, e.g. 'Caption this image.'" oninput="localStorage.prompt1=this.value"></textarea>
|
109 |
<textarea id="prefix1El" placeholder="(Optional) Prefix 1, e.g. 'It's an image of'" oninput="localStorage.prefix1=this.value"></textarea>
|
110 |
-
<script>prompt1El.value = localStorage.prompt1 || ''; prefix1El.value = localStorage.prefix1 || ''; systemPrompt1El.value = localStorage.systemPrompt1 || ''; prompt1ServerOriginEl.value = localStorage.prompt1ServerOriginOverride || ''; prompt1ModelNameEl.value = localStorage.prompt1ModelNameOverride || '';</script>
|
111 |
<button onclick="computeCaptions(0); this.disabled=true; setTimeout(() => this.disabled=false, 1000)">(re)compute captions for this column</button>
|
112 |
</th>
|
113 |
<th>
|
114 |
-
<div style="display:flex;"><input style="flex-grow:1;" id="prompt2ServerOriginEl" oninput="localStorage.prompt2ServerOriginOverride=this.value" placeholder="(Optional) Override server URL"><input style="flex-grow:1;" id="prompt2ModelNameEl" oninput="localStorage.prompt2ModelNameOverride=this.value" placeholder="(Optional) Override model name"></div>
|
115 |
<div style="text-align:center; font-weight:bold; margin-top:0.5rem;">Prompt 2</div>
|
116 |
<textarea id="systemPrompt2El" placeholder="System prompt 2, e.g. 'You are an assistant who accurately ...'" oninput="localStorage.systemPrompt2=this.value"></textarea>
|
117 |
<textarea id="prompt2El" placeholder="Prompt 2, e.g. 'Describe this image in extreme detail.'" oninput="localStorage.prompt2=this.value"></textarea>
|
118 |
<textarea id="prefix2El" placeholder="(Optional) Prefix 2, e.g. 'The image depicts'" oninput="localStorage.prefix2=this.value"></textarea>
|
119 |
-
<script>prompt2El.value = localStorage.prompt2 || ''; prefix2El.value = localStorage.prefix2 || ''; systemPrompt2El.value = localStorage.systemPrompt2 || ''; prompt2ServerOriginEl.value = localStorage.prompt2ServerOriginOverride || ''; prompt2ModelNameEl.value = localStorage.prompt2ModelNameOverride || ''
|
120 |
<button onclick="computeCaptions(1); this.disabled=true; setTimeout(() => this.disabled=false, 1000)">(re)compute captions for this column</button>
|
121 |
</th>
|
122 |
<th>
|
123 |
-
<div style="display:flex;"><input style="flex-grow:1;" id="prompt3ServerOriginEl" oninput="localStorage.prompt3ServerOriginOverride=this.value" placeholder="(Optional) Override server URL"><input style="flex-grow:1;" id="prompt3ModelNameEl" oninput="localStorage.prompt3ModelNameOverride=this.value" placeholder="(Optional) Override model name"></div>
|
124 |
<div style="text-align:center; font-weight:bold; margin-top:0.5rem;">Prompt 3</div>
|
125 |
<textarea id="systemPrompt3El" placeholder="System prompt 3" oninput="localStorage.systemPrompt3=this.value"></textarea>
|
126 |
<textarea id="prompt3El" placeholder="Prompt 3" oninput="localStorage.prompt3=this.value"></textarea>
|
127 |
<textarea id="prefix3El" placeholder="Prefix 3" oninput="localStorage.prefix3=this.value"></textarea>
|
128 |
-
<script>prompt3El.value = localStorage.prompt3 || ''; prefix3El.value = localStorage.prefix3 || ''; systemPrompt3El.value = localStorage.systemPrompt3 || ''; prompt3ServerOriginEl.value = localStorage.prompt3ServerOriginOverride || ''; prompt3ModelNameEl.value = localStorage.prompt3ModelNameOverride || ''
|
129 |
<button onclick="computeCaptions(2); this.disabled=true; setTimeout(() => this.disabled=false, 1000)">(re)compute captions for this column</button>
|
130 |
</th>
|
131 |
<th>
|
132 |
-
<div style="display:flex;"><input style="flex-grow:1;" id="prompt4ServerOriginEl" oninput="localStorage.prompt4ServerOriginOverride=this.value" placeholder="(Optional) Override server URL"><input style="flex-grow:1;" id="prompt4ModelNameEl" oninput="localStorage.prompt4ModelNameOverride=this.value" placeholder="(Optional) Override model name"></div>
|
133 |
<div style="text-align:center; font-weight:bold; margin-top:0.5rem;">Prompt 4</div>
|
134 |
<textarea id="systemPrompt4El" placeholder="System prompt 4" oninput="localStorage.systemPrompt4=this.value"></textarea>
|
135 |
<textarea id="prompt4El" placeholder="Prompt 4" oninput="localStorage.prompt4=this.value"></textarea>
|
136 |
<textarea id="prefix4El" placeholder="Prefix 4" oninput="localStorage.prefix4=this.value"></textarea>
|
137 |
-
<script>prompt4El.value = localStorage.prompt4 || ''; prefix4El.value = localStorage.prefix4 || ''; systemPrompt4El.value = localStorage.systemPrompt4 || ''; prompt4ServerOriginEl.value = localStorage.prompt4ServerOriginOverride || ''; prompt4ModelNameEl.value = localStorage.prompt4ModelNameOverride || ''
|
138 |
<button onclick="computeCaptions(3); this.disabled=true; setTimeout(() => this.disabled=false, 1000)">(re)compute captions for this column</button>
|
139 |
</th>
|
140 |
<th>
|
141 |
-
<div style="display:flex;"><input style="flex-grow:1;" id="prompt5ServerOriginEl" oninput="localStorage.prompt5ServerOriginOverride=this.value" placeholder="(Optional) Override server URL"><input style="flex-grow:1;" id="prompt5ModelNameEl" oninput="localStorage.prompt5ModelNameOverride=this.value" placeholder="(Optional) Override model name"></div>
|
142 |
<div style="text-align:center; font-weight:bold; margin-top:0.5rem;">Prompt 5</div>
|
143 |
<textarea id="systemPrompt5El" placeholder="System prompt 5" oninput="localStorage.systemPrompt5=this.value"></textarea>
|
144 |
<textarea id="prompt5El" placeholder="Prompt 5" oninput="localStorage.prompt5=this.value"></textarea>
|
145 |
<textarea id="prefix5El" placeholder="Prefix 5" oninput="localStorage.prefix5=this.value"></textarea>
|
146 |
-
<script>prompt5El.value = localStorage.prompt5 || ''; prefix5El.value = localStorage.prefix5 || ''; systemPrompt5El.value = localStorage.systemPrompt5 || ''; prompt5ServerOriginEl.value = localStorage.prompt5ServerOriginOverride || ''; prompt5ModelNameEl.value = localStorage.prompt5ModelNameOverride || ''
|
147 |
<button onclick="computeCaptions(4); this.disabled=true; setTimeout(() => this.disabled=false, 1000)">(re)compute captions for this column</button>
|
148 |
</th>
|
149 |
</tr>
|
@@ -295,6 +295,14 @@
|
|
295 |
modelName = modelName.replace(/\/$/, ""); // remove trailing slash
|
296 |
}
|
297 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
298 |
const systemPrompts = [
|
299 |
systemPrompt1El.value || '',
|
300 |
systemPrompt2El.value || '',
|
@@ -329,13 +337,14 @@
|
|
329 |
let prefix = prefixes[j-1].trim();
|
330 |
let serverOrigin = serverOrigins[j-1].trim();
|
331 |
let modelName = modelNames[j-1].trim();
|
|
|
332 |
|
333 |
if(!systemPrompt && !prompt && !prefix) continue;
|
334 |
|
335 |
const cell = table.rows[i].cells[j];
|
336 |
cell.innerHTML = `⏳ Computing...<br><progress></progress>`;
|
337 |
|
338 |
-
computeCaption(window.testImages[i-1], systemPrompt, prompt, prefix, serverOrigin, modelName).then(caption => {
|
339 |
cell.textContent = caption;
|
340 |
});
|
341 |
|
@@ -343,7 +352,7 @@
|
|
343 |
}
|
344 |
}
|
345 |
|
346 |
-
async function computeCaption(imageUrl, systemPrompt, prompt, prefix, serverOrigin, modelName) {
|
347 |
|
348 |
let maxImageSize = Number(maxImageSizeEl.value);
|
349 |
let originalImageSize = imageUrl.length;
|
@@ -363,7 +372,7 @@
|
|
363 |
|
364 |
let headers = {
|
365 |
"content-type": "application/json",
|
366 |
-
"Authorization": `Bearer ${
|
367 |
};
|
368 |
if(serverOrigin.trim().includes("api.anthropic.com/")) headers["anthropic-dangerous-direct-browser-access"] = "true";
|
369 |
|
|
|
102 |
<tr>
|
103 |
<th>Images</th>
|
104 |
<th>
|
105 |
+
<div style="display:flex;"><input style="flex-grow:1;" id="prompt1ServerOriginEl" oninput="localStorage.prompt1ServerOriginOverride=this.value" placeholder="(Optional) Override server URL"><input style="flex-grow:1; min-width:90px;" id="prompt1ModelNameEl" oninput="localStorage.prompt1ModelNameOverride=this.value" placeholder="(Optional) Override model name"><input style="flex-grow:1;" id="prompt1ApiKeyEl" oninput="localStorage.prompt1ApiKeyOverride=this.value" placeholder="(Optional) Override API key"></div>
|
106 |
<div style="text-align:center; font-weight:bold; margin-top:0.5rem;">Prompt 1</div>
|
107 |
<textarea id="systemPrompt1El" placeholder="System prompt 1, e.g. 'You are an expert image captioner, ...'" oninput="localStorage.systemPrompt1=this.value"></textarea>
|
108 |
<textarea id="prompt1El" placeholder="Prompt 1, e.g. 'Caption this image.'" oninput="localStorage.prompt1=this.value"></textarea>
|
109 |
<textarea id="prefix1El" placeholder="(Optional) Prefix 1, e.g. 'It's an image of'" oninput="localStorage.prefix1=this.value"></textarea>
|
110 |
+
<script>prompt1El.value = localStorage.prompt1 || ''; prefix1El.value = localStorage.prefix1 || ''; systemPrompt1El.value = localStorage.systemPrompt1 || ''; prompt1ServerOriginEl.value = localStorage.prompt1ServerOriginOverride || ''; prompt1ModelNameEl.value = localStorage.prompt1ModelNameOverride || '';; prompt1ApiKeyEl.value = localStorage.prompt1ApiKeyOverride || '';</script>
|
111 |
<button onclick="computeCaptions(0); this.disabled=true; setTimeout(() => this.disabled=false, 1000)">(re)compute captions for this column</button>
|
112 |
</th>
|
113 |
<th>
|
114 |
+
<div style="display:flex;"><input style="flex-grow:1;" id="prompt2ServerOriginEl" oninput="localStorage.prompt2ServerOriginOverride=this.value" placeholder="(Optional) Override server URL"><input style="flex-grow:1; min-width:90px;" id="prompt2ModelNameEl" oninput="localStorage.prompt2ModelNameOverride=this.value" placeholder="(Optional) Override model name"><input style="flex-grow:1;" id="prompt2ApiKeyEl" oninput="localStorage.prompt2ApiKeyOverride=this.value" placeholder="(Optional) Override API key"></div>
|
115 |
<div style="text-align:center; font-weight:bold; margin-top:0.5rem;">Prompt 2</div>
|
116 |
<textarea id="systemPrompt2El" placeholder="System prompt 2, e.g. 'You are an assistant who accurately ...'" oninput="localStorage.systemPrompt2=this.value"></textarea>
|
117 |
<textarea id="prompt2El" placeholder="Prompt 2, e.g. 'Describe this image in extreme detail.'" oninput="localStorage.prompt2=this.value"></textarea>
|
118 |
<textarea id="prefix2El" placeholder="(Optional) Prefix 2, e.g. 'The image depicts'" oninput="localStorage.prefix2=this.value"></textarea>
|
119 |
+
<script>prompt2El.value = localStorage.prompt2 || ''; prefix2El.value = localStorage.prefix2 || ''; systemPrompt2El.value = localStorage.systemPrompt2 || ''; prompt2ServerOriginEl.value = localStorage.prompt2ServerOriginOverride || ''; prompt2ModelNameEl.value = localStorage.prompt2ModelNameOverride || ''; prompt2ApiKeyEl.value = localStorage.prompt2ApiKeyOverride || '';</script>
|
120 |
<button onclick="computeCaptions(1); this.disabled=true; setTimeout(() => this.disabled=false, 1000)">(re)compute captions for this column</button>
|
121 |
</th>
|
122 |
<th>
|
123 |
+
<div style="display:flex;"><input style="flex-grow:1;" id="prompt3ServerOriginEl" oninput="localStorage.prompt3ServerOriginOverride=this.value" placeholder="(Optional) Override server URL"><input style="flex-grow:1; min-width:90px;" id="prompt3ModelNameEl" oninput="localStorage.prompt3ModelNameOverride=this.value" placeholder="(Optional) Override model name"><input style="flex-grow:1;" id="prompt3ApiKeyEl" oninput="localStorage.prompt3ApiKeyOverride=this.value" placeholder="(Optional) Override API key"></div>
|
124 |
<div style="text-align:center; font-weight:bold; margin-top:0.5rem;">Prompt 3</div>
|
125 |
<textarea id="systemPrompt3El" placeholder="System prompt 3" oninput="localStorage.systemPrompt3=this.value"></textarea>
|
126 |
<textarea id="prompt3El" placeholder="Prompt 3" oninput="localStorage.prompt3=this.value"></textarea>
|
127 |
<textarea id="prefix3El" placeholder="Prefix 3" oninput="localStorage.prefix3=this.value"></textarea>
|
128 |
+
<script>prompt3El.value = localStorage.prompt3 || ''; prefix3El.value = localStorage.prefix3 || ''; systemPrompt3El.value = localStorage.systemPrompt3 || ''; prompt3ServerOriginEl.value = localStorage.prompt3ServerOriginOverride || ''; prompt3ModelNameEl.value = localStorage.prompt3ModelNameOverride || ''; prompt3ApiKeyEl.value = localStorage.prompt3ApiKeyOverride || '';</script>
|
129 |
<button onclick="computeCaptions(2); this.disabled=true; setTimeout(() => this.disabled=false, 1000)">(re)compute captions for this column</button>
|
130 |
</th>
|
131 |
<th>
|
132 |
+
<div style="display:flex;"><input style="flex-grow:1;" id="prompt4ServerOriginEl" oninput="localStorage.prompt4ServerOriginOverride=this.value" placeholder="(Optional) Override server URL"><input style="flex-grow:1; min-width:90px;" id="prompt4ModelNameEl" oninput="localStorage.prompt4ModelNameOverride=this.value" placeholder="(Optional) Override model name"><input style="flex-grow:1;" id="prompt4ApiKeyEl" oninput="localStorage.prompt4ApiKeyOverride=this.value" placeholder="(Optional) Override API key"></div>
|
133 |
<div style="text-align:center; font-weight:bold; margin-top:0.5rem;">Prompt 4</div>
|
134 |
<textarea id="systemPrompt4El" placeholder="System prompt 4" oninput="localStorage.systemPrompt4=this.value"></textarea>
|
135 |
<textarea id="prompt4El" placeholder="Prompt 4" oninput="localStorage.prompt4=this.value"></textarea>
|
136 |
<textarea id="prefix4El" placeholder="Prefix 4" oninput="localStorage.prefix4=this.value"></textarea>
|
137 |
+
<script>prompt4El.value = localStorage.prompt4 || ''; prefix4El.value = localStorage.prefix4 || ''; systemPrompt4El.value = localStorage.systemPrompt4 || ''; prompt4ServerOriginEl.value = localStorage.prompt4ServerOriginOverride || ''; prompt4ModelNameEl.value = localStorage.prompt4ModelNameOverride || ''; prompt4ApiKeyEl.value = localStorage.prompt4ApiKeyOverride || '';</script>
|
138 |
<button onclick="computeCaptions(3); this.disabled=true; setTimeout(() => this.disabled=false, 1000)">(re)compute captions for this column</button>
|
139 |
</th>
|
140 |
<th>
|
141 |
+
<div style="display:flex;"><input style="flex-grow:1;" id="prompt5ServerOriginEl" oninput="localStorage.prompt5ServerOriginOverride=this.value" placeholder="(Optional) Override server URL"><input style="flex-grow:1; min-width:90px;" id="prompt5ModelNameEl" oninput="localStorage.prompt5ModelNameOverride=this.value" placeholder="(Optional) Override model name"><input style="flex-grow:1;" id="prompt5ApiKeyEl" oninput="localStorage.prompt5ApiKeyOverride=this.value" placeholder="(Optional) Override API key"></div>
|
142 |
<div style="text-align:center; font-weight:bold; margin-top:0.5rem;">Prompt 5</div>
|
143 |
<textarea id="systemPrompt5El" placeholder="System prompt 5" oninput="localStorage.systemPrompt5=this.value"></textarea>
|
144 |
<textarea id="prompt5El" placeholder="Prompt 5" oninput="localStorage.prompt5=this.value"></textarea>
|
145 |
<textarea id="prefix5El" placeholder="Prefix 5" oninput="localStorage.prefix5=this.value"></textarea>
|
146 |
+
<script>prompt5El.value = localStorage.prompt5 || ''; prefix5El.value = localStorage.prefix5 || ''; systemPrompt5El.value = localStorage.systemPrompt5 || ''; prompt5ServerOriginEl.value = localStorage.prompt5ServerOriginOverride || ''; prompt5ModelNameEl.value = localStorage.prompt5ModelNameOverride || ''; prompt5ApiKeyEl.value = localStorage.prompt5ApiKeyOverride || '';</script>
|
147 |
<button onclick="computeCaptions(4); this.disabled=true; setTimeout(() => this.disabled=false, 1000)">(re)compute captions for this column</button>
|
148 |
</th>
|
149 |
</tr>
|
|
|
295 |
modelName = modelName.replace(/\/$/, ""); // remove trailing slash
|
296 |
}
|
297 |
|
298 |
+
const apiKeys = [
|
299 |
+
prompt1ApiKeyEl.value || apiKeyEl.value.trim(),
|
300 |
+
prompt2ApiKeyEl.value || apiKeyEl.value.trim(),
|
301 |
+
prompt3ApiKeyEl.value || apiKeyEl.value.trim(),
|
302 |
+
prompt4ApiKeyEl.value || apiKeyEl.value.trim(),
|
303 |
+
prompt5ApiKeyEl.value || apiKeyEl.value.trim(),
|
304 |
+
];
|
305 |
+
|
306 |
const systemPrompts = [
|
307 |
systemPrompt1El.value || '',
|
308 |
systemPrompt2El.value || '',
|
|
|
337 |
let prefix = prefixes[j-1].trim();
|
338 |
let serverOrigin = serverOrigins[j-1].trim();
|
339 |
let modelName = modelNames[j-1].trim();
|
340 |
+
let apiKey = apiKeys[j-1].trim();
|
341 |
|
342 |
if(!systemPrompt && !prompt && !prefix) continue;
|
343 |
|
344 |
const cell = table.rows[i].cells[j];
|
345 |
cell.innerHTML = `⏳ Computing...<br><progress></progress>`;
|
346 |
|
347 |
+
computeCaption(window.testImages[i-1], systemPrompt, prompt, prefix, serverOrigin, modelName, apiKey).then(caption => {
|
348 |
cell.textContent = caption;
|
349 |
});
|
350 |
|
|
|
352 |
}
|
353 |
}
|
354 |
|
355 |
+
async function computeCaption(imageUrl, systemPrompt, prompt, prefix, serverOrigin, modelName, apiKey) {
|
356 |
|
357 |
let maxImageSize = Number(maxImageSizeEl.value);
|
358 |
let originalImageSize = imageUrl.length;
|
|
|
372 |
|
373 |
let headers = {
|
374 |
"content-type": "application/json",
|
375 |
+
"Authorization": `Bearer ${apiKey}`,
|
376 |
};
|
377 |
if(serverOrigin.trim().includes("api.anthropic.com/")) headers["anthropic-dangerous-direct-browser-access"] = "true";
|
378 |
|