Changes to mitosite.powerhouse.wiki

+ this.minimaps = [] // Array to store minimap objects

+ // Create a new minimap object

+ const minimap = {

+ canvas: document.createElement("canvas"),

+ zoomLevel: this.currentZoomLevel,

+ imageData: null,

+ // Set up canvas properties

+ minimap.canvas.className = "minimap"

+ minimap.canvas.width = this.side

+ minimap.canvas.height = this.side

+

+ // Calculate position based on number of existing minimaps

+ const offset = this.minimaps.length * 220 // 200px width + 20px spacing

+ minimap.canvas.style.cssText = `

+ right: ${10 + offset}px;

+ // Add zoom level label

+ const label = document.createElement("div")

+ label.style.cssText = `

+ position: fixed;

+ right: ${10 + offset}px;

+ top: 220px;

+ width: 200px;

+ text-align: center;

+ color: white;

+ font-size: 14px;

+ background: rgba(0, 0, 0, 0.7);

+ padding: 4px;

+ border-radius: 4px;

+ `

+ label.textContent = `${this.currentZoomLevel} View`

+ minimap.label = label

+ // Draw initial image

+ const ctx = minimap.canvas.getContext("2d")

+ ctx.drawImage(data.video, 0, 0, minimap.canvas.width, minimap.canvas.height)

+ minimap.imageData = ctx.getImageData(

+ minimap.canvas.width,

+ minimap.canvas.height,

+ // Add close button

+ const closeButton = document.createElement("button")

+ closeButton.style.cssText = `

+ position: absolute;

+ top: 5px;

+ right: 5px;

+ background: rgba(255, 255, 255, 0.3);

+ border: none;

+ color: white;

+ width: 20px;

+ height: 20px;

+ border-radius: 50%;

+ cursor: pointer;

+ display: flex;

+ align-items: center;

+ justify-content: center;

+ font-size: 12px;

+ `

+ closeButton.textContent = "×"

+ closeButton.onclick = (e) => {

+ e.stopPropagation()

+ this.removeMinimapByIndex(this.minimaps.indexOf(minimap))

+ }

+ minimap.canvas.appendChild(closeButton)

+

+ // Add to DOM and store in minimaps array

+ document.body.appendChild(minimap.canvas)

+ document.body.appendChild(minimap.label)

+ this.minimaps.push(minimap)

+

+ this.updateAllMinimaps()

+ }

+

+ removeMinimapByIndex(index) {

+ if (index >= 0 && index < this.minimaps.length) {

+ const minimap = this.minimaps[index]

+ minimap.canvas.remove()

+ minimap.label.remove()

+ this.minimaps.splice(index, 1)

+

+ // Reposition remaining minimaps

+ this.minimaps.forEach((map, idx) => {

+ const offset = idx * 220

+ map.canvas.style.right = `${10 + offset}px`

+ map.label.style.right = `${10 + offset}px`

+ })

+ }

+ updateAllMinimaps() {

+ this.minimaps.forEach((minimap) => {

+ const ctx = minimap.canvas.getContext("2d")

+ ctx.clearRect(0, 0, minimap.canvas.width, minimap.canvas.height)

+ // Restore the original image

+ ctx.putImageData(minimap.imageData, 0, 0)

+ // Calculate box size based on zoom levels

+ const zoomRatio =

+ parseInt(minimap.zoomLevel) / parseInt(this.currentZoomLevel)

+ const boxSize = this.side * zoomRatio

+ // Draw red box centered in minimap

+ ctx.strokeStyle = "red"

+ ctx.lineWidth = 2

+ const x = (minimap.canvas.width - boxSize) / 2

+ const y = (minimap.canvas.height - boxSize) / 2

+ ctx.strokeRect(x, y, boxSize, boxSize)

+ })

+ this.updateAllMinimaps()

+ webcam 700 700

+ hud Microscope

+ this.updateZoomDisplay()

+ m createMinimapCommand Overlay

+ createMinimapCommand(container) {

+ const data = this.instances.get(container)

+ let minimap = document.querySelector(".minimap")

+

+ if (minimap) {

+ minimap.remove()

+ return

+ }

+

+ minimap = document.createElement("canvas")

+ minimap.className = "minimap"

+ minimap.width = this.side

+ minimap.height = this.side

+ minimap.style.cssText = `

+ position: fixed;

+ right: 10px;

+ top: 10px;

+ width: 200px;

+ height: 200px;

+ border: 2px solid white;

+ background: black;

+ display: block;

+ `

+ document.body.appendChild(minimap)

+

+ this.minimapZoom = "40x"

+

+ const ctx = minimap.getContext("2d")

+ ctx.drawImage(data.video, 0, 0, minimap.width, minimap.height)

+ this.minimapImageData = ctx.getImageData(

+ 0,

+ 0,

+ minimap.width,

+ minimap.height,

+ )

+

+ this.updateMinimap()

+ }

+

+ updateMinimap() {

+ // first, clear any red boxes in the minimap

+ // then calculate the red box side length.

+ // the box side length will be side * minimapZoom/currentZoomLevel

+ // draw a red box in the minimap, centered around the center

+ // so if minimap at 40x and the new zoom is 400x, and the side was 1000, then the red

+ // box should be 40x on each side, positioned around the center.

+ const minimap = document.querySelector(".minimap")

+ const ctx = minimap.getContext("2d")

+ ctx.clearRect(0, 0, minimap.width, minimap.height)

+

+ // now restore the minimap image

+ ctx.putImageData(this.minimapImageData, 0, 0)

+

+ // Calculate box size based on zoom levels

+ const zoomRatio =

+ parseInt(this.minimapZoom) / parseInt(this.currentZoomLevel)

+ const boxSize = this.side * zoomRatio

+

+ // Draw red box centered in minimap

+ ctx.strokeStyle = "red"

+ ctx.lineWidth = 2

+ const x = (minimap.width - boxSize) / 2

+ const y = (minimap.height - boxSize) / 2

+ ctx.strokeRect(x, y, boxSize, boxSize)

+ }

+

+ this.updateZoomDisplay()

+ this.updateMinimap()

+ }

+ updateZoomDisplay() {

+ let zoomDisplay = document.querySelector(".top-left")

+ currentZoomLevel = "40x"

+ select.style.display = "none"

+ side = 700

+

+ const { side } = this

+ width: parseInt(container.dataset.width) || side,

+ height: parseInt(container.dataset.height) || side,

+ window.app = app

+ right: 50%;

+ return ``

+ // Modified toggleHelpCommand method

+ toggleHelpCommand(container) {

+ let helpModal = container.querySelector(".help-modal")

+

+ if (helpModal) {

+ // If modal exists, toggle its visibility

+ const isVisible = helpModal.style.display !== "none"

+ helpModal.style.display = isVisible ? "none" : "block"

+ return

+ }

+

+ // Create help modal

+ helpModal = document.createElement("div")

+ helpModal.className = "help-modal"

+ helpModal.style.cssText = `

+ position: fixed;

+ top: 0;

+ right: 0;

+ width: 300px;

+ height: 100vh;

+ background: rgba(0, 0, 0, 0.85);

+ color: white;

+ padding: 20px;

+ overflow-y: auto;

+ z-index: 1000;

+ box-shadow: -2px 0 10px rgba(0, 0, 0, 0.3);

+ `

+

+ // Create heading

+ const heading = document.createElement("h2")

+ heading.textContent = "Keyboard Shortcuts"

+ heading.style.marginBottom = "20px"

+ helpModal.appendChild(heading)

+

+ // Parse shortcuts and create clickable elements

+ const shortcuts = this.keyboardShortcuts

+ .split("\n")

+ .slice(1) // Skip header row

+ .map((line) => {

+ const [key, command, category] = line.split(" ")

+ return { key, command, category }

+ })

+

+ // Group shortcuts by category

+ const categorizedShortcuts = shortcuts.reduce(

+ (acc, { key, command, category }) => {

+ if (!acc[category]) {

+ acc[category] = []

+ }

+ acc[category].push({ key, command })

+ return acc

+ },

+ {},

+ )

+

+ // Create sections for each category

+ Object.entries(categorizedShortcuts).forEach(([category, shortcuts]) => {

+ const categorySection = document.createElement("div")

+ categorySection.style.marginBottom = "20px"

+

+ const categoryHeading = document.createElement("h3")

+ categoryHeading.textContent = category

+ categoryHeading.style.marginBottom = "10px"

+ categorySection.appendChild(categoryHeading)

+

+ shortcuts.forEach(({ key, command }) => {

+ const shortcutElement = document.createElement("div")

+ shortcutElement.style.cssText = `

+ display: flex;

+ align-items: center;

+ margin-bottom: 10px;

+ cursor: pointer;

+ padding: 5px;

+ border-radius: 4px;

+ `

+

+ // Add hover effect

+ shortcutElement.addEventListener("mouseenter", () => {

+ shortcutElement.style.background = "rgba(255, 255, 255, 0.1)"

+ })

+ shortcutElement.addEventListener("mouseleave", () => {

+ shortcutElement.style.background = "none"

+ })

+

+ const keyElement = document.createElement("kbd")

+ keyElement.textContent = key

+ keyElement.style.cssText = `

+ background: rgba(255, 255, 255, 0.2);

+ padding: 2px 6px;

+ border-radius: 3px;

+ margin-right: 10px;

+ min-width: 20px;

+ text-align: center;

+ `

+

+ const commandName = command.replace("Command", "")

+ const displayName = commandName

+ .split(/(?=[A-Z])/)

+ .map((word) => word.charAt(0).toUpperCase() + word.slice(1))

+ .join(" ")

+

+ const descElement = document.createElement("span")

+ descElement.textContent = displayName

+

+ shortcutElement.appendChild(keyElement)

+ shortcutElement.appendChild(descElement)

+

+ // Add click handler to trigger the command

+ shortcutElement.addEventListener("click", () => {

+ if (typeof this[command] === "function") {

+ this[command](container)

+ }

+ })

+

+ categorySection.appendChild(shortcutElement)

+ })

+

+ helpModal.appendChild(categorySection)

+ })

+

+ // Add close button

+ const closeButton = document.createElement("button")

+ closeButton.textContent = "×"

+ closeButton.style.cssText = `

+ position: absolute;

+ top: 10px;

+ right: 10px;

+ background: none;

+ border: none;

+ color: white;

+ font-size: 24px;

+ cursor: pointer;

+ padding: 5px;

+ `

+ closeButton.addEventListener("click", () => {

+ helpModal.style.display = "none"

+ })

+ helpModal.appendChild(closeButton)

+

+ // Add to document body instead of container

+ document.body.appendChild(helpModal)

+ }

+

+ keyboardShortcuts = `key command category

+ d toggleDetectionCommand Detection

+ t drawRandomBoxesCommand Detection

+ h flipHorizontalCommand Camera

+ v flipVerticalCommand Camera

+ c takeSnapshotCommand Camera

+ z changeZoomLevelDisplayCommand Overlay

+ ? toggleHelpCommand Overlay`

+

+ setupKeyboardShortcuts(container) {

+ // Parse the keyboard shortcuts string into a map

+ const shortcuts = new Map(

+ this.keyboardShortcuts

+ .split("\n")

+ .slice(1) // Skip header row

+ .map((line) => {

+ const [key, command] = line.split(" ")

+ return [key, command]

+ }),

+ )

+

+ // Add keyboard event listener

+ document.addEventListener("keydown", (e) => {

+ // Ignore if user is typing in an input field

+ if (e.target.tagName.toLowerCase() === "input") return

+

+ const command = shortcuts.get(e.key.toLowerCase())

+ if (command && typeof this[command] === "function") {

+ e.preventDefault()

+ this[command](container)

+ }

+ })

+ }

+

+ toggleDetectionCommand(container) {

+ this.isDetecting = !this.isDetecting

+ if (this.isDetecting) {

+ this.startDetection(container)

+ console.log("Detection enabled")

+ } else {

+ // Clear all boxes when detection is disabled

+ const data = this.instances.get(container)

+ data.boxes = []

+ this.clearCanvas(container)

+

+ // Update cell counter

+ const hud = container.querySelector(".scrollWebcamHud")

+ const cellCounter = hud.querySelector(

+ '.scrollWebcamHudElement[data-type="cellCount"]',

+ )

+ if (cellCounter) {

+ cellCounter.textContent = "Cells Counted: 0"

+ }

+

+ console.log("Detection disabled")

+ }

+ }

+

+ flipHorizontalCommand(container) {

+ const data = this.instances.get(container)

+ const { video } = data

+

+ // Toggle the transform style

+ const currentTransform = video.style.transform || ""

+ if (currentTransform.includes("scaleX(-1)")) {

+ video.style.transform = currentTransform.replace("scaleX(-1)", "")

+ } else {

+ video.style.transform = `${currentTransform} scaleX(-1)`

+ }

+

+ // Also flip the canvas to match

+ const { canvas } = data

+ if (currentTransform.includes("scaleX(-1)")) {

+ canvas.style.transform = currentTransform.replace("scaleX(-1)", "")

+ } else {

+ canvas.style.transform = `${currentTransform} scaleX(-1)`

+ }

+ }

+

+ flipVerticalCommand(container) {

+ const data = this.instances.get(container)

+ const { video } = data

+

+ // Toggle the transform style

+ const currentTransform = video.style.transform || ""

+ if (currentTransform.includes("scaleY(-1)")) {

+ video.style.transform = currentTransform.replace("scaleY(-1)", "")

+ } else {

+ video.style.transform = `${currentTransform} scaleY(-1)`

+ }

+

+ // Also flip the canvas to match

+ const { canvas } = data

+ if (currentTransform.includes("scaleY(-1)")) {

+ canvas.style.transform = currentTransform.replace("scaleY(-1)", "")

+ } else {

+ canvas.style.transform = `${currentTransform} scaleY(-1)`

+ }

+ }

+

+ takeSnapshotCommand(container) {

+ const data = this.instances.get(container)

+ const { video, canvas } = data

+

+ // Create a temporary canvas to capture the full state

+ const tempCanvas = document.createElement("canvas")

+ tempCanvas.width = video.videoWidth

+ tempCanvas.height = video.videoHeight

+ const tempCtx = tempCanvas.getContext("2d")

+

+ // 1. Draw the video frame

+ tempCtx.drawImage(video, 0, 0)

+

+ // 2. Draw the detection boxes from the canvas

+ tempCtx.drawImage(canvas, 0, 0)

+

+ // 3. Draw HUD elements

+ const hud = container.querySelector(".scrollWebcamHud")

+ if (hud) {

+ // Get all HUD elements

+ const hudElements = hud.querySelectorAll(".scrollWebcamHudElement")

+

+ hudElements.forEach((element) => {

+ // Get computed styles

+ const style = window.getComputedStyle(element)

+ const rect = element.getBoundingClientRect()

+ const containerRect = container.getBoundingClientRect()

+

+ // Calculate relative position within container

+ const x = rect.left - containerRect.left

+ const y = rect.top - containerRect.top

+

+ // Set up text styling

+ tempCtx.font = style.font || "30px Arial"

+ tempCtx.fillStyle = style.color || "white"

+ tempCtx.textBaseline = "top"

+

+ // Apply text shadow if present

+ if (style.textShadow && style.textShadow !== "none") {

+ tempCtx.shadowColor = "black"

+ tempCtx.shadowBlur = 2

+ tempCtx.shadowOffsetX = 1

+ tempCtx.shadowOffsetY = 1

+ }

+

+ // Draw the text

+ tempCtx.fillText(

+ element.textContent,

+ (x / containerRect.width) * video.videoWidth,

+ (y / containerRect.height) * video.videoHeight,

+ )

+

+ // Reset shadow

+ tempCtx.shadowColor = "transparent"

+ tempCtx.shadowBlur = 0

+ tempCtx.shadowOffsetX = 0

+ tempCtx.shadowOffsetY = 0

+ })

+ }

+

+ // 4. Draw zoom level indicator

+ const zoomDisplay = container.querySelector(".top-left")

+ if (zoomDisplay) {

+ const style = window.getComputedStyle(zoomDisplay)

+ tempCtx.font = style.font || "16px Arial"

+ tempCtx.fillStyle = style.color || "white"

+ tempCtx.textBaseline = "top"

+ tempCtx.fillText(zoomDisplay.textContent, 10, 10)

+ }

+

+ // Create thumbnail container if it doesn't exist

+ let thumbContainer = container.querySelector(".snapshot-thumbnails")

+ if (!thumbContainer) {

+ thumbContainer = document.createElement("div")

+ thumbContainer.className = "snapshot-thumbnails"

+ thumbContainer.style.position = "fixed"

+ thumbContainer.style.left = "10px"

+ thumbContainer.style.top = "10px"

+ thumbContainer.style.width = "120px"

+ thumbContainer.style.zIndex = "1000"

+ thumbContainer.style.maxHeight = "100vh"

+ thumbContainer.style.overflowY = "auto"

+ thumbContainer.style.padding = "10px"

+ thumbContainer.style.background = "rgba(0, 0, 0, 0.5)"

+ thumbContainer.style.borderRadius = "5px"

+ container.appendChild(thumbContainer)

+ }

+

+ // Create and add thumbnail

+ const thumbnail = document.createElement("div")

+ thumbnail.style.marginBottom = "10px"

+ thumbnail.style.cursor = "pointer"

+ thumbnail.style.position = "relative"

+

+ // Add timestamp to thumbnail

+ const timestamp = document.createElement("div")

+ timestamp.style.position = "absolute"

+ timestamp.style.bottom = "0"

+ timestamp.style.left = "0"

+ timestamp.style.right = "0"

+ timestamp.style.background = "rgba(0,0,0,0.5)"

+ timestamp.style.color = "white"

+ timestamp.style.fontSize = "10px"

+ timestamp.style.padding = "2px"

+ timestamp.textContent = new Date().toLocaleTimeString()

+

+ const img = document.createElement("img")

+ img.src = tempCanvas.toDataURL("image/png")

+ img.style.width = "100%"

+ img.style.border = "2px solid white"

+

+ thumbnail.appendChild(img)

+ thumbnail.appendChild(timestamp)

+ thumbContainer.appendChild(thumbnail)

+

+ // Add click handler to open full size in new window

+ thumbnail.addEventListener("click", () => {

+ const win = window.open()

+ win.document.write(`

+

+

+

+

+

+

+

+

+

+ `)

+ })

+ }

+

+ changeZoomLevelDisplayCommand(container) {

+ // Get next zoom level

+ const currentIndex = this.zoomLevels.indexOf(this.currentZoomLevel)

+ const nextIndex = (currentIndex + 1) % this.zoomLevels.length

+ this.currentZoomLevel = this.zoomLevels[nextIndex]

+

+ // Update or create zoom display element

+ let zoomDisplay = container.querySelector(".top-left")

+ // Update display text

+ zoomDisplay.textContent = `${this.microscopeName} ${this.currentZoomLevel}`

+ }

+

+ microscopeName = "Swift SW200DL"

+ zoomLevels = ["40x", "100x", "400x"]

+ currentZoomLevel = "100x"

+

+ drawRandomBoxesCommand(container) {

+ const data = this.instances.get(container)

+ // Toggle automatic box drawing

+ if (data.autoDrawInterval) {

+ clearInterval(data.autoDrawInterval)

+ data.autoDrawInterval = null

+ console.log("Stopped auto drawing")

+ } else {

+ console.log("Started auto drawing")

+ let max = 253

+ data.autoDrawInterval = setInterval(() => {

+ if (max) {

+ this.drawRandomBox(container)

+ max--

+ if (Math.random() > 0.92) this.drawRandomBox(container)

+ }, 25) // Draw every 500ms

+ }

+ editButton /edit.html

+

+ https://hub.powerhouse.wiki/powerhouse.parsers

+

+ powerhouseButton

+

+ const fs = require("fs");

+ const decompress = require("decompress");

+

+ const nvai_url =

+ "https://ai.api.nvidia.com/v1/cv/nvidia/retail-object-detection";

+ const header_auth = `Bearer $API_KEY_REQUIRED_IF_EXECUTING_OUTSIDE_NGC`;

+

+ async function _upload_asset(input, description) {

+ const assets_url = "https://api.nvcf.nvidia.com/v2/nvcf/assets";

+

+ const headers = {

+ Authorization: header_auth,

+ "Content-Type": "application/json",

+ accept: "application/json",

+ };

+

+ const s3_headers = {

+ "x-amz-meta-nvcf-asset-description": description,

+ "content-type": "video/mp4",

+ };

+

+ const payload = {

+ contentType: "video/mp4",

+ description: description,

+ };

+

+ const response = await fetch(assets_url, {

+ method: "POST",

+ body: JSON.stringify(payload),

+ headers: headers,

+ });

+

+ const data = await response.json();

+

+ const asset_url = data["uploadUrl"];

+ const asset_id = data["assetId"];

+

+ const fileData = fs.readFileSync(input);

+

+ await fetch(asset_url, {

+ method: "PUT",

+ body: fileData,

+ headers: s3_headers,

+ });

+

+ return asset_id.toString();

+ }

+

+ (async () => {

+ if (process.argv.length != 4) {

+ console.log("Usage: node test.js ");

+ process.exit(1);

+ }

+

+ // Upload specified user asset

+ const asset_id = await _upload_asset(`${process.argv[2]}`, "Input Video");

+

+ // Metadata for the request

+ const inputs = { input_video: asset_id, threshold: 0.9 };

+ const asset_list = asset_id;

+ const headers = {

+ "Content-Type": "application/json",

+ "NVCF-INPUT-ASSET-REFERENCES": asset_list,

+ "NVCF-FUNCTION-ASSET-IDS": asset_list,

+ Authorization: header_auth,

+ };

+

+ // Make the request to nvcf

+ const response = await fetch(nvai_url, {

+ method: "POST",

+ body: JSON.stringify(inputs),

+ headers: headers,

+ });

+

+ // Gather the binary response data

+ const arrayBuffer = await response.arrayBuffer();

+ const buffer = Buffer.from(arrayBuffer);

+

+ const zipname = `${process.argv[3]}.zip`;

+ fs.writeFileSync(zipname, buffer);

+

+ // Unzip the response synchronously

+ await decompress(zipname, process.argv[3]);

+

+ // Log the output directory and its contents

+ console.log(`Response saved to ${process.argv[3]}`);

+ console.log(fs.readdirSync(process.argv[3]));

+ })();

+ hud Swift SW200DL 100x

+ let max = 253

+ } else {

+ if (Math.random() > 0.92) this.drawRandomBox(container)

+ const minSize = 10

+ const maxSize = 30

+

+

+

+

+

+ this.instances = new Map()

+ this.model = null

+ this.isDetecting = false

+ async init() {

+ // Load COCO-SSD model using the official library

+ try {

+ // Load the model directly from the CDN

+ this.model = await cocoSsd.load()

+ console.log("TensorFlow model loaded successfully")

+ } catch (err) {

+ console.error("Error loading TensorFlow model:", err)

+ }

+

+

+ // Start detection loop once everything is set up

+ this.startDetection(container)

+ }

+

+ async startDetection(container) {

+ const data = this.instances.get(container)

+ const { video } = data

+

+ if (!this.model) {

+ console.error("TensorFlow model not loaded")

+ return

+ }

+

+ // Wait for video to be ready

+ if (video.readyState === 0) {

+ video.addEventListener("loadeddata", () => this.startDetection(container))

+ return

+ }

+

+ const detectFrame = async () => {

+ if (!this.isDetecting) return

+

+ // Check if video is ready and has valid dimensions

+ if (

+ video.readyState !== 4 ||

+ video.videoWidth === 0 ||

+ video.videoHeight === 0

+ ) {

+ requestAnimationFrame(() => detectFrame())

+ return

+ }

+

+ try {

+ // Make sure video dimensions are set

+ if (video.width !== video.videoWidth) {

+ video.width = video.videoWidth

+ }

+ if (video.height !== video.videoHeight) {

+ video.height = video.videoHeight

+ }

+

+ // Perform detection only if video is playing and visible

+ if (!video.paused && !video.ended && video.style.display !== "none") {

+ const predictions = await this.model.detect(video)

+

+ // Clear previous boxes

+ this.clearCanvas(container)

+

+ // Draw AI predictions in a different color without adding to boxes

+ predictions.forEach((prediction) => {

+ if (prediction.score > 0.5) {

+ // Confidence threshold

+ const [x, y, width, height] = prediction.bbox

+

+ // Draw AI predictions in blue

+ const { ctx } = data

+ ctx.strokeStyle = "#0000ff"

+ ctx.lineWidth = 2

+ ctx.strokeRect(x, y, width, height)

+

+ if (prediction.score !== null) {

+ ctx.fillStyle = "#0000ff"

+ ctx.font = "12px Arial"

+ ctx.fillText(`${Math.round(prediction.score * 100)}%`, x, y - 5)

+ }

+ }

+ })

+

+ // Redraw manual boxes in green

+ data.boxes.forEach((box) => {

+ this.drawBox(container, box.x, box.y, box.width, box.height)

+ })

+ }

+ } catch (err) {

+ console.error("Detection error:", err)

+ }

+

+ // Request next frame

+ requestAnimationFrame(() => detectFrame())

+ }

+

+ // Start detection loop

+ this.isDetecting = true

+ detectFrame()

+ }

+

+ drawBox(container, x, y, width, height, score = null) {

+ const data = this.instances.get(container)

+ const { ctx } = data

+

+ ctx.strokeStyle = "#00ff00"

+ ctx.lineWidth = 2

+ ctx.strokeRect(x, y, width, height)

+

+ if (score !== null) {

+ ctx.fillStyle = "#00ff00"

+ ctx.font = "12px Arial"

+ ctx.fillText(`${Math.round(score * 100)}%`, x, y - 5)

+ }

+ }

+

+ updateCellCount(container) {

+ const data = this.instances.get(container)

+ const hud = container.querySelector(".scrollWebcamHud")

+ const cellCounter = hud.querySelector(

+ '.scrollWebcamHudElement[data-type="cellCount"]',

+ )

+ if (cellCounter) {

+ cellCounter.textContent = `Cells Detected: ${data.boxes.length}`

+ }

+ // Add demo video option first

+ const demoOption = document.createElement("option")

+ demoOption.value = "demo"

+ demoOption.text = "Demo Video"

+ select.appendChild(demoOption)

+

+ // Add webcam options

+ videoDevices.forEach((device) => {

+ const option = document.createElement("option")

+ option.value = device.deviceId

+ option.text = device.label || `Camera ${select.length}`

+ select.appendChild(option)

+ })

+

+ select.style.display = "block"

+ select.addEventListener("change", (e) => {

+ if (e.target.value === "demo") {

+ this.startDemoVideo(container)

+ } else {

+ this.startCamera(container, e.target.value)

+ }

+ })

+ async startDemoVideo(container) {

+ const data = this.instances.get(container)

+ const { video, currentStream } = data

+

+ // Stop any existing stream

+ if (currentStream) {

+ currentStream.getTracks().forEach((track) => track.stop())

+ data.currentStream = null

+ }

+

+ // Set up video source

+ video.src = "rbc.mp4" // Make sure this file exists in your project

+ video.loop = true // Loop the video

+ video.play().catch((err) => {

+ console.error("Error playing demo video:", err)

+ container.innerHTML = "Error: Could not play demo video"

+ })

+ }

+

+

+ // Wait for video to be ready before playing

+ await new Promise((resolve) => {

+ video.onloadedmetadata = () => {

+ video.width = video.videoWidth

+ video.height = video.videoHeight

+ resolve()

+ }

+ })

+

+ await video.play()

+ canvas.width = video.videoWidth || video.width

+ canvas.height = video.videoHeight || video.height

+ canvas.style.width = "100%" // Make canvas scale with container

+ canvas.style.height = "100%"

+ } else if (e.key.toLowerCase() === "r") {

+ // Toggle automatic box drawing

+ if (data.autoDrawInterval) {

+ clearInterval(data.autoDrawInterval)

+ data.autoDrawInterval = null

+ console.log("Stopped auto drawing")

+ } else {

+ console.log("Started auto drawing")

+ let max = 53

+ data.autoDrawInterval = setInterval(() => {

+ if (max) {

+ this.drawRandomBox(container)

+ max--

+ }

+ }, 25) // Draw every 500ms

+ }

+ drawRandomBox(container) {

+ const data = this.instances.get(container)

+ const { canvas } = data

+

+ // Generate random box dimensions within canvas bounds

+ const minSize = 20

+ const maxSize = 50

+ const width = Math.random() * (maxSize - minSize) + minSize

+ const height = Math.random() * (maxSize - minSize) + minSize

+ const x = Math.random() * (canvas.width - width)

+ const y = Math.random() * (canvas.height - height)

+

+ // Add the box to the collection

+ data.boxes.push({ x, y, width, height })

+

+ // Redraw all boxes

+ this.redrawBoxes(container)

+

+ // Update cell counter

+ const hud = container.querySelector(".scrollWebcamHud")

+ const cellCounter = hud.querySelector(

+ '.scrollWebcamHudElement[data-type="cellCount"]',

+ )

+ if (cellCounter) {

+ cellCounter.textContent = `Cells Counted: ${data.boxes.length}`

+ }

+ }

+

+ // Initialize the app when the DOM is loaded

+ document.addEventListener("DOMContentLoaded", async () => {

+ // Verify TensorFlow.js and COCO-SSD are loaded

+ if (typeof tf === "undefined") {

+ console.error("TensorFlow.js is not loaded")

+ return

+ }

+ if (typeof cocoSsd === "undefined") {

+ console.error("COCO-SSD model is not loaded")

+ return

+ }

+

+ console.log("TensorFlow.js loaded:", typeof tf !== "undefined")

+ console.log("COCO-SSD loaded:", typeof cocoSsd !== "undefined")

+

+ await app.init()

+

+ https://cdn.jsdelivr.net/npm/@tensorflow/tfjs

+ https://cdn.jsdelivr.net/npm/@tensorflow-models/coco-ssd

+ // lib/tensorflow/coco-ssd.min.js

+

+ autoplay

+ loop

+ rbc.mp4

+ autoplay

+ buildHtml

+ rbc.mp4

+ class MitoSiteApp {

+ constructor(containerSelector = ".scrollWebcam") {

+ this.containers = document.querySelectorAll(containerSelector)

+ this.instances = new Map() // Store instance data for each container

+

+ this.init()

+ console.log()

+ }

+

+ init() {

+ this.containers.forEach((container) => this.setupContainer(container))

+ }

+

+ async setupContainer(container) {

+ const instanceData = {

+ video: container.querySelector("video"),

+ select: document.querySelector(".scrollWebcamSelect"),

+ currentStream: null,

+ boxes: [],

+ isDrawing: false,

+ startX: 0,

+ startY: 0,

+

+ this.instances.set(container, instanceData)

+

+ await this.setupWebcam(container)

+ this.setupCanvas(container)

+ this.setupHUD(container)

+ }

+

+ async setupWebcam(container) {

+ const data = this.instances.get(container)

+ const { video, select } = data

+

+

+ select.addEventListener("change", (e) =>

+ this.startCamera(container, e.target.value),

+ )

+

+ await this.startCamera(container)

+ await this.startCamera(container)

+ }

+

+ async startCamera(container, deviceId = null) {

+ const data = this.instances.get(container)

+ const { video, currentStream } = data

+

+ if (currentStream) {

+ currentStream.getTracks().forEach((track) => track.stop())

+ try {

+ const constraints = {

+ video: {

+ width: parseInt(container.dataset.width) || 640,

+ height: parseInt(container.dataset.height) || 480,

+ },

+ }

+

+ if (deviceId) {

+ constraints.video.deviceId = { exact: deviceId }

+ }

+

+ const stream = await navigator.mediaDevices.getUserMedia(constraints)

+ data.currentStream = stream

+ video.srcObject = stream

+ video.play()

+ } catch (err) {

+ console.error("Error accessing webcam:", err)

+ container.innerHTML = "Error: Could not access webcam"

+ }

+ }

+

+ setupCanvas(container) {

+ const data = this.instances.get(container)

+ const { video } = data

+

+

+ data.canvas = canvas

+ data.ctx = canvas.getContext("2d")

+ this.setupCanvasEventListeners(container)

+ this.setupKeyboardShortcuts(container)

+ }

+ setupHUD(container) {

+ const hud = container.querySelector(".scrollWebcamHud")

+ if (hud) {

+ // Create cell counter element if it doesn't exist

+ let cellCounter = hud.querySelector(

+ '.scrollWebcamHudElement[data-type="cellCount"]',

+ )

+ if (!cellCounter) {

+ cellCounter = document.createElement("div")

+ cellCounter.className = "scrollWebcamHudElement"

+ cellCounter.dataset.type = "cellCount"

+ cellCounter.style.position = "absolute"

+ cellCounter.style.bottom = "10px"

+ cellCounter.style.left = "10px"

+ cellCounter.style.fontSize = "30px"

+ //cellCounter.style.color = "#00ff00"

+ cellCounter.style.textShadow = "1px 1px 2px black"

+ hud.appendChild(cellCounter)

+ }

+ setInterval(() => {

+ hud.querySelectorAll(".scrollWebcamHudElement").forEach((el) => {

+ if (el.dataset.type === "time") {

+ const now = new Date()

+ const days = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"]

+ const dayOfWeek = days[now.getDay()]

+ el.textContent = `${dayOfWeek} ${now.toLocaleDateString()} ${now.toLocaleTimeString()}`

+ } else if (el.dataset.type === "cellCount") {

+ const data = this.instances.get(container)

+ el.textContent = `Cells Counted: ${data.boxes.length}`

+ }

+ })

+ }, 1000)

+ }

+ setupCanvasEventListeners(container) {

+ const data = this.instances.get(container)

+ const { canvas } = data

+ canvas.addEventListener("mousedown", (e) =>

+ this.handleMouseDown(container, e),

+ )

+ canvas.addEventListener("mousemove", (e) =>

+ this.handleMouseMove(container, e),

+ )

+ canvas.addEventListener("mouseup", (e) => this.handleMouseUp(container, e))

+ canvas.addEventListener("dblclick", () => this.clearAllBoxes(container))

+ }

+ setupKeyboardShortcuts(container) {

+ document.addEventListener("keydown", (e) => {

+ const data = this.instances.get(container)

+ if (e.key === "Escape") {

+ data.isDrawing = false

+ this.redrawBoxes(container)

+ } else if (e.key === "z" && e.ctrlKey) {

+ data.boxes.pop()

+ this.redrawBoxes(container)

+ } else if (e.key === "Delete") {

+ this.clearAllBoxes(container)

+ }

+ handleMouseDown(container, e) {

+ const data = this.instances.get(container)

+ const rect = data.canvas.getBoundingClientRect()

+ data.startX = e.clientX - rect.left

+ data.startY = e.clientY - rect.top

+ data.isDrawing = true

+ }

+

+ handleMouseMove(container, e) {

+ const data = this.instances.get(container)

+ if (!data.isDrawing) return

+

+ const rect = data.canvas.getBoundingClientRect()

+ const currentX = e.clientX - rect.left

+ const currentY = e.clientY - rect.top

+

+ this.clearCanvas(container)

+ this.redrawBoxes(container)

+ this.drawBox(

+ container,

+ data.startX,

+ data.startY,

+ currentX - data.startX,

+ currentY - data.startY,

+ )

+ }

+

+ handleMouseUp(container, e) {

+ const data = this.instances.get(container)

+ if (!data.isDrawing) return

+

+ const rect = data.canvas.getBoundingClientRect()

+ const endX = e.clientX - rect.left

+ const endY = e.clientY - rect.top

+

+ const x = Math.min(data.startX, endX)

+ const y = Math.min(data.startY, endY)

+ const width = Math.abs(endX - data.startX)

+ const height = Math.abs(endY - data.startY)

+

+ if (width > 5 && height > 5) {

+ data.boxes.push({ x, y, width, height })

+ // Update cell counter immediately after adding a box

+ const hud = container.querySelector(".scrollWebcamHud")

+ const cellCounter = hud.querySelector(

+ '.scrollWebcamHudElement[data-type="cellCount"]',

+ )

+ if (cellCounter) {

+ cellCounter.textContent = `Cells Counted: ${data.boxes.length}`

+ }

+

+ data.isDrawing = false

+ this.redrawBoxes(container)

+ }

+

+ drawBox(container, x, y, width, height) {

+ const data = this.instances.get(container)

+ const { ctx } = data

+

+ ctx.strokeStyle = "#00ff00"

+ ctx.lineWidth = 2

+ ctx.strokeRect(x, y, width, height)

+ }

+

+ clearCanvas(container) {

+ const data = this.instances.get(container)

+ const { ctx, canvas } = data

+ ctx.clearRect(0, 0, canvas.width, canvas.height)

+ }

+

+ redrawBoxes(container) {

+ const data = this.instances.get(container)

+

+ this.clearCanvas(container)

+ data.boxes.forEach((box) => {

+ this.drawBox(container, box.x, box.y, box.width, box.height)

+ }

+

+ clearAllBoxes(container) {

+ const data = this.instances.get(container)

+ data.boxes = []

+ this.clearCanvas(container)

+

+ // Update cell counter when clearing boxes

+ const hud = container.querySelector(".scrollWebcamHud")

+ const cellCounter = hud.querySelector(

+ '.scrollWebcamHudElement[data-type="cellCount"]',

+ )

+ if (cellCounter) {

+ cellCounter.textContent = "Cells Counted: 0"

+ }

+ }

+ }

+

+ document.addEventListener("DOMContentLoaded", () => {

+ const app = new MitoSiteApp()

+ mitosite.js

+ document.addEventListener("DOMContentLoaded", () => {

+ document.querySelectorAll(".scrollWebcam").forEach(async (container) => {

+ const video = container.querySelector("video")

+ const select = container.querySelector("select")

+ let currentStream = null

+ async function startCamera(deviceId) {

+ if (currentStream) {

+ currentStream.getTracks().forEach((track) => track.stop())

+ }

+ try {

+ const constraints = {

+ video: {

+ width: parseInt(container.dataset.width) || 640,

+ height: parseInt(container.dataset.height) || 480,

+ },

+ }

+ if (deviceId) {

+ constraints.video.deviceId = { exact: deviceId }

+ }

+ const stream = await navigator.mediaDevices.getUserMedia(constraints)

+ currentStream = stream

+ video.srcObject = stream

+ video.play()

+ } catch (err) {

+ console.error("Error accessing webcam:", err)

+ container.innerHTML = "Error: Could not access webcam"

+ }

+ }

+ // Get list of cameras

+ try {

+ const devices = await navigator.mediaDevices.enumerateDevices()

+ const videoDevices = devices.filter(

+ (device) => device.kind === "videoinput",

+ )

+ if (videoDevices.length > 1) {

+ videoDevices.forEach((device) => {

+ const option = document.createElement("option")

+ option.value = device.deviceId

+ option.text = device.label || `Camera ${select.length + 1}`

+ select.appendChild(option)

+ })

+ select.style.display = "block"

+ select.addEventListener("change", (e) => startCamera(e.target.value))

+ } else {

+ select.style.display = "none"

+ }

+ startCamera()

+ } catch (err) {

+ console.error("Error getting camera list:", err)

+ startCamera() // Try to start with default camera

+ }

+ // Update HUD elements

+ const hud = container.querySelector(".scrollWebcamHud")

+ if (hud) {

+ setInterval(() => {

+ hud.querySelectorAll(".scrollWebcamHudElement").forEach((el) => {

+ if (el.dataset.type === "time") {

+ const now = new Date()

+ const days = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"]

+ const dayOfWeek = days[now.getDay()]

+ el.textContent = `${dayOfWeek} ${now.toLocaleDateString()} ${now.toLocaleTimeString()}`

+ }

+ })

+ }, 1000)

+ }

+ })

+ })

+

+ document.addEventListener("DOMContentLoaded", () => {

+ document.querySelectorAll(".scrollWebcam").forEach((container) => {

+ // Create and add canvas element

+ const video = container.querySelector("video")

+ const canvas = document.createElement("canvas")

+ canvas.className = "scrollWebcamCanvas"

+ canvas.width = video.width

+ canvas.height = video.height

+ canvas.style.position = "absolute"

+ canvas.style.top = "0"

+ canvas.style.left = "0"

+ canvas.style.zIndex = "1"

+ canvas.style.cursor = "crosshair"

+ container.insertBefore(canvas, container.firstChild.nextSibling)

+

+ const ctx = canvas.getContext("2d")

+ let isDrawing = false

+ let startX, startY

+ let boxes = []

+

+ function drawBox(x, y, width, height) {

+ ctx.strokeStyle = "#00ff00"

+ ctx.lineWidth = 2

+ ctx.strokeRect(x, y, width, height)

+ }

+

+ function clearCanvas() {

+ ctx.clearRect(0, 0, canvas.width, canvas.height)

+ }

+

+ function redrawBoxes() {

+ clearCanvas()

+ boxes.forEach((box) => {

+ drawBox(box.x, box.y, box.width, box.height)

+ })

+ }

+

+ // Mouse event handlers

+ canvas.addEventListener("mousedown", (e) => {

+ const rect = canvas.getBoundingClientRect()

+ startX = e.clientX - rect.left

+ startY = e.clientY - rect.top

+ isDrawing = true

+ })

+

+ canvas.addEventListener("mousemove", (e) => {

+ if (!isDrawing) return

+ const rect = canvas.getBoundingClientRect()

+ const currentX = e.clientX - rect.left

+ const currentY = e.clientY - rect.top

+

+ clearCanvas()

+ redrawBoxes()

+ drawBox(startX, startY, currentX - startX, currentY - startY)

+ })

+

+ canvas.addEventListener("mouseup", (e) => {

+ if (!isDrawing) return

+ const rect = canvas.getBoundingClientRect()

+ const endX = e.clientX - rect.left

+ const endY = e.clientY - rect.top

+

+ // Ensure positive width/height by normalizing coordinates

+ const x = Math.min(startX, endX)

+ const y = Math.min(startY, endY)

+ const width = Math.abs(endX - startX)

+ const height = Math.abs(endY - startY)

+

+ // Only add box if it has some size

+ if (width > 5 && height > 5) {

+ boxes.push({ x, y, width, height })

+ }

+

+ isDrawing = false

+ redrawBoxes()

+ })

+

+ // Double click to clear all boxes

+ canvas.addEventListener("dblclick", () => {

+ boxes = []

+ clearCanvas()

+ })

+

+ // Add keyboard shortcuts

+ document.addEventListener("keydown", (e) => {

+ if (e.key === "Escape") {

+ // Escape cancels current drawing

+ isDrawing = false

+ redrawBoxes()

+ } else if (e.key === "z" && e.ctrlKey) {

+ // Ctrl+Z removes last box

+ boxes.pop()

+ redrawBoxes()

+ } else if (e.key === "Delete") {

+ // Delete clears all boxes

+ boxes = []

+ clearCanvas()

+ }

+ })

+ })

+ })

+ camera.js

+ position top-left

+

+

+ select

+ class scrollWebcamSelect

+ option Default Camera

+ bottom: 10px;

+ bottom: -20px;

+ const now = new Date();

+ const days = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];

+ const dayOfWeek = days[now.getDay()];

+ el.textContent = `${dayOfWeek} ${now.toLocaleDateString()} ${now.toLocaleTimeString()}`;

+ .scrollWebcam {

+ overflow: hidden;

+ border-radius: 8px;

+ border: 3px solid grey;

+ .scrollWebcamCanvas {

+ border-radius: 5px;

+ border: 1px solid red;

+ .scrollWebcamHud {

+ position: absolute;

+ top: 0;

+ left: 0;

+ width: 100%;

+ height: 100%;

+ z-index: 1;

+ pointer-events: none;

+ border: 2px solid #00ff00;

+ box-shadow:

+ 0 0 10px rgba(0, 255, 0, 0.3),

+ inset 0 0 20px rgba(0, 255, 0, 0.1);

+ background: linear-gradient(

+ 135deg,

+ rgba(0, 255, 0, 0.05) 0%,

+ rgba(0, 0, 0, 0) 100%

+ );

+ backdrop-filter: blur(1px);

+ }

+

+ /* Optional corner accents */

+ .scrollWebcamHud::before,

+ .scrollWebcamHud::after {

+ content: "";

+ position: absolute;

+ width: 20px;

+ height: 20px;

+ border: 2px solid #00ff00;

+ opacity: 0.8;

+ }

+

+ .scrollWebcamHud::before {

+ top: -2px;

+ left: -2px;

+ border-right: none;

+ border-bottom: none;

+ }

+

+ .scrollWebcamHud::after {

+ bottom: -2px;

+ right: -2px;

+ border-left: none;

+ border-top: none;

+ }

+

+ hud Swift SW200DL 400x

+ webcam 800 600

+ webcam 1200 800

+ color white

+ h1 Mitosite

+ theme prestige

+ font Baskerville

+ h1 MITOSITE

+ font "Baskerville", "Times New Roman", serif;

+

+ center

+ h1 Mitosite

+

+ theme prestige

+

+ :root {

+ --primary-color: #00ff9d;

+ --bg-color: #000810;

+ --text-color: #ffffff;

+ --hud-bg: rgba(0, 12, 24, 0.85);

+ }

+

+ * {

+ margin: 0;

+ padding: 0;

+ box-sizing: border-box;

+ }

+

+ body {

+ background: var(--bg-color);

+ color: var(--text-color);

+ font-family: "Segoe UI", system-ui, sans-serif;

+ min-height: 100vh;

+ display: flex;

+ flex-direction: column;

+ }

+

+ center

+ webcam 1300 600

+ webcam 1300 560

+ code2.parsers

+ extends abstractHtmlElementParser

+ buildHtml() {

+ webcamParser

+ description A webcam feed with optional HUD overlay

+ extends abstractScrollWithRequirementsParser

+ cueFromId

+ atoms cueAtom integerAtom integerAtom

+ inScope hudElementParser scrollMediaLoopParser

+ string requireOnce

+ javascript

+ buildInstance() {

+ const width = this.getAtom(1) || "640"

+ const height = this.getAtom(2) || "480"

+ const id = this._getUid()

+ // Build HUD elements HTML if any exist

+ let hudHtml = ""

+ const hudElements = this.getParticles("hud")

+ if (hudElements.length) {

+ hudHtml = ``

+ }

+ const loop = this.has("loop") ? " loop" : ""

+ const autoplay = this.has("autoplay") ? " autoplay" : ""

+ return ``

+ }

+ hudElementParser

+ description Add a HUD element overlay on the webcam

+ atoms cueAtom

+ catchAllAtomType stringAtom

+ cue hud

+ inScope positionParser hudTypeParser

+ javascript

+ get position() {

+ return this.get("position") || "top-left"

+ }

+ get type() {

+ return this.get("type") || "text"

+ }

+ buildHtml() {

+ const positionStyles = {

+ "top-left": "top: 10px; left: 10px;",

+ "top-right": "top: 10px; right: 10px;",

+ "bottom-left": "bottom: 10px; left: 10px;",

+ "bottom-right": "bottom: 10px; right: 10px;"

+ }

+ const style = positionStyles[this.position]

+ return ``

+ }

+ positionParser

+ description Position of the HUD element

+ atoms cueAtom stringAtom

+ cue position

+ hudTypeParser

+ description Type of HUD element (text, time, etc)

+ atoms cueAtom stringAtom

+ cue type

+ script.js

+ style2.css

+ script2.js

+ document.addEventListener("DOMContentLoaded", () => {

+ const video = document.getElementById("webcam");

+ const currentZoom = document.getElementById("current-zoom");

+ const currentScale = document.getElementById("current-scale");

+

+ // Zoom levels and their corresponding scales in micrometers

+ const zoomLevels = {

+ "40x": 100,

+ "250x": 16,

+ "400x": 10,

+ };

+

+ let currentZoomLevel = "40x";

+

+ async function initCamera() {

+ try {

+ const stream = await navigator.mediaDevices.getUserMedia({

+ video: {

+ width: { ideal: 1920 },

+ height: { ideal: 1080 },

+ },

+ });

+ video.srcObject = stream;

+ } catch (err) {

+ console.error("Error accessing webcam:", err);

+ alert(

+ "Unable to access webcam. Please ensure you have given permission and have a camera connected.",

+ );

+ }

+ }

+

+ // Handle keyboard shortcuts for zoom levels

+ document.addEventListener("keydown", (e) => {

+ switch (e.key) {

+ case "1":

+ updateZoom("40x");

+ break;

+ case "2":

+ updateZoom("250x");

+ break;

+ case "3":

+ updateZoom("400x");

+ break;

+ }

+ });

+

+ function updateZoom(zoom) {

+ currentZoomLevel = zoom;

+ currentZoom.textContent = zoom;

+ currentScale.textContent = `${zoomLevels[zoom]}μm`;

+ }

+

+ // Initialize camera

+ initCamera();

+ });

+ buildHtml

+ metaTags

+ editButton /edit.html

+ title MitoSite - Live Microscope Visualization

+ style.css

+ header

+ class header

+ h1 MitoSite

+ p Real-time microscope visualization

+ main

+ section

+ class microscope-view

+ div

+ class camera-container

+ webcam 640 480

+ hud Current Time

+ type time

+ position top-right

+ hud Live Feed

+ position top-left

+ div

+ class hud-overlay

+ div

+ class zoom-indicator

+ span Current Zoom:

+ span

+ id current-zoom

+ 40x

+ div

+ class scale-indicator

+ span Scale:

+ span

+ id current-scale

+ 100μm

+ footer

+ nav

+ a Home

+ href /

+ a About

+ href /about

+ a Contact

+ href /contact

+ script.js

+ document.addEventListener('DOMContentLoaded', () => {

+ const video = document.getElementById('webcam');

+ const currentZoom = document.getElementById('current-zoom');

+ const currentScale = document.getElementById('current-scale');

+

+ // Zoom levels and their corresponding scales in micrometers

+ const zoomLevels = {

+ '40x': 100,

+ '250x': 16,

+ '400x': 10

+ };

+

+ let currentZoomLevel = '40x';

+

+ async function initCamera() {

+ try {

+ const stream = await navigator.mediaDevices.getUserMedia({

+ video: {

+ width: { ideal: 1920 },

+ height: { ideal: 1080 }

+ }

+ });

+ video.srcObject = stream;

+ } catch (err) {

+ console.error('Error accessing webcam:', err);

+ alert('Unable to access webcam. Please ensure you have given permission and have a camera connected.');

+ }

+ }

+

+ // Handle keyboard shortcuts for zoom levels

+ document.addEventListener('keydown', (e) => {

+ switch(e.key) {

+ case '1':

+ updateZoom('40x');

+ break;

+ case '2':

+ updateZoom('250x');

+ break;

+ case '3':

+ updateZoom('400x');

+ break;

+ }

+ });

+

+ function updateZoom(zoom) {

+ currentZoomLevel = zoom;

+ currentZoom.textContent = zoom;

+ currentScale.textContent = `${zoomLevels[zoom]}μm`;

+ }

+

+ // Initialize camera

+ initCamera();

+ });

+ :root {

+ --primary-color: #00ff9d;

+ --bg-color: #000810;

+ --text-color: #ffffff;

+ --hud-bg: rgba(0, 12, 24, 0.85);

+ }

+

+ * {

+ margin: 0;

+ padding: 0;

+ box-sizing: border-box;

+ }

+

+ body {

+ background: var(--bg-color);

+ color: var(--text-color);

+ font-family: "Segoe UI", system-ui, sans-serif;

+ min-height: 100vh;

+ display: flex;

+ flex-direction: column;

+ }

+

+ .header {

+ padding: 1rem;

+ text-align: center;

+ background: var(--hud-bg);

+ border-bottom: 2px solid var(--primary-color);

+ }

+

+ .header h1 {

+ color: var(--primary-color);

+ font-size: 2rem;

+ margin-bottom: 0.5rem;

+ }

+

+ .microscope-view {

+ flex: 1;

+ position: relative;

+ padding: 1rem;

+ }

+

+ .camera-container {

+ width: 100%;

+ height: calc(100vh - 200px);

+ position: relative;

+ border: 4px solid var(--primary-color);

+ border-radius: 8px;

+ overflow: hidden;

+ box-shadow: 0 0 20px rgba(0, 255, 157, 0.3);

+ }

+

+ #webcam {

+ width: 100%;

+ height: 100%;

+ object-fit: cover;

+ }

+

+ .hud-overlay {

+ position: absolute;

+ top: 2rem;

+ right: 2rem;

+ background: var(--hud-bg);

+ padding: 1rem;

+ border-radius: 8px;

+ border: 2px solid var(--primary-color);

+ font-family: "Courier New", monospace;

+ }

+

+ .zoom-indicator,

+ .scale-indicator {

+ margin: 0.5rem 0;

+ display: flex;

+ justify-content: space-between;

+ gap: 1rem;

+ }

+

+ footer {

+ background: var(--hud-bg);

+ padding: 1rem;

+ text-align: center;

+ border-top: 2px solid var(--primary-color);

+ }

+

+ footer nav {

+ display: flex;

+ justify-content: center;

+ gap: 2rem;

+ }

+

+ footer a {

+ color: var(--text-color);

+ text-decoration: none;

+ transition: color 0.3s ease;

+ }

+

+ footer a:hover {

+ color: var(--primary-color);

+ }

+

+ @media (max-width: 768px) {

+ .camera-container {

+ height: calc(100vh - 250px);

+ }

+

+ .hud-overlay {

+ top: 1rem;

+ right: 1rem;

+ font-size: 0.9rem;

+ }

+ }

+ buildHtml

+ metaTags

+ editButton /edit.html

+ title MitoSite - Live Microscope Visualization

+ style.css

+ header

+ class header

+ h1 MitoSite

+ p Real-time microscope visualization

+ main

+ section

+ class microscope-view

+ div

+ class camera-container

+ webcam 640 480

+ hud Current Time

+ type time

+ position top-right

+ hud Live Feed

+ position top-left

+ div

+ class hud-overlay

+ div

+ class zoom-indicator

+ span Current Zoom:

+ span

+ id current-zoom

+ 40x

+ div

+ class scale-indicator

+ span Scale:

+ span

+ id current-scale

+ 100μm

+ footer

+ nav

+ a Home

+ href /

+ a About

+ href /about

+ a Contact

+ href /contact

+ script.js

+ /* Webcam styles */

+ .scrollWebcam {

+ display: inline-block;

+ .scrollWebcam video {

+ z-index: 0;

+ .scrollWebcamHud {

+ position: absolute;

+ top: 0;

+ left: 0;

+ z-index: 1;

+ pointer-events: none;

+ .scrollWebcamHudElement {

+ color: #fff;

+ text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);

+ font-family: monospace;

+ padding: 4px;

+ .scrollWebcamSelect {

+ position: absolute;

+ bottom: 10px;

+ left: 50%;

+ transform: translateX(-50%);

+ z-index: 2;

+ background: rgba(0, 0, 0, 0.5);

+ color: white;

+ border: 1px solid rgba(255, 255, 255, 0.3);

+ padding: 5px;

+ pointer-events: all;

+ document.addEventListener("DOMContentLoaded", () => {

+ document.querySelectorAll(".scrollWebcam").forEach(async (container) => {

+ const video = container.querySelector("video");

+ const select = container.querySelector("select");

+ let currentStream = null;

+ async function startCamera(deviceId) {

+ if (currentStream) {

+ currentStream.getTracks().forEach((track) => track.stop());

+ }

+ try {

+ const constraints = {

+ video: {

+ width: parseInt(container.dataset.width) || 640,

+ height: parseInt(container.dataset.height) || 480,

+ },

+ };

+ if (deviceId) {

+ constraints.video.deviceId = { exact: deviceId };

+ const stream = await navigator.mediaDevices.getUserMedia(constraints);

+ currentStream = stream;

+ video.srcObject = stream;

+ video.play();

+ } catch (err) {

+ console.error("Error accessing webcam:", err);

+ container.innerHTML = "Error: Could not access webcam";

+ }

+ }

+ // Get list of cameras

+ try {

+ const devices = await navigator.mediaDevices.enumerateDevices();

+ const videoDevices = devices.filter(

+ (device) => device.kind === "videoinput",

+ );

+ if (videoDevices.length > 1) {

+ videoDevices.forEach((device) => {

+ const option = document.createElement("option");

+ option.value = device.deviceId;

+ option.text = device.label || `Camera ${select.length + 1}`;

+ select.appendChild(option);

+ });

+ select.style.display = "block";

+ select.addEventListener("change", (e) => startCamera(e.target.value));

+ } else {

+ select.style.display = "none";

+ }

+ startCamera();

+ console.error("Error getting camera list:", err);

+ startCamera(); // Try to start with default camera

+ // Update HUD elements

+ const hud = container.querySelector(".scrollWebcamHud");

+ if (hud) {

+ setInterval(() => {

+ hud.querySelectorAll(".scrollWebcamHudElement").forEach((el) => {

+ if (el.dataset.type === "time") {

+ el.textContent = new Date().toLocaleTimeString();

+ }

+ });

+ }, 1000);

+ });

+ document.addEventListener("DOMContentLoaded", () => {

+ document.querySelectorAll(".scrollWebcam").forEach((container) => {

+ // Create and add canvas element

+ const video = container.querySelector("video");

+ const canvas = document.createElement("canvas");

+ canvas.className = "scrollWebcamCanvas";

+ canvas.width = video.width;

+ canvas.height = video.height;

+ canvas.style.position = "absolute";

+ canvas.style.top = "0";

+ canvas.style.left = "0";

+ canvas.style.zIndex = "1";

+ canvas.style.cursor = "crosshair";

+ container.insertBefore(canvas, container.firstChild.nextSibling);

+

+ const ctx = canvas.getContext("2d");

+ let isDrawing = false;

+ let startX, startY;

+ let boxes = [];

+

+ function drawBox(x, y, width, height) {

+ ctx.strokeStyle = "#00ff00";

+ ctx.lineWidth = 2;

+ ctx.strokeRect(x, y, width, height);

+ }

+

+ function clearCanvas() {

+ ctx.clearRect(0, 0, canvas.width, canvas.height);

+ }

+

+ function redrawBoxes() {

+ clearCanvas();

+ boxes.forEach((box) => {

+ drawBox(box.x, box.y, box.width, box.height);

+ });

+ }

+

+ // Mouse event handlers

+ canvas.addEventListener("mousedown", (e) => {

+ const rect = canvas.getBoundingClientRect();

+ startX = e.clientX - rect.left;

+ startY = e.clientY - rect.top;

+ isDrawing = true;

+ });

+

+ canvas.addEventListener("mousemove", (e) => {

+ if (!isDrawing) return;

+ const rect = canvas.getBoundingClientRect();

+ const currentX = e.clientX - rect.left;

+ const currentY = e.clientY - rect.top;

+

+ clearCanvas();

+ redrawBoxes();

+ drawBox(startX, startY, currentX - startX, currentY - startY);

+ });

+

+ canvas.addEventListener("mouseup", (e) => {

+ if (!isDrawing) return;

+ const rect = canvas.getBoundingClientRect();

+ const endX = e.clientX - rect.left;

+ const endY = e.clientY - rect.top;

+

+ // Ensure positive width/height by normalizing coordinates

+ const x = Math.min(startX, endX);

+ const y = Math.min(startY, endY);

+ const width = Math.abs(endX - startX);

+ const height = Math.abs(endY - startY);

+

+ // Only add box if it has some size

+ if (width > 5 && height > 5) {

+ boxes.push({ x, y, width, height });

+ }

+

+ isDrawing = false;

+ redrawBoxes();

+ });

+

+ // Double click to clear all boxes

+ canvas.addEventListener("dblclick", () => {

+ boxes = [];

+ clearCanvas();

+ });

+

+ // Add keyboard shortcuts

+ document.addEventListener("keydown", (e) => {

+ if (e.key === "Escape") {

+ // Escape cancels current drawing

+ isDrawing = false;

+ redrawBoxes();

+ } else if (e.key === "z" && e.ctrlKey) {

+ // Ctrl+Z removes last box

+ boxes.pop();

+ redrawBoxes();

+ } else if (e.key === "Delete") {

+ // Delete clears all boxes

+ boxes = [];

+ clearCanvas();

+ }

+ });

+ });

+ });

+ webcamParser

+ description A webcam feed with optional HUD overlay

+ extends abstractScrollWithRequirementsParser

+ cueFromId

+ atoms cueAtom integerAtom integerAtom

+ inScope hudElementParser scrollMediaLoopParser

+ string requireOnce

+ javascript

+ buildInstance() {

+ const width = this.getAtom(1) || "640"

+ const height = this.getAtom(2) || "480"

+ const id = this._getUid()

+ // Build HUD elements HTML if any exist

+ let hudHtml = ""

+ const hudElements = this.getParticles("hud")

+ if (hudElements.length) {

+ hudHtml = ``

+ }

+ const loop = this.has("loop") ? " loop" : ""

+ const autoplay = this.has("autoplay") ? " autoplay" : ""

+ return ``

+ }

+ hudElementParser

+ description Add a HUD element overlay on the webcam

+ atoms cueAtom

+ catchAllAtomType stringAtom

+ cue hud

+ inScope positionParser hudTypeParser

+ javascript

+ get position() {

+ return this.get("position") || "top-left"

+ }

+ get type() {

+ return this.get("type") || "text"

+ }

+ buildHtml() {

+ const positionStyles = {

+ "top-left": "top: 10px; left: 10px;",

+ "top-right": "top: 10px; right: 10px;",

+ "bottom-left": "bottom: 10px; left: 10px;",

+ "bottom-right": "bottom: 10px; right: 10px;"

+ }

+ const style = positionStyles[this.position]

+ return ``

+ }

+ positionParser

+ description Position of the HUD element

+ atoms cueAtom stringAtom

+ cue position

+ hudTypeParser

+ description Type of HUD element (text, time, etc)

+ atoms cueAtom stringAtom

+ cue type

+ code.parsers

+

+ script.js

+ boxes.js

+

+ webcam 640 480

+ hud Current Time

+ type time

+ position top-right

+ hud Live Feed

+ position top-left

+ baseUrl https://mitosite.powerhouse.wiki

+ buildHtml

+ baseUrl https://mitoscope.powerhouse.wiki

+ metaTags

+ editButton /edit.html

+ title MitoSite - Live Microscope Visualization

+ style.css

+ header

+ class header

+ h1 MitoSite

+ p Real-time microscope visualization

+ main

+ section

+ class microscope-view

+ div

+ class camera-container

+ video

+ id webcam

+ autoplay playsinline

+ div

+ class hud-overlay

+ div

+ class zoom-indicator

+ span Current Zoom:

+ span

+ id current-zoom

+ 40x

+ div

+ class scale-indicator

+ span Scale:

+ span

+ id current-scale

+ 100μm

+ footer

+ nav

+ a Home

+ href /

+ a About

+ href /about

+ a Contact

+ href /contact

+ script.js

+ {

+ "id": "msg_01NtaogXC5WCGG97cFQ9eAhJ",

+ "type": "message",

+ "role": "assistant",

+ "model": "claude-3-5-sonnet-20241022",

+ "content": [

+ {

+ "type": "text",

+ "text": "Let me create this microscope visualization website. For the domain, I suggest:\n\n---domain---\nmitoscope.powerhouse.wiki\n---index.scroll---\nbuildHtml\nbaseUrl https://mitoscope.powerhouse.wiki\nmetaTags\neditButton /edit.html\ntitle MitoSite - Live Microscope Visualization\nstyle.css\nheader\n class header\n h1 MitoSite\n p Real-time microscope visualization\nmain\n section\n class microscope-view\n div\n class camera-container\n video\n id webcam\n autoplay playsinline\n div\n class hud-overlay\n div\n class zoom-indicator\n span Current Zoom:\n span\n id current-zoom\n 40x\n div\n class scale-indicator\n span Scale:\n span\n id current-scale\n 100μm\nfooter\n nav\n a Home\n href /\n a About\n href /about\n a Contact\n href /contact\nscript.js\n---style.css---\n:root {\n --primary-color: #00ff9d;\n --bg-color: #000810;\n --text-color: #ffffff;\n --hud-bg: rgba(0, 12, 24, 0.85);\n}\n\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nbody {\n background: var(--bg-color);\n color: var(--text-color);\n font-family: 'Segoe UI', system-ui, sans-serif;\n min-height: 100vh;\n display: flex;\n flex-direction: column;\n}\n\n.header {\n padding: 1rem;\n text-align: center;\n background: var(--hud-bg);\n border-bottom: 2px solid var(--primary-color);\n}\n\n.header h1 {\n color: var(--primary-color);\n font-size: 2rem;\n margin-bottom: 0.5rem;\n}\n\n.microscope-view {\n flex: 1;\n position: relative;\n padding: 1rem;\n}\n\n.camera-container {\n width: 100%;\n height: calc(100vh - 200px);\n position: relative;\n border: 4px solid var(--primary-color);\n border-radius: 8px;\n overflow: hidden;\n box-shadow: 0 0 20px rgba(0, 255, 157, 0.3);\n}\n\n#webcam {\n width: 100%;\n height: 100%;\n object-fit: cover;\n}\n\n.hud-overlay {\n position: absolute;\n top: 2rem;\n right: 2rem;\n background: var(--hud-bg);\n padding: 1rem;\n border-radius: 8px;\n border: 2px solid var(--primary-color);\n font-family: 'Courier New', monospace;\n}\n\n.zoom-indicator, .scale-indicator {\n margin: 0.5rem 0;\n display: flex;\n justify-content: space-between;\n gap: 1rem;\n}\n\nfooter {\n background: var(--hud-bg);\n padding: 1rem;\n text-align: center;\n border-top: 2px solid var(--primary-color);\n}\n\nfooter nav {\n display: flex;\n justify-content: center;\n gap: 2rem;\n}\n\nfooter a {\n color: var(--text-color);\n text-decoration: none;\n transition: color 0.3s ease;\n}\n\nfooter a:hover {\n color: var(--primary-color);\n}\n\n@media (max-width: 768px) {\n .camera-container {\n height: calc(100vh - 250px);\n }\n \n .hud-overlay {\n top: 1rem;\n right: 1rem;\n font-size: 0.9rem;\n }\n}\n---script.js---\ndocument.addEventListener('DOMContentLoaded', () => {\n const video = document.getElementById('webcam');\n const currentZoom = document.getElementById('current-zoom');\n const currentScale = document.getElementById('current-scale');\n \n // Zoom levels and their corresponding scales in micrometers\n const zoomLevels = {\n '40x': 100,\n '250x': 16,\n '400x': 10\n };\n \n let currentZoomLevel = '40x';\n\n async function initCamera() {\n try {\n const stream = await navigator.mediaDevices.getUserMedia({ \n video: { \n width: { ideal: 1920 },\n height: { ideal: 1080 }\n }\n });\n video.srcObject = stream;\n } catch (err) {\n console.error('Error accessing webcam:', err);\n alert('Unable to access webcam. Please ensure you have given permission and have a camera connected.');\n }\n }\n\n // Handle keyboard shortcuts for zoom levels\n document.addEventListener('keydown', (e) => {\n switch(e.key) {\n case '1':\n updateZoom('40x');\n break;\n case '2':\n updateZoom('250x');\n break;\n case '3':\n updateZoom('400x');\n break;\n }\n });\n\n function updateZoom(zoom) {\n currentZoomLevel = zoom;\n currentZoom.textContent = zoom;\n currentScale.textContent = `${zoomLevels[zoom]}μm`;\n }\n\n // Initialize camera\n initCamera();\n});\n---end---\n\nThis implementation features:\n\n1. A full-screen webcam view with a glowing border\n2. A futuristic HUD overlay showing zoom level and scale\n3. Keyboard shortcuts (1,2,3) to change zoom levels\n4. Responsive design that works on mobile devices\n5. Clean, modern UI with a cyber-aesthetic theme\n6. Accessibility features and semantic HTML\n7. Error handling for camera permissions\n8. Smooth animations and transitions\n9. Professional footer navigation\n10. Beautiful neon-style CSS effects\n\nThe site automatically requests camera permissions and displays the feed. The HUD shows current zoom level and corresponding scale in micrometers. The design uses a dark theme with neon accents for a professional, scientific look."

+ }

+ ],

+ "stop_reason": "end_turn",

+ "stop_sequence": null,

+ "usage": {

+ "input_tokens": 922,

+ "cache_creation_input_tokens": 0,

+ "cache_read_input_tokens": 0,

+ "output_tokens": 1594

+ }

+ }

+ # mitoscope.powerhouse.wiki

+

+ website generated by Claude from prompt: MitoSite. You visit Mitosite and your webcam takes up nearly the full screen, with a cool border around it. Then, there's a very cool HUD. We are going to plug my webcam into my optical microscope, which can zoom in to 40x 250x and 400x. The Hud Shows the current zoom, and then also shows a scale which shows in micrometers we are looking at. so that is the HUD.

+ document.addEventListener('DOMContentLoaded', () => {

+ const video = document.getElementById('webcam');

+ const currentZoom = document.getElementById('current-zoom');

+ const currentScale = document.getElementById('current-scale');

+

+ // Zoom levels and their corresponding scales in micrometers

+ const zoomLevels = {

+ '40x': 100,

+ '250x': 16,

+ '400x': 10

+ };

+

+ let currentZoomLevel = '40x';

+

+ async function initCamera() {

+ try {

+ const stream = await navigator.mediaDevices.getUserMedia({

+ video: {

+ width: { ideal: 1920 },

+ height: { ideal: 1080 }

+ }

+ });

+ video.srcObject = stream;

+ } catch (err) {

+ console.error('Error accessing webcam:', err);

+ alert('Unable to access webcam. Please ensure you have given permission and have a camera connected.');

+ }

+ }

+

+ // Handle keyboard shortcuts for zoom levels

+ document.addEventListener('keydown', (e) => {

+ switch(e.key) {

+ case '1':

+ updateZoom('40x');

+ break;

+ case '2':

+ updateZoom('250x');

+ break;

+ case '3':

+ updateZoom('400x');

+ break;

+ }

+ });

+

+ function updateZoom(zoom) {

+ currentZoomLevel = zoom;

+ currentZoom.textContent = zoom;

+ currentScale.textContent = `${zoomLevels[zoom]}μm`;

+ }

+

+ // Initialize camera

+ initCamera();

+ });

+ :root {

+ --primary-color: #00ff9d;

+ --bg-color: #000810;

+ --text-color: #ffffff;

+ --hud-bg: rgba(0, 12, 24, 0.85);

+ }

+

+ * {

+ margin: 0;

+ padding: 0;

+ box-sizing: border-box;

+ }

+

+ body {

+ background: var(--bg-color);

+ color: var(--text-color);

+ font-family: 'Segoe UI', system-ui, sans-serif;

+ min-height: 100vh;

+ display: flex;

+ flex-direction: column;

+ }

+

+ .header {

+ padding: 1rem;

+ text-align: center;

+ background: var(--hud-bg);

+ border-bottom: 2px solid var(--primary-color);

+ }

+

+ .header h1 {

+ color: var(--primary-color);

+ font-size: 2rem;

+ margin-bottom: 0.5rem;

+ }

+

+ .microscope-view {

+ flex: 1;

+ position: relative;

+ padding: 1rem;

+ }

+

+ .camera-container {

+ width: 100%;

+ height: calc(100vh - 200px);

+ position: relative;

+ border: 4px solid var(--primary-color);

+ border-radius: 8px;

+ overflow: hidden;

+ box-shadow: 0 0 20px rgba(0, 255, 157, 0.3);

+ }

+

+ #webcam {

+ width: 100%;

+ height: 100%;

+ object-fit: cover;

+ }

+

+ .hud-overlay {

+ position: absolute;

+ top: 2rem;

+ right: 2rem;

+ background: var(--hud-bg);

+ padding: 1rem;

+ border-radius: 8px;

+ border: 2px solid var(--primary-color);

+ font-family: 'Courier New', monospace;

+ }

+

+ .zoom-indicator, .scale-indicator {

+ margin: 0.5rem 0;

+ display: flex;

+ justify-content: space-between;

+ gap: 1rem;

+ }

+

+ footer {

+ background: var(--hud-bg);

+ padding: 1rem;

+ text-align: center;

+ border-top: 2px solid var(--primary-color);

+ }

+

+ footer nav {

+ display: flex;

+ justify-content: center;

+ gap: 2rem;

+ }

+

+ footer a {

+ color: var(--text-color);

+ text-decoration: none;

+ transition: color 0.3s ease;

+ }

+

+ footer a:hover {

+ color: var(--primary-color);

+ }

+

+ @media (max-width: 768px) {

+ .camera-container {

+ height: calc(100vh - 250px);

+ }

+

+ .hud-overlay {

+ top: 1rem;

+ right: 1rem;

+ font-size: 0.9rem;

+ }

+ }