elements, preserving single line + breaks inside a paragraph via white-space:pre-wrap. */ +function multiline(text) { + const wrap = el("div", { class: "resume-block" }); + const blocks = String(text || "").split(/\n{2,}/); + blocks.forEach(b => { + if (!b.trim()) return; + wrap.appendChild(el("p", { style: "white-space:pre-wrap;", text: b })); + }); + if (!wrap.childNodes.length) wrap.appendChild(el("p", { class: "muted" }, "Ingen tekst.")); + return wrap; +} + +/* Trigger a real download of the version's JSON via a Blob + object URL. */ +function downloadVersion(assistant, version) { + const data = JSON.stringify(version.json, null, 2); + const blob = new Blob([data], { type: "application/json" }); + const url = URL.createObjectURL(blob); + const slug = (version.json?.id || assistant.id || "assistant").replace(/[^a-z0-9-]+/gi, "-"); + const a = document.createElement("a"); + a.href = url; + a.download = `${slug}-v${version.version}.json`; + document.body.appendChild(a); + a.click(); + a.remove(); + setTimeout(() => URL.revokeObjectURL(url), 1000); + toast(`Eksporterede ${slug}-v${version.version}.json`); +} + +function appendMeta(dl, label, value) { + if (!value) return; + dl.appendChild(el("dt", {}, label)); + dl.appendChild(el("dd", { text: value })); +} + +async function openAddToCollection(assistant) { + const { showAddToCollectionModal } = await import("./_collection-modal.js"); + showAddToCollectionModal(assistant); +} diff --git a/docs/public/projects/ai-bibliotek/mocks/js/views/favorites.js b/docs/public/projects/ai-bibliotek/mocks/js/views/favorites.js new file mode 100644 index 0000000..9062f3c --- /dev/null +++ b/docs/public/projects/ai-bibliotek/mocks/js/views/favorites.js @@ -0,0 +1,35 @@ +import { el, clear, navigate } from "../util.js"; +import { auth } from "../auth.js"; +import { store } from "../store.js"; +import { getAssistant } from "../catalog.js"; +import { renderAssistantCard } from "./_assistant-card.js"; + +export function render(root) { + const user = auth.currentUser(); + if (!user) { navigate("#/login"); return; } + clear(root); + + function paint() { + clear(root); + root.appendChild(el("h1", {}, "Mine favoritter")); + const favs = store.favoritesForUser(user.id); + const assistants = favs.map(f => getAssistant(f.assistantId)).filter(Boolean); + + if (!assistants.length) { + root.appendChild(el("div", { class: "empty card" }, [ + el("h2", {}, "Du har ingen favoritter endnu"), + el("p", { class: "muted" }, "Marker en assistent med hjertet for at gemme den her."), + el("a", { class: "btn", href: "#/search" }, "Find assistenter") + ])); + return; + } + + const list = el("div", { class: "results-list" }); + assistants.forEach(a => list.appendChild(renderAssistantCard(a, { + onFavoriteChange: (isFav) => { if (!isFav) paint(); } + }))); + root.appendChild(list); + } + + paint(); +} diff --git a/docs/public/projects/ai-bibliotek/mocks/js/views/home.js b/docs/public/projects/ai-bibliotek/mocks/js/views/home.js new file mode 100644 index 0000000..bba2e48 --- /dev/null +++ b/docs/public/projects/ai-bibliotek/mocks/js/views/home.js @@ -0,0 +1,153 @@ +import { el, clear, navigate, escapeHtml } from "../util.js"; +import { getAllAssistants } from "../catalog.js"; +import { iconHtml } from "../icons.js"; + +/* Future features teased on the home page but not wired to real routes. */ +const COMING_SOON = [ + "Deling af tools", + "Deling af skills", + "Ratings", + "API", + "Abonnér på ændringer", + "Testcases" +]; + +export function render(root) { + clear(root); + + const all = getAllAssistants(); + const kommuneCount = new Set(all.map(a => a.originKommune)).size; + const modelCount = new Set(all.map(a => a.languageModel)).size; + + const searchBlock = el("section", { class: "home-search", "aria-label": "Søg i kataloget" }, [ + el("p", { class: "eyebrow" }, "Find en assistent"), + el("form", { + class: "home-search-form", + role: "search", + onsubmit: (e) => { + e.preventDefault(); + const q = new FormData(e.target).get("q") || ""; + navigate(`#/search?q=${encodeURIComponent(q.trim())}`); + } + }, [ + el("input", { + type: "search", + name: "q", + placeholder: "Søg efter borgerservice, referat, journalisering…", + "aria-label": "Søg" + }), + el("button", { class: "btn", type: "submit" }, "Søg") + ]) + ]); + + const hero = el("section", { class: "hero" }, [ + el("p", { class: "eyebrow" }, "Del & hjemtag · dansk offentlig AI"), + el("h1", { class: "hero-title" }, [ + "Et fælles bibliotek over ", + el("em", {}, "kommunale"), + " AI-assistenter." + ]), + el("p", { class: "lede" }, + "Find, del og hjemtag AI-assistenter bygget af danske myndigheder. Når én kommune løser en opgave, kan resten hjemtage assistenten, eksportere konfigurationen og køre den lokalt — så gode løsninger skalerer nationalt."), + + el("dl", { class: "hero-stats" }, [ + el("div", {}, [ + el("dt", {}, "Assistenter"), + el("dd", {}, String(all.length)) + ]), + el("div", {}, [ + el("dt", {}, "Kommuner"), + el("dd", {}, String(kommuneCount)) + ]), + el("div", {}, [ + el("dt", {}, "Sprogmodeller"), + el("dd", {}, String(modelCount)) + ]) + ]) + ]); + + const recent = [...all] + .sort((a, b) => new Date(b.updatedAt) - new Date(a.updatedAt)) + .slice(0, 8); + + const railEl = el("div", { class: "recent-rail" }, + recent.map(a => renderRailCard(a)) + ); + + function scrollRail(direction) { + const firstCard = railEl.querySelector(".rail-card"); + const step = firstCard ? firstCard.getBoundingClientRect().width + 16 : 320; + railEl.scrollBy({ left: direction * step, behavior: "smooth" }); + } + + const prevBtn = el("button", { + class: "rail-nav rail-nav-prev", + type: "button", + "aria-label": "Forrige", + onclick: () => scrollRail(-1), + html: iconHtml("arrowLeft", { size: 18 }) + }); + const nextBtn = el("button", { + class: "rail-nav rail-nav-next", + type: "button", + "aria-label": "Næste", + onclick: () => scrollRail(1), + html: iconHtml("arrowRight", { size: 18 }) + }); + + const rail = el("section", { class: "recent-section" }, [ + el("div", { class: "section-head" }, [ + el("p", { class: "eyebrow" }, "Senest opdateret"), + el("a", { class: "section-link", href: "#/search" }, "Se hele kataloget →") + ]), + el("div", { class: "recent-rail-wrap" }, [ + railEl, + el("div", { class: "rail-nav-bar" }, [prevBtn, nextBtn]) + ]) + ]); + + const aboutSection = el("section", { class: "card mt-5 how-it-works" }, [ + el("p", { class: "eyebrow" }, "Sådan virker det"), + el("ol", { class: "steps-list" }, [ + el("li", {}, el("span", { class: "step-body" }, [el("strong", {}, "Opret bruger"), " og log ind som repræsentant for din myndighed."])), + el("li", {}, el("span", { class: "step-body" }, [el("strong", {}, "Find en assistent"), " – søg og filtrér på kommune, sprogmodel og datafølsomhed."])), + el("li", {}, el("span", { class: "step-body" }, [el("strong", {}, "Hjemtag"), " – eksportér assistentens JSON og følg vidensopskriften, der beskriver hvilke data du selv skal levere."])), + el("li", {}, el("span", { class: "step-body" }, [el("strong", {}, "Tilpas lokalt"), " – importér i din egen OpenWebUI, tilføj kommunens viden og tag den i brug."])) + ]) + ]); + + const comingSoon = el("section", { class: "card mt-5" }, [ + el("p", { class: "eyebrow" }, "Kommer snart"), + el("p", { class: "muted", style: "margin:4px 0 0;" }, + "Funktioner vi arbejder på til kommende versioner. De er ikke aktive endnu."), + el("div", { class: "coming-soon-grid", "aria-label": "Kommende funktioner" }, + COMING_SOON.map(label => el("span", { + class: "coming-soon-chip", + "aria-disabled": "true", + title: "Kommer snart" + }, [label, el("span", { class: "cs-tag" }, "snart")])) + ) + ]); + + root.appendChild(hero); + root.appendChild(searchBlock); + root.appendChild(rail); + root.appendChild(aboutSection); + root.appendChild(comingSoon); +} + +function renderRailCard(a) { + return el("a", { + class: "rail-card", + href: `#/assistant/${a.id}` + }, [ + el("span", { class: "rail-meta" }, `${a.originKommune} · ${a.languageModel}`), + el("span", { class: "rail-title", html: escapeHtml(a.name) }), + el("span", { class: "rail-summary", text: trim(a.description, 110) }) + ]); +} + +function trim(s, n) { + if (!s) return ""; + return s.length > n ? s.slice(0, n - 1) + "…" : s; +} diff --git a/docs/public/projects/ai-bibliotek/mocks/js/views/login.js b/docs/public/projects/ai-bibliotek/mocks/js/views/login.js new file mode 100644 index 0000000..93a3c69 --- /dev/null +++ b/docs/public/projects/ai-bibliotek/mocks/js/views/login.js @@ -0,0 +1,122 @@ +import { el, clear, navigate, toast } from "../util.js"; +import { auth, DEMO_USERS } from "../auth.js"; + +export function render(root, query = {}) { + clear(root); + + let mode = query.mode === "register" ? "register" : "login"; + + const card = el("section", { class: "card auth-card" }); + + function paint() { + clear(card); + const tabs = el("div", { class: "auth-tabs" }, [ + el("button", { + class: mode === "login" ? "is-active" : "", + onclick: () => { mode = "login"; paint(); } + }, "Log ind"), + el("button", { + class: mode === "register" ? "is-active" : "", + onclick: () => { mode = "register"; paint(); } + }, "Opret bruger") + ]); + card.appendChild(tabs); + + if (mode === "login") { + const form = loginForm(); + card.appendChild(form); + card.appendChild(demoUsersBox(form)); + } else { + card.appendChild(registerForm()); + } + } + + paint(); + root.appendChild(card); +} + +function loginForm() { + return el("form", { + class: "form-grid", + onsubmit: (e) => { + e.preventDefault(); + const data = Object.fromEntries(new FormData(e.target)); + try { + const user = auth.login(data); + toast(`Velkommen tilbage, ${user.name}`); + navigate("#/"); + } catch (err) { + toast(err.message); + } + } + }, [ + el("label", { class: "field" }, [ + "E-mail", + el("input", { type: "email", name: "email", required: true, autocomplete: "email" }) + ]), + el("label", { class: "field" }, [ + "Adgangskode", + el("input", { type: "password", name: "password", required: true, autocomplete: "current-password" }) + ]), + el("button", { class: "btn", type: "submit" }, "Log ind") + ]); +} + +/* Prototype-only: ready-made logins. Clicking one fills the form fields. */ +function demoUsersBox(form) { + const fill = (email, password) => { + form.querySelector('input[name="email"]').value = email; + form.querySelector('input[name="password"]').value = password; + }; + + return el("div", { class: "demo-users" }, [ + el("p", { class: "demo-users-head" }, "Prototype – prøv med en testbruger"), + ...DEMO_USERS.map(d => + el("button", { + type: "button", + class: "demo-user", + onclick: () => fill(d.email, d.password) + }, [ + el("span", { class: "demo-user-name" }, `${d.name} · ${d.organization}`), + el("span", { class: "demo-user-cred" }, `${d.email} / ${d.password}`) + ]) + ), + el("p", { class: "hint demo-users-foot" }, "Klik en bruger for at udfylde felterne.") + ]); +} + +function registerForm() { + return el("form", { + class: "form-grid", + onsubmit: (e) => { + e.preventDefault(); + const data = Object.fromEntries(new FormData(e.target)); + try { + const user = auth.register(data); + toast(`Velkommen, ${user.name}`); + navigate("#/"); + } catch (err) { + toast(err.message); + } + } + }, [ + el("label", { class: "field" }, [ + "Navn", + el("input", { type: "text", name: "name", required: true, autocomplete: "name" }) + ]), + el("label", { class: "field" }, [ + "Myndighed eller organisation", + el("input", { type: "text", name: "organization", placeholder: "f.eks. Aarhus Kommune", autocomplete: "organization" }) + ]), + el("label", { class: "field" }, [ + "E-mail", + el("input", { type: "email", name: "email", required: true, autocomplete: "email" }) + ]), + el("label", { class: "field" }, [ + "Adgangskode", + el("input", { type: "password", name: "password", required: true, minlength: 4, autocomplete: "new-password" }), + el("span", { class: "hint" }, "Mindst 4 tegn. Prototype – brug ikke en rigtig adgangskode.") + ]), + el("button", { class: "btn", type: "submit" }, "Opret bruger") + ]); +} diff --git a/docs/public/projects/ai-bibliotek/mocks/js/views/search.js b/docs/public/projects/ai-bibliotek/mocks/js/views/search.js new file mode 100644 index 0000000..2a6c7ad --- /dev/null +++ b/docs/public/projects/ai-bibliotek/mocks/js/views/search.js @@ -0,0 +1,246 @@ +import { el, clear } from "../util.js"; +import { searchAssistants, buildFacets, getAllAssistants, FRAMEWORK_LABEL } from "../catalog.js"; +import { renderAssistantCard } from "./_assistant-card.js"; + +const SENSITIVITY_LABEL = { + almindelige: "Almindelige personoplysninger", + fortrolige: "Fortrolige data", + personfoelsomme: "Personfølsomme data" +}; + +const RECENT_KEY = "ab:recent-searches"; +const FACET_OPEN_KEY = "ab:facet-open"; +const FACET_DEFAULT_OPEN = new Set(["Kommune", "Sprogmodel"]); + +function loadFacetOpen() { + try { return new Set(JSON.parse(localStorage.getItem(FACET_OPEN_KEY) || "null") || FACET_DEFAULT_OPEN); } + catch { return new Set(FACET_DEFAULT_OPEN); } +} +function persistFacetOpen(set) { + localStorage.setItem(FACET_OPEN_KEY, JSON.stringify([...set])); +} + +function loadRecentSearches() { + try { return JSON.parse(localStorage.getItem(RECENT_KEY) || "[]"); } catch { return []; } +} +function pushRecentSearch(q) { + if (!q) return; + const list = loadRecentSearches().filter(x => x !== q); + list.unshift(q); + localStorage.setItem(RECENT_KEY, JSON.stringify(list.slice(0, 6))); +} + +export function render(root, query = {}) { + clear(root); + + const state = { + q: query.q || "", + kommuner: new Set(), + languageModels: new Set(), + frameworks: new Set(), + sensitivities: new Set() + }; + + if (state.q) pushRecentSearch(state.q); + + const openFacets = loadFacetOpen(); + const layout = el("div", { class: "search-layout" }); + const aside = el("aside", { class: "facet-aside", "aria-label": "Filtre" }); + const main = el("div", { style: "min-width: 0;" }); + const context = el("div", { class: "context-rail" }); + layout.appendChild(aside); + layout.appendChild(main); + layout.appendChild(context); + root.appendChild(layout); + + function update() { + const results = searchAssistants(state); + const facets = buildFacets(getAllAssistants()); + + renderAside(); + renderMain(results); + renderContext(results); + syncUrl(); + + function renderAside() { + clear(aside); + aside.appendChild(el("h3", { style: "margin-top:0;" }, "Filtre")); + + aside.appendChild(facetGroup("Kommune", facets.kommuner, state.kommuner)); + aside.appendChild(facetGroup("Sprogmodel", facets.languageModels, state.languageModels)); + aside.appendChild(facetGroup("Rammeværk", facets.frameworks, state.frameworks, (k) => FRAMEWORK_LABEL[k] || k)); + aside.appendChild(facetGroup("Datafølsomhed", facets.sensitivities, state.sensitivities, (k) => SENSITIVITY_LABEL[k] || k)); + + if (anyFilter()) { + aside.appendChild(el("button", { + class: "btn btn-secondary btn-sm mt-3", + onclick: () => { + ["kommuner","languageModels","frameworks","sensitivities"].forEach(k => state[k].clear()); + update(); + } + }, "Nulstil filtre")); + } + } + + function renderMain(results) { + clear(main); + const formChildren = [ + el("input", { type: "search", name: "q", value: state.q, placeholder: "Søg…", "aria-label": "Søg" }) + ]; + if (state.q) { + formChildren.push(el("button", { + class: "btn btn-secondary", + type: "button", + onclick: () => { state.q = ""; update(); } + }, "Nulstil")); + } + formChildren.push(el("button", { class: "btn", type: "submit" }, "Søg")); + + const header = el("div", { class: "results-header" }, [ + el("form", { + role: "search", + style: "flex:1; display:flex; gap:8px; max-width:560px;", + onsubmit: (e) => { + e.preventDefault(); + state.q = (new FormData(e.target).get("q") || "").trim(); + if (state.q) pushRecentSearch(state.q); + update(); + } + }, formChildren), + el("span", { class: "count" }, `${results.length} resultat${results.length === 1 ? "" : "er"}`) + ]); + main.appendChild(header); + + if (!results.length) { + main.appendChild(el("div", { class: "empty card" }, [ + el("h2", {}, "Ingen assistenter matcher"), + el("p", { class: "muted" }, "Prøv at slække på filtrene eller skriv en bredere søgning.") + ])); + return; + } + + const list = el("div", { class: "results-list" }); + results.forEach(a => list.appendChild(renderAssistantCard(a))); + main.appendChild(list); + } + + function renderContext(results) { + clear(context); + + // Active filters + const filtersCard = el("aside", { class: "context-aside" }); + filtersCard.appendChild(el("h3", {}, "Aktive filtre")); + const chips = collectActiveChips(); + if (chips.length) { + const wrap = el("div", { class: "active-filters" }, chips); + filtersCard.appendChild(wrap); + } else { + filtersCard.appendChild(el("p", { class: "context-empty" }, "Ingen filtre aktive.")); + } + context.appendChild(filtersCard); + + // Recent searches + const recent = loadRecentSearches(); + if (recent.length) { + const recentCard = el("aside", { class: "context-aside" }); + recentCard.appendChild(el("h3", {}, "Seneste søgninger")); + const ul = el("ul", { class: "recent-searches" }); + recent.forEach(q => { + ul.appendChild(el("li", {}, el("a", { + href: "#", + onclick: (e) => { e.preventDefault(); state.q = q; update(); } + }, q))); + }); + recentCard.appendChild(ul); + context.appendChild(recentCard); + } + + // "Klar til hjemtagning" callout — all catalog assistants can be exported. + if (results.length) { + const callout = el("aside", { class: "context-aside" }); + callout.appendChild(el("h3", {}, "Klar til hjemtagning")); + callout.appendChild(el("p", { class: "context-empty" }, `Alle ${results.length} resultat${results.length === 1 ? "" : "er"} kan eksporteres som OpenWebUI-JSON og køres lokalt.`)); + context.appendChild(callout); + } + } + + function collectActiveChips() { + const chips = []; + if (state.q) { + chips.push(makeChip(`"${state.q}"`, () => { state.q = ""; update(); })); + } + state.kommuner.forEach(v => chips.push(makeChip(v, () => { state.kommuner.delete(v); update(); }))); + state.languageModels.forEach(v => chips.push(makeChip(v, () => { state.languageModels.delete(v); update(); }))); + state.frameworks.forEach(v => chips.push(makeChip(FRAMEWORK_LABEL[v] || v, () => { state.frameworks.delete(v); update(); }))); + state.sensitivities.forEach(v => chips.push(makeChip(SENSITIVITY_LABEL[v] || v, () => { state.sensitivities.delete(v); update(); }))); + return chips; + } + } + + function makeChip(label, onRemove) { + return el("button", { + class: "filter-chip", + type: "button", + onclick: onRemove, + "aria-label": `Fjern filter: ${label}` + }, [label, el("span", { class: "filter-chip-x", "aria-hidden": "true" }, "×")]); + } + + function facetGroup(label, counts, selectedSet, labelFn) { + let entries = [...counts.entries()]; + entries.sort((a, b) => b[1] - a[1] || String(a[0]).localeCompare(String(b[0]), "da")); + + const ul = el("ul"); + for (const [key, count] of entries) { + const value = key; + const checked = selectedSet.has(value); + ul.appendChild(el("li", {}, el("label", {}, [ + el("input", { + type: "checkbox", + checked, + onchange: (e) => { + if (e.target.checked) selectedSet.add(value); + else selectedSet.delete(value); + update(); + } + }), + el("span", {}, labelFn ? labelFn(key) : key), + el("span", { class: "count" }, String(count)) + ]))); + } + + // Force-open if the group has an active filter, otherwise respect user preference. + const isOpen = selectedSet.size > 0 || openFacets.has(label); + const summary = el("summary", {}, [ + el("h4", {}, label), + el("span", { class: "facet-chevron", "aria-hidden": "true" }) + ]); + const details = el("details", { + class: "facet-group", + open: isOpen, + ontoggle: (e) => { + if (e.target.open) openFacets.add(label); + else openFacets.delete(label); + persistFacetOpen(openFacets); + } + }, [summary, ul]); + + return details; + } + + function anyFilter() { + return state.kommuner.size || state.languageModels.size + || state.frameworks.size || state.sensitivities.size; + } + + function syncUrl() { + const params = []; + if (state.q) params.push(`q=${encodeURIComponent(state.q)}`); + const hash = "#/search" + (params.length ? `?${params.join("&")}` : ""); + if (window.location.hash !== hash) { + history.replaceState(null, "", hash); + } + } + + update(); +} diff --git a/docs/public/projects/ai-bibliotek/mocks/js/views/upload.js b/docs/public/projects/ai-bibliotek/mocks/js/views/upload.js new file mode 100644 index 0000000..d73ea22 --- /dev/null +++ b/docs/public/projects/ai-bibliotek/mocks/js/views/upload.js @@ -0,0 +1,324 @@ +import { el, clear, navigate, toast } from "../util.js"; +import { auth } from "../auth.js"; +import { store, uid } from "../store.js"; +import { DATA_SENSITIVITY } from "../catalog.js"; +import { iconHtml, icon as iconNode } from "../icons.js"; + +export function render(root) { + const user = auth.currentUser(); + if (!user) { + navigate("#/login"); + return; + } + clear(root); + + // state.parsed holds the parsed OWUI JSON; state.draft holds suggested metadata. + const state = { step: 1, rawJson: null, parsed: null, draft: null, published: null }; + + root.appendChild(el("header", { class: "page-head" }, [ + el("h1", { style: "margin:0 0 8px;" }, "Del assistent"), + el("p", { class: "lede", style: "margin:0;" }, + "Del en AI-assistent fra din myndighed med de andre kommuner. Indsæt assistentens OpenWebUI-JSON — AI foreslår metadata, og du bekræfter datagrundlaget.") + ])); + + root.appendChild(el("aside", { + class: "alert alert-rights", + role: "note", + "aria-label": "Ansvar" + }, [ + el("span", { class: "alert-mark", "aria-hidden": "true" }), + el("p", {}, + "Du har som deler ansvaret for, at assistenten kan deles, og at det beskrevne datagrundlag ikke indeholder data, der ikke må deles. Selve videns- og datafiler deles ikke — kun konfigurationen og en opskrift på datagrundlaget.") + ])); + + const layout = el("div", { class: "upload-layout" }); + const stepNav = el("nav", { class: "step-rail", "aria-label": "Trin i deling" }); + const container = el("div", { class: "upload-step" }); + layout.appendChild(stepNav); + layout.appendChild(container); + root.appendChild(layout); + + paint(); + + function paint() { + renderStepRail(); + clear(container); + if (state.step === 1) container.appendChild(renderPick()); + else if (state.step === 2) container.appendChild(renderReview()); + else container.appendChild(renderReceipt()); + } + + function renderStepRail() { + clear(stepNav); + const stepDefs = [ + { n: 1, title: "Indsæt JSON", hint: "Vælg fil eller indsæt OWUI-JSON" }, + { n: 2, title: "Gennemgang", hint: "Tjek AI-forslag og datafølsomhed" }, + { n: 3, title: "Kvittering", hint: "Permalink til din assistent" } + ]; + stepDefs.forEach(({ n, title, hint }) => { + const status = state.step === n ? "active" : state.step > n ? "done" : "todo"; + stepNav.appendChild(el("div", { class: `step-item step-${status}` }, [ + el("span", { class: "step-num" }, status === "done" ? iconNode("check") : String(n).padStart(2, "0")), + el("div", { class: "step-text" }, [ + el("span", { class: "step-title" }, title), + el("span", { class: "step-hint" }, hint) + ]) + ])); + }); + } + + function renderPick() { + const card = el("section", { class: "card" }); + + const input = el("input", { + type: "file", + accept: "application/json,.json", + style: "display:none;", + onchange: (e) => { + const file = e.target.files[0]; + if (!file) return; + const reader = new FileReader(); + reader.onload = () => acceptJson(String(reader.result)); + reader.readAsText(file); + } + }); + + const drop = el("div", { + class: "dropzone", + tabindex: "0", + role: "button", + "aria-label": "Vælg JSON-fil eller træk hertil", + onclick: () => input.click(), + onkeydown: (e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); input.click(); } }, + ondragover: (e) => { e.preventDefault(); drop.classList.add("is-dragover"); }, + ondragleave: () => drop.classList.remove("is-dragover"), + ondrop: (e) => { + e.preventDefault(); + drop.classList.remove("is-dragover"); + const f = e.dataTransfer?.files?.[0]; + if (!f) return; + const reader = new FileReader(); + reader.onload = () => acceptJson(String(reader.result)); + reader.readAsText(f); + } + }, [ + el("p", { html: iconHtml("document", { size: 36, stroke: 1.5 }) }), + el("p", { style: "font-weight:600;" }, "Træk OpenWebUI-JSON hertil"), + el("p", { class: "muted" }, "eller klik for at vælge en .json-fil"), + input + ]); + card.appendChild(drop); + + card.appendChild(el("hr", { class: "divider" })); + + const form = el("form", { + onsubmit: (e) => { + e.preventDefault(); + const raw = new FormData(e.target).get("json") || ""; + acceptJson(String(raw)); + } + }, [ + el("label", { class: "field" }, [ + "…eller indsæt JSON direkte", + el("textarea", { + name: "json", + rows: "8", + placeholder: '{\n "id": "min-assistent",\n "name": "Min assistent",\n "base_model_id": "llama3.1:70b",\n ...\n}' + }) + ]), + el("div", { class: "right" }, [ + el("button", { type: "submit", class: "btn" }, "Analysér JSON") + ]) + ]); + card.appendChild(form); + + return card; + } + + function acceptJson(raw) { + let parsed; + try { + parsed = JSON.parse(raw); + } catch { + toast("Kunne ikke læse JSON. Tjek at formatet er gyldigt."); + return; + } + state.rawJson = raw; + state.parsed = parsed; + state.step = 2; + state.draft = null; + paint(); + // Simulate brief AI processing of the parsed config. + setTimeout(() => { + state.draft = suggestMetadata(parsed); + paint(); + }, 1400); + } + + function renderReview() { + const card = el("section", { class: "card" }); + if (!state.draft) { + card.appendChild(el("div", { style: "text-align:center; padding: 32px 0;" }, [ + el("div", { class: "spinner" }), + el("p", { style: "font-weight:600;" }, "AI analyserer assistenten…"), + el("p", { class: "muted" }, "Læser konfigurationen og foreslår metadata.") + ])); + return card; + } + + const d = state.draft; + card.appendChild(el("h2", {}, "Gennemgå AI-forslag")); + card.appendChild(el("p", { class: "muted" }, "AI har foreslået metadata ud fra den indsatte konfiguration. Ret efter behov, og vælg datafølsomhed før deling.")); + + const form = el("form", { + onsubmit: (e) => { + e.preventDefault(); + const fd = new FormData(e.target); + const assistant = buildAssistant(d, fd, state.parsed); + store.addUpload(assistant); + state.published = assistant; + state.step = 3; + paint(); + toast("Assistent delt"); + } + }); + + form.appendChild(el("div", { class: "form-grid" }, [ + el("label", { class: "field" }, ["Navn", el("input", { type: "text", name: "name", value: d.name, required: true })]), + el("label", { class: "field" }, ["Tagline (kort beskrivelse)", el("input", { type: "text", name: "tagline", value: d.tagline || "" })]), + el("label", { class: "field" }, ["Beskrivelse", + el("textarea", { name: "description", required: true }, d.description) + ]), + el("div", { class: "form-grid cols-2" }, [ + el("label", { class: "field" }, ["Oprindelseskommune", el("input", { type: "text", name: "originKommune", value: d.originKommune, required: true })]), + el("label", { class: "field" }, ["Sprogmodel", el("input", { type: "text", name: "languageModel", value: d.languageModel, required: true })]) + ]), + el("label", { class: "field" }, [ + "Tags (komma-separeret)", + el("input", { type: "text", name: "tags", value: (d.tags || []).join(", ") }) + ]), + el("label", { class: "field" }, ["Vidensopskrift (hvad kommunen selv skal levere)", + el("textarea", { name: "knowledgeRecipe", rows: "4" }, d.knowledgeRecipe || "") + ]) + ])); + + form.appendChild(el("hr", { class: "divider" })); + form.appendChild(el("h3", {}, "Datafølsomhed")); + form.appendChild(el("p", { class: "muted" }, "Vælg hvilke data assistenten er beregnet til. Det styrer, hvordan assistenten må anvendes.")); + + const rl = el("div", { class: "rights-list" }); + DATA_SENSITIVITY.forEach(s => { + rl.appendChild(el("label", {}, [ + el("input", { type: "radio", name: "dataSensitivity", value: s.level, required: true, checked: s.level === d.dataSensitivity }), + el("div", {}, [ + el("div", { class: "rl-title" }, s.title), + el("div", { class: "rl-desc" }, s.description) + ]) + ])); + }); + form.appendChild(rl); + + form.appendChild(el("div", { class: "right mt-5" }, [ + el("button", { + type: "button", + class: "btn btn-secondary", + onclick: () => { state.step = 1; state.parsed = null; state.draft = null; paint(); }, + html: `${iconHtml("arrowLeft")}Indsæt anden JSON` + }), + el("button", { type: "submit", class: "btn" }, "Del assistent") + ])); + card.appendChild(form); + return card; + } + + function renderReceipt() { + const a = state.published; + const card = el("section", { class: "card" }); + card.appendChild(el("h2", { + html: `${iconHtml("check", { size: 22 })} Assistent delt`, + style: "display:flex; align-items:center; gap:8px; color: var(--color-ok);" + })); + card.appendChild(el("p", {}, `"${a.name}" er nu tilgængelig i biblioteket og kan hjemtages af andre kommuner.`)); + card.appendChild(el("div", { class: "muted text-sm mb-4" }, `Permalink: ${window.location.origin}${window.location.pathname}#/assistant/${a.id}`)); + card.appendChild(el("div", { class: "row wrap" }, [ + el("a", { class: "btn", href: `#/assistant/${a.id}` }, "Gå til assistent"), + el("button", { + class: "btn btn-secondary", + onclick: () => { + state.step = 1; state.parsed = null; state.rawJson = null; state.draft = null; state.published = null; paint(); + } + }, "Del en til"), + el("a", { class: "btn btn-ghost", href: "#/search" }, "Tilbage til kataloget") + ])); + return card; + } +} + +function buildAssistant(draft, fd, parsed) { + const now = new Date().toISOString().slice(0, 10); + return { + id: uid("asst"), + name: (fd.get("name") || "").trim(), + tagline: (fd.get("tagline") || "").trim(), + description: (fd.get("description") || "").trim(), + originKommune: (fd.get("originKommune") || "").trim(), + languageModel: (fd.get("languageModel") || "").trim(), + framework: "openwebui", + dataSensitivity: fd.get("dataSensitivity") || "almindelige", + approvedFor: [fd.get("dataSensitivity") || "almindelige"], + tags: splitList(fd.get("tags")), + aiTags: draft.aiTags || [], + readme: draft.readme || "", + modelCard: draft.modelCard || "", + knowledgeRecipe: (fd.get("knowledgeRecipe") || "").trim(), + versions: [ + { + version: "1.0.0", + releasedAt: new Date().toISOString(), + notes: "Første version delt via AI Bibliotek.", + json: parsed + } + ], + createdAt: now, + updatedAt: now, + uploadedBy: auth.currentUser()?.id ?? null, + source: "user" + }; +} + +function splitList(s) { + if (!s) return []; + return String(s).split(",").map(x => x.trim()).filter(Boolean); +} + +/* Suggest metadata from a parsed OpenWebUI-shaped JSON object. + This stands in for an AI extraction step. */ +function suggestMetadata(parsed) { + const user = auth.currentUser(); + const originKommune = user?.organization || "Min Kommune"; + + const name = parsed?.name || "Ny assistent"; + const description = parsed?.meta?.description + || parsed?.params?.system + || "Beskrivelse mangler — tilføj en kort forklaring af hvad assistenten gør."; + const languageModel = parsed?.base_model_id || parsed?.model || "ukendt model"; + const tags = (parsed?.meta?.tags || []) + .map(t => (typeof t === "string" ? t : t?.name)) + .filter(Boolean); + + return { + name, + tagline: "", + description, + originKommune, + languageModel, + tags: tags.length ? tags : ["assistent"], + aiTags: tags.slice(0, 2), + dataSensitivity: "almindelige", + readme: `# ${name}\n\n${description}`, + modelCard: `Sprogmodel: ${languageModel}.\nKontekstvindue: ${parsed?.params?.num_ctx || "ukendt"}.\nTemperatur: ${parsed?.params?.temperature ?? "ukendt"}.\n\nHensyn: Gennemgå system-prompten og tilpas den til din kommune før brug.`, + knowledgeRecipe: (parsed?.knowledge?.length) + ? parsed.knowledge.map((k, i) => `${i + 1}. Levér lokalt: ${k.name}${k.note ? ` (${k.note})` : ""}.`).join("\n") + : "Beskriv her hvilke videns- og datafiler den enkelte kommune selv skal levere." + }; +} diff --git a/docs/public/projects/ai-bibliotek/mocks/js/views/uploads.js b/docs/public/projects/ai-bibliotek/mocks/js/views/uploads.js new file mode 100644 index 0000000..b197820 --- /dev/null +++ b/docs/public/projects/ai-bibliotek/mocks/js/views/uploads.js @@ -0,0 +1,44 @@ +import { el, clear, navigate, toast } from "../util.js"; +import { auth } from "../auth.js"; +import { store } from "../store.js"; +import { renderAssistantCard } from "./_assistant-card.js"; + +export function render(root) { + const user = auth.currentUser(); + if (!user) { navigate("#/login"); return; } + + function paint() { + clear(root); + root.appendChild(el("h1", {}, "Mine assistenter")); + root.appendChild(el("p", { class: "muted" }, + "Assistenter du har delt til biblioteket. Du kan trække en assistent tilbage — den fjernes også fra andres favoritter og samlinger.")); + + const mine = store.uploadsByUser(user.id) + .sort((a, b) => new Date(b.updatedAt) - new Date(a.updatedAt)); + + if (!mine.length) { + root.appendChild(el("div", { class: "empty card mt-4" }, [ + el("h2", {}, "Du har ikke delt nogen assistenter endnu"), + el("p", { class: "muted" }, "Del en assistent fra din myndighed for at gøre den tilgængelig for andre kommuner."), + el("a", { class: "btn", href: "#/upload" }, "Del assistent") + ])); + return; + } + + const list = el("div", { class: "results-list mt-4" }); + mine.forEach(a => list.appendChild(renderAssistantCard(a, { + extraAction: el("button", { + class: "btn btn-danger btn-sm", + onclick: () => { + if (!confirm(`Slet assistenten "${a.name}"?\n\nDen fjernes fra biblioteket og alle samlinger.`)) return; + store.deleteUpload(a.id); + toast("Assistent slettet"); + paint(); + } + }, "Slet") + }))); + root.appendChild(list); + } + + paint(); +}