Update index.html

index.html

@@ -81,6 +81,8 @@
     <script>serverOriginEl.value = localStorage.serverOrigin || '';</script>
     <input id="modelNameEl" placeholder="Model name (huggingface repo)" style="width:300px;" oninput="localStorage.modelName=this.value">
     <script>modelNameEl.value = localStorage.modelName || 'OpenGVLab/InternVL2-40B-AWQ';</script>
+    <input id="apiKeyEl" placeholder="API key (optional)" style="width:300px;" oninput="localStorage.apiKey=this.value">
+    <script>apiKeyEl.value = localStorage.apiKey || '';</script>
   </div>
   
   <button id="imageLoader"><b>1. Select test images</b></button>
@@ -338,29 +340,27 @@
       imageUrl = await resizeDataUrl({ dataUrl: imageUrl, maxWidth: maxImageSize, maxHeight: maxImageSize });
       console.log(`original size: ${originalImageSize}, new size: ${imageUrl.length}`);
 
+      let messages = [];
+      if(systemPrompt.trim()) messages.push({ role:"system", content:systemPrompt.trim() });
+      messages.push({
+        role: "user",
+        content: [
+          { "type": "text", "text": prompt.trim() },
+          { "type": "image_url", "image_url": { "url": imageUrl } },
+        ],
+      });
+      if(prefix.trim()) messages.push({ role:"assistant", content:prefix.trim() });
+
       let startTime = Date.now();
       let result = await fetch(`${serverOrigin.trim().replace(/\/$/, "")}/v1/chat/completions`, {
-        headers: { "content-type": "application/json" },
+        headers: {
+          "content-type": "application/json"
+          "Authorization": `Bearer ${apiKeyEl.value}`,
+        },
         body: JSON.stringify({
           model: modelName.trim(),
           stream: false,
-          messages: [
-            {
-              role: "system",
-              content: systemPrompt,
-            },
-            {
-              role: "user",
-              content: [
-                { "type": "text", "text": prompt.trim() },
-                { "type": "image_url", "image_url": { "url": imageUrl } },
-              ],
-            },
-            {
-              role: "assistant",
-              content: (prefix || "").trim(),
-            },
-          ]
+          messages,
         }),
         method: "POST",
       }).then(r => r.json()).catch(e => console.error("Error computing caption:", e));