Merge pull request #51 from SkywardAI/training-improve

embed yeager microservice to page

components/training-page/index.js

@@ -17,7 +17,7 @@ function switchPage(page) {
     if(current_page === page) return;
     switch(page) {
         case 'parameters': 
-            loadParametersPage(training_page_main);
+            loadParametersPage(training_page_main, ()=>switchPage('training-visualization'));
             break;
         case 'faq': 
             loadFAQPage(training_page_main);

components/training-page/parameters-page.js

@@ -30,9 +30,10 @@ for(const key in settings) setting_value_type[key] = typeof settings[key];
 // TODO: load settings from local
 
 const [ advanced_settings_dialog, controller ] = createDialog();
-let main_form, init = false;
+let main_form, init = false, showTrainingPage;
 
-export default function loadParametersPage(main) {
+export default function loadParametersPage(main, switchPage) {
+    showTrainingPage = switchPage;
     main.innerHTML = `
     <form id='training-params'>
         <section class='token'>
@@ -195,6 +196,8 @@ function getEntryValues() {
 
 function startTraining(evt) {
     evt.preventDefault();
+
+    showTrainingPage();    
 }
 
 function settingValueParser(type, value) {

components/training-page/training-visualization-page.js

@@ -1,4 +1,10 @@
 export default function loadTrainingVisualizationPage(main) {
     main.innerHTML = '';
+
+    const training_frame = document.createElement('iframe');
+    training_frame.src = '/training-visualization/';
+    training_frame.className = 'seamless-frame'
+    main.appendChild(training_frame);
+
     return null;
 }

nginx/default.conf

@@ -13,6 +13,10 @@ server {
                 proxy_pass http://kirin/api;
         }
 
+        location /training-visualization {
+                proxy_pass http://yeager/;
+        }
+
         location / {
                 root /usr/share/nginx/html;
                 index index.html index.htm;
@@ -27,10 +31,10 @@ server {
 
         # redirect server error pages to the static page /50x.html
         #
-        error_page 500 502 503 504 /50x.html;
-        location = /50x.html {
-                root /usr/share/nginx/html;
-        }
+        # error_page 500 502 503 504 /50x.html;
+        # location = /50x.html {
+        #         root /usr/share/nginx/html;
+        # }
 
         # proxy the PHP scripts to Apache listening on 127.0.0.1:80
         #

styles/training_page.css

@@ -1,6 +1,6 @@
 .training-main {
     --tabs-height: 40px;
-    --main-height: 90vh;
+    --main-height: calc(100vh - var(--tabs-height) - 15px);
     background-color: var(--transparent-gray-bg);
     width: 100%;
     height: 100%;
@@ -52,6 +52,8 @@
 
 .training-main #training-tabs .tab.selected::before,
 .training-main #training-tabs .tab.selected::after {
+    content: "";
+    position: absolute;
     background-color: transparent;
     height: 10px;
     width: 10px;
@@ -81,7 +83,7 @@
     position: absolute;
     bottom: 0;
     background-color: white;
-    padding-top: 10px;
+    padding-top: 7px;
 }
 
 .training-main #training-page-main #training-params {
@@ -120,6 +122,12 @@
     border-left-width: 1px !important;
 }
 
+.training-main .seamless-frame {
+    border: none;
+    width: 100%;
+    height: 100%;
+}
+
 /* 
 =====================================================
 
@@ -255,5 +263,4 @@ section.params > div.advanced {
 
 .advanced-setting-table tbody tr:has(td input:focus) {
     background-color: var(--transparent-gray-bg);
-}
-
+}