Skip to content

Commit 2ac21ee

Browse files
patwlanpatwlan
committed
chore: update ADL
1 parent 03210de commit 2ac21ee

1 file changed

Lines changed: 136 additions & 9 deletions

File tree

‎static/adl/index.html‎

Lines changed: 136 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -108,6 +108,45 @@
108108
animation-delay: 3s;
109109
border-radius: 5px;
110110
}
111+
112+
@keyframes titleCaretBlink {
113+
0%, 49% { opacity: 1; }
114+
50%, 100% { opacity: 0; }
115+
}
116+
117+
[data-typing-title] {
118+
display: inline-block;
119+
}
120+
121+
[data-typing-title].typing-pending {
122+
visibility: hidden;
123+
}
124+
125+
[data-typing-title].typing-active,
126+
[data-typing-title].typing-done {
127+
visibility: visible;
128+
}
129+
130+
[data-typing-title].typing-active::after {
131+
content: "";
132+
display: inline-block;
133+
width: 0.08em;
134+
height: 0.9em;
135+
margin-left: 0.08em;
136+
background: currentColor;
137+
vertical-align: -0.08em;
138+
animation: titleCaretBlink 0.9s steps(1, end) infinite;
139+
}
140+
141+
@media (prefers-reduced-motion: reduce) {
142+
[data-typing-title].typing-pending {
143+
visibility: visible;
144+
}
145+
146+
[data-typing-title].typing-active::after {
147+
animation: none;
148+
}
149+
}
111150
</style>
112151
</head>
113152
<body class="font-sans text-stone-600 antialiased selection:bg-nature-light selection:text-white bg-nature-page">
@@ -260,7 +299,7 @@ <h1 class="text-4xl tracking-tight font-extrabold text-nature-dark sm:text-5xl m
260299
<section id="adl-studio" class="py-16 bg-gradient-to-br from-nature-page to-white border-t border-nature-border">
261300
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
262301
<div class="text-center mb-16">
263-
<h2 class="text-base text-nature-primary font-semibold tracking-wide uppercase">The Face</h2>
302+
<h2 data-typing-title class="text-base text-nature-primary font-semibold tracking-wide uppercase">The Face</h2>
264303
<p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-nature-dark sm:text-4xl">
265304
ADL Studio
266305
</p>
@@ -369,7 +408,7 @@ <h2 class="text-base text-nature-primary font-semibold tracking-wide uppercase">
369408
<section id="run-adl-server" class="py-16 bg-nature-page border-t border-nature-border">
370409
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
371410
<div class="text-center mb-12">
372-
<h2 class="text-3xl font-extrabold text-nature-dark tracking-tight">Run ADL Server + Studio</h2>
411+
<h2 data-typing-title class="text-3xl font-extrabold text-nature-dark tracking-tight">Run ADL Server + Studio</h2>
373412
<p class="mt-4 text-xl text-stone-600 lg:mx-auto">
374413
Get up and running quickly with Docker.
375414
</p>
@@ -442,7 +481,7 @@ <h2 class="text-3xl font-extrabold text-nature-dark tracking-tight">Run ADL Serv
442481
<section id="philosophy" class="py-16 bg-white border-t border-nature-border">
443482
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
444483
<div class="text-center">
445-
<h2 class="text-base text-nature-primary font-semibold tracking-wide uppercase">Core Philosophy</h2>
484+
<h2 data-typing-title class="text-base text-nature-primary font-semibold tracking-wide uppercase">Core Philosophy</h2>
446485
<p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-nature-dark sm:text-4xl">
447486
Why Agent Programming?
448487
</p>
@@ -508,7 +547,7 @@ <h3 class="mt-8 text-xl font-bold text-nature-dark text-center group-hover:text-
508547
<section id="adl-example" class="py-16 bg-white border-t border-nature-border">
509548
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
510549
<div class="text-center mb-12">
511-
<h2 class="text-base text-nature-primary font-semibold tracking-wide uppercase">In Action</h2>
550+
<h2 data-typing-title class="text-base text-nature-primary font-semibold tracking-wide uppercase">In Action</h2>
512551
<p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-nature-dark sm:text-4xl">
513552
ADL Examples
514553
</p>
@@ -684,7 +723,7 @@ <h4 class="font-bold text-xs text-stone-500 uppercase tracking-wide mb-2">Scenar
684723
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
685724
<div class="lg:grid lg:grid-cols-12 lg:gap-16 items-center">
686725
<div class="lg:col-span-7">
687-
<h2 class="text-base text-nature-primary font-semibold tracking-wide uppercase">The Paradigm Shift</h2>
726+
<h2 data-typing-title class="text-base text-nature-primary font-semibold tracking-wide uppercase">The Paradigm Shift</h2>
688727
<h3 class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-nature-dark sm:text-4xl">
689728
ADL Skills
690729
</h3>
@@ -766,7 +805,7 @@ <h4 class="text-sm font-bold text-nature-primary mb-2 flex items-center gap-2">
766805
<section id="technical-spec" class="py-16 bg-nature-page border-t border-nature-border">
767806
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
768807
<div class="text-center mb-12">
769-
<h2 class="text-base text-nature-primary font-semibold tracking-wide uppercase">Technical Specification</h2>
808+
<h2 data-typing-title class="text-base text-nature-primary font-semibold tracking-wide uppercase">Technical Specification</h2>
770809
<p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-nature-dark sm:text-4xl">
771810
ADL Skill Format & Capabilities
772811
</p>
@@ -811,6 +850,18 @@ <h3 class="text-2xl font-bold text-nature-dark">ADL Skill Structure</h3>
811850
<span class="font-semibold text-nature-primary min-w-[7rem]">Goal</span>
812851
<span>(Optional) The objective of the skill, useful for evals and tracking business objectives.</span>
813852
</li>
853+
<li class="flex gap-3 items-start p-3 rounded-lg bg-white border border-nature-border/70">
854+
<span class="font-semibold text-nature-primary min-w-[7rem]">Examples</span>
855+
<span>
856+
(Optional) Defines a list of utterances that trigger the skill.
857+
<span class="block mt-1 text-stone-500">For example:</span>
858+
<ul class="list-disc list-inside mt-1 space-y-1 text-stone-500">
859+
<li>i would like to know the weather</li>
860+
<li>weather?</li>
861+
<li>what is the weather forecast for my area?</li>
862+
</ul>
863+
</span>
864+
</li>
814865
<li class="flex gap-3 items-start p-3 rounded-lg bg-white border border-nature-border/70">
815866
<span class="font-semibold text-nature-primary min-w-[7rem]">Context</span>
816867
<span>(Optional) Extra information LLM may need to answer any questions the customer may have.</span>
@@ -1298,7 +1349,7 @@ <h4 id="comments" class="font-bold text-nature-dark mb-2">Comments</h4>
12981349
<section id="architecture" class="py-20 bg-white border-t border-nature-border">
12991350
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
13001351
<div class="text-center mb-16">
1301-
<h2 class="text-base text-nature-primary font-semibold tracking-wide uppercase">Integration</h2>
1352+
<h2 data-typing-title class="text-base text-nature-primary font-semibold tracking-wide uppercase">Integration</h2>
13021353
<p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-nature-dark sm:text-4xl">
13031354
Connect Anywhere
13041355
</p>
@@ -1427,7 +1478,7 @@ <h3 class="font-bold text-white text-xl">ADL Engine</h3>
14271478
<div class="overflow-x-auto pb-2">
14281479
<div class="flex items-start gap-16 min-w-[1240px]">
14291480
<div class="w-[520px] shrink-0">
1430-
<h2 class="text-3xl font-extrabold text-nature-dark tracking-tight">OpenAI Compatible Endpoint</h2>
1481+
<h2 data-typing-title class="text-3xl font-extrabold text-nature-dark tracking-tight">OpenAI Compatible Endpoint</h2>
14311482
<p class="mt-4 text-lg text-stone-600">
14321483
Integration is effortless. ADL Server exposes a standard <code class="text-nature-primary">/v1/chat/completions</code>
14331484
endpoint.
@@ -1540,7 +1591,7 @@ <h2 class="text-3xl font-extrabold text-nature-dark tracking-tight">OpenAI Compa
15401591
<section id="graphql-api" class="py-16 bg-white border-t border-nature-border">
15411592
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
15421593
<div class="text-center mb-12">
1543-
<h2 class="text-3xl font-extrabold text-nature-dark tracking-tight">GraphQL API</h2>
1594+
<h2 data-typing-title class="text-3xl font-extrabold text-nature-dark tracking-tight">GraphQL API</h2>
15441595
<p class="mt-4 text-xl text-stone-600 lg:mx-auto">
15451596
Comprehensive API for managing, compiling, testing, and evaluating your ADLs.
15461597
</p>
@@ -1697,6 +1748,82 @@ <h3 class="text-sm font-semibold text-stone-200 tracking-wider uppercase mb-4">E
16971748
</div>
16981749
</footer>
16991750

1751+
<script>
1752+
(function () {
1753+
const titles = Array.from(document.querySelectorAll('[data-typing-title]'));
1754+
if (!titles.length) return;
1755+
1756+
const reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
1757+
1758+
const showFinalTitle = (el) => {
1759+
const fullText = el.dataset.fullText || el.textContent || '';
1760+
el.textContent = fullText;
1761+
el.classList.remove('typing-pending', 'typing-active');
1762+
el.classList.add('typing-done');
1763+
};
1764+
1765+
const typeTitle = (el) => {
1766+
if (el.dataset.typed === 'true') return;
1767+
const fullText = el.dataset.fullText || '';
1768+
const speed = Number(el.dataset.typingSpeed || 28);
1769+
1770+
el.dataset.typed = 'true';
1771+
el.textContent = '';
1772+
el.classList.remove('typing-pending');
1773+
el.classList.add('typing-active');
1774+
1775+
let index = 0;
1776+
const step = () => {
1777+
index += 1;
1778+
el.textContent = fullText.slice(0, index);
1779+
1780+
if (index < fullText.length) {
1781+
window.setTimeout(step, speed);
1782+
return;
1783+
}
1784+
1785+
el.classList.remove('typing-active');
1786+
el.classList.add('typing-done');
1787+
};
1788+
1789+
step();
1790+
};
1791+
1792+
titles.forEach((el) => {
1793+
el.dataset.fullText = (el.textContent || '').trim();
1794+
1795+
if (reducedMotion) {
1796+
showFinalTitle(el);
1797+
} else {
1798+
el.classList.add('typing-pending');
1799+
}
1800+
});
1801+
1802+
if (reducedMotion) return;
1803+
1804+
if (!('IntersectionObserver' in window)) {
1805+
titles.forEach(showFinalTitle);
1806+
return;
1807+
}
1808+
1809+
const observer = new IntersectionObserver(
1810+
(entries) => {
1811+
entries.forEach((entry) => {
1812+
if (!entry.isIntersecting) return;
1813+
typeTitle(entry.target);
1814+
observer.unobserve(entry.target);
1815+
});
1816+
},
1817+
{
1818+
threshold: 0.35,
1819+
rootMargin: '0px 0px -10% 0px'
1820+
}
1821+
);
1822+
1823+
titles.forEach((title) => observer.observe(title));
1824+
})();
1825+
</script>
1826+
17001827
<script src="/lmos/arc2/assets/js/cookieconsent.min.js"></script>
17011828

17021829
</body>

0 commit comments

Comments
 (0)