Add a gallery component

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>

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>

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" />
 ```