victor HF Staff commited on
Commit
6e1e51b
·
1 Parent(s): bb5b6b1

Refactor model icons and badges layout

Browse files

Moved tool and multimodal support icons out of a nested flex container for cleaner layout and removed duplicate code. This improves readability and maintainability of the model badges section.

Files changed (1) hide show
  1. src/routes/models/+page.svelte +16 -18
src/routes/models/+page.svelte CHANGED
@@ -141,6 +141,22 @@
141
 
142
  <!-- Icons and badges -->
143
  <div class="flex flex-shrink-0 items-center gap-1.5">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
144
  <button
145
  type="button"
146
  title="Model settings"
@@ -154,24 +170,6 @@
154
  >
155
  <LucideSettings class="size-3 sm:size-3.5" />
156
  </button>
157
- <div class="flex items-center gap-1.5">
158
- {#if $settings.toolsOverrides?.[model.id] ?? (model as { supportsTools?: boolean }).supportsTools}
159
- <div
160
- title="This model supports tool calling (functions)."
161
- class="rounded-md bg-purple-50 p-1.5 text-purple-600 dark:bg-purple-900/20 dark:text-purple-400"
162
- >
163
- <LucideHammer class="size-3 sm:size-3.5" />
164
- </div>
165
- {/if}
166
- {#if $settings.multimodalOverrides?.[model.id] ?? model.multimodal}
167
- <div
168
- title="This model is multimodal and supports image inputs natively."
169
- class="rounded-md bg-blue-50 p-1.5 text-blue-600 dark:bg-blue-900/20 dark:text-blue-400"
170
- >
171
- <LucideImage class="size-3 sm:size-3.5" />
172
- </div>
173
- {/if}
174
- </div>
175
  {#if isActive}
176
  <span
177
  class="rounded-full bg-black px-2.5 py-1 text-xs font-bold text-white shadow-md dark:bg-white dark:text-black"
 
141
 
142
  <!-- Icons and badges -->
143
  <div class="flex flex-shrink-0 items-center gap-1.5">
144
+ {#if $settings.toolsOverrides?.[model.id] ?? (model as { supportsTools?: boolean }).supportsTools}
145
+ <div
146
+ title="This model supports tool calling (functions)."
147
+ class="rounded-md bg-purple-50 p-1.5 text-purple-600 dark:bg-purple-900/20 dark:text-purple-400"
148
+ >
149
+ <LucideHammer class="size-3 sm:size-3.5" />
150
+ </div>
151
+ {/if}
152
+ {#if $settings.multimodalOverrides?.[model.id] ?? model.multimodal}
153
+ <div
154
+ title="This model is multimodal and supports image inputs natively."
155
+ class="rounded-md bg-blue-50 p-1.5 text-blue-600 dark:bg-blue-900/20 dark:text-blue-400"
156
+ >
157
+ <LucideImage class="size-3 sm:size-3.5" />
158
+ </div>
159
+ {/if}
160
  <button
161
  type="button"
162
  title="Model settings"
 
170
  >
171
  <LucideSettings class="size-3 sm:size-3.5" />
172
  </button>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
173
  {#if isActive}
174
  <span
175
  class="rounded-full bg-black px-2.5 py-1 text-xs font-bold text-white shadow-md dark:bg-white dark:text-black"