feat: Action Dashboard und App Store Filter

This commit is contained in:
Hitonabi
2026-06-20 23:25:56 +02:00
parent 0a81a9fe99
commit ee8ec10119
5 changed files with 125 additions and 12 deletions
+46 -3
View File
@@ -41,19 +41,38 @@ const CURATED_MODELS = [
let lastSys = null;
let currentResults = [];
let currentAnalysis = null;
let activeFilter = "";
const FILTERS = [
{ id: "", label: "Alle" },
{ id: "coder", label: "Coding" },
{ id: "vision", label: "Vision / Multimodal" },
{ id: "roleplay", label: "Roleplay" },
{ id: "german", label: "Deutsch" }
];
function mount() {
const c = $(".view[data-view='cookbook']");
const filtersHtml = FILTERS.map(f =>
`<button class="ghost filter-btn ${activeFilter === f.id ? 'active' : ''}" style="margin-right:8px; border-radius:16px; padding:6px 16px; ${activeFilter === f.id ? 'background:var(--hi); color:var(--bg)' : 'background:var(--bg); border:1px solid var(--line)'}" onclick="window.setFilter('${f.id}')">${f.label}</button>`
).join("");
c.innerHTML = `
<div class="card" style="padding-bottom:32px">
<div style="max-width:600px; margin:0 auto; text-align:center;">
<h2 style="margin-top:20px; margin-bottom:8px">HuggingFace Suche</h2>
<p class="meta" style="margin-bottom:24px">Finde GGUF-Modelle direkt auf HuggingFace und lade sie in Mission Control herunter.</p>
<h2 style="margin-top:20px; margin-bottom:8px">App Store für Modelle</h2>
<p class="meta" style="margin-bottom:24px">Entdecke Modelle live auf HuggingFace, Hardware-Fit inklusive.</p>
<div style="display:flex; gap:12px; position:relative">
<input id="cb-search" class="tokin" style="flex:1; padding:12px 18px; font-size:16px; border-radius:12px;" placeholder="Nach Modellen suchen (z.B. Llama 3)...">
<button class="primary" id="cb-btn-search" style="border-radius:12px; padding:0 24px;">Suchen</button>
</div>
<div id="cb-filters" style="margin-top:20px; display:flex; justify-content:center; flex-wrap:wrap; gap:8px">
${filtersHtml}
</div>
</div>
</div>
@@ -157,8 +176,32 @@ async function reanalyzeCtx() {
} catch(e) {}
}
window.setFilter = (filterId) => {
activeFilter = filterId;
const buttons = document.querySelectorAll('.filter-btn');
buttons.forEach(b => {
b.style.background = 'var(--bg)';
b.style.color = '';
b.style.border = '1px solid var(--line)';
});
const idx = FILTERS.findIndex(f => f.id === filterId);
if (idx !== -1 && buttons[idx]) {
buttons[idx].style.background = 'var(--hi)';
buttons[idx].style.color = 'var(--bg)';
buttons[idx].style.border = 'none';
}
doSearch();
};
async function doSearch() {
const q = $("#cb-search").value.trim();
let q = $("#cb-search").value.trim();
if (activeFilter) {
q = q ? (q + " " + activeFilter) : activeFilter;
}
if (!q) return renderCurated();
const btn = $("#cb-btn-search");