Merge pull request #72 from appatalks/appatalks-lm-studio

lm-studio offline hook

core/js/lm-studio.js

@@ -0,0 +1,89 @@
+// lm-studio.js
+// Function to send data to local OpenAI-like endpoint
+
+function lmsSend() {
+    // Remove occurrences of specific syntax from the txtMsg element
+    txtMsg.innerHTML = txtMsg.innerHTML.replace(/<div[^>]*>.*<\/div>/g, '');
+
+    let openAIMessages = [
+        {
+            "role": "system",
+            "content": selPers.value + " When you are asked to show an image, instead describe the image with [Image of <Description>]. " + dateContents
+        },
+        {
+            "role": "assistant",
+            "content": "I am Eva, a highly knowledgeable AI assistant designed to provide accurate, concise, and helpful responses to your questions. I aim to be honest and straightforward in my interactions with you. I emulate emotions to give more personable responses. While I may not possess all the answers, I will do my best to assist you with your inquiries."
+        }
+    ];
+
+    // Check if there are messages stored in local storage
+    const storedOpenAIMessages = localStorage.getItem("openAIMessages");
+    if (storedOpenAIMessages) {
+        openAIMessages = JSON.parse(storedOpenAIMessages);
+    }
+
+    const sQuestion = document.getElementById("txtMsg").innerHTML.replace(/<br>/g, "\n").replace(/<[^>]+>/g, "").trim();
+    if (!sQuestion) {
+        alert("Type in your question!");
+        txtMsg.focus();
+        return;
+    }
+
+    // Document the user's message
+    document.getElementById("txtMsg").innerHTML = "";
+    document.getElementById("txtOutput").innerHTML += '<span class="user">You: </span>' + sQuestion + "<br>\n";
+
+    const openAIUrl = `http://localhost:1234/v1/chat/completions`;
+    const requestOptions = {
+        method: "POST",
+        headers: { 
+            "Content-Type": "application/json",
+            "Access-Control-Allow-Origin": "*"
+        },
+        body: JSON.stringify({
+            model: "granite-3.1-8b-instruct", // Replace with your actual local model identifier
+            messages: openAIMessages.concat([
+                { role: "user", content: sQuestion }
+            ]),
+            temperature: 0.7, // Adjust as needed
+        }),
+    };
+
+    fetch(openAIUrl, requestOptions)
+        .then(response => response.ok ? response.json() : Promise.reject(new Error(`Error: ${response.status}`)))
+        .then(result => {
+            const candidate = result.choices[0].message.content;
+
+            document.getElementById("txtOutput").innerHTML += '<span class="eva">Eva: </span>' + candidate + "<br>\n";
+
+            // Check for [Image of ...] tags
+            const imageTagMatch = candidate.match(/\[Image of (.*?)\]/);
+            if (imageTagMatch) {
+                const imageQuery = imageTagMatch[1];
+                fetchGoogleImages(imageQuery).then(imageResult => {
+                    const imageUrl = imageResult.items[0].link;
+                    document.getElementById("txtOutput").innerHTML += `<br><a href="${imageUrl}" target="_blank"><img src="${imageUrl}" alt="${imageQuery}"></a>`;
+                }).catch(error => {
+                    console.error("Error fetching image:", error);
+                });
+            }
+
+            // Update conversation history
+            openAIMessages.push({ role: "user", content: sQuestion });
+            openAIMessages.push({ role: "assistant", content: candidate });
+            localStorage.setItem("openAIMessages", JSON.stringify(openAIMessages));
+        })
+        .catch(error => {
+            console.error("Error:", error);
+            document.getElementById("txtOutput").innerHTML += '<span class="error">Error: </span>' + error.message + "<br>\n";
+        });
+}
+
+// Function to handle sending data based on the selected model
+function sendData() {
+    if (selModel.value.startsWith("gpt")) {
+        geminiSend(); // Use Google Gemini if the model starts with "gpt"
+    } else {
+        lmsSend(); // Use OpenAI-like local endpoint otherwise
+    }
+}

core/js/options.js

@@ -94,6 +94,9 @@ function autoSelect() {
         case "gemini":
             geminiSend();
             break;
+        case "lm-studio": // offline models
+            lmsSend();
+            break;
         case "dall-e-3":
             dalle3Send();
             break;
@@ -127,6 +130,11 @@ function updateButton() {
             clearText();
             geminiSend();
         };
+   } else if (selModel.value == "lm-studio") {
+        btnSend.onclick = function() {
+            clearText();
+            lmsSend();
+        };
     } else if (selModel.value == "dall-e-3") {
         btnSend.onclick = function() {
             clearText();
@@ -155,6 +163,9 @@ function sendData() {
     } else if (selModel.value == "gemini") {
         clearText();
         geminiSend();
+    } else if (selModel.value == "lm-studio") {
+        clearText();
+        lmsSend();
     } else if (selModel.value == "dall-e-3") {
         clearText();
         dalle3Send();

index.html

@@ -12,6 +12,7 @@
   <script src="core/js/external.js"></script>
   <script src="core/js/gpt-core.js"></script>
   <script src="core/js/gl-google.js"></script>
+  <script src="core/js/lm-studio.js"></script>
   <script src="core/js/dalle3.js"></script>
   <script src="core/js/aws-sdk-2.1304.0.min.js"></script>
   <script>
@@ -121,6 +122,7 @@
         <option value="o1-mini" title="o1-mini">o1-mini</option>
         <option value="dall-e-3" title="Image Generation">dall-e-3</option>
         <option value="gemini" title="Google Gemini">gemini</option>
+        <option value="lm-studio" title="lm-studio">lm-studio</option>
       </select>
 
       <label for="selPers">Personality:</label>