will.anderson
2553a6b7ac
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.
114 lines
8.0 KiB
EmacsLisp
114 lines
8.0 KiB
EmacsLisp
// components/environmental.el - Environmental impact section.
|
|
//
|
|
// The honest case for why local-first AI has a lower footprint than cloud AI.
|
|
// 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 {
|
|
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")
|
|
)
|
|
|
|
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.")
|
|
)
|
|
|
|
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)
|
|
)
|
|
|
|
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."
|
|
)
|
|
)
|
|
|
|
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."
|
|
)
|
|
)
|
|
|
|
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."
|
|
)
|
|
)
|
|
|
|
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."
|
|
)
|
|
)
|
|
|
|
let right_col: String = el_div(
|
|
"style=\"display:flex;flex-direction:column;gap:1.5rem;padding-top:1rem\"",
|
|
card1 + card2 + card3 + honest
|
|
)
|
|
|
|
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
|
|
)
|
|
|
|
let css: String = "@media (max-width: 768px) {
|
|
.env-grid { grid-template-columns: 1fr !important; gap: 2rem !important; }
|
|
}"
|
|
|
|
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>"
|
|
)
|
|
}
|