From c6be73df01f7f620ec96108e2479cc32fca326ab Mon Sep 17 00:00:00 2001 From: Henilll Date: Sat, 19 Sep 2026 15:45:10 +0530 Subject: [PATCH] feat: add interactive cost calculator to landing page (#104) --- opensource/dynavec/index.html | 30 +++++++++++- opensource/dynavec/script.js | Bin 3805 -> 6741 bytes opensource/dynavec/styles.css | 90 ++++++++++++++++++++++++++++++++++ 3 files changed, 119 insertions(+), 1 deletion(-) diff --git a/opensource/dynavec/index.html b/opensource/dynavec/index.html index 6f0d323..8ec69f0 100644 --- a/opensource/dynavec/index.html +++ b/opensource/dynavec/index.html @@ -292,7 +292,35 @@

1536-dim (e.g. OpenAI text-embedding-3-small -

+ + +

+

Estimate your own cost

+
+ + + + +
+
+ Estimated: $0.00 / mo +
+
+
+ +

Cost is computed by the repository's transparent cost model from public list prices — order-of-magnitude, verify before quoting. Recall and latency figures in the repo are representative until a live AWS run replaces them. Reproduce everything with diff --git a/opensource/dynavec/script.js b/opensource/dynavec/script.js index f969057b2b64a5cd48a337fa41d0765d35df7747..410ab0e9e9bcc181d163cd0cf5119e4fa0f3d87d 100644 GIT binary patch literal 6741 zcmbVR>u%dP7Vhsp1xGW0<;0eqwzF8INd`%qc7jPS+hnI0Btalcw9ScbrKqHtI>0`} zKH)yeeutzeSy9^V7HB1t=Nuk>=dMmRSbUp>*F0iLn8hMnu>bt)-z>`+|E##o!i2@V z;91PGNbqt*J4%Mp6(|F?F?sCIt1MC?&zL`CUmi2&RV8Pok|I*x^T$}Y4ki0=`2HQ+ zWnPrWe4fivg;G^TIk9IO!pR03;}4icbal(16`SQU=8{2r8Oc0J3;~WcVu@sz#d%bv zJX67ftHXrT>%r|&?0eYuhR;Fkbj-68EywE0n3yyF2ha_f$3^AB%B}VKE zD{zRo=Gy?Z;_OaKsrP;Sg1{PWU~i}fkm68L>kbIe`jiZQ~OvwDcj*$sGN@;CpAo)+g!Smz(z*q-yQIw$ zHDu;_*LM8`7GbZ2`n8&&M8Nf;yvkH76S`c5e3ypm1T>}Z@*KH*#`bpE))c{J(>*Os z%nH){EAg4f4bhbS!lrDSZ4KEb^R8?bF?E8SAme2Vh^LsRyg%m(Db`ymRg~M4Nmz(r zA=I*hx$<-(d6AbB4}z!^4)txj=}wX-Sn)E*uW-B!{w(thxp$joRg#b^^s-WXH;%1~ z8ZA)@EgeWA)o!O~GQMJtH^F(AEhLxe><3yyWGVwM`IQkrh8pDbt zjQA1>8@_-gb{J_8Bs^QFB^EX}8*PlhXbD;( zIujSQ9Fu(XQREO53`7Qxw`*-J5K&e?az1pfEpl(*Q2<%yfj1Z$2{7D75 zpPRj-Y{5(A*q%)5tvH@_Wj1`+{7A!A3C1@fNieXZu?f})KJYMJ+n>7qyXG!$4o~-A z?w{^o9{h27c!DeaJe@YXua1sS4?pZ593Q&9; zgG+p8AT3c%mzcDj*7UnZ-DH2mdT@(tK@ac)|7S)QLmNa*w zOyfuELW~cQ6n`DxK4{i8Yq_7bs)4%kJ~BmvU~{X6;@-8KcalmSjZAy4d-gS1U3YHZ z5c0G$KaA6Tc^&U}m$O;;i?uU84m`ECyev%!Z#RaoW3f#|hPovhZH+z(3=#-wA~EPT zG!!UEOS9&v2E`sK1Kl=rc=phs9f?a#qHo+#oW48VKW^QH>YmYAzgeHzB;hvCVBMW$ z-q%Fhq+vQ97yI*6{qy8yJ(p3~NX&6D+QnV=CREEn|MW42ZL+sjI^!}pe1CFu{O&C| zB8E4L7d*(`b))eUH5yioo8z9K4%qI;9bOffWcUkL3_4%6>LA^dDxW zqh?-*NrhG!-J;EfHYkvizEc*m*TZtUvHqPhKNVk**$K1n6nS%BWGeycQj736UzGok z^zNeW>%gmAg$dwVpB1fVkrIJ+W<9sVThbiOT1!ot-{>~jh4h(s@|68<3K5z;U6}Dj zM@zaF?iWqStnukMzt5$YAL22Qf1k;$uW`N9so>>7SHEtG=w~w4t`BlNX1Sk5CyIL< zdet$wLE`K7(lZb~nA3>a?&io4&Iq01lfH(yJs0YOomgDESpY$Jc?lujo}LkOuP)D~ z?Ka(PP=2uPAq5jVb`}i-GANd#n delta 14 Vcmca=a#wc4bw0LQO$|+JE&wi41ls@r diff --git a/opensource/dynavec/styles.css b/opensource/dynavec/styles.css index 1774496..44cea14 100644 --- a/opensource/dynavec/styles.css +++ b/opensource/dynavec/styles.css @@ -212,6 +212,96 @@ a { color: inherit; } .note { font-size: 13.5px; color: var(--muted); margin-top: 18px; max-width: 74ch; } .note code { font-family: var(--mono); color: var(--accent-ink); } +/* ---------- cost calculator ---------- */ +.calc { + margin: 28px 0; + border: 1px solid var(--line); + border-radius: 2px; + background: var(--surface); + padding: 26px 28px; + transition: box-shadow .16s ease; +} +.calc:hover { box-shadow: var(--shadow); } +.calc__grid { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 16px; + margin-bottom: 22px; +} +.calc__field { + display: flex; + flex-direction: column; + gap: 7px; + font-size: 12.5px; + font-weight: 500; + letter-spacing: .04em; + text-transform: uppercase; + color: var(--muted); + font-family: var(--mono); +} +.calc__field input { + font-family: var(--mono); + font-size: 14.5px; + font-weight: 500; + padding: 10px 12px; + border: 1px solid var(--line); + border-radius: 2px; + background: #faf6f1; + color: var(--fg); + width: 100%; + transition: border-color .12s ease; +} +.calc__field input:focus { + outline: none; + border-color: var(--accent); + background: #fff; +} +.calc__result { + border-top: 1px solid var(--line); + padding-top: 18px; + display: flex; + flex-wrap: wrap; + align-items: baseline; + justify-content: space-between; + gap: 16px; +} +.calc__total { + font-size: 15px; + color: var(--muted); +} +.calc__total strong { + font-family: var(--mono); + font-size: 24px; + color: var(--accent-ink); + font-weight: 700; + margin-left: 6px; +} +.calc__breakdown { + flex: 1 1 100%; + margin-top: 6px; + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 6px 20px; +} +.calc__row { + display: flex; + justify-content: space-between; + gap: 10px; + font-size: 13px; + font-family: var(--mono); + color: var(--muted); + padding: 6px 0; + border-bottom: 1px solid var(--line); +} +@media (max-width: 860px) { + .calc__grid { grid-template-columns: repeat(2, 1fr); } + .calc__breakdown { grid-template-columns: 1fr; } +} +@media (max-width: 520px) { + .calc { padding: 20px; } + .calc__grid { grid-template-columns: 1fr; } +} + /* ---------- tabs / code ---------- */ .tabs { border: 1px solid var(--line-strong); background: var(--surface); box-shadow: var(--shadow); } .tabs__list { display: flex; flex-wrap: wrap; border-bottom: 1px solid var(--line-strong); background: #faf6f1; }