mirror of
https://github.com/mudler/LocalAI.git
synced 2026-07-09 07:48:22 -04:00
7e59a5c7c5
* docs: add 'how LocalAI works' architecture diagram Add a blueprint-style architecture diagram: clients -> small core (API, router, WebUI, agents) -> gRPC -> backend processes pulled on demand as OCI images. Place it on the overview page and replace the stale external architecture image on the reference page. Assisted-by: Claude:claude-opus-4-8 [Claude Code] Signed-off-by: Ettore Di Giacinto <mudler@localai.io> * docs: add blueprint diagrams across feature, distributed & getting-started docs Add 24 architecture/flow/comparison diagrams (PNG + HTML source) under docs/static/images/diagrams/, wired into their docs pages, from an impact-vs-effort audit of the docs. Broaden the API surface on the overview architecture diagram (OpenAI, Anthropic, ElevenLabs, Ollama, and LocalAI's own API) and move the gRPC boundary label clear of the arrows. Pages: distributed mode (architecture, scheduling, ds4 layer-split), distributed inferencing, MLX, realtime, quantization, MCP, agents, mitm & cloud proxy, middleware, reverse-proxy TLS, VRAM, voice & face recognition, reranker, function calling, fine-tuning (recipe + jobs), diarization, audio transform, quickstart, model resolution. Assisted-by: Claude:claude-opus-4-8 [Claude Code] Signed-off-by: Ettore Di Giacinto <mudler@localai.io> * docs: add composable-core diagram to README hero Commit the composable-core card (small core + on-demand backend tiles) alongside the other diagrams and reference it from the README hero via a repo-relative path, so it renders on GitHub. Assisted-by: Claude:claude-opus-4-8 [Claude Code] Signed-off-by: Ettore Di Giacinto <mudler@localai.io> * docs: fix composable-core connectors/badge and federated-vs-worker layout - composable-core: thicken the plug-in connectors so they read clearly, and widen the SEPARATE IMAGE badge so its text no longer overflows the box. - federated-vs-worker: shorten the WHOLE/SPLIT REQUEST pills to fit, and replace the tangled node-to-node activation arrows with a clean fan-out (request split across all sharded nodes), mirroring the federated panel. Assisted-by: Claude:claude-opus-4-8 [Claude Code] Signed-off-by: Ettore Di Giacinto <mudler@localai.io> --------- Signed-off-by: Ettore Di Giacinto <mudler@localai.io> Co-authored-by: Ettore Di Giacinto <mudler@localai.io>
198 lines
9.8 KiB
HTML
198 lines
9.8 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,600;12..96,700;12..96,800&family=Archivo:wght@500;600;700&display=swap" rel="stylesheet">
|
|
<style>
|
|
:root{
|
|
--paper:#F3E8D2; --paper2:#ECDFC2; --ink:#211C14; --ink-soft:#5A5142;
|
|
--rust:#B43A2C; --rust-deep:#8F2C20; --cold:#3F6E73; --hi:#E7D6AE; --dim:#A99F88;
|
|
}
|
|
*{box-sizing:border-box;margin:0;padding:0}
|
|
html,body{width:1600px;height:900px}
|
|
body{
|
|
background:var(--paper);color:var(--ink);font-family:"Archivo",sans-serif;
|
|
position:relative;overflow:hidden;
|
|
background-image:
|
|
linear-gradient(var(--paper2) 1px,transparent 1px),
|
|
linear-gradient(90deg,var(--paper2) 1px,transparent 1px);
|
|
background-size:40px 40px;
|
|
}
|
|
.frame{position:absolute;inset:26px;border:3px solid var(--ink);}
|
|
.wrap{position:absolute;inset:26px;padding:30px 56px 26px;display:flex;flex-direction:column}
|
|
header{display:flex;align-items:flex-end;justify-content:space-between;gap:30px}
|
|
.eyebrow{font-weight:700;letter-spacing:.22em;text-transform:uppercase;font-size:17px;color:var(--rust-deep)}
|
|
.eyebrow b{color:var(--ink)}
|
|
h1{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:50px;line-height:.98;letter-spacing:-.015em;margin-top:6px}
|
|
h1 em{font-style:normal;color:var(--rust)}
|
|
.stamp{border:3px solid var(--ink);padding:10px 16px 8px;transform:rotate(3deg);text-align:center;background:var(--paper);box-shadow:6px 6px 0 var(--ink);flex:none}
|
|
.stamp .k{font-family:"Bricolage Grotesque";font-weight:800;font-size:21px;letter-spacing:.04em;line-height:1.05}
|
|
.stamp .s{font-weight:700;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft);margin-top:5px}
|
|
.stage{flex:1;margin-top:8px}
|
|
svg{width:100%;height:100%;overflow:visible}
|
|
footer{display:flex;align-items:center;justify-content:space-between;margin-top:6px;gap:24px}
|
|
.note{font-weight:600;font-size:18px;color:var(--ink-soft);line-height:1.3;max-width:1080px}
|
|
.note b{color:var(--ink)}
|
|
.url{font-family:"Bricolage Grotesque";font-weight:800;font-size:22px;color:var(--rust-deep);letter-spacing:.01em;flex:none}
|
|
.url span{color:var(--ink)}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="frame"></div>
|
|
<div class="wrap">
|
|
<header>
|
|
<div>
|
|
<div class="eyebrow">LocalAI <b>·</b> VRAM</div>
|
|
<h1>Load, evict, <em>reuse</em></h1>
|
|
</div>
|
|
<div class="stamp">
|
|
<div class="k">LRU</div>
|
|
<div class="s">evict</div>
|
|
</div>
|
|
</header>
|
|
<div class="stage"><svg viewBox="0 0 1480 560" id="svg"></svg></div>
|
|
<footer>
|
|
<div class="note">Least-recently-used eviction keeps the hottest models warm within your VRAM budget.</div>
|
|
<div class="url">localai.io<span>/advanced/vram-management</span></div>
|
|
</footer>
|
|
</div>
|
|
<script>
|
|
const INK="#211C14", PAPER="#F3E8D2", PAPER2="#ECDFC2", HI="#E7D6AE", SOFT="#5A5142", RUST="#B43A2C", RUSTD="#8F2C20", COLD="#3F6E73", DIM="#A99F88";
|
|
function el(t,a,x){const e=document.createElementNS("http://www.w3.org/2000/svg",t);for(const k in a)e.setAttribute(k,a[k]);if(x!=null)e.textContent=x;return e;}
|
|
const svg=document.getElementById("svg");
|
|
function shadowRect(x,y,w,h,fill,stroke,sw,dash){
|
|
svg.appendChild(el("rect",{x:x+7,y:y+7,width:w,height:h,fill:INK}));
|
|
svg.appendChild(el("rect",{x,y,width:w,height:h,fill,stroke:stroke||INK,"stroke-width":sw||3.5,"stroke-dasharray":dash||"none"}));
|
|
}
|
|
function txt(x,y,s,o){o=o||{};svg.appendChild(el("text",{x,y,"font-family":o.f||"Archivo","font-weight":o.w||700,"font-size":o.sz||15,"letter-spacing":o.ls||"0","text-anchor":o.a||"start",fill:o.fill||INK},s));}
|
|
function arrow(x1,y1,x2,y2,color,dash){
|
|
const mx=(x1+x2)/2;
|
|
svg.appendChild(el("path",{d:`M ${x1} ${y1} C ${mx} ${y1}, ${mx} ${y2}, ${x2-11} ${y2}`,fill:"none",stroke:color,"stroke-width":3.5,"stroke-linecap":"round","stroke-dasharray":dash||"none"}));
|
|
const a=7;
|
|
svg.appendChild(el("path",{d:`M ${x2-11} ${y2} l -${a+4} -${a} M ${x2-11} ${y2} l -${a+4} ${a}`,fill:"none",stroke:color,"stroke-width":3.5,"stroke-linecap":"round"}));
|
|
}
|
|
// horizontal flat arrow between timeline steps
|
|
function flowArrow(x1,x2,y,color){
|
|
svg.appendChild(el("path",{d:`M ${x1} ${y} L ${x2-11} ${y}`,fill:"none",stroke:color,"stroke-width":3.5,"stroke-linecap":"round"}));
|
|
const a=7;
|
|
svg.appendChild(el("path",{d:`M ${x2-11} ${y} l -${a+4} -${a} M ${x2-11} ${y} l -${a+4} ${a}`,fill:"none",stroke:color,"stroke-width":3.5,"stroke-linecap":"round"}));
|
|
}
|
|
|
|
// a 2-slot VRAM stack drawn at (x,y), slot[i] = {n} or null. evict highlights a slot in rust.
|
|
function vramStack(x,y,slots,opt){
|
|
opt=opt||{};
|
|
const sw=160, slotH=46, gap=10, padTop=8;
|
|
const h=padTop*2 + slotH*2 + gap;
|
|
// outer budget box
|
|
shadowRect(x,y,sw,h,PAPER,INK,3.5);
|
|
for(let i=0;i<2;i++){
|
|
const sy=y+padTop+i*(slotH+gap);
|
|
const filled=slots[i];
|
|
const evicting = opt.evict===i;
|
|
const fresh = opt.fresh===i;
|
|
let fill = filled ? (evicting?RUST:(fresh?COLD:HI)) : PAPER2;
|
|
svg.appendChild(el("rect",{x:x+8,y:sy,width:sw-16,height:slotH,fill,stroke:INK,"stroke-width":2.5,"stroke-dasharray":filled?"none":"3 6"}));
|
|
if(filled){
|
|
const lab=(evicting||fresh)?PAPER:INK;
|
|
txt(x+sw/2,sy+30,slots[i],{f:"Bricolage Grotesque",w:800,sz:24,a:"middle",fill:lab});
|
|
} else {
|
|
txt(x+sw/2,sy+30,"free",{w:700,sz:14,a:"middle",fill:DIM});
|
|
}
|
|
}
|
|
return {w:sw,h:h};
|
|
}
|
|
|
|
// ===================== LEFT PANEL =====================
|
|
const LX=20, LY=18, LW=700, LH=524;
|
|
shadowRect(LX,LY,LW,LH,PAPER,INK,4);
|
|
svg.appendChild(el("rect",{x:LX,y:LY,width:LW,height:58,fill:RUST}));
|
|
svg.appendChild(el("line",{x1:LX,y1:LY+58,x2:LX+LW,y2:LY+58,stroke:INK,"stroke-width":4}));
|
|
txt(LX+24,LY+38,"LRU eviction",{f:"Bricolage Grotesque",w:800,sz:27,fill:PAPER});
|
|
txt(LX+LW-24,LY+37,"max = 2 slots",{w:700,sz:15,ls:".04em",a:"end",fill:"#F1D9C8"});
|
|
|
|
// four timeline steps, each a VRAM stack + caption
|
|
const stackY=LY+130;
|
|
const sx=[LX+30, LX+205, LX+380, LX+555];
|
|
const steps=[
|
|
{slots:["A",null], cap:["load A","slot 1 filled"]},
|
|
{slots:["A","B"], cap:["load B","both full"]},
|
|
{slots:["C","B"], evict:0, cap:["request C","evict LRU A → C"]},
|
|
{slots:["C","B"], fresh:1, cap:["request B","refresh B"]},
|
|
];
|
|
steps.forEach((st,i)=>{
|
|
vramStack(sx[i],stackY,st.slots,{evict:st.evict,fresh:st.fresh});
|
|
});
|
|
// connectors between stacks
|
|
for(let i=0;i<3;i++){
|
|
flowArrow(sx[i]+160, sx[i+1], stackY+62, i===2?COLD:INK);
|
|
}
|
|
// captions under each
|
|
steps.forEach((st,i)=>{
|
|
txt(sx[i]+80, stackY+158, st.cap[0], {f:"Bricolage Grotesque",w:800,sz:18,a:"middle"});
|
|
txt(sx[i]+80, stackY+182, st.cap[1], {w:700,sz:13,a:"middle",fill:SOFT});
|
|
});
|
|
// time axis
|
|
txt(LX+30, stackY+232, "TIME",{w:700,sz:12,ls:".2em",fill:SOFT});
|
|
svg.appendChild(el("line",{x1:LX+90,y1:stackY+227,x2:LX+LW-30,y2:stackY+227,stroke:DIM,"stroke-width":2.5,"stroke-dasharray":"2 7"}));
|
|
// legend
|
|
const lgY=stackY+268;
|
|
function chip(cx,fill,dash){svg.appendChild(el("rect",{x:cx,y:lgY-13,width:20,height:18,fill,stroke:INK,"stroke-width":2,"stroke-dasharray":dash||"none"}));}
|
|
chip(LX+30,HI); txt(LX+58,lgY+2,"resident",{w:700,sz:13,fill:SOFT});
|
|
chip(LX+170,RUST); txt(LX+198,lgY+2,"evicted (LRU)",{w:700,sz:13,fill:SOFT});
|
|
chip(LX+330,COLD); txt(LX+358,lgY+2,"refreshed",{w:700,sz:13,fill:SOFT});
|
|
chip(LX+470,PAPER2,"3 6"); txt(LX+498,lgY+2,"free slot",{w:700,sz:13,fill:SOFT});
|
|
|
|
// ===================== RIGHT PANEL =====================
|
|
const RX=760, RY=18, RW=700, RH=524;
|
|
shadowRect(RX,RY,RW,RH,PAPER,INK,4);
|
|
svg.appendChild(el("rect",{x:RX,y:RY,width:RW,height:58,fill:COLD}));
|
|
svg.appendChild(el("line",{x1:RX,y1:RY+58,x2:RX+RW,y2:RY+58,stroke:INK,"stroke-width":4}));
|
|
txt(RX+24,RY+38,"Concurrency group anti-affinity",{f:"Bricolage Grotesque",w:800,sz:25,fill:PAPER});
|
|
|
|
// two GPU states: before / after
|
|
function gpuBox(x,y,w,h,title){
|
|
shadowRect(x,y,w,h,PAPER,INK,3.5);
|
|
svg.appendChild(el("rect",{x:x,y:y,width:w,height:34,fill:HI}));
|
|
svg.appendChild(el("line",{x1:x,y1:y+34,x2:x+w,y2:y+34,stroke:INK,"stroke-width":2.5}));
|
|
txt(x+14,y+24,title,{f:"Bricolage Grotesque",w:800,sz:17});
|
|
}
|
|
// model slot inside gpu
|
|
function modelSlot(x,y,w,name,grp,state){
|
|
// state: keep | evict | new
|
|
let fill = state==="evict"?RUST : state==="new"?COLD : HI;
|
|
let lab = (state==="evict"||state==="new")?PAPER:INK;
|
|
shadowRect(x,y,w,52,fill,INK,2.5);
|
|
txt(x+16,y+25,name,{f:"Bricolage Grotesque",w:800,sz:19,fill:lab});
|
|
txt(x+16,y+44,grp,{w:700,sz:12,fill:(state==="evict"||state==="new")?"#F1D9C8":SOFT});
|
|
}
|
|
|
|
const gpW=300, gpH=300, gpY=RY+118;
|
|
const gpBX=RX+30, gpAX=RX+RW-30-gpW;
|
|
gpuBox(gpBX,gpY,gpW,gpH,"before");
|
|
gpuBox(gpAX,gpY,gpW,gpH,"loading 120b-b");
|
|
|
|
// before: zed-predict + 120b-a coexist
|
|
modelSlot(gpBX+18,gpY+56,gpW-36,"zed-predict","group: tools","keep");
|
|
modelSlot(gpBX+18,gpY+128,gpW-36,"120b-a","group: chat","keep");
|
|
txt(gpBX+gpW/2,gpY+232,"different groups",{w:700,sz:14,a:"middle",fill:SOFT});
|
|
txt(gpBX+gpW/2,gpY+256,"→ both stay resident",{f:"Bricolage Grotesque",w:700,sz:17,a:"middle"});
|
|
|
|
// after: 120b-b evicts 120b-a, zed-predict stays
|
|
modelSlot(gpAX+18,gpY+56,gpW-36,"zed-predict","group: tools · kept","keep");
|
|
modelSlot(gpAX+18,gpY+128,gpW-36,"120b-b","group: chat · loaded","new");
|
|
txt(gpAX+gpW/2,gpY+232,"same group as 120b-a",{w:700,sz:14,a:"middle",fill:SOFT});
|
|
txt(gpAX+gpW/2,gpY+256,"→ 120b-a evicted",{f:"Bricolage Grotesque",w:700,sz:17,a:"middle",fill:RUSTD});
|
|
|
|
// arrow between the two gpu states
|
|
flowArrow(gpBX+gpW, gpAX, gpY+gpH/2, COLD);
|
|
|
|
// caption strip at bottom of right panel
|
|
const csY=RY+RH-58;
|
|
svg.appendChild(el("line",{x1:RX+24,y1:csY-18,x2:RX+RW-24,y2:csY-18,stroke:DIM,"stroke-width":2,"stroke-dasharray":"2 7"}));
|
|
txt(RX+RW/2, csY+6, "anti-affinity evicts only within the same concurrency group", {w:700,sz:14,a:"middle",fill:SOFT});
|
|
</script>
|
|
</body>
|
|
</html>
|