From 05583c5e5940e03126baa5dc4edac70d511c83ad Mon Sep 17 00:00:00 2001
From: aguitauwu
+
+
+
+
+
+# The Official Landing Page for the Yuuki Project
+
+**Showcase the model. Embed the demo. Tell the story.**
+**A dark, cyberpunk-minimal site built with Next.js and sakura pink.**
+
+
+
+
+
+
+
+
+
+
+
+[](LICENSE)
+
+[](https://nextjs.org/)
+
+[](https://react.dev/)
+
+[](https://tailwindcss.com/)
+
+[](https://www.typescriptlang.org/)
+
+[](https://vercel.com/)
+
+
+
+---
+
+
+
+
+
+
+
+
+
+
+**8 handcrafted sections.**
+
+Hero with animated terminal prompt.
+Model stats and evaluation data.
+Full ecosystem showcase.
+Embedded Gradio demo.
+Evaluation benchmarks.
+Creator profile and origin story.
+GitHub Sponsors integration.
+Responsive footer with full link map.
+
+
+
+**One page. Zero backend.**
+
+Static site, no database, no API keys.
+Dark theme with sakura pink (#f472b6) accents.
+Monospace terminal aesthetic.
+Built for the Yuuki ecosystem.
+
+Deployed on Vercel in one click.
+
+
+
+
+
+
+
+**Yuuki-Web** is the official landing page for the [Yuuki project](https://huggingface.co/OpceanAI) -- a code-generation model trained entirely on a smartphone with zero budget. The site serves as the public face of the project: introducing the model, showcasing the ecosystem tools (YUY CLI and YUY-Chat), embedding a live interactive demo, presenting evaluation data, and providing a way for people to support the project financially.
+
+The site is built with **Next.js 16**, **Tailwind CSS v4**, and **TypeScript**. It uses a dark cyberpunk-minimal design language with sakura pink accents inspired by the Japanese name Yuuki (courage/bravery). The entire site is static -- no backend, no database, no environment variables required.
+
+
+
+---
+
+
+
+
+
+
+
+
+
+
+
+
+
+Hero Section
+
+Full-viewport hero with animated typing effect in a terminal-style code block. Headline communicates the core message: an AI model trained on a phone with $0 budget. CTA buttons link to the live demo and GitHub.
+
+
+
+Model Overview
+
+Technical card grid displaying key model specifications: architecture (GPT-2, 124M params), training hardware (Snapdragon 685), dataset composition (multilingual code), training progress (5.3%), and model size (988 MB). All stats presented in a clean bento-grid layout.
+
+
+
+Ecosystem Showcase
+
+Side-by-side feature cards for the two companion tools -- YUY (CLI for downloading and running models) and YUY-Chat (TUI chat interface). Each card includes description, key features, tech stack badges, and terminal code examples showing real commands.
+
+
+
+Live Demo
+
+Embedded HuggingFace Space via iframe with a macOS-style window chrome (traffic light dots, URL bar, external link). Loads the Gradio-powered Yuuki-best model directly in the browser. No setup required.
+
+
+
+
+Evaluation & Stats
+
+Data-driven section showing benchmark scores across programming languages (Agda 55/100, C 20/100, Assembly 15/100, Python 8/100). Includes training metrics: loss curves, steps completed, and checkpoint comparisons between 1400 and 2000.
+
+
+
+Creator Profile
+
+About section for agua_omg with custom avatar, personal bio, social links (GitHub, Twitter/X, Discord, HuggingFace), and quick-stat cards (4+ projects, Rust, Redmi 12, $0 budget). Includes the full origin story of the name "Yuuki" -- from Japanese kanji to Girls' Last Tour.
+
+
+
+Sponsor Section
+
+Embedded GitHub Sponsors card via iframe alongside CTA buttons for sponsoring and starring repos. Clean messaging about supporting a zero-budget solo project.
+
+
+
+Footer
+
+Four-column footer with organized link sections: Ecosystem (model, demo, training code), Tools (YUY, YUY-Chat, HuggingFace), Community (GitHub org, Twitter, sponsor link), and the project tagline.
+
+
+
+---
+
+
+
+
+
+### Color Palette
+
+| Token | Value | Usage |
+|:------|:------|:------|
+| `--background` | `#050505` | Page background |
+| `--foreground` | `#fafafa` | Primary text |
+| `--card` | `#0e0e0e` | Card surfaces |
+| `--muted-foreground` | `#737373` | Secondary text |
+| `--border` | `#1f1f1f` | Borders and dividers |
+| `--sakura` | `#f472b6` | Primary accent (pink) |
+| `--sakura-dim` | `rgba(244,114,182,0.15)` | Subtle pink backgrounds |
+| `--sakura-border` | `rgba(244,114,182,0.25)` | Pink-tinted borders |
+
+
+
+### Typography
+
+| Role | Font | Weight |
+|:-----|:-----|:-------|
+| Headings | Geist | Bold (700) |
+| Body text | Geist | Regular (400) |
+| Code / Labels | Geist Mono | Regular (400) |
+
+
+
+### Design Principles
+
+- **Dark-first.** The entire site uses a near-black background (`#050505`) with high-contrast white text and sakura pink accents. No light mode.
+- **Terminal aesthetic.** Monospace labels, code blocks, and a typing animation in the hero reinforce the developer/hacker vibe.
+- **Minimal color.** Three colors total: black, white, and pink. No gradients unless explicitly decorative.
+- **Card-based layout.** Every section uses bordered cards with subtle background differentiation on a consistent grid.
+- **Mobile-first responsive.** All layouts use flexbox with responsive breakpoints. Grid layouts collapse to single columns on small screens.
+
+
+
+---
+
+
+
+
+
+| Technology | Version | Purpose |
+|:-----------|:--------|:--------|
+| **Next.js** | 16 | React framework, App Router, static rendering |
+| **React** | 19 | UI component library |
+| **TypeScript** | 5.x | Type safety |
+| **Tailwind CSS** | 4 | Utility-first styling with `@theme inline` tokens |
+| **shadcn/ui** | Latest | Base component primitives (cards, buttons) |
+| **Lucide React** | Latest | Icon library |
+| **Geist** | Latest | Font family (sans + mono) |
+
+
+
+### External Embeds
+
+| Embed | Method | Source |
+|:------|:-------|:------|
+| Yuuki Demo | `
- The Yuuki Space runs the Yuuki-best model on HuggingFace infrastructure. - Generate code in Agda, C, Python, Assembly, and more. -
- - Launch Yuuki Space - {">"} - + + {/* Gradio Space iframe */} ++ The Space may take a moment to load if it has been idle. Powered by HuggingFace Spaces. +
@`B5gM_RUqvsHPpq{V;p5*@LlSJr&UelWv&rZ-P
zX(S~A6rPPcqex;*9A_jE1>{E1BywQ@X-I@d&diPHsE2w;90lp(?cU&Nr{C*ta|no+
z@^6v{W&C7&cB$Lfi==>#$u;C-6ZRna49C|FhR@q#x8AS%#hJ3Mpfd%L3yP(VfmO5-
z2o%m=VN;GIidrNp{o&NAVz2Z1{ 43syK?iHn3
zRi-NAhD{aO@MWTAQq_r$a4HCqt8LC=HknZ{3LdnpbhSr;IEc^1P(eIS#3I#Lhx#Yag{4@1l~7z;E_nw1YYrjU+*PdAt}xdpUN
zEIYGHCiWZ`3eW%;wm($V9da*IP?gzrDW^(BNsWeOF;`e_5E8%>?R?H)E#_->F^*@R
zUBua|{8~r2*Hj2u>3RXyY
{HMlpn_t+-+TCLJ5
z;_v5Wl!ZW?v8f7KH^VLRtc^N{z3B_$>+
~
zzHllA4upYMID){HPd7uXV8BvnTLRJAX~&BJ1O#p}EqIV0mfc=Qv3CNu-r>^@F+~Y}
z4Ch{x!Bm!);>?$_9rM^JfqC%lO|}d99iGGoIN@9#A$)y`w5$k%b=L(t81yis?P5Iy
z$+B|e!{dU*1qn$Pnw3d
l-Q
zI|eA*DL}Plnj#$Kvx3W1I-T;}5zADm29qsQ*NIolR8u#_GF2q%eJKEj)GIf^hu(NY
zW0%;39@#2Kozvw8YAt44+hT5*}{tmM>Tzet+@
zR1jgAW{=?|Z6KfU7<2|A$u3TW^6DV;jLxI*9dMzsumR?YSUCn`gJ+m5rDMcZ3ddo&
zkrbwIxhN`B;P17J3c6&}j9{+_&As0lbo(Wb_*rjyB0mWN2{;yJkPV~c?n-Ig(qhE!
zyo)KZ(ikUQpw(Fjb;5Hr@)stS8Xa6Zhm?yl$6y|sQd+)McLupFI!Cw#A_g|gPd=ef
z7fk7E4(21ODX*U)!e72QDk@|(Gb&2AU%Rkw$cZ@7PWsMxqIw|~+a{FFLTwiFc9iM?
zi?u6L)Ii2%s+?e6%amVXR6#3gKM&TPd6Ta#88beFG0B}rbE@A(T*^M~xaJcY-?)Ae
zLE}8`s@Zo_$JiIXJDX(($tZ9u^=qfTf*_Vb1{0yoCF%lyukpaR+r&8l_nMOjNFvaH
zMDkOrQVRiKfgPU_212dCnIIJ;58ZE}Ml~_vul(A-`oRDOefrdu!^t7yDv<63{CQPD
zfsaBz;&$FaGl8BrD2J}c