Daniel changes

exo/api/chatgpt_api.py

@@ -201,7 +201,23 @@ class ChatGPTAPI:
     return web.FileResponse(self.static_dir/"index.html")
 
   async def handle_model_support(self, request):
-    return web.json_response({"model pool": { m: pretty_name.get(m, m) for m in [k for k,v in model_cards.items() if all(map(lambda e: e in v["repo"], list(dict.fromkeys([inference_engine_classes.get(i,None) for i in self.node.topology_inference_engines_pool for i in i if i is not None] + [self.inference_engine_classname]))))]}})
+    return web.json_response({
+      "model pool": {
+        model_name: pretty_name.get(model_name, model_name) 
+        for model_name in [
+          model_id for model_id, model_info in model_cards.items() 
+          if all(map(
+            lambda engine: engine in model_info["repo"],
+            list(dict.fromkeys([
+              inference_engine_classes.get(engine_name, None) 
+              for engine_list in self.node.topology_inference_engines_pool 
+              for engine_name in engine_list 
+              if engine_name is not None
+            ] + [self.inference_engine_classname]))
+          ))
+        ]
+      }
+    })
   
   async def handle_get_models(self, request):
     return web.json_response([{"id": model_name, "object": "model", "owned_by": "exo", "ready": True} for model_name, _ in model_cards.items()])

exo/tinychat/index.html

@@ -193,7 +193,6 @@
 <i class="fas fa-times"></i>
 </button>
 </div>
-<script src="await populateSelector()" defer></script>
 <textarea :disabled="generating" :placeholder="generating ? 'Generating...' : 'Say something'" @input="
             home = (home === 0) ? 1 : home
             if (cstate.messages.length === 0 &amp;&amp; $el.value === '') home = -1;

exo/tinychat/index.js

@@ -73,25 +73,41 @@ document.addEventListener("alpine:init", () => {
     },
 
     async populateSelector() {
-      const response = await fetch(`${this.endpoint}/modelpool`);
-      console.log("Populating Selector")
-      if(!response.ok) {
-        const errorResBody = await response.json();
-        if (errorResBody?.detail) {
-          throw new Error(`Failed to get model pool: ${errorResBody.detail}`);
-        } else {
-          throw new Error("Failed to get model pool: Unknown error");
+      try {
+        const response = await fetch(`${window.location.origin}/modelpool`);
+        if (!response.ok) {
+          const errorResBody = await response.json();
+          throw new Error(`Failed to get model pool: ${errorResBody?.detail || 'Unknown error'}`);
+        }
+
+        const responseJson = await response.json();
+        const sel = document.querySelector(".model-select");
+        if (!sel) {
+          throw new Error("Could not find model selector element");
+        }
+
+        // Clear the current options and add new ones
+        sel.innerHTML = '';
+          
+        const modelDict = responseJson["model pool"];
+
+        Object.entries(modelDict).forEach(([key, value]) => {
+          const opt = document.createElement("option");
+          opt.value = key;
+          opt.textContent = value;
+          sel.appendChild(opt);
+        });
+
+        // Set initial value to the first model
+        const firstKey = Object.keys(modelDict)[0];
+        if (firstKey) {
+          sel.value = firstKey;
+          this.cstate.selectedModel = firstKey;
         }
+      } catch (error) {
+        console.error("Error populating model selector:", error);
+        this.errorMessage = error.message;
       }
-      sel = document.getElementById("model-select");
-      sel.empty();
-      response["model pool"].map((k, v) => {
-        let opt = document.createElement("option");
-        opt.value = k;
-        opt.innerHtml = v;
-        console.log(`Model: ${k} (${v})`)
-        sel.append(opt);
-      });
     },
 
     async handleImageUpload(event) {