add model choice

1 files changed, 20 insertions, 3 deletions

diff --git a/index.html b/index.html
index fcbbcb4..c33a118 100644
--- a/index.html
+++ b/index.html
@@ -42,7 +42,9 @@
     </div>

     <form style="display: flex; justify-content: center; align-items: center; padding: 20px; width: 70%">

       <input id="prompt" type="text" placeholder="Enter your prompt here"

-        style="padding: 10px; width: 100%; margin-right: 10px;">

+        style="padding: 10px; width: 80%; margin-right: 10px;">

+      <select id="model" type="text" style="padding: 10px; width: 20%; margin-right: 10px;" placeholder="Model to use"

+        value="qwen2.5-coder:7b"></select>

       <button id="generate" type="submit" style="padding: 10px;">Generate</button>

     </form>

   </main>

@@ -52,11 +54,26 @@
     const chat = document.getElementById('chat');

     const prompt = document.getElementById('prompt');

     const generate = document.getElementById('generate');

+    const model = document.getElementById('model');

+

+    fetch('http://localhost:11434/api/tags')

+      .then(response => response.json())

+      .then(data => {

+        data.models.forEach(m => {

+          let option = document.createElement('option');

+          option.value = m.model;

+          option.text = m.name;

+          model.appendChild(option);

+        });

+      })

+      .catch(error => console.error(error));

 

     // generate button

     generate.addEventListener('click', e => {

       e.preventDefault();

 

+      const modelValue = model.value;

+

       // clear chat on first call

       if (firstCall) {

         firstCall = false;

@@ -75,14 +92,14 @@
       fetch('http://localhost:11434/api/generate', {

         method: 'POST',

         body: JSON.stringify({

-          model: "gemma3:4b",

+          model: modelValue,

           prompt: promptValue,

           stream: false

         })

       })

         .then(response => response.json())

         .then(data => {

-          appendChat(markdownParser(data.response), "answer");

+          appendChat(`<p style="font-size:0.7em;font-style:italic">${modelValue}</p>` + markdownParser(data.response), "answer");

         })

         .catch(error => console.error(error));

     });