Merge branch 'beta_dev' of https://github.com/shekharP1536/ollama-web into beta_dev

Author: shekharP1536

static/resource/an-old-hope.min.css

@@ -0,0 +1,67 @@
+pre code.hljs {
+  display: block;
+  overflow-x: auto;
+  padding: 1em
+}
+
+code.hljs {
+  padding: 3px 5px
+}
+.hljs {
+  background: #000000;
+}
+
+.hljs-comment,
+.hljs-quote {
+  color: #b6b18b
+}
+
+.hljs-deletion,
+.hljs-name,
+.hljs-regexp,
+.hljs-selector-class,
+.hljs-selector-id,
+.hljs-tag,
+.hljs-template-variable,
+.hljs-variable {
+  color: #eb3c54
+}
+
+.hljs-built_in,
+.hljs-link,
+.hljs-literal,
+.hljs-meta,
+.hljs-number,
+.hljs-params,
+.hljs-type {
+  color: #e7ce56
+}
+
+.hljs-attribute {
+  color: #ee7c2b
+}
+
+.hljs-addition,
+.hljs-bullet,
+.hljs-string,
+.hljs-symbol {
+  color: #4fb4d7
+}
+
+.hljs-section,
+.hljs-title {
+  color: #78bb65
+}
+
+.hljs-keyword,
+.hljs-selector-tag {
+  color: #b45ea4
+}
+
+.hljs-emphasis {
+  font-style: italic
+}
+
+.hljs-strong {
+  font-weight: 700
+}

static/resource/markdown.js

@@ -16,7 +16,7 @@ function convertMarkdownToHTML(md) {
         console.log(language);
 
         result += `
-        <div class="code_div"><span style="margin: 10px;">${ language || 'code'}</span><pre class="language-${language || 'text'}"><button class="copy-button" onclick="copyCode(this)">Copy</button><code>`;
+        <div class="code_div"><span style="margin: 10px;">${language || 'code'}</span><pre class="language-${language || 'text'}"><button class="copy-button" onclick="copyCode(this)">Copy</button><code>`;
       } else {
         // End of a code block
         inCodeBlock = false;
@@ -81,6 +81,8 @@ function convertMarkdownToHTML(md) {
   }, 2000);
 }
 function highlightAll(text) {
+  // console.log(text);
+
   // Ensure the text is a valid string
   if (typeof text !== 'string') {
     console.error("Invalid argument: 'text' must be a string.");
@@ -91,9 +93,13 @@ function highlightAll(text) {
   const tempDiv = document.createElement('div');
   tempDiv.innerHTML = text;  // Set the text as HTML content
 
+  console.log(tempDiv);
   // Get all the <code> elements inside the temporary element
-  const codeElements = tempDiv.querySelectorAll('code');
 
+  const parser = new DOMParser();
+  const decodedHTML = parser.parseFromString(text, 'text/html').body.innerHTML;
+  tempDiv.innerHTML = decodedHTML;
+  const codeElements = tempDiv.querySelectorAll('code');
   // If no <code> blocks are found, return the original text
   if (codeElements.length === 0) {
     console.log("No code blocks found.");

static/script.js

@@ -97,7 +97,6 @@ function startMessage(speaker) {
   if (speaker === "bot" && loadingIndicator) {
     loadingIndicator.remove();
     console.log("loadingremoved");
-
   }
 }
 // Function to add content to the current message
@@ -166,42 +165,107 @@ function set_model() {
   const modelSelected = document.getElementById("select_model_btn").value;
 
 }
-// Function to handle user input and send it to the server
-function sendUserInput() {
-  const inputField = document.getElementById("userInput");
-  const userPrompt = inputField.value.trim();
-  const modelSelected = localStorage.getItem("selectedModel");
-
-  if (!modelSelected) {
-    alert("Please select a model");
-    return;
+
+  function processQueue() {
+    if (!isSpeaking && textQueue.length > 0) {
+      const sentence = textQueue.shift(); // Get the next sentence from the queue
+      cleanText(sentence); // Prepare the text and start TTS
+      isSpeaking = true; // Set speaking status to true while TTS is active
+    }
+  }
+
+  // Function to end the current message and optionally show a loading indicator
+  function endMessage() {
+    highlightAll();
+    cleanText(text);
+    text = "";
+    response_content = "";
+    flow = false;
+    if (currentSpeaker === "user") {
+      console.log("user");
+      showLoadingIndicator("Thinking...")
+    }
+    currentSpeaker = null;
   }
 
-  if (userPrompt) {
-    fetch("/get_response", {
+  // Function to show a loading indicator
+  function showLoadingIndicator(text) {
+    // Create the loading indicator element
+    loadingIndicator = document.createElement("div");
+    loadingIndicator.className = "loading";
+    loadingIndicator.innerHTML = text;
+    // Ensure messageContent is defined and append the loading indicator
+    if (messageContent) {
+        messageDiv.appendChild(loadingIndicator);
+        console.log(messageDiv, loadingIndicator);
+        
+    } else {
+        console.error("messageContent is not defined");
+    }
+}
+
+
+  // Function to handle user input and send it to the server
+  function sendUserInput() {
+    const inputField = document.getElementById("userInput");
+    const userPrompt = inputField.value.trim();
+    const modelSelected = localStorage.getItem("selectedModel");
+    if (!modelSelected) {
+      alert("Please select a model");
+      return;
+    }
+
+    if (userPrompt) {
+      fetch("/get_response", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ prompt: userPrompt, model_need: modelSelected }),
+      })
+        .then((response) => response.json())
+        .then((data) => {
+          console.log("Response received:", data.response);
+        })
+        .catch((error) => console.error("Error:", error));
+
+      inputField.value = ""; // Clear input field
+    }
+  }
+
+  // Function to create options for the model selection dropdown
+  function createModelOption(name) {
+    const selectElement = document.getElementById("select_model_btn");
+    const option = document.createElement("option");
+    option.value = name;
+    option.textContent = name;
+    selectElement.appendChild(option);
+  }
+
+  // Fetch the list of models from the server and populate the dropdown
+  function get_list() {
+    fetch("/list_request", {
       method: "POST",
       headers: { "Content-Type": "application/json" },
       body: JSON.stringify({ prompt: userPrompt, model_need: modelSelected, new_chat: new_chat }),
     })
       .then((response) => response.json())
       .then((data) => {
-        console.log("Response received:", data.response);
+        localStorage.setItem("list", JSON.stringify(data));
+        data.list.models.forEach((model) => createModelOption(model.name));
+        data.list.models.forEach((model) => createModalList(model.name));
+        showNotification("List fetched successfully");
+        save_log("List fetched successfully");
       })
       .catch((error) => console.error("Error:", error));
 
     inputField.value = ""; // Clear input field
     new_chat = false;
   }
-}
 
-// Function to create options for the model selection dropdown
-function createModelOption(name) {
-  const selectElement = document.getElementById("select_model_btn");
-  const option = document.createElement("option");
-  option.value = name;
-  option.textContent = name;
-  selectElement.appendChild(option);
-}
+  // Event listeners for submitting input
+  document.getElementById("submitButton").onclick = sendUserInput;
+  document.getElementById("userInput").addEventListener("keypress", (event) => {
+    if (!flow && event.key === "Enter") sendUserInput();
+  });
 
 // Fetch the list of models from the server and populate the dropdown
 function get_list() {
@@ -309,8 +373,7 @@ eventSource.onmessage = function (event) {
       addContent(response);
       break;
   }
-};
-
+}
 // Function to copy text to clipboard
 function copyToClipboard(text) {
   const textArea = document.createElement("textarea");
@@ -323,7 +386,3 @@ function copyToClipboard(text) {
   document.body.removeChild(textArea);
   // alert("Copied to clipboard!");
 }
-const lastMessage = messageDiv.lastElementChild;
-if (lastMessage) {
-  lastMessage.scrollIntoView({ behavior: "smooth" });
-}

static/styles.css

@@ -4,6 +4,16 @@
     margin: 0;
     padding: 0;
 }
+:root {
+    --base_grey: #262626;
+    --base_light_icon: rgb(206, 206, 206);
+    --base_active_icon: #ffffff;
+    --base_green: #44d7b6;
+    --base_main:#1e1e2f;
+    --base_input_active:#393a4f;
+    --base_input:#393a4f79;
+    --base_secondary:#663399;
+}
 
 :root {
     --base_grey: #262626;
@@ -81,7 +91,6 @@ body {
 
 /* Section_a 
  */
-
 .section_a {
     display: flex;
     width: 350px;
@@ -249,7 +258,22 @@ body {
     background-color: #2a243d;
     transition: 0.5s;
 }
-
+/* Headingbar */
+.heading_bar{
+    display: flex;
+    padding: 4px;
+}
+.heading div{
+    margin: 0px 20px;
+    font-size: 25px;
+}
+.toogle_section{
+    margin: 10px 10px;
+}
+.toogle_section :hover{
+    background-color: #2a243d;
+    transition: 0.5s;
+} 
 /* Chat Area */
 #new_msg {
     overflow-y: auto;