Added ace code editor

Niyaz-Mohamed · Aug 30, 2024 · b0f81b5 · b0f81b5
1 parent 6778d80
commit b0f81b5
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 23 deletions.
diff --git a/css/settings.css b/css/settings.css
@@ -1,7 +1,7 @@
 /*! Window sizing */
 #settings {
  max-width: 25vw !important;
- min-width: 250px;
+ min-width: 300px;
 }
 
 #settings-window-content {
@@ -103,7 +103,6 @@
 }
 
 /*! Checkbox Stylings */
-
 .neighbor-grid input[type="checkbox"] {
  width: 100%;
  height: 100%;
@@ -184,3 +183,9 @@ input[type="checkbox"]:disabled {
  color: var(--bg-color);
  cursor: pointer;
 }
+
+/*! Code Editor */
+#neural-code-editor {
+ height: 100px;
+ scrollbar-color: auto;
+}
diff --git a/index.html b/index.html
@@ -28,6 +28,8 @@
  <link href="https://fonts.googleapis.com/css2?family=Pixelify+Sans:wght@400..700&display=swap"
  rel="stylesheet" />
  </noscript>
+ <!--Ace Editor-->
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.23.0/ace.js"></script>
 </head>
 
 <body>
@@ -496,9 +498,10 @@ <h2>Rules</h2>
  <option value="power">Power</option>
  <option value="absolute">Absolute</option>
  <option value="tanh">tanh</option>
- <option value="inverse-gaussian" selected>Inverse Gaussian</option>
- <option disabled>Custom</option>
+ <option value="inverse-gaussian">Inverse Gaussian</option>
+ <option selected>Custom</option>
  </select>
+ <div id="neural-code-editor"></div>
  </div>
  <div class="rule-div horizontal-rule">
  <label for="neural-skip-input">Skip Frames</label>

diff --git a/js/inputs/settings.js b/js/inputs/settings.js
@@ -358,24 +358,6 @@ document.getElementById("neural-randomize").onclick = (_) => {
  automata.randomize();
 };
 
-// Handle changes in activation
-const activationSelector = document.getElementById("neural-activation-select");
-activationSelector.selectedIndex = activationSelector.options.length - 2;
-activationSelector.onchange = (event) => {
- setActivation(event.target.value);
-};
-
-function setActivation(type, args = []) {
- const funcMap = {
- identity: (x) => x,
- power: (x) => Math.pow(x, 2),
- absolute: (x) => Math.abs(x),
- tanh: (x) => (Math.exp(2 * x) - 1) / (Math.exp(2 * x) + 1),
- "inverse-gaussian": (x) => -(1 / Math.pow(2, 0.6 * Math.pow(x, 2))) + 1,
- };
- automata.activation = funcMap[type];
-}
-
 // Handle changes in skip frame
 document
  .getElementById("neural-skip-input")
@@ -456,6 +438,49 @@ presetSelector.onchange = (event) => {
  automata.randomize();
 };
 
+// Handle changes in activation
+const activationSelector = document.getElementById("neural-activation-select");
+activationSelector.selectedIndex = activationSelector.options.length - 1; // Initially set to custom
+activationSelector.onchange = (event) => {
+ setActivation(event.target.value);
+};
+
+function setActivation(type, args = []) {
+ const funcMap = {
+ identity: (x) => x,
+ power: (x) => Math.pow(x, 2),
+ absolute: (x) => Math.abs(x),
+ tanh: (x) => (Math.exp(2 * x) - 1) / (Math.exp(2 * x) + 1),
+ "inverse-gaussian": (x) => -(1 / Math.pow(2, Math.pow(x, 2))) + 1,
+ };
+ automata.activation = funcMap[type];
+}
+
+// Intialize activation func code editor
+const editor = ace.edit("neural-code-editor");
+editor.setTheme("ace/theme/monokai"); // Dark theme
+editor.session.setMode("ace/mode/javascript"); // JavaScript syntax highlighting
+editor.setOptions({
+ fontSize: "10px", // Font size
+ showLineNumbers: true,
+ showGutter: true,
+});
+editor.session.setUseWrapMode(true);
+editor.session.setUseSoftTabs(true);
+editor.setValue(
+ "function activation(x) {\n\treturn -(1 / Math.pow(2, 0.6 * Math.pow(x, 2))) + 1;\n}"
+);
+editor.session.on("change", function (delta) {
+ const code = editor.getValue();
+ try {
+ // Evaluate the code and assign the function to a variable
+ const activation = eval(`(${code})`);
+ console.log(eval(`(${code})`));
+ } catch (error) {
+ console.error("Error in the code:", error);
+ }
+});
+
 //! Huegene Rules
 // Handle changes in random factor
 document
@@ -470,7 +495,6 @@ document
  automata.updateOffset(true);
  });
 
-// TODO: Add in fade and psychedelic effects
 // Switch on/off fade
 document
  .getElementById("huegene-fade-input")