From ca0e12c29a671cb37c374224f9754a2b395dcf5d Mon Sep 17 00:00:00 2001 From: Tyler Moseley Date: Tue, 27 Feb 2024 23:20:31 -0500 Subject: [PATCH] Added image classifier --- .DS_Store | Bin 8196 -> 6148 bytes _quarto.yml | 11 +- docs/.DS_Store | Bin 6148 -> 6148 bytes docs/about.html | 16 ++ docs/index.html | 239 ++++++++++++------ docs/index_files/.DS_Store | Bin 6148 -> 0 bytes .../figure-html/cell-2-output-1.png | Bin 0 -> 85772 bytes docs/projects.html | 16 ++ docs/search.json | 2 +- docs/site_libs/.DS_Store | Bin 8196 -> 8196 bytes index.qmd | 83 +++++- 11 files changed, 293 insertions(+), 74 deletions(-) delete mode 100644 docs/index_files/.DS_Store create mode 100644 docs/index_files/figure-html/cell-2-output-1.png diff --git a/.DS_Store b/.DS_Store index 5d2be8910489dfe362f942aca662480d8083f830..b748cdf2b2ac90864d85952c3d2fb34d45d2e726 100644 GIT binary patch delta 275 zcmZp1XfcprU|?W$DortDU=RQ@Ie-{MGjUE#6q~50$jG}fU^gQp?_?eUNoFAii^&=S z7RoKwM`oxTIqC>h$HJh;kj{|FP*RX#7@VA+TL2VeU=TBy+$`Y2RGd8dy@2TCdjk9r zrpDysg4(f)9>rjdDGd1x$qdE0`7SO=Ir&LIF^>By4y8pLg&GW(Pr)mXVzJW3#0-|j u>>M0|%pi9F{lX0-TtWWXnE0J}GQW%?$iobbAeRFH6U4`0vCZ*3bC>~O+&qH- literal 8196 zcmeHMze^lJ6n=9a#2|P2r zfcJ+4l`-|03%acXjXMGW>*#g`*E4(pOgyF@b3sHp#gv*#yatY@3eR%To1!=sk} zo4)w@CXRQ;#{2JsZv!v3FqEDl??*bIZQ7?H*(iH$b-Bp6q2cqKXt*&?&qhirSdpIE zFV-^!B`va0G^9;>2S+m6p+TgJd6mpi->0`{-(HHoig`nwx3eR?qM}Y6sBP1rGiYZm zYct*(N1c)E#ow1mSok7)mRPM`Ds=P+(q{_8@474y(;;@NQkf3^kp7zxX;b zuXNr};qB~5FD0yZn)+CFmOemn8$bAeA?PGI)AROjko!g1Uvug?YK48-j)@-0zO# cz|kLuxK4a5^_UAHf}$S+oDJHj0}txJ70mStbpQYW diff --git a/_quarto.yml b/_quarto.yml index 8e9ff23..a0bb83d 100644 --- a/_quarto.yml +++ b/_quarto.yml @@ -5,11 +5,20 @@ project: website: title: "Tyler Moseley" navbar: - right: + left: - href: index.qmd text: Home - about.qmd - projects.qmd + tools: + - icon: twitter + href: https://twitter.com + - icon: github + menu: + - text: Source Code + url: https://code.com + - text: Report a Bug + url: https://bugs.com format: html: diff --git a/docs/.DS_Store b/docs/.DS_Store index 1cdd0e34d6fa494a7a5460db229508418d74ec8b..0f8d6eea72b69fe49818a82c413b4effdae40fd8 100644 GIT binary patch delta 65 zcmZoMXffDe%*4!?E-;ygNosNc6F+lG#L>wUm}Dl`!P%Njj0KZ-GkLQ#*aPLbnAO0H J%_htjL;zyN6O#Y{ delta 65 zcmZoMXffDe%*4zf!7`bLNosNc6F+mG%8|(vm}Dl`!P%Nj3<{HXGkLQxfaJKC)xeC+ ICd?N^06Cu$1ONa4 diff --git a/docs/about.html b/docs/about.html index 3266d1e..c9cf862 100644 --- a/docs/about.html +++ b/docs/about.html @@ -103,6 +103,22 @@
+ +
+ + +
diff --git a/docs/index.html b/docs/index.html index 2088c0e..654bcc1 100644 --- a/docs/index.html +++ b/docs/index.html @@ -142,7 +142,7 @@
+ +
+ + +
@@ -189,97 +205,178 @@

New Home Page

-

Credit: Danielle Navarro

-
P5 = require("p5")
+
{
+  // 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 paragraph element to display the filename
+//   const filenameDisplay = html`<p>Results: None</p>`;
+
+  const resultDisplay = html`<div id="result">Upload an image to classify it.</div>`;
+  
+//   // Function to handle file selection and update the display
+//   fileInput.onchange = (e) => {
+//     const file = e.target.files[0];
+    
+//     // Function to run when results arrive
+//     function gotResult(error, results) {
+//         const element = document.getElementById("result");
+//         if (error) {
+//             element.innerHTML = error;
+//         } else {
+//             let num = results[0].confidence * 100;
+//             element.innerHTML = results[0].label + "<br>Confidence: " + num.toFixed(2) + "%";
+//         }
+//     }
+
+//     if (file) {
+//       // Update the image source to display the selected image
+//       img.src = URL.createObjectURL(file);
+
+//       // Update the text to display the filename
+//       resultDisplay.textContent = `Scanning ...`;
+
+//       // Initialize Image Classifier with MobileNet.
+//       const classifier =  ml5.imageClassifier('MobileNet');
+//       classifier.classify(document.getElementById("image"), gotResult);
+      
+//     }
+//   };
+
+  // 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 = `Scanning ...`;
+    }
+  };
+  
+  // Return a div that contains the file input, image, and filename display
+  return html`<div>${fileInput}${img}${resultDisplay}</div>`;
+}
+
+
+ +
+
+
+
+
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;
-  }
-});
+
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;
+  }
+});
-
+
-
+
-
-
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()
+
+
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()
-