Add a gallery component

LuxDL · Apr 9, 2024 · 3c3bbb0 · 3c3bbb0
1 parent abdbf4b
commit 3c3bbb0
Show file tree

Hide file tree

Showing 11 changed files with 241 additions and 127 deletions.
diff --git a/docs/src/assets/tutorials/blas_optimizations.jpg b/docs/src/assets/tutorials/blas_optimizations.jpg
diff --git a/docs/src/assets/tutorials/gravitational_waveform.png b/docs/src/assets/tutorials/gravitational_waveform.png
diff --git a/docs/src/assets/tutorials/hypernet.jpg b/docs/src/assets/tutorials/hypernet.jpg
diff --git a/docs/src/assets/tutorials/julia.jpg b/docs/src/assets/tutorials/julia.jpg
diff --git a/docs/src/assets/tutorials/lstm-illustrative.webp b/docs/src/assets/tutorials/lstm-illustrative.webp
diff --git a/docs/src/assets/tutorials/mlp.webp b/docs/src/assets/tutorials/mlp.webp
diff --git a/docs/src/assets/tutorials/mnist.jpg b/docs/src/assets/tutorials/mnist.jpg
diff --git a/docs/src/components/Gallery.vue b/docs/src/components/Gallery.vue
@@ -0,0 +1,39 @@
+<!-- https://codepen.io/heyDante/pen/bxEYOw -->
+
+<script setup lang="ts">
+import GalleryImage, { type Props } from './GalleryImage.vue';
+
+defineProps<{
+    images: Props[];
+}>();
+</script>
+
+<template>
+    <div class="gallery-image">
+        <GalleryImage v-for="image in images" v-bind="image" />
+    </div>
+</template>
+
+<style scoped>
+.heading {
+    text-align: center;
+    font-size: 2em;
+    letter-spacing: 1px;
+    padding: 40px;
+    color: white;
+}
+
+.gallery-image {
+    padding: 20px;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+}
+
+.gallery-image :deep(img) {
+    height: 350px;
+    width: 250px;
+    transform: scale(1);
+    transition: transform 0.4s ease;
+}
+</style>
diff --git a/docs/src/components/GalleryImage.vue b/docs/src/components/GalleryImage.vue
@@ -0,0 +1,129 @@
+<script setup lang="ts">
+import { withBase } from 'vitepress'
+export interface Props {
+    href: string;
+    src: string;
+    caption: string;
+    desc: string;
+}
+
+defineProps<Props>();
+</script>
+
+<template>
+    <div class="img-box">
+        <a :href="href">
+            <img :src="withBase(src)" height="150px" alt="">
+            <div class="transparent-box1">
+                <div class="caption">
+                    <h2>{{ caption }}</h2>
+                </div>
+            </div>
+            <div class="transparent-box2">
+                <div class="subcaption">
+                    <p class="opacity-low">{{ desc }}</p>
+                </div>
+            </div>
+        </a>
+    </div>
+</template>
+
+<style scoped>
+.img-box {
+    box-sizing: content-box;
+    border-radius: 14px;
+    margin: 20px;
+    height: 350px;
+    width: 250px;
+    overflow: hidden;
+    display: inline-block;
+    color: white;
+    position: relative;
+    background-color: transparent;
+    border: 2px solid var(--vp-c-bg-alt);
+}
+
+.img-box img {
+    height: 100%;
+    width: 100%;
+    object-fit: cover;
+    opacity: 0.3;
+    transition: transform 0.3s ease, opacity 0.3s ease;
+}
+
+.caption {
+    position: absolute;
+    bottom: 30px;
+    color: var(--vp-c-text-1);
+    left: 10px;
+    opacity: 1;
+    transition: transform 0.3s ease, opacity 0.3s ease;
+}
+
+.subcaption {
+    position: absolute;
+    bottom: 5px;
+    color: var(--vp-c-text-1);
+    left: 10px;
+    opacity: 0;
+    transition: transform 0.3s ease, opacity 0.3s ease;
+}
+
+.transparent-box1 {
+    height: 250px;
+    width: 250px;
+    background-color: transparent;
+    position: absolute;
+    top: 0;
+    left: 0;
+    transition: background-color 0.3s ease;
+}
+
+.transparent-box2 {
+    height: 100px;
+    width: 250px;
+    background-color: transparent;
+    position: absolute;
+    top: 250px;
+    left: 0;
+    transition: background-color 0.3s ease;
+}
+
+.img-box:hover img {
+    transform: scale(1.1);
+}
+
+.img-box:hover .transparent-box1 {
+    background-color: var(--vp-c-bg-alt);
+}
+
+.img-box:hover .transparent-box2 {
+    background-color: var(--vp-c-bg-alt);
+}
+
+.img-box:hover .caption {
+    transform: translateY(-20px);
+    opacity: 1;
+}
+
+.img-box:hover .subcaption {
+    transform: translateY(-20px);
+    opacity: 1;
+}
+
+.img-box:hover {
+    border: 2px solid var(--vp-c-brand-light);
+    cursor: pointer;
+}
+
+.caption>p:nth-child(2) {
+    font-size: 0.8em;
+}
+.subcaption>p:nth-child(2) {
+    font-size: 0.8em;
+}
+
+.opacity-low {
+    opacity: 0.85;
+}
+</style>
diff --git a/docs/src/tutorials/index.md b/docs/src/tutorials/index.md
@@ -1,145 +1,95 @@
 ```@raw html
----
-layout: page
----
+<script setup lang="ts">
+import Gallery from "../components/Gallery.vue";
 
-<script setup>
-import { VPTeamPage, VPTeamPageTitle, VPTeamMembers, VPTeamPageSection } from 'vitepress/theme'
-
-const codeSvg = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path d="M392.8 1.2c-17-4.9-34.7 5-39.6 22l-128 448c-4.9 17 5 34.7 22 39.6s34.7-5 39.6-22l128-448c4.9-17-5-34.7-22-39.6zm80.6 120.1c-12.5 12.5-12.5 32.8 0 45.3L562.7 256l-89.4 89.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l112-112c12.5-12.5 12.5-32.8 0-45.3l-112-112c-12.5-12.5-32.8-12.5-45.3 0zm-306.7 0c-12.5-12.5-32.8-12.5-45.3 0l-112 112c-12.5 12.5-12.5 32.8 0 45.3l112 112c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256l89.4-89.4c12.5-12.5 12.5-32.8 0-45.3z"/></svg>';
-
-const beginners = [
+const beginner = [
   {
-    avatar: 'https://github.com/LuxDL.png',
-    name: 'Julia & Lux for the Uninitiated',
-    desc: 'A tutorial on how to get started with Julia and Lux for those who have never used Julia before.',
-    links: [
-      {
-        icon: {
-          svg: codeSvg,
-        },
-        link: 'beginner/1_Basics' }
-    ]
+    href: "beginner/1_Basics",
+    src: "../assets/tutorials/julia.jpg",
+    caption: "Julia & Lux for the Uninitiated",
+    desc: "How to get started with Julia and Lux for those who have never used Julia before."
   },
   {
-    avatar: 'https://github.com/LuxDL.png',
-    name: 'Fitting a Polynomial using MLP',
-    desc: 'Learn the Basics of Lux by fitting a Multi-Layer Perceptron to a Polynomial.',
-    links: [
-      {
-        icon: {
-          svg: codeSvg,
-        },
-        link: 'beginner/2_PolynomialFitting' }
-    ]
+    href: "beginner/2_PolynomialFitting",
+    src: "../assets/tutorials/mlp.webp",
+    caption: "Fitting a Polynomial using MLP",
+    desc: "Learn the Basics of Lux by fitting a Multi-Layer Perceptron to a Polynomial."
   },
   {
-    avatar: 'https://github.com/LuxDL.png',
-    name: 'Training a Simple LSTM',
-    desc: 'Learn the API for defining Recurrent Models in Lux.',
-    links: [
-      {
-        icon: {
-          svg: codeSvg,
-        },
-        link: 'beginner/3_SimpleRNN' }
-    ]
+    href: "beginner/3_SimpleRNN",
+    src: "../assets/tutorials/lstm-illustrative.webp",
+    caption: "Training a Simple LSTM",
+    desc: "Learn how to define custom layers and train an RNN on time-series data."
   },
   {
-    avatar: 'https://github.com/PumasAI.png',
-    name: 'Use SimpleChains.jl as a Backend',
-    desc: 'Learn how to train small neural networks really fast',
-    links: [
-      {
-        icon: {
-          svg: codeSvg,
-        },
-        link: 'beginner/4_SimpleChains' }
-    ]
+    href: "beginner/4_SimpleChains",
+    src: "../assets/tutorials/blas_optimizations.jpg",
+    caption: "Use SimpleChains.jl as a Backend",
+    desc: "Learn how to train small neural networks really fast"
   }
 ];
 
 const intermediate = [
   {
-    avatar: 'https://github.com/SciML.png',
-    name: 'MNIST Classification using Neural ODE',
-    desc: 'Train a Neural ODE to classify MNIST Images.',
-    links: [
-      {
-        icon: {
-          svg: codeSvg,
-        },
-        link: 'intermediate/1_NeuralODE' }
-    ]
+    href: "intermediate/1_NeuralODE",
+    src: "../assets/tutorials/mnist.jpg",
+    caption: "MNIST Classification using Neural ODE",
+    desc: "Train a Neural Ordinary Differential Equations to classify MNIST Images."
   },
   {
-    avatar: 'https://github.com/TuringLang.png',
-    name: 'Bayesian Neural Networks',
-    desc: 'Figure out how to use Probabilistic Programming Frameworks like Turing with Lux.',
-    links: [
-      {
-        icon: {
-          svg: codeSvg,
-        },
-        link: 'intermediate/2_BayesianNN' }
-    ]
+    href: "intermediate/2_BayesianNN",
+    src: "https://github.com/TuringLang.png",
+    caption: "Bayesian Neural Networks",
+    desc: "Figure out how to use Probabilistic Programming Frameworks like Turing with Lux."
   },
   {
-    avatar: 'https://github.com/LuxDL.png',
-    name: 'Training a HyperNetwork',
-    desc: 'In this tutorial we will train a hypernetwork to work on multiple datasets by predicting neural network parameters.',
-    orgLink: 'intermediate/3_HyperNet',
-    links: [
-      {
-        icon: {
-          svg: codeSvg,
-        },
-        link: 'intermediate/3_HyperNet' }
-    ]
+    href: "intermediate/3_HyperNet",
+    src: "../assets/tutorials/hypernet.jpg",
+    caption: "Training a HyperNetwork",
+    desc: "Train a hypernetwork to work on multiple datasets by predicting neural network parameters."
   }
 ];
 
 const advanced = [
   {
-    avatar: 'https://github.com/SciML.png',
-    name: 'Neural ODE to Model Gravitational Waveforms',
-    desc: 'Training a Neural ODE to fit simulated data of gravitational waveforms.',
-    links: [
-      {
-        icon: {
-          svg: codeSvg,
-        },
-        link: 'advanced/1_GravitationalWaveForm' }
-    ]
+    href: "advanced/1_GravitationalWaveForm",
+    src: "../assets/tutorials/gravitational_waveform.png",
+    caption: "Neural ODE to Model Gravitational Waveforms",
+    desc: "Training a Neural ODE to fit simulated data of gravitational waveforms."
   }
 ];
+
+const aggregated = [
+
+];
 </script>
 
-<VPTeamPage>
-  <VPTeamPageTitle>
-    <template #title>Tutorials</template>
-  </VPTeamPageTitle>
-
-  <VPTeamPageSection>
-    <template #title>Beginners Tutorials</template>
-    <template #members>
-      <VPTeamMembers size="small" :members="beginners" />
-    </template>
-  </VPTeamPageSection>
-
-  <VPTeamPageSection>
-    <template #title>Intermediate Tutorials</template>
-    <template #members>
-      <VPTeamMembers size="small" :members="intermediate" />
-    </template>
-  </VPTeamPageSection>
-
-  <VPTeamPageSection>
-    <template #title>Advanced Tutorials</template>
-    <template #members>
-      <VPTeamMembers size="small" :members="advanced" />
-    </template>
-  </VPTeamPageSection>
-</VPTeamPage>
+# Tutorials
+
+## Beginner Tutorials
+
+<Gallery :images="beginner" />
+
+## Intermediate Tutorials
+
+<Gallery :images="intermediate" />
+
+## Advanced Tutorials
+
+<Gallery :images="advanced" />
+
+## Aggregated Tutorials
+
+::: warning
+
+These tutorials are developed by the community and may not be up-to-date with the latest
+version of `Lux.jl`. Please refer to the official documentation for the most up-to-date
+information.
+
+Please open an issue (ideally both at `Lux.jl` and at the downstream linked package) if any
+of them are non-functional and we will try to get them updated.
+
+:::
 
+<Gallery :images="aggregated" />
 ```