Bugfix in settings

app.py

@@ -114,6 +114,10 @@ class Gpt4AllWebUI(GPT4AllAPI):
             "/set_backend", "set_backend", self.set_backend, methods=["POST"]
         )
         
+        self.add_endpoint(
+            "/set_model", "set_model", self.set_model, methods=["POST"]
+        )
+        
         self.add_endpoint(
             "/update_model_params", "update_model_params", self.update_model_params, methods=["POST"]
         )
@@ -385,7 +389,7 @@ class Gpt4AllWebUI(GPT4AllAPI):
         data = request.get_json()
         backend =  str(data["backend"])
         if self.config['backend']!= backend:
-            print("New model selected")
+            print("New backend selected")
             
             self.config['backend'] = backend
             self.load_backend(self.BACKENDS_LIST[self.config["backend"]])
@@ -398,6 +402,17 @@ class Gpt4AllWebUI(GPT4AllAPI):
 
         return jsonify({"status": "error"})
 
+    def set_model(self):
+        data = request.get_json()
+        model =  str(data["model"])
+        if self.config['model']!= model:
+            print("New model selected")            
+            self.config['model'] = model
+            self.create_chatbot()
+            return jsonify({"status": "ok"})
+
+        return jsonify({"status": "error"})    
+    
     def update_model_params(self):
         data = request.get_json()
         backend =  str(data["backend"])

static/js/settings.js

@@ -1,3 +1,13 @@
+function selectOptionByText(selectElement, optionText) {
+  for (let i = 0; i < selectElement.options.length; i++) {
+    if (selectElement.options[i].text === optionText) {
+      selectElement.selectedIndex = i;
+      break;
+    }
+  }
+}
+
+
 
 fetch('/settings')
 .then(response => response.text())
@@ -26,63 +36,18 @@ fetch('/settings')
   repeatPenaltyValue = document.getElementById('repeat-penalty-value');
   repeatLastNValue = document.getElementById('repeat-last-n');
 
-  backendInput.addEventListener('input',() => {
-    console.log(`Backend (${backendInput.value})`)
-    // Use fetch to send form values to Flask endpoint
-    fetch('/set_backend', {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
-      },
-      body: JSON.stringify({"backend":backendInput.value}),
-    })
-      .then((response) => response.json())
-      .then((data) => {
-        console.log(data);
-        populate_settings();
-        alert("Backend set successfully")
-      })
-      .catch((error) => {
-        console.error('Error:', error);
-        alert("Error setting configuration")
-      });    
-  })
-
-  tempInput.addEventListener('input',() => {
-    temperatureValue.textContent =`Temperature(${tempInput.value})`
-  })
-  
-  nPredictInput.addEventListener('input',() => {
-    n_predictValue.textContent =`N Predict(${nPredictInput.value})`
-  })
-  
-  topKInput.addEventListener('input',() => {
-    topkValue.textContent =`Top-K(${topKInput.value})`
-  })
-  
-  topPInput.addEventListener('input',() => {
-    toppValue.textContent =`Top-P(${topPInput.value})`
-  })
-  
-  repeatPenaltyInput.addEventListener('input',() => {
-    repeatPenaltyValue.textContent =`Repeat penalty(${repeatPenaltyInput.value})`
-  })
-  
-  repeatLastNInput.addEventListener('input',() => {
-    repeatLastNValue.textContent =`Repeat last N(${repeatLastNInput.value})`
-  })
-  
     
   function update_config(){
     fetch('/get_config')
       .then((response) => response.json())
       .then((data) => {
+        console.log("Received config")
         console.log(data);
-        backendInput.value = data["backend"]
-        modelInput.value = data["model"]
-        personalityLanguageInput.value = data["personality_language"]
-        personalityCategoryInput.value = data["personality_category"]
-        personalityInput.value = data["personality"]
+        selectOptionByText(backendInput, data["backend"])
+        selectOptionByText(modelInput, data["model"])
+        selectOptionByText(personalityLanguageInput, data["personality_language"])
+        selectOptionByText(personalityCategoryInput, data["personality_category"])
+        selectOptionByText(personalityInput, data["personality"])
         languageInput.value = data["language"]
         voiceInput.value = data["voice"]
         seedInput.value = data["seed"]
@@ -109,7 +74,78 @@ fetch('/settings')
 
   }  
   
-  update_config();
+  backendInput.addEventListener('input',() => {
+    console.log(`Backend (${backendInput.value})`)
+    // Use fetch to send form values to Flask endpoint
+    fetch('/set_backend', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({"backend":backendInput.value}),
+    })
+      .then((response) => response.json())
+      .then((data) => {
+        console.log(data);
+        populate_settings();
+        
+        alert("Backend set successfully")
+      })
+      .catch((error) => {
+        console.error('Error:', error);
+        alert("Error setting configuration")
+      });    
+  })
+
+  modelInput.addEventListener('input',() => {
+    console.log(`Model (${modelInput.value})`)
+    // Use fetch to send form values to Flask endpoint
+    fetch('/set_model', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({"model":modelInput.value}),
+    })
+      .then((response) => response.json())
+      .then((data) => {
+        console.log(data);
+        populate_settings();
+        alert("Backend set successfully")
+      })
+      .catch((error) => {
+        console.error('Error:', error);
+        alert("Error setting configuration")
+      });    
+  })
+
+
+  tempInput.addEventListener('input',() => {
+    temperatureValue.textContent =`Temperature(${tempInput.value})`
+  })
+  
+  nPredictInput.addEventListener('input',() => {
+    n_predictValue.textContent =`N Predict(${nPredictInput.value})`
+  })
+  
+  topKInput.addEventListener('input',() => {
+    topkValue.textContent =`Top-K(${topKInput.value})`
+  })
+  
+  topPInput.addEventListener('input',() => {
+    toppValue.textContent =`Top-P(${topPInput.value})`
+  })
+  
+  repeatPenaltyInput.addEventListener('input',() => {
+    repeatPenaltyValue.textContent =`Repeat penalty(${repeatPenaltyInput.value})`
+  })
+  
+  repeatLastNInput.addEventListener('input',() => {
+    repeatLastNValue.textContent =`Repeat last N(${repeatLastNInput.value})`
+  })
+  
+
+
   
   const submitButton = document.getElementById('submit-model-params');
   submitButton.addEventListener('click', (event) => {
@@ -153,6 +189,193 @@ fetch('/settings')
       });
   });
 
+  populate_settings();
+
+  function populate_settings(){
+    // Get a reference to the <select> element
+    const selectBackend = document.getElementById('backend');
+    const selectModel = document.getElementById('model');
+  
+    const selectPersonalityLanguage = document.getElementById('personalities_language');
+    const selectPersonalityCategory = document.getElementById('personalities_category');
+    const selectPersonality = document.getElementById('personalities');
+  
+    function populate_backends(){
+      selectBackend.innerHTML = "";
+      // Fetch the list of .bin files from the models subfolder
+      fetch('/list_backends')
+      .then(response => response.json())
+      .then(data => {
+        if (Array.isArray(data)) {
+          // data is an array
+          data.forEach(filename => {
+            const optionElement = document.createElement('option');
+            optionElement.value = filename;
+            optionElement.textContent = filename;
+            selectBackend.appendChild(optionElement);
+          });
+  
+          // fetch('/get_args')
+          // .then(response=> response.json())
+          // .then(data=>{
+            
+          // })
+        } else {
+          console.error('Expected an array, but received:', data);
+        }
+      });
+    }
+  
+    function populate_models(){
+    // Fetch the list of .bin files from the models subfolder
+    fetch('/list_models')
+      .then(response => response.json())
+      .then(data => {
+        if (Array.isArray(data)) {
+          // data is an array
+          data.forEach(filename => {
+            const optionElement = document.createElement('option');
+            optionElement.value = filename;
+            optionElement.textContent = filename;
+            selectModel.appendChild(optionElement);
+          });
+  
+          // fetch('/get_args')
+          // .then(response=> response.json())
+          // .then(data=>{
+            
+          // })
+        } else {
+          console.error('Expected an array, but received:', data);
+        }
+      });
+    }
+    function populate_personalities_languages(){
+      const selectPersonalityLanguage = document.getElementById('personalities_language');
+      selectPersonalityLanguage.innerHTML=""
+      // Fetch the list of .yaml files from the models subfolder
+      fetch('/list_personalities_languages')
+      .then(response => response.json())
+      .then(data => {
+        if (Array.isArray(data)) {
+          // data is an array
+          data.forEach(filename => {
+            const optionElement = document.createElement('option');
+            optionElement.value = filename;
+            optionElement.textContent = filename;
+            selectPersonalityLanguage.appendChild(optionElement);
+          });
+  
+          // fetch('/get_args')
+          // .then(response=> response.json())
+          // .then(data=>{
+            
+          // })
+        } else {
+          console.error('Expected an array, but received:', data);
+        }
+      });
+    }
+    function populate_personalities_categories(){
+      const selectPersonalityCategory = document.getElementById('personalities_category');
+      selectPersonalityCategory.innerHTML=""
+      // Fetch the list of .yaml files from the models subfolder
+      fetch('/list_personalities_categories')
+      .then(response => response.json())
+      .then(data => {
+        if (Array.isArray(data)) {
+          // data is an array
+          data.forEach(filename => {
+            const optionElement = document.createElement('option');
+            optionElement.value = filename;
+            optionElement.textContent = filename;
+            selectPersonalityCategory.appendChild(optionElement);
+          });
+        } else {
+          console.error('Expected an array, but received:', data);
+        }
+      });
+    }
+    function populate_personalities(){
+      const selectPersonalityLanguage = document.getElementById('personalities_language');
+        
+      selectPersonality.innerHTML=""
+      // Fetch the list of .yaml files from the models subfolder
+      fetch('/list_personalities')
+      .then(response => response.json())
+      .then(data => {
+        if (Array.isArray(data)) {
+          // data is an array
+          data.forEach(filename => {
+            const optionElement = document.createElement('option');
+            optionElement.value = filename;
+            optionElement.textContent = filename;
+            selectPersonality.appendChild(optionElement);
+          });
+        } else {
+          console.error('Expected an array, but received:', data);
+        }
+      });
+    }
+    
+    function set_personality_language(lang, callback) {
+      fetch(`/set_personality_language?language=${lang}`)
+        .then(response => response.json())
+        .then(data => {
+            callback(data);
+        });
+    }
+  
+    // Example usage: call another function after set_personality_language returns
+    selectPersonalityLanguage.addEventListener('click', function() {
+      set_personality_language(selectPersonalityLanguage.value, function(data) {
+        console.log('Response received:', data);
+        populate_personalities_categories();
+      });
+    });
+  
+    function set_personality_category(category, callback) {
+      fetch(`/set_personality_category?category=${category}`)
+        .then(response => response.json())
+        .then(data => {
+          callback()
+        });
+    }
+  
+    // Example usage: call another function after set_personality_category returns
+    selectPersonalityCategory.addEventListener('click', function() {
+      set_personality_category(selectPersonalityCategory.value, function(data) {
+        console.log('Response received:', data);
+        populate_personalities();
+      });
+    });
+  
+  
+    populate_backends()
+    populate_models()
+    populate_personalities_languages()
+    populate_personalities_categories()
+    populate_personalities()
+    setTimeout(update_config,100);
+  
+    // Fetch the list of .yaml files from the models subfolder
+    fetch('/list_languages')
+    .then(response => response.json())
+    .then(data => {
+      if (Array.isArray(data)) {
+        // data is an array
+        const selectLanguage = document.getElementById('language');
+        data.forEach(row => {
+          const optionElement = document.createElement('option');
+          optionElement.value = row.value;
+          optionElement.innerHTML = row.label;
+          selectLanguage.appendChild(optionElement);
+        });
+      } else {
+        console.error('Expected an array, but received:', data);
+      }
+    });
+  }  
   
 
 })
@@ -160,189 +383,4 @@ fetch('/settings')
   console.error('Error loading settings page:', error);
 });
 
-function populate_settings(){
-  // Get a reference to the <select> element
-  const selectBackend = document.getElementById('backend');
-  const selectModel = document.getElementById('model');
 
-  const selectPersonalityLanguage = document.getElementById('personalities_language');
-  const selectPersonalityCategory = document.getElementById('personalities_category');
-  const selectPersonality = document.getElementById('personalities');
-
-  function populate_backends(){
-    selectBackend.innerHTML = "";
-    // Fetch the list of .bin files from the models subfolder
-    fetch('/list_backends')
-    .then(response => response.json())
-    .then(data => {
-      if (Array.isArray(data)) {
-        // data is an array
-        data.forEach(filename => {
-          const optionElement = document.createElement('option');
-          optionElement.value = filename;
-          optionElement.textContent = filename;
-          selectBackend.appendChild(optionElement);
-        });
-
-        // fetch('/get_args')
-        // .then(response=> response.json())
-        // .then(data=>{
-          
-        // })
-      } else {
-        console.error('Expected an array, but received:', data);
-      }
-    });
-  }
-
-  function populate_models(){
-  // Fetch the list of .bin files from the models subfolder
-  fetch('/list_models')
-    .then(response => response.json())
-    .then(data => {
-      if (Array.isArray(data)) {
-        // data is an array
-        data.forEach(filename => {
-          const optionElement = document.createElement('option');
-          optionElement.value = filename;
-          optionElement.textContent = filename;
-          selectModel.appendChild(optionElement);
-        });
-
-        // fetch('/get_args')
-        // .then(response=> response.json())
-        // .then(data=>{
-          
-        // })
-      } else {
-        console.error('Expected an array, but received:', data);
-      }
-    });
-  }
-  function populate_personalities_languages(){
-    const selectPersonalityLanguage = document.getElementById('personalities_language');
-    selectPersonalityLanguage.innerHTML=""
-    // Fetch the list of .yaml files from the models subfolder
-    fetch('/list_personalities_languages')
-    .then(response => response.json())
-    .then(data => {
-      if (Array.isArray(data)) {
-        // data is an array
-        data.forEach(filename => {
-          const optionElement = document.createElement('option');
-          optionElement.value = filename;
-          optionElement.textContent = filename;
-          selectPersonalityLanguage.appendChild(optionElement);
-        });
-
-        // fetch('/get_args')
-        // .then(response=> response.json())
-        // .then(data=>{
-          
-        // })
-      } else {
-        console.error('Expected an array, but received:', data);
-      }
-    });
-  }
-  function populate_personalities_categories(){
-    const selectPersonalityCategory = document.getElementById('personalities_category');
-    selectPersonalityCategory.innerHTML=""
-    // Fetch the list of .yaml files from the models subfolder
-    fetch('/list_personalities_categories')
-    .then(response => response.json())
-    .then(data => {
-      if (Array.isArray(data)) {
-        // data is an array
-        data.forEach(filename => {
-          const optionElement = document.createElement('option');
-          optionElement.value = filename;
-          optionElement.textContent = filename;
-          selectPersonalityCategory.appendChild(optionElement);
-        });
-      } else {
-        console.error('Expected an array, but received:', data);
-      }
-    });
-  }
-  function populate_personalities(){
-    const selectPersonalityLanguage = document.getElementById('personalities_language');
-      
-    selectPersonality.innerHTML=""
-    // Fetch the list of .yaml files from the models subfolder
-    fetch('/list_personalities')
-    .then(response => response.json())
-    .then(data => {
-      if (Array.isArray(data)) {
-        // data is an array
-        data.forEach(filename => {
-          const optionElement = document.createElement('option');
-          optionElement.value = filename;
-          optionElement.textContent = filename;
-          selectPersonality.appendChild(optionElement);
-        });
-      } else {
-        console.error('Expected an array, but received:', data);
-      }
-    });
-  }
-  
-  function set_personality_language(lang, callback) {
-    fetch(`/set_personality_language?language=${lang}`)
-      .then(response => response.json())
-      .then(data => {
-          callback(data);
-      });
-  }
-
-  // Example usage: call another function after set_personality_language returns
-  selectPersonalityLanguage.addEventListener('click', function() {
-    set_personality_language(selectPersonalityLanguage.value, function(data) {
-      console.log('Response received:', data);
-      populate_personalities_categories();
-    });
-  });
-
-  function set_personality_category(category, callback) {
-    fetch(`/set_personality_category?category=${category}`)
-      .then(response => response.json())
-      .then(data => {
-        callback()
-      });
-  }
-
-  // Example usage: call another function after set_personality_category returns
-  selectPersonalityCategory.addEventListener('click', function() {
-    set_personality_category(selectPersonalityCategory.value, function(data) {
-      console.log('Response received:', data);
-      populate_personalities();
-    });
-  });
-
-
-  populate_backends()
-  populate_models()
-  populate_personalities_languages()
-  populate_personalities_categories()
-  populate_personalities()
-
-  // Fetch the list of .yaml files from the models subfolder
-  fetch('/list_languages')
-  .then(response => response.json())
-  .then(data => {
-    if (Array.isArray(data)) {
-      // data is an array
-      const selectLanguage = document.getElementById('language');
-      data.forEach(row => {
-        const optionElement = document.createElement('option');
-        optionElement.value = row.value;
-        optionElement.innerHTML = row.label;
-        selectLanguage.appendChild(optionElement);
-      });
-    } else {
-      console.error('Expected an array, but received:', data);
-    }
-  });
-
-}
-populate_settings()

static/js/tabs.js

@@ -40,8 +40,6 @@ fetch('/main')
       populateVoicesList();
     }
 
-    populate_settings()
-
   })
   .catch(error => {
     console.error('Error loading main page:', error);