DEV Community: Practicing Datscy

Ways to search the Document Object Model (DOM)

Practicing Datscy — Fri, 17 Oct 2025 15:59:30 +0000

Searching through the Document Object Model (DOM) can allow one to identify and/or modify root (ie: parent) and subroot elements (ie: children, sibling). The following are ways to search through the DOM:

querySelector,
querySelectorAll
tilda sibling notation in CSS.

Way 0: use querySelector

<!DOCTYPE>
<html>
<head></head>
<body>
<div class="javascript_css"></div>
<script>
function functionName0() {

  var divElement = document.createElement("div");
  divElement.setAttribute("id", "div0");
  divElement.setAttribute("class", "div_simple");
  divElement.style.position = "absolute";
  divElement.style.top = "0px";
  divElement.style.left = "85px";
  divElement.style.width = "200px";
  divElement.style.height = "200px";
  divElement.style.display = "flex";
  divElement.style.border = "2px solid gray";
  divElement.style.borderRadius = "5px";
  divElement.style.flexDirection = "column";
  divElement.style.gap = "2px";
  document.getElementsByClassName("javascript_css")[0].appendChild(divElement);

  for (var i=0; i<2; i++) {
    var pElement = document.createElement("p");
    pElement.setAttribute("id", "p"+i);
    pElement.setAttribute("class", "p_simple");
    pElement.style.backgroundColor = "floralwhite";
    pElement.style.width = "100px";
    pElement.style.height = "30px";
    pElement.style.border = "2px solid gray";
    pElement.innerText = "Text";
    divElement.style.borderRadius = "2px";
    document.getElementById("div0").appendChild(pElement);
  }
  // document.querySelector("#div0:hover")
  const matches = document.querySelectorAll(".p_simple");
   document.getElementById("div0").innerHTML += "matches: "+matches+"<br>";

  document.getElementById("div0").innerHTML += "matches.length: "+matches.length+"<br>";

  for (var i=0; i<matches.length; i++) {
    document.getElementById("div0").innerHTML += "matches: "+matches[i]+"<br>";
  }

}
</script>
<script>
sidebar();

function sidebar() {

  document.getElementsByClassName("javascript_css")[0].style.position = "absolute";
  document.getElementsByClassName("javascript_css")[0].style.width = "75px";
  document.getElementsByClassName("javascript_css")[0].style.height = "200px";
  document.getElementsByClassName("javascript_css")[0].style.border = "1px solid gray";
  document.getElementsByClassName("javascript_css")[0].style.borderRadius = "2px";
  document.getElementsByClassName("javascript_css")[0].style.fontSize = "12px";
  document.getElementsByClassName("javascript_css")[0].innerText = "Ways to search the Document Object Model (DOM)";

  functionName0();
}

</script>
</body>
</html>

Good Luck with your workflows and Happy Practicing! 👋

💻 GitHub | 🌷 Practicing Datscy @ Dev.to | 🌳 Practicing Datscy @ Medium

Ways to normalize/standardize an array

Practicing Datscy — Sun, 16 Mar 2025 17:40:44 +0000

In Data Science, it is common place to normalize array data, such that the minimum and maximum values are 0 and 1, respectively.

Similarly, array data can be scaled by the spread (standard deviation) and mean of the data, called standardization of data.

const x = [0.45, 0.45, 0.46, 0.56, 0.34, 0.05, 0.34, 0.56, 0.46, 0.44];

var output0 = normalization(x);
console.log("output0: ", output0);

var output1 = baseline_shift_maxScale(x);
console.log("output1: ", output1);

var output2 = standardization(x);
console.log("output2: ", output2);



function normalization(x) {
  return x.map((v,i) => { return (v-x.sort().at(0))/(x.sort().at(-1) - x.sort().at(0)); });
}


function standardization(x) {
  var mu = x.reduce((a,c) => a+c, 0)/x.length;
  var sum_difference = x.map((v,i) => { return Math.pow(v-mu,2); }).reduce((a,c) => a+c, 0)/x.length;
  var sigma = Math.sqrt(sum_difference);

  return x.map((v,i) => { return (v-mu)/sigma; });
}


function baseline_shift_maxScale(x) {
  var x_baseline_shift = x.map((v,i) => { return v-x.sort().at(0); });
  return x_baseline_shift.map((v,i) => { return v/x_baseline_shift.sort().at(-1); });
}

Output

For the normalization equation, the results are as follows. Notice that sometimes there will not be a 0 value, but it will be close to zero.
"output0: " Array [0.7843137254901961, 0.5686274509803922, 0.5686274509803922, 0.7647058823529412, 0.7843137254901961, 0.7843137254901961, 0.803921568627451, 0.803921568627451, 1, 1]

For the baseline shift normalization, there will aways be a 0 and 1 value.
"output1: " Array [0, 0.5686274509803922, 0.5686274509803922, 0.7647058823529412, 0.7843137254901961, 0.7843137254901961, 0.803921568627451, 0.803921568627451, 1, 1]

For standardization, the range will be centered about zero.
"output2: " Array [-2.5952424698247905, -0.5104216491899166, -0.5104216491899166, 0.20848208206348795, 0.2803724551888285, 0.2803724551888285, 0.352262828314169, 0.352262828314169, 1.071166559567574, 1.071166559567574]

Good Luck and Happy Practicing! 👋

💻 GitHub | 🌷 Practicing Datscy @ Dev.to | 🌳 Practicing Datscy @ Medium

How to use fonts with tag

Practicing Datscy — Sat, 15 Mar 2025 18:05:52 +0000

In this post, short examples are shown for how to use two popular fonts using the HTML< link> tag.

Awesome fonts

<!DOCTYPE>
<html>
<head></head>
<body>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free/css/all.min.css">


<i class="fas fa-robot">  Robot &#xf544</i>
<br>
<i class="fas fa-laptop">Laptop &#xf109 </i>


<div id="output"></div>

<script>
</script>
</body>
</html>

The output is the following, where the boxes are where the fontawesome icons and its unicode version are printed.
 Robot 
 Laptop 

Google fonts

<!DOCTYPE>
<html>
<head></head>
<body>

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Tangerine">

<h3 id="h3_text">Using Google fonts!</h3>

<style>
  #h3_text {font-family: "Tangerine"; font-size: 35px;}
</style>
<script>

</script>

</body>
</html>

Good Luck and Happy Practicing! 👋

💻 GitHub | 🌷 Practicing Datscy @ Dev.to | 🌳 Practicing Datscy @ Medium

References

Google fonts: https://developers.google.com/fonts/docs/getting_started?hl=en

Image capture from a video

Practicing Datscy — Fri, 14 Mar 2025 16:42:42 +0000

In this post, method/s to obtain image samples from a video are demonstrated. Often times for AI model fine-tuning, like fine-tuning with mobilenet, it is important to obtain images from a video.

Method 0

This method allows one to play or pause a video. When the video is paused, the video frame is printed as an image on the canvasElement.

<!DOCTYPE>
<html>
<head></head>
<body>

<video controls width="100" height="100" id="videoElement_id">
     <source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm" type="video/webm" id="sourceElement_id">
</video>

<canvas id="canvasElement_id" width="100" height="100"></canvas>

<script>

document.getElementById("videoElement_id").addEventListener("pause", processEvent_pause_click, false);
function processEvent_pause_click(event) {
  document.getElementById("sourceElement_id").play = false;
  print_a_frame();
}

var videoElement = document.getElementById("videoElement_id");

const ctx = document.getElementById("canvasElement_id").getContext("2d");

var width = document.getElementById("canvasElement_id").width;
var height = document.getElementById("canvasElement_id").height;

function print_a_frame() {
  function printFrame() { ctx.drawImage(videoElement, 0, 0, width, height); }
  function callBack(functionName) { printFrame(); }
  videoElement.requestVideoFrameCallback(callBack);
}

</script>
</body>
</html>

Good Luck and Happy Practicing! 👋

💻 GitHub | 🌷 Practicing Datscy @ Dev.to | 🌳 Practicing Datscy @ Medium

References

MDN requestVideoFrameCallback: https://developer.mozilla.org/en-US/docs/Web/API/HTMLVideoElement/requestVideoFrameCallback
MDN pause video: https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/pause_event

Build Deploy a LaTeX editor using GitHub Actions

Practicing Datscy — Wed, 25 Sep 2024 14:45:54 +0000

LaTeX is writing language that is often used for long articles, books, and/or papers. LaTeX represents the Greek characters Tau=T Epsilon=E Chi=X, implying "The Skill Art Technique" [1]. It is specifically used for professional writing and university thesis writing because:

it can print any font/symbol effortlessly due to its efficient type scripting system,
it can create 100-1000 page pdf documents without risk of file encoding errors and/or file corruption because all text is written in a plain text file (.tex) and directly transformed to pdf.

It consists of a text coding language that specifies document notation. The writer writes their text, mixed with the LaTeX text coding language, in a simple text file with the extension (.tex). The (.tex) file is then compiled into a .pdf file, using the LaTeX compiler using a series of postscript commands.

LaTeX is not popular for mainstream document users because Google Office Suite and Microsoft Office do not require users to write type scripting code with their text, and make them compile the final document into its visual product. Many mainstream users prefer to directly arrange document text into the final visual product, instead of using code to create the visual product. In order to overcome this dislike, there are many popular online LaTeX editors, like Overleaf, that hide the compiling process and code via templates such that users only need to write.

In this blog post, I show how to build and deploy a simple LaTeX webapp using GitHub Actions; a comparable alternative.

Steps to make a GitHub repository a LaTeX editor

Step 0: Make a GitHub Actions workflow

Create a GitHub repository
Make the repository a deployed page (Settings - Pages - Build and deployment: GitHub Actions)
Create .github and .github/workflows folders
Create the following yaml in the .github/workflows folder.

LaTeX compiles a file named index.tex that is in the repository, into a file called index.pdf. The git push command saves only the generated index.pdf file from the GitHub Actions runner to the repoName repository.

name: CI github pages

on:
  push:
    branches:
      - main

# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
permissions: write-all

# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
concurrency: 
      group: "pages"
      cancel-in-progress: false

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v4

      - name: Setup Pages
        uses: actions/configure-pages@v5

      - name: Install Latex
        run: |
          sudo apt-get install texlive;
          sudo apt-get install texlive-latex-extra;
          sudo apt-get install texlive-font-utils; 

          DOCUMENT_NAME="index.tex";
          DOCUMENT_NAME_WO_EXT="$(echo $DOCUMENT_NAME | cut -d '.' -f 1)";
          echo "DOCUMENT_NAME_WO_EXT = $DOCUMENT_NAME_WO_EXT"; 

          latex $DOCUMENT_NAME

          dvips -P pdf "${DOCUMENT_NAME_WO_EXT}.dvi"
          ps2pdf "${DOCUMENT_NAME_WO_EXT}.ps"

      - name: Commit and push changes
        run: |
          repoOwner=$(echo "${{ github.repository }}" | cut -d '/' -f 1);
          repoOwnerEmail="EMAIL_USERNAME@gmail.com";
          git config --global user.email ${repoOwnerEmail};
          git config --global user.name ${repoOwner};
          git pull origin main;
          git checkout main;
          git branch --set-upstream-to origin/main;
          git merge main --ff-only;
          git add /home/runner/work/repoName/repoName/index.pdf;
          git diff-index --quiet HEAD || git commit -m "add files" --allow-empty;
          git push

      - name: Upload Artifact
        uses: actions/upload-pages-artifact@v3
        with:
          # location of the artifacts
          path: "./"

  deploy:
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    runs-on: ubuntu-latest
    needs: build
    steps:
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v4

Step 1: Make a simple UI interface

Below is a simple HTML outline to make a webapp where the user can view both the .tex and .pdf file from the repository. Thus, in order to use this workflow/webapp:

Copy-paste changes in the .tex file on GitHub.
The GitHub Actions .yaml automatically launches when any changes are made to the files in the repository. Refresh the webapp page when the .yaml workflow finishes.
View the .tex and .pdf file using the GitHub Pages webapp url. Make changes to the .tex textarea in the webapp using spell check from the browser, and copy-paste the changes from the textarea into the .tex file on GitHub (which brings us back to step 1!).

<!DOCTYPE html>
<html>
<head></head>
<body>

<!-- ---------------------------------------- -->
<!-- View two split window -->
<div align="left">
<table style='text-align: left; width: 500px; display:block'>
<tr>

<th id="pdf_viewer_input">
<h3>[Step 0] View the .tex file.</h3>
<textarea id="tex_file" rows="35" cols="100" placeholder=".tex file" style="display:block" width:100px; height: 200px;></textarea>
<br><br>
<button id="show_tex_wo_CORS" onclick="show_tex_wo_CORS()">[Step 0] Show .tex file</button>
</th>

<!-- ---------------------------------------- -->

<th id="pdf_viewer_output">
<h3>[Step 1] View PDF.</h3>
<br><br>
<button id="show_pdf_wo_CORS" onclick="show_pdf_wo_CORS()">[Step 1] Show .pdf file.</button>
</th>

</tr>
</table>
</div>  
<!-- ---------------------------------------- -->


<!-- ---------------------------------------- -->
<!-- CSS -->
<style>
div { padding: 10px; display:block; font-family:courier; font-size:15px; height:300px; }

div#notification { position: relative; color: #3236a8; }
div#error { position: relative; color: #bd1f17; }

table {vertical-align: top; border-collapse: collapse; position: relative; z-index: 0; border: 0px solid black;}

tr {vertical-align: top; border: 0px solid black; padding: 30px 30px; }

th, td {vertical-align: top; border: 0px solid black; padding: 10px; }
th#pdf_viewer_input {width: 100%; }
th#pdf_viewer_output {width: 100%; }

object#pdf_object_element {position: absolute; vertical-align: top; top: 200; z-index: 200; }
</style>


<!-- --------------------------------------------------- -->

<script>


// ----------------------------------------------------
// Step 0
// ----------------------------------------------------
async function show_tex_wo_CORS() {
var file_download_url = "https://repoOwner.github.io/repoName/index.tex";

    return await fetch(file_download_url)
        .then(res => res.text())
        .then(str_data => {
      console.log("str_data: ", str_data);
      document.getElementById("tex_file").innerHTML = str_data;
    })
        .catch(error => { console.log(error); });
}

// ----------------------------------------------------
// Step 1
// ----------------------------------------------------
// Show pdf without CORS
async function show_pdf_wo_CORS() {

  try {
    // without CORS: name of file
    var file_download_url = "https://repoOwner.github.io/repoName/index.pdf";

    let file_download_url_name = file_download_url.split('/').pop();
    console.log("file_download_name: ", file_download_url_name);

    var objectElement = document.createElement('object');
    objectElement.setAttribute("id", "pdf_object_element");
    objectElement.setAttribute("type", "application/pdf");
    objectElement.setAttribute("width", 800);
    objectElement.setAttribute("height", 1200);
    objectElement.setAttribute("data", file_download_url_name);
    document.getElementById('pdf_viewer_output').appendChild(objectElement);

  } catch (error){
    document.getElementById("error").innerText = error;
  }

}

</script>
</body>
</html>

View of the webapp displaying both the .tex and .pdf documents

In a more complex version, the webapp can REST API PUT (ie: save) changes from the textarea to the .tex file in the repository. And, then launch the backend (.yaml) to recreate the index.pdf, once the index.pdf is recreated in the repository the webapp refreshes both the index.tex and the index.pdf.

Happy Practicing! 👋

💻 GitHub | 🌷 Practicing Datscy @ Dev.to | 🌳 Practicing Datscy @ Medium

References

LaTeX - Wikipedia: https://en.wikipedia.org/wiki/LaTeX

Tensorflow.js basics: LSTM prediction per timestep

Practicing Datscy — Fri, 20 Sep 2024 19:18:20 +0000

The Long Short Term Model (LSTM) is a sequential neural network that uses past datapoints (within a window called timesteps) to predict future datapoints. It is a powerful model used for forecasting with a repetitive model structure that allows for past value relationships to be remembered, and thus used for future prediction, by passing two matrices called hidden cell layer matrices (a, c) from one timestep to the next. The hidden cell layer matrices have size [n_a, batch_size, timesteps], where n_a is a parameter the modeler can choose with respect to the data. The larger n_a is set, one is able to "describe the data" more; however "describing the data" too much can also prevent patterns to be found in the data. So, setting n_a not too small and not too big often gives the best results.

Key parameters to tune in an LSTM

Tuning the models returnState=true allows for these hidden cell layer matrices (a, c) to be passed from one timestep to the next. returnState=false does not pass the (a, c) matricies, but a reliable model can still be obtained without the accumulated hidden cell layer information.
returnSequences=true allows for the output to be 3 dimensional [batch_size, n_a, timesteps], where as returnSequences=false allows for the output to be 2 dimensional [batch_size, n_a]. Notice in the stacked layer model definition below, we set returnSequences=true for the first 2 layers to pass all the timestep information to the next layer, but the 3rd lstm layer has returnSequences=false to only pass out the accumlated data in n_a data points.
stateful is the final important parameter, it allows accumulated data points to be passed from batch to batch. In this example, we do not use it for simplicity.

Main webapp

Below is a simple webapp to demonstrate how to set the parameters for the Tensorflow.js LSTM model, to predict one future datapoint per timesteps.

<!DOCTYPE html>
<html>
<head></head>
<body>

<h1>Timeseries webapp: improved for testing several cases</h1>
<ol type="A">
<li>Select a button.</li>
</ol>

<!-- ---------------------------------------- -->
<!-- View two split window -->
<div align="left">
<table style='text-align: left; width: 500px; display:block'>
<tr>

<th id="table_leftside_input">

<h3>[Step 0] Input epochs and select a button.</h3>

<input id="epochs" type="text" value="" placeholder="epochs" rows="10" cols="100" style="display:block; text-align: left; width: 600px;">

<br><br>

<button id="run_per_timestep" onclick="run_per_timestep()">run_per_timestep</button>

<br><br>

<progress id="progress_bar" max="100" value="0" style="display:none">0%</progress>

<!-- ---------------------------------------- -->

<th id="table_rightside_output">
<h3>[Step 1] View Results.</h3>
<div id="data_display" style="display:block; text-align: left; width: 600px; height: 600px">
<br>
<div id="notification"></div>
<br>
<div id="error"></div>
</th>

</tr>
</table>
</div>  
<!-- ---------------------------------------- -->



<!-- ---------------------------------------- -->
<!-- CSS -->
<style>
div { padding: 10px; display:block; font-family:courier; font-size:15px; }
div#notification { position: relative; color: #3236a8; }
div#error { position: relative; color: #bd1f17; }

table {vertical-align: top; border-collapse: collapse; position: relative; z-index: 0; border: 0px solid black;}

tr {vertical-align: top; border: 0px solid black; padding: 30px 30px; }

th, td {vertical-align: top; border: 0px solid black; padding: 10px; }
th#char_prediction_input {width: 100%; }
th#char_prediction_output {width: 100%; }

div#data_display {position: absolute; vertical-align: top; top: 200; z-index: 200; }
</style>

<!-- ---------------------------------------- -->

<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@latest"></script>

<script src="https://cdn.plot.ly/plotly-2.30.0.min.js" charset="utf-8"></script>

<!-- ---------------------------------------- -->

<script>
var past_temperature_data = [23,  22.5, 22.3, 21.5, 21.3, 21.3, 21.2, 22.1, 24.3, 26.5, 29.1, 31.1, 32.8, 34.1, 34.5, 34.6, 34.2, 33.3, 31.4, 29, 27.1, 25.9, 23.9, 23.1, 22.3, 21.4, 20.9, 19.9, 19.4, 19.2, 19.8, 21.7, 23.8, 25.3, 27.6, 30, 29.1, 29.7, 30.7, 30.1, 29.9, 29.3, 27.1, 22.9, 20, 20.7, 20.5, 20.5, 20.4, 20.4, 20.2, 20.1, 19.7, 19.5, 19.4, 20.3, 21.9, 23.7, 25.4, 26.8, 28.2, 29, 29.4, 29.6, 29.6, 28.9, 27.8, 26.1, 24.8, 24.4, 23.9, 23, 22.2, 21.1, 20.5, 19.7, 19.1, 18.7, 19.5, 20.4, 22.2, 24.4, 26.5, 28.1, 30.3, 31, 31.3, 26.3, 24.9, 24.3, 24, 23.1, 22.6, 22.4, 22, 21.2, 21.3, 20.3, 20, 20.3, 20.2, 20.2, 20.2, 20.8, 21.5, 21.3, 21.6, 21.6, 22.3, 22.5, 22, 22.1, 22.4, 21.4, 21.1, 20.4, 20.1, 19.8, 19.6, 19.4, 17.7, 18.1, 17.9, 17.5, 17, 16.9, 16.7, 16.8, 17, 17.1, 17.4, 18.1, 18.9, 18.9, 20.3, 20.7, 19.8, 19.9, 19.2, 18.3, 17.7, 16.6, 16, 15.1, 14.5, 13.9, 13.7, 14, 13.7, 13.7, 14.2, 14.6, 15.8, 16.7, 18.1, 20.8, 22, 22.7, 24, 23.7, 24.4, 24.1, 23.3, 21.5, 20.3, 19.6, 19.2, 19, 18.9, 18.4, 18, 17.6, 17.3, 17.1, 17.2, 18.2, 20.2, 23.2, 25.1, 26.1, 28.1, 29.8, 30.1, 29.4, 27.8, 20.5, 20, 19.1, 19.2, 19, 18.9, 18.8, 18.1, 18, 18, 17.9, 17.7, 17.4, 16.5, 17.2, 18.4, 19.2, 20.3, 20.5, 21.9, 21.8, 21.5, 20.4, 18.9, 18.6, 18.5, 18, 17.4, 17.3, 17.2, 17.1, 17, 16.4, 16.1, 15, 15.2, 15.5, 15.5, 15.8, 16.3, 17.7, 18.8, 19.1, 20.1, 19.8, 19.7, 19.5, 19.8, 19.8, 19.4, 18.9, 18.1, 17.7, 17.3, 17];

var timesteps = 0;
var num_of_features = 0;
var batch_size = 0;
var batch_size_test = 0;
var num_of_outputs = 1;
var lstmModel = [];
var epochs = 500;

async function run_per_timestep() {

var obj = await create_xs_ys_predict_1_datapoint();

lstmModel = await modelDefinition_prediction_per_timestep();

var xs_train_tf = obj.xs_train;
var ys_train_tf = obj.ys_train;
var xs_test_js = obj.xs_test;
var ys_test_js = obj.ys_test;

await compile_train_predict_lstm(xs_train_tf, ys_train_tf, xs_test_js, ys_test_js, lstmModel);
}
</script>
</body>
</html>

Create the dataset

Below the xs_train, ys_train, xs_test, and ys_test matrices are created from the data array above. The xs data is [timesteps] long and ys is the datapoint after each timestep.

// -----------------------------------------------
// [0] xs and ys creation
// -----------------------------------------------
async function create_xs_ys_predict_1_datapoint() {

// Prepare the X matrix: [num_of_features=1, num_of_datapoints=240]
var xs_2d_arr = [past_temperature_data];
console.log('xs_2d_arr: ', xs_2d_arr);

var shap = await shape(xs_2d_arr);
console.log('Shape xs_2d_arr: ', shap);

// -------------------------------------------------

// Calculate [batch_size, timestep, num_of_features] to separate X and Y
timesteps = 12; // Try a longer window such that the LSTM has more past data to train on, for a more accurate result
console.log('timesteps: ', timesteps);

num_of_features = xs_2d_arr.length;  // num_of_features_OR_colnum
console.log('num_of_features: ', num_of_features);

batch_size = Math.floor(xs_2d_arr[0].length / timesteps); // 20
console.log('batch_size: ', batch_size);

// -------------------------------------------------

var xs_3d_train = [];
var ys_2d_train = [];
var xs_3d_test = [];
var ys_2d_test = [];

// The number of batch_size to keep for testing the model
batch_size_test = Math.floor(batch_size*0.1);
console.log("batch_size_test: ", batch_size_test);

for (var feats=0; feats<num_of_features; feats++) {
// for the organization, features are rows
var temp_datappoints_arr = xs_2d_arr.at(feats);
console.log("temp_datappoints_arr: ", temp_datappoints_arr);

// cut temp_datappoints_arr into X and Y, every timesteps
var x_temp = [];
var y_temp = [];
var x_temp_test = [];
var y_temp_test = [];

// loop over the data by batch_size, to cut the data by [batch_size] number of [timesteps]
for (var num_of_desired_predictions=0; num_of_desired_predictions<batch_size; num_of_desired_predictions++) {
var st = num_of_desired_predictions * timesteps;
var stop = st + timesteps;

// Separate train and test data
if (num_of_desired_predictions > batch_size-batch_size_test-1) {
// Test data set
x_temp_test.push(temp_datappoints_arr.slice(st, stop-1));
y_temp_test.push(temp_datappoints_arr.at(stop-1));
} else {
// Train data set
x_temp.push(temp_datappoints_arr.slice(st, stop-1)); // from [0-(timesteps-2)th] value
y_temp.push(temp_datappoints_arr.at(stop-1));  // returns the (timesteps-1)th value

if (num_of_desired_predictions == 0) {
console.log("x_temp: ", x_temp);
console.log("y_temp: ", y_temp);
}
if (num_of_desired_predictions == batch_size-batch_size_test) {
console.log("x_temp_test: ", x_temp_test);
console.log("y_temp_test: ", y_temp_test);
}
}
}
xs_3d_train.push(x_temp);
ys_2d_train.push(y_temp);
xs_3d_test.push(x_temp_test);
ys_2d_test.push(y_temp_test);
}

// Train shape1
shap = await shape(xs_3d_train);  
console.log('Shape xs_3d_train: ', shap);  // [num_of_features, batch_size, timesteps] = [ 1, 129, 1 ]

shap = await shape(ys_2d_train);
console.log('Shape ys_2d_train: ', shap); // [num_of_features, batch_size] = [ 1, 129 ]

// -------------------------------------------------

// Test shape1
shap = await shape(xs_3d_test);  
console.log('Shape xs_3d_test: ', shap);  // [num_of_features, batch_size, timesteps] = [ 1, 1, 1 ]

shap = await shape(ys_2d_test);  
console.log('Shape ys_2d_test: ', shap);  // [num_of_features, batch_size]

// -------------------------------------------------

// Update timesteps, timesteps should be 1 less due to assigning the last datapoint to Y.
timesteps = timesteps - 1;
console.log('timesteps: ', timesteps); // 1

// Recalculate batch_size train, taking into account batch_size_test that was not included in xs_train
batch_size = batch_size - batch_size_test;
console.log('batch_size: ', batch_size); // 129

// -------------------------------------------------

// Put X_3d_test_shape1 [num_of_features, batch_size, timesteps]=[0,1,2] into [batch_size, timesteps, num_of_features]=[1,2,0]

var xs_3d_arr = await exchange_3d_dimensions(xs_3d_train, [1,2,0]);

// Train shape
shap = await shape(xs_3d_arr);  
console.log('Shape xs_3d_arr: ', shap); // [batch_size, timesteps, num_of_features] = [ 129, 1, 1 ]

var xs_train_tf = await tf.tensor(xs_3d_arr);
console.log('Tensorflow tensor (X train) - xs_train_tf: ', xs_train_tf);

// -------------------------------------------------

var xs_test_3d_jsArr = await exchange_3d_dimensions(xs_3d_test, [1,2,0]);

// Test shape
shap = await shape(xs_test_3d_jsArr);  
console.log('Shape xs_test_3d_jsArr: ', shap); // [batch_size_test, timesteps, num_of_features] = [ 1, 1, 1 ]

// -------------------------------------------------

// [Train] Assign Y to a 1D tensor
console.log('ys_2d_train: ', ys_2d_train); // [num_of_features, batch_size] = [ 1, 129 ]

// So, need to stack [batch_size] per [feature]
var ys_2d_arr = [];
for (var i=0; i<num_of_features; i++) {
ys_2d_arr = ys_2d_arr.concat(ys_2d_train[i]);
}

// Test shape
shap = await shape(ys_2d_arr);  
console.log('Shape ys_2d_arr: ', shap);

var ys_train_tf = await tf.tensor(ys_2d_arr);
console.log('Tensorflow tensor (Y train) - ys_train_tf: ', ys_train_tf);

// -------------------------------------------------

  // [Test] Assign Y to a 1D tensor
console.log('ys_2d_test: ', ys_2d_test); // [num_of_features, batch_size] = [ 1, 129 ]

// So, need to stack [batch_size] per [feature]
var ys_test_1d_jsArr = [];
for (var i=0; i<num_of_features; i++) {
ys_test_1d_jsArr = ys_test_1d_jsArr.concat(ys_2d_test[i]);
}

  // -------------------------------------------------

return {xs_train: xs_train_tf, ys_train: ys_train_tf, xs_test: xs_test_3d_jsArr, ys_test: ys_test_1d_jsArr};
}

Model definition for predicting one datapoint per timestep

async function modelDefinition_prediction_per_timestep() {

  // -----------------------

var n_a = 2*timesteps;  // timesteps;
var num_of_outputs = 1; // a value from 1 to timesteps, or the number of data points to predict into the future

  // -----------------------

// Input layer
const input = tf.input({batchShape: [batch_size, timesteps, num_of_features]});
console.log("input: ", input.name);

console.log("Input: ", JSON.stringify(input.shape));
// [129=batch_size, 1=timesteps, 1=num_of_features]

// -----------------------

// LSTM layer 0
const lstm0 = tf.layers.lstm({
recurrentActivation: 'hardSigmoid',
units: n_a,

// receive a prediction per datapoint
returnSequences: true,

// do not return the a and c matricies
returnState: false,
kernelInitializer: 'heNormal',

// batchSize = batch_size gives Input - LSTM:  [129,129]
batchSize: batch_size,
inputShape: [timesteps, num_of_features],
stateful: false,
// If stateful=true it gives Error: Input 0 is incompatible with layer lstm_LSTM1: expected shape=168,,1, found shape=32,3,1.
activation: 'tanh',
trainable: true,
dropout: 0.2
});

// Apply lstm layer to the model
const input_lstm0 = lstm0.apply(input);
console.log("input_lstm0: ", input_lstm0.name);

console.log("Input - LSTM0: ", JSON.stringify(input_lstm0.shape));
// Input - LSTM0: [m=batch_size=129, n_y=units=num_of_lstm_outpus=1]

// This size is the shape of y_total_forward_pass per timestep

// y_hat<t>_(n_y, batch_size)

// -----------------------

// LSTM layer 1
const lstm1 = tf.layers.lstm({
recurrentActivation: 'hardSigmoid',
units: n_a,

// receive a prediction per timestep
returnSequences: true,

// do not return the a and c matricies
returnState: false,
kernelInitializer: 'heNormal',

// batchSize = batch_size gives Input - LSTM:  [129,129]
batchSize: batch_size,
inputShape: [timesteps, num_of_features],
stateful: false,
// If stateful=true it gives Error: Input 0 is incompatible with layer lstm_LSTM1: expected shape=168,,1, found shape=32,3,1.
activation: 'tanh',
trainable: true,
dropout: 0.2
});

// Apply lstm layer to the model
const input_lstm0_lstm1 = lstm1.apply(input_lstm0);
console.log("input_lstm0_lstm1: ", input_lstm0_lstm1.name);

console.log("Input - LSTM0 - LSTM1: ", JSON.stringify(input_lstm0_lstm1.shape));
// Input - LSTM: [m=batch_size=129, n_y=units=num_of_lstm_outpus=1]

// This size is the shape of y_total_forward_pass per timestep

// y_hat<t>_(n_y, batch_size)

// -----------------------

// LSTM layer 2
const lstm2 = tf.layers.lstm({
recurrentActivation: 'hardSigmoid',
units: n_a,

// receive a prediction per timestep
returnSequences: false,

// do not return the a and c matricies
returnState: false,
kernelInitializer: 'heNormal',

// batchSize = batch_size gives Input - LSTM:  [129,129]
batchSize: batch_size,
inputShape: [timesteps, num_of_features],
stateful: false,
// If stateful=true it gives Error: Input 0 is incompatible with layer lstm_LSTM1: expected shape=168,,1, found shape=32,3,1.
activation: 'tanh',
trainable: true,
dropout: 0.2
});

// Apply lstm layer to the model
const input_lstm0_lstm1_lstm2 = lstm2.apply(input_lstm0_lstm1);
console.log("input_lstm0_lstm1_lstm2: ", input_lstm0_lstm1_lstm2.name);

console.log("Input - LSTM0 - LSTM1 - LSTM2: ", JSON.stringify(input_lstm0_lstm1_lstm2.shape));
// Input - LSTM: [m=batch_size=129, n_y=units=num_of_lstm_outpus=1]

// This size is the shape of y_total_forward_pass per timestep

// y_hat<t>_(n_y, batch_size)

// -----------------------

// Dense layer
// const denseLayer1 = tf.layers.dense({units: num_of_outputs, inputShape: [timesteps, num_of_features]});
const denseLayer1 = tf.layers.dense({units: num_of_outputs});

// -----------

const input_lstm0_lstm1_lstm2_dense = denseLayer1.apply(input_lstm0_lstm1_lstm2);
console.log("Input - LSTM0 - LSTM1 - LSTM2 - Dense: ", JSON.stringify(input_lstm0_lstm1_lstm2_dense.shape));

// -----------------------

lstmModel = await tf.model({inputs: input, outputs: input_lstm0_lstm1_lstm2_dense});
console.log('lstmModel: ', lstmModel);

return lstmModel;
}

Compile and train the model

Below is the function that compiles and trains the LSTM model.

// -----------------------------------------------
// [2] compile_train_predict model
// -----------------------------------------------
async function compile_train_predict_lstm(xs_train_tf, ys_train_tf, xs_test_js, ys_test_js, lstmModel) {

await lstmModel.compile({optimizer: tf.train.adam(), loss: tf.losses.meanSquaredError, metrics: ['mse'],});

epochs = document.getElementById('epochs').value;

const history = await lstmModel.fit(xs_train_tf, ys_train_tf, {
batchSize: batch_size,
epochs: epochs,
callbacks: { onEpochEnd: async (epoch, logs) => {
if (epoch % 50 == 0) {
            document.getElementById("progress_bar").style.display = "block";
document.getElementById("progress_bar").value = epoch/epochs*100;
console.log('epoch: ', epoch);
// console.log('logs: ', logs);
}
}}
});
console.log('history: ', history);

document.getElementById("progress_bar").style.display = "none";

// -----------------------------------------------
// Plot mse
// -----------------------------------------------
var mse = history.history.mse;
var loss = history.history.loss;
var epochs_plot = await Array.from({length: mse.length}, (val, ind) => { return ind; });

// https://plotly.com/javascript/line-charts/
var title_text = "Model results: loss, mse";
var x_text_trace1and2 = "Epochs";
var y_text_trace1and2 = "Mean squared error or loss";
var trace1 = {x: epochs_plot, y: mse, mode: 'lines+markers', type: 'line', name: 'MSE'};
var trace2 = {x: epochs_plot, y: loss, mode: 'lines+markers', type: 'line', name: 'Loss'};
var data = [trace1, trace2];
var layout = {grid: {rows: 1, columns: 1, pattern: 'independent'}, title: title_text, xaxis: {title: x_text_trace1and2}, yaxis: {title: y_text_trace1and2}};
Plotly.newPlot('data_display', data, layout);


for (var i=0; i<xs_test_js.length; i++) {

console.log('---------------------TEST MODEL: ', i, ' ---------------------: ');

// ------------------------

// Repeat entries to obtain a 3d array that is the same size as xs_train
// input: xs_test_js is a JS array [ batch_size, timesteps, num_of_features=1 ]
var xs_test_js_batch = await create_correct_batchSize_for_xsTest(xs_test_js[i], batch_size);
// console.log('xs_test_js_batch: ', xs_test_js_batch);
// output: xs_test_js is a JS array [ 337, 1, 1 ]

shap = await shape(xs_test_js_batch);  
console.log('Shape xs_test_js_batch: ', shap);

// ------------------------

// Evaluation of prediction with respect to the model
var result = lstmModel.predict( tf.tensor(xs_test_js_batch) );

// ------------------------

// Obtain prediction output from model
var model_predictions = result.dataSync()[0];  
console.log('model_predictions : ', model_predictions);

// ------------------------

// Correct response
console.log("ys_test_js: ", ys_test_js.at(i));

  // ------------------------
}
}

The following figure shows how the mean squared error reduces over each iteration, thus showing that the model is able to reduce the loss and learn the timeseries.

Model output shape

Below shows the model output shape for each layer, showing how returnSequences set to true outputs a 3 dimensional layer. Whereas returnSequences=false outputs a 2 dimensional layer, thus allowing for the dense layer to be applied to reduce n_a=hidden lstm layer=22 to a single output value. The final output size is [18,1], thus one output per each of the 18 batches.

Test prediction output

In the figure below, we can see that with this LSTM model definition we can pretty accurately predict the next data point in the timeseries; forecasting for one data point. The first test prediction is 17.26, for a target value of 19.1.

Subfunctions for this post are found below:

// -----------------------------------------------
// SUBFUNCTIONS
// -----------------------------------------------
async function recur_func(arr) {
if (arr != undefined) {
return [arr[0], arr.length];
} else {
return arr;
}
}

async function shape(arr) {
var out = await recur_func(arr);
var shap = [out[1]];
var c = 0; // typically work with 4D arrays or less
while (out != undefined && c < 4) {
out = await recur_func(out[0]);
if (out != undefined) {
shap.push(out[1]);
}
c = c + 1;
}

if (shap.length > 1) {
shap = shap.slice(0, shap.length-1);
}

return shap;
}

// -----------------------------------------------

async function zeros(dims) {

// dims: [desired_0th_dim, desired_1st_dim, desired_2nd_dim]

var out = [];

if (dims.length == 1) {
var desired_0th_dim = dims.at(0);

out = Array.from({length: desired_0th_dim}, (val, ind) => { return 0; });

} else if (dims.length == 2) {
var desired_0th_dim = dims.at(0);
var desired_1st_dim = dims.at(1);

for (var i=0; i<desired_0th_dim; i++) {
var arr = Array.from({length: desired_1st_dim}, (val, ind) => { return 0; });
out.push(arr);
}

} else if (dims.length == 3) {
var desired_0th_dim = dims.at(0);
var desired_1st_dim = dims.at(1);
var desired_2nd_dim = dims.at(2);

for (var i=0; i<desired_0th_dim; i++) {
temp = [];
for (var j=0; j<desired_1st_dim; j++) {
var arr = Array.from({length: desired_2nd_dim}, (val, ind) => { return 0; });
temp.push(arr);
}
out.push(temp);
}

} else {
console.log('Enter an array of length 1, 2, or 3. (ie: [desired_0th_dim, desired_1st_dim, desired_2nd_dim])')
}

return out;
}

// -----------------------------------------------

async function exchange_3d_dimensions(arr_3d, output_dims_index) {

// dims: [2,1,2] implying the output dimension size
// OR
// output_dims_index: [0,2,1] implying how to switch the dimension index of arr_3d, this is technically more precise because two dimension indexes could have the same size. So one is specifying exactly which dimension index to use for a particular dimension.

// Way 0
// dims notation [2,2,1] => [2,1,2]

// Way 1
// need to say which dimension should switch with, which dimension
// output_dims_index specifies the [dimension index] of the desired output array
// [2,2,1] = [org_0th_dim, org_1st_dim, org_2nd_dim] => [2,1,2] = [org_0th_dim, org_2nd_dim, org_1st_dim] = [0,2,1]


// [0] List the original array location_values and values
var org_0th_dim = [];
var org_1st_dim = [];
var org_2nd_dim = [];
var val = [];

for (var i=0; i<arr_3d.length; i++) {
for (var j=0; j<arr_3d[0].length; j++) {
for (var k=0; k<arr_3d[0][0].length; k++) {
      org_0th_dim.push(i);
      org_1st_dim.push(j);
      org_2nd_dim.push(k);
      val.push(arr_3d[i][j][k])
}
}
}

// Need to transform output_dims_index, from index to dimensions
var dims_of_org_arr = [arr_3d.length, arr_3d[0].length, arr_3d[0][0].length];
var dims = output_dims_index.map((val, i) => { return dims_of_org_arr.at(val); });


// [1] Make the new shape array, filled with zeros
var desired_3d = await zeros(dims);

// Exchange notation for desired output index dimensions
var all = [org_0th_dim, org_1st_dim, org_2nd_dim];
var all_switched = output_dims_index.map((val, i) => { return all.at(val); });
org_0th_dim = all_switched.at(0);
org_1st_dim = all_switched.at(1);
org_2nd_dim = all_switched.at(2);


// [2] Fill in output shaped 3d array
var desired_0th_dim = dims.at(0);
var desired_1st_dim = dims.at(1);
var desired_2nd_dim = dims.at(2);

for (var i=0; i<desired_0th_dim; i++) {
for (var j=0; j<desired_1st_dim; j++) {
for (var k=0; k<desired_2nd_dim; k++) {

// cycle over the index of a for every i,j,k value
      for (var ind=0; ind<org_0th_dim.length; ind++) {
      if (org_0th_dim.at(ind) == i && org_1st_dim.at(ind) == j && org_2nd_dim.at(ind) == k) {
desired_3d[i][j][k] = val.at(ind);
      }
      }
}
}
}

return desired_3d;      
}

// -----------------------------------------------

async function transpose_2d_array(arr) {

var transpose_colNum = arr.length;
var transpose_rowNum = arr.at(0).length;
var transpose_arr = [];
for (var i=0; i<transpose_rowNum ; i++) {
const col = Array.from({ length: transpose_colNum }, (_, i) => 0);
transpose_arr.push(col);
}

for (var i=0; i<arr.length; i++) {
for (var j=0; j<arr.at(i).length; j++) {
transpose_arr[j][i] = arr[i][j];
}
}
return transpose_arr;
}

// -----------------------------------------------


async function flat_arr(arr) {

var str = JSON.stringify(arr);

const regex = /\b\d+\.\d+\b|\b\d+\b/g;
var matches = str.match(regex);
console.log('matches: ', matches);

var floatArray = matches.map((val, ind) => {
return Number(val);
});

return floatArray;
}

// -----------------------------------------------

async function reshape_arr(arr, desired_dims) {

// Flatten array
var xs_test_flat = await flat_arr(arr);   // [timesteps=11]
console.log('xs_test_flat: ', xs_test_flat);

// -----------------------------

var arr = await zeros(desired_dims);

const shap = await shape(arr);  
console.log('Shape arr: ', shap);

if (shap.length == 2) {
// Reshape 1D_flat to 2d
var c = 0;
for (var i=0; i<desired_dims[0]; i++) {
for (var j=0; j<desired_dims[1]; j++) {
arr[i][j][k] = xs_test_flat.at(c);
c = c + 1;
}
}
} else if (shap.length == 3) {
// Reshape 1D_flat to 3d
var c = 0;
for (var i=0; i<desired_dims[0]; i++) {
for (var j=0; j<desired_dims[1]; j++) {
for (var k=0; k<desired_dims[2]; k++) {
      arr[i][j][k] = xs_test_flat.at(c);
c = c + 1;
}
}
}
} else if (shap.length == 4) {
// Reshape 1D_flat to 4d
var c = 0;
for (var i=0; i<desired_dims[0]; i++) {
for (var j=0; j<desired_dims[1]; j++) {
for (var k=0; k<desired_dims[2]; k++) {
for (var l=0; l<desired_dims[3]; l++) {
      arr[i][j][k][l] = xs_test_flat.at(c);
c = c + 1;
}
}
}
}
} else {
arr = xs_test_flat;
}
// -----------------------------

console.log('arr: ', arr);

// -----------------------------

return arr;
}

// -----------------------------------------------

async function create_correct_batchSize_for_xsTest(xs_test_3d_jsArr, batch_size) {

// xs_test_3d_jsArr is a JS array [ 1, 11, 1 ]

var xs_test_flat = await flat_arr(xs_test_3d_jsArr);
console.log('xs_test_flat: ', xs_test_flat);

// ------------------------

var xs_test_1d_arr = xs_test_flat;

var xs_test_2d_arr = xs_test_1d_arr.map((val, ind) => { return [val]; });
console.log('xs_test_2d_arr: ', xs_test_2d_arr); // [timesteps=11, num_of_features=1]

shap = await shape(xs_test_2d_arr);  
console.log('Shape xs_test_2d_arr: ', shap);

// -----------------------------

// Repeat xs_test batch_size times
xs_test_3d_arr = [];
for (var i=0; i<batch_size; i++) {
xs_test_3d_arr.push(xs_test_2d_arr)
}
// console.log('xs_test_3d_arr: ', xs_test_3d_arr);  // [batch_size=19, timesteps=11, num_of_features=1]

shap = await shape(xs_test_3d_arr);  
console.log('Shape xs_test_3d_arr: ', shap);

return xs_test_3d_arr;
}

// -----------------------------------------------

Happy Practicing! 👋

💻 GitHub | 🌷 Practicing Datscy @ Dev.to | 🌳 Practicing Datscy @ Medium

References

Time series forecasting analysis with LSTM and Regression with Tensorflow.js: https://medium.com/towardsdev/time-series-forecasting-analysis-with-lstm-with-tensorflow-js-cef6e517bcd3
Tensorflow.js LSTM: https://js.tensorflow.org/api/latest/#layers.lstm

Drag and Drop HTML elements and files

Practicing Datscy — Wed, 11 Sep 2024 14:16:22 +0000

Webapps can be useful for data collection/ingestion. If the mechanism to collect and store data is easy to use, lot of useful data can be amassed for data processing. One easy to way to move data from one location to another is the Drag and drop functionality on webapps.

In this post, I show three examples for how to move and store HTML element data and files using JavaScript drag and drop programming.

Example 0: Drag and drop an HTML element

<!DOCTYPE html>
<html>
<head></head>
<body>

<h1>Example 0: Drag and Drop HTML text/elements</h1>
<div id="HTML_text" draggable="true" class="dragElement">HTML text</div>

<br><br>

<div id="dropArea" class="dropArea"> Drop for Example 0 & 1</div>

<style>
.dropArea { height: 200px;
    width: 200px;
    border-radius: 15px;
    border: 0.25px solid black;
    background-color: #7084c4;
}

.HTML_text { cursor: move; }
</style>
<script>
var example;
var other_data_related_to_dragEvent = {};
var html_element_drag_list_metaData = [];


// ----------------------------------------------------
// Drag functionality: Example 0
// ----------------------------------------------------
document.getElementById("HTML_text").addEventListener("dragstart", processEvent_drag_example0, false);
// document.getElementById("HTML_text").addEventListener("dragend", processEvent_drag_example0, false); // to stop

function processEvent_drag_example0(event) {
    example = 0;
    event.dataTransfer.setData('text/plain', event.target.id);
}
// ----------------------------------------------------

// ----------------------------------------------------
// Drop functionality: Example 0 and 1
// ----------------------------------------------------
document.getElementById("dropArea").addEventListener("drop", processEvent_drop, false);
document.getElementById("dropArea").addEventListener("dragover", processEvent_dragover, false);

function processEvent_drop(event) {

    // Stop defaults and allow drop events
    event.preventDefault();

    // Detects files dragged from pc 
    html_element_drag_list_metaData.push(event.dataTransfer.files);
    console.log('html_element_drag_list_metaData: ', html_element_drag_list_metaData);

    // Detects html elements dragged from the html page
    const data = event.dataTransfer.getData('text/plain');
    console.log('data: ', data);
    if (data.length != 0) {
      // find the draggable element based on the data
      const dragElement = document.getElementById(data);
      console.log('dragElement: ', dragElement);

      // Append the draggable element 
      event.target.appendChild(dragElement);

    }
}

function processEvent_dragover(event) {
  // Stop defaults and allow drop events
  event.preventDefault();
}
// -------------------------------------------------

</script>
</body>
</html>

Before dragging and dropping the HTML text (HTML text) to the purple dropArea

After dragging and dropping the HTML text (HTML text) to the purple dropArea

In example 0, the HTML text element was actually moved into the drop area. The id of the div for HTML text appeared in the variable data, thus one can keep track of the element ids inside the dropArea. This example is useful for organizing/storing existing html written on a webapp, but in most data ingestion situation one wants to organize/store data from different places.

Example 1: a file upload is represented as a draggable HTML element/emoji

This example is a cross between dragging an HTML element and dragging a file. One can select a file using the Browse button; drag a file to the browse button or click on the browse button to select a file. Then an emoji appears after the file has been selected, the appearance of the emoji represents the file in terms of an HTML element. The HTML element emoji, representative of a file, can then be dragged to the dropArea for data ingestion/storage.

<!DOCTYPE html>
<html>
<head></head>
<body>

<h1>Example 1: Click button create drag and drop elements</h1>
<input type="file" id="upload_file" accept="audio/*" style="display:block" multiple>
<div id="file_name" style="display:none"></div>
<div id="base64_string" style="display:none"></div>
<div id="base64_string_icon" draggable="true" class="dragElement" style="display:none">📄</div>

<br><br>

<div id="dropArea" class="dropArea"> Drop for Example 0 & 1</div>

<style>
.dropArea { height: 200px;
    width: 200px;
    border-radius: 15px;
    border: 0.25px solid black;
    background-color: #7084c4;
}

.HTML_text { cursor: move; }
</style>

<script>
var example;
var other_data_related_to_dragEvent = {};
var html_element_drag_list_metaData = [];

// ----------------------------------------------------
// Drag functionality: Example 1
// ----------------------------------------------------
// The eventlistener needs to be always running, to detect which file the user selected with browse
document.getElementById("upload_file").addEventListener("change", previewInput_drop, false);

async function previewInput_drop(event) {

    // Take the first file
    const file = event.target.files[0];  // first file in the list of selected files, better for selecting multiple files at one time
    // console.log("file :", file);

    document.getElementById("file_name").innerHTML = file.name;

    // ---------------------

    const reader = new FileReader();

    reader.onload = async function(e){
        document.getElementById("base64_string").innerHTML = e.target.result;
        document.getElementById("base64_string_icon").style.display = "block";
    }

    reader.readAsDataURL(file);
}


document.getElementById("base64_string_icon").addEventListener("dragstart", processEvent_drag_example1, false);

function processEvent_drag_example1(event) {
    example = 1;
    event.dataTransfer.setData('text/plain', event.target.id);
}

// ----------------------------------------------------

// ----------------------------------------------------
// Drop functionality: Example 0 and 1
// ----------------------------------------------------
document.getElementById("dropArea").addEventListener("drop", processEvent_drop, false);
document.getElementById("dropArea").addEventListener("dragover", processEvent_dragover, false);

function processEvent_drop(event) {

    // Stop defaults and allow drop events
    event.preventDefault();

    // Detects files dragged from pc 
    html_element_drag_list_metaData.push(event.dataTransfer.files);
    console.log('html_element_drag_list_metaData: ', html_element_drag_list_metaData);

    // Detects html elements dragged from the html page
    const data = event.dataTransfer.getData('text/plain');
    console.log('data: ', data);
    if (data.length != 0) {
      // find the draggable element based on the data
      const dragElement = document.getElementById(data);
      console.log('dragElement: ', dragElement);

      // Append the draggable element 
      event.target.appendChild(dragElement);

    }
}

function processEvent_dragover(event) {
  // Stop defaults and allow drop events
  event.preventDefault();
}
// -------------------------------------------------

</script>
</body>
</html>

Before selecting a file

Dragged a file to the browse button

Dragged the representative file emoji to the dropArea

Example 2: Drag and drop an HTML element

In this example, one can efficiently drag multiple files to the dropArea at one time.

<!DOCTYPE html>
<html>
<head></head>
<body>

<h1>Example 2: Drag and drop files</h1>
<input type="file" id="upload_file_dragdrop" style="display:block" class="dropArea1" multiple>

<br><br>

<button id="use_moved_data" onclick="use_moved_data()">use_moved_data</button>

<!-- ---------------------------------------- -->
<!-- CSS -->
<style>
.dropArea1 { height: 200px;
    width: 200px;
    border-radius: 15px;
    border: 0.25px solid black;
    background-color: #56b06e;
}
</style>
<!-- ---------------------------------------- -->

<script>
var other_data_related_to_dragEvent = {};
var html_element_drag_list_metaData = [];

// ----------------------------------------------------
// Drag and Drop functionality: Example 2
// ----------------------------------------------------
document.getElementById("upload_file_dragdrop").addEventListener("change", previewInput, false);

async function previewInput(event) {

    // For multiple files
    const allFiles = event.target.files;
    // console.log("allFiles :", allFiles);

    var i = 0;
    while (i < allFiles.length) {

        const file = allFiles[i];
        // console.log("file :", file);

        await obtain_fileInfo(file)
            .then(base64str => { other_data_related_to_dragEvent[file.name] = base64str; })
            .catch(error => console.error(error));

        i = i + 1;
    }

    // ---------------------
}

async function obtain_fileInfo(file) {
    var base64_string = await new Promise((resolve) => {
        const reader = new FileReader();
        reader.onload = async function(e){ 
            resolve(e.target.result); // inside resolve is the value that the function returns
        };
        reader.readAsDataURL(file);
    });
     return base64_string;
}

// ----------------------------------------------------

async function use_moved_data() {
    console.log('html_element_drag_list_metaData: ', html_element_drag_list_metaData);
    console.log('other_data_related_to_dragEvent: ', other_data_related_to_dragEvent);
}

</script>
</body>
</html>

Before dragging files into the dropArea

After dragging files into the dropArea and pushing the use_moved_data button

We can see an the base64 string data of the three files that were dragged into the dropArea! The base64 string data can then be saved as a blob object and transferred to across the Internet.

I hope these ways to drag and drop HTML elements and files helps someone.

Happy Practicing! 👋

💻 GitHub | 🌷 Practicing Datscy @ Dev.to | 🌳 Practicing Datscy @ Medium

References

How to Create Drag and Drop Functionality in JavaScript: A Step-by-Step Tutorial: https://medium.com/@future_fanatic/how-to-create-drag-and-drop-functionality-in-javascript-a-step-by-step-tutorial-8ea236ef9416
Read files in JavaScript: https://web.dev/articles/read-files

How to Contribute to a Public GitHub Repository on GitHub by performing a git CLI Pull-Request

Practicing Datscy — Fri, 06 Sep 2024 14:59:23 +0000

Many major numerical development companies (ie: Tensorflow, Hugging Face, etc) encourage developers to contribute code projects to their products using GitHub. Sharing/contributing code to a company using GitHub requires performing a Pull-Request, a pull request is the process of making a repository request to the repository owners to add your files.

If you are a busy developer and have never contributed code using a git pull request, this blog post lists the steps on how to quickly perform share your code using a pull request.

Steps to create a GitHub pull request to contribute your project to another project using the GitHub platform

[0] Fork the target project's repository, by clicking on the fork button on the GitHub page of the target repository. A copy of the target repository will be made on your GitHub repository account.

[1] Go to forked repository on your GitHub account, https://github.com/YOUR_REPO_OwnerName/TARGET_REPO_RepoName

[2] Create a codespace on the forked repository on your GitHub account, select YOUR_REPO_OwnerName/TARGET_REPO_RepoName to create the codespace.

[3] Use the terminal on the codespace to create a new branch, where the new branch is called newBranch.

git branch newBranch

[4] Change the current branch to the branch named newBranch.

git checkout newBranch

[5] See all branches. Confirm that the new branch was added, and that the newBranch is selected.

git branch

[6] Make the necessary changes and commit them to your branch. In the example, I am submitting webapp index.html and README.md files.

# Make a folder to add to the TARGET_REPO_RepoName
mkdir folderName_to_add_to_TARGET_REPO_RepoName

echo '' > folderName_to_add_to_TARGET_REPO_RepoName/index.html
# copy-paste source index.html into empty file

echo '' > folderName_to_add_to_TARGET_REPO_RepoName/README.md
# copy-paste source README.md into empty file

[7] Add changes to staging area.

git add .

[8] Commit changes to forked repository [YOUR_REPO_OwnerName/TARGET_REPO_RepoName]

git commit -m "commit message"

[9] Push your branch to your forked repository on GitHub.

git push --set-upstream origin newBranch

[10] Finished with codespace. Delete the codespace.

gh codespace delete --all

[11] Confirm that the codespace is deleted at https://github.com/codespaces.

[12] Go back to your forked repository: https://github.com/YOUR_REPO_OwnerName/TARGET_REPO_RepoName

[13] Click on 'Pull-Request - comparing changes'. Select your branch with the changes and provide a detailed description of your contribution. A submission form will open such that you can type a message to the person that approves the GitHub target repository changes.

[14] Wait for the project maintainers to review and potentially merge your pull request. Go to the pull request page to view any new updates: https://github.com/TARGET_REPO_OwnerName/TARGET_REPO_RepoName/pull/XXXX. XXXX will be random numbers to denote your pull request.

Happy Practicing! 👋

💻 GitHub | 🌷 Practicing Datscy @ Dev.to | 🌳 Practicing Datscy @ Medium

References

GitHub Docs - Creating a pull request: https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/creating-a-pull-request

JavaScript Array Manipulations

Practicing Datscy — Sat, 31 Aug 2024 14:05:52 +0000

Manipulating 2d, 3d, or 4d arrays in JavaScript are necessary for AI model training and data pre-processing analysis (text/image/audio/video).

Below are a few useful functions for array manipulation using pure JavaScript without matrix packages like Tensorflow.js.

Transpose of a 2d array

function transpose_2d_array(arr) {

    var transpose_colNum = arr.length;
    var transpose_rowNum = arr.at(0).length;
    var transpose_arr = [];
    for (var i=0; i<transpose_rowNum ; i++) {
        const col = Array.from({ length: transpose_colNum }, (_, i) => 0);
        transpose_arr.push(col);
    }

    for (var i=0; i<arr.length; i++) {
        for (var j=0; j<arr.at(i).length; j++) {
            transpose_arr[j][i] = arr[i][j];
        }
    }
    return transpose_arr;
}

Print the Shape of an array

async function recur_func(arr) {
    if (arr != undefined) {
        return [arr[0], arr.length];
    } else {
        return arr;
    }
}

async function shape(arr) {
    var out = await recur_func(arr);
    var shap = [out[1]];
    var c = 0; // typically work with 4D arrays or less
    while (out != undefined && c < 4) {
        out = await recur_func(out[0]);
        if (out != undefined) {
            shap.push(out[1]);
        }
        c = c + 1;
    }
    return shap.slice(0, shap.length-1);
}

Exchange dimensions of an array

The tensorflow.js library and other numerical libraries have a reshape function, however, it is uncertain which dimensions maybe exchanged if two or more dimensions have the same size number. For example, reshaping a [2,1,2] into a [1,2,2] does not specify if the 0th dimension should be switch to the 1st or the 2nd dimension. In the function below, one can specify exactly which size should correspond with a particular dimension.

async function exchange_3d_dimensions(arr_3d, output_dims_index) {

    // output_dims_index: [0,2,1] implying how to switch the dimension index of arr_3d, this is technically more precise because two dimension indexes could have the same size. So one is specifying exactly which dimension index to use for a particular dimension.

    // output_dims_index specifies the [dimension index] of the desired output array 
    // [2,2,1] = [org_0th_dim, org_1st_dim, org_2nd_dim] => [2,1,2] = [org_0th_dim, org_2nd_dim, org_1st_dim] = [0,2,1] 

    // [0] List the original array location_values and values
    var org_0th_dim = [];
    var org_1st_dim = [];
    var org_2nd_dim = [];
    var val = [];

    for (var i=0; i<arr_3d.length; i++) {
        for (var j=0; j<arr_3d[0].length; j++) {
            for (var k=0; k<arr_3d[0][0].length; k++) {
                   org_0th_dim.push(i);
                   org_1st_dim.push(j);
                   org_2nd_dim.push(k);
                   val.push(arr_3d[i][j][k])
            }
        }
    }

    // Need to transform output_dims_index, from index to dimensions
    var dims_of_org_arr = [arr_3d.length, arr_3d[0].length, arr_3d[0][0].length];
    var dims = output_dims_index.map((val, i) => { return dims_of_org_arr.at(val); });


    // [1] Make the new shape array, filled with zeros
    var desired_3d = await zeros(dims);

    // Exchange notation for desired output index dimensions
    var all = [org_0th_dim, org_1st_dim, org_2nd_dim];
    var all_switched = output_dims_index.map((val, i) => { return all.at(val); });
    org_0th_dim = all_switched.at(0);
    org_1st_dim = all_switched.at(1);
    org_2nd_dim = all_switched.at(2);


    // [2] Fill in output shaped 3d array
    var desired_0th_dim = dims.at(0);
    var desired_1st_dim = dims.at(1);
    var desired_2nd_dim = dims.at(2);

    for (var i=0; i<desired_0th_dim; i++) {
        for (var j=0; j<desired_1st_dim; j++) {
            for (var k=0; k<desired_2nd_dim; k++) {

                // cycle over the index of a for every i,j,k value
                   for (var ind=0; ind<org_0th_dim.length; ind++) {
                       if (org_0th_dim.at(ind) == i && org_1st_dim.at(ind) == j && org_2nd_dim.at(ind) == k) {
                        desired_3d[i][j][k] = val.at(ind);
                       }
                   }
            }
        }
    }

    return desired_3d;       
}

// -----------------------------------------------

async function zeros(dims) {

    // dims: [desired_0th_dim, desired_1st_dim, desired_2nd_dim]

    var out = [];

    if (dims.length == 1) {
        var desired_0th_dim = dims.at(0);

        out = Array.from({length: desired_0th_dim}, (val, ind) => { return 0; }); 

    } else if (dims.length == 2) {
        var desired_0th_dim = dims.at(0);
        var desired_1st_dim = dims.at(1);

        for (var i=0; i<desired_0th_dim; i++) {
            var arr = Array.from({length: desired_1st_dim}, (val, ind) => { return 0; }); 
            out.push(arr);
        }

    } else if (dims.length == 3) {
        var desired_0th_dim = dims.at(0);
        var desired_1st_dim = dims.at(1);
        var desired_2nd_dim = dims.at(2);

        for (var i=0; i<desired_0th_dim; i++) {
            temp = [];
            for (var j=0; j<desired_1st_dim; j++) {
                var arr = Array.from({length: desired_2nd_dim}, (val, ind) => { return 0; }); 
                temp.push(arr);
            }
            out.push(temp);
        }

    } else {
        console.log('Enter an array of length 1, 2, or 3. (ie: [desired_0th_dim, desired_1st_dim, desired_2nd_dim])')
    }

    return out;
}

I hope these array utility functions will be helpful to someone.

Happy Practicing! 👋

💻 GitHub | 🌷 Practicing Datscy @ Dev.to | 🌳 Practicing Datscy @ Medium

References

Inspiration for the creation of array functions: https://js.tensorflow.org/api/latest/

EventListener UI in JavaScript

Practicing Datscy — Fri, 23 Aug 2024 18:55:30 +0000

Below are three main User Interface (UI) options that are used to create webapps using JavaScript.

This blog post below shows how to insert inputs into the Document Object Model (DOM) via HTML and the corresponding JavaScript to obtain user selection information.

Radio button

<!-- Radio button menu: put in body -->
<fieldset>
<input type="radio" id="radioOption0" name="radio_name" value="radioOption0" />
<label for="radioOption0">Radio option 0</label>
<br>
<input type="radio" id="radioOption1" name="radio_name" value="radioOption1" />
<label for="radioOption1">Radio option 1</label>
</fieldset>

// Put in <script>
function processEvent_radioOption0(event) {
    if (this.getAttribute("checked") == false) {
        document.getElementById("text_input0").style.display = "none";
        document.getElementById("text_input1").style.display = "none";
    } else  {
        document.getElementById("text_input0").style.display = "block";
        document.getElementById("text_input1").style.display = "block";
    }
}

function processEvent_radioOption1(event) {
    if (this.getAttribute("checked") == false) {
        document.getElementById("text_input0").style.display = "none";
        document.getElementById("text_input1").style.display = "none";
    } else  {
        document.getElementById("text_input0").style.display = "none";
        document.getElementById("text_input1").style.display = "none";
    }
}

document.getElementById("radioOption0").addEventListener("click", processEvent_radioOption0, false);
document.getElementById("radioOption1").addEventListener("click", processEvent_radioOption1, false);


// Put in a function in <script>
const radioOption0 = document.getElementById("radioOption0").checked;
const radioOption1 = document.getElementById("radioOption1").checked;

if (radioOption0 == false && radioOption1 == false) {
    document.getElementById('notification').innerHTML = "Please select radioOption0 or radioOption1.";
}

if (radioOption0 == true && radioOption1 == false) {
    console.log('radioOption0');
}

if (radioOption0 == false && radioOption1 == true) {
    console.log('radioOption1');
}

Drop down

<!-- Drop down menu: put in body -->
<label for="select_dropdown_option_label">Select a drop down option:</label>
<select name="dropdown_options" id="dropdown_options" style="display:block">
  <option value="---">Select an option</option>
  <option value="drop_down_option0">drop_down_option0</option>
  <option value="drop_down_option1">drop_down_option1</option>
  <option value="drop_down_option2">drop_down_option2</option>
</select>

// Put in <script>
function processEvent_dropdown_options(event) {

    // there is nothing in event that tells which drop down was selected
    // console.log('event: ', event);

    const element = document.getElementById("dropdown_options");

    console.log('element.selectedIndex: ', element.selectedIndex);
    // OR
    // console.log('element.options.selectedIndex: ', element.options.selectedIndex);

    if (document.getElementById("dropdown_options").selectedIndex == 1) {
        document.getElementById("text_input").style.display = 'block';
    } else {
        document.getElementById("text_input").style.display = 'none';
    }

}

document.getElementById("dropdown_options").addEventListener("change", processEvent_dropdown_options, false);


// Put in a function in <script>
var dropdown_option_type = document.getElementById("dropdown_options").value;

if (dropdown_option_type == 'drop_down_option0') {

} else if (dropdown_option_type == 'drop_down_option1') {

} else if (dropdown_option_type == 'drop_down_option2') {

} else {
    document.getElementById('notification').innerHTML = "Please select a drop down option type."; 
}

Text input

<!-- Text input: put in body -->
<input type="text" name="text_input0" id="text_input0" value="" style="display:block;">
<button id="button0" onclick="button0_task()" style="display:none;">button0</button>

// Put in <script>
function processEvent_text_input(event) {

    // Make something change when text is typed into the text input

    if (document.getElementById("text_input0").value.length > 0) {
        // If something is typed into the text input box
        // Make a button appear
        document.getElementById("button0").style.display = 'block';
    } else {
        document.getElementById("button0").style.display = 'none';
    }

}

document.getElementById("text_input0").addEventListener("change", processEvent_text_input, false);


// Specify tasks for onClick button
function button0_task() {

    var text_input0 = document.getElementById("text_input0").value;
    // Other tasks
}

Happy Practicing! 👋

💻 GitHub | 🌷 Practicing Datscy @ Dev.to | 🌳 Practicing Datscy @ Medium

References

MDN UI Events: https://developer.mozilla.org/en-US/docs/Web/API/UI_Events