Skip to content

Commit 9855f44

Browse files
aagrandeaagrande
committed
add quick start notebook to usage examples
1 parent b93e5bf commit 9855f44

File tree

3 files changed

+88
-17
lines changed

3 files changed

+88
-17
lines changed

‎docs/css/example-cards.css‎

Lines changed: 32 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,53 @@
11
.cards-container {
22
display: flex;
3-
flex-direction: column; /* Stack the cards vertically */
3+
flex-direction: column;
4+
/* Stack the cards vertically */
45
margin: 20px;
56
}
67

78
.example-card {
8-
display: flex; /* Enables flexbox inside each card */
9-
align-items: center; /* Aligns the items vertically */
9+
display: flex;
10+
/* Enables flexbox inside each card */
11+
align-items: center;
12+
/* Aligns the items vertically */
1013
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.4);
1114
transition: 0.3s;
12-
margin: 10px 0; /* Space between cards */
15+
margin: 10px 0;
16+
/* Space between cards */
1317
}
1418

1519
.example-card img {
16-
width: 150px; /* Fixed width for images */
20+
width: 150px;
21+
/* Fixed width for images */
1722
height: auto;
18-
margin-right: 20px; /* Space between the image and the text */
23+
margin-right: 20px;
24+
/* Space between the image and the text */
1925
}
2026

2127
.example-container {
22-
flex: 1; /* Takes up the remaining space */
28+
flex: 1;
29+
/* Takes up the remaining space */
2330
padding: 2px 16px;
2431
}
2532

2633
.example-card:hover {
2734
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.4);
2835
}
36+
37+
.title-with-links {
38+
display: flex;
39+
align-items: center;
40+
/* Aligns the title and links vertically */
41+
justify-content: space-between;
42+
/* Distributes space between the title and links */
43+
}
44+
45+
.title-with-links h4 {
46+
margin-right: 10px;
47+
/* Adds some space between the title and links */
48+
}
49+
50+
.links a {
51+
margin-left: 10px;
52+
/* Adds space between the individual links */
53+
}

‎docs/imgs/img_sinusoidal.png‎

115 KB
Loading

‎docs/index.html‎

Lines changed: 56 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -752,29 +752,75 @@ <h3> Competitive performance</h3>
752752
<h3> Usage Examples </h3>
753753

754754
<div class="cards-container">
755-
<a href="https://arxiv.org/pdf/2406.07658" class="example-card">
756-
<!-- <img src="imgs/img_avatar.png" alt="Avatar"> -->
755+
<!-- <a class="example-card">
756+
<img src="imgs/img_sinusoidal.png" alt="Bimodal, heteroskedastic response">
757757
<div class="example-container">
758-
<h4><b> Optimal Inventory Allocation</b></h4>
758+
<h4>
759+
<b> A simple response with two sinusoidal components </b>
760+
<a href="https://colab.research.google.com/github/blei-lab/treeffuser/blob/tutorials/examples/README_example.ipynb"
761+
style="color: #145c15; font-weight: bold;">[open in Colab]</a>
762+
<a href="https://github.com/blei-lab/treeffuser/blob/tutorials/examples/README_example.ipynb"
763+
style="color: #145c15; font-weight: bold;">[source]</a>
764+
</h4>
759765
<p>
760-
We use Treeffuser to model the distribution of demand for products
761-
in a retail store. This allows us to compute the optimal inventory
762-
allocation that minimizes the risk of stockouts and waste while maximizing
763-
profits.
766+
We demonstrate how to train and generate samples with Treeffuser
767+
using a simple example with synthethic data, featuring a multimodal
768+
response with two sinusoidal components.
764769
</p>
770+
</div>
771+
</a> -->
765772

773+
<a class="example-card">
774+
<img src="imgs/img_sinusoidal.png" alt="Bimodal, heteroskedastic response">
775+
<div class="example-container">
776+
<div class="title-with-links">
777+
<h4>
778+
<b> A simple response with two sinusoidal components </b>
779+
</h4>
780+
<div class="links">
781+
<a href="https://colab.research.google.com/github/blei-lab/treeffuser/blob/tutorials/examples/README_example.ipynb"
782+
style="color: #145c15; font-weight: bold;">[open in Colab]</a>
783+
<a href="https://github.com/blei-lab/treeffuser/blob/tutorials/examples/README_example.ipynb"
784+
style="color: #145c15; font-weight: bold;">[source]</a>
785+
</div>
786+
</div>
787+
<p>
788+
We demonstrate how to train and generate samples with Treeffuser
789+
using a simple example with synthetic data, featuring a multimodal
790+
response with two sinusoidal components.
791+
</p>
766792
</div>
767793
</a>
768-
<a href="https://arxiv.org/pdf/2406.07658" class="example-card">
769-
<!-- <img src="imgs/img_avatar.png" alt="Avatar"> -->
794+
795+
<!-- <a href="https://arxiv.org/pdf/2406.07658" class="example-card">
796+
<img src="imgs/img_avatar.png" alt="Avatar">
770797
<div class="example-container">
771798
<h4><b> Synthetic Data </b></h4>
772799
<p>
773800
We demonstrate the effectiveness and flexibility of Treeffuser
774-
of treeffuser on Synthetic data with multivariate output,
801+
on Synthetic data with multivariate output,
775802
complex varying multimodality, heavy tails and skewness.
776803
</p>
777804
</div>
805+
</a> -->
806+
807+
<a href="https://arxiv.org/pdf/2406.07658" class="example-card">
808+
<!-- <img src="imgs/img_avatar.png" alt="Avatar"> -->
809+
<div class="example-container">
810+
<h4>
811+
<b> Optimal Inventory Allocation </b>
812+
<!-- <a href="https://colab.research.google.com/github/blei-lab/treeffuser/blob/tutorials/examples/README_example.ipynb"
813+
style="color: #145c15; font-weight: bold;">[open in Colab]</a>
814+
<a href="https://github.com/blei-lab/treeffuser/blob/tutorials/examples/README_example.ipynb"
815+
style="color: #145c15; font-weight: bold;">[source]</a> -->
816+
</h4>
817+
We use Treeffuser to model the distribution of demand for products
818+
in a retail store. This allows us to compute the optimal inventory
819+
allocation that minimizes the risk of stockouts and waste while maximizing
820+
profits.
821+
</p>
822+
823+
</div>
778824
</a>
779825

780826
<!--

0 commit comments

Comments
 (0)