Added image classifier

_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:

docs/about.html

@@ -103,6 +103,22 @@
 </ul>
           </div> <!-- /navcollapse -->
           <div class="quarto-navbar-tools">
+    <a href="https://twitter.com" title="" class="quarto-navigation-tool px-1" aria-label=""><i class="bi bi-twitter"></i></a>
+    <div class="dropdown">
+      <a href="" title="" id="quarto-navigation-tool-dropdown-0" class="quarto-navigation-tool dropdown-toggle px-1" data-bs-toggle="dropdown" aria-expanded="false" aria-label=""><i class="bi bi-github"></i></a>
+      <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="quarto-navigation-tool-dropdown-0">
+          <li>
+            <a class="dropdown-item quarto-navbar-tools-item" href="https://code.com">
+            Source Code
+            </a>
+          </li>
+          <li>
+            <a class="dropdown-item quarto-navbar-tools-item" href="https://bugs.com">
+            Report a Bug
+            </a>
+          </li>
+      </ul>
+    </div>
 </div>
       </div> <!-- /container-fluid -->
     </nav>

docs/projects.html

@@ -103,6 +103,22 @@
 </ul>
           </div> <!-- /navcollapse -->
           <div class="quarto-navbar-tools">
+    <a href="https://twitter.com" title="" class="quarto-navigation-tool px-1" aria-label=""><i class="bi bi-twitter"></i></a>
+    <div class="dropdown">
+      <a href="" title="" id="quarto-navigation-tool-dropdown-0" class="quarto-navigation-tool dropdown-toggle px-1" data-bs-toggle="dropdown" aria-expanded="false" aria-label=""><i class="bi bi-github"></i></a>
+      <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="quarto-navigation-tool-dropdown-0">
+          <li>
+            <a class="dropdown-item quarto-navbar-tools-item" href="https://code.com">
+            Source Code
+            </a>
+          </li>
+          <li>
+            <a class="dropdown-item quarto-navbar-tools-item" href="https://bugs.com">
+            Report a Bug
+            </a>
+          </li>
+      </ul>
+    </div>
 </div>
       </div> <!-- /container-fluid -->
     </nav>

docs/search.json

@@ -18,6 +18,6 @@
     "href": "index.html",
     "title": "New Home Page",
     "section": "",
-    "text": "Credit: Danielle Navarro\n\nP5 = require(\"p5\")\n\n\n\n\n\n\n\nfunction* createSketch(sketch) {\n  const element = DOM.element('div');\n  yield element;\n  const instance = new P5(sketch, element, true);\n  try {\n    while (true) {\n      yield element;\n    }\n  } finally {\n    instance.remove();\n  }\n}\n\ncreateSketch(s => {\n  // Use `s.` to access p5 functions within instance mode\n  s.setup = function() {\n    s.createCanvas(720, 400);\n  };\n\n  let t = 0;\n  s.draw = function() {\n    s.background('#fff');\n    s.translate(s.width / 2, s.height / 2);\n    s.stroke('#0f0f0f');\n    s.strokeWeight(1.5);\n    // Loop for adding 100 lines\n    for (let i = 0; i < 100; i++) {\n      s.line(x1(t + i), y1(t + i), x2(t + i) + 20, y2(t + i) + 20);\n    }\n    t += 0.15;\n  };\n\n  // Update these functions to use `s.sin` and `s.cos`\n  function x1(t) {\n    return s.sin(t / 10) * 125 + s.sin(t / 20) * 125 + s.sin(t / 30) * 125;\n  }\n\n  function y1(t) {\n    return s.cos(t / 10) * 125 + s.cos(t / 20) * 125 + s.cos(t / 30) * 125;\n  }\n\n  function x2(t) {\n    return s.sin(t / 15) * 125 + s.sin(t / 25) * 125 + s.sin(t / 35) * 125;\n  }\n\n  function y2(t) {\n    return s.cos(t / 15) * 125 + s.cos(t / 25) * 125 + s.cos(t / 35) * 125;\n  }\n});\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nimport plotly.graph_objects as go\nimport pandas as pd\n# Read data from a csv\nz_data = pd.read_csv('https://raw.githubusercontent.com/plotly/datasets/master/api_docs/mt_bruno_elevation.csv')\n\nfig = go.Figure(data=[go.Surface(z=z_data.values)])\n\nfig.update_layout(title='Mt Bruno Elevation', autosize=False,\n                  width=500, height=500,\n                  margin=dict(l=65, r=50, b=65, t=90))\n\nfig.show()"
+    "text": "{\n  // First, ensure the ml5 library is available in this context\n  const ml5 = await require('https://unpkg.com/ml5@latest/dist/ml5.min.js');\n\n  // Create a file input element for image upload\n  const fileInput = html`<input type=\"file\" accept=\"image/*\"/>`;\n  \n  // Create an image element to display the uploaded image\n  const img = html`<img id=\"image\" style=\"max-width: 100%; margin-top: 10px;\"/>`;\n  \n  // Create a paragraph element to display the filename\n//   const filenameDisplay = html`<p>Results: None</p>`;\n\n  const resultDisplay = html`<div id=\"result\">Upload an image to classify it.</div>`;\n  \n//   // Function to handle file selection and update the display\n//   fileInput.onchange = (e) => {\n//     const file = e.target.files[0];\n    \n//     // Function to run when results arrive\n//     function gotResult(error, results) {\n//         const element = document.getElementById(\"result\");\n//         if (error) {\n//             element.innerHTML = error;\n//         } else {\n//             let num = results[0].confidence * 100;\n//             element.innerHTML = results[0].label + \"<br>Confidence: \" + num.toFixed(2) + \"%\";\n//         }\n//     }\n\n//     if (file) {\n//       // Update the image source to display the selected image\n//       img.src = URL.createObjectURL(file);\n\n//       // Update the text to display the filename\n//       resultDisplay.textContent = `Scanning ...`;\n\n//       // Initialize Image Classifier with MobileNet.\n//       const classifier =  ml5.imageClassifier('MobileNet');\n//       classifier.classify(document.getElementById(\"image\"), gotResult);\n      \n//     }\n//   };\n\n  // Function to handle file selection and update the display\n  fileInput.onchange = async (e) => {\n    const file = e.target.files[0];\n    if (file) {\n      img.src = URL.createObjectURL(file);\n      img.onload = () => { // Ensure the image is loaded before classification\n        img.style.display = 'block'; // Show the image\n\n        // Initialize Image Classifier with MobileNet and classify the image\n        ml5.imageClassifier('MobileNet').then(classifier => {\n          classifier.classify(img, (error, results) => {\n            if (error) {\n              resultDisplay.textContent = `Error: ${error}`;\n              console.error(error);\n            } else {\n              let confidence = results[0].confidence * 100;\n              resultDisplay.innerHTML = `${results[0].label}<br>Confidence: ${confidence.toFixed(2)}%`;\n            }\n          });\n        });\n      };\n      \n      // Reset the result display for the new image\n      resultDisplay.textContent = `Scanning ...`;\n    }\n  };\n  \n  // Return a div that contains the file input, image, and filename display\n  return html`<div>${fileInput}${img}${resultDisplay}</div>`;\n}\n\n\n\n\n\n\n\nP5 = require(\"p5\")\n\n\n\n\n\n\nCredit: Danielle Navarro\n\nfunction* createSketch(sketch) {\n  const element = DOM.element('div');\n  yield element;\n  const instance = new P5(sketch, element, true);\n  try {\n    while (true) {\n      yield element;\n    }\n  } finally {\n    instance.remove();\n  }\n}\n\ncreateSketch(s => {\n  // Use `s.` to access p5 functions within instance mode\n  s.setup = function() {\n    s.createCanvas(720, 400);\n  };\n\n  let t = 0;\n  s.draw = function() {\n    s.background('#fff');\n    s.translate(s.width / 2, s.height / 2);\n    s.stroke('#0f0f0f');\n    s.strokeWeight(1.5);\n    // Loop for adding 100 lines\n    for (let i = 0; i < 100; i++) {\n      s.line(x1(t + i), y1(t + i), x2(t + i) + 20, y2(t + i) + 20);\n    }\n    t += 0.15;\n  };\n\n  // Update these functions to use `s.sin` and `s.cos`\n  function x1(t) {\n    return s.sin(t / 10) * 125 + s.sin(t / 20) * 125 + s.sin(t / 30) * 125;\n  }\n\n  function y1(t) {\n    return s.cos(t / 10) * 125 + s.cos(t / 20) * 125 + s.cos(t / 30) * 125;\n  }\n\n  function x2(t) {\n    return s.sin(t / 15) * 125 + s.sin(t / 25) * 125 + s.sin(t / 35) * 125;\n  }\n\n  function y2(t) {\n    return s.cos(t / 15) * 125 + s.cos(t / 25) * 125 + s.cos(t / 35) * 125;\n  }\n});\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nimport plotly.graph_objects as go\nimport pandas as pd\n# Read data from a csv\nz_data = pd.read_csv('https://raw.githubusercontent.com/plotly/datasets/master/api_docs/mt_bruno_elevation.csv')\n\nfig = go.Figure(data=[go.Surface(z=z_data.values)])\n\nfig.update_layout(title='Mt Bruno Elevation', autosize=False,\n                  width=500, height=500,\n                  margin=dict(l=65, r=50, b=65, t=90))\n\nfig.show()"
   }
 ]

index.qmd

@@ -2,12 +2,93 @@
 title: New Home Page
 output: all
 ---
-Credit: [Danielle Navarro](https://blog.djnavarro.net/posts/2023-01-14_p5js/)
+
+```{ojs}
+{
+  // 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>`;
+}
+```
+
+
+
 
 ```{ojs}
 P5 = require("p5")
 ```
 
+Credit: [Danielle Navarro](https://blog.djnavarro.net/posts/2023-01-14_p5js/)
+
 ```{ojs}
 function* createSketch(sketch) {
   const element = DOM.element('div');