build pages 001

.gitignore

@@ -1,4 +1,4 @@
 node_modules/
 /development/node_modules/
 node_modules
-dist/
+dist

dist/assests/js/agenticstack.js

@@ -1 +0,0 @@
-import("./asjs_chatbot.js");class e extends HTMLElement{constructor(){super()}handleEvent(e){this[`on${e.type}`](e)}connectedCallback(){this.render()}render(){this.innerHTML="\n        <section>\n            <h3>Welcome to Agentic Stack JS</h3>\n        </section>\n        "}}window.customElements.define("agentic-stack-js",e);export{e as AgenticStackJS};

dist/assests/js/asjs_chatbot.js

@@ -1 +0,0 @@
-import{AgenticStackJS as t}from"./agenticstack.js";import*as e from"../../../../../../../../@mediapipe/tasks-genai/genai_bundle.mjs";window.customElements.define("asjs-chatbot",class extends t{constructor(){super(),this.popover_id="popover-asjs-chatbot",this.genai_fileset=null,this.llm_config={},this.llmInference=null,this.chatblock=null,this.chat_form_prompt_id="chat-form-prompt",this.chatformprompt=null,this.chatprompt=null,this.chatformconfig=null,this.chat_form_config_id="chat-form-config",this.chat_threads=new Set,this.displayPartialResults=this.displayPartialResults.bind(this)}get modelAssetPath(){return this.getAttribute("model-asset-path")}set modelAssetPath(t){return this.setAttribute("model-asset-path",t),this.modelAssetPath}get deviceDelegate(){return this.hasAttribute("device-delegate")?this.getAttribute("device-delegate"):"CPU"}set deviceDelegate(t){return this.setAttribute("device-delegate",t),this.deviceDelegate}get maxTokens(){return this.hasAttribute("max-tokens")?Number(this.getAttribute("max-tokens")):8192}set maxTokens(t){return this.setAttribute("max-tokens",t),this.maxTokens}get randomSeed(){return this.hasAttribute("random-seed")?Number(this.getAttribute("random-seed")):1}set randomSeed(t){return this.setAttribute("random-seed",t),this.randomSeed}get topK(){return this.hasAttribute("top-k")?Number(this.getAttribute("top-k")):1}set topK(t){return this.setAttribute("top-k",t),this.topK}get temperature(){if(this.hasAttribute("temperature")){return parseFloat(this.getAttribute("temperature"))}return 1}set temperature(t){return this.setAttribute("temperature",t),this.temperature}get asjs_title(){return this.getAttribute("asjs-title")}lastThread(){return[...this.chat_threads].at(-1)}threadID(){let t=new Date,e=Math.random().toString(36).substring(2,15),s=`thread-${t.getTime()}-${e}`;return this.chat_threads.add(s),s}async reloadModel(t){let s=document.querySelector('script[src^="/@mediapipe/tasks-genai"]');return s&&s.remove(),e.LlmInference.createFromOptions(this.genai_fileset,this.llm_config)}async loadModel(t){return this.genai_fileset=await e.FilesetResolver.forGenAiTasks("/@mediapipe/tasks-genai/wasm"),this.llm_config={baseOptions:{modelAssetPath:`${this.modelAssetPath??""}`,delegate:this.deviceDelegate},maxTokens:this.maxTokens,randomSeed:this.randomSeed,topK:this.topK,temperature:this.temperature},t&&(config.baseOptions={modelAssetBuffer:t}),e.LlmInference.createFromOptions(this.genai_fileset,this.llm_config)}scrollBottom(){const t=document.getElementById("message-list");t.scrollTo({behavior:"smooth",top:t.scrollHeight})}displayPartialResults(t,e){let s=this.querySelector(`#${this.lastThread()}`);s.textContent+=t,e&&(s.textContent||(s.textContent="Result is empty"),this.chatprompt.disabled=!1),this.scrollBottom()}async bindElems(){this.chatblock=this.querySelector("#chat-block"),this.chatformprompt=this.chatblock.querySelector(`form[id="${this.chat_form_prompt_id}"]`),this.chatprompt=this.chatformprompt.querySelector('input[id="chat-prompt"]'),this.msglist=this.chatblock.querySelector("#message-list"),this.chatformconfig=this.chatblock.querySelector(`form[id="${this.chat_form_config_id}"]`)}async addHandlers(){this.chatformprompt.addEventListener("submit",(t=>this.eventSubmitPrompt(t))),this.chatformconfig.addEventListener("submit",(t=>this.eventSubmitConfig(t)))}async removeHandlers(){this.chatformprompt.removeEventListener("submit",this.eventSubmitPrompt),this.chatformconfig.removeEventListener("submit",this.eventSubmitConfig)}eventSubmitConfig(t){t.preventDefault(t);let e=t.target.querySelectorAll("fieldset");this.chatprompt.disabled=!0;let s=new FormData(t.target);const i=Object.fromEntries(s.entries());this.maxTokens=i.maxTokens,this.randomSeed=i.randomSeed,this.topK=i.topK,this.temperature=i.temperature,e.forEach((t=>t.setAttribute("disabled",""))),this.reloadModel().then((async t=>{this.llmInference=t,alert("LLM options updated"),this.chatprompt.disabled=!1,e.forEach((t=>t.removeAttribute("disabled")))})).catch((async t=>{this.renderErrorModelPath()}))}async eventSubmitPrompt(t){t.preventDefault(),this.chatprompt.disabled=!0;let e=this.chatprompt.value,s=this.threadID();await this.renderMsg("user",s,e);let i=this.threadID();await this.renderMsg("bot",i,"");try{this.llmInference.generateResponse(e,this.displayPartialResults)}catch(t){alert(`${t}`),this.chatprompt.disabled=!1}}static observedAttributes=["max-tokens"];attributeChangedCallback(t,e,s){if(null!==e)switch(t){case"max-tokens":this.llm_config.maxTokens=Number(s);break;case"random-seed":this.llm_config.randomSeed=Number(s);break;case"top-k":this.llm_config.topK=Number(s);break;case"temperature":this.llm_config.temperature=s}}async connectedCallback(){await this.render(),await this.bindElems(),await this.addHandlers(),this.modelAssetPath?this.renderChatbot():this.renderErrorModelPath()}dissconnectedCallback(){this.removeHandlers()}renderMsg(t,e,s){let i=document.createElement("li");"bot"===t?i.classList.add("message-bot"):i.classList.add("message-user"),i.innerHTML=`\n        <article>    \n            <p id="${e}">${s}</p>\n        </arcticle>`,this.msglist.append(i)}renderErrorModelPath(){alert("please provide a path to the model"),this.querySelector(".message-loader").innerHTML='<div class="fade-in" style="position:relative; top:40%;">The model is NOT ready for a chat!</div>'}renderChatbot(){this.loadModel().then((async t=>{this.llmInference=t,this.querySelector(".message-loader").innerHTML='<div class="fade-in" style="position:relative; top:40%;">The model is ready for a chat!</div>',this.chatprompt.disabled=!1})).catch((async t=>{this.renderErrorModelPath()}))}render(){this.innerHTML=`\n            <section id="chat-block">\n            <nav><h3>${this.asjs_title}</h3></nav>\n            <hr/>\n            \x3c!---\n                *** chat thread ***\n            --\x3e\n            <div id="chat-thread">\n            <section>\n                <ul id="message-list">\n                    <li class="message-loader">\n                        <div class="loader"></div>\n                        <p>Please standy by has we load the model</p>\n                    </li>\n                </ul>\n            </section>\n            </div>\n\n            \x3c!---\n                *** Prompt Form ***\n            --\x3e\n            <div id="chat-prompt">\n            <form id="${this.chat_form_prompt_id}">\n                <fieldset>\n                <label>Prompt</label>\n                <input type="text"\n                       id="chat-prompt"\n                       name="chat-prompt"\n                       value="" \n                       disabled\n                       style="width:-webkit-fill-available;"></input>\n                </fieldset>\n            </form>\n            </div>\n\n            \x3c!--\n                *** Configuration Form ***\n            --\x3e\n            <hr/>\n            <div id="chat-config">\n                <form id="${this.chat_form_config_id}">\n                    <fieldset>\n                    <label>Configuration options</label>\n                    </fieldset>\n                    <fieldset>\n                        <label>Max Token <span class="chat-config-help-text">(0 to 8192)</span></label>\n                        <input type="number"\n                               id="maxTokens"\n                               name="maxTokens"\n                               value="${this.maxTokens}" \n                               min="1" max="8192"\n                               style="width:-webkit-fill-available;">\n                        </input>\n                    </fieldset>\n                    \x3c!--randomSeed--!>\n                    <fieldset>\n                        <label>Random Seed <span class="chat-config-help-text"> (The random seed used during text generation)</span></label>\n                        <input type="number"\n                               id="randomSeed"\n                               name="randomSeed"\n                               value="${this.randomSeed}" \n                               min="1" max="1000"\n                               style="width:-webkit-fill-available;">\n                        </input>\n                    </fieldset>\n                    \x3c!--topK--\x3e\n                    <fieldset>\n                        <label>topK <span class="chat-config-help-text"> (level of control in text generation)</span></label>\n                        <input type="number"\n                               id="topK"\n                               name="topK"\n                               value="${this.topK}" \n                               min="0" max="100"\n                               style="width:-webkit-fill-available;">\n                        </input>\n                    </fieldset>\n                    \x3c!--temperature--\x3e\n                    <fieldset>\n                        <label>temperature <span class="chat-config-help-text"> (The amount of randomness introduced during generation)</span></label>\n                        <input type="text"\n                               id="temperature"\n                               name="temperature"\n                               value="${this.temperature}"\n                               style="width:-webkit-fill-available;">\n                        </input>\n                    </fieldset>\n                    <fieldset>\n                        <button \n                            form="${this.chat_form_config_id}"\n                            type="submit">\n                            Update\n                        </button>\n                    </fieldset>\n                </form>\n            </div>\n            </section>\n        `}});

package.json

@@ -6,7 +6,7 @@
   "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "build-pages": "copyfiles -f ./index.html ./dist/",
+    "build-pages": "copyfiles -f ./src/index.html ./dist/",
     "build": "npm run build-pages && copyfiles -f ./node_modules/agentic-stack-js-web-components/dist/*.js ./dist/assests/js/"
   },
   "author": "",