Skip to content

Added Favicon to header and corrected package manager list #11

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
EntityDeleter wants to merge 9 commits into
base: master
Choose a base branch
from
Open

Added Favicon to header and corrected package manager list #11

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
ae4bd54
Added Favicon alongside "llama.app" header
EntityDeleter May 30, 2026
70a057b
Fixed LSP errors, formatting, and clarified available package managers
EntityDeleter May 30, 2026
46c1a41
Merge branch 'ggml-org:master' into master
EntityDeleter May 30, 2026
06c6329
Merge branch 'ggml-org:master' into master
EntityDeleter May 30, 2026
f4b70f1
Added Qwen3.5 4B
EntityDeleter May 30, 2026
a031d6a
Improved asthetics by alternating text and other media
EntityDeleter May 30, 2026
24a8adb
Changed inline svg to refer to favicon asset, added banner asset
EntityDeleter May 30, 2026
8a137e3
Widen the page container to prevent issues with the hardware animation
EntityDeleter May 30, 2026
401f36b
Revert widening
EntityDeleter May 30, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
86 changes: 47 additions & 39 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Binary file added src/lib/assets/banner-full.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion src/lib/assets/favicon.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
6 changes: 5 additions & 1 deletion src/lib/components/SiteHeader.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
<script lang="ts">
import { page } from '$app/state';
import { resolve } from '$app/paths';
import favicon from '$lib/assets/favicon.svg';

const stars = $derived(page.data.stars as number | null | undefined);
const formatted = $derived(
Expand All @@ -11,7 +12,10 @@
</script>

<header class="flex items-center justify-between py-6">
<a href={resolve('/')} class="text-foreground text-base">llama.app</a>
<a href={resolve('/')} class="text-foreground text-base">
<img src={favicon} alt="" class="-mt-1 mr-0 inline h-6" />
<span>llama.app</span>
</a>
<a
href="https://github.com/ggml-org/llama.cpp"
target="_blank"
Expand Down
7 changes: 7 additions & 0 deletions src/lib/models.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,13 @@ export const MODELS: Model[] = [
params: '27B params',
description: 'Coding & reasoning. Single-GPU sweet spot.'
},
{
id: 'Qwen/Qwen3.5-4B',
slug: 'Qwen3.5-4B',
name: 'Qwen3.5-4B',
params: '4B params',
description: 'Smaller model for quick chat and simple code.'
},
{
id: 'Qwen/Qwen3.6-35B-A3B',
slug: 'Qwen3.6-35B-A3B',
Expand Down
64 changes: 34 additions & 30 deletions src/routes/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
import { Copy, Check, ArrowUpRight } from '@lucide/svelte';
import { toast } from 'svelte-sonner';
import { resolve } from '$app/paths';
import favicon from '$lib/assets/favicon.svg';
import SiteHeader from '$lib/components/SiteHeader.svelte';
import { MODELS, ORG_AVATARS, repoAuthor } from '$lib/models';

Expand Down Expand Up @@ -67,27 +68,25 @@
<SiteHeader />

<section class="flex flex-col items-center pt-16 pb-12">
<svg
<img
src={favicon}
alt=""
xmlns="http://www.w3.org/2000/svg"
class="mb-10 size-42"
width="256"
height="256"
fill="none"
viewBox="0 0 256 256"
><path
fill="#ff8236"
d="M125.608 88.104c16.876-1.407 31.73 2.988 46.145 11.425h-.088l-11.866 21.095c-15.645-12.041-38.849-13.799-54.494-.879-25.226 20.831-23.467 68.997 15.821 69.261 10.987 0 20.303-5.187 30.323-8.614l5.274 21.006c-8.878 4.131-17.931 8.35-27.687 9.668-88.948 12.129-83.85-116.282-3.428-122.962m18.018 55.374h14.063v12.304h-14.063v14.942h-13.184v-14.942H115.5v-12.304h13.624l1.318-1.319v-14.503h13.184zm48.342-1.319 1.318 1.319h13.624v12.304h-14.942v14.942h-13.184v-14.942h-14.063v-12.304h14.063v-15.822h13.184zM101.263 28.601c3.516-1.23 15.557-4.307 15.206 1.933s-8.702 16.964-10.723 22.765c-3.516 10.195-.264 17.227 4.57 26.104l-.088-.088C96.692 83.36 84.123 90.83 74.631 101.288c-1.758-21.27 2.989-64.25 26.632-72.687m15.116 48.956c2.197-18.897 12.833-46.408 36.828-39.464 1.757 2.637-8.174 13.974-9.757 16.875-4.57 8.613-1.494 13.536 1.934 21.71-9.932-1.495-19.161-.264-29.005.879"
/></svg
>
/>

<div class="bg-foreground/[0.04] w-full max-w-2xl overflow-hidden rounded-xl border border-secondary">
<div
class="bg-foreground/4 border-secondary w-full max-w-2xl overflow-hidden rounded-xl border"
>
<div class="flex items-stretch justify-between">
<code
class="text-foreground/90 block min-w-0 flex-1 overflow-x-auto whitespace-nowrap p-4 font-mono text-[15px]"
class="text-foreground/90 block min-w-0 flex-1 overflow-x-auto p-4 font-mono text-[15px] whitespace-nowrap"
>{installCommand}</code
>
<button
class="text-foreground/70 hover:text-foreground flex shrink-0 cursor-pointer items-center border-l border-secondary px-4"
class="text-foreground/70 hover:text-foreground border-secondary flex shrink-0 cursor-pointer items-center border-l px-4"
aria-label={copied ? 'Copied command' : 'Copy command'}
onclick={handleCopy}
>
Expand All @@ -104,7 +103,7 @@
class="text-foreground/60 mt-2 flex w-full max-w-2xl flex-col items-center justify-center gap-1 text-xs sm:flex-row sm:gap-2"
>
<span>
Prefer Brew or Winget?
Prefer Brew, Nix, MacPorts, or Winget?
<a
href="https://github.com/ggml-org/llama.cpp/blob/master/docs/install.md"
target="_blank"
Expand All @@ -130,6 +129,7 @@
</section>

<section class="grid grid-cols-1 items-center gap-12 pt-12 pb-12 md:grid-cols-2">
<img src="/local-ai.png" alt="AI running on your computer" class="h-auto w-full rounded-md" />
<div class="flex flex-col gap-6">
<h2 class="text-foreground text-2xl font-semibold tracking-tight">
AI that lives on your computer.<br />
Expand All @@ -140,13 +140,13 @@
back.
</p>
</div>
<img src="/local-ai.png" alt="AI running on your computer" class="h-auto w-full rounded-md" />
</section>

<section class="grid grid-cols-1 items-center gap-12 pt-12 pb-24 md:grid-cols-2">
<div class="relative md:order-1 bg-foreground/[0.04] rounded-xl overflow-hidden border border-secondary">
<pre
class="text-foreground/90 overflow-x-auto p-6 font-mono text-[15px]"><code
<div
class="bg-foreground/4 border-secondary relative overflow-hidden rounded-xl border md:order-1"
>
<pre class="text-foreground/90 overflow-x-auto p-6 font-mono text-[15px]"><code
><span class="opacity-50"># 1. Serve a model</span>
llama serve

Expand Down Expand Up @@ -184,29 +184,24 @@ pi</code
</section>

<section class="grid grid-cols-1 items-center gap-12 pt-12 pb-24 md:grid-cols-2">
<div class="flex flex-col gap-6">
<h2 class="text-foreground text-2xl font-semibold tracking-tight">
Optimized for any hardware.
</h2>
<p class="text-foreground text-base leading-relaxed">
From your laptop to a cluster, llama.cpp runs on whatever you have. Same binary, same
models, same hand-tuned kernels for every GPU and CPU.
</p>
</div>
<div class="hardware-slots relative grid h-[17rem] grid-cols-2 gap-3 overflow-hidden sm:grid-cols-3">
<div class="hardware-slots relative grid h-68 grid-cols-2 gap-3 overflow-hidden sm:grid-cols-3">
{#each HARDWARE_REELS as reel, reelIndex (reelIndex)}
<div
class="overflow-hidden {reelIndex === 2 ? 'hidden sm:block' : ''}"
style="--reel-duration: {reel.duration}s; --reel-delay: -{reelIndex * 2}s"
>
<div class="hardware-reel-track flex flex-col">
{#each Array(2) as _, copyIndex (copyIndex)}
{#each Array(2), copyIndex (copyIndex)}
<div class="flex flex-col gap-2 pb-2" aria-hidden={copyIndex === 1}>
{#each reel.items as hw (copyIndex + hw.name)}
<div
class="text-foreground flex min-h-12 items-center gap-2.5 rounded-md bg-foreground/6 px-3 py-2.5 text-sm whitespace-nowrap"
class="text-foreground bg-foreground/6 flex min-h-12 items-center gap-2.5 rounded-md px-3 py-2.5 text-sm whitespace-nowrap"
>
<img src={hw.img} alt="" class="size-7 shrink-0 rounded-md bg-white object-contain p-1" />
<img
src={hw.img}
alt=""
class="size-7 shrink-0 rounded-md bg-white object-contain p-1"
/>
<span>{hw.name}</span>
</div>
{/each}
Expand All @@ -216,6 +211,15 @@ pi</code
</div>
{/each}
</div>
<div class="flex flex-col gap-6">
<h2 class="text-foreground text-2xl font-semibold tracking-tight">
Optimized for any hardware.
</h2>
<p class="text-foreground text-base leading-relaxed">
From your laptop to a cluster, llama.cpp runs on whatever you have. Same binary, same
models, same hand-tuned kernels for every GPU and CPU.
</p>
</div>
</section>

<section class="pb-24">
Expand All @@ -225,7 +229,7 @@ pi</code
{#each MODELS as model (model.slug)}
<a
href={resolve('/models/[model]', { model: model.slug })}
class="group bg-foreground/[0.04] hover:bg-foreground/[0.07] flex items-center gap-2 rounded-xl px-5 py-4 transition-colors"
class="group bg-foreground/4 hover:bg-foreground/[0.07] flex items-center gap-2 rounded-xl px-5 py-4 transition-colors"
>
<img
src={ORG_AVATARS[repoAuthor(model.id)]}
Expand Down
2 changes: 1 addition & 1 deletion src/routes/models/[model]/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -82,7 +82,7 @@

<section class="pb-24">
<div
class="divide-foreground/10 border-foreground/10 bg-foreground/[0.02] w-full divide-y rounded-2xl border"
class="divide-foreground/10 border-foreground/10 bg-foreground/2 w-full divide-y rounded-2xl border"
>
{#each repos as repo (repo.id)}
<div
Expand Down