Feat: quantization dropdown UI

This commit is contained in:
2025-12-05 17:24:27 -08:00
parent 8c788c5163
commit 7be974a915

View File

@@ -27,7 +27,23 @@
<div><label class="block text-gray-700 font-medium mb-1">Repetition Penalty <span class="text-gray-400">(02)</span></label><input id="set_repetition_penalty" type="number" min="0" max="2" step="0.01" class="w-full rounded-xl border border-gray-300 px-3 py-2" placeholder="1.0"/></div>
<div><label class="block text-gray-700 font-medium mb-1">Min P <span class="text-gray-400">(01)</span></label><input id="set_min_p" type="number" min="0" max="1" step="0.01" class="w-full rounded-xl border border-gray-300 px-3 py-2" placeholder="0.0"/></div>
<div><label class="block text-gray-700 font-medium mb-1">Top A <span class="text-gray-400">(01)</span></label><input id="set_top_a" type="number" min="0" max="1" step="0.01" class="w-full rounded-xl border border-gray-300 px-3 py-2" placeholder="0.0"/></div>
<div><label class="block text-gray-700 font-medium mb-1">Verbosity</label><select id="set_verbosity" class="w-full rounded-xl border border-gray-300 px-3 py-2"><option value="">Omitted</option><option value="low">Low</option><option value="medium">Medium</option><option value="high">High</option></select></div>
<div class="relative">
<label class="block text-gray-700 font-medium mb-1">Quantization</label>
<button type="button" id="quantDropdownBtn" class="w-full rounded-xl border border-gray-300 px-3 py-2 flex items-center justify-between text-left"><span id="quantDropdownLabel" class="truncate text-sm text-gray-700">Any</span><i data-lucide="chevron-down" class="h-4 w-4 text-gray-400"></i></button>
<div id="quantDropdown" class="hidden absolute z-20 mt-1 w-full rounded-xl border border-gray-200 bg-white shadow-lg max-h-56 overflow-y-auto">
<div class="py-2">
<label class="flex items-center gap-3 px-3 py-1 hover:bg-gray-50"><input type="checkbox" data-quant="int4" class="quant-opt h-4 w-4 rounded border-gray-300 text-black focus:ring-black"><span class="text-sm text-gray-700">Int4</span></label>
<label class="flex items-center gap-3 px-3 py-1 hover:bg-gray-50"><input type="checkbox" data-quant="int8" class="quant-opt h-4 w-4 rounded border-gray-300 text-black focus:ring-black"><span class="text-sm text-gray-700">Int8</span></label>
<label class="flex items-center gap-3 px-3 py-1 hover:bg-gray-50"><input type="checkbox" data-quant="fp4" class="quant-opt h-4 w-4 rounded border-gray-300 text-black focus:ring-black"><span class="text-sm text-gray-700">FP4</span></label>
<label class="flex items-center gap-3 px-3 py-1 hover:bg-gray-50"><input type="checkbox" data-quant="fp6" class="quant-opt h-4 w-4 rounded border-gray-300 text-black focus:ring-black"><span class="text-sm text-gray-700">FP6</span></label>
<label class="flex items-center gap-3 px-3 py-1 hover:bg-gray-50"><input type="checkbox" data-quant="fp8" class="quant-opt h-4 w-4 rounded border-gray-300 text-black focus:ring-black"><span class="text-sm text-gray-700">FP8</span></label>
<label class="flex items-center gap-3 px-3 py-1 hover:bg-gray-50"><input type="checkbox" data-quant="fp16" class="quant-opt h-4 w-4 rounded border-gray-300 text-black focus:ring-black"><span class="text-sm text-gray-700">FP16</span></label>
<label class="flex items-center gap-3 px-3 py-1 hover:bg-gray-50"><input type="checkbox" data-quant="bf16" class="quant-opt h-4 w-4 rounded border-gray-300 text-black focus:ring-black"><span class="text-sm text-gray-700">BF16</span></label>
<label class="flex items-center gap-3 px-3 py-1 hover:bg-gray-50"><input type="checkbox" data-quant="fp32" class="quant-opt h-4 w-4 rounded border-gray-300 text-black focus:ring-black"><span class="text-sm text-gray-700">FP32</span></label>
<label class="flex items-center gap-3 px-3 py-1 hover:bg-gray-50"><input type="checkbox" data-quant="unknown" class="quant-opt h-4 w-4 rounded border-gray-300 text-black focus:ring-black"><span class="text-sm text-gray-700">Unknown</span></label>
</div>
</div>
</div>
</div>
<div class="flex flex-wrap items-center gap-2 pt-2">
<div><input id="set_include_thoughts" type="checkbox" class="sr-only peer"><label for="set_include_thoughts" class="inline-flex cursor-pointer items-center rounded-full border border-slate-300 bg-transparent py-0.5 px-3 text-xs text-slate-500 peer-checked:border-gray-300 peer-checked:bg-gray-200 peer-checked:text-slate-800">Include thoughts</label></div>