New Home Page

Explore and Engage: Discover the Enhanced Features of My Revamped Site

Image Classification in ml5.js

{
  // First, ensure the ml5 library is available in this context
  const ml5 = await require('https://unpkg.com/ml5@latest/dist/ml5.min.js');

  // Create a file input element for image upload
  const fileInput = html`<input type="file" accept="image/*"/>`;
  
  // Create an image element to display the uploaded image
  const img = html`<img id="image" style="max-width: 100%; margin-top: 10px;"/>`;
  
  // Create a div element to display the filename
  const resultDisplay = html`<div id="result">Upload an image to classify it.</div>`;
  
  // Function to handle file selection and update the display
  fileInput.onchange = async (e) => {
    const file = e.target.files[0];
    if (file) {
      img.src = URL.createObjectURL(file);
      img.onload = () => { // Ensure the image is loaded before classification
        img.style.display = 'block'; // Show the image

        // Initialize Image Classifier with MobileNet and classify the image
        ml5.imageClassifier('MobileNet').then(classifier => {
          classifier.classify(img, (error, results) => {
            if (error) {
              resultDisplay.textContent = `Error: ${error}`;
              console.error(error);
            } else {
              let confidence = results[0].confidence * 100;
              resultDisplay.innerHTML = `${results[0].label}<br>Confidence: ${confidence.toFixed(2)}%`;
            }
          });
        });
      };
      
      // Reset the result display for the new image
      resultDisplay.textContent = `Classifying ...`;
    }
  };
  
  // Return a div that contains the file input, image, and filename display
  return html`<div>${fileInput}${img}${resultDisplay}</div>`;
}

Processing Animation in p5.js

P5 = require("p5")

Credit: Danielle Navarro

function* createSketch(sketch) {
  const element = DOM.element('div');
  yield element;
  const instance = new P5(sketch, element, true);
  try {
    while (true) {
      yield element;
    }
  } finally {
    instance.remove();
  }
}

createSketch(s => {
  // Use `s.` to access p5 functions within instance mode
  s.setup = function() {
    s.createCanvas(720, 400);
  };

  let t = 0;
  s.draw = function() {
    s.background('#fff');
    s.translate(s.width / 2, s.height / 2);
    s.stroke('#0f0f0f');
    s.strokeWeight(1.5);
    // Loop for adding 100 lines
    for (let i = 0; i < 100; i++) {
      s.line(x1(t + i), y1(t + i), x2(t + i) + 20, y2(t + i) + 20);
    }
    t += 0.15;
  };

  // Update these functions to use `s.sin` and `s.cos`
  function x1(t) {
    return s.sin(t / 10) * 125 + s.sin(t / 20) * 125 + s.sin(t / 30) * 125;
  }

  function y1(t) {
    return s.cos(t / 10) * 125 + s.cos(t / 20) * 125 + s.cos(t / 30) * 125;
  }

  function x2(t) {
    return s.sin(t / 15) * 125 + s.sin(t / 25) * 125 + s.sin(t / 35) * 125;
  }

  function y2(t) {
    return s.cos(t / 15) * 125 + s.cos(t / 25) * 125 + s.cos(t / 35) * 125;
  }
});

Interactive Plotly in Python

import plotly.graph_objects as go
import pandas as pd
# Read data from a csv
z_data = pd.read_csv('https://raw.githubusercontent.com/plotly/datasets/master/api_docs/mt_bruno_elevation.csv')

fig = go.Figure(data=[go.Surface(z=z_data.values)])

fig.update_layout(title='Mt Bruno Elevation', autosize=False,
                  width=500, height=500,
                  margin=dict(l=65, r=50, b=65, t=90))

fig.show()