improved home page, fixed training bug

Lemon Orange · Lemon Orange · commit 0d8f15252a20 · 2022-02-15T15:45:36.000-08:00
diff --git a/about/index.html b/about/index.html
@@ -22,18 +22,18 @@
     <link rel="shortcut icon" type="image/x-icon" href="../favicon.ico">
 </head>
 
-<body style="display:flex; align-items: center; justify-content: center; height:100vh; flex-direction: column">
+<body id="particles-js" style="display:flex; align-items: center; justify-content: center; height:100vh; flex-direction: column">
     <section style="display:flex; align-items: center; justify-content: center; height:100vh; flex-direction: column; margin-bottom:6rem;
             width:60rem">
-        <h2 class='unselectable' style="font-size: 2.5rem; font-weight:430; font-family: Montserrat;">
+        <h2 class='unselectable' style="font-size: 2.5rem; font-weight:300; font-family: Montserrat; letter-spacing: 0.1rem;">
             <Strong>What Is This?</Strong>
         </h2>
     
-        <p style='text-align:center; margin-top: 2rem; cursor: text; font-size: 1rem; margin-bottom:0.5rem'>
+        <p style='text-align:center; margin-top: 2rem; cursor: text; font-size: 1rem; margin-bottom:0.5rem; font-weight: 200;'>
             In a nutshell: DeepFusion is an app that provides allows you to create and train neural networks graphically.
         </p>
         <hr style="width:20rem">
-        <p style='text-align:center; margin-top: 0.5rem; cursor: text; font-size: 1rem;'>
+        <p style='text-align:center; margin-top: 0.5rem; cursor: text; font-size: 1rem; font-weight: 200'>
             It uses the power of nodes and connections to make creating even the most complex neural networks an easy task,
             which also eliminates the need to debug technical errors and annoying problems that comes with the traditional way of making NNs. 
         </p>
@@ -59,6 +59,8 @@ <h2 class='unselectable' style="font-size: 2.5rem; font-weight:430; font-family:
         Copyright &copy; 2021 LemonOrange
     </a>
     
+    <script src="../minjs/particles.min.js"></script>
+
     <script src="../anime.min.js"></script>
     <script src="index.js"></script>
     <script data-host="https://microanalytics.io" data-dnt="false" src="https://microanalytics.io/js/script.js" id="ZwSg9rf6GA" async defer></script>
diff --git a/about/index.js b/about/index.js
@@ -0,0 +1,3 @@
+particlesJS.load('particles-js', '../minjs/part-config.json', function() {
+    console.log('callback - particles.js config loaded');
+});
diff --git a/blank/index.html b/blank/index.html
@@ -22,12 +22,14 @@
     <link rel="shortcut icon" type="image/x-icon" href="../favicon.ico">
 </head>
 
-<body style="display:flex; align-items: center; justify-content: center; height:100vh; flex-direction: column">
+<body id="particles-js" style="display:flex; align-items: center; justify-content: center; height:100vh; flex-direction: column">
 
     <p class='copyrightmsg unselectable' style='position: absolute; bottom:1vh; color:gray'>
         Copyright &copy; 2021 LemonOrange
     </p>
     <script src="../anime.min.js"></script>
+    <script src="../minjs/particles.min.js"></script>
+
     <script src="index.js"></script>
     <script data-host="https://microanalytics.io" data-dnt="false" src="https://microanalytics.io/js/script.js" id="ZwSg9rf6GA" async defer></script>
 </body>
diff --git a/blank/index.js b/blank/index.js
@@ -0,0 +1,3 @@
+particlesJS.load('particles-js', '../minjs/part-config.json', function() {
+    console.log('callback - particles.js config loaded');
+});
diff --git a/index.html b/index.html
@@ -23,9 +23,8 @@
     <link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
 </head>
 
-<body style="display:flex; align-items: center; justify-content: center; height:100vh; flex-direction: column">
-
-    <section style="padding-top: 10vh;">
+<body id="particles-js" style="display:flex; align-items: center; justify-content: center; height:100vh; flex-direction: column; padding:0; top:-1vh; width:102vw; left:-1vw">
+    <section style="padding-top: 10vh; z-index: 5">
         <section style='display:flex; flex-direction: row; padding-right: 2vw'>
             <a href="https://github.com/LemonOrangeWasTaken/DeepFusion" style="position: relative; width: fit-content;">
                 <img src="icon-colored.svg" style='height: 10rem; margin-right: 3vw; padding-top: 3vh; position: absolute; filter: blur(5px); opacity: 0.5;'
@@ -36,12 +35,12 @@
 
             <section>
                 <h1 class='unselectable' style='cursor: default; font-weight: 300; font-size: 5rem;
-                letter-spacing: 0.1rem; margin:0; margin:0'>
+                letter-spacing: 0.1rem; margin:0; margin:0; text-shadow: 0 0 7px rgba(255, 255, 255, 0.582);'>
                     DeepFusion
                 </h1>
                 <section style="display:flex; flex-direction: row; justify-content: space-between; align-items: center; padding-left:0rem; padding-right:0.7vw">
                     <h2 class='unselectable' style='cursor: default; font-weight: 300; font-size: 1.4rem;
-                    letter-spacing: 0.1rem; margin:0; margin-left:0.3vw'>
+                    letter-spacing: 0.1rem; margin:0; margin-left:0.3vw; text-shadow: 0 0 7px rgba(255, 255, 255, 0.582)'>
                         By LemonOrange
                     </h2>
                     <h3 class='unselectable' style='cursor: default; font-weight: 500; font-size: 1.2rem;
@@ -52,24 +51,26 @@
             </section>
         </section>
     </section>
-    <section style="margin-top:3rem; width:50vw; display:flex; justify-content: center; align-items: center;">
+    <section style="margin-top:3rem; width:50vw; display:flex; justify-content: center; align-items: center; z-index: 5">
         <a class='buttonlike nolinkunderline absolute-btn large-btn' href='model-maker'>
             Create Model
         </a>
         <a class='buttonlike nolinkunderline absolute-btn large-btn' href='about'>
             What Is This
         </a>
     </section>
-    <a style="font-size: 0.85rem; color:#767676; margin-top: 0.75rem;" href="https://github.com/LemonOrangeWasTaken/DeepFusion/issues" target="_blank">Report Bug</a>
+    <a style="font-size: 0.85rem; color:#767676; margin-top: 0.75rem; z-index: 5" href="https://github.com/LemonOrangeWasTaken/DeepFusion/issues" target="_blank">Report Bug</a>
 
     <!-- github corner thing -->
-    <a href="https://github.com/LemonOrangeWasTaken/DeepFusion" class="github-corner" aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#ffffff; color:#1d2021; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
+    <a style="position: fixed; right:0; top:0" href="https://github.com/LemonOrangeWasTaken/DeepFusion" class="github-corner" aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#ffffff; color:#1d2021; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
     
     <a href="./license-info/" class='copyrightmsg unselectable' style='position: absolute; bottom:1vh; color:gray'>
         Copyright &copy; 2021 LemonOrange
     </a>
 
     <script src="anime.min.js"></script>
+    <script src="minjs/particles.min.js"></script>
+
     <script src="index.js"></script>
     <script data-host="https://microanalytics.io" data-dnt="false" src="https://microanalytics.io/js/script.js" id="ZwSg9rf6GA" async defer></script>
 </body>
diff --git a/index.js b/index.js
@@ -0,0 +1,3 @@
+particlesJS.load('particles-js', 'minjs/part-config.json', function() {
+    console.log('callback - particles.js config loaded');
+});
diff --git a/license-info/index.html b/license-info/index.html
@@ -22,24 +22,19 @@
     <link rel="shortcut icon" type="image/x-icon" href="../favicon.ico">
 </head>
 
-<body style="display:flex; align-items: center; justify-content: center; height:100vh; flex-direction: column">
+<body id="particles-js" style="display:flex; align-items: center; justify-content: center; height:100vh; flex-direction: column">
 
-    <h2 style='position: absolute; top:5vh; letter-spacing: 0.1rem;'>
+    <h2 style='margin-bottom:2rem; letter-spacing: 0.1rem;'>
         <a style='color:white; text-decoration: none; cursor:pointer;' href="https://github.com/LemonOrangeWasTaken/DeepFusion/blob/master/LICENSE">
             License
         </a>
     </h2>
 
-    <!-- underlying watermark -->
-    <section style="display: flex; position:absolute; width:80vw; height:65vh; justify-content: center; align-items: center;
-    padding: 4vh 0.5vw 1.3vh 0.5vw; margin-bottom: 10vh; pointer-events: none; filter: blur(10px); flex-direction: column; opacity: 0.7;">
-        <img src="../icon-colored.svg" alt="DeepFusion" style='height:30%;'>
-    </section>
-
-    <section style="width:80vw; height:65vh; background-color: #2a2f30; border-radius: clamp(0.1rem, min(1.8vw,1.8vh), 1.8rem);
+    <section style="width:80vw; height:65vh; background-color: #3f464649; border-radius: 1rem; z-index: 2; backdrop-filter: blur(4px);
             overflow-x: hidden;
-            padding: 2.5vh 0.5vw 1.3vh 0.5vw; border: 1px solid #414849; display: flex;
-            justify-content: flex-start; align-items: flex-start; flex-direction: column; text-align: left;"
+            padding: 1rem 0.5rem 0.5rem 0.5rem; border: 1px solid #414849; display: flex;
+            justify-content: flex-start; align-items: flex-start; flex-direction: column; text-align: left;
+            box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.542), -5px 5px 20px rgba(0, 0, 0, 0.35) "
             class="no-scroll-bar legal">
 
             <h4 style="width:100%; text-align: center;">
@@ -819,6 +814,8 @@ <h5 style='color:white; width:100%; text-align: center; margin-top:1rem'>
     <a href="https://github.com/LemonOrangeWasTaken/DeepFusion" class="github-corner" aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#ffffff; color:#1d2021; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
     
     <script src="../anime.min.js"></script>
+    <script src="../minjs/particles.min.js"></script>
+
     <script src="index.js"></script>
     <script data-host="https://microanalytics.io" data-dnt="false" src="https://microanalytics.io/js/script.js" id="ZwSg9rf6GA" async defer></script>
 </body>
diff --git a/license-info/index.js b/license-info/index.js
@@ -0,0 +1,3 @@
+particlesJS.load('particles-js', '../minjs/part-config.json', function() {
+    console.log('callback - particles.js config loaded');
+});
diff --git a/minjs/part-config.json b/minjs/part-config.json
@@ -0,0 +1,110 @@
+{
+  "particles": {
+    "number": {
+      "value": 60,
+      "density": {
+        "enable": true,
+        "value_area": 800
+      }
+    },
+    "color": {
+      "value": "#ffffff"
+    },
+    "shape": {
+      "type": "edge",
+      "stroke": {
+        "width": 0,
+        "color": "#000000"
+      },
+      "polygon": {
+        "nb_sides": 3
+      },
+      "image": {
+        "src": "img/github.svg",
+        "width": 100,
+        "height": 100
+      }
+    },
+    "opacity": {
+      "value": 0.41036325039260685,
+      "random": true,
+      "anim": {
+        "enable": false,
+        "speed": 1,
+        "opacity_min": 0.1,
+        "sync": false
+      }
+    },
+    "size": {
+      "value": 3,
+      "random": true,
+      "anim": {
+        "enable": true,
+        "speed": 5,
+        "size_min": 0.1,
+        "sync": false
+      }
+    },
+    "line_linked": {
+      "enable": true,
+      "distance": 142.0488174435947,
+      "color": "#ffffff",
+      "opacity": 0.2209648271344806,
+      "width": 1
+    },
+    "move": {
+      "enable": true,
+      "speed": 3,
+      "direction": "top-right",
+      "random": false,
+      "straight": false,
+      "out_mode": "out",
+      "bounce": false,
+      "attract": {
+        "enable": false,
+        "rotateX": 600,
+        "rotateY": 1200
+      }
+    }
+  },
+  "interactivity": {
+    "detect_on": "canvas",
+    "events": {
+      "onhover": {
+        "enable": true,
+        "mode": "grab"
+      },
+      "onclick": {
+        "enable": false,
+        "mode": "push"
+      },
+      "resize": true
+    },
+    "modes": {
+      "grab": {
+        "distance": 155.83419241926586,
+        "line_linked": {
+          "opacity": 0.7932011331444763
+        }
+      },
+      "bubble": {
+        "distance": 400,
+        "size": 40,
+        "duration": 2,
+        "opacity": 8,
+        "speed": 3
+      },
+      "repulse": {
+        "distance": 200,
+        "duration": 0.4
+      },
+      "push": {
+        "particles_nb": 4
+      },
+      "remove": {
+        "particles_nb": 2
+      }
+    }
+  },
+  "retina_detect": true
+}
diff --git a/minjs/particles.min.js b/minjs/particles.min.js
diff --git a/model-maker/menu-templates.js b/model-maker/menu-templates.js
@@ -252,10 +252,6 @@ const DENSE_NODE_MENU = [ // uuid, neuronct
                         "<>" : "option",
                         "value" : "glu",
                         "text" : "Glorot Uniform", 
-                    },{
-                        "<>" : "option",
-                        "value" : "con",
-                        "text" : "Constant", 
                     },{
                         "<>" : "option",
                         "value" : "hen",
@@ -296,10 +292,6 @@ const DENSE_NODE_MENU = [ // uuid, neuronct
                         "<>" : "option",
                         "value" : "trn",
                         "text" : "Truncated Normal", 
-                    },{
-                        "<>" : "option",
-                        "value" : "var",
-                        "text" : "Varience Scaling", 
                     }
                 ],
             },
@@ -320,6 +312,10 @@ const DENSE_NODE_MENU = [ // uuid, neuronct
                         "<>" : "option",
                         "value" : "zer",
                         "text" : "Zeros (default)", 
+                    },{
+                        "<>" : "option",
+                        "value" : "one",
+                        "text" : "Ones", 
                     },{
                         "<>" : "option",
                         "value" : "zer",
@@ -328,10 +324,6 @@ const DENSE_NODE_MENU = [ // uuid, neuronct
                         "<>" : "option",
                         "value" : "gln",
                         "text" : "Glorot Normal", 
-                    },{
-                        "<>" : "option",
-                        "value" : "con",
-                        "text" : "Constant", 
                     },{
                         "<>" : "option",
                         "value" : "hen",
@@ -348,14 +340,6 @@ const DENSE_NODE_MENU = [ // uuid, neuronct
                         "<>" : "option",
                         "value" : "leu",
                         "text" : "LeCun Uniform", 
-                    },{
-                        "<>" : "option",
-                        "value" : "one",
-                        "text" : "Ones", 
-                    },{
-                        "<>" : "option",
-                        "value" : "ort",
-                        "text" : "Orthogonal", 
                     },{
                         "<>" : "option",
                         "value" : "ran",
@@ -368,10 +352,6 @@ const DENSE_NODE_MENU = [ // uuid, neuronct
                         "<>" : "option",
                         "value" : "trn",
                         "text" : "Truncated Normal", 
-                    },{
-                        "<>" : "option",
-                        "value" : "var",
-                        "text" : "Varience Scaling", 
                     }
                 ],
             }
diff --git a/model-maker/modeling.js b/model-maker/modeling.js
@@ -190,7 +190,7 @@ function create_model(custom_input_size){
 }
 
 document.getElementById("test-net").addEventListener("click", (evt) => {
-    dflog(defaultinput, "test")
+    dflog(defaultinput, "testnet")
     test_net_random()
 })
 function test_net_random(){
diff --git a/style.css b/style.css
@@ -13,10 +13,17 @@
 
 body{
     background-color: #1f2323ff;
+    /* background-color: rgb(86, 92, 92); */
     overflow: hidden;
     color:white;
     font-family:Poppins; 
 }
+body > canvas{
+    position: fixed;
+    width:100vw;
+    height:50vh;
+    z-index: 1;
+}
 
 button, .buttonlike{
     border: solid 1px rgba(255, 255, 255, 0.446);

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+particlesJS.load('particles-js', '../minjs/part-config.json', function() {`
	`2`	`+ console.log('callback - particles.js config loaded');`
	`3`	`+});`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+particlesJS.load('particles-js', 'minjs/part-config.json', function() {`
	`2`	`+ console.log('callback - particles.js config loaded');`
	`3`	`+});`