Merge pull request #53 from SkywardAI/template-page-dev

Connect template page with training page

components/account-page/index.js

@@ -87,12 +87,12 @@ function createInputDetailsPage() {
     // buttons
     const submit_btn = document.createElement('button');
     submit_btn.type = 'submit';
-    submit_btn.className = 'function-btn clickable';
+    submit_btn.className = 'function-btn button';
     input_details_main.appendChild(submit_btn);
 
     const functional_btn = document.createElement('button');
     functional_btn.type = 'button';
-    functional_btn.className = 'function-btn reverse-color clickable';
+    functional_btn.className = 'function-btn clickable reverse-color';
     input_details_main.appendChild(functional_btn);
 
     function updateBtnText() {

components/chat-page/normal-setting-section.js

@@ -33,7 +33,7 @@ export default function normalSettigSection(type, title, callback = null, ...arg
         } else if(type === 'button') {
             input_like.value = args[0];
             input_like.onclick = args[1];
-            input_like.classList.add('clickable')
+            input_like.classList.add('button')
         }
     }
 

components/model-hero-page/index.js

@@ -1,18 +1,39 @@
 import debounce from '../../tools/debounce.js';
 import getSVG from '../../tools/svgs.js'
+import createDialog from '../../tools/dialog.js'
+import request from '../../tools/request.js'
+import showMessage from '../../tools/message.js';
 
-const templates = [
-    { name: 'template 1', description: 'this is description' },
-    { name: 'template 2', description: 'this is description' },
+let templates = [
+    // { name: 'template 1', description: 'this is description', parts: [{function_name: 'linear', param: ''},{function_name: 'linear', param: ''}] },
+    // { name: 'template 2', description: 'this is description', parts: [{function_name: 'linear', param: ''},{function_name: 'linear', param: ''}] },
 ]
 
 let display_templates, card_width = 0, move_length = 0, current_position = 'first';
+let updateSelectedTemplate;
+
+const [selected_template_popup, selected_template_controller] = createDialog();
+
+export default async function createModelHeroPage(
+    main = null, existed_templates = null, selectTemplate = null
+) {
+    main = main || document.getElementById('main');
+
+    if(!existed_templates) {
+        const response = await request('nn/list');
+        if(!Array.isArray(response) && response.http_error) {
+            showMessage('Update model list failed!', { type: 'err' });
+            return;
+        }
+        templates = response;
+    }
+    else templates = existed_templates;
+
+    updateSelectedTemplate = selectTemplate;
 
-export default function createModelHeroPage() {
-    const main = document.getElementById('main');
     main.innerHTML = `
     <div class='model-hero'>
-        <div class='title'>Model Hero Templates</div>
+        <div class='title'>Find Model Templates</div>
         <form id='search-template'>
             <input 
                 type='text' name='search' 
@@ -26,15 +47,7 @@ export default function createModelHeroPage() {
         </form>
         <div class='templates-section'>
             <div class='switch-template last clickable'>${getSVG('caret-right-fill')}</div>
-            <div id='display-templates'>${
-                templates.map(e=>{
-                    return `
-                    <div class='template-card clickable'>
-                        <div class='title'>${e.name}</div>
-                        <div class='description'>${e.description}</div>
-                    </div>`
-                }).join('')
-            }</div>
+            <div id='display-templates'></div>
             <div class='switch-template next clickable'>${getSVG('caret-right-fill')}</div>
         </div>
     </div>`
@@ -49,18 +62,21 @@ export default function createModelHeroPage() {
     // 
     // =============================================================
 
+    templates.forEach(template => {
+        display_templates.appendChild(createTemplateCard(template));
+    })
+
     document.addEventListener("resize", windowResized);
     display_templates.addEventListener('wheel', scrollTemplates);
     document.querySelector('.templates-section .switch-template.next').onclick = () => adjustScroll(true)
     document.querySelector('.templates-section .switch-template.last').onclick = () => adjustScroll(false)
 
     calculateWithInfo();
 
-    const template_cards = Array.from(document.querySelectorAll('#display-templates .template-card'));
-    const append_first_list = template_cards.slice(-2).map(e=>e.cloneNode(true));
+    const append_first_list = templates.slice(-2).map(e=>createTemplateCard(e));
 
     const append_first = append_first_list[0];
-    const append_last = template_cards[0].cloneNode(true);
+    const append_last = createTemplateCard(templates[0]);
 
     display_templates.append(append_last);
     display_templates.firstElementChild.before(...append_first_list);
@@ -95,6 +111,15 @@ export default function createModelHeroPage() {
     };
 }
 
+function createTemplateCard(template) {
+    const {name, description} = template;
+    const card = document.createElement('div');
+    card.className = 'template-card clickable';
+    card.innerHTML = `<div class="title">${name}</div><div class='description'>${description}</div>`
+    card.onclick = () => showTemplatePopup(template)
+    return card;
+}
+
 function submitSearchTemplate(evt) {
     evt.preventDefault();
 
@@ -124,4 +149,39 @@ const windowResized = debounce(calculateWithInfo , 20);
 
 function scrollTemplates(evt) {
     adjustScroll(evt.deltaY > 0)
+}
+
+function showTemplatePopup(template) {
+    selected_template_popup.innerHTML = ''
+
+    const template_main = document.createElement('div');
+    template_main.onclick = evt => evt.stopPropagation();
+    template_main.className = 'show-template-main';
+
+    template_main.insertAdjacentHTML('beforeend', `<div class='template-name'>${template.name}</div>`);
+
+    const template_block = document.createElement('div');
+    template_block.className = 'template-block'
+    template.modules.forEach(module => {
+        const part_card = document.createElement('div');
+        part_card.className = 'card';
+        part_card.textContent = module;
+        template_block.appendChild(part_card)
+    })
+
+    template_main.appendChild(template_block);
+
+    const select_template_btn = document.createElement('div');
+    select_template_btn.className = 'select-template-btn button clickable';
+    select_template_btn.textContent = 'Select This Template';
+    select_template_btn.onclick = () => {
+        updateSelectedTemplate && updateSelectedTemplate(template.name)
+        showMessage(`Template "${template.name}" selected for training`);
+        selected_template_controller.close();
+    }
+
+    template_main.appendChild(select_template_btn);
+    selected_template_popup.appendChild(template_main);
+
+    selected_template_controller.showModal();
 }

components/sidebar.js

@@ -1,16 +1,17 @@
 import createInfoPage from "./info-page.js";
 import getSVG from "../tools/svgs.js";
 import createAccountPage from "./account-page/index.js";
+import switchSelectedPage from '../global/switchPage.js'
 
 const pages = [
     { name: 'chat', svgName: 'chat-dots-fill' },
-    { name: 'model-hero', svgName: 'hero' },
+    // { name: 'model-hero', svgName: 'hero' },
     { name: 'training' },
     { name: 'account', svgName: 'person-fill', not_page: true },
     { name: 'info', svgName: 'info-circle-fill', not_page: true }
 ]
 
-export default function createSideBar(switchSelectedPage) {
+export default function createSideBar() {
     const sidebar = document.getElementById('sidebar');
 
     sidebar.innerHTML = `
@@ -30,6 +31,4 @@ export default function createSideBar(switchSelectedPage) {
     })
     createInfoPage();
     document.getElementById('sidebar-icon-account').onclick = createAccountPage;
-
-    switchSelectedPage(pages[0].name);
 }

components/training-page/index.js

@@ -1,23 +1,41 @@
 // const dataset_options = []
 // const model_options = []
 
+import { loadDefaultPage } from "../../global/switchPage.js";
+import useUser from "../../global/useUser.js";
+import showMessage from "../../tools/message.js";
+import request from "../../tools/request.js";
+import createModelHeroPage from "../model-hero-page/index.js";
 import loadFAQPage from "./faq-page.js";
 import loadParametersPage from "./parameters-page.js";
 import loadTrainingVisualizationPage from "./training-visualization-page.js";
 
 const pages = [
+    {index: 'template', title: 'Find Models'},
     {index: 'parameters', title: 'Start Training'},
     {index: 'training-visualization', title: 'Training Visualization'},
     {index: 'faq', title: 'FAQ'},
 ]
 
-let  training_page_main, current_page = '';
+let  training_page_main, current_page = '',
+     models = [], current_model = '';
 
 function switchPage(page) {
     if(current_page === page) return;
     switch(page) {
+        case 'template':
+            createModelHeroPage(
+                training_page_main, models, 
+                name=>{current_model = name}
+            );
+            break;
         case 'parameters': 
-            loadParametersPage(training_page_main, ()=>switchPage('training-visualization'));
+            loadParametersPage(
+                training_page_main, 
+                ()=>switchPage('training-visualization'), 
+                models, ()=>current_model,
+                name=>{current_model = name}
+            );
             break;
         case 'faq': 
             loadFAQPage(training_page_main);
@@ -33,7 +51,17 @@ function switchPage(page) {
     current_page = page;
 }
 
+let logged_in;
+const { componentReMount, componetDismount } = useUser(user=>{
+    logged_in = user.logged_in;
+    if(!logged_in) {
+        loadDefaultPage();
+    }
+})
+
 export default function createTrainingPage() {
+    componentReMount();
+
     document.getElementById("main").innerHTML = `
     <div class='training-main'>
         <div id='training-tabs'></div>
@@ -54,10 +82,16 @@ export default function createTrainingPage() {
         tabs.appendChild(tab);
     })
 
+    request('nn/list').then(response=>{
+        if(!Array.isArray(response) && response.http_error) {
+            showMessage('Get available models failed!', { type: 'err' });
+        } else {
+            models = response;
 
-    const loaded_page = current_page;
-    current_page = '';
-
-    switchPage(loaded_page || pages[0].index);
-    return null;
+            const loaded_page = current_page;
+            current_page = '';
+            switchPage(loaded_page || pages[0].index);
+        }
+    })
+    return componetDismount;
 }

components/training-page/parameters-page.js

@@ -40,7 +40,7 @@ const quick_edit = [
 const [ advanced_settings_dialog, controller ] = createDialog();
 let main_form, init = false, showTrainingPage;
 
-export default function loadParametersPage(main, switchPage) {
+export default function loadParametersPage(main, switchPage, models, getModelName, setSelectedModel) {
     showTrainingPage = switchPage;
     main.innerHTML = `
     <form id='training-params'>
@@ -58,13 +58,14 @@ export default function loadParametersPage(main, switchPage) {
             <div>
                 <div class='title'>Select Base Model</div>
                 <select class='clickable' name='select-model'>
-                    <option value='default model'>Default Model</option>
+                    <option value=''>-- Please Select a Model --</option>
+                    ${models.map(({name})=>{return `<option value='${name}'>${name}</option>`})}
                 </select>
             </div>
             <div>
                 <div class='title'>Select Dataset</div>
                 <select class='clickable' name='select-dataset'>
-                    <option value='default dataset'>Default Dataset</option>
+                    <option value=''>Default Dataset</option>
                 </select>
             </div>
         </section>
@@ -74,15 +75,20 @@ export default function loadParametersPage(main, switchPage) {
             </div>
         </section>
         <section class='function'>
-            <button class='clickable' type='button' id='save-btn'>Save</button>
-            <button class='clickable' type='button' id='start-training-btn'>Start Training</button>
+            <button class='button' type='button' id='save-btn'>Save</button>
+            <button class='button' type='button' id='start-training-btn'>Start Training</button>
         </section>
     </form>`
 
     main_form = document.getElementById('training-params');
     document.getElementById('start-training-btn').onclick = startTraining;
 
+    main_form['select-model'].value = getModelName()
+
     document.getElementById('save-btn').onclick = () => {
+        const entry_values = getEntryValues();
+        setSelectedModel(entry_values['select-model'])
+        showMessage('Settings saved')
         console.log(getEntryValues());
     }
 
@@ -235,7 +241,6 @@ function getEntryValues() {
     };
 
     return values;
-
 }
 
 

global/switchPage.js

@@ -0,0 +1,46 @@
+import createChatPage from "../components/chat-page/index.js";
+import createTrainingPage from "../components/training-page/index.js";
+import useUser from "../global/useUser.js";
+import showMessage from "../tools/message.js";
+import createAccountPage from "../components/account-page/index.js";
+
+let last_selected_page = '';
+let componetDismount = null;
+
+let logged_in = false;
+useUser(user=>{
+    logged_in = user.logged_in;
+})
+
+export default function switchSelectedPage(page) {
+    if(page === last_selected_page) return;
+    if(!logged_in) {
+        if(/^(training)$/.test(page)) {
+            showMessage('Please login to use this function.', { type: 'warn' });
+            createAccountPage();
+            return;
+        }
+    }
+
+    document.getElementById('main').innerHTML = '';
+    componetDismount && componetDismount();
+    componetDismount = null;
+
+    switch(page) {
+        case 'training':
+            componetDismount = createTrainingPage();
+            break;
+        case 'chat': default:
+            componetDismount = createChatPage();
+            break;
+    }
+
+    // change side-bar icon class
+    document.getElementById(`sidebar-icon-${page}`).classList.add('selected');
+    last_selected_page && document.getElementById(`sidebar-icon-${last_selected_page}`).classList.remove('selected');
+    last_selected_page = page;
+}
+
+export function loadDefaultPage() {
+    switchSelectedPage('chat');
+}

global/useConversation.js

@@ -49,7 +49,7 @@ async function startNewConversation() {
     addHistory({
         id: currentConversation.id,
         name: currentConversation.name,
-        createdAt: new Date().toUTCString()
+        createdAt: new Date()
     })
     updateAll(currentConversation);
 }