LocalAI/website/layouts/engines/list.html

{{ define "main" }}
{{ $data := .Site.Data.engines }}
{{ $cats := $data.categories }}
{{ $engines := $data.engines }}
<main id="top">

<!-- HEAD -->
<section class="hero navy">
  <div class="shell">
    <p class="kicker fd" style="margin-top:0">Engines we build</p>
    <h1 class="eng-h1"><u><b>Eighteen engines,</b></u><u><b><s>written from scratch.</s></b></u></h1>
    <div class="bars" aria-hidden="true"><i></i><i></i><i></i><i></i></div>
    <p class="lede fd mt2">Most LocalAI backends wrap somebody else's engine. These were written from scratch, each one because the thing we needed was a multi-gigabyte Python install, or closed, or nobody had built it yet. What ships instead is a binary and a GGUF file, checked against the reference implementation in CI, running on the machine you already own.</p>
    <div class="acts fd">
      <a class="btn" href="/#start">Install LocalAI <span>&#8594;</span></a>
      <a class="btn btn--o" href="/docs/features/backends/">How backends work</a>
    </div>
    <div class="figures fd">
      <div><b class="tnum" data-count="{{ len $engines }}">0</b><span>Engines</span></div>
      <div><b class="tnum" data-count="{{ len $cats }}">0</b><span>Modalities</span></div>
      <div><b class="tnum" data-count="0">0</b><span>Python at inference</span></div>
      <div><b class="tnum" data-count="0" data-text="MIT">0</b><span>Licence</span></div>
    </div>
  </div>
</section>

<!-- CATALOGUE -->
<section class="navy" id="catalogue">
  <div class="shell">

    <div class="engf rv" role="group" aria-label="Filter engines by modality">
      <button type="button" class="engf__c" data-cat="all" aria-pressed="true">All <b>{{ len $engines }}</b></button>
      {{ range $cats }}
      {{ $n := len (where $engines "category" .id) }}
      {{ if gt $n 0 }}<button type="button" class="engf__c" data-cat="{{ .id }}" aria-pressed="false">{{ .label }} <b>{{ $n }}</b></button>{{ end }}
      {{ end }}
    </div>

    {{ range $cats }}
    {{ $inCat := where $engines "category" .id }}
    {{ if gt (len $inCat) 0 }}
    <div class="engg" data-group="{{ .id }}" id="{{ .id }}">
      <div class="engg__h rv">
        <p class="kicker">{{ .label }}</p>
        <p class="engg__b">{{ .blurb }}</p>
      </div>
      <div class="engs">
        {{ range $inCat }}
        {{ $e := . }}
        <a class="eng rv{{ if $e.featured }} eng--f{{ end }}" data-cat="{{ $e.category }}" href="{{ $e.repo }}">
          {{ with $e.media }}
          <div class="eng__m">
            <video src="{{ . }}"{{ with $e.poster }} poster="{{ . }}"{{ end }} muted loop playsinline preload="none" data-lazy aria-label="{{ $e.name }}: {{ $e.tagline }}"></video>
          </div>
          {{ end }}
          <div class="eng__b">
            <p class="eng__k"><span>{{ $e.language }}</span>{{ with $e.status }}<b class="eng__s">{{ . }}</b>{{ end }}</p>
            <h3 class="eng__n">{{ $e.name }}</h3>
            <p class="eng__t">{{ $e.tagline }}</p>
            {{ with $e.highlights }}
            <ul class="eng__l">{{ range . }}<li>{{ . }}</li>{{ end }}</ul>
            {{ end }}
            {{ with $e.clips }}
            <div class="eng__x">
              {{ range . }}
              <figure>
                <video src="{{ .src }}" muted loop playsinline preload="none" data-lazy aria-label="{{ .caption }}"></video>
                <figcaption>{{ .caption }}</figcaption>
              </figure>
              {{ end }}
            </div>
            {{ end }}
            <span class="eng__go">{{ $e.name }} on GitHub &#8599;</span>
          </div>
        </a>
        {{ end }}
      </div>
    </div>
    {{ end }}
    {{ end }}

    <p class="engn rv" role="status" hidden>Nothing in that modality yet.</p>
  </div>
</section>

<!-- CLOSE -->
<section class="deepbg" id="why">
  <div class="shell">
    <div class="bars rv" aria-hidden="true"><i></i><i></i><i></i><i></i></div>
    <p class="kicker rv">The rule we hold them to</p>
    <h2 class="rv mt1" style="max-width:20ch">We do not ship a port until it matches the original.</h2>
    <p class="lede rv mt2">Every engine here is gated against the framework it replaces, on the same input, on the same machine. That means a transcript identical to the reference, boxes that land on the same pixels, or a waveform inside a stated tolerance. Speed work comes after that, and the numbers on this page come out of each engine's own benchmark suite.</p>
    <div class="acts rv">
      <a class="btn" href="/#start">Install LocalAI &#8594;</a>
      <a class="btn btn--o" href="https://github.com/mudler/LocalAI">LocalAI on GitHub &#8599;</a>
    </div>
  </div>
</section>

</main>

<script>
(function(){
  var chips = [].slice.call(document.querySelectorAll('.engf__c'));
  var cards = [].slice.call(document.querySelectorAll('.eng'));
  var groups = [].slice.call(document.querySelectorAll('.engg'));
  var none = document.querySelector('.engn');
  if (!chips.length) return;
  function apply(cat){
    var shown = 0;
    cards.forEach(function(c){
      var on = (cat === 'all' || c.dataset.cat === cat);
      c.hidden = !on;
      if (on) shown++;
    });
    groups.forEach(function(g){
      g.hidden = !(cat === 'all' || g.dataset.group === cat);
    });
    chips.forEach(function(c){ c.setAttribute('aria-pressed', String(c.dataset.cat === cat)); });
    if (none) none.hidden = shown > 0;
    try { history.replaceState(null, '', cat === 'all' ? location.pathname : location.pathname + '#' + cat); } catch (e) {}
  }
  chips.forEach(function(c){
    c.addEventListener('click', function(){ apply(c.dataset.cat); });
  });
  var start = (location.hash || '').replace('#','');
  if (start && chips.some(function(c){ return c.dataset.cat === start; })) apply(start);
})();
</script>
{{ end }}