|
1 | 1 | {{define "models_browser"}} |
2 | 2 | <div id="models-browser"> |
3 | | - <div class="catalog-tabs" style="display:flex;gap:0.5rem;margin-bottom:0.75rem;border-bottom:1px solid rgba(0,0,0,0.1);"> |
| 3 | + <div class="catalog-toolbar"> |
| 4 | + <div class="catalog-tabs"> |
4 | 5 | <button type="button" class="btn btn--small {{if eq .CatalogProvider "openrouter"}}btn--primary{{else}}btn--ghost{{end}}" |
5 | | - hx-get="/models?provider=openrouter&full=1" |
| 6 | + hx-get="/models?provider=openrouter&full=1&view={{.Filters.View}}{{if .Filters.ActivePreset}}&preset={{.Filters.ActivePreset}}{{end}}" |
6 | 7 | hx-target="#models-browser" |
7 | 8 | hx-swap="outerHTML">OpenRouter</button> |
8 | 9 | <button type="button" class="btn btn--small {{if eq .CatalogProvider "gemini"}}btn--primary{{else}}btn--ghost{{end}}" |
9 | | - hx-get="/models?provider=gemini&full=1" |
| 10 | + hx-get="/models?provider=gemini&full=1&view={{.Filters.View}}{{if .Filters.ActivePreset}}&preset={{.Filters.ActivePreset}}{{end}}" |
10 | 11 | hx-target="#models-browser" |
11 | 12 | hx-swap="outerHTML">Gemini</button> |
| 13 | + </div> |
| 14 | + <div class="catalog-view-toggle" role="group" aria-label="Catalog view"> |
| 15 | + <button type="button" class="btn btn--small {{if ne .Filters.View "table"}}btn--primary{{else}}btn--ghost{{end}}" |
| 16 | + hx-get="/models?full=1" |
| 17 | + hx-target="#models-browser" |
| 18 | + hx-swap="outerHTML" |
| 19 | + hx-include="#models-filters" |
| 20 | + hx-vals='{"view":"cards"}'>Cards</button> |
| 21 | + <button type="button" class="btn btn--small {{if eq .Filters.View "table"}}btn--primary{{else}}btn--ghost{{end}}" |
| 22 | + hx-get="/models?full=1" |
| 23 | + hx-target="#models-browser" |
| 24 | + hx-swap="outerHTML" |
| 25 | + hx-include="#models-filters" |
| 26 | + hx-vals='{"view":"table"}'>Audit table</button> |
| 27 | + </div> |
12 | 28 | </div> |
13 | 29 | <form id="models-filters" class="filters" |
14 | 30 | hx-get="/models" |
15 | 31 | hx-target="#models-content" |
16 | 32 | hx-swap="outerHTML" |
17 | 33 | hx-trigger="input delay:300ms, change"> |
18 | 34 | <input type="hidden" name="provider" value="{{.CatalogProvider}}"> |
| 35 | + <input type="hidden" name="view" value="{{.Filters.View}}"> |
| 36 | + {{if .Filters.ActivePreset}}<input type="hidden" name="preset" value="{{.Filters.ActivePreset}}">{{end}} |
19 | 37 | <input class="form-input" type="search" name="q" placeholder="Search model id…" |
20 | 38 | value="{{.Filters.Search}}" style="flex:1;min-width:12rem;"> |
21 | 39 | <label><input type="checkbox" name="free" {{if .Filters.Free}}checked{{end}}> Free</label> |
22 | 40 | <label><input type="checkbox" name="vision" {{if .Filters.Vision}}checked{{end}}> Vision</label> |
23 | 41 | <label><input type="checkbox" name="tools" {{if .Filters.Tools}}checked{{end}}> Tools</label> |
24 | 42 | <label><input type="checkbox" name="reasoning" {{if .Filters.Reasoning}}checked{{end}}> Reasoning</label> |
| 43 | + <select class="form-input catalog-sort" name="sort" title="Sort models"> |
| 44 | + <option value="prompt" {{if eq .Filters.Sort "prompt"}}selected{{end}}>Prompt price</option> |
| 45 | + <option value="completion" {{if eq .Filters.Sort "completion"}}selected{{end}}>Completion price</option> |
| 46 | + <option value="effective" {{if eq .Filters.Sort "effective"}}selected{{end}}>Effective price</option> |
| 47 | + <option value="score" {{if eq .Filters.Sort "score"}}selected{{end}}>Intel</option> |
| 48 | + <option value="coding" {{if eq .Filters.Sort "coding"}}selected{{end}}>Coding</option> |
| 49 | + <option value="agentic" {{if eq .Filters.Sort "agentic"}}selected{{end}}>Agentic</option> |
| 50 | + <option value="speed" {{if eq .Filters.Sort "speed"}}selected{{end}}>Speed</option> |
| 51 | + <option value="ttft" {{if eq .Filters.Sort "ttft"}}selected{{end}}>TTFT</option> |
| 52 | + <option value="context" {{if eq .Filters.Sort "context"}}selected{{end}}>Context</option> |
| 53 | + <option value="market" {{if eq .Filters.Sort "market"}}selected{{end}}>Market</option> |
| 54 | + <option value="value" {{if eq .Filters.Sort "value"}}selected{{end}}>Value</option> |
| 55 | + <option value="id" {{if eq .Filters.Sort "id"}}selected{{end}}>Model id</option> |
| 56 | + </select> |
| 57 | + <select class="form-input catalog-sort-dir" name="dir" title="Sort direction"> |
| 58 | + <option value="asc" {{if eq .Filters.SortDir "asc"}}selected{{end}}>Asc</option> |
| 59 | + <option value="desc" {{if eq .Filters.SortDir "desc"}}selected{{end}}>Desc</option> |
| 60 | + </select> |
25 | 61 | </form> |
26 | 62 | {{template "models_content" .}} |
27 | 63 | </div> |
|
62 | 98 | </details> |
63 | 99 | </div> |
64 | 100 | <button class="btn btn--ghost btn--small" |
65 | | - hx-get="/models" |
66 | | - hx-target="#models-content" |
67 | | - hx-swap="outerHTML" |
68 | | - hx-include="#models-filters"> |
| 101 | + hx-get="/models?provider={{.CatalogProvider}}&view={{.Filters.View}}&full=1" |
| 102 | + hx-target="#models-browser" |
| 103 | + hx-swap="outerHTML"> |
69 | 104 | × Clear preset |
70 | 105 | </button> |
71 | 106 | </div> |
72 | 107 | {{end}} |
73 | 108 |
|
74 | | - <div class="table-wrap"> |
75 | | - <table> |
76 | | - <thead> |
77 | | - <tr> |
78 | | - {{- $s := .Filters.Sort}}{{- $d := .Filters.SortDir}} |
79 | | - <th hx-get="/models" hx-target="#models-content" hx-swap="outerHTML" hx-include="#models-filters" |
| 109 | + {{if eq .Filters.View "table"}} |
| 110 | + {{template "models_table" .}} |
| 111 | + {{else}} |
| 112 | + {{template "models_cards" .}} |
| 113 | + {{end}} |
| 114 | +</div> |
| 115 | +{{end}} |
| 116 | + |
| 117 | +{{define "models_table"}} |
| 118 | +<div class="table-wrap catalog-audit-table"> |
| 119 | + <table> |
| 120 | + <thead> |
| 121 | + <tr> |
| 122 | + {{- $s := .Filters.Sort}}{{- $d := .Filters.SortDir}} |
| 123 | + <th hx-get="/models" hx-target="#models-content" hx-swap="outerHTML" hx-include="#models-filters" |
80 | 124 | hx-vals='{"sort":"id","dir":"{{if and (eq $s "id") (eq $d "asc")}}desc{{else}}asc{{end}}"}' |
81 | 125 | style="cursor:pointer" title="Model identifier on OpenRouter (provider/model)">Model{{if eq $s "id"}} {{if eq $d "asc"}}↑{{else}}↓{{end}}{{end}}</th> |
82 | 126 | <th hx-get="/models" hx-target="#models-content" hx-swap="outerHTML" hx-include="#models-filters" |
|
119 | 163 | <th hx-get="/models" hx-target="#models-content" hx-swap="outerHTML" hx-include="#models-filters" |
120 | 164 | hx-vals='{"sort":"value","dir":"{{if and (eq $s "value") (eq $d "desc")}}asc{{else}}desc{{end}}"}' |
121 | 165 | style="cursor:pointer" title="Quality per $ (higher = more bang per buck). Role-specific in Suggest mode (uses role's Pareto axes); generic agentic/prompt in browse mode.">Value{{if eq $s "value"}} {{if eq $d "asc"}}↑{{else}}↓{{end}}{{end}}</th> |
122 | | - </tr> |
123 | | - </thead> |
124 | | - {{template "models_tbody" .}} |
125 | | - </table> |
126 | | - </div> |
| 166 | + </tr> |
| 167 | + </thead> |
| 168 | + {{template "models_tbody" .}} |
| 169 | + </table> |
127 | 170 | </div> |
128 | 171 | {{end}} |
0 commit comments