Spaces:
Running
Running
Download index.html from Fillystudio/MyPhiloEngine: direct link, hf CLI and curl.
- Browser
- Download file 30.1 kB
-
https://huggingface.co/spaces/Fillystudio/MyPhiloEngine/resolve/main/index.html
- Command line
-
hf download hf://spaces/Fillystudio/MyPhiloEngine/index.html
-
curl -L -o index.html https://huggingface.co/spaces/Fillystudio/MyPhiloEngine/resolve/main/index.html
30.1 kB
| <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 ; | |
| animation-iteration-count: 1 ; | |
| transition-duration: 0.001ms ; | |
| } | |
| } | |
| 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 & 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 & 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> |