diff --git a/LICENSE b/LICENSE new file mode 100644 index 0000000..9aac940 --- /dev/null +++ b/LICENSE @@ -0,0 +1,21 @@ +MIT License + +Copyright (c) 2026 Yuuki y OpceanAI + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/README.md b/README.md new file mode 100644 index 0000000..d1e80e9 --- /dev/null +++ b/README.md @@ -0,0 +1,854 @@ +
+ +
+ +Yuuki Web + +

+ +# 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.** + +
+ +Features +   +Demo +   +Sponsor + +

+ +[![License](https://img.shields.io/badge/MIT-222222?style=flat-square&logo=opensourceinitiative&logoColor=white)](LICENSE) +  +[![Next.js](https://img.shields.io/badge/Next.js_16-222222?style=flat-square&logo=nextdotjs&logoColor=white)](https://nextjs.org/) +  +[![React](https://img.shields.io/badge/React_19-222222?style=flat-square&logo=react&logoColor=white)](https://react.dev/) +  +[![Tailwind](https://img.shields.io/badge/Tailwind_v4-222222?style=flat-square&logo=tailwindcss&logoColor=white)](https://tailwindcss.com/) +  +[![TypeScript](https://img.shields.io/badge/TypeScript-222222?style=flat-square&logo=typescript&logoColor=white)](https://www.typescriptlang.org/) +  +[![Vercel](https://img.shields.io/badge/Vercel-222222?style=flat-square&logo=vercel&logoColor=white)](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. + +
+ +
+ +
+ +--- + +
+ +
+ +## What is Yuuki-Web? + +
+ +
+ +**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. + +
+ +--- + +
+ +
+ +## Features + +
+ +
+ + + + + + +
+ +

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. + +
+ +
+ +--- + +
+ +
+ +## Design System + +
+ +
+ +### 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. + +
+ +--- + +
+ +
+ +## Tech Stack + +
+ +
+ +| 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 | `