ensure valid arrays

viewer/src/routes/+page.svelte

@@ -1,22 +1,11 @@
 <script lang="ts">
     import { onMount } from "svelte";
     import SvelteTable, { type TableColumn } from "svelte-table";
-
-    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;
-    }
+    import Row from "./Row";
+    import EditButtonComponent from "./EditButtonComponent.svelte";
+    import EditModal from "./EditModal.svelte";
+    import { fetchRows, addEntry } from "./bridge";
+    import { statusMessage } from "./store";
 
     let rows: Row[] = [];
     let columns: TableColumn<Row>[] = [
@@ -257,9 +246,17 @@
             filterValue: (v: Row) => (v.Tags.includes("ReachedOut") ? "Yes" : "No"),
             filterOptions: ["Yes", "No"],
         },
+        {
+            key: "Edit",
+            title: "",
+            value: (v: Row) => "",
+            sortable: false,
+            renderComponent: EditButtonComponent,
+            hideFilterHeader: true,
+        },
     ];
 
-    let selection = {};
+    let selection: Record<string | number, any> = {};
     let overrideSelection = false;
     let searchValue = "";
 
@@ -275,406 +272,44 @@
         }
     }
 
-    let statusMessage = "";
-    const baseURL = "https://dylanebert-research-tracker-backend.hf.space";
-    // const baseURL = "http://localhost:8000";
+    onMount(async () => {
+        rows = (await fetchRows()) || [];
+    });
 
-    const addEntry = async () => {
-        if (!("Name" in selection)) return;
-        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",
-                Authorization: "Bearer " + import.meta.env.VITE_HF_TOKEN,
-            },
-            body: JSON.stringify(row),
-        });
-        const data = await response.json();
-        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>`;
+    async function newEntry() {
+        const row = await addEntry(selection);
+        if (!row) return;
         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",
-                    Authorization: "Bearer " + import.meta.env.VITE_HF_TOKEN,
-                },
-                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",
-                    Authorization: "Bearer " + import.meta.env.VITE_HF_TOKEN,
-                },
-                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",
-                    Authorization: "Bearer " + import.meta.env.VITE_HF_TOKEN,
-                },
-                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;
-    };
-
-    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",
-                    Authorization: "Bearer " + import.meta.env.VITE_HF_TOKEN,
-                },
-                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",
-                    Authorization: "Bearer " + import.meta.env.VITE_HF_TOKEN,
-                },
-                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",
-                    Authorization: "Bearer " + import.meta.env.VITE_HF_TOKEN,
-                },
-                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",
-                    Authorization: "Bearer " + import.meta.env.VITE_HF_TOKEN,
-                },
-                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",
-                    Authorization: "Bearer " + import.meta.env.VITE_HF_TOKEN,
-                },
-                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;
+    function handleRowUpdated(event: Event) {
+        const updatedRow = (event as CustomEvent).detail;
+        const rowIndex = rows.findIndex(
+            (row) =>
+                row.Code === updatedRow.Code || row.Paper === updatedRow.Paper || row.Project === updatedRow.Project
+        );
+        if (rowIndex !== -1) {
+            rows[rowIndex] = updatedRow;
+        } else {
+            console.error("Row not found");
         }
-        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",
-                    Authorization: "Bearer " + import.meta.env.VITE_HF_TOKEN,
-                },
-                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;
+    function handleRowDeleted(event: Event) {
+        const deletedRow = (event as CustomEvent).detail;
+        const rowIndex = rows.findIndex(
+            (row) =>
+                row.Code === deletedRow.Code || row.Paper === deletedRow.Paper || row.Project === deletedRow.Project
+        );
+        if (rowIndex !== -1) {
+            rows = [...rows.slice(0, rowIndex), ...rows.slice(rowIndex + 1)];
+        } else {
+            console.error("Row not found");
         }
-        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;
-        statusMessage = `<span>Fetching data from https://dylanebert-research-tracker-backend.hf.space/data"</span>`;
-        try {
-            const response = await fetch(baseURL + "/data", {
-                method: "GET",
-                headers: {
-                    Authorization: "Bearer " + import.meta.env.VITE_HF_TOKEN,
-                    "Cache-Control": "no-cache",
-                },
-            });
-            rows = await response.json();
-            fetching = false;
-            statusMessage = "";
-        } catch (e) {
-            console.error(e);
-            statusMessage = `<span style="color: red;">Error: Failed to fetch data from https://dylanebert-research-tracker-backend.hf.space/data</span>`;
-        }
-    };
+    let isModalOpen = false;
 </script>
 
 {#if !import.meta.env.VITE_HF_TOKEN}
@@ -683,7 +318,7 @@
     </div>
 {:else if fetching}
     <div style="text-align: center; margin-top: 1rem;">
-        <p>{@html statusMessage}</p>
+        <p>{@html $statusMessage}</p>
     </div>
 {:else}
     <div style="text-align: center; margin-top: 1rem;">
@@ -693,11 +328,15 @@
             style="width: 100%; max-width: 512px;"
             bind:value={searchValue}
         />
-        <button on:click={addEntry}>New Entry</button>
+        <button on:click={newEntry}>New Entry</button>
     </div>
 
     {#if statusMessage}
-        <div style="text-align: center; margin-top: 0.5rem;">{@html statusMessage}</div>
+        <div style="text-align: center; margin-top: 0.5rem;">
+            {#if !isModalOpen}
+                {@html $statusMessage}
+            {/if}
+        </div>
     {/if}
 
     <!--spacer-->
@@ -705,3 +344,5 @@
 
     <SvelteTable {columns} {rows} bind:filterSelections={selection} />
 {/if}
+
+<EditModal bind:isOpen={isModalOpen} on:rowUpdated={handleRowUpdated} on:rowDeleted={handleRowDeleted} />

viewer/src/routes/EditButtonComponent.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+    import { editingRow } from "./store";
+    import Row from "./Row";
+
+    export let row: Row;
+    export let col;
+
+    let key = col.key;
+
+    function onEditButtonClick(row: Row) {
+        editingRow.set(row);
+    }
+</script>
+
+<button on:click={() => onEditButtonClick(row)}>{key}</button>

viewer/src/routes/EditModal.svelte

@@ -0,0 +1,235 @@
+<script lang="ts">
+    import { onDestroy, createEventDispatcher } from "svelte";
+    import { editingRow, statusMessage } from "./store";
+    import type Row from "./Row";
+    import { inferFields, editEntry, deleteEntry } from "./bridge";
+
+    const dispatch = createEventDispatcher();
+    let row: Row | null = null;
+
+    export let isOpen = false;
+
+    const unsubscribe = editingRow.subscribe((value: Row | null) => {
+        row = value;
+        isOpen = !!value;
+        if (!isOpen) {
+            statusMessage.reset();
+        }
+    });
+
+    async function saveEntry() {
+        if (!row) return;
+        statusMessage.set(`<span>Sending edit request to backend...</span>`);
+
+        const result = await editEntry(row);
+        if (!result) return;
+        dispatch("rowUpdated", row);
+    }
+
+    async function tryInfer() {
+        if (!row) return;
+        const result = await inferFields(row);
+        if (!result) return;
+        editingRow.set(result);
+    }
+
+    async function tryDelete() {
+        if (!row) return;
+        statusMessage.set(`<span style="color: red">Sending delete request to backend...</span>`);
+        const result = await deleteEntry(row);
+        if (!result) return;
+        dispatch("rowDeleted", row);
+        close();
+    }
+
+    function close() {
+        editingRow.set(null);
+    }
+
+    onDestroy(unsubscribe);
+</script>
+
+{#if $editingRow}
+    <div class="modal">
+        <button class="modal-backdrop" on:click={close} />
+        <div class="modal-content">
+            <button class="close-button" on:click={close}> &times; </button>
+            <h2>Edit Entry</h2>
+            <div class="button-group">
+                <button class="delete-button" on:click={tryDelete}>Delete Entry</button>
+            </div>
+            {#if row}
+                <div class="input-group">
+                    <label for="name">Name</label>
+                    <input id="name" bind:value={row.Name} />
+                </div>
+                <div class="input-group">
+                    <label for="date">Date</label>
+                    <input id="date" bind:value={row.Date} />
+                </div>
+                <div class="input-group">
+                    <label for="orgs">Orgs</label>
+                    <input id="orgs" bind:value={row.Orgs} />
+                </div>
+                <div class="input-group">
+                    <label for="authors">Authors</label>
+                    <input id="authors" bind:value={row.Authors} />
+                </div>
+                <div class="input-group">
+                    <label for="paper">Paper</label>
+                    <input id="paper" bind:value={row.Paper} />
+                </div>
+                <div class="input-group">
+                    <label for="code">Code</label>
+                    <input id="code" bind:value={row.Code} />
+                </div>
+                <div class="input-group">
+                    <label for="project">Project</label>
+                    <input id="project" bind:value={row.Project} />
+                </div>
+                <div class="input-group">
+                    <label for="space">Space</label>
+                    <input id="space" bind:value={row.Space} />
+                </div>
+                <div class="input-group">
+                    <label for="model">Model</label>
+                    <input id="model" bind:value={row.Model} />
+                </div>
+                <div class="input-group">
+                    <label for="dataset">Dataset</label>
+                    <input id="dataset" bind:value={row.Dataset} />
+                </div>
+                <div class="input-group">
+                    <label for="license">License</label>
+                    <input id="license" bind:value={row.License} />
+                </div>
+                <div class="input-group">
+                    <label for="code-status">Code Status</label>
+                    <input id="code-status" bind:value={row.CodeStatus} />
+                </div>
+                <div class="input-group">
+                    <label for="tags">Tags</label>
+                    <input id="tags" bind:value={row.Tags} />
+                </div>
+            {/if}
+            <div class="button-group">
+                <button class="infer-button" on:click={tryInfer}>Infer Fields</button>
+                <button class="save-button" on:click={saveEntry}>Save</button>
+            </div>
+            <div class="status">
+                <span>{@html $statusMessage}</span>
+            </div>
+        </div>
+    </div>
+{/if}
+
+<style>
+    .modal {
+        position: fixed;
+        top: 0;
+        left: 0;
+        z-index: 1000;
+        width: 100%;
+        height: 100%;
+        background-color: rgba(0, 0, 0, 0.5);
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+
+    .modal-backdrop {
+        position: absolute;
+        top: 0;
+        left: 0;
+        z-index: -1;
+        width: 100%;
+        height: 100%;
+        background-color: transparent;
+        border: none;
+    }
+
+    .modal-content {
+        position: relative;
+        background-color: white;
+        padding: 20px;
+        border-radius: 5px;
+        width: 50%;
+        max-width: 768px;
+    }
+
+    .modal-content h2 {
+        margin: 0;
+        margin-bottom: 10px;
+    }
+
+    .input-group {
+        display: flex;
+        justify-content: space-between;
+        margin-bottom: 10px;
+    }
+
+    .input-group label {
+        flex: 1;
+        margin-right: 10px;
+    }
+
+    .input-group input {
+        flex: 2;
+    }
+
+    .modal-content input {
+        width: 100%;
+    }
+
+    .close-button {
+        position: absolute;
+        top: 10px;
+        right: 10px;
+        background: none;
+        border: none;
+        font-size: 1.5em;
+        cursor: pointer;
+    }
+
+    .button-group {
+        margin: 10px 0;
+        width: 100%;
+        display: flex;
+        justify-content: left;
+    }
+
+    .infer-button {
+        background-color: rgb(68, 127, 215);
+        color: white;
+        border: none;
+        padding: 5px 10px;
+        border-radius: 5px;
+        cursor: pointer;
+        flex: 1;
+    }
+
+    .save-button {
+        background-color: #53c457;
+        color: white;
+        border: none;
+        padding: 5px 10px;
+        border-radius: 5px;
+        cursor: pointer;
+        flex: 1;
+    }
+
+    .delete-button {
+        background-color: rgb(248, 39, 39);
+        color: white;
+        border: none;
+        padding: 5px 10px;
+        border-radius: 5px;
+        cursor: pointer;
+    }
+
+    .status {
+        width: 100%;
+        text-align: center;
+        margin: 10px 0;
+    }
+</style>

viewer/src/routes/Row.ts

@@ -0,0 +1,17 @@
+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;
+}
+
+export default Row;

viewer/src/routes/bridge.ts

@@ -0,0 +1,463 @@
+import Row from "./Row";
+import { statusMessage } from "./store";
+
+// const baseURL = "https://dylanebert-research-tracker-backend.hf.space";
+const baseURL = "http://localhost:8000";
+
+export const fetchRows = async (): Promise<Row[] | null> => {
+    statusMessage.set(`<span>Fetching data from https://dylanebert-research-tracker-backend.hf.space/data</span>`);
+    try {
+        const response = await fetch(baseURL + "/data", {
+            method: "GET",
+            headers: {
+                Authorization: "Bearer " + import.meta.env.VITE_HF_TOKEN,
+                "Cache-Control": "no-cache",
+            },
+        });
+        const rows = await response.json();
+        statusMessage.reset();
+        return rows;
+    } catch (e) {
+        console.error(e);
+        statusMessage.set(
+            `<span style="color: red;">Error: Failed to fetch data from https://dylanebert-research-tracker-backend.hf.space/data</span>`
+        );
+        return null;
+    }
+};
+
+export const addEntry = async (selection: Record<string | number, any>): Promise<Row | null> => {
+    if (!("Name" in selection)) return null;
+    const value = selection["Name"] as string;
+    let row: Row | null = new Row();
+    const field = await inferFieldType(row, value);
+    if (!field) return null;
+    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.set(`<span style="color: red;">Error: Failed to infer field type for <b>${value}</b></span>`);
+        return null;
+    }
+    row = await inferFields(row);
+    if (!row) {
+        return null;
+    }
+    const response = await fetch(baseURL + "/add-entry", {
+        method: "POST",
+        headers: {
+            "Content-Type": "application/json",
+            Authorization: "Bearer " + import.meta.env.VITE_HF_TOKEN,
+        },
+        body: JSON.stringify(row),
+    });
+    const data = await response.json();
+    if (data.error || !data.success) {
+        if (data.error) {
+            statusMessage.append(`<br><span style="color: red;">Error: ${data.error}</span>`);
+        } else {
+            statusMessage.append(`<br><span style="color: red;">Error: Failed to add entry</span>`);
+        }
+        return null;
+    }
+    statusMessage.append(`<br><span style="color: green;">Added entry for "${row.Name}"</span>`);
+
+    return row;
+};
+
+export const editEntry = async (row: Row): Promise<Row | null> => {
+    row.Orgs = Array.isArray(row.Orgs) ? row.Orgs : (row.Orgs as any).split(",").map((org: string) => org.trim());
+    row.Authors = Array.isArray(row.Authors)
+        ? row.Authors
+        : (row.Authors as any).split(",").map((author: string) => author.trim());
+    row.Tags = Array.isArray(row.Tags) ? row.Tags : (row.Tags as any).split(",").map((tag: string) => tag.trim());
+    const response = await fetch(baseURL + "/edit-entry", {
+        method: "POST",
+        headers: {
+            "Content-Type": "application/json",
+            Authorization: "Bearer " + import.meta.env.VITE_HF_TOKEN,
+        },
+        body: JSON.stringify(row),
+    });
+    const data = await response.json();
+    if (data.error || !data.success) {
+        if (data.error) {
+            statusMessage.append(`<br><span style="color: red;">Error: ${data.error}</span>`);
+        } else {
+            statusMessage.append(`<br><span style="color: red;">Error: Failed to edit entry</span>`);
+        }
+        return null;
+    }
+    statusMessage.append(`<br><span style="color: green;">Edited entry for "${row.Name}"</span>`);
+    return row;
+};
+
+export const deleteEntry = async (row: Row): Promise<Row | null> => {
+    row.Orgs = Array.isArray(row.Orgs) ? row.Orgs : (row.Orgs as any).split(",").map((org: string) => org.trim());
+    row.Authors = Array.isArray(row.Authors)
+        ? row.Authors
+        : (row.Authors as any).split(",").map((author: string) => author.trim());
+    row.Tags = Array.isArray(row.Tags) ? row.Tags : (row.Tags as any).split(",").map((tag: string) => tag.trim());
+    const response = await fetch(baseURL + "/delete-entry", {
+        method: "POST",
+        headers: {
+            "Content-Type": "application/json",
+            Authorization: "Bearer " + import.meta.env.VITE_HF_TOKEN,
+        },
+        body: JSON.stringify(row),
+    });
+    const data = await response.json();
+    if (data.error || !data.success) {
+        if (data.error) {
+            statusMessage.append(`<br><span style="color: red;">Error: ${data.error}</span>`);
+        } else {
+            statusMessage.append(`<br><span style="color: red;">Error: Failed to delete entry</span>`);
+        }
+        return null;
+    }
+    statusMessage.append(`<br><span style="color: green;">Deleted entry for "${row.Name}"</span>`);
+    return row;
+};
+
+export const inferFields = async (row: Row): Promise<Row | null> => {
+    const key = row.Name || row.Paper || row.Code || row.Space || row.Model || row.Dataset || row.Project;
+    statusMessage.set(`<span>Inferring fields for <b>${key}</b></span>`);
+    const paper = row.Paper || (await inferPaper(row));
+    const code = row.Code || (await inferCode(row));
+    const name = row.Name || (await inferName(row));
+    if (!name) {
+        return null;
+    }
+    row.Name = name;
+    const authors = row.Authors.length == 0 ? await inferAuthors(row) : row.Authors;
+    const orgs = row.Orgs.length == 0 ? await inferOrgs(row) : row.Orgs;
+    const date = row.Date || (await inferDate(row));
+    const model = row.Model || (await inferModel(row));
+    const dataset = row.Dataset || (await inferDataset(row));
+    if (paper) {
+        row.Paper = paper;
+    }
+    if (code) {
+        row.Code = code;
+    }
+    if (authors) {
+        row.Authors = Array.isArray(authors) ? authors : authors.split(",").map((author: string) => author.trim());
+    }
+    if (orgs) {
+        row.Orgs = Array.isArray(orgs) ? orgs : orgs.split(",").map((org: string) => org.trim());
+    }
+    if (date) {
+        row.Date = date;
+    }
+    if (model) {
+        row.Model = model;
+    }
+    if (dataset) {
+        row.Dataset = dataset;
+    }
+    statusMessage.append(`<br><span style="color: green;">Finished inferring fields for <b>${row.Name}</b></span>`);
+    return row;
+};
+
+const inferFieldType = 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",
+                Authorization: "Bearer " + import.meta.env.VITE_HF_TOKEN,
+            },
+            body: JSON.stringify({ value }),
+        });
+        data = await response.json();
+    } catch (e) {
+        statusMessage.append(
+            `<br><span style="color: red;">Error: Failed to infer field type for <b>${value}</b></span>`
+        );
+        return null;
+    }
+    if (data.error || !data.field || !(data.field in row)) {
+        statusMessage.set(`<span style="color: red;">Error: Failed to infer field type for <b>${value}</b></span>`);
+        return null;
+    }
+    statusMessage.set(`<span style="color: green;">Inferred field type: ${data.field}</span>`);
+    return data.field;
+};
+
+const inferPaper = async (row: Row) => {
+    statusMessage.append(`<br><span>Inferring paper...</span>`);
+    let data;
+    try {
+        const response = await fetch(baseURL + "/infer-paper", {
+            method: "POST",
+            headers: {
+                "Content-Type": "application/json",
+                Authorization: "Bearer " + import.meta.env.VITE_HF_TOKEN,
+            },
+            body: JSON.stringify(row),
+        });
+        data = await response.json();
+    } catch (e) {
+        statusMessage.remove("<br><span>Inferring paper...</span>");
+        statusMessage.append(`<br><span style="color: red;">Error: Failed to infer paper</span>`);
+        return null;
+    }
+    statusMessage.remove("<br><span>Inferring paper...</span>");
+    if (data.error || !data.paper) {
+        if (data.error) {
+            statusMessage.append(`<br><span style="color: red;">Error: ${data.error}</span>`);
+        } else if (data.message) {
+            statusMessage.append(`<br><span>${data.message}</span>`);
+        } else {
+            statusMessage.append(`<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.append(`<br><span style="color: green;">Inferred paper: ${link}</span>`);
+    return data.paper;
+};
+
+const inferCode = async (row: Row) => {
+    statusMessage.append(`<br><span>Inferring code...</span>`);
+    let data;
+    try {
+        const response = await fetch(baseURL + "/infer-code", {
+            method: "POST",
+            headers: {
+                "Content-Type": "application/json",
+                Authorization: "Bearer " + import.meta.env.VITE_HF_TOKEN,
+            },
+            body: JSON.stringify(row),
+        });
+        data = await response.json();
+    } catch (e) {
+        statusMessage.remove("<br><span>Inferring code...</span>");
+        statusMessage.append(`<br><span style="color: red;">Error: Failed to infer code</span>`);
+        return null;
+    }
+    statusMessage.remove("<br><span>Inferring code...</span>");
+    if (data.error || !data.code) {
+        if (data.error) {
+            statusMessage.append(`<br><span style="color: red;">Error: ${data.error}</span>`);
+        } else if (data.message) {
+            statusMessage.append(`<br><span>${data.message}</span>`);
+        } else {
+            statusMessage.append(`<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.append(`<br><span style="color: green;">Inferred code: ${link}</span>`);
+    return data.code;
+};
+
+const inferName = async (row: Row) => {
+    statusMessage.append(`<br><span>Inferring name...</span>`);
+    let data;
+    try {
+        const response = await fetch(baseURL + "/infer-name", {
+            method: "POST",
+            headers: {
+                "Content-Type": "application/json",
+                Authorization: "Bearer " + import.meta.env.VITE_HF_TOKEN,
+            },
+            body: JSON.stringify(row),
+        });
+        data = await response.json();
+    } catch (e) {
+        statusMessage.remove("<br><span>Inferring name...</span>");
+        statusMessage.append(`<br><span style="color: red;">Error: Failed to infer name</span>`);
+        return null;
+    }
+    statusMessage.remove("<br><span>Inferring name...</span>");
+    if (data.error || !data.name) {
+        if (data.error) {
+            statusMessage.append(`<br><span style="color: red;">Error: ${data.error}</span>`);
+        } else if (data.message) {
+            statusMessage.append(`<br><span style="color: red;">Error: ${data.message}</span>`);
+        } else {
+            statusMessage.append(`<br><span style="color: red;">Error: Failed to infer name</span>`);
+        }
+        return null;
+    }
+    statusMessage.append(`<br><span style="color: green;">Inferred name: <b>${data.name}</b></span>`);
+    return data.name;
+};
+
+const inferAuthors = async (row: Row) => {
+    statusMessage.append(`<br><span>Inferring authors...</span>`);
+    let data;
+    try {
+        const response = await fetch(baseURL + "/infer-authors", {
+            method: "POST",
+            headers: {
+                "Content-Type": "application/json",
+                Authorization: "Bearer " + import.meta.env.VITE_HF_TOKEN,
+            },
+            body: JSON.stringify(row),
+        });
+        data = await response.json();
+    } catch (e) {
+        statusMessage.remove("<br><span>Inferring authors...</span>");
+        statusMessage.append(`<br><span style="color: red;">Error: Failed to infer authors</span>`);
+        return null;
+    }
+    statusMessage.remove("<br><span>Inferring authors...</span>");
+    if (data.error || !data.authors) {
+        if (data.error) {
+            statusMessage.append(`<br><span style="color: red;">Error: ${data.error}</span>`);
+        } else if (data.message) {
+            statusMessage.append(`<br><span>${data.message}</span>`);
+        } else {
+            statusMessage.append(`<br><span style="color: red;">Error: Failed to infer authors</span>`);
+        }
+        return null;
+    }
+    statusMessage.append(`<br><span style="color: green;">Inferred authors: ${data.authors}</span>`);
+    return data.authors;
+};
+
+const inferOrgs = async (row: Row) => {
+    statusMessage.append(`<br><span>Inferring orgs...</span>`);
+    let data;
+    try {
+        const response = await fetch(baseURL + "/infer-orgs", {
+            method: "POST",
+            headers: {
+                "Content-Type": "application/json",
+                Authorization: "Bearer " + import.meta.env.VITE_HF_TOKEN,
+            },
+            body: JSON.stringify(row),
+        });
+        data = await response.json();
+    } catch (e) {
+        statusMessage.remove("<br><span>Inferring orgs...</span>");
+        statusMessage.append(`<br><span style="color: red;">Error: Failed to infer orgs</span>`);
+        return null;
+    }
+    statusMessage.remove("<br><span>Inferring orgs...</span>");
+    if (data.error || !data.orgs) {
+        if (data.error) {
+            statusMessage.append(`<br><span style="color: red;">Error: ${data.error}</span>`);
+        } else if (data.message) {
+            statusMessage.append(`<br><span>${data.message}</span>`);
+        } else {
+            statusMessage.append(`<br><span style="color: red;">Error: Failed to infer orgs</span>`);
+        }
+        return null;
+    }
+    statusMessage.append(`<br><span style="color: green;">Inferred orgs: ${data.orgs}</span>`);
+    return data.orgs;
+};
+
+const inferDate = async (row: Row) => {
+    statusMessage.append(`<br><span>Inferring date...</span>`);
+    let data;
+    try {
+        const response = await fetch(baseURL + "/infer-date", {
+            method: "POST",
+            headers: {
+                "Content-Type": "application/json",
+                Authorization: "Bearer " + import.meta.env.VITE_HF_TOKEN,
+            },
+            body: JSON.stringify(row),
+        });
+        data = await response.json();
+    } catch (e) {
+        statusMessage.remove("<br><span>Inferring date...</span>");
+        statusMessage.append(`<br><span style="color: red;">Error: Failed to infer date</span>`);
+        return null;
+    }
+    statusMessage.remove("<br><span>Inferring date...</span>");
+    if (data.error || !data.date) {
+        if (data.error) {
+            statusMessage.append(`<br><span style="color: red;">Error: ${data.error}</span>`);
+        } else if (data.message) {
+            statusMessage.append(`<br><span>${data.message}</span>`);
+        } else {
+            statusMessage.append(`<br><span style="color: red;">Error: Failed to infer date</span>`);
+        }
+        return null;
+    }
+    statusMessage.append(`<br><span style="color: green;">Inferred date: ${data.date}</span>`);
+    return data.date;
+};
+
+const inferModel = async (row: Row) => {
+    statusMessage.append(`<br><span>Inferring model...</span>`);
+    let data;
+    try {
+        const response = await fetch(baseURL + "/infer-model", {
+            method: "POST",
+            headers: {
+                "Content-Type": "application/json",
+                Authorization: "Bearer " + import.meta.env.VITE_HF_TOKEN,
+            },
+            body: JSON.stringify(row),
+        });
+        data = await response.json();
+    } catch (e) {
+        statusMessage.remove("<br><span>Inferring model...</span>");
+        statusMessage.append(`<br><span style="color: red;">Error: Failed to infer model</span>`);
+        return null;
+    }
+    statusMessage.remove("<br><span>Inferring model...</span>");
+    if (data.error || !data.model) {
+        if (data.error) {
+            statusMessage.append(`<br><span style="color: red;">Error: ${data.error}</span>`);
+        } else if (data.message) {
+            statusMessage.append(`<br><span>${data.message}</span>`);
+        } else {
+            statusMessage.append(`<br><span style="color: red;">Error: Failed to infer model</span>`);
+        }
+        return null;
+    }
+    statusMessage.append(`<br><span style="color: green;">Inferred model: ${data.model}</span>`);
+    return data.model;
+};
+
+const inferDataset = async (row: Row) => {
+    statusMessage.append(`<br><span>Inferring dataset...</span>`);
+    let data;
+    try {
+        const response = await fetch(baseURL + "/infer-dataset", {
+            method: "POST",
+            headers: {
+                "Content-Type": "application/json",
+                Authorization: "Bearer " + import.meta.env.VITE_HF_TOKEN,
+            },
+            body: JSON.stringify(row),
+        });
+        data = await response.json();
+    } catch (e) {
+        statusMessage.remove("<br><span>Inferring dataset...</span>");
+        statusMessage.append(`<br><span style="color: red;">Error: Failed to infer dataset</span>`);
+        return null;
+    }
+    statusMessage.remove("<br><span>Inferring dataset...</span>");
+    if (data.error || !data.dataset) {
+        if (data.error) {
+            statusMessage.append(`<br><span style="color: red;">Error: ${data.error}</span>`);
+        } else if (data.message) {
+            statusMessage.append(`<br><span>${data.message}</span>`);
+        } else {
+            statusMessage.append(`<br><span style="color: red;">Error: Failed to infer dataset</span>`);
+        }
+        return null;
+    }
+    statusMessage.append(`<br><span style="color: green;">Inferred dataset: ${data.dataset}</span>`);
+    return data.dataset;
+};

viewer/src/routes/store.ts

@@ -0,0 +1,17 @@
+import { writable } from "svelte/store";
+import type Row from "./Row";
+
+export const editingRow = writable<Row | null>(null);
+export const statusMessage = createStatusStore();
+
+function createStatusStore() {
+    const { subscribe, set, update } = writable("");
+
+    return {
+        subscribe,
+        set,
+        append: (value: string) => update((n) => n + value),
+        remove: (value: string) => update((n) => n.split(value)[0]),
+        reset: () => set(""),
+    };
+}