.

viewer/src/routes/+page.svelte

@@ -2,20 +2,20 @@
     import { onMount } from "svelte";
     import SvelteTable, { type TableColumn } from "svelte-table";
 
-    interface Row {
-        Name: string;
-        Orgs: string[];
-        Authors: string[];
-        Tags: string[];
-        CodeStatus: string;
-        Paper: string;
-        Code: string;
-        Space: string;
-        Model: string;
-        Dataset: string;
-        Project: string;
-        License: string;
-        Date: string;
+    class Row {
+        Name: string | null = null;
+        Orgs: string[] = [];
+        Authors: string[] = [];
+        Tags: string[] = [];
+        CodeStatus: string | null = null;
+        Paper: string | null = null;
+        Code: string | null = null;
+        Space: string | null = null;
+        Model: string | null = null;
+        Dataset: string | null = null;
+        Project: string | null = null;
+        License: string | null = null;
+        Date: string | null = null;
     }
 
     let rows: Row[] = [];
@@ -275,44 +275,414 @@
         }
     }
 
+    let statusMessage = "";
+    const baseURL = "https://dylanebert-research-tracker-backend.hf.space";
+
     const addEntry = async () => {
         if (!("Name" in selection)) return;
-        const value = selection["Name"];
-        const response = await fetch("/add-entry", {
+        const value = selection["Name"] as string;
+        const row = new Row();
+        const field = await inferField(row, value);
+        if (!field) return;
+        if (field === "Name") {
+            row.Name = value;
+        } else if (field === "Paper") {
+            row.Paper = value;
+        } else if (field === "Code") {
+            row.Code = value;
+        } else if (field === "Space") {
+            row.Space = value;
+        } else if (field === "Model") {
+            row.Model = value;
+        } else if (field === "Dataset") {
+            row.Dataset = value;
+        } else if (field === "Project") {
+            row.Project = value;
+        } else {
+            statusMessage = `<span style="color: red;">Error: Failed to infer field type for "${value}"</span>`;
+            return;
+        }
+        const paper = row.Paper || (await inferPaper(row));
+        const code = row.Code || (await inferCode(row));
+        const name = row.Name || (await inferName(row));
+        if (!name) {
+            statusMessage += `<br><span style="color: red;">Error: Failed to add entry</span>`;
+            return;
+        }
+        const authors = await inferAuthors(row);
+        const orgs = await inferOrgs(row);
+        const date = await inferDate(row);
+        const model = await inferModel(row);
+        const dataset = await inferDataset(row);
+        if (paper) {
+            row.Paper = paper;
+        }
+        if (code) {
+            row.Code = code;
+        }
+        if (name) {
+            row.Name = name;
+        }
+        if (authors) {
+            row.Authors = authors.split(", ");
+        }
+        if (orgs) {
+            row.Orgs = orgs.split(", ");
+        }
+        if (date) {
+            row.Date = date;
+        }
+        if (model) {
+            row.Model = model;
+        }
+        if (dataset) {
+            row.Dataset = dataset;
+        }
+        const response = await fetch(baseURL + "/add-entry", {
             method: "POST",
             headers: {
                 "Content-Type": "application/json",
             },
-            body: JSON.stringify({ value }),
+            body: JSON.stringify(row),
         });
         const data = await response.json();
-        console.log(data);
+        if (data.error || !data.success) {
+            if (data.error) {
+                statusMessage += `<br><span style="color: red;">Error: ${data.error}</span>`;
+            } else {
+                statusMessage += `<br><span style="color: red;">Error: Failed to add entry</span>`;
+            }
+            return;
+        }
+        statusMessage += `<br><span style="color: green;">Added entry for "${row.Name}"</span>`;
+        rows = [row, ...rows];
+    };
+
+    const inferField = async (row: Row, value: string): Promise<string | null> => {
+        let data;
+        try {
+            const response = await fetch(baseURL + "/infer-field", {
+                method: "POST",
+                headers: {
+                    "Content-Type": "application/json",
+                },
+                body: JSON.stringify({ value }),
+            });
+            data = await response.json();
+        } catch (e) {
+            statusMessage += `<br><span style="color: red;">Error: Failed to infer field type for "${value}"</span>`;
+            return null;
+        }
+        if (data.error || !data.field || !(data.field in row)) {
+            statusMessage = `<span style="color: red;">Error: Failed to infer field type for "${value}"</span>`;
+            return null;
+        }
+        statusMessage = `<span style="color: green;">Inferred field type: ${data.field}</span>`;
+        return data.field;
+    };
+
+    const inferPaper = async (row: Row) => {
+        statusMessage += `<br><span>Inferring paper...</span>`;
+        let data;
+        try {
+            const response = await fetch(baseURL + "/infer-paper", {
+                method: "POST",
+                headers: {
+                    "Content-Type": "application/json",
+                },
+                body: JSON.stringify(row),
+            });
+            data = await response.json();
+        } catch (e) {
+            statusMessage = statusMessage.split("<br><span>Inferring paper...</span>")[0];
+            statusMessage += `<br><span style="color: red;">Error: Failed to infer paper</span>`;
+            return null;
+        }
+        statusMessage = statusMessage.split("<br><span>Inferring paper...</span>")[0];
+        if (data.error || !data.paper) {
+            if (data.error) {
+                statusMessage += `<br><span style="color: red;">Error: ${data.error}</span>`;
+            } else if (data.message) {
+                statusMessage += `<br><span>${data.message}</span>`;
+            } else {
+                statusMessage += `<br><span style="color: red;">Error: Failed to infer paper</span>`;
+            }
+            return null;
+        }
+        const link = `<a href="${data.paper}" target="_blank">${data.paper}</a>`;
+        statusMessage += `<br><span style="color: green;">Inferred paper: ${link}</span>`;
+        return data.paper;
+    };
+
+    const inferCode = async (row: Row) => {
+        statusMessage += `<br><span>Inferring code...</span>`;
+        let data;
+        try {
+            const response = await fetch(baseURL + "/infer-code", {
+                method: "POST",
+                headers: {
+                    "Content-Type": "application/json",
+                },
+                body: JSON.stringify(row),
+            });
+            data = await response.json();
+        } catch (e) {
+            statusMessage = statusMessage.split("<br><span>Inferring code...</span>")[0];
+            statusMessage += `<br><span style="color: red;">Error: Failed to infer code</span>`;
+            return null;
+        }
+        statusMessage = statusMessage.split("<br><span>Inferring code...</span>")[0];
+        if (data.error || !data.code) {
+            if (data.error) {
+                statusMessage += `<br><span style="color: red;">Error: ${data.error}</span>`;
+            } else if (data.message) {
+                statusMessage += `<br><span>${data.message}</span>`;
+            } else {
+                statusMessage += `<br><span style="color: red;">Error: Failed to infer code</span>`;
+            }
+            return null;
+        }
+        const link = `<a href="${data.code}" target="_blank">${data.code}</a>`;
+        statusMessage += `<br><span style="color: green;">Inferred code: ${link}</span>`;
+        return data.code;
     };
 
-    onMount(async () => {
-        const url = "https://dylanebert-research-tracker-backend.hf.space/data";
-        const response = await fetch(url, {
+    const inferName = async (row: Row) => {
+        statusMessage += `<br><span>Inferring name...</span>`;
+        let data;
+        try {
+            const response = await fetch(baseURL + "/infer-name", {
+                method: "POST",
+                headers: {
+                    "Content-Type": "application/json",
+                },
+                body: JSON.stringify(row),
+            });
+            data = await response.json();
+        } catch (e) {
+            statusMessage = statusMessage.split("<br><span>Inferring name...</span>")[0];
+            statusMessage += `<br><span style="color: red;">Error: Failed to infer name</span>`;
+            return null;
+        }
+        statusMessage = statusMessage.split("<br><span>Inferring name...</span>")[0];
+        if (data.error || !data.name) {
+            if (data.error) {
+                statusMessage += `<br><span style="color: red;">Error: ${data.error}</span>`;
+            } else if (data.message) {
+                statusMessage += `<br><span>${data.message}</span>`;
+            } else {
+                statusMessage += `<br><span style="color: red;">Error: Failed to infer name</span>`;
+            }
+            return null;
+        }
+        statusMessage += `<br><span style="color: green;">Inferred name: ${data.name}</span>`;
+        return data.name;
+    };
+
+    const inferAuthors = async (row: Row) => {
+        statusMessage += `<br><span>Inferring authors...</span>`;
+        let data;
+        try {
+            const response = await fetch(baseURL + "/infer-authors", {
+                method: "POST",
+                headers: {
+                    "Content-Type": "application/json",
+                },
+                body: JSON.stringify(row),
+            });
+            data = await response.json();
+        } catch (e) {
+            statusMessage = statusMessage.split("<br><span>Inferring authors...</span>")[0];
+            statusMessage += `<br><span style="color: red;">Error: Failed to infer authors</span>`;
+            return null;
+        }
+        statusMessage = statusMessage.split("<br><span>Inferring authors...</span>")[0];
+        if (data.error || !data.authors) {
+            if (data.error) {
+                statusMessage += `<br><span style="color: red;">Error: ${data.error}</span>`;
+            } else if (data.message) {
+                statusMessage += `<br><span>${data.message}</span>`;
+            } else {
+                statusMessage += `<br><span style="color: red;">Error: Failed to infer authors</span>`;
+            }
+            return null;
+        }
+        statusMessage += `<br><span style="color: green;">Inferred authors: ${data.authors}</span>`;
+        return data.authors;
+    };
+
+    const inferOrgs = async (row: Row) => {
+        statusMessage += `<br><span>Inferring orgs...</span>`;
+        let data;
+        try {
+            const response = await fetch(baseURL + "/infer-orgs", {
+                method: "POST",
+                headers: {
+                    "Content-Type": "application/json",
+                },
+                body: JSON.stringify(row),
+            });
+            data = await response.json();
+        } catch (e) {
+            statusMessage = statusMessage.split("<br><span>Inferring orgs...</span>")[0];
+            statusMessage += `<br><span style="color: red;">Error: Failed to infer orgs</span>`;
+            return null;
+        }
+        statusMessage = statusMessage.split("<br><span>Inferring orgs...</span>")[0];
+        if (data.error || !data.orgs) {
+            if (data.error) {
+                statusMessage += `<br><span style="color: red;">Error: ${data.error}</span>`;
+            } else if (data.message) {
+                statusMessage += `<br><span>${data.message}</span>`;
+            } else {
+                statusMessage += `<br><span style="color: red;">Error: Failed to infer orgs</span>`;
+            }
+            return null;
+        }
+        statusMessage += `<br><span style="color: green;">Inferred orgs: ${data.orgs}</span>`;
+        return data.orgs;
+    };
+
+    const inferDate = async (row: Row) => {
+        statusMessage += `<br><span>Inferring date...</span>`;
+        let data;
+        try {
+            const response = await fetch(baseURL + "/infer-date", {
+                method: "POST",
+                headers: {
+                    "Content-Type": "application/json",
+                },
+                body: JSON.stringify(row),
+            });
+            data = await response.json();
+        } catch (e) {
+            statusMessage = statusMessage.split("<br><span>Inferring date...</span>")[0];
+            statusMessage += `<br><span style="color: red;">Error: Failed to infer date</span>`;
+            return null;
+        }
+        statusMessage = statusMessage.split("<br><span>Inferring date...</span>")[0];
+        if (data.error || !data.date) {
+            if (data.error) {
+                statusMessage += `<br><span style="color: red;">Error: ${data.error}</span>`;
+            } else if (data.message) {
+                statusMessage += `<br><span>${data.message}</span>`;
+            } else {
+                statusMessage += `<br><span style="color: red;">Error: Failed to infer date</span>`;
+            }
+            return null;
+        }
+        statusMessage += `<br><span style="color: green;">Inferred date: ${data.date}</span>`;
+        return data.date;
+    };
+
+    const inferModel = async (row: Row) => {
+        statusMessage += `<br><span>Inferring model...</span>`;
+        let data;
+        try {
+            const response = await fetch(baseURL + "/infer-model", {
+                method: "POST",
+                headers: {
+                    "Content-Type": "application/json",
+                },
+                body: JSON.stringify(row),
+            });
+            data = await response.json();
+        } catch (e) {
+            statusMessage = statusMessage.split("<br><span>Inferring model...</span>")[0];
+            statusMessage += `<br><span style="color: red;">Error: Failed to infer model</span>`;
+            return null;
+        }
+        statusMessage = statusMessage.split("<br><span>Inferring model...</span>")[0];
+        if (data.error || !data.model) {
+            if (data.error) {
+                statusMessage += `<br><span style="color: red;">Error: ${data.error}</span>`;
+            } else if (data.message) {
+                statusMessage += `<br><span>${data.message}</span>`;
+            } else {
+                statusMessage += `<br><span style="color: red;">Error: Failed to infer model</span>`;
+            }
+            return null;
+        }
+        statusMessage += `<br><span style="color: green;">Inferred model: ${data.model}</span>`;
+        return data.model;
+    };
+
+    const inferDataset = async (row: Row) => {
+        statusMessage += `<br><span>Inferring dataset...</span>`;
+        let data;
+        try {
+            const response = await fetch(baseURL + "/infer-dataset", {
+                method: "POST",
+                headers: {
+                    "Content-Type": "application/json",
+                },
+                body: JSON.stringify(row),
+            });
+            data = await response.json();
+        } catch (e) {
+            statusMessage = statusMessage.split("<br><span>Inferring dataset...</span>")[0];
+            statusMessage += `<br><span style="color: red;">Error: Failed to infer dataset</span>`;
+            return null;
+        }
+        statusMessage = statusMessage.split("<br><span>Inferring dataset...</span>")[0];
+        if (data.error || !data.dataset) {
+            if (data.error) {
+                statusMessage += `<br><span style="color: red;">Error: ${data.error}</span>`;
+            } else if (data.message) {
+                statusMessage += `<br><span>${data.message}</span>`;
+            } else {
+                statusMessage += `<br><span style="color: red;">Error: Failed to infer dataset</span>`;
+            }
+            return null;
+        }
+        statusMessage += `<br><span style="color: green;">Inferred dataset: ${data.dataset}</span>`;
+        return data.dataset;
+    };
+
+    onMount(() => {
+        fetchRows();
+    });
+
+    let fetching = false;
+    const fetchRows = async () => {
+        if (fetching) return;
+        fetching = true;
+        const response = await fetch(baseURL + "/data", {
             method: "GET",
             headers: {
-                "Authorization": "Bearer " + import.meta.env.VITE_HF_TOKEN,
+                Authorization: "Bearer " + import.meta.env.VITE_HF_TOKEN,
             },
         });
         rows = await response.json();
-    });
+        fetching = false;
+    };
 </script>
 
-<div style="text-align: center; margin-top: 1rem;">
-    <input
-        type="text"
-        placeholder="Enter relevant project, code, paper, space, model, or dataset URL"
-        style="width: 100%; max-width: 512px; margin-bottom: 1rem;"
-        bind:value={searchValue}
-    />
-    <button on:click={addEntry}>New Entry</button>
-</div>
+{#if !import.meta.env.VITE_HF_TOKEN}
+    <div style="text-align: center; margin-top: 1rem;">
+        <p>Missing VITE_HF_TOKEN environment variable</p>
+    </div>
+{:else if fetching}
+    <div style="text-align: center; margin-top: 1rem;">
+        <p>Fetching data from https://dylanebert-research-tracker-backend.hf.space/data</p>
+    </div>
+{:else}
+    <div style="text-align: center; margin-top: 1rem;">
+        <input
+            type="text"
+            placeholder="Enter relevant project, code, paper, space, model, or dataset URL"
+            style="width: 100%; max-width: 512px;"
+            bind:value={searchValue}
+        />
+        <button on:click={addEntry}>New Entry</button>
+    </div>
+
+    {#if statusMessage}
+        <div style="text-align: center; margin-top: 0.5rem;">{@html statusMessage}</div>
+    {/if}
 
-<SvelteTable {columns} {rows} bind:filterSelections={selection} />
+    <!--spacer-->
+    <div style="height: 1rem;" />
 
-<div style="text-align: center; margin-top: 1rem;">
-    <button on:click={addEntry}>New Entry</button>
-</div>
+    <SvelteTable {columns} {rows} bind:filterSelections={selection} />
+{/if}