Merge pull request #15 from biaslab/dev-video-examples

Add youtube video and examples
ReactiveBayes · Aug 24, 2023 · 9a83b78 · 9a83b78
2 parents cae7ed9 + 2fb90f6
commit 9a83b78
Show file tree

Hide file tree

Showing 8 changed files with 165 additions and 43 deletions.
diff --git a/content/_index.md b/content/_index.md
@@ -90,23 +90,38 @@ service:
     # service item loop
     - title : "RxInfer is fast"
       images:
-      - "images/lgssm_comparison.svg"
       - "images/lgssm_scaling.svg"
-      content : "RxInfer exploits the modularity of factor graphs to perform fast message passing-based probabilistic inference that scales linearly with the size of your model. We generally outperform state-of-the-art sampling-based packages by several orders of magnitude. RxInfer supports real-time processing of streaming data sources."
+      content : "RxInfer exploits the modularity of factor graphs to perform fast message passing-based probabilistic inference that scales linearly with the size of your model. We generally outperform state-of-the-art sampling-based packages by several orders of magnitude. The efficiency of RxInfer makes it easier to process streaming data sources in real time."
       button:
         enable : true
         label : "Check out some examples"
         link : "https://biaslab.github.io/RxInfer.jl/stable/examples/overview/"
 
     # service item loop
-    - title : "Solve complex problems"
-      images:
-      - "images/state_tracking.webp"
-      content : "RxInfer solves complex problems through hybrid inference algorithms composed of  (loopy) belief propagation, (structured) variational message passing, expectation propagation, expectation maximization and conjugate-computation variational inference."
-      button:
-        enable : true
-        label : "Research supporting RxInfer"
-        link : "https://biaslab.github.io/publication/"
+    - title: "Solve complex problems"
+      center: true
+      subservices:
+        # - linear:
+        #   title: "Continual inference with infinite data streams"
+        #   content: "In a world where data never stops flowing, our toolbox stands as a beacon of cutting-edge technology. Whether it's real-time sensor readings, financial market fluctuations, or social media trends, our toolbox empowers you to extract meaningful insights and make informed decisions on the fly."
+        #   video: videos/lds.webm
+        - nonlinear:
+          title: "Track hidden states of a dynamic system in real-time"
+          content: "Unveil real-time insights into dynamic systems with our software's prowess in tracking hidden states. By providing continuous monitoring and analysis, our tool empowers you to gain a deeper understanding of complex processes, enabling informed decision-making and proactive responses."
+          video: videos/nlds.webm
+        - collision:
+          title: "Smart navigation and collision avoidance"
+          content: "Stay in control, prevent collisions, and streamline routes effortlessly with RxInfer. Streamline your navigation experience and enhance safety."
+          video: videos/collision.webm
+        - aif:
+          title: "Reactive reasoning and decision making with Active Inference framework"
+          content: "Enhance your decision-making process with the Active Inference framework. Designed to help you analyze incoming information in real-time, this tool enables you to make well-informed choices and adapt to changing situations effectively."
+          video: videos/aif.webm
+    #   content: "RxInfer solves complex problems through hybrid inference algorithms composed of  (loopy) belief propagation, (structured) variational message passing, expectation propagation, expectation maximization and conjugate-computation variational inference."
+    #   button:
+    #     enable : true
+    #     label : "Research supporting RxInfer"
+    #     link : "https://biaslab.github.io/publication/"
 
 ################### Screenshot ########################
 screenshot:
@@ -118,14 +133,25 @@ screenshot:
 
 ##################### Call to action #####################
 call_to_action:
-  enable : false
-  title : "Ready to get started?"
-  image : "images/rxinfer.svg"
-  content : "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Consequat tristique eget amet, tempus eu at consecttur."
+  enable : true
+  title : "Watch our talk!"
+  # image : "images/rxinfer.svg"
+  youtube: "https://www.youtube.com/embed/qXrvDVm_fnE"
+  content : "RxInfer has been presented on the JuliaCon 2023, the biggest conference of Julia developers. Check out our video!"
   button:
     enable : true
-    label : "Contact Us"
-    link : "contact/"
+    label : "Watch our presentation on JuliaCon"
+    link : "https://youtu.be/qXrvDVm_fnE"
+  subvideos:
+    - video1:
+      youtube: "https://www.youtube.com/embed/_vVHWzK9NEI?si=n_JIbED8WfQRL0Ys"
+      content: "Intro to RxInfer by Doggo.jl"
+    - video2: 
+      youtube: "https://www.youtube.com/embed/qnj0PKc734g?si=A-v4irQEVzpXqHM4"
+      content: "Variational inference with RxInfer by Doggo.jl"
+    - video3:
+      youtube: "https://www.youtube.com/embed/PVeyvHSAwmk?si=Hkyn6bNSIwPIryUc&amp;start=5484"
+      content: "Active Inference Symposium"
 
 ##################### Ecosystem ##########################
 ecosystem:

diff --git a/layouts/index.html b/layouts/index.html
@@ -35,7 +35,7 @@ <h2 class="section-title">{{ .title | markdownify }}</h2>
       </div>
       {{ range .feature_item }}
       <div class="col-md-4 col-sm-6 mb-4">
-        <div class="feature-card shadowed text-center transition-100s transition-delay-100s hidden blurred bounce-from-bottom">
+        <div class="feature-card shadowed text-center">
           <i class="{{.icon}} mb-3"></i>
           <h4 class="mb-2">{{ .name | title }}</h4>
           <p>{{ .content | markdownify }}</p>
@@ -57,59 +57,129 @@ <h4 class="mb-2">{{ .name | title }}</h4>
 <section class="section">
   <div class="container">
     <div class="row align-items-center">
-      <div class="col-md-6 order-2 order-md-1 transition-100s transition-delay-100s hidden blurred bounce-from-left">
+      <div class="col-md-6 order-2 order-md-1">
         <h2 class="section-title">{{ .title | markdownify }}</h2>
         <p>{{ .content | markdownify }}</p>
         {{ if .button.enable }}
         {{ with .button }}
-        <a href="{{ .link | relURL }}" title="{{ .label }}" class="btn-link">{{ .label }} <i class="fas fa-arrow-right"></i></a>
+        <a href="{{ .link | relURL }}" title="{{ .label }}" class="btn-link">{{ .label }} <i
+            class="fas fa-arrow-right"></i></a>
         {{ end }}
         {{ end }}
       </div>
-      <div class="col-md-6 order-1 order-md-2 mb-4 mb-md-0 transition-100s transition-delay-100s hidden blurred bounce-from-right">
+      <div class="col-md-6 order-1 order-md-2 mb-4 mb-md-0">
+        {{ if .images }}
         <div {{if gt (len .images) 1}} class="slider" {{end}}>
           {{ range .images }}
           <img src="{{ . | relURL }}" alt="" class="img-fluid">
           {{ end }}
         </div>
+        {{ end }}
         {{ if .code }}
         <div class="code">
-            <p>{{ .code | markdownify}}</p>
+          <p>{{ .code | markdownify}}</p>
         </div>
         {{ end }}
       </div>
     </div>
+    {{ if .subservices }}
+    {{ range $i,$p := .subservices }}
+    <!-- <div class="container section rounded-lg px-4"> -->
+    <div class="row align-items-center justify-content-center text-center text-md-left">
+      {{if modBool $i 2}}
+      <div class="col-lg-8 col-md-10 col-sm-12 text-md-left">
+        <h3 class="section-title">{{ .title | markdownify }}</h3>
+        <p>{{ .content }}</p>
+      </div>
+      <div class="col-lg-4 col-md-2 col-sm-0"></div>
+      {{else}}
+      <div class="col-lg-4 col-md-2 col-sm-0"></div>
+      <div class="col-lg-8 col-md-10 col-sm-12 text-md-right">
+        <h3 class="section-title">{{ .title | markdownify }}</h3>
+        <p>{{ .content }}</p>
+      </div>
+      {{end}}
+    </div>
+    <div class="row align-items-center justify-content-center text-center text-md-left" style="padding-top: 3em;">
+      <div class="col-12">
+        {{ if .image }}
+        <img src="{{ .image | relURL }}" alt="" class="img-fluid">
+        {{ end }}
+        {{ if .video }}
+        <video autoplay loop muted playsinline src="{{ .video | relURL }}" style="width: 100%;"></video>
+        {{ end }}
+      </div>
+    </div>
+    <!-- </div> -->
+    {{ end }}
+    {{ end }}
   </div>
 </section>
 {{ else }}
 <section class="section bg-light">
   <div class="container">
     <div class="row align-items-center">
-      <div class="col-md-6 mb-4 mb-md-0 transition-100s transition-delay-100s hidden blurred bounce-from-left">
+      <div class="col-md-6 mb-4 mb-md-0">
+        {{ if .images }}
         <div {{if gt (len .images) 1}}class="slider" {{end}}>
           {{ range .images }}
           <img src="{{ . | relURL }}" alt="" class="img-fluid">
           {{ end }}
         </div>
+        {{ end }}
         {{ if .code }}
         <div class="code">
-            <p>{{ .code | markdownify}}</p>
+          <p>{{ .code | markdownify}}</p>
         </div>
         {{ end }}
       </div>
-      <div class="col-md-6 transition-100s transition-delay-100s hidden blurred bounce-from-right">
+      <div class="col-md-6">
         <h2 class="section-title">{{ .title | markdownify }}</h2>
         <p>{{ .content | markdownify }}</p>
         {{ if .button.enable }}
         {{ with .button }}
-        <a href="{{ .link | relURL }}" title="{{ .label }}" class="btn-link">{{ .label }} <i class="fas fa-arrow-right"></i></a>
+        <a href="{{ .link | relURL }}" title="{{ .label }}" class="btn-link">{{ .label }} <i
+            class="fas fa-arrow-right"></i></a>
+        {{ end }}
+        {{ end }}
+      </div>
+    </div>
+    {{ if .subservices }}
+    {{ range $i,$p := .subservices }}
+    <!-- <div class="container section rounded-lg px-4"> -->
+    <div class="row align-items-center justify-content-center text-center text-md-left">
+      {{if modBool $i 2}}
+      <div class="col-lg-8 col-md-10 col-sm-12 text-md-left">
+        <h3 class="section-title">{{ .title | markdownify }}</h3>
+        <p>{{ .content }}</p>
+      </div>
+      <div class="col-lg-4 col-md-2 col-sm-0"></div>
+      {{else}}
+      <div class="col-lg-4 col-md-2 col-sm-0"></div>
+      <div class="col-lg-8 col-md-10 col-sm-12 text-md-right">
+        <h3 class="section-title">{{ .title | markdownify }}</h3>
+        <p>{{ .content }}</p>
+      </div>
+      {{end}}
+    </div>
+    <div class="row align-items-center justify-content-center text-center text-md-left" style="padding-top: 3em;">
+      <div class="col-12">
+        {{ if .image }}
+        <img src="{{ .image | relURL }}" alt="" class="img-fluid">
         {{ end }}
+        {{ if .video }}
+        <video autoplay loop muted playsinline src="{{ .video | relURL }}" style="width: 100%;"></video>
         {{ end }}
       </div>
     </div>
+    <!-- </div> -->
+    {{ end }}
+    {{ end }}
   </div>
+
 </section>
 {{ end }}
+
 {{ end }}
 {{ end }}
 {{ end }}
@@ -118,9 +188,9 @@ <h2 class="section-title">{{ .title | markdownify }}</h2>
 <!-- screenshot -->
 {{ with .Params.screenshot }}
 {{ if .enable }}
-<section class="section pb-0">
-  <div class="container">
-    <div class="row">
+<section class="section">
+  <div class="container section shadow rounded-lg px-4">
+    <div class="row align-items-center justify-content-center text-center text-md-left">
       <div class="col-lg-8 mx-auto text-center">
         <h2 class="section-title">{{ .title | markdownify }}</h2>
       </div>
@@ -135,14 +205,21 @@ <h2 class="section-title">{{ .title | markdownify }}</h2>
 <!-- call to action -->
 {{ with .Params.call_to_action }}
 {{ if .enable }}
-<section class="section">
-  <div class="container section shadow rounded-lg px-4">
+<section class="section bg-light">
+  <div class="container rounded-lg px-4">
     <div class="row align-items-center justify-content-center text-center text-md-left">
-      <div class="col-lg-4 col-md-5 mb-4 mb-md-0">
+      <div class="col-lg-7 col-md-7 col-sm-12">
+        {{ if .image }}
         <img src="{{ .image | relURL }}" alt="" class="img-fluid">
+        {{ end }}
+        {{ if .youtube }}
+        <iframe width="90%" src="{{ .youtube }}" title="YouTube video player" frameborder="0"
+          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+          allowfullscreen style="min-height: 300px;"></iframe>
+        {{ end }}
       </div>
-      <div class="col-lg-5 col-md-6">
-        <h2 class="section-title">{{ .title | markdownify }}</h2>
+      <div class="col-lg-4 col-md-4 col-sm-12">
+        <h2 class="section-title" style="margin-top: 20px;">{{ .title | markdownify }}</h2>
         {{with .content }}<p class="mb-4">{{ . | markdownify }}</p>{{ end }}
         {{ if .button.enable }}
         {{ with .button }}
@@ -151,6 +228,25 @@ <h2 class="section-title">{{ .title | markdownify }}</h2>
         {{ end }}
       </div>
     </div>
+    {{ if .subvideos }}
+    <div class="section">
+      <div class="container">
+        <div class="row text-center text-md-left" style="margin-top: 20px;">
+          <div class="col-12">
+            <h2 class="section-title">Community videos</h2>
+          </div>
+          {{range .subvideos}}
+          <div class="col-4">
+            <iframe width="90%" src="{{ .youtube }}" title="YouTube video player" frameborder="0"
+              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+              allowfullscreen style="display:block; margin: auto; min-height: 200px;"></iframe>
+            <p>{{ .content }}</p>
+          </div>
+          {{end}}
+        </div>
+      </div>
+    </div>
+    {{end}}
   </div>
 </section>
 {{ end }}
@@ -160,7 +256,7 @@ <h2 class="section-title">{{ .title | markdownify }}</h2>
 <!-- ecosystem -->
 {{ with .Params.ecosystem }}
 {{ if .enable }}
-<section class="section bg-light">
+<section class="section">
   <div class="container">
     <div class="row justify-content-center">
       <div class="col-12 text-center">
@@ -169,18 +265,21 @@ <h2 class="section-title">{{ .title | markdownify }}</h2>
       </div>
       {{ range .ecosystem_item }}
       <a href="{{ .link }}" class="col-md-4 col-sm-6 mb-4">
-        <div class="ecosystem-card transition-100s transition-delay-100s hidden blurred bounce-from-bottom" style="display: flex; flex-direction: column;">
+        <div class="ecosystem-card" style="display: flex; flex-direction: column;">
           <div class="row">
-              <div class="col-md-12 col-sm-12"><h4><i class="{{.icon}}"></i>&nbsp;&nbsp;&nbsp;{{ .name | title }}</h4></div>
+            <div class="col-md-12 col-sm-12">
+              <h4><i class="{{.icon}}"></i>&nbsp;&nbsp;&nbsp;{{ .name | title }}</h4>
+            </div>
           </div>
           <div class="row" style="margin-top: 5px;">
             <div class="col-md-12 col-sm-12">
-              <span>{{ .content | markdownify }}</span>              
+              <span>{{ .content | markdownify }}</span>
             </div>
           </div>
           <div class="row" style="margin-top: auto;">
             <div class="col-md-12 col-sm-12">
-              <button class="btn btn-outline-primary"><i class="fab fa-github"></i>&nbsp;&nbsp;&nbsp;Open on GitHub</button>
+              <button class="btn btn-outline-primary"><i class="fab fa-github"></i>&nbsp;&nbsp;&nbsp;Open on
+                GitHub</button>
             </div>
           </div>
           <!-- <a href="#" class="btn btn-primary">Go somewhere</a> -->
@@ -194,4 +293,4 @@ <h2 class="section-title">{{ .title | markdownify }}</h2>
 {{ end }}
 <!-- /ecosystem -->
 
-{{ end }}
+{{ end }}
diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
@@ -1,4 +1,4 @@
-<footer class="section pb-0">
+<footer class="section bg-light pb-0">
   <div class="container">
     <div class="row">
       <div class="col-md-4 col-sm-6 mb-5">

diff --git a/static/images/state_tracking.gif b/static/images/state_tracking.gif
diff --git a/static/videos/aif.webm b/static/videos/aif.webm
diff --git a/static/videos/collision.webm b/static/videos/collision.webm
diff --git a/static/videos/lds.webm b/static/videos/lds.webm
diff --git a/static/videos/nlds.webm b/static/videos/nlds.webm