diff options
Diffstat (limited to 'htroot')
| -rw-r--r-- | htroot/AILab.html | 36 | ||||
| -rw-r--r-- | htroot/LLMSelection_p.html | 21 | ||||
| -rw-r--r-- | htroot/SkillsConfig_p.html | 185 | ||||
| -rw-r--r-- | htroot/env/templates/submenuAI.template | 1 |
4 files changed, 239 insertions, 4 deletions
diff --git a/htroot/AILab.html b/htroot/AILab.html index caa89d83b..b3462048c 100644 --- a/htroot/AILab.html +++ b/htroot/AILab.html @@ -209,6 +209,12 @@ filter: grayscale(0.2); pointer-events: none; } + + @media (min-width: 768px) { + .quest-body-nowrap { + flex-wrap: nowrap; + } + } </style> </head> <body id="AILab" data-ailab-inference-configured="#[ailab_inference_configured]#"> @@ -222,7 +228,7 @@ <p>Complete the quests below to unlock YaCy's AI sidekick: bind an inference engine, load production models, feed it with your index, then wire RAG and shields.</p> <div class="lab-progress"> <div class="progress"> - <div id="labProgressBar" class="progress-bar progress-bar-success" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0" style="width:0%">0 / 5 unlocked</div> + <div id="labProgressBar" class="progress-bar progress-bar-success" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0" style="width:0%">0 / 6 unlocked</div> </div> </div> </div> @@ -306,6 +312,25 @@ </div> </div> + <div class="bs-callout bs-callout-optional quest-callout status-pending" data-quest="tools" data-status="#[ailab_tools_status]#"> + <div class="quest-meta"> + <span class="label label-info">Optional</span> + <span class="meta-arrow" aria-hidden="true">→</span> + <span class="status-pill">Needs setup</span> + </div> + <h3>Enable/Disable Sills</h3> + <p>Superpowers for the YaCy Chat</p> + <div class="quest-body"> + <div class="quest-visual"> + <img src="env/grafics/AILab_Matrix.png" alt="Tools configuration" width="128" height="128" /> + </div> + <div class="quest-actions"> + <a class="btn btn-info btn-sm" href="SkillsConfig_p.html">Open skills configuration</a><br /> + <span class="quest-note">Tune descriptions and set maxCallsPerTurn per tool (0 disables a tool).</span> + </div> + </div> + </div> + <div class="bs-callout bs-callout-optional quest-callout status-pending" data-quest="shield" data-status="#[ailab_shield_status]#"> <div class="quest-meta"> <span class="label label-info">Optional</span> @@ -314,7 +339,7 @@ </div> <h3>Define a shield</h3> <p>Add guardrails: access rates, grant or deny non-localhost access. Activate the front page link for chat to complete this quest.</p> - <div class="quest-body"> + <div class="quest-body quest-body-nowrap"> <div class="quest-visual"> <img src="env/grafics/AILab_shield.png" alt="Shield definition" width="128" height="128" /> </div> @@ -377,7 +402,7 @@ }); // Gating: enforce build order - const questOrder = ["inference", "model", "index", "rag", "shield"]; + const questOrder = ["inference", "model", "index", "rag", "tools", "shield"]; let prerequisitesMet = true; questOrder.forEach(function(name) { const callout = document.querySelector('.quest-callout[data-quest="' + name + '"]'); @@ -386,6 +411,9 @@ // Only gate by prior quests; index stays clickable even while filling up. let locked = !prerequisitesMet; + if (name === "tools" || name === "shield") { + locked = false; + } if (name === "model") { const inferenceConfigured = document.body.getAttribute("data-ailab-inference-configured") === "1"; locked = locked || !inferenceConfigured; @@ -402,7 +430,7 @@ } // Block subsequent quests until current one is ready (index must reach threshold to release RAG and later steps). - if (s !== "ready" || (name === "index" && indexCount < indexNeeded)) { + if (name !== "tools" && (s !== "ready" || (name === "index" && indexCount < indexNeeded))) { prerequisitesMet = false; } }); diff --git a/htroot/LLMSelection_p.html b/htroot/LLMSelection_p.html index 312386389..493e91fc8 100644 --- a/htroot/LLMSelection_p.html +++ b/htroot/LLMSelection_p.html @@ -411,6 +411,12 @@ function renderModelTable(container, title, rows) { if (!container) return; container.innerHTML = `<legend>${title}</legend>`; + if (title === "Available Models") { + const legend = container.querySelector("legend"); + if (legend) { + legend.id = "availableModels"; + } + } if (!rows || !rows.length) { container.style.display = "none"; return; @@ -1167,6 +1173,20 @@ if (presetService && presetHoststub) { loadModelList(true); } + if (window.location.hash === "#availableModels") { + loadModelList(true) + .catch(() => null) + .finally(() => { + window.setTimeout(() => { + const target = document.getElementById("availableModels") + || document.getElementById("availableModelsAnchor") + || document.getElementById("availableModelsContainer"); + if (target) { + target.scrollIntoView({ behavior: "smooth", block: "start" }); + } + }, 0); + }); + } } catch (e) { console.error("Initialization failed", e); } @@ -1230,6 +1250,7 @@ <legend>Model Downloads</legend> <div id="downloadActivityList"></div> </fieldset> + <a id="availableModelsAnchor"></a> <fieldset id="availableModelsContainer" style="display:none"><a name="availableModels"></a></fieldset> <fieldset id="productionModelsContainer" style="display: block;"><a name="productionModels"></a><legend>Production Models Matrix</legend> diff --git a/htroot/SkillsConfig_p.html b/htroot/SkillsConfig_p.html new file mode 100644 index 000000000..3b8d5a52f --- /dev/null +++ b/htroot/SkillsConfig_p.html @@ -0,0 +1,185 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>YaCy '#[clientname]#': Skills Config</title> + #%env/templates/metas.template%# + <style type="text/css"> + .tool-card { + border: 1px solid #e6e9ef; + border-left: 6px solid #5bc0de; + padding: 10px 18px 18px 18px; + margin-bottom: 16px; + background: #fff; + box-shadow: 0 3px 10px rgba(0,0,0,0.06); + } + .tool-header { + display: flex; + justify-content: space-between; + align-items: center; + gap: 12px; + margin-bottom: 10px; + } + .tool-header h3 { + margin: 0; + color: #0f2b46; + } + .tool-limit { + display: flex; + align-items: stretch; + gap: 8px; + color: #3b4a5e; + white-space: nowrap; + } + .tool-limit label { + display: inline-flex; + align-items: center; + } + .tool-limit input { + width: 56px; + height: 34px; + padding: 6px 8px; + } + .tool-limit .toggle-button { + min-width: 70px; + height: 34px; + padding: 6px 10px; + display: inline-flex; + align-items: center; + justify-content: center; + } + .tool-description { + width: 100%; + resize: vertical; + } + .skills-grid { + display: flex; + flex-wrap: wrap; + gap: 18px; + align-items: stretch; + } + .skills-grid .tool-card { + flex: 1 1 48%; + min-width: 320px; + margin-bottom: 0; + } + @media (max-width: 767px) { + .skills-grid .tool-card { + flex-basis: 100%; + } + } + </style> + </head> + <body id="SkillsConfig"> + #%env/templates/header.template%# + #%env/templates/submenuAI.template%# + + <h2>Skills</h2> + <p>Add superpowers to the YaCy Chat. Skills may be disabled by setting maxCallsPerTurn to 0.</p> + <!-- Technical naming note: internally these are called tools; in the user experience they are shown as skills. --> + + #(status)# + ::<div class="alert alert-success">Tool settings were saved.</div> + #(/status)# + #(status_hasInvalidMaxCalls)# + ::<div class="alert alert-warning">#[status_invalidMaxCalls]# invalid maxCallsPerTurn value(s) were reset to the previous values.</div> + #(/status_hasInvalidMaxCalls)# + + <form action="SkillsConfig_p.html" method="post" accept-charset="UTF-8"> + <input type="hidden" name="save" value="1" /> + + <h3>Basic Skills</h3> + <div class="skills-grid"> + #{basic_tools}# + <div class="tool-card"> + <div class="tool-header"> + <h3><code>#[name]#</code></h3> + <div class="tool-limit"> + <label for="tool-limit-basic-#[name]#">maxCallsPerTurn</label> + <input id="tool-limit-basic-#[name]#" type="number" class="form-control max-calls-input" min="0" max="99" name="ai.tools.#[name]#.maxCallsPerTurn" value="#[maxCallsPerTurn]#" /> + <button type="button" class="btn btn-default toggle-button">disable</button> + </div> + </div> + <textarea class="tool-description form-control" name="ai.tools.#[name]#.description" rows="2">#[description]#</textarea> + </div> + #{/basic_tools}# + </div> + + <h3>Visualization Skills</h3> + <div class="skills-grid"> + #{visualization_tools}# + <div class="tool-card"> + <div class="tool-header"> + <h3><code>#[name]#</code></h3> + <div class="tool-limit"> + <label for="tool-limit-vis-#[name]#">maxCallsPerTurn</label> + <input id="tool-limit-vis-#[name]#" type="number" class="form-control max-calls-input" min="0" max="99" name="ai.tools.#[name]#.maxCallsPerTurn" value="#[maxCallsPerTurn]#" /> + <button type="button" class="btn btn-default toggle-button">disable</button> + </div> + </div> + <textarea class="tool-description form-control" name="ai.tools.#[name]#.description" rows="2">#[description]#</textarea> + </div> + #{/visualization_tools}# + </div> + + <h3>Data Retrieval Skills</h3> + <div class="skills-grid"> + #{retrieval_tools}# + <div class="tool-card"> + <div class="tool-header"> + <h3><code>#[name]#</code></h3> + <div class="tool-limit"> + <label for="tool-limit-ret-#[name]#">maxCallsPerTurn</label> + <input id="tool-limit-ret-#[name]#" type="number" class="form-control max-calls-input" min="0" max="99" name="ai.tools.#[name]#.maxCallsPerTurn" value="#[maxCallsPerTurn]#" /> + <button type="button" class="btn btn-default toggle-button">disable</button> + </div> + </div> + <textarea class="tool-description form-control" name="ai.tools.#[name]#.description" rows="2">#[description]#</textarea> + </div> + #{/retrieval_tools}# + </div> + <button type="submit" class="btn btn-primary">Save Skills Configuration</button> + </form> + + <script type="text/javascript"> + (function() { + function readValue(input) { + if (!input) return 0; + var value = parseInt(input.value, 10); + return isNaN(value) ? 0 : value; + } + + function updateToggleLabel(input, button) { + if (!input || !button) return; + button.textContent = readValue(input) > 0 ? "disable" : "enable"; + } + + var inputs = document.querySelectorAll(".max-calls-input"); + Array.prototype.forEach.call(inputs, function(input) { + var wrapper = input.parentElement; + var button = wrapper ? wrapper.querySelector(".toggle-button") : null; + if (!button) return; + + updateToggleLabel(input, button); + + button.addEventListener("click", function() { + if (readValue(input) > 0) { + input.value = "0"; + } else { + input.value = "1"; + } + updateToggleLabel(input, button); + }); + + input.addEventListener("input", function() { + updateToggleLabel(input, button); + }); + input.addEventListener("change", function() { + updateToggleLabel(input, button); + }); + }); + })(); + </script> + + #%env/templates/footer.template%# + </body> +</html> diff --git a/htroot/env/templates/submenuAI.template b/htroot/env/templates/submenuAI.template index 10a72c935..22e67ad6a 100644 --- a/htroot/env/templates/submenuAI.template +++ b/htroot/env/templates/submenuAI.template @@ -4,6 +4,7 @@ <li><a href="AILab.html" class="MenuItemLink">AI Lab</a></li> <li><a href="LLMSelection_p.html" class="MenuItemLink #(authorized)#lock::unlock#(/authorized)#">LLM Selection</a></li> <li><a href="RAGConfig_p.html" class="MenuItemLink #(authorized)#lock::unlock#(/authorized)#">RAG Config</a></li> + <li><a href="SkillsConfig_p.html" class="MenuItemLink #(authorized)#lock::unlock#(/authorized)#">Skills Config</a></li> <li><a href="AIShield_p.html" class="MenuItemLink #(authorized)#lock::unlock#(/authorized)#">AI Shield</a></li> <li><a href="yacychat.html" class="MenuItemLink">Chat</a></li> </ul> |