From 58b1b524b80bc099e0c87215855bd676943417f4 Mon Sep 17 00:00:00 2001 From: Nathakit Sae-Tan Date: Wed, 10 Apr 2024 17:55:45 +0700 Subject: [PATCH 01/18] Update Alpha Lab page content and CardLink component --- alpha-lab/cards.json | 225 +++++++++++++++++---------------- alpha-lab/index.md | 4 +- components/AlphaPageLayout.vue | 97 ++++++++++---- components/cards/CardLink.vue | 21 ++- 4 files changed, 210 insertions(+), 137 deletions(-) diff --git a/alpha-lab/cards.json b/alpha-lab/cards.json index 74af71afd..8818eb396 100644 --- a/alpha-lab/cards.json +++ b/alpha-lab/cards.json @@ -1,119 +1,132 @@ [ - { - "title": "Undistort Video and Gaze Data", - "details": "Learn how to undistort the scene camera distortions and apply it to gaze positions.", - "link": { - "text": "View", - "href": "/alpha-lab/undistort/" - }, - "image": "/alpha-lab/undist.webp" + { + "title": "Undistort Video and Gaze Data", + "details": "Learn how to undistort the scene camera distortions and apply it to gaze positions.", + "link": { + "text": "View", + "href": "/alpha-lab/undistort/" }, - { - "title": "Use Neon with Pupil Capture", - "details": "Use your Neon module as if you were using Pupil Core. Connect it to a laptop, and record using Pupil Capture.", - "link": { - "text": "View", - "href": "/alpha-lab/neon-with-capture/" - }, - "image": "/alpha-lab/neon-capture.webp" + "image": "/alpha-lab/undist.webp", + "category": "Other" + }, + { + "title": "Use Neon with Pupil Capture", + "details": "Use your Neon module as if you were using Pupil Core. Connect it to a laptop, and record using Pupil Capture.", + "link": { + "text": "View", + "href": "/alpha-lab/neon-with-capture/" }, - { - "title": "Map Gaze Onto Dynamic Screen Content", - "details": "Map and visualise gaze onto a screen with dynamic content, e.g. a video, web browsing, or other, using Pupil Cloud's Reference Image Mapper and screen recording software.", - "link": { - "text": "View", - "href": "/alpha-lab/map-your-gaze-to-a-2d-screen/#map-and-visualise-gaze-onto-a-display-content-using-the-reference-image-mapper" - }, - "image": "/alpha-lab/map-gaze-screen.webp" + "image": "/alpha-lab/neon-capture.webp", + "category": "Other" + }, + { + "title": "Map Gaze Onto Dynamic Screen Content", + "details": "Map and visualise gaze onto a screen with dynamic content, e.g. a video, web browsing, or other, using Pupil Cloud's Reference Image Mapper and screen recording software.", + "link": { + "text": "View", + "href": "/alpha-lab/map-your-gaze-to-a-2d-screen/#map-and-visualise-gaze-onto-a-display-content-using-the-reference-image-mapper" }, - { - "title": "Map Gaze Onto Body Parts", - "details": "Map gaze behaviour on body parts that appear in the scene video of Neon or Pupil Invisible eye tracking footage.", - "link": { - "text": "View", - "href": "/alpha-lab/dense-pose/#map-gaze-onto-body-parts-using-densepose" - }, - "image": "/alpha-lab/map-gaze-body.webp" + "image": "/alpha-lab/map-gaze-screen.webp", + "category": "Gaze Mapping" + }, + { + "title": "Map Gaze Onto Body Parts", + "details": "Map gaze behaviour on body parts that appear in the scene video of Neon or Pupil Invisible eye tracking footage.", + "link": { + "text": "View", + "href": "/alpha-lab/dense-pose/#map-gaze-onto-body-parts-using-densepose" }, - { - "title": "Map Gaze Throughout an Entire Room", - "details": "Use Pupil Cloud's Reference Image Mapper to Map gaze onto multiple areas of an entire room as participants freely navigate around it.", - "link": { - "text": "View", - "href": "/alpha-lab/multiple-rim/#map-and-visualize-gaze-on-multiple-reference-images-taken-from-the-same-environment" - }, - "image": "/alpha-lab/multiple-ref-mapper-enrich.webp" + "image": "/alpha-lab/map-gaze-body.webp", + "category": "Gaze Mapping" + }, + { + "title": "Map Gaze Throughout an Entire Room", + "details": "Use Pupil Cloud's Reference Image Mapper to Map gaze onto multiple areas of an entire room as participants freely navigate around it.", + "link": { + "text": "View", + "href": "/alpha-lab/multiple-rim/#map-and-visualize-gaze-on-multiple-reference-images-taken-from-the-same-environment" }, - { - "title": "Generate Scanpath Visualisations", - "details": "Generate both static and dynamic scanpath visualisations using exported data from Pupil Cloud's Reference Image Mapper.", - "link": { - "text": "View", - "href": "/alpha-lab/scanpath-rim/#generate-static-and-dynamic-scanpaths-with-reference-image-mapper" - }, - "image": "/alpha-lab/gen-scanpath-rim.webp" + "image": "/alpha-lab/multiple-ref-mapper-enrich.webp", + "category": "Reference Image Mapper" + }, + { + "title": "Generate Scanpath Visualisations", + "details": "Generate both static and dynamic scanpath visualisations using exported data from Pupil Cloud's Reference Image Mapper.", + "link": { + "text": "View", + "href": "/alpha-lab/scanpath-rim/#generate-static-and-dynamic-scanpaths-with-reference-image-mapper" }, - { - "title": "Uncover Gaze Behaviour on Phones", - "details": "Capture and analyze users' viewing behaviour when focusing on small icons and features of mobile applications using Neon eye tracking alongside existing Cloud and Alpha Lab tools.", - "link": { - "text": "View", - "href": "/alpha-lab/phone-neon/#uncover-gaze-behaviour-on-phone-screens-with-neon" - }, - "image": "/alpha-lab/gaze-behavior-phone-neon.webp" + "image": "/alpha-lab/gen-scanpath-rim.webp", + "category": "Reference Image Mapper" + }, + { + "title": "Uncover Gaze Behaviour on Phones", + "details": "Capture and analyze users' viewing behaviour when focusing on small icons and features of mobile applications using Neon eye tracking alongside existing Cloud and Alpha Lab tools.", + "link": { + "text": "View", + "href": "/alpha-lab/phone-neon/#uncover-gaze-behaviour-on-phone-screens-with-neon" }, - { - "title": "Map Gaze Onto a 3D Model of an Environment", - "details": "Map gaze onto a 3D model of an environment and visualise gaze patterns as 3D heatmaps using Pupil Cloud's Reference Image Mapper and Nerfstudio.", - "link": { - "text": "View", - "href": "/alpha-lab/nerfs/#create-3d-models-of-your-environment-using-reference-image-mapper-and-nerfstudio" - }, - "image": "/alpha-lab/map-gaze-3d-nerf.webp" + "image": "/alpha-lab/gaze-behavior-phone-neon.webp", + "category": "Reference Image Mapper" + }, + { + "title": "Map Gaze Onto a 3D Model of an Environment", + "details": "Map gaze onto a 3D model of an environment and visualise gaze patterns as 3D heatmaps using Pupil Cloud's Reference Image Mapper and Nerfstudio.", + "link": { + "text": "View", + "href": "/alpha-lab/nerfs/#create-3d-models-of-your-environment-using-reference-image-mapper-and-nerfstudio" }, - { - "title": "Build Gaze-Contingent Assistive Applications", - "details": "Build your very own gaze-contingent assistive applications (such as a gaze-controlled input device) using Neon eye tracking and our real-time screen gaze package.", - "link": { - "text": "View", - "href": "/alpha-lab/gaze-contingency-assistive/#a-practical-guide-to-implementing-gaze-contingency-for-assistive-technology" - }, - "image": "/alpha-lab/build-gaze-assistive-neon.webp" + "image": "/alpha-lab/map-gaze-3d-nerf.webp", + "category": "Gaze Mapping" + }, + { + "title": "Build Gaze-Contingent Assistive Applications", + "details": "Build your very own gaze-contingent assistive applications (such as a gaze-controlled input device) using Neon eye tracking and our real-time screen gaze package.", + "link": { + "text": "View", + "href": "/alpha-lab/gaze-contingency-assistive/#a-practical-guide-to-implementing-gaze-contingency-for-assistive-technology" }, - { - "title": "Detect Eye Blinks With Neon", - "details": "Apply Pupil Labs blink detection algorithm to Neon recordings programmatically, offline or in real-time using Pupil Labs real-time Python API.", - "link": { - "text": "View", - "href": "/alpha-lab/blink-detection/#detecting-eye-blinks-using-pupil-labs-blink-detection-pipeline" - }, - "image": "/alpha-lab/blink.webp" + "image": "/alpha-lab/build-gaze-assistive-neon.webp", + "category": "Real-Time Applications" + }, + { + "title": "Detect Eye Blinks With Neon", + "details": "Apply Pupil Labs blink detection algorithm to Neon recordings programmatically, offline or in real-time using Pupil Labs real-time Python API.", + "link": { + "text": "View", + "href": "/alpha-lab/blink-detection/#detecting-eye-blinks-using-pupil-labs-blink-detection-pipeline" }, - { - "title": "Build an AI Vision Assistant", - "details": "Experiment with assistive scene understanding applications using GPT-4V (an extension of GPT4 that can interpret images) and Pupil Labs eye tracking.", - "link": { - "text": "View", - "href": "/alpha-lab/gpt4-eyes/" - }, - "image": "/alpha-lab/gpt4-eyes.webp" + "image": "/alpha-lab/blink.webp", + "category": "Real-Time Applications" + }, + { + "title": "Build an AI Vision Assistant", + "details": "Experiment with assistive scene understanding applications using GPT-4V (an extension of GPT4 that can interpret images) and Pupil Labs eye tracking.", + "link": { + "text": "View", + "href": "/alpha-lab/gpt4-eyes/" }, - { - "title": "Automate AOI Masking in Pupil Cloud", - "details": "Extend the capabilities of Pupil Cloud’s AOI tool by automatically segmenting and drawing masks using natural language.", - "link": { - "text": "View", - "href": "/alpha-lab/gaze-metrics-in-aois/" - }, - "image": "/alpha-lab/aoi-demo.webp" + "image": "/alpha-lab/gpt4-eyes.webp", + "category": "Real-Time Applications" + }, + { + "title": "Automate AOI Masking in Pupil Cloud", + "details": "Extend the capabilities of Pupil Cloud’s AOI tool by automatically segmenting and drawing masks using natural language.", + "link": { + "text": "View", + "href": "/alpha-lab/gaze-metrics-in-aois/" }, - { - "title": "Map Gaze Onto Facial Landmarks", - "details": "Map gaze onto facial landmarks using Pupil Cloud’s Face Mapper exported data.", - "link": { - "text": "View", - "href": "/alpha-lab/gaze-on-face/" - }, - "image": "/alpha-lab/map-gaze-nadia.webp" - } -] \ No newline at end of file + "image": "/alpha-lab/aoi-demo.webp", + "category": "Reference Image Mapper" + }, + { + "title": "Map Gaze Onto Facial Landmarks", + "details": "Map gaze onto facial landmarks using Pupil Cloud’s Face Mapper exported data.", + "link": { + "text": "View", + "href": "/alpha-lab/gaze-on-face/" + }, + "image": "/alpha-lab/map-gaze-nadia.webp", + "category": "Gaze Mapping" + } +] diff --git a/alpha-lab/index.md b/alpha-lab/index.md index d3da5f12f..85bc317aa 100644 --- a/alpha-lab/index.md +++ b/alpha-lab/index.md @@ -8,9 +8,7 @@ hero: title: "Alpha Lab" tagline: [ - "Pupil Labs is made up of people who are curious by nature. We are researchers, designers, toolmakers, and professional tinkerers. We enjoy building quick prototypes and demos to explore our curiosities. We built Alpha Lab so that we can have a centralized place to collect the results of our explorations and to share it with the world.", - "Alpha Lab is not a place for official product documentation. Everything you find here should be considered a work in progress, and may even be a bit rough around the edges. That is the nature of exploration!", - "We encourage you to read through the results and go further - play around, build from the ideas here, hack away!", + "Pupil Labs is made up of people who are curious by nature. We are researchers, designers, toolmakers, and professional tinkerers. We enjoy building quick prototypes and demos to explore our curiosities.", ] cards: diff --git a/components/AlphaPageLayout.vue b/components/AlphaPageLayout.vue index 8f7674ee4..aab9ee356 100644 --- a/components/AlphaPageLayout.vue +++ b/components/AlphaPageLayout.vue @@ -1,30 +1,62 @@