README / index.html
devilyouwei's picture
feat: add local AI chat demo
dacf740 verified
Raw
History Blame Contribute Delete
4.35 kB
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Run AI models and build local applications on Apple Silicon with Hugging Mac.">
<title>Hugging Mac · Local AI on Apple Silicon</title>
<style>
:root { color-scheme:dark; --bg:#090d14; --panel:#111722; --line:#273142; --text:#f5f7fb; --muted:#9ba6b8; --blue:#51adff; }
* { box-sizing:border-box; }
body { background:radial-gradient(circle at 85% 0,#142640 0,transparent 25rem),var(--bg); color:var(--text); font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; margin:0; }
header,main { margin:auto; max-width:1180px; width:calc(100% - 36px); }
header { padding:34px 0 24px; }
.eyebrow { color:var(--blue); font:700 10px ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.14em; text-transform:uppercase; }
h1 { font-size:clamp(32px,4.2vw,48px); letter-spacing:-.05em; line-height:1; margin:9px 0 12px; white-space:nowrap; }
header p { color:var(--muted); font-size:15px; line-height:1.55; margin:0; }
main > h2 { font-size:18px; letter-spacing:-.02em; margin:0 0 10px; }
.demos { display:grid; gap:14px; grid-template-columns:repeat(2,minmax(0,1fr)); }
article { background:color-mix(in srgb,var(--panel) 92%,transparent); border:1px solid var(--line); border-radius:16px; overflow:hidden; }
video { aspect-ratio:16/9; background:#000; display:block; object-fit:contain; width:100%; }
.copy { padding:13px 15px 15px; }
.copy span { color:var(--blue); font:700 9px ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.1em; text-transform:uppercase; }
.copy h2 { font-size:20px; letter-spacing:-.035em; margin:5px 0; }
.copy p { color:var(--muted); font-size:12px; line-height:1.5; margin:0; }
@media (max-width:760px) { h1 { white-space:normal; } .demos { grid-template-columns:1fr; } }
@media (max-width:640px) { header { padding-top:26px; } header,main { width:calc(100% - 24px); } }
</style>
</head>
<body>
<header>
<div class="eyebrow">Hugging Mac · Apple Silicon</div>
<h1>Local AI, built on your Mac.</h1>
<p>Run optimized models across CPU, GPU, and the Apple Neural Engine—then combine their capabilities to create applications, games, agents, and services. <a href="https://github.com/devilyouwei/hugging-mac">Contribute on GitHub →</a></p>
</header>
<main>
<h2>Demos</h2>
<section class="demos">
<article id="chat">
<video controls playsinline preload="metadata" poster="https://hugging-mac-readme.static.hf.space/posters/chat.png">
<source src="https://hugging-mac-readme.static.hf.space/videos/chat.mp4" type="video/mp4">
</video>
<div class="copy"><span>ASR · Vision · LLM · TTS</span><h2>Chat</h2><p>Talk naturally with a private, multimodal assistant running locally.</p></div>
</article>
<article id="pose-follow">
<video controls playsinline preload="metadata" poster="https://hugging-mac-readme.static.hf.space/posters/pose-follow.png">
<source src="https://hugging-mac-readme.static.hf.space/videos/pose-follow.mp4" type="video/mp4">
</video>
<div class="copy"><span>YOLOv8 Pose</span><h2>Pose Follow</h2><p>Match body poses and gestures in real time.</p></div>
</article>
<article id="fruit-slice">
<video controls playsinline preload="metadata" poster="https://hugging-mac-readme.static.hf.space/posters/fruit-slice.png">
<source src="https://hugging-mac-readme.static.hf.space/videos/fruit-slice.mp4" type="video/mp4">
</video>
<div class="copy"><span>YOLOv8 Pose</span><h2>Fruit Slice</h2><p>Turn your arms into blades and build combos.</p></div>
</article>
<article id="palm-thunder">
<video controls playsinline preload="metadata" poster="https://hugging-mac-readme.static.hf.space/posters/palm-thunder.png">
<source src="https://hugging-mac-readme.static.hf.space/videos/palm-thunder.mp4" type="video/mp4">
</video>
<div class="copy"><span>MediaPipe Hand</span><h2>Palm Thunder</h2><p>Fly, fire, and trigger bombs with your hands.</p></div>
</article>
</section>
</main>
</body>
</html>