Hugging Face's logo

redosempiternal66
/
setyo_model

unity-sentis
English
agent
Model card Files
xet
 Community
setyo_model / actionmodel-carousel.html
redosempiternal66's picture
redosempiternal66
newfile_setyo_action
c5c88c9 verified
Raw
History Blame Contribute Delete
16 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>LLM vs LAM — Action Model Carousel</title>
<link href="https://fonts.googleapis.com/css2?family=Syne:wght@400;700;800&family=Space+Mono:wght@400;700&display=swap" rel="stylesheet">
<style>
 *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
 :root {
 --black: #050508;
 --white: #f0ede8;
 --cyan: #00e5ff;
 --purple: #7b2fff;
 --red: #ff3c3c;
 --green: #00ff88;
 --dim: rgba(240,237,232,0.12);
 --dim2: rgba(240,237,232,0.06);
 }
 body {
 background: #0a0a0f;
 display: flex;
 flex-direction: column;
 align-items: center;
 padding: 40px 20px 60px;
 font-family: 'Space Mono', monospace;
 gap: 32px;
 }
 h1 {
 font-family: 'Syne', sans-serif;
 font-size: 13px;
 letter-spacing: 0.3em;
 color: rgba(240,237,232,0.3);
 text-transform: uppercase;
 margin-bottom: 8px;
 }
 .slide {
 width: 540px;
 height: 540px;
 position: relative;
 overflow: hidden;
 border-radius: 4px;
 flex-shrink: 0;
 }
 /* ─── SLIDE 1 — COVER ─── */
 .s1 { background: var(--black); }
 .s1 .grid-bg {
 position: absolute; inset: 0;
 background-image:
 linear-gradient(rgba(0,229,255,0.07) 1px, transparent 1px),
 linear-gradient(90deg, rgba(0,229,255,0.07) 1px, transparent 1px);
 background-size: 54px 54px;
 }
 .s1 .glow {
 position: absolute;
 width: 320px; height: 320px;
 border-radius: 50%;
 background: radial-gradient(circle, rgba(123,47,255,0.35) 0%, transparent 70%);
 top: 50%; left: 50%;
 transform: translate(-50%, -60%);
 filter: blur(40px);
 }
 .s1 .glow2 {
 position: absolute;
 width: 200px; height: 200px;
 border-radius: 50%;
 background: radial-gradient(circle, rgba(0,229,255,0.2) 0%, transparent 70%);
 bottom: 10%; right: 5%;
 filter: blur(30px);
 }
 .s1 .content {
 position: absolute; inset: 0;
 display: flex; flex-direction: column;
 justify-content: center; align-items: flex-start;
 padding: 52px;
 }
 .s1 .label {
 font-family: 'Space Mono', monospace;
 font-size: 10px;
 letter-spacing: 0.3em;
 color: var(--cyan);
 text-transform: uppercase;
 margin-bottom: 20px;
 border: 1px solid rgba(0,229,255,0.3);
 padding: 5px 12px;
 display: inline-block;
 }
 .s1 h2 {
 font-family: 'Syne', sans-serif;
 font-size: 46px;
 font-weight: 800;
 line-height: 1.05;
 color: var(--white);
 margin-bottom: 24px;
 }
 .s1 h2 span { color: var(--cyan); }
 .s1 .sub {
 font-size: 12px;
 color: rgba(240,237,232,0.4);
 line-height: 1.7;
 max-width: 320px;
 }
 .s1 .corner {
 position: absolute;
 bottom: 40px; right: 40px;
 font-size: 11px;
 color: rgba(240,237,232,0.2);
 letter-spacing: 0.2em;
 text-transform: uppercase;
 }
 .s1 .slide-num {
 position: absolute;
 top: 40px; right: 40px;
 font-size: 11px;
 color: rgba(240,237,232,0.2);
 }
 /* ─── SLIDE 2 — LLM ─── */
 .s2 { background: #07070c; }
 .s2 .stripe {
 position: absolute;
 top: 0; left: 0; right: 0;
 height: 4px;
 background: linear-gradient(90deg, var(--purple), var(--cyan));
 }
 .s2 .noise {
 position: absolute; inset: 0;
 background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
 opacity: 0.4;
 }
 .s2 .big-label {
 position: absolute;
 top: -20px; right: -10px;
 font-family: 'Syne', sans-serif;
 font-size: 180px;
 font-weight: 800;
 color: rgba(123,47,255,0.06);
 line-height: 1;
 user-select: none;
 }
 .s2 .content {
 position: absolute; inset: 0;
 padding: 52px;
 display: flex; flex-direction: column;
 justify-content: center;
 }
 .s2 .tag {
 font-size: 10px;
 letter-spacing: 0.3em;
 color: var(--purple);
 text-transform: uppercase;
 margin-bottom: 16px;
 }
 .s2 h2 {
 font-family: 'Syne', sans-serif;
 font-size: 38px;
 font-weight: 800;
 color: var(--white);
 margin-bottom: 32px;
 line-height: 1.1;
 }
 .s2 .rows { display: flex; flex-direction: column; gap: 14px; }
 .s2 .row {
 display: flex; align-items: flex-start; gap: 14px;
 }
 .s2 .dot {
 width: 6px; height: 6px;
 border-radius: 50%;
 background: var(--purple);
 margin-top: 6px;
 flex-shrink: 0;
 }
 .s2 .row-label {
 font-size: 10px;
 letter-spacing: 0.2em;
 color: rgba(240,237,232,0.35);
 text-transform: uppercase;
 min-width: 90px;
 }
 .s2 .row-val {
 font-size: 13px;
 color: var(--white);
 line-height: 1.5;
 }
 .s2 .slide-num {
 position: absolute;
 bottom: 40px; right: 40px;
 font-size: 11px;
 color: rgba(240,237,232,0.15);
 }
 .s2 .limit-box {
 position: absolute;
 bottom: 40px; left: 52px;
 background: rgba(255,60,60,0.08);
 border: 1px solid rgba(255,60,60,0.2);
 padding: 8px 14px;
 font-size: 11px;
 color: rgba(255,100,100,0.7);
 letter-spacing: 0.1em;
 }
 /* ─── SLIDE 3 — LAM ─── */
 .s3 { background: #060c0a; }
 .s3 .stripe {
 position: absolute;
 top: 0; left: 0; right: 0;
 height: 4px;
 background: linear-gradient(90deg, var(--green), var(--cyan));
 }
 .s3 .big-label {
 position: absolute;
 top: -20px; right: -10px;
 font-family: 'Syne', sans-serif;
 font-size: 180px;
 font-weight: 800;
 color: rgba(0,255,136,0.04);
 line-height: 1;
 user-select: none;
 }
 .s3 .glow {
 position: absolute;
 width: 250px; height: 250px;
 background: radial-gradient(circle, rgba(0,255,136,0.08) 0%, transparent 70%);
 bottom: 0; right: 0;
 filter: blur(50px);
 }
 .s3 .content {
 position: absolute; inset: 0;
 padding: 52px;
 display: flex; flex-direction: column;
 justify-content: center;
 }
 .s3 .tag {
 font-size: 10px;
 letter-spacing: 0.3em;
 color: var(--green);
 text-transform: uppercase;
 margin-bottom: 16px;
 }
 .s3 h2 {
 font-family: 'Syne', sans-serif;
 font-size: 38px;
 font-weight: 800;
 color: var(--white);
 margin-bottom: 32px;
 line-height: 1.1;
 }
 .s3 .rows { display: flex; flex-direction: column; gap: 14px; }
 .s3 .row { display: flex; align-items: flex-start; gap: 14px; }
 .s3 .dot {
 width: 6px; height: 6px;
 border-radius: 50%;
 background: var(--green);
 margin-top: 6px;
 flex-shrink: 0;
 }
 .s3 .row-label {
 font-size: 10px;
 letter-spacing: 0.2em;
 color: rgba(240,237,232,0.35);
 text-transform: uppercase;
 min-width: 90px;
 }
 .s3 .row-val {
 font-size: 13px;
 color: var(--white);
 line-height: 1.5;
 }
 .s3 .highlight-box {
 position: absolute;
 bottom: 40px; left: 52px; right: 52px;
 background: rgba(0,255,136,0.06);
 border: 1px solid rgba(0,255,136,0.2);
 padding: 10px 14px;
 font-size: 11px;
 color: rgba(0,255,136,0.8);
 letter-spacing: 0.05em;
 line-height: 1.5;
 }
 .s3 .slide-num {
 position: absolute;
 bottom: 40px; right: 40px;
 font-size: 11px;
 color: rgba(240,237,232,0.15);
 }
 /* ─── SLIDE 4 — COMPARISON ─── */
 .s4 { background: #08070d; }
 .s4 .scanlines {
 position: absolute; inset: 0;
 background: repeating-linear-gradient(
 0deg,
 transparent,
 transparent 3px,
 rgba(255,255,255,0.012) 3px,
 rgba(255,255,255,0.012) 4px
 );
 pointer-events: none;
 }
 .s4 .content {
 position: absolute; inset: 0;
 padding: 52px;
 display: flex; flex-direction: column;
 justify-content: center; gap: 0;
 }
 .s4 .tag {
 font-size: 10px;
 letter-spacing: 0.3em;
 color: var(--cyan);
 text-transform: uppercase;
 margin-bottom: 20px;
 }
 .s4 h2 {
 font-family: 'Syne', sans-serif;
 font-size: 30px;
 font-weight: 800;
 color: var(--white);
 margin-bottom: 32px;
 line-height: 1.2;
 }
 .s4 .block {
 padding: 18px 20px;
 margin-bottom: 14px;
 position: relative;
 }
 .s4 .block.llm {
 background: rgba(123,47,255,0.07);
 border-left: 3px solid var(--purple);
 }
 .s4 .block.lam {
 background: rgba(0,255,136,0.06);
 border-left: 3px solid var(--green);
 }
 .s4 .block-tag {
 font-size: 9px;
 letter-spacing: 0.3em;
 text-transform: uppercase;
 margin-bottom: 8px;
 }
 .s4 .block.llm .block-tag { color: var(--purple); }
 .s4 .block.lam .block-tag { color: var(--green); }
 .s4 .block-text {
 font-size: 13px;
 color: var(--white);
 line-height: 1.6;
 }
 .s4 .verdict {
 margin-top: 8px;
 font-size: 11px;
 color: rgba(240,237,232,0.4);
 letter-spacing: 0.1em;
 font-style: italic;
 }
 .s4 .slide-num {
 position: absolute;
 bottom: 40px; right: 40px;
 font-size: 11px;
 color: rgba(240,237,232,0.15);
 }
 /* ─── SLIDE 5 — CTA ─── */
 .s5 { background: var(--black); }
 .s5 .bg-lines {
 position: absolute; inset: 0;
 background-image:
 linear-gradient(rgba(0,229,255,0.04) 1px, transparent 1px),
 linear-gradient(90deg, rgba(0,229,255,0.04) 1px, transparent 1px);
 background-size: 36px 36px;
 }
 .s5 .center-glow {
 position: absolute;
 width: 400px; height: 400px;
 border-radius: 50%;
 background: radial-gradient(circle, rgba(0,229,255,0.12) 0%, rgba(123,47,255,0.08) 40%, transparent 70%);
 top: 50%; left: 50%;
 transform: translate(-50%, -50%);
 filter: blur(30px);
 }
 .s5 .ring {
 position: absolute;
 border-radius: 50%;
 border: 1px solid rgba(0,229,255,0.08);
 top: 50%; left: 50%;
 transform: translate(-50%, -50%);
 }
 .s5 .ring1 { width: 300px; height: 300px; }
 .s5 .ring2 { width: 420px; height: 420px; border-color: rgba(0,229,255,0.04); }
 .s5 .content {
 position: absolute; inset: 0;
 display: flex; flex-direction: column;
 justify-content: center; align-items: center;
 text-align: center;
 padding: 52px;
 }
 .s5 .eyebrow {
 font-size: 10px;
 letter-spacing: 0.4em;
 color: var(--cyan);
 text-transform: uppercase;
 margin-bottom: 24px;
 }
 .s5 h2 {
 font-family: 'Syne', sans-serif;
 font-size: 40px;
 font-weight: 800;
 color: var(--white);
 line-height: 1.1;
 margin-bottom: 20px;
 }
 .s5 h2 span { color: var(--cyan); }
 .s5 .desc {
 font-size: 12px;
 color: rgba(240,237,232,0.45);
 line-height: 1.8;
 margin-bottom: 36px;
 max-width: 340px;
 }
 .s5 .pills {
 display: flex; gap: 10px; margin-bottom: 36px;
 flex-wrap: wrap; justify-content: center;
 }
 .s5 .pill {
 font-size: 10px;
 letter-spacing: 0.15em;
 text-transform: uppercase;
 padding: 6px 14px;
 border: 1px solid rgba(0,229,255,0.25);
 color: rgba(0,229,255,0.7);
 border-radius: 2px;
 }
 .s5 .url {
 font-size: 13px;
 color: var(--cyan);
 letter-spacing: 0.15em;
 text-transform: uppercase;
 border-bottom: 1px solid rgba(0,229,255,0.4);
 padding-bottom: 2px;
 }
 .s5 .slide-num {
 position: absolute;
 bottom: 40px; right: 40px;
 font-size: 11px;
 color: rgba(240,237,232,0.15);
 }
 /* label */
 .slide-label {
 font-family: 'Space Mono', monospace;
 font-size: 10px;
 letter-spacing: 0.25em;
 color: rgba(240,237,232,0.25);
 text-transform: uppercase;
 align-self: flex-start;
 margin-bottom: 4px;
 }
</style>
</head>
<body>
<h1>Action Model — Carousel Slides</h1>
<!-- SLIDE 1 -->
<span class="slide-label">Slide 1 — Cover</span>
<div class="slide s1">
 <div class="grid-bg"></div>
 <div class="glow"></div>
 <div class="glow2"></div>
 <div class="content">
 <span class="label">Action Model</span>
 <h2>LLM vs LAM<br><span>What's the</span><br>Difference?</h2>
 <p class="sub">Not all AI is the same.<br>One talks. One acts.</p>
 </div>
 <div class="corner">actionmodel.com</div>
 <div class="slide-num">01 / 05</div>
</div>
<!-- SLIDE 2 -->
<span class="slide-label">Slide 2 — LLM</span>
<div class="slide s2">
 <div class="stripe"></div>
 <div class="noise"></div>
 <div class="big-label">LLM</div>
 <div class="content">
 <div class="tag">// Large Language Model</div>
 <h2>Built to Talk</h2>
 <div class="rows">
 <div class="row">
 <div class="dot"></div>
 <span class="row-label">Job</span>
 <span class="row-val">Generate & understand text</span>
 </div>
 <div class="row">
 <div class="dot"></div>
 <span class="row-label">Examples</span>
 <span class="row-val">ChatGPT, Gemini, Claude</span>
 </div>
 <div class="row">
 <div class="dot"></div>
 <span class="row-label">Trained on</span>
 <span class="row-val">Books, articles, websites</span>
 </div>
 <div class="row">
 <div class="dot"></div>
 <span class="row-label">Output</span>
 <span class="row-val">Text</span>
 </div>
 </div>
 </div>
 <div class="limit-box">⚠ Cannot interact with GUIs or perform real actions</div>
 <div class="slide-num">02 / 05</div>
</div>
<!-- SLIDE 3 -->
<span class="slide-label">Slide 3 — LAM</span>
<div class="slide s3">
 <div class="stripe"></div>
 <div class="big-label">LAM</div>
 <div class="glow"></div>
 <div class="content">
 <div class="tag">// Large Action Model</div>
 <h2>Built to Act</h2>
 <div class="rows">
 <div class="row">
 <div class="dot"></div>
 <span class="row-label">Job</span>
 <span class="row-val">Perform real actions on interfaces</span>
 </div>
 <div class="row">
 <div class="dot"></div>
 <span class="row-label">Example</span>
 <span class="row-val">Action Model</span>
 </div>
 <div class="row">
 <div class="dot"></div>
 <span class="row-label">Trained on</span>
 <span class="row-val">Clicks, scrolls, keystrokes, screenshots — real human browser interactions</span>
 </div>
 </div>
 </div>
 <div class="highlight-box">⚡ This data doesn't exist on the internet — it must be intentionally collected from real users</div>
 <div class="slide-num">03 / 05</div>
</div>
<!-- SLIDE 4 -->
<span class="slide-label">Slide 4 — Comparison</span>
<div class="slide s4">
 <div class="scanlines"></div>
 <div class="content">
 <div class="tag">// Side by Side</div>
 <h2>"Deploy a<br>smart contract"</h2>
 <div class="block llm">
 <div class="block-tag">LLM response</div>
 <div class="block-text">"Here's how to deploy a smart contract: First, open your browser..."</div>
 </div>
 <div class="block lam">
 <div class="block-tag">LAM response</div>
 <div class="block-text">Opens browser → Connects wallet → Clicks deploy → Done.</div>
 </div>
 <div class="verdict">The difference? LLM reads the instructions. LAM executes them.</div>
 </div>
 <div class="slide-num">04 / 05</div>
</div>
<!-- SLIDE 5 -->
<span class="slide-label">Slide 5 — CTA</span>
<div class="slide s5">
 <div class="bg-lines"></div>
 <div class="center-glow"></div>
 <div class="ring ring1"></div>
 <div class="ring ring2"></div>
 <div class="content">
 <div class="eyebrow">Action Model</div>
 <h2>AI That<br><span>Actually Works</span></h2>
 <p class="desc">Trained by the community.<br>Owned by the community.</p>
 <div class="pills">
 <span class="pill">Train it</span>
 <span class="pill">Own it</span>
 <span class="pill">Earn from it</span>
 </div>
 <span class="url">actionmodel.com</span>
 </div>
 <div class="slide-num">05 / 05</div>
</div>
</body>
</html>