MyPhiloEngine / index.html
Fillystudio's picture
Update index.html
c017a1f verified
Raw History Blame Contribute Delete
30.1 kB
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>PhiloEngine — local-first studio for local and API-based language models</title>
<meta name="description" content="Point it at your GPU. It figures out the rest. A local-first desktop studio for language models — hardware-aware context planning, agentic PhiloBots, long-term memory, built-in search, and a unified marketplace." />
<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=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
<style>
:root {
--bg: #0a0c10;
--panel: rgba(20, 24, 34, 0.55);
--panel-solid: #12151d;
--border: rgba(148, 163, 184, 0.14);
--text: #e7eaf0;
--muted: #8b93a3;
--blue: #4f8cff;
--violet: #9b6bff;
--green: #34d399;
--amber: #f5a623;
--font-display: "Space Grotesk", "Inter", sans-serif;
--font-body: "Inter", sans-serif;
--font-mono: "JetBrains Mono", monospace;
--radius: 14px;
}
* { box-sizing: border-box; }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
}
}
html { scroll-behavior: smooth; }
body {
margin: 0;
background: var(--bg);
color: var(--text);
font-family: var(--font-body);
line-height: 1.55;
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
}
.grain {
position: fixed;
inset: 0;
pointer-events: none;
z-index: 1;
opacity: 0.035;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.glow {
position: fixed;
border-radius: 50%;
filter: blur(120px);
z-index: 0;
pointer-events: none;
}
.glow-a {
width: 640px; height: 640px;
top: -220px; left: -160px;
background: radial-gradient(circle, rgba(79,140,255,0.22), transparent 70%);
}
.glow-b {
width: 560px; height: 560px;
top: 30%; right: -220px;
background: radial-gradient(circle, rgba(155,107,255,0.18), transparent 70%);
}
a { color: inherit; text-decoration: none; }
code { font-family: var(--font-mono); }
/* ---------- Nav ---------- */
.nav {
position: sticky;
top: 0;
z-index: 20;
backdrop-filter: blur(14px);
background: rgba(10, 12, 16, 0.72);
border-bottom: 1px solid var(--border);
}
.nav-inner {
max-width: 1120px;
margin: 0 auto;
padding: 16px 24px;
display: flex;
align-items: center;
gap: 32px;
}
.brand {
display: flex;
align-items: center;
gap: 10px;
font-family: var(--font-display);
font-weight: 600;
font-size: 1.05rem;
margin-right: auto;
}
.brand-mark { width: 26px; height: 26px; border-radius: 6px; }
.nav-links { display: flex; gap: 26px; }
.nav-links a { color: var(--muted); font-size: 0.92rem; transition: color 0.15s; white-space: nowrap; }
.nav-links a:hover { color: var(--text); }
.btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 18px;
border-radius: 999px;
font-size: 0.92rem;
font-weight: 500;
border: 1px solid transparent;
transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary {
background: linear-gradient(135deg, var(--blue), var(--violet));
color: #fff;
}
.btn-outline {
border-color: var(--border);
color: var(--text);
}
.btn-outline:hover { border-color: var(--blue); }
.btn-ghost {
border-color: var(--border);
color: var(--text);
font-size: 0.88rem;
}
.gh-icon { display: inline-block; vertical-align: -2px; }
/* ---------- Hero ---------- */
.hero {
max-width: 1120px;
margin: 0 auto;
padding: 88px 24px 60px;
display: grid;
grid-template-columns: 1.05fr 1fr;
gap: 56px;
align-items: center;
position: relative;
z-index: 2;
}
.eyebrow {
font-family: var(--font-mono);
font-size: 0.78rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--blue);
margin: 0 0 14px;
}
h1 {
font-family: var(--font-display);
font-size: clamp(2.1rem, 4vw, 3.1rem);
line-height: 1.08;
margin: 0 0 20px;
letter-spacing: -0.01em;
}
.lede {
color: var(--muted);
font-size: 1.08rem;
max-width: 48ch;
margin: 0 0 32px;
}
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }
.hero-actions.center { justify-content: center; }
.hero-meta {
display: flex;
gap: 22px;
margin-top: 28px;
font-size: 0.85rem;
color: var(--muted);
flex-wrap: wrap;
}
.hero-meta span { display: flex; align-items: center; gap: 8px; }
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.dot-go { background: var(--blue); }
.dot-flutter { background: var(--violet); }
.dot-lic { background: var(--green); }
.dot-alpha { background: var(--amber); }
/* ---------- Terminal ---------- */
.terminal {
background: var(--panel);
border: 1px solid var(--border);
border-radius: var(--radius);
backdrop-filter: blur(18px);
box-shadow: 0 30px 80px -30px rgba(79, 140, 255, 0.25);
overflow: hidden;
}
.terminal-bar {
display: flex;
align-items: center;
gap: 8px;
padding: 11px 14px;
border-bottom: 1px solid var(--border);
background: rgba(255,255,255,0.02);
}
.tdot { width: 10px; height: 10px; border-radius: 50%; }
.tdot.r { background: #ff5f57; }
.tdot.y { background: #febc2e; }
.tdot.g { background: #28c840; }
.terminal-title {
margin-left: 8px;
font-family: var(--font-mono);
font-size: 0.76rem;
color: var(--muted);
}
.terminal-body {
margin: 0;
padding: 22px 20px 26px;
font-family: var(--font-mono);
font-size: 0.86rem;
line-height: 1.85;
color: #c9d1e0;
min-height: 220px;
white-space: pre-wrap;
}
.terminal-body .ok { color: var(--green); }
.terminal-body .warn { color: var(--amber); }
.terminal-body .dim { color: var(--muted); }
.cursor {
display: inline-block;
width: 7px; height: 1.1em;
background: var(--blue);
vertical-align: text-bottom;
animation: blink 1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }
/* ---------- Sections ---------- */
section { max-width: 1120px; margin: 0 auto; padding: 70px 24px; position: relative; z-index: 2; }
.section-head { max-width: 640px; margin-bottom: 44px; }
.section-head h2 {
font-family: var(--font-display);
font-size: clamp(1.5rem, 2.6vw, 2.05rem);
line-height: 1.25;
margin: 0;
font-weight: 600;
}
/* ---------- Why cards ---------- */
.cards {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 18px;
}
.card {
background: var(--panel);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 26px 26px 28px;
backdrop-filter: blur(14px);
transition: border-color 0.2s;
}
.card:hover { border-color: rgba(79,140,255,0.4); }
.card h3 {
font-family: var(--font-display);
font-size: 1.05rem;
margin: 0 0 10px;
}
.card p { color: var(--muted); margin: 0; font-size: 0.95rem; }
/* ---------- How it works stack ---------- */
.stack { display: flex; flex-direction: column; align-items: center; gap: 0; }
.layer {
width: 100%;
max-width: 620px;
background: var(--panel);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 20px 26px;
display: flex;
flex-direction: column;
gap: 4px;
backdrop-filter: blur(14px);
}
.layer-1 { border-color: rgba(79,140,255,0.35); }
.layer-2 { border-color: rgba(155,107,255,0.35); }
.layer-3 { border-color: rgba(52,211,153,0.3); }
.layer-label { font-family: var(--font-display); font-weight: 600; font-size: 1rem; }
.layer-detail { font-family: var(--font-mono); font-size: 0.8rem; color: var(--muted); }
.stack-arrow {
font-family: var(--font-mono);
font-size: 0.76rem;
color: var(--muted);
padding: 10px 0;
position: relative;
}
.stack-arrow::before {
content: "";
position: absolute;
left: 50%; top: -2px;
width: 1px; height: 8px;
background: var(--border);
}
.how-note { margin-top: 30px; color: var(--muted); font-size: 0.9rem; text-align: center; }
.how-note code { color: var(--blue); }
/* ---------- Network boundary table (reused table pattern) ---------- */
.req-table {
margin-top: 28px;
border: 1px solid var(--border);
border-radius: var(--radius);
overflow: hidden;
}
.req-table > div {
display: grid;
grid-template-columns: 140px 1fr;
gap: 16px;
padding: 13px 20px;
font-size: 0.88rem;
border-bottom: 1px solid var(--border);
}
.req-table.wide > div { grid-template-columns: 210px 1fr; }
.req-table > div:last-child { border-bottom: none; }
.req-table span:first-child { font-family: var(--font-mono); color: var(--blue); }
.req-table span:last-child { color: var(--muted); }
/* ---------- Transparency note ---------- */
.notebox {
margin-top: 22px;
border: 1px solid rgba(245, 166, 35, 0.32);
background: rgba(245, 166, 35, 0.06);
border-radius: var(--radius);
padding: 16px 20px;
font-size: 0.88rem;
color: var(--muted);
}
.notebox strong {
display: block;
color: var(--amber);
font-family: var(--font-mono);
font-size: 0.72rem;
letter-spacing: 0.06em;
text-transform: uppercase;
margin-bottom: 6px;
}
/* ---------- Screenshots ---------- */
.shot-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 18px;
}
.shot-wide { grid-column: 1 / -1; }
.shot {
margin: 0;
border: 1px solid var(--border);
border-radius: var(--radius);
overflow: hidden;
background: var(--panel-solid);
}
.shot img { width: 100%; display: block; }
.shot figcaption {
padding: 14px 18px;
font-size: 0.85rem;
color: var(--muted);
border-top: 1px solid var(--border);
}
/* ---------- Scope / phases ---------- */
.phase-table {
border: 1px solid var(--border);
border-radius: var(--radius);
overflow: hidden;
}
.phase-row {
display: grid;
grid-template-columns: 220px 1fr;
gap: 16px;
padding: 16px 20px;
font-size: 0.9rem;
border-bottom: 1px solid var(--border);
align-items: baseline;
}
.phase-row:last-child { border-bottom: none; }
.phase-tag {
font-family: var(--font-mono);
font-size: 0.78rem;
white-space: nowrap;
}
.phase-tag.live { color: var(--green); }
.phase-tag.alpha { color: var(--amber); }
.phase-tag.planned { color: var(--blue); }
.phase-tag.locked { color: var(--violet); }
.phase-row p { margin: 0; color: var(--muted); }
.scope-note { margin-top: 22px; color: var(--muted); font-size: 0.88rem; }
/* ---------- Get started ---------- */
.start-paths {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
margin-bottom: 30px;
}
.start-path {
background: var(--panel);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 24px 24px 26px;
backdrop-filter: blur(14px);
}
.start-path h3 {
font-family: var(--font-display);
font-size: 1.05rem;
margin: 0 0 10px;
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.tag-mini {
font-family: var(--font-mono);
font-size: 0.68rem;
font-weight: 500;
color: var(--blue);
background: rgba(79, 140, 255, 0.12);
border: 1px solid rgba(79, 140, 255, 0.3);
padding: 3px 9px;
border-radius: 999px;
text-transform: none;
}
.start-desc {
color: var(--muted);
font-size: 0.9rem;
margin: 0 0 16px;
}
.start-desc code {
color: var(--text);
background: rgba(255,255,255,0.06);
padding: 1px 6px;
border-radius: 4px;
font-size: 0.85em;
}
.start-path .code-block { padding: 16px 18px; }
.start-path .code-block code { font-size: 0.82rem; }
.code-block {
background: #0e1015;
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 22px 24px;
overflow-x: auto;
}
.code-block pre { margin: 0; }
.code-block code {
font-size: 0.86rem;
line-height: 1.8;
color: #c9d1e0;
}
.start-note { color: var(--muted); font-size: 0.9rem; margin-top: 18px; }
/* ---------- CTA ---------- */
.cta { text-align: center; padding-top: 40px; padding-bottom: 100px; }
.cta h2 {
font-family: var(--font-display);
font-size: clamp(1.6rem, 3vw, 2.3rem);
line-height: 1.3;
margin: 0 0 32px;
}
/* ---------- Footer ---------- */
.footer {
max-width: 1120px;
margin: 0 auto;
padding: 0 24px 50px;
border-top: 1px solid var(--border);
}
.footer-links {
display: flex;
flex-wrap: wrap;
gap: 20px;
padding: 28px 0 20px;
font-size: 0.85rem;
}
.footer-links a { color: var(--muted); transition: color 0.15s; }
.footer-links a:hover { color: var(--blue); }
.footer-bottom {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 8px;
color: var(--muted);
font-size: 0.82rem;
padding-top: 16px;
border-top: 1px solid var(--border);
}
.footer-bottom a:hover { color: var(--blue); }
/* ---------- Responsive ---------- */
@media (max-width: 860px) {
.nav-links { display: none; }
.hero { grid-template-columns: 1fr; padding-top: 56px; }
.cards { grid-template-columns: 1fr; }
.shot-grid { grid-template-columns: 1fr; }
.start-paths { grid-template-columns: 1fr; }
.req-table > div,
.req-table.wide > div { grid-template-columns: 1fr; gap: 4px; }
.phase-row { grid-template-columns: 1fr; gap: 4px; }
.footer-bottom { flex-direction: column; gap: 10px; }
}
/* ---------- Focus visibility ---------- */
a:focus-visible, button:focus-visible {
outline: 2px solid var(--blue);
outline-offset: 3px;
}
</style>
</head>
<body>
<div class="grain"></div>
<div class="glow glow-a"></div>
<div class="glow glow-b"></div>
<header class="nav">
<div class="nav-inner">
<a class="brand" href="#top">
<img src="https://raw.githubusercontent.com/kuchenboss/MyPhiloEngine/main/frontend/assets/logo.png" alt="" class="brand-mark" />
<span>PhiloEngine</span>
</a>
<nav class="nav-links">
<a href="#how">How it works</a>
<a href="#shots">Screenshots</a>
<a href="#scope">Roadmap</a>
<a href="#start">Get started</a>
</nav>
<a class="btn btn-ghost" href="https://github.com/kuchenboss/MyPhiloEngine" target="_blank" rel="noopener">
<svg class="gh-icon" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" aria-hidden="true"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8Z"/></svg>
GitHub
</a>
</div>
</header>
<main id="top">
<section class="hero">
<div class="hero-copy">
<p class="eyebrow">Alpha · Phase 1 · Local-first</p>
<h1>Point it at your GPU.<br>It figures out the rest.</h1>
<p class="lede">
A desktop studio for local and API-based language models — chat, agentic PhiloBots,
long-term memory, built-in search, and a unified marketplace. Local-first, not
network-isolated: models, chats, and memory stay on your machine, and every feature
that calls out is documented, not assumed.
</p>
<div class="hero-actions">
<a class="btn btn-primary" href="https://github.com/kuchenboss/MyPhiloEngine" target="_blank" rel="noopener">View on GitHub</a>
<a class="btn btn-outline" href="https://github.com/kuchenboss/MyPhiloEngine/blob/main/docs/INSTALLATION.md" target="_blank" rel="noopener">Read the docs</a>
</div>
<div class="hero-meta">
<span><i class="dot dot-go"></i> Go backend</span>
<span><i class="dot dot-flutter"></i> Flutter frontend</span>
<span><i class="dot dot-lic"></i> AGPL-3.0</span>
<span><i class="dot dot-alpha"></i> Phase 1 alpha</span>
</div>
</div>
<div class="terminal" role="img" aria-label="Terminal demo of PhiloEngine detecting hardware and adjusting context size automatically">
<div class="terminal-bar">
<span class="tdot r"></span><span class="tdot y"></span><span class="tdot g"></span>
<span class="terminal-title">philoengine — hardware fit</span>
</div>
<pre class="terminal-body" id="termBody"></pre>
</div>
</section>
<section class="why">
<div class="section-head">
<p class="eyebrow">Why another one</p>
<h2>The part you never see is the one that took the most work.</h2>
</div>
<div class="cards">
<article class="card">
<h3>Hardware-aware engine</h3>
<p>Detects RAM and GPUs, estimates the memory footprint per model, then proposes a context size and runtime it can actually start — GPU, GPU-plus-RAM, or CPU fallback.</p>
</article>
<article class="card">
<h3>PhiloBots with tools</h3>
<p>Custom assistants with their own prompt, style, and trigger words. Project-aware file tools ask for permission before touching anything, and changes arrive as readable diffs.</p>
</article>
<article class="card">
<h3>Long-term memory</h3>
<p>Recall across sessions, kept separate per user and per project — SQLite full-text search plus vector retrieval, with deterministic local embeddings by default.</p>
</article>
<article class="card">
<h3>Built-in text search</h3>
<p>Search DuckDuckGo, Brave, Google, Bing, or Wikipedia from inside a chat, then fetch and condense a page to Markdown, guarded against local-network targets.</p>
</article>
<article class="card">
<h3>Unified marketplace</h3>
<p>Hugging Face downloads and OpenRouter/Featherless models side by side. Local candidates show quantization, estimated resource use, and a hardware-fit verdict.</p>
</article>
<article class="card">
<h3>Fails gracefully, in the open</h3>
<p>GPU → CPU, smaller context, alternate KV-cache type. Each fallback step is shown, never hidden behind a silent retry.</p>
</article>
</div>
</section>
<section class="how" id="how">
<div class="section-head">
<p class="eyebrow">How it works</p>
<h2>Three layers, one binary decision at the bottom: does it fit?</h2>
</div>
<div class="stack">
<div class="layer layer-1">
<span class="layer-label">Flutter desktop app</span>
<span class="layer-detail">Material 3 · DE/EN · chat, engine, bots, memory, marketplace</span>
</div>
<div class="stack-arrow">HTTP/JSON + SSE · 127.0.0.1</div>
<div class="layer layer-2">
<span class="layer-label">Go backend (Fiber)</span>
<span class="layer-detail">hardware planner · philobot · memory · search · marketplace · news · benchmark</span>
</div>
<div class="stack-arrow">spawns &amp; supervises</div>
<div class="layer layer-3">
<span class="layer-label">llama.cpp · vLLM · Transformers</span>
<span class="layer-detail">local inference runtimes</span>
</div>
</div>
<p class="how-note">Both application servers bind to <code>127.0.0.1</code> by default. The main desktop flow runs over HTTP/JSON and server-sent events — only the Skills client currently uses a limited gRPC surface. Local application data lives under <code>backend/data/</code>.</p>
<div class="req-table wide" aria-label="What stays local vs. what calls out">
<div><span>Local model</span><span>Inference stays with the local backend and worker</span></div>
<div><span>API model</span><span>Prompt and settings go to the selected provider (OpenRouter or Featherless)</span></div>
<div><span>Search / News / Benchmark</span><span>The selected or public source for that feature</span></div>
<div><span>Model download</span><span>Hugging Face, or the configured provider</span></div>
<div><span>Update check</span><span>GitHub release infrastructure</span></div>
</div>
<div class="notebox">
<strong>Worth knowing</strong>
News and Benchmark refresh in the background on their own schedule, and PhiloBot's file-tool checks are guardrails, not an operating-system sandbox. Read the <a href="https://github.com/kuchenboss/MyPhiloEngine/blob/main/docs/PRIVACY.md" target="_blank" rel="noopener" style="color: var(--text); text-decoration: underline;">privacy &amp; network doc</a> before pointing PhiloBot at anything sensitive.
</div>
</section>
<section class="shots" id="shots">
<div class="section-head">
<p class="eyebrow">Screenshots</p>
<h2>Every module, built for the same question: what actually runs here?</h2>
</div>
<div class="shot-grid">
<figure class="shot shot-wide">
<img src="https://raw.githubusercontent.com/kuchenboss/MyPhiloEngine/main/assets/screenshots/demo.gif" alt="PhiloEngine selecting and starting a model, then retrying with a safer context size" loading="lazy" />
<figcaption>A requested 64k context doesn't fit, so the engine retries at 32k — and keeps the decision visible.</figcaption>
</figure>
<figure class="shot">
<img src="https://raw.githubusercontent.com/kuchenboss/MyPhiloEngine/main/assets/screenshots/engine.png" alt="PhiloEngine model studio with hardware telemetry" loading="lazy" />
<figcaption>Model Studio — plan, configure, start, and observe local model instances.</figcaption>
</figure>
<figure class="shot">
<img src="https://raw.githubusercontent.com/kuchenboss/MyPhiloEngine/main/assets/screenshots/marketplace.png" alt="PhiloEngine marketplace with model and hardware filters" loading="lazy" />
<figcaption>Marketplace — compare local downloads and API models in one responsive grid.</figcaption>
</figure>
</div>
</section>
<section class="scope" id="scope">
<div class="section-head">
<p class="eyebrow">Current scope</p>
<h2>What's usable today, what's alpha, and what's intentionally still locked.</h2>
</div>
<div class="phase-table">
<div class="phase-row">
<span class="phase-tag live">Phase 1 — available</span>
<p>Chat, Engine, Marketplace, authentication, user preferences, PhiloBots, memory, text search, settings, skills administration.</p>
</div>
<div class="phase-row">
<span class="phase-tag alpha">News — alpha</span>
<p>AI and technology feeds with search, filters, and saved articles.</p>
</div>
<div class="phase-row">
<span class="phase-tag alpha">Benchmark — alpha</span>
<p>LMArena text leaderboard with ranking, model details, and comparison views.</p>
</div>
<div class="phase-row">
<span class="phase-tag live">Phase 1 — active development</span>
<p>Improve existing functionality, fix bugs, refine frontend design and usability, strengthen verification, expand documentation.</p>
</div>
<div class="phase-row">
<span class="phase-tag planned">Phase 2 — planned</span>
<p>Extend current features, with usable connections to external servers from Chat and Engine.</p>
</div>
<div class="phase-row">
<span class="phase-tag locked">Phase 3 — locked preview</span>
<p>Guided full fine-tuning, fine-tuning, and quantization workflows.</p>
</div>
<div class="phase-row">
<span class="phase-tag locked">Phase 4 — locked preview</span>
<p>Image and video generation, plus a game-development workspace.</p>
</div>
<div class="phase-row">
<span class="phase-tag planned">Phase 5 — long-term direction</span>
<p>Opt-in sharing of self-hosted models and compute capacity, keeping PhiloEngine itself free and open source.</p>
</div>
</div>
<p class="scope-note">No promised dates for future phases — the <a href="https://github.com/kuchenboss/MyPhiloEngine/blob/main/ROADMAP.md" target="_blank" rel="noopener" style="color: var(--blue);">full roadmap</a> separates working functionality from previews and planned work. Always check the notes for the release you actually install.</p>
</section>
<section class="start" id="start">
<div class="section-head">
<p class="eyebrow">Get started</p>
<h2>Two ways in — pick the one that fits.</h2>
</div>
<div class="start-paths">
<div class="start-path">
<h3>Quick install <span class="tag-mini">no build tools needed</span></h3>
<p class="start-desc">Download the <em>Quick Install</em> archive for your platform from the latest release — filenames end in <code>-quickinstall</code>, not the similarly named update archive. Extract it once and always start the top-level launcher: it verifies the published size and SHA-256, installs updates atomically, and can roll back a version that fails its health check.</p>
<div class="code-block">
<pre><code># extract, then run:
./myphiloengine # Linux / macOS
myphiloengine.exe # Windows</code></pre>
</div>
</div>
<div class="start-path">
<h3>From source <span class="tag-mini">for developers</span></h3>
<p class="start-desc">Complete the one-time setup in the installation guide, then start backend and frontend together with the project launcher. On a clean <code>main</code> checkout it applies a safe fast-forward update first — it never overwrites local changes.</p>
<div class="code-block">
<pre><code>git clone https://github.com/kuchenboss/MyPhiloEngine.git
cd MyPhiloEngine
./start.sh</code></pre>
</div>
</div>
</div>
<p class="start-note">No GPU? Add an OpenRouter or Featherless key under <em>Settings → Providers</em> and start a model from the marketplace instead.</p>
<div class="req-table">
<div><span>OS</span><span>Quick Install: Linux x64, Windows x64, macOS (Apple Silicon). Other setups via source.</span></div>
<div><span>Flutter</span><span>3.44+ (Dart 3.12+) — source checkout only</span></div>
<div><span>Go</span><span>1.25+ — source checkout only</span></div>
<div><span>Python</span><span>3.x — source checkout and local runtime installation</span></div>
<div><span>GPU</span><span>Optional — CPU inference works, just slower</span></div>
</div>
</section>
<section class="cta">
<h2>Your machine already has the hardware.<br>This is the part that reads it correctly.</h2>
<div class="hero-actions center">
<a class="btn btn-primary" href="https://github.com/kuchenboss/MyPhiloEngine" target="_blank" rel="noopener">View on GitHub</a>
<a class="btn btn-outline" href="https://github.com/kuchenboss/MyPhiloEngine/releases" target="_blank" rel="noopener">Download a release</a>
</div>
</section>
</main>
<footer class="footer">
<nav class="footer-links">
<a href="https://github.com/kuchenboss/MyPhiloEngine/blob/main/docs/INSTALLATION.md" target="_blank" rel="noopener">Installation</a>
<a href="https://github.com/kuchenboss/MyPhiloEngine/blob/main/docs/FEATURES.md" target="_blank" rel="noopener">Features</a>
<a href="https://github.com/kuchenboss/MyPhiloEngine/blob/main/docs/ARCHITECTURE.md" target="_blank" rel="noopener">Architecture</a>
<a href="https://github.com/kuchenboss/MyPhiloEngine/blob/main/docs/PRIVACY.md" target="_blank" rel="noopener">Privacy</a>
<a href="https://github.com/kuchenboss/MyPhiloEngine/blob/main/ROADMAP.md" target="_blank" rel="noopener">Roadmap</a>
<a href="https://github.com/kuchenboss/MyPhiloEngine/blob/main/CONTRIBUTING.md" target="_blank" rel="noopener">Contributing</a>
</nav>
<div class="footer-bottom">
<span>AGPL-3.0 · built by fillystudio · security issues to security@fillystudio.com</span>
<a href="https://github.com/kuchenboss/MyPhiloEngine" target="_blank" rel="noopener">github.com/kuchenboss/MyPhiloEngine</a>
</div>
</footer>
<script>
(function () {
var lines = [
{ text: "$ philoengine start --model qwen3-14b", cls: "dim" },
{ text: "detecting hardware… GPU: RX 9070 XT · 16GB VRAM", cls: "" },
{ text: "requested context: 64k", cls: "" },
{ text: "✗ does not fit at current quant", cls: "warn" },
{ text: "retrying — kv-cache 4-bit, context 32k…", cls: "dim" },
{ text: "✓ started · 32k context · 16GB VRAM in use", cls: "ok" },
];
var el = document.getElementById("termBody");
if (!el) return;
var reduceMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
if (reduceMotion) {
el.innerHTML = lines
.map(function (l) { return '<span class="' + l.cls + '">' + l.text + "</span>"; })
.join("\n");
return;
}
var lineIndex = 0;
var charIndex = 0;
var built = "";
function typeNext() {
if (lineIndex >= lines.length) {
el.innerHTML = built + '<span class="cursor"></span>';
setTimeout(function () {
built = "";
lineIndex = 0;
charIndex = 0;
el.innerHTML = "";
setTimeout(typeNext, 600);
}, 2600);
return;
}
var current = lines[lineIndex];
if (charIndex === 0) {
built += lineIndex > 0 ? "\n" : "";
}
charIndex++;
var partial = current.text.slice(0, charIndex);
el.innerHTML =
built +
'<span class="' + current.cls + '">' + partial + '</span><span class="cursor"></span>';
if (charIndex < current.text.length) {
setTimeout(typeNext, 14 + Math.random() * 18);
} else {
built += '<span class="' + current.cls + '">' + current.text + "</span>";
lineIndex++;
charIndex = 0;
setTimeout(typeNext, 260);
}
}
typeNext();
})();
</script>
</body>
</html>