presentations-test / index.html
evalstate's picture
evalstate HF Staff
Test blob video loading for Arize deck
35cc9db verified
Raw
History Blame Contribute Delete
21.5 kB
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Presentation Archive</title>
<style>
:root {
color-scheme: dark;
--s-0: #0b0c0f;
--s-1: #14161b;
--s-2: #1c1f26;
--s-3: #262a33;
--b-1: #262a33;
--b-2: #3a3f4a;
--b-3: #555b68;
--fg-0: #f0ece2;
--fg-1: #b9b3a5;
--fg-2: #7d786d;
--fg-3: #4b483f;
--a-0: #f5a400;
--a-hi: #ffc649;
--a-dim: #8a5d00;
--a-bg: rgba(245, 164, 0, .08);
--a-line: rgba(245, 164, 0, .28);
--ok: #6ad19c;
--info: #6aa3f7;
--no: #f06b5a;
--mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
--shadow-terminal: 0 18px 44px rgba(0,0,0,.34), 0 0 36px rgba(245,164,0,.08);
font-family: var(--mono);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--s-0); }
body {
margin: 0;
min-height: 100vh;
color: var(--fg-0);
background:
radial-gradient(circle at 78% 8%, rgba(245,164,0,.12), transparent 28rem),
radial-gradient(circle at 12% 18%, rgba(106,163,247,.08), transparent 24rem),
linear-gradient(rgba(245,164,0,.035) 1px, transparent 1px),
linear-gradient(90deg, rgba(245,164,0,.028) 1px, transparent 1px),
var(--s-0);
background-size: auto, auto, 44px 44px, 44px 44px, auto;
font-family: var(--mono);
font-size: 14.5px;
line-height: 1.65;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-feature-settings: "ss02" on, "calt" on;
}
body::before {
content: "";
position: fixed;
inset: 0;
pointer-events: none;
background:
linear-gradient(180deg, transparent 0 50%, rgba(255,255,255,.018) 50% 100%),
radial-gradient(circle at 50% 0, transparent 0, rgba(0,0,0,.45) 100%);
background-size: 100% 4px, auto;
opacity: .55;
z-index: 0;
}
::selection { background: var(--a-0); color: #0b0c0f; }
a {
color: var(--a-0);
text-decoration: none;
border-bottom: 1px solid var(--a-line);
transition: color 180ms cubic-bezier(.2,0,0,1), border-color 180ms cubic-bezier(.2,0,0,1), transform 180ms cubic-bezier(.2,0,0,1);
}
a:hover { color: var(--a-hi); border-color: var(--a-0); }
main {
position: relative;
z-index: 1;
width: min(1180px, calc(100% - 2rem));
margin: 0 auto;
padding: 2rem 0 4rem;
}
.hero {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr) 22rem;
gap: clamp(1.5rem, 4vw, 4rem);
align-items: end;
min-height: 24rem;
padding: clamp(2rem, 7vw, 5.5rem) 0 2rem;
border-bottom: 1px solid var(--b-1);
}
.hero::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -1px;
height: 1px;
background: linear-gradient(90deg, transparent, var(--a-0), transparent);
opacity: .5;
}
.eyebrow {
display: inline-flex;
align-items: center;
gap: .55rem;
margin: 0 0 1rem;
color: var(--fg-2);
font-size: 11px;
font-weight: 700;
letter-spacing: .18em;
text-transform: uppercase;
}
.eyebrow::before { content: "❯"; color: var(--a-0); }
h1 {
max-width: 12ch;
margin: 0;
color: var(--fg-0);
font-size: clamp(3rem, 9vw, 7.2rem);
font-weight: 650;
line-height: .92;
letter-spacing: -.075em;
text-shadow: 0 0 28px rgba(245,164,0,.08);
}
.lede {
max-width: 58rem;
margin: 1.25rem 0 0;
color: var(--fg-1);
font-size: clamp(.98rem, 1.55vw, 1.16rem);
line-height: 1.7;
}
.hero-card {
position: relative;
padding: 1rem;
background: linear-gradient(180deg, rgba(245,164,0,.055), transparent 44%), var(--s-1);
border: 1px solid var(--b-2);
border-radius: 2px;
box-shadow: inset 0 -2px 0 var(--b-2), var(--shadow-terminal);
}
.hero-card::before {
content: "latest";
position: absolute;
top: -1px;
right: -1px;
padding: .28rem .55rem;
color: #0b0c0f;
background: var(--a-0);
font-size: 10px;
font-weight: 800;
letter-spacing: .16em;
text-transform: uppercase;
}
.hero-card time {
display: block;
margin-bottom: .55rem;
color: var(--fg-2);
font-size: 12px;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
}
.latest-event {
display: block;
margin-bottom: .35rem;
color: var(--a-0);
font-size: 11px;
font-weight: 800;
letter-spacing: .12em;
text-transform: uppercase;
}
.hero-card strong {
display: block;
color: var(--fg-0);
font-size: 1.1rem;
line-height: 1.28;
font-weight: 650;
}
.hero-card a {
display: inline-flex;
margin-top: 1rem;
color: var(--a-0);
font-size: 12px;
font-weight: 800;
letter-spacing: .1em;
text-transform: uppercase;
}
.meta-bar {
display: flex;
flex-wrap: wrap;
gap: .7rem;
align-items: center;
justify-content: space-between;
padding: .9rem 0;
border-bottom: 1px solid var(--b-1);
color: var(--fg-2);
font-size: 11px;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
}
.year-nav { display: flex; gap: .45rem; }
.year-nav a {
padding: .32rem .55rem;
color: var(--fg-1);
background: var(--s-1);
border: 1px solid var(--b-1);
border-radius: 2px;
}
.year-nav a:hover { color: var(--fg-0); border-color: var(--a-line); box-shadow: inset 0 -2px 0 var(--a-0); }
.year-section {
display: grid;
grid-template-columns: 6.25rem minmax(0, 1fr);
gap: clamp(1rem, 3vw, 2.5rem);
padding: 2rem 0;
border-bottom: 1px solid var(--b-1);
}
.year-rail span {
position: sticky;
top: 1rem;
display: inline-block;
color: var(--a-0);
font-size: clamp(1.8rem, 4.2vw, 3rem);
font-weight: 700;
letter-spacing: -.08em;
writing-mode: vertical-rl;
transform: rotate(180deg);
text-shadow: 0 0 18px rgba(245,164,0,.16);
}
h2 {
margin: 0 0 1rem;
color: var(--fg-2);
font-size: 11px;
font-weight: 800;
letter-spacing: .22em;
text-transform: uppercase;
}
h2::before { content: "// "; color: var(--a-0); }
.talk-grid { display: grid; gap: .75rem; }
.talk-card {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: .8rem 1rem;
padding: .95rem 1rem;
background: color-mix(in srgb, var(--s-1) 90%, transparent);
border: 1px solid var(--b-1);
border-radius: 2px;
box-shadow: inset 0 -1px 0 rgba(245,164,0,.06);
transition: transform 180ms cubic-bezier(.2,0,0,1), background 180ms cubic-bezier(.2,0,0,1), border-color 180ms cubic-bezier(.2,0,0,1), box-shadow 180ms cubic-bezier(.2,0,0,1);
animation: rise .42s both cubic-bezier(.16,1,.3,1);
animation-delay: calc(var(--i) * 30ms);
}
.talk-card:hover {
transform: translateY(-1px);
background: var(--s-2);
border-color: var(--b-3);
box-shadow: inset 0 -2px 0 var(--a-0), 0 10px 30px rgba(0,0,0,.22);
}
.card-main {
display: grid;
grid-template-columns: 7.2rem minmax(0, 1fr);
gap: 1rem;
align-items: baseline;
border-bottom: 0;
}
.talk-copy {
display: grid;
gap: .28rem;
min-width: 0;
}
.event-line {
color: var(--a-0);
font-size: 11px;
font-weight: 800;
letter-spacing: .12em;
text-transform: uppercase;
}
.stamp {
color: var(--fg-2);
font-size: 11px;
font-weight: 800;
letter-spacing: .12em;
text-transform: uppercase;
}
h3 {
margin: 0;
color: var(--fg-0);
font-size: clamp(1rem, 1.75vw, 1.45rem);
font-weight: 620;
line-height: 1.22;
letter-spacing: -.035em;
}
.arrow {
display: inline-grid;
place-items: center;
width: 2.25rem;
min-width: 2.25rem;
align-self: stretch;
color: var(--a-0);
background: rgba(245,164,0,.06);
border: 1px solid var(--a-line);
border-radius: 2px;
box-shadow: inset 0 -2px 0 rgba(245,164,0,.18);
font-size: 1rem;
line-height: 1;
transform: translateX(0);
transition: transform 180ms cubic-bezier(.2,0,0,1), background 180ms cubic-bezier(.2,0,0,1), border-color 180ms cubic-bezier(.2,0,0,1), color 180ms cubic-bezier(.2,0,0,1), box-shadow 180ms cubic-bezier(.2,0,0,1);
}
.arrow:hover, .talk-card:hover .arrow {
color: #0b0c0f;
background: var(--a-0);
border-color: var(--a-0);
box-shadow: inset 0 -2px 0 rgba(0,0,0,.18), 0 0 18px rgba(245,164,0,.16);
transform: translateX(.08rem);
}
.card-actions { display: flex; gap: .45rem; justify-content: end; align-items: stretch; }
.pill {
display: inline-flex;
align-items: center;
white-space: nowrap;
padding: .44rem .66rem;
color: var(--fg-0);
background: var(--s-1);
border: 1px solid var(--b-2);
border-radius: 2px;
box-shadow: inset 0 -2px 0 var(--b-2);
font-size: 11px;
font-weight: 800;
letter-spacing: .1em;
text-transform: uppercase;
}
.pill:hover { color: var(--fg-0); background: var(--s-2); border-color: var(--b-3); box-shadow: inset 0 -2px 0 var(--a-0); }
.pill.ghost { color: var(--fg-1); background: transparent; border-color: var(--b-1); box-shadow: none; }
.note {
grid-column: 1 / -1;
margin: -.15rem 0 0 8.2rem;
max-width: 58rem;
color: var(--fg-2);
font-size: .88rem;
line-height: 1.55;
}
footer {
display: flex;
flex-wrap: wrap;
gap: .5rem;
justify-content: space-between;
margin: 2.25rem 0 0;
padding-top: 1rem;
border-top: 1px solid var(--b-1);
color: var(--fg-2);
font-size: 11px;
font-weight: 650;
letter-spacing: .04em;
}
footer code { color: var(--fg-1); }
footer a { color: var(--a-0); font-weight: 900; }
@keyframes rise { from { opacity: 0; transform: translateY(.45rem); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 760px) {
main { width: min(100% - 1rem, 1180px); padding-top: .5rem; }
.hero { grid-template-columns: 1fr; min-height: auto; }
.year-section { grid-template-columns: 1fr; }
.year-rail span { position: static; writing-mode: horizontal-tb; transform: none; }
.talk-card { grid-template-columns: 1fr; }
.card-main { grid-template-columns: 1fr; }
.stamp { grid-column: 1; }
.talk-copy { grid-column: 1; }
.card-actions { justify-content: start; }
.note { margin-left: 0; }
}
</style>
</head>
<body>
<main>
<header class="hero">
<div>
<p class="eyebrow">evalstate archive department</p>
<h1>Presentation Archive</h1>
<p class="lede">A maintained shelf of selected talks, demos, and conference decks. Hosted by Hugging Face Spaces.</p>
</div>
<aside class="hero-card">
<time>Jun 2026</time>
<span class="latest-event">Arize · London UK</span>
<strong>Optimizing Skills and Tools, with Vision and GEPA</strong>
<a href="2026/arize-gepa/index.html">Open newest deck ↗</a>
</aside>
</header>
<div class="meta-bar">
<span>10 decks · newest first</span>
<nav class="year-nav" aria-label="Years"><a href="#y2026">2026</a><a href="#y2025">2025</a></nav>
</div>
<section class="year-section" id="y2026">
<div class="year-rail"><span>2026</span></div>
<div class="year-content">
<h2>2026</h2>
<div class="talk-grid">
<article class="talk-card" style="--i:1">
<a class="card-main" href="2026/arize-gepa/index.html">
<span class="stamp"><time datetime="2026-06-20">Jun 2026</time></span>
<span class="talk-copy">
<span class="event-line">Arize · London UK</span>
<h3>Optimizing Skills and Tools, with Vision and GEPA</h3>
</span>
</a>
<div class="card-actions">
<a class="pill ghost" href="https://luma.com/">Event</a>
<a class="pill" href="2026/arize-gepa/index.html">View deck</a>
<a class="arrow" href="2026/arize-gepa/index.html" aria-label="Open Optimizing Skills and Tools, with Vision and GEPA"></a>
</div>
<p class="note">Included live view of Trackio dashboards.</p>
</article>
<article class="talk-card" style="--i:2">
<a class="card-main" href="2026/aidevcon-london/index.html">
<span class="stamp"><time datetime="2026-06-02">Jun 2026</time></span>
<span class="talk-copy">
<span class="event-line">AI DevCon · London</span>
<h3>Connecting Context: The Future of MCP Transports</h3>
</span>
</a>
<div class="card-actions">
<a class="pill ghost" href="https://tessl.io/devcon/">Event</a>
<a class="pill" href="2026/aidevcon-london/index.html">View deck</a>
<a class="arrow" href="2026/aidevcon-london/index.html" aria-label="Open Connecting Context: The Future of MCP Transports"></a>
</div>
<p class="note">Included live demonstration of fast-agent and mcp-webcam sampling</p>
</article>
<article class="talk-card" style="--i:3">
<a class="card-main" href="2026/agentic-ai-aws/presentation.html">
<span class="stamp"><time datetime="2026-05-15">May 2026</time></span>
<span class="talk-copy">
<span class="event-line">Agentic AI on CPU · London</span>
<h3>Upskilling Local Models and Agents</h3>
</span>
</a>
<div class="card-actions">
<a class="pill" href="2026/agentic-ai-aws/presentation.html">View deck</a>
<a class="arrow" href="2026/agentic-ai-aws/presentation.html" aria-label="Open Upskilling Local Models and Agents"></a>
</div>
</article>
<article class="talk-card" style="--i:4">
<a class="card-main" href="2026/nvidia-meetup/presentation.html">
<span class="stamp"><time datetime="2026-04-30">Apr 2026</time></span>
<span class="talk-copy">
<span class="event-line">AI Native Dev (NVidia) · London</span>
<h3>Upskilling Models, Agents and the ML Pipeline</h3>
</span>
</a>
<div class="card-actions">
<a class="pill ghost" href="https://luma.com/oojjhxa2?tk=S9bQsj">Event</a>
<a class="pill" href="2026/nvidia-meetup/presentation.html">View deck</a>
<a class="arrow" href="2026/nvidia-meetup/presentation.html" aria-label="Open Upskilling Models, Agents and the ML Pipeline"></a>
</div>
</article>
<article class="talk-card" style="--i:5">
<a class="card-main" href="2026/mcp-dev-summit-ny/presentation.html">
<span class="stamp"><time datetime="2026-04-02">Apr 2026</time></span>
<span class="talk-copy">
<span class="event-line">MCP Dev Summit · NYC</span>
<h3>MCP at 18 Months: Protocols, Patterns, and the Things We Did Not See Coming</h3>
</span>
</a>
<div class="card-actions">
<a class="pill ghost" href="https://mcpdevsummitna26.sched.com/">Event</a>
<a class="pill" href="2026/mcp-dev-summit-ny/presentation.html">View deck</a>
<a class="arrow" href="2026/mcp-dev-summit-ny/presentation.html" aria-label="Open MCP at 18 Months: Protocols, Patterns, and the Things We Did Not See Coming"></a>
</div>
<p class="note">Included live demo of fast-agent / Monty Code Generation</p>
</article>
<article class="talk-card" style="--i:6">
<a class="card-main" href="2026/mcp-conference/presentation.html">
<span class="stamp"><time datetime="2026-02-12">Feb 2026</time></span>
<span class="talk-copy">
<span class="event-line">MCP Conference · London UK</span>
<h3>Hugging Face: Connecting ML with Agents and Skills</h3>
</span>
</a>
<div class="card-actions">
<a class="pill ghost" href="https://www.containerdays.io/containerdays-london-2026/mcpconference-agenda/">Event</a>
<a class="pill" href="2026/mcp-conference/presentation.html">View deck</a>
<a class="arrow" href="2026/mcp-conference/presentation.html" aria-label="Open Hugging Face: Connecting ML with Agents and Skills"></a>
</div>
<p class="note">Included live demo of Hugging Face MCP Server, HF Tool Builder Skill and fast-agent used with Toad via ACP.</p>
</article>
<article class="talk-card" style="--i:7">
<a class="card-main" href="2026/mcp-connect/presentation.html">
<span class="stamp"><time datetime="2026-02-06">Feb 2026</time></span>
<span class="talk-copy">
<span class="event-line">MCP Connect · Paris</span>
<h3>Preparing MCP for the Future</h3>
</span>
</a>
<div class="card-actions">
<a class="pill ghost" href="https://luma.com/bj6kgvxh">Event</a>
<a class="pill" href="2026/mcp-connect/presentation.html">View deck</a>
<a class="arrow" href="2026/mcp-connect/presentation.html" aria-label="Open Preparing MCP for the Future"></a>
</div>
</article>
</div>
</div>
</section>
<section class="year-section" id="y2025">
<div class="year-rail"><span>2025</span></div>
<div class="year-content">
<h2>2025</h2>
<div class="talk-grid">
<article class="talk-card" style="--i:1">
<a class="card-main" href="2025/mcp-dev-summit-oct/presentation.html">
<span class="stamp"><time datetime="2025-10-03">Oct 2025</time></span>
<span class="talk-copy">
<span class="event-line">MCP Dev Summit · London</span>
<h3>Streams, Sessions, Stats: Transport and Client Behaviour</h3>
</span>
</a>
<div class="card-actions">
<a class="pill ghost" href="https://mcpdevsummit.ai/">Event</a>
<a class="pill" href="2025/mcp-dev-summit-oct/presentation.html">View deck</a>
<a class="arrow" href="2025/mcp-dev-summit-oct/presentation.html" aria-label="Open Streams, Sessions, Stats: Transport and Client Behaviour"></a>
</div>
<p class="note">Live demos covered the Hugging Face MCP Server, fast-agent transport tracking, and stateless MCP transport patterns.</p>
</article>
<article class="talk-card" style="--i:2">
<a class="card-main" href="2025/secure-se-sep/presentation.html">
<span class="stamp"><time datetime="2025-09-01">Sep 2025</time></span>
<span class="talk-copy">
<span class="event-line">Secure AI SE · Stockholm</span>
<h3>Securing the Model Context Protocol</h3>
</span>
</a>
<div class="card-actions">
<a class="pill ghost" href="https://secureai.se/">Event</a>
<a class="pill" href="2025/secure-se-sep/presentation.html">View deck</a>
<a class="arrow" href="2025/secure-se-sep/presentation.html" aria-label="Open Securing the Model Context Protocol"></a>
</div>
<p class="note">Presentation included demonstration of Token Prediction and Selection, and Sampling with fast-agent and webcam.fast-agent.ai.</p>
</article>
<article class="talk-card" style="--i:3">
<a class="card-main" href="2025/mcp-dev-summit-may/presentation.html">
<span class="stamp"><time datetime="2025-05-22">May 2025</time></span>
<span class="talk-copy">
<span class="event-line">MCP Dev Summit</span>
<h3>Resources: Building the Next Wave of MCP Apps</h3>
</span>
</a>
<div class="card-actions">
<a class="pill ghost" href="https://luma.com/mcpdevsummit2025">Event</a>
<a class="pill" href="2025/mcp-dev-summit-may/presentation.html">View deck</a>
<a class="arrow" href="2025/mcp-dev-summit-may/presentation.html" aria-label="Open Resources: Building the Next Wave of MCP Apps"></a>
</div>
</article>
</div>
</div>
</section>
<footer>
<span>Built from <code>evalstate/miscellany@a27eb4bafe87</code> · local changes present</span>
<span>2026-06-24T12:14:44.418544+00:00 · <a href="publish-manifest.json">provenance</a></span>
</footer>
</main>
</body>
</html>