Skip to content

Arrangements #13

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
kjy5 merged 7 commits into from
Jan 31, 2025
Merged

Arrangements #13

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
becbd29
Freeze intro text
kjy5 Jan 30, 2025
b347277
Fixed stuck rendering
kjy5 Jan 30, 2025
bcc7788
New manipulator section
kjy5 Jan 31, 2025
d79acd1
Future
kjy5 Jan 31, 2025
e90bad8
Teaching
kjy5 Jan 31, 2025
79b8501
Trying to add avatars
kjy5 Jan 31, 2025
efa5425
Format code
kjy5 Jan 31, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion src/assets/background.svg
View file
Open in desktop

This file was deleted.

Binary file added src/assets/future/durations.avif
View file
Open in desktop
Binary file not shown.
Binary file added src/assets/future/parallax.avif
View file
Open in desktop
Binary file not shown.
Binary file added src/assets/manipulators/mis-rig.avif
View file
Open in desktop
Binary file not shown.
Binary file added src/assets/manipulators/scientifica-manipulator.avif
View file
Open in desktop
Binary file not shown.
Binary file added src/assets/outreach/teaching-pinpoint.avif
View file
Open in desktop
Binary file not shown.
Binary file added src/assets/outreach/using-pinpoint.avif
View file
Open in desktop
Binary file not shown.
Binary file added src/assets/people/dan.avif
View file
Open in desktop
Binary file not shown.
Binary file added src/assets/people/jasmine.avif
View file
Open in desktop
Binary file not shown.
Binary file added src/assets/people/kai.avif
View file
Open in desktop
Binary file not shown.
Binary file added src/assets/people/kenneth.avif
View file
Open in desktop
Binary file not shown.
Binary file added src/assets/people/qiqi.avif
View file
Open in desktop
Binary file not shown.
Binary file added src/assets/people/selina.avif
View file
Open in desktop
Binary file not shown.
13 changes: 12 additions & 1 deletion src/components/Graphics.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,9 @@ const { imageMetadatas } = Astro.props;
throw new Error("Failed to get output image element");
})();

// Keep track of the last rendered image.
let lastRenderedIndex = -1;

// Bind scroll event to draw images.
window.addEventListener("scroll", () => {
// Get the container bounds at this point.
Expand All @@ -46,8 +49,16 @@ const { imageMetadatas } = Astro.props;
);

// Draw it if we are in bound.
if (imageIndex >= 0 && imageIndex < numberOfImages)
if (imageIndex >= 0 && imageIndex < numberOfImages) {
requestAnimationFrame(() => outputImage.src = imageSrcs[imageIndex]);
lastRenderedIndex = imageIndex;
}
// If we are out of bounds, and we haven't fixed it yet, fix it.
else if (imageIndex !== lastRenderedIndex) {
const clampedIndex = Math.max(0, Math.min(numberOfImages - 1, imageIndex));
requestAnimationFrame(() => outputImage.src = imageSrcs[clampedIndex]);
lastRenderedIndex = clampedIndex;
}
});
}
}
Expand Down
254 changes: 226 additions & 28 deletions src/pages/index.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,20 @@ import Graphics from "../components/Graphics.astro";
import GraphicsImporter from "../scripts/graphics-importer";
import type { DefaultImageMetadata } from "../scripts/types";

import Durations from "../assets/future/durations.avif";
import Parallax from "../assets/future/parallax.avif";
// Import static images.
import MISRig from "../assets/manipulators/mis-rig.avif";
import MPMRig from "../assets/manipulators/mpm-rig.avif";
import ScientificaManipulator from "../assets/manipulators/scientifica-manipulator.avif";
import SensapexRig from "../assets/manipulators/sensapex-rig.avif";
import TeachingPinpoint from "../assets/outreach/teaching-pinpoint.avif";
import UsingPinpoint from "../assets/outreach/using-pinpoint.avif";
import Jasmine from "../assets/people/jasmine.avif";
import Kai from "../assets/people/kai.avif";
import Kenneth from "../assets/people/kenneth.avif";
import Qiqi from "../assets/people/qiqi.avif";
import Selina from "../assets/people/selina.avif";

// Import graphics.
const introImporter = new GraphicsImporter(
Expand All @@ -37,43 +48,49 @@ const automationImporter = new GraphicsImporter(
<div class="flex-col">
<Article>
<h1 class="text-primary">Pinpoint</h1>
<h3>Interactive 3D visualization and automation tools for human neuroscience research and
neurosurgery.</h3>
<h3>Interactive 3D visualization and automation tools for neuroscience research and
surgery.</h3>
</Article>

<br/>

<div>
<a class="btn btn-primary" href="https://data.virtualbrainlab.org/Pinpoint/">Launch</a>
<a class="btn" href="#goal">Learn More</a>
<a class="btn" href="#learn-more">Learn More</a>
</div>
</div>
</div>

<!-- Goal. -->
<div>
<span class="anchor" id="goal"></span>
<Article>
<h1>Pinpoint aims to advance large-scale neuroscience research with intuitive browser-based
planning and
automation tools for efficient and reproducible neurosurgery.
</h1>
</Article>
<div class="h-dvh" id="learn-more">
<div class="sticky top-1/3">
<!--<span class="anchor" id="goal"></span>-->
<Article>
<h1>Pinpoint aims to advance large-scale neuroscience research with intuitive browser-based
planning and
automation tools for efficient and reproducible neurosurgery.
</h1>
</Article>
</div>
</div>

<!-- Problem statement. -->
<div class="flex justify-center items-center h-dvh">
<Article>
<h2>Human behavior engage multiple regions of the brain.</h2>
<h3>Current tools are designed to study individual brain regions, depend on manual input, and
require extensive expertise to operate.</h3>
<p>Modern neuroscientists need tools that enable the study of the whole brain to better
understand
human behavior and cure neurodegenerative diseases that affect the whole brain like
Parkinson's
and Alzheimer's.</p>
</Article>
<div class="h-1/3dvh"/>
<div class="h-3/2dvh">
<div class="sticky top-1/3">
<Article>
<h2>Human behavior engage multiple regions of the brain.</h2>
<h3>Current tools are designed to study individual brain regions, depend on manual input, and
require extensive expertise to operate.</h3>
<p>Modern neuroscientists need tools that enable the study of the whole brain to better
understand
human behavior and cure neurodegenerative diseases that affect the whole brain like
Parkinson's
and Alzheimer's.</p>
</Article>
</div>
</div>
<div class="h-1/2dvh"/>
</TwoColumn>

<!-- Planning Phase. -->
Expand Down Expand Up @@ -130,23 +147,204 @@ const automationImporter = new GraphicsImporter(
</div>
</div>

<div class="h-1/4dvh"/>

<div class="hero">
<div class="hero-content flex-col lg:flex-row-reverse w-full">
<div class="basis-1/2 self-stretch">
<Image class="rounded-xl" src={SensapexRig} alt="Sensapex Rig"/>
<Article>
<p>Sensapex Multiprobe rig</p>
</Article>

<br/>

<Image class="rounded-xl" src={MPMRig} alt="MPM Rig"/>
<Article>
<p>New Scale MPM rig</p>
</Article>

<br/>

<Image class="rounded-xl" src={MISRig} alt="MIS Rig"/>
<Article>
<p>New Scale MIS rig</p>
</Article>

<br/>

<Image class="rounded-xl" src={ScientificaManipulator}
alt="Scientifica InVivoStar Micromanipulator"/>
<Article>
<p>Scientifica InVivoStar Micromanipulator</p>
</Article>
</div>

<div class="basis-1/2 self-stretch">
<div class="sticky top-1/3">
<Article>
<h2>Let the robots do the heavy lifting</h2>
<h3>Pinpoint can control neurosurgery robotic manipulators to automatically run your plans.</h3>
<ul>
<li>Sensapex uMp-4</li>
<li>Sensapex uMp-3</li>
<li>New Scale MPM Rig</li>
<li>New Scale MIS Rig</li>
<li>Scientifica InVivoStar Micromanipulator/li>
<li>LabMaker</li>
<li>More can be added through <a href="https://ephys-link.virtualbrainlab.org/">Ephys
Link</a></li>
</ul>
</Article>
</div>
</div>
</div>
</div>

<TwoColumn>
<Graphics imageMetadatas={automationImporter.getImageMetadatas()} slot="graphics"/>

<div class="h-1/4dvh"/>
<div class="h-3/2dvh">
<div class="sticky top-1/4">
<div class="sticky top-1/3">
<Article>
<h2>Let the robots do the heavy lifting</h2>
<h3>Pinpoint can control neurosurgery robotic manipulators to automatically run your plans.</h3>
<p>Below: Sensapex Multiprobe <span class="italic">in vivo</span> rig and New Scale MPM rig.</p>
<Image class="rounded-xl w-3/4" src={SensapexRig} alt="Sensapex Rig"/>
<Image class="rounded-xl w-3/4" src={MPMRig} alt="MPM Rig"/>
<h2>Automation improves accuracy and efficiency</h2>
<h3>Robotic manipulators can make highly precise movements and perform multiple tasks in parallel.
These are important for enabling large-scale studies.</h3>
</Article>
</div>
</div>
<div class="h-1/4dvh"/>
</TwoColumn>

<div class="hero">
<div class="hero-content flex-col lg:flex-row-reverse w-full">
<div class="basis-1/2 self-stretch">
<Image class="rounded-xl" src={Parallax} alt="Parallax tracking view"/>
<Article>
<p>Parallax computer vision tracking system. Two electrophysiology probes are tracked and marked
with red crosses.</p>
</Article>

<br/>

<Image class="rounded-xl" src={Durations} alt="Automation durations"/>
<Article>
<p>Automation is measurably faster than traditional methods. The red dot is the median duration of
automated 2-probe electrophysiology insertion which is significantly lower than the median
duration for manual insertions.</p>
</Article>
</div>

<div class="basis-1/2 self-stretch">
<div class="sticky top-1/3">
<Article>
<h2>The future of neuroscience is automation</h2>
<h3>We are working with the Allen Institute to develop computer vision assisted systems to
enable completely unattended surgery automation.</h3>
<p>The reduction in human error and increase in efficiency will enable neuroscientists to scale
up
their work to new heights, unlocking studies and surgeries previously deemed impossible.</p>
</Article>
</div>
</div>
</div>
</div>

<!-- Outreach -->

<div class="hero">
<div class="hero-content">
<div class="h-1/4dvh"/>
<Article>
<h1 class="text-center">Grow the Community with<br/><span class="text-primary">Pinpoint</span>
</h1>
</Article>
<div class="h-1/4dvh"/>
</div>
</div>

<div class="hero">
<div class="hero-content flex-col lg:flex-row-reverse w-full">
<div class="basis-1/2 self-stretch">
<Image class="rounded-xl" src={TeachingPinpoint} alt="Teaching Pinpoint"/>
<Article>
<p>Dr. Birman teaching Pinpoint to researchers at the Allen Institute 2024 Neuropixels and OpenScope
Workshop</p>
</Article>

<br/>

<Image class="rounded-xl" src={UsingPinpoint} alt="Using Pinpoint"/>
<Article>
<p>A workshop attendee using Pinpoint in their laptop browser</p>
</Article>
</div>

<div class="basis-1/2 self-stretch">
<div class="sticky top-1/3">
<Article>
<h2>Neuroscience for everyone</h2>
<h3>Pinpoint is free software for everyone to use. We teach and share the platform at various
workshops and conferences</h3>
<ul>
<li><a href="https://www.sfn.org/meetings/neuroscience-2024">Society for Neuroscience
Conference 2022, 2023, and 2024</a></li>
<li><a href="https://alleninstitute.org/events/2024-neuropixels-and-openscope-workshop/">Allen
Institute Neuropixels and OpenScope Workshop</a></li>
<li><a href="https://www.ucl.ac.uk/neuropixels/training/2024-neuropixels-course">UCL
Neuropixels Course</a></li>
</ul>
</Article>
</div>
</div>
</div>
</div>

<div class="h-1/4dvh"/>

<div class="hero">
<div class="hero-content flex-col lg:flex-row-reverse w-full">
<div class="basis-1/2 self-stretch">
<div class="avatar-group -space-x-6 rtl:space-x-reverse">
<div class="avatar">
<div class="w-12">
<Image src={Kenneth} alt="Kenneth"/>
</div>
</div>
<div class="avatar">
<div class="size-12">
<Image src={Jasmine} alt="Jasmine"/>
</div>
</div>
<div class="avatar">
<div class="size-12">
<Image src={Qiqi} alt="Qiqi"/>
</div>
</div>
<div class="avatar">
<div class=size-12">
<Image src={Selina} alt="Selina"/>
</div>
</div>
<div class="avatar">
<div class="size-12">
<Image src={Kai} alt="Kai"/>
</div>
</div>
</div>
</div>

<div class="basis-1/2 self-stretch">
<div class="sticky top-1/3">
<Article>
<h2>Fostering the next generation</h2>
<h3>Pinpoint was developed with the help of a diverse group of undergraduate researchers</h3>
</Article>
</div>
</div>
</div>
</div>
</Layout>

<style>
Expand Down