Update playground.html

playground.html

@@ -506,42 +506,42 @@
         <span class="text-xl font-mono font-bold bg-gradient-to-r from-primary to-primary-light bg-clip-text text-transparent">LOKI.AI</span>
         <span class="ml-2 text-sm bg-light-input dark:bg-dark-input px-2 py-0.5 rounded-full text-gray-600 dark:text-gray-300">Playground</span>
       </div>
-      <div class="flex space-x-2">
-        <!-- Model Selector -->
-        <div class="relative" id="modelSelector">
-          <button class="px-3 py-2 bg-light-input dark:bg-dark-input rounded-md text-sm flex items-center space-x-1 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors shadow-sm" id="modelSelectButton" aria-label="Select AI model">
-            <span id="modelSelectDisplay">Select Model</span>
-            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
-            </svg>
-          </button>
-          <div class="absolute mt-1 w-56 rounded-md shadow-lg bg-light-card dark:bg-dark-card ring-1 ring-black ring-opacity-5 hidden max-h-64 overflow-y-auto z-20 dropdown-transition" id="modelOptions">
-            <div class="py-2 px-3 text-sm text-gray-600 dark:text-gray-400" id="modelLoader">Loading models...</div>
-          </div>
-        </div>
-        
-        <!-- Clear Chat Button -->
-        <button id="clearChatButton" class="p-2 rounded-md hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors bg-light-input dark:bg-dark-input shadow-sm group" aria-label="Clear chat history">
-          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-500 group-hover:text-primary dark:text-gray-400 dark:group-hover:text-primary-light transition-colors" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
-          </svg>
-        </button>
-        
-        <!-- Export Chat Button -->
-        <button id="exportChatButton" class="p-2 rounded-md hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors bg-light-input dark:bg-dark-input shadow-sm group" aria-label="Export conversation">
-          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-500 group-hover:text-primary dark:text-gray-400 dark:group-hover:text-primary-light transition-colors" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
-          </svg>
-        </button>
-        
-        <!-- Theme Toggle Button -->
-        <button id="themeToggle" class="p-2 rounded-md hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors bg-light-input dark:bg-dark-input shadow-sm group" aria-label="Toggle theme">
-          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-500 group-hover:text-primary dark:text-gray-400 dark:group-hover:text-primary-light transition-colors" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
-          </svg>
-        </button>
-      </div>
+<div class="flex flex-wrap items-center justify-between gap-2">
+  <!-- Model Selector -->
+  <div class="relative" id="modelSelector">
+    <button class="px-3 py-2 bg-light-input dark:bg-dark-input rounded-md text-sm flex items-center space-x-1 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors shadow-sm min-w-0" id="modelSelectButton" aria-label="Select AI model">
+      <span id="modelSelectDisplay">Select Model</span>
+      <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
+      </svg>
+    </button>
+    <div class="absolute mt-1 w-56 rounded-md shadow-lg bg-light-card dark:bg-dark-card ring-1 ring-black ring-opacity-5 hidden max-h-64 overflow-y-auto z-20 dropdown-transition" id="modelOptions">
+      <div class="py-2 px-3 text-sm text-gray-600 dark:text-gray-400" id="modelLoader">Loading models...</div>
     </div>
+  </div>
+
+  <!-- Clear Chat Button -->
+  <button id="clearChatButton" class="p-2 rounded-md hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors bg-light-input dark:bg-dark-input shadow-sm group min-w-0" aria-label="Clear chat history">
+    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-500 group-hover:text-primary dark:text-gray-400 dark:group-hover:text-primary-light transition-colors" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+    </svg>
+  </button>
+
+  <!-- Export Chat Button -->
+  <button id="exportChatButton" class="p-2 rounded-md hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors bg-light-input dark:bg-dark-input shadow-sm group min-w-0" aria-label="Export conversation">
+    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-500 group-hover:text-primary dark:text-gray-400 dark:group-hover:text-primary-light transition-colors" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
+    </svg>
+  </button>
+
+  <!-- Theme Toggle Button -->
+  <button id="themeToggle" class="p-2 rounded-md hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors bg-light-input dark:bg-dark-input shadow-sm group min-w-0" aria-label="Toggle theme">
+    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-500 group-hover:text-primary dark:text-gray-400 dark:group-hover:text-primary-light transition-colors" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
+    </svg>
+  </button>
+</div>
+
 
     <!-- Initial Input -->
     <div class="flex flex-col items-center justify-center space-y-6 py-12" id="initialInput">
@@ -815,7 +815,7 @@ function populateModels(models) {
     models.forEach(model => {
         const modelName = model.id;
         let provider = 'Other';
-        if (modelName.includes('gpt')) provider = 'OpenAI';
+        if (/gpt|openai/i.test(modelName)) provider = 'OpenAI';
         else if (modelName.includes('claude')) provider = 'Anthropic';
         else if (modelName.includes('llama')) provider = 'Meta';
         else if (modelName.includes('gemini')) provider = 'Google';