Skip to content

Commit dbb349f

Browse files
JWehrsteinJWehrstein
committed
add run-queries-live section to webpage, link webpage to readme
1 parent 9499963 commit dbb349f

2 files changed

Lines changed: 73 additions & 11 deletions

File tree

‎README.md‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,17 @@ An LLM agent that automatically generates and optimizes custom C++ OLAP query en
2525

2626
Statistics of the generated engines and optimization runs can be found in this public [wandb project](https://wandb.ai/jwehrstein/BespokeOLAP).
2727

28+
---
29+
30+
## 🌐 Interactive Demo
31+
32+
> **[datamanagementlab.github.io/BespokeOLAP](https://datamanagementlab.github.io/BespokeOLAP/)**
33+
>
34+
> - **Synthesis explainer** — step-by-step walkthrough of what happened in each synthesis stage
35+
> - **Live demo** — run the synthesized DBMS with custom query placeholders directly in the browser
36+
37+
---
38+
2839
## How It Works
2940

3041
1. **Storage plan generation** — the agent designs a custom data layout for the target workload

‎website/index.html‎

Lines changed: 62 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -379,6 +379,25 @@
379379
pointer-events: none;
380380
filter: grayscale(0.15);
381381
}
382+
.btn.live-new {
383+
position: relative;
384+
}
385+
.btn.live-new::before {
386+
content: "NEW";
387+
position: absolute;
388+
top: -13px;
389+
left: 18px;
390+
padding: 3px 9px;
391+
border-radius: 999px;
392+
background: linear-gradient(135deg, #14b8a6, #22d3ee);
393+
color: #04101c;
394+
font-size: 0.64rem;
395+
font-weight: 900;
396+
letter-spacing: 0.08em;
397+
text-transform: uppercase;
398+
box-shadow: var(--shadow);
399+
transform: rotate(-4deg);
400+
}
382401

383402
h2 {
384403
font-family: "Space Grotesk", sans-serif;
@@ -396,6 +415,7 @@
396415

397416
#abstract .container,
398417
#demo .container,
418+
#runner .container,
399419
#leaderboard .container,
400420
#pipeline .container,
401421
#architecture .container,
@@ -809,6 +829,7 @@
809829
.link-row .btn:nth-child(3) { animation-delay: 0.16s; }
810830
.link-row .btn:nth-child(4) { animation-delay: 0.24s; }
811831
.link-row .btn:nth-child(5) { animation-delay: 0.32s; }
832+
.link-row .btn:nth-child(6) { animation-delay: 0.40s; }
812833

813834
@keyframes riseIn {
814835
from {
@@ -829,6 +850,7 @@
829850
#hero h1 { line-height: 1.02; }
830851
#abstract .container,
831852
#demo .container,
853+
#runner .container,
832854
#leaderboard .container,
833855
#pipeline .container,
834856
#architecture .container,
@@ -856,6 +878,7 @@
856878
<div class="nav-links">
857879
<a href="#abstract">Abstract</a>
858880
<a href="#demo">Demo</a>
881+
<a href="#runner">Try Live</a>
859882
<a href="#leaderboard">Leaderboard</a>
860883
<a href="#pipeline">Pipeline</a>
861884
<a href="#architecture">Architecture</a>
@@ -903,10 +926,11 @@ <h1>Bespoke OLAP: Synthesizing Workload-Specific<br>One-Size-Fits-One Database E
903926

904927
<div class="link-row">
905928
<a class="btn primary" href="https://arxiv.org/abs/2603.02001">Paper (arXiv)</a>
906-
<a class="btn" href="https://github.com/DataManagementLab/BespokeOLAP_Artifacts">Artifacts</a>
907-
<a class="btn" href="https://github.com/DataManagementLab/BespokeOLAP">Code</a>
929+
<a class="btn" href="https://github.com/DataManagementLab/BespokeOLAP_Artifacts">Generated DMBS (Example)</a>
930+
<a class="btn" href="https://github.com/DataManagementLab/BespokeOLAP">Github</a>
908931
<a class="btn" href="https://wandb.ai/jwehrstein/BespokeOLAP">W&amp;B Runs</a>
909-
<a class="btn demo-cta" href="/BespokeOLAP/demo/">Live Demo</a>
932+
<a class="btn demo-cta" href="/BespokeOLAP/demo/">Synthesis Explorer</a>
933+
<a class="btn live-new" href="http://130.83.40.96/ui?q=1&cmp_umbra=1&cmp_duckdb=1" target="_blank" rel="noopener">&#9654; Run Queries Live</a>
910934
</div>
911935

912936
</div>
@@ -996,22 +1020,23 @@ <h2>Bespoke OLAP in Action</h2>
9961020
</p>
9971021

9981022
<div style="margin-top: 40px;">
999-
<h3 style="font-size: 1.15rem; font-weight: 700; margin-bottom: 8px;">Interactive Live Demo</h3>
1023+
<h3 style="font-size: 1.15rem; font-weight: 700; margin-bottom: 8px;">Synthesis Explorer &mdash; How It Was Built</h3>
10001024
<p class="section-sub" style="margin-bottom: 16px;">
1001-
Run Bespoke-generated queries against real data directly in your browser.
1025+
Trace every decision the agent made: workload analysis, storage design, generated C++ code, and measured speedups &mdash; query by query.
10021026
</p>
10031027
<div class="coming-soon-wrap">
10041028
<div class="coming-soon-overlay">
1005-
<span class="cs-badge">Live Now</span>
1006-
<div class="cs-title">Explore the full BespokeOLAP engine synthesis story.</div>
1007-
<span class="cs-sub">Step through workload analysis, storage design, generated C++ implementations, and measured speedups query by query in the interactive demo.</span>
1029+
<span class="cs-badge">Interactive</span>
1030+
<div class="cs-title">Step through the full synthesis story.</div>
1031+
<span class="cs-sub">See how Bespoke OLAP analyzes the workload, designs the storage layout, generates C++ implementations, and iteratively improves them. Each query shows the actual generated code alongside benchmark results.</span>
10081032
<div class="coming-soon-points">
10091033
<span class="coming-soon-point">22 TPC-H queries</span>
1010-
<span class="coming-soon-point">Real code versions</span>
1011-
<span class="coming-soon-point">Measured against DuckDB</span>
1034+
<span class="coming-soon-point">Generated C++ source</span>
1035+
<span class="coming-soon-point">Agent reasoning traces</span>
1036+
<span class="coming-soon-point">Speedups vs DuckDB</span>
10121037
</div>
10131038
<div class="coming-soon-actions">
1014-
<a class="btn primary" href="/BespokeOLAP/demo/">Open Demo</a>
1039+
<a class="btn primary" href="/BespokeOLAP/demo/">Open Synthesis Explorer</a>
10151040
<a class="btn" href="/BespokeOLAP/demo/#tpch/q1">Jump to Q1</a>
10161041
</div>
10171042
</div>
@@ -1020,6 +1045,32 @@ <h3 style="font-size: 1.15rem; font-weight: 700; margin-bottom: 8px;">Interactiv
10201045
</div>
10211046
</section>
10221047

1048+
<section id="runner" class="section">
1049+
<div class="container">
1050+
<h2>Live Query Runner</h2>
1051+
<p class="section-sub">
1052+
The synthesized engine is running on a live server. Execute all 22 TPC-H queries against real data, compare against DuckDB and Umbra, and adjust query parameters yourself.
1053+
</p>
1054+
<div class="coming-soon-wrap">
1055+
<div class="coming-soon-overlay">
1056+
<span class="cs-badge" style="background: linear-gradient(135deg, #f97316, #facc15 55%, #22d3ee); box-shadow: 0 18px 40px rgba(249,115,22,0.28);">Live Server</span>
1057+
<div class="cs-title">The actual generated C++ engine, running right now.</div>
1058+
<span class="cs-sub">This is not a simulation. Connect directly to our server running the Bespoke-generated DBMS on TPC-H data. Pick any of the 22 queries, change placeholder values in the query templates, and see real execution times side by side with DuckDB and Umbra.</span>
1059+
<div class="coming-soon-points">
1060+
<span class="coming-soon-point">All 22 TPC-H queries</span>
1061+
<span class="coming-soon-point">Compare vs DuckDB</span>
1062+
<span class="coming-soon-point">Compare vs Umbra</span>
1063+
<span class="coming-soon-point">Adjustable parameters</span>
1064+
</div>
1065+
<div class="coming-soon-actions">
1066+
<a class="btn demo-cta" href="http://130.83.40.96/ui?q=1&cmp_umbra=1&cmp_duckdb=1" target="_blank" rel="noopener">Open Query Runner</a>
1067+
<a class="btn" href="http://130.83.40.96/ui?q=6&cmp_umbra=1&cmp_duckdb=1" target="_blank" rel="noopener">Try Q6</a>
1068+
</div>
1069+
</div>
1070+
</div>
1071+
</div>
1072+
</section>
1073+
10231074
<section id="leaderboard" class="section">
10241075
<div class="container">
10251076
<h2>Leaderboard</h2>

0 commit comments

Comments
 (0)