feat(native-el-ui): convert all component files to el-html vessel API
Dev — Build & local smoke test / build-smoke (pull_request) Failing after 4m48s
Dev — Build & local smoke test / build-smoke (pull_request) Failing after 4m48s
Replaced raw HTML heredoc returns with native el_ function calls across all 21 component files. styles.el intentionally excluded.
This commit is contained in:
+95
-73
@@ -4,88 +4,110 @@
|
||||
// Not greenwashing - a structural argument. The benefit follows from the
|
||||
// architecture; it wasn't engineered as a feature, but it's real.
|
||||
|
||||
extern fn el_section(attrs: String, children: String) -> String
|
||||
extern fn el_div(attrs: String, children: String) -> String
|
||||
extern fn el_span(attrs: String, children: String) -> String
|
||||
extern fn el_h2(attrs: String, text: String) -> String
|
||||
extern fn el_p(attrs: String, children: String) -> String
|
||||
extern fn el_input(type_attr: String, attrs: String) -> String
|
||||
extern fn el_br() -> String
|
||||
extern fn el_script_src(src: String, defer_load: Bool) -> String
|
||||
|
||||
fn environmental() -> String {
|
||||
return <section id="environmental" aria-label="Environmental impact" style="padding:8rem 2.5rem;background:var(--bg)">
|
||||
<div class="container-lg">
|
||||
let label_row: String = el_div(
|
||||
"style=\"display:flex;align-items:center;gap:1.5rem;margin-bottom:2rem\"",
|
||||
el_div("class=\"navy-line-left\" style=\"width:3rem;flex-shrink:0\"", "") +
|
||||
el_span("class=\"label reveal\" style=\"color:var(--navy-85)\"", "Environmental impact")
|
||||
)
|
||||
|
||||
<div style="display:grid;grid-template-columns:1fr 1fr;gap:6rem;align-items:start" class="env-grid">
|
||||
let calculator: String = el_div(
|
||||
"class=\"reveal\" style=\"transition-delay:340ms;background:var(--card);border:1px solid rgba(0,82,160,.18);padding:2rem\"",
|
||||
el_p("style=\"font-family:var(--body);font-size:0.7rem;font-weight:600;letter-spacing:0.18em;text-transform:uppercase;color:var(--navy);margin-bottom:1.25rem\"", "Savings calculator") +
|
||||
el_p("style=\"font-family:var(--body);font-size:0.875rem;color:var(--t2);margin-bottom:1rem\"",
|
||||
"If you spend " +
|
||||
"<strong id=\"calc-spend\" style=\"color:var(--t1)\">$50</strong>" +
|
||||
"/month on AI…"
|
||||
) +
|
||||
el_input("range", "id=\"calc-slider\" min=\"10\" max=\"500\" step=\"10\" value=\"50\" style=\"width:100%;accent-color:var(--navy);margin-bottom:1.5rem\"") +
|
||||
el_div(
|
||||
"style=\"display:flex;align-items:baseline;gap:0.75rem;margin-bottom:0.375rem\"",
|
||||
el_span("id=\"calc-savings\" style=\"font-family:var(--head);font-size:2.5rem;font-weight:600;color:var(--navy)\"", "$240") +
|
||||
el_span("style=\"font-family:var(--body);font-size:0.7rem;font-weight:500;letter-spacing:0.15em;text-transform:uppercase;color:var(--t3)\"", "saved per year")
|
||||
) +
|
||||
el_p("style=\"font-family:var(--body);font-size:0.75rem;color:var(--t3)\"", "Based on estimated token reduction applied to your monthly spend.")
|
||||
)
|
||||
|
||||
<div>
|
||||
<div style="display:flex;align-items:center;gap:1.5rem;margin-bottom:2rem">
|
||||
<div class="navy-line-left" style="width:3rem;flex-shrink:0"></div>
|
||||
<span class="label reveal" style="color:var(--navy-85)">Environmental impact</span>
|
||||
</div>
|
||||
let left_col: String = el_div(
|
||||
"",
|
||||
label_row +
|
||||
el_h2(
|
||||
"class=\"display-lg reveal\" style=\"transition-delay:80ms;margin-bottom:1.5rem\"",
|
||||
"Fewer tokens." + el_br() + el_span("class=\"gold\"", "Same work done.")
|
||||
) +
|
||||
el_p("class=\"reveal\" style=\"transition-delay:160ms;font-family:var(--body);font-weight:300;font-size:1rem;color:var(--t2);line-height:1.8;margin-bottom:1.25rem\"",
|
||||
"Persistent context means shorter, more targeted prompts on every call. Less computation. Lower cost. A smaller footprint. This isn't a setting you toggle - it's what the architecture does by default."
|
||||
) +
|
||||
el_p("class=\"reveal\" style=\"transition-delay:220ms;font-family:var(--body);font-weight:300;font-size:1rem;color:var(--t2);line-height:1.8;margin-bottom:1.25rem\"",
|
||||
"Every time you open ChatGPT and explain who you are again, that's computation that didn't need to happen. With Neuron, that context tax doesn't accumulate. Over months of use, the savings compound into a meaningful reduction in total compute - and a meaningful reduction in what you pay."
|
||||
) +
|
||||
el_p("class=\"reveal\" style=\"transition-delay:280ms;font-family:var(--body);font-weight:300;font-size:1rem;color:var(--t2);line-height:1.8;margin-bottom:2.5rem\"",
|
||||
"This isn't a green marketing claim. It's a consequence of the design. The same architecture that makes Neuron better for you also makes it lighter on the planet."
|
||||
) +
|
||||
calculator +
|
||||
el_script_src("/js/environmental.js", true)
|
||||
)
|
||||
|
||||
<h2 class="display-lg reveal" style="transition-delay:80ms;margin-bottom:1.5rem">
|
||||
Fewer tokens.<br><span class="gold">Same work done.</span>
|
||||
</h2>
|
||||
let card1: String = el_div(
|
||||
"class=\"reveal card-dark\" style=\"transition-delay:100ms;padding:1.75rem 2rem;border-left:3px solid rgba(0,120,84,.40)\"",
|
||||
el_p("style=\"font-family:var(--body);font-size:0.7rem;font-weight:600;letter-spacing:0.18em;text-transform:uppercase;color:rgba(0,120,84,.70);margin-bottom:0.75rem\"", "Local inference - coming") +
|
||||
el_p("style=\"font-family:var(--body);font-weight:400;font-size:0.9375rem;color:var(--t1);margin-bottom:0.5rem\"", "Your GPU, already powered on") +
|
||||
el_p("style=\"font-family:var(--body);font-weight:300;font-size:0.875rem;color:var(--t2);line-height:1.7\"",
|
||||
"The design: when you run inference locally via Ollama, your device's GPU handles it - hardware that's already consuming power. No data center spins up a cluster for your query. No round-trip. No idle servers waiting at scale. This is where we're headed."
|
||||
)
|
||||
)
|
||||
|
||||
<p class="reveal" style="transition-delay:160ms;font-family:var(--body);font-weight:300;font-size:1rem;color:var(--t2);line-height:1.8;margin-bottom:1.25rem">
|
||||
Persistent context means shorter, more targeted prompts on every call. Less computation. Lower cost. A smaller footprint. This isn't a setting you toggle - it's what the architecture does by default.
|
||||
</p>
|
||||
let card2: String = el_div(
|
||||
"class=\"reveal card-dark\" style=\"transition-delay:200ms;padding:1.75rem 2rem;border-left:3px solid rgba(0,120,84,.40)\"",
|
||||
el_p("style=\"font-family:var(--body);font-size:0.7rem;font-weight:600;letter-spacing:0.18em;text-transform:uppercase;color:rgba(0,120,84,.70);margin-bottom:0.75rem\"", "No database server for your data") +
|
||||
el_p("style=\"font-family:var(--body);font-weight:400;font-size:0.9375rem;color:var(--t1);margin-bottom:0.5rem\"", "On-device storage") +
|
||||
el_p("style=\"font-family:var(--body);font-weight:300;font-size:0.875rem;color:var(--t2);line-height:1.7\"",
|
||||
"Your context lives on your device in a purpose-built local storage layer. No cloud database servers running 24/7 to store and serve your conversations. No replication across availability zones. Just your device."
|
||||
)
|
||||
)
|
||||
|
||||
<p class="reveal" style="transition-delay:220ms;font-family:var(--body);font-weight:300;font-size:1rem;color:var(--t2);line-height:1.8;margin-bottom:1.25rem">
|
||||
Every time you open ChatGPT and explain who you are again, that's computation that didn't need to happen. With Neuron, that context tax doesn't accumulate. Over months of use, the savings compound into a meaningful reduction in total compute - and a meaningful reduction in what you pay.
|
||||
</p>
|
||||
let card3: String = el_div(
|
||||
"class=\"reveal card-dark\" style=\"transition-delay:300ms;padding:1.75rem 2rem;border-left:3px solid rgba(0,120,84,.40)\"",
|
||||
el_p("style=\"font-family:var(--body);font-size:0.7rem;font-weight:600;letter-spacing:0.18em;text-transform:uppercase;color:rgba(0,120,84,.70);margin-bottom:0.75rem\"", "Persistent context = less recomputation") +
|
||||
el_p("style=\"font-family:var(--body);font-weight:400;font-size:0.9375rem;color:var(--t1);margin-bottom:0.5rem\"", "No re-explaining. No wasted tokens.") +
|
||||
el_p("style=\"font-family:var(--body);font-weight:300;font-size:0.875rem;color:var(--t2);line-height:1.7\"",
|
||||
"Neuron surfaces exactly what's relevant for each conversation - no re-deriving who you are from long histories. Shorter, more targeted prompts. More with less."
|
||||
)
|
||||
)
|
||||
|
||||
<p class="reveal" style="transition-delay:280ms;font-family:var(--body);font-weight:300;font-size:1rem;color:var(--t2);line-height:1.8;margin-bottom:2.5rem">
|
||||
This isn't a green marketing claim. It's a consequence of the design. The same architecture that makes Neuron better for you also makes it lighter on the planet.
|
||||
</p>
|
||||
let honest: String = el_div(
|
||||
"class=\"reveal\" style=\"transition-delay:400ms;padding:1.25rem 1.75rem;background:rgba(0,0,0,.03);border:1px solid rgba(0,0,0,.07);border-radius:2px\"",
|
||||
el_p("style=\"font-family:var(--body);font-size:0.8125rem;font-weight:300;color:var(--t3);line-height:1.7\"",
|
||||
"<strong style=\"font-weight:500;color:var(--t2)\">The honest picture:</strong>" +
|
||||
" When you use Neuron with BYOK providers (OpenAI, Anthropic, Grok) or Neuron Inference, those queries travel to inference servers - that footprint exists. The savings come from the architecture: persistent memory and local-first design reduce the total computation required to get the same work done."
|
||||
)
|
||||
)
|
||||
|
||||
<div class="reveal" style="transition-delay:340ms;background:var(--card);border:1px solid rgba(0,82,160,.18);padding:2rem">
|
||||
<p style="font-family:var(--body);font-size:0.7rem;font-weight:600;letter-spacing:0.18em;text-transform:uppercase;color:var(--navy);margin-bottom:1.25rem">Savings calculator</p>
|
||||
<p style="font-family:var(--body);font-size:0.875rem;color:var(--t2);margin-bottom:1rem">If you spend <strong id="calc-spend" style="color:var(--t1)">$50</strong>/month on AI…</p>
|
||||
<input type="range" id="calc-slider" min="10" max="500" step="10" value="50" style="width:100%;accent-color:var(--navy);margin-bottom:1.5rem">
|
||||
<div style="display:flex;align-items:baseline;gap:0.75rem;margin-bottom:0.375rem">
|
||||
<span id="calc-savings" style="font-family:var(--head);font-size:2.5rem;font-weight:600;color:var(--navy)">$240</span>
|
||||
<span style="font-family:var(--body);font-size:0.7rem;font-weight:500;letter-spacing:0.15em;text-transform:uppercase;color:var(--t3)">saved per year</span>
|
||||
</div>
|
||||
<p style="font-family:var(--body);font-size:0.75rem;color:var(--t3)">Based on estimated token reduction applied to your monthly spend.</p>
|
||||
</div>
|
||||
let right_col: String = el_div(
|
||||
"style=\"display:flex;flex-direction:column;gap:1.5rem;padding-top:1rem\"",
|
||||
card1 + card2 + card3 + honest
|
||||
)
|
||||
|
||||
<script src="/js/environmental.js" defer></script>
|
||||
</div>
|
||||
let grid: String = el_div(
|
||||
"style=\"display:grid;grid-template-columns:1fr 1fr;gap:6rem;align-items:start\" class=\"env-grid\"",
|
||||
left_col + right_col
|
||||
)
|
||||
|
||||
<div style="display:flex;flex-direction:column;gap:1.5rem;padding-top:1rem">
|
||||
|
||||
<div class="reveal card-dark" style="transition-delay:100ms;padding:1.75rem 2rem;border-left:3px solid rgba(0,120,84,.40)">
|
||||
<p style="font-family:var(--body);font-size:0.7rem;font-weight:600;letter-spacing:0.18em;text-transform:uppercase;color:rgba(0,120,84,.70);margin-bottom:0.75rem">Local inference - coming</p>
|
||||
<p style="font-family:var(--body);font-weight:400;font-size:0.9375rem;color:var(--t1);margin-bottom:0.5rem">Your GPU, already powered on</p>
|
||||
<p style="font-family:var(--body);font-weight:300;font-size:0.875rem;color:var(--t2);line-height:1.7">
|
||||
The design: when you run inference locally via Ollama, your device's GPU handles it - hardware that's already consuming power. No data center spins up a cluster for your query. No round-trip. No idle servers waiting at scale. This is where we're headed.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="reveal card-dark" style="transition-delay:200ms;padding:1.75rem 2rem;border-left:3px solid rgba(0,120,84,.40)">
|
||||
<p style="font-family:var(--body);font-size:0.7rem;font-weight:600;letter-spacing:0.18em;text-transform:uppercase;color:rgba(0,120,84,.70);margin-bottom:0.75rem">No database server for your data</p>
|
||||
<p style="font-family:var(--body);font-weight:400;font-size:0.9375rem;color:var(--t1);margin-bottom:0.5rem">On-device storage</p>
|
||||
<p style="font-family:var(--body);font-weight:300;font-size:0.875rem;color:var(--t2);line-height:1.7">
|
||||
Your context lives on your device in a purpose-built local storage layer. No cloud database servers running 24/7 to store and serve your conversations. No replication across availability zones. Just your device.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="reveal card-dark" style="transition-delay:300ms;padding:1.75rem 2rem;border-left:3px solid rgba(0,120,84,.40)">
|
||||
<p style="font-family:var(--body);font-size:0.7rem;font-weight:600;letter-spacing:0.18em;text-transform:uppercase;color:rgba(0,120,84,.70);margin-bottom:0.75rem">Persistent context = less recomputation</p>
|
||||
<p style="font-family:var(--body);font-weight:400;font-size:0.9375rem;color:var(--t1);margin-bottom:0.5rem">No re-explaining. No wasted tokens.</p>
|
||||
<p style="font-family:var(--body);font-weight:300;font-size:0.875rem;color:var(--t2);line-height:1.7">
|
||||
Neuron surfaces exactly what's relevant for each conversation - no re-deriving who you are from long histories. Shorter, more targeted prompts. More with less.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="reveal" style="transition-delay:400ms;padding:1.25rem 1.75rem;background:rgba(0,0,0,.03);border:1px solid rgba(0,0,0,.07);border-radius:2px">
|
||||
<p style="font-family:var(--body);font-size:0.8125rem;font-weight:300;color:var(--t3);line-height:1.7">
|
||||
<strong style="font-weight:500;color:var(--t2)">The honest picture:</strong> When you use Neuron with BYOK providers (OpenAI, Anthropic, Grok) or Neuron Inference, those queries travel to inference servers - that footprint exists. The savings come from the architecture: persistent memory and local-first design reduce the total computation required to get the same work done.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<style>
|
||||
@media (max-width: 768px) {
|
||||
let css: String = "@media (max-width: 768px) {
|
||||
.env-grid { grid-template-columns: 1fr !important; gap: 2rem !important; }
|
||||
}
|
||||
</style>
|
||||
</section>
|
||||
}"
|
||||
|
||||
el_section(
|
||||
"id=\"environmental\" aria-label=\"Environmental impact\" style=\"padding:8rem 2.5rem;background:var(--bg)\"",
|
||||
el_div("class=\"container-lg\"", grid) + "<style>" + css + "</style>"
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user