feat(ui): remove api key handling and small ui adjustments

core/http/static/chat.js

@@ -42,12 +42,6 @@ function toggleLoader(show) {
   }
 }
 
-function submitKey(event) {
-    event.preventDefault();
-    localStorage.setItem("key", document.getElementById("apiKey").value);
-    document.getElementById("apiKey").blur();
-}
-
 function submitSystemPrompt(event) {
   event.preventDefault();
   localStorage.setItem("system_prompt", document.getElementById("systemPrompt").value);
@@ -62,10 +56,9 @@ function submitPrompt(event) {
   const input = document.getElementById("input").value;
   Alpine.store("chat").add("user", input, image);
   document.getElementById("input").value = "";
-  const key = localStorage.getItem("key");
   const systemPrompt = localStorage.getItem("system_prompt");
   Alpine.nextTick(() => { document.getElementById('messages').scrollIntoView(false); });
-  promptGPT(systemPrompt, key, input);
+  promptGPT(systemPrompt, input);
 }
 
 function readInputImage() {
@@ -82,7 +75,7 @@ function readInputImage() {
 }
 
 
-  async function promptGPT(systemPrompt, key, input) {
+  async function promptGPT(systemPrompt, input) {
     const model = document.getElementById("chat-model").value;
     // Set class "loader" to the element with "loader" id
     //document.getElementById("loader").classList.add("loader");
@@ -160,7 +153,6 @@ function readInputImage() {
     const response = await fetch("v1/chat/completions", {
       method: "POST",
       headers: {
-        Authorization: `Bearer ${key}`,
         "Content-Type": "application/json",
       },
       body: JSON.stringify({
@@ -266,20 +258,12 @@ function readInputImage() {
     document.getElementById("input").focus();
   }
 
-  document.getElementById("key").addEventListener("submit", submitKey);
   document.getElementById("system_prompt").addEventListener("submit", submitSystemPrompt);
 
   document.getElementById("prompt").addEventListener("submit", submitPrompt);
   document.getElementById("input").focus();
   document.getElementById("input_image").addEventListener("change", readInputImage);
 
-  storeKey = localStorage.getItem("key");
-  if (storeKey) {
-    document.getElementById("apiKey").value = storeKey;
-  } else {
-    document.getElementById("apiKey").value = null;
-  }
-
   storesystemPrompt = localStorage.getItem("system_prompt");
   if (storesystemPrompt) {
     document.getElementById("systemPrompt").value = storesystemPrompt;

core/http/static/image.js

@@ -1,48 +1,11 @@
-/*
-
-https://github.com/david-haerer/chatapi
-
-MIT License
-
-Copyright (c) 2023 David Härer
-Copyright (c) 2024 Ettore Di Giacinto
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
-
-*/
-function submitKey(event) {
-    event.preventDefault();
-    localStorage.setItem("key", document.getElementById("apiKey").value);
-    document.getElementById("apiKey").blur();
-  }
-
-
 function genImage(event) {
   event.preventDefault();
   const input = document.getElementById("input").value;
-  const key = localStorage.getItem("key");
-
-  promptDallE(key, input);
 
+  promptDallE(input);
 }
 
-async function promptDallE(key, input) {
+async function promptDallE(input) {
   document.getElementById("loader").style.display = "block";
   document.getElementById("input").value = "";
   document.getElementById("input").disabled = true;
@@ -51,7 +14,6 @@ async function promptDallE(key, input) {
   const response = await fetch("v1/images/generations", {
     method: "POST",
     headers: {
-      Authorization: `Bearer ${key}`,
       "Content-Type": "application/json",
     },
     body: JSON.stringify({
@@ -84,13 +46,6 @@ async function promptDallE(key, input) {
   document.getElementById("input").focus();
 }
 
-document.getElementById("key").addEventListener("submit", submitKey);
 document.getElementById("input").focus();
 document.getElementById("genimage").addEventListener("submit", genImage);
 document.getElementById("loader").style.display = "none";
-
-const storeKey = localStorage.getItem("key");
-if (storeKey) {
-  document.getElementById("apiKey").value = storeKey;
-}
-

core/http/static/talk.js

@@ -9,10 +9,6 @@ let isRecording = false;
 let conversationHistory = [];
 let resetTimer;
 
-function getApiKey() {
-    return document.getElementById('apiKey').value;
-}
-
 function getModel() {
     return document.getElementById('modelSelect').value;
 }
@@ -99,34 +95,13 @@ function stopRecording() {
     };
 }
 
-function submitKey(event) {
-    event.preventDefault();
-    localStorage.setItem("key", document.getElementById("apiKey").value);
-    document.getElementById("apiKey").blur();
-}
-
-document.getElementById("key").addEventListener("submit", submitKey);
-
-
-storeKey = localStorage.getItem("key");
-if (storeKey) {
-  document.getElementById("apiKey").value = storeKey;
-} else {
-  document.getElementById("apiKey").value = null;
-}
-
-
 async function sendAudioToWhisper(audioBlob) {
     const formData = new FormData();
     formData.append('file', audioBlob);
     formData.append('model', getWhisperModel());
-    API_KEY = localStorage.getItem("key");
 
     const response = await fetch('v1/audio/transcriptions', {
         method: 'POST',
-        headers: {
-            'Authorization': `Bearer ${API_KEY}`
-        },
         body: formData
     });
 
@@ -137,14 +112,9 @@ async function sendAudioToWhisper(audioBlob) {
 
 async function sendTextToChatGPT(text) {
     conversationHistory.push({ role: "user", content: text });
-    API_KEY = localStorage.getItem("key");
 
     const response = await fetch('v1/chat/completions', {
         method: 'POST',
-        headers: {
-            'Authorization': `Bearer ${API_KEY}`,
-            'Content-Type': 'application/json'
-        },
         body: JSON.stringify({
             model: getModel(),
             messages: conversationHistory
@@ -161,13 +131,10 @@ async function sendTextToChatGPT(text) {
 }
 
 async function getTextToSpeechAudio(text) {
-    API_KEY = localStorage.getItem("key");
-
     const response = await fetch('v1/audio/speech', {
 
         method: 'POST',
         headers: {
-            'Authorization': `Bearer ${API_KEY}`,
             'Content-Type': 'application/json'
         },
         body: JSON.stringify({ 

core/http/static/tts.js

@@ -1,52 +1,18 @@
 // Initialize Alpine store for API key management
 document.addEventListener('alpine:init', () => {
-  Alpine.store('chat', {
-    get key() {
-      return localStorage.getItem('key') || '';
-    },
-    set key(value) {
-      localStorage.setItem('key', value);
-    }
-  });
+  Alpine.store('chat', {  });
 });
 
-function submitKey(event) {
-  event.preventDefault();
-  const keyValue = document.getElementById("apiKey").value;
-  localStorage.setItem("key", keyValue);
-
-  // Show brief visual confirmation
-  const button = event.submitter;
-  const originalIcon = button.innerHTML;
-  button.innerHTML = '<i class="fa-solid fa-check text-green-400"></i>';
-  button.classList.add('bg-green-600');
-  button.classList.remove('bg-blue-600', 'hover:bg-blue-700');
-
-  setTimeout(() => {
-    button.innerHTML = originalIcon;
-    button.classList.remove('bg-green-600');
-    button.classList.add('bg-blue-600', 'hover:bg-blue-700');
-  }, 1000);
-
-  document.getElementById("apiKey").blur();
-}
-
 function genAudio(event) {
   event.preventDefault();
   const input = document.getElementById("input").value;
-  const key = localStorage.getItem("key");
 
   if (!input.trim()) {
     showNotification('error', 'Please enter text to convert to speech');
     return;
   }
 
-  if (!key) {
-    showNotification('warning', 'API key is not set. Please set your API key first.');
-    return;
-  }
-
-  tts(key, input);
+  tts(input);
 }
 
 function showNotification(type, message) {
@@ -109,7 +75,7 @@ function showNotification(type, message) {
   }, 5000);
 }
 
-async function tts(key, input) {
+async function tts(input) {
   // Show loader and prepare UI
   const loader = document.getElementById("loader");
   const inputField = document.getElementById("input");
@@ -126,7 +92,6 @@ async function tts(key, input) {
     const response = await fetch("tts", {
       method: "POST",
       headers: {
-        Authorization: `Bearer ${key}`,
         "Content-Type": "application/json",
       },
       body: JSON.stringify({
@@ -224,17 +189,10 @@ async function tts(key, input) {
 
 // Set up event listeners when DOM is loaded
 document.addEventListener('DOMContentLoaded', () => {
-  document.getElementById("key").addEventListener("submit", submitKey);
   document.getElementById("input").focus();
   document.getElementById("tts").addEventListener("submit", genAudio);
   document.getElementById("loader").style.display = "none";
-
-  // Initialize stored API key if available
-  const storeKey = localStorage.getItem("key");
-  if (storeKey) {
-    document.getElementById("apiKey").value = storeKey;
-  }
-
+
   // Add basic keyboard shortcuts
   document.addEventListener('keydown', (e) => {
     // Submit on Ctrl+Enter

core/http/views/chat.html

@@ -31,7 +31,7 @@
   <script defer src="static/chat.js"></script>
   {{ $allGalleryConfigs:=.GalleryConfig }}
   {{ $model:=.Model}}
-  <body class="bg-slate-900 text-gray-100 flex flex-col h-screen" x-data="{ key: $store.chat.key, sidebarOpen: true }">
+  <body class="bg-slate-900 text-gray-100 flex flex-col h-screen" x-data="{ sidebarOpen: true }">
     {{template "views/partials/navbar" .}}
 
     <!-- Main container with sidebar toggle -->
@@ -150,36 +150,9 @@ <h3 class="text-md font-medium">{{ $model }}</h3>
             </div>
 
             <!-- Settings tab -->
-            <div x-show="activeTab === 'settings'" x-data="{ showKeyForm: false, showPromptForm: false }" class="space-y-3">
+            <div x-show="activeTab === 'settings'" x-data="{ showPromptForm: false }" class="space-y-3">           
               <button 
-                @click="showKeyForm = !showKeyForm; showPromptForm = false" 
-                class="w-full flex items-center justify-between px-3 py-2 text-sm rounded text-white bg-gray-700 hover:bg-gray-600 transition-colors"
-              >
-                <span><i class="fa-solid fa-key mr-2"></i> API Key</span>
-                <i :class="showKeyForm ? 'fa-chevron-up' : 'fa-chevron-down'" class="fa-solid"></i>
-              </button>
-
-              <div x-show="showKeyForm" class="p-3 bg-gray-700 rounded">
-                <form id="key" class="flex flex-col space-y-2">
-                  <input
-                    type="password"
-                    id="apiKey"
-                    name="apiKey"
-                    class="bg-gray-800 text-white border border-gray-600 focus:border-blue-500 focus:ring focus:ring-blue-500 focus:ring-opacity-50 rounded-md shadow-sm p-2 appearance-none"
-                    placeholder="OpenAI API Key"
-                    x-model.lazy="key"
-                  />
-                  <button
-                    type="submit"
-                    class="px-3 py-2 text-sm rounded text-white bg-blue-600 hover:bg-blue-700 transition-colors"
-                  >
-                    Save API Key
-                  </button>
-                </form>
-              </div>
-
-              <button 
-                @click="showPromptForm = !showPromptForm; showKeyForm = false" 
+                @click="showPromptForm = !showPromptForm" 
                 class="w-full flex items-center justify-between px-3 py-2 text-sm rounded text-white bg-gray-700 hover:bg-gray-600 transition-colors"
               >
                 <span><i class="fa-solid fa-message mr-2"></i> System Prompt</span>

core/http/views/models.html

@@ -27,6 +27,8 @@ <h1 class="text-3xl md:text-4xl font-bold text-white mb-3">
             </div>
         </div>
 
+        {{template "views/partials/inprogress" .}}
+
         <!-- Search and Filter Section -->
         <div class="bg-gray-800/70 rounded-xl p-6 mb-8 shadow-lg border border-gray-700/50">
             <!-- Search Input -->