Reimplement Openrouter filter

src/app/api/openrouter-models/route.ts

@@ -3,6 +3,12 @@ import { NextResponse } from "next/server";
 interface OpenRouterModel {
     id: string;
     name: string;
+    created_at?: string | number;
+    createdAt?: string | number;
+    created?: string | number;
+    released_at?: string | number;
+    releasedAt?: string | number;
+    release_date?: string | number;
     pricing: {
         prompt: string;
         completion: string;
@@ -10,6 +16,29 @@ interface OpenRouterModel {
     context_length: number;
 }
 
+function toTimestampMs(value: unknown): number {
+    if (typeof value === "number") {
+        // Heuristic: treat small values as seconds
+        return value > 1_000_000_000_000 ? value : value * 1000;
+    }
+    if (typeof value === "string") {
+        const parsed = Date.parse(value);
+        return Number.isFinite(parsed) ? parsed : 0;
+    }
+    return 0;
+}
+
+function getModelTimestampMs(model: OpenRouterModel): number {
+    return Math.max(
+        toTimestampMs(model.released_at),
+        toTimestampMs(model.releasedAt),
+        toTimestampMs(model.release_date),
+        toTimestampMs(model.created_at),
+        toTimestampMs(model.createdAt),
+        toTimestampMs(model.created)
+    );
+}
+
 let cachedModels: { id: string; name: string }[] | null = null;
 let cacheTimestamp: number = 0;
 const CACHE_DURATION = 1000 * 60 * 60; // 1 hour
@@ -34,10 +63,20 @@ export async function GET() {
 
         const data = await response.json();
 
-        cachedModels = data.data.map((model: OpenRouterModel) => ({
-            id: model.id,
-            name: model.name || model.id,
-        })).sort((a: { name: string }, b: { name: string }) => a.name.localeCompare(b.name));
+        cachedModels = data.data
+            .slice()
+            .sort((a: OpenRouterModel, b: OpenRouterModel) => {
+                const bt = getModelTimestampMs(b);
+                const at = getModelTimestampMs(a);
+                if (bt !== at) return bt - at;
+                const an = (a.name || a.id).toLowerCase();
+                const bn = (b.name || b.id).toLowerCase();
+                return an.localeCompare(bn);
+            })
+            .map((model: OpenRouterModel) => ({
+                id: model.id,
+                name: model.name || model.id,
+            }));
 
         cacheTimestamp = now;
 

src/app/page.tsx

@@ -69,16 +69,7 @@ const STUDENT_MODELS = [
     "Other",
 ];
 
-const SOURCE_MODELS = [
-    "google/gemini-3-flash-preview",
-    "openai/gpt-4o-mini",
-    "openai/gpt-4o",
-    "anthropic/claude-3-5-sonnet",
-    "deepseek/deepseek-r1",
-    "Qwen/Qwen2.5-72B-Instruct",
-    "meta-llama/Llama-3.1-8B-Instruct",
-    "Other (Huggingface Models)",
-];
+const SOURCE_MODEL_OTHER_HF = "Other (HuggingFace)";
 
 const REASONING_DEPTHS = ["low", "medium", "high"];
 const DATASET_SIZES = ["100x", "250x", "500x", "1000x", "3000x", "11000x"];
@@ -114,6 +105,10 @@ export default function Home() {
     const [hfModelQuery, setHfModelQuery] = useState("");
     const [loadingHfModels, setLoadingHfModels] = useState(false);
 
+    const [distillHuggingfaceModels, setDistillHuggingfaceModels] = useState<HuggingFaceModel[]>([]);
+    const [distillHfModelQuery, setDistillHfModelQuery] = useState("");
+    const [loadingDistillHfModels, setLoadingDistillHfModels] = useState(false);
+
     // Distillation form state
     const [sourceDataset, setSourceDataset] = useState("");
     const [sourceDatasetOther, setSourceDatasetOther] = useState("");
@@ -165,6 +160,36 @@ export default function Home() {
         };
     }, [hfModelQuery]);
 
+    useEffect(() => {
+        let cancelled = false;
+        const q = distillHfModelQuery.trim();
+
+        const timer = setTimeout(async () => {
+            setLoadingDistillHfModels(true);
+            try {
+                const res = await fetch(`/api/huggingface-models?q=${encodeURIComponent(q)}&limit=20`);
+                const data = await res.json();
+                if (!cancelled) {
+                    setDistillHuggingfaceModels(Array.isArray(data) ? data : []);
+                }
+            } catch (error) {
+                console.error("Error fetching Hugging Face models:", error);
+                if (!cancelled) {
+                    setDistillHuggingfaceModels([]);
+                }
+            } finally {
+                if (!cancelled) {
+                    setLoadingDistillHfModels(false);
+                }
+            }
+        }, 250);
+
+        return () => {
+            cancelled = true;
+            clearTimeout(timer);
+        };
+    }, [distillHfModelQuery]);
+
     async function fetchRequests() {
         try {
             const [distillRes, datasetRes] = await Promise.all([
@@ -233,6 +258,8 @@ export default function Home() {
                 setSourceDatasetOther("");
                 setStudentModel("");
                 setStudentModelOther("");
+                setDistillHfModelQuery("");
+                setDistillHuggingfaceModels([]);
                 setDistillNotes("");
                 setShowDistillForm(false);
                 fetchRequests();
@@ -249,7 +276,7 @@ export default function Home() {
     async function handleDatasetSubmit(e: React.FormEvent) {
         e.preventDefault();
         const resolvedSourceModel =
-            sourceModel === "Other (Huggingface Models)" ? sourceModelOther.trim() : sourceModel;
+            sourceModel === SOURCE_MODEL_OTHER_HF ? sourceModelOther.trim() : sourceModel;
         if (!resolvedSourceModel) {
             toast({ title: "Error", description: "Please select a source model", variant: "destructive" });
             return;
@@ -269,8 +296,10 @@ export default function Home() {
             });
             if (res.ok) {
                 toast({ title: "Success", description: "Dataset request submitted!" });
-                setSourceModel("google/gemini-3-flash-preview");
+                setSourceModel(openrouterModels[0]?.id || "");
                 setSourceModelOther("");
+                setHfModelQuery("");
+                setHuggingfaceModels([]);
                 setDatasetSize("250x");
                 setReasoningDepth("high");
                 setSelectedTopics([]);
@@ -433,7 +462,15 @@ export default function Home() {
                                                         value={studentModel}
                                                         onValueChange={(v) => {
                                                             setStudentModel(v);
-                                                            if (v !== "Other") setStudentModelOther("");
+                                                            if (v !== "Other") {
+                                                                setStudentModelOther("");
+                                                                setDistillHfModelQuery("");
+                                                                setDistillHuggingfaceModels([]);
+                                                            } else {
+                                                                setStudentModelOther("");
+                                                                setDistillHfModelQuery("");
+                                                                setDistillHuggingfaceModels([]);
+                                                            }
                                                         }}
                                                     >
                                                         <SelectTrigger>
@@ -463,13 +500,18 @@ export default function Home() {
                                             )}
                                             {studentModel === "Other" && (
                                                 <div className="space-y-2">
-                                                    <Label htmlFor="studentOther">Student Model (Other) *</Label>
-                                                    <input
-                                                        id="studentOther"
-                                                        className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2"
+                                                    <Label htmlFor="studentOther">Hugging Face Student Model *</Label>
+                                                    <Combobox
+                                                        options={distillHuggingfaceModels}
                                                         value={studentModelOther}
-                                                        onChange={(e) => setStudentModelOther(e.target.value)}
-                                                        placeholder="Type the student model name"
+                                                        onValueChange={setStudentModelOther}
+                                                        placeholder="Search safetensors models"
+                                                        searchPlaceholder="Type to search models..."
+                                                        emptyMessage={distillHfModelQuery.trim() ? "No models found" : "Start typing to search"}
+                                                        loading={loadingDistillHfModels}
+                                                        searchValue={distillHfModelQuery}
+                                                        onSearchValueChange={setDistillHfModelQuery}
+                                                        disableLocalFilter
                                                     />
                                                 </div>
                                             )}
@@ -581,19 +623,23 @@ export default function Home() {
                                                 <div className="space-y-2">
                                                     <Label htmlFor="sourceModel">Source Model *</Label>
                                                     <Combobox
-                                                        options={SOURCE_MODELS.map((m) => ({ id: m, name: m }))}
+                                                        options={[
+                                                            ...openrouterModels,
+                                                            { id: SOURCE_MODEL_OTHER_HF, name: SOURCE_MODEL_OTHER_HF },
+                                                        ]}
                                                         value={sourceModel}
                                                         onValueChange={(v) => {
                                                             setSourceModel(v);
-                                                            if (v !== "Other (Huggingface Models)") {
+                                                            if (v !== SOURCE_MODEL_OTHER_HF) {
                                                                 setSourceModelOther("");
                                                                 setHfModelQuery("");
                                                                 setHuggingfaceModels([]);
                                                             }
                                                         }}
                                                         placeholder="Select a model"
-                                                        searchPlaceholder="Search openrouter models..."
+                                                        searchPlaceholder="Search OpenRouter models..."
                                                         emptyMessage="No models found"
+                                                        loading={loadingModels}
                                                     />
                                                 </div>
                                                 <div className="space-y-2">
@@ -612,7 +658,7 @@ export default function Home() {
                                                     </Select>
                                                 </div>
                                             </div>
-                                            {sourceModel === "Other (Huggingface Models)" && (
+                                            {sourceModel === SOURCE_MODEL_OTHER_HF && (
                                                 <div className="space-y-2">
                                                     <Label htmlFor="sourceModelOther">Hugging Face Model *</Label>
                                                     <Combobox