Spaces:
Running
Running
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"/> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"/> | |
| <title>Matrix.Corp — AI Model Registry</title> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/7.23.2/babel.min.js"></script> | |
| <style> | |
| * { box-sizing: border-box; margin: 0; padding: 0; } | |
| body { background: #080c10; font-family: 'IBM Plex Mono', 'Courier New', monospace; color: #e2e8f0; } | |
| ::-webkit-scrollbar { width: 6px; height: 6px; } | |
| ::-webkit-scrollbar-track { background: #0d1117; } | |
| ::-webkit-scrollbar-thumb { background: #1e2936; border-radius: 3px; } | |
| ::-webkit-scrollbar-thumb:hover { background: #2d3f52; } | |
| button { font-family: 'IBM Plex Mono', 'Courier New', monospace; } | |
| pre { font-family: 'IBM Plex Mono', 'Courier New', monospace; } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="root"></div> | |
| <script type="text/babel"> | |
| const { useState } = React; | |
| const C = { | |
| zenith: "#6ee7f7", | |
| vortex: "#a78bfa", | |
| tg: "#4ade80", | |
| bg: "#080c10", | |
| card: "#0d1117", | |
| border: "#1e2936", | |
| text: "#e2e8f0", | |
| muted: "#64748b", | |
| }; | |
| const MODELS = { | |
| zenith: { | |
| color: C.zenith, glow: "rgba(110,231,247,0.12)", icon: "🌌", | |
| name: "Zenith", tagline: "Reasoning & Emotional Intelligence", | |
| hardware: "Tenstorrent p300a", | |
| models: [ | |
| { name: "Zenith-7B", params: "7B", status: "preview", use: "Code generation & fast inference", vram: "14GB", base: "Qwen2.5-Coder-7B" }, | |
| { name: "Zenith-28B", params: "28B", status: "preview", use: "Nuanced reasoning + EQ awareness", vram: "56GB", base: "Qwen3.5-27B (Claude Opus 4.6 distill)" }, | |
| { name: "Zenith-32B", params: "32B", status: "preview", use: "Mathematical & structured reasoning", vram: "64GB", base: "DeepSeek-R1-Distill-Qwen-32B" }, | |
| { name: "Zenith-70B", params: "70B", status: "preview", use: "Max capability — multi-card", vram: "140GB / INT4: 35GB", base: "DeepSeek-R1-Distill-Llama-70B" }, | |
| ], | |
| features: ["Ring Attention 32K", "MoE 12 experts top-2", "EQ Engine (V1)", "TP=8 / PP=4", "NoC optimized", "Ollama + vLLM"], | |
| benchmarks: [ | |
| { name: "GSM8K", scores: { "28B": 75, "32B": 82, "70B": 89 } }, | |
| { name: "HumanEval", scores: { "28B": 45, "32B": 52, "70B": 68 } }, | |
| { name: "MATH", scores: { "28B": 35, "32B": 42, "70B": 55 } }, | |
| { name: "EQ Bench", scores: { "28B": 78, "32B": 80, "70B": 84 } }, | |
| { name: "TruthfulQA",scores: { "28B": 65, "32B": 70, "70B": 76 } }, | |
| ], | |
| arch: [ | |
| { label: "Input Embedding + Position", color: "#6ee7f7" }, | |
| { label: "Ring Attention (32K, 8K chunks)", color: "#38bdf8" }, | |
| { label: "MoE Layer — 12 experts, top-2 routing", color: "#6ee7f7" }, | |
| { label: "EQ Attention Bias (per-head)", color: "#67e8f9" }, | |
| { label: "EQ-Gated FFN (sigmoid gate)", color: "#38bdf8" }, | |
| { label: "EQ State Recurrence (GRU)", color: "#6ee7f7" }, | |
| { label: "× 36 layers (28B) / 40 (32B) / 64 (70B)", color: "#475569" }, | |
| { label: "LM Head", color: "#6ee7f7" }, | |
| ], | |
| trainSteps: [ | |
| { title: "1. Install Dependencies", cmd: "pip install torch transformers accelerate peft bitsandbytes\npip install flash-attn # CUDA only" }, | |
| { title: "2. Prepare Training Data", cmd: "python data/openthoughts_processor.py \\\n --dataset open-thoughts/OpenThoughts3-1.2M \\\n --output_dir ./data/processed \\\n --use_curriculum \\\n --use_quality_filter" }, | |
| { title: "3. Run LoRA Fine-tuning", cmd: "python train.py \\\n --base_model Qwen/Qwen3.5-7B \\\n --train_data ./data/processed \\\n --use_lora --lora_r 16 --lora_alpha 32 \\\n --epochs 3 --batch_size 4 \\\n --use_ring_attention \\\n --max_seq_length 32768 \\\n --mixed_precision bf16 \\\n --use_eq_adapter \\\n --use_tenstorrent" }, | |
| { title: "4. Evaluate", cmd: "python -m evaluation.benchmark \\\n --model_path ./outputs/checkpoint-final \\\n --benchmarks gsm8k humaneval math truthfulqa \\\n --output_dir ./eval_results" }, | |
| { title: "5. Push to HuggingFace", cmd: "from huggingface_hub import HfApi\napi = HfApi()\napi.upload_folder(\n folder_path='./outputs/checkpoint-final',\n repo_id='Matrix-Corp/Zenith-28b-p300-V1',\n repo_type='model'\n)" }, | |
| ], | |
| ollama: "ollama create zenith-28b -f Modelfile\nollama run zenith-28b \"Solve this step by step: ...\"", | |
| vllm: "python -m vllm.entrypoints.openai.api_server \\\n --model ./outputs/checkpoint-final \\\n --tensor-parallel-size 2 \\\n --max-model-len 32768 \\\n --port 8000", | |
| hf: "from transformers import AutoModelForCausalLM, AutoTokenizer\n\nmodel = AutoModelForCausalLM.from_pretrained(\n \"Matrix-Corp/Zenith-28b-p300-V1\",\n torch_dtype=\"auto\",\n device_map=\"auto\"\n)\ntokenizer = AutoTokenizer.from_pretrained(\n \"Matrix-Corp/Zenith-28b-p300-V1\"\n)\ninputs = tokenizer(\"Your prompt\", return_tensors=\"pt\")\noutputs = model.generate(**inputs, max_new_tokens=512)\nprint(tokenizer.decode(outputs[0]))", | |
| }, | |
| vortex: { | |
| color: C.vortex, glow: "rgba(167,139,250,0.12)", icon: "🔬", | |
| name: "Vortex Scientific", tagline: "Deep Science Reasoning", | |
| hardware: "MacBook M2/M3 + Nvidia 4060", | |
| models: [ | |
| { name: "Vortex-7B", params: "7B", status: "preview", use: "Science reasoning on consumer hardware", vram: "8GB", base: "From scratch — custom architecture" }, | |
| { name: "Vortex-13B", params: "13B", status: "preview", use: "Advanced multi-domain science", vram: "16GB / INT8", base: "From scratch — custom architecture" }, | |
| ], | |
| features: ["Hybrid SSM + Attention", "60% SSM / 40% Attn (7B)", "4 Science Modules", "Custom 50K Sci Tokenizer", "LaTeX & Equations", "Molecular Module"], | |
| benchmarks: [ | |
| { name: "Physics", scores: { "7B": 62, "13B": 74 } }, | |
| { name: "Math", scores: { "7B": 58, "13B": 71 } }, | |
| { name: "Chemistry", scores: { "7B": 65, "13B": 78 } }, | |
| { name: "Biology", scores: { "7B": 60, "13B": 72 } }, | |
| { name: "Zoology", scores: { "7B": 55, "13B": 68 } }, | |
| ], | |
| arch: [ | |
| { label: "Science Tokenizer (50K vocab)", color: "#a78bfa" }, | |
| { label: "SSM Block — O(n) complexity (Mamba-style)", color: "#8b5cf6" }, | |
| { label: "Local Attention — 512 token window", color: "#a78bfa" }, | |
| { label: "Equation Module (LaTeX parser)", color: "#c4b5fd" }, | |
| { label: "Numerical Reasoning Module", color: "#8b5cf6" }, | |
| { label: "Citation Awareness Module", color: "#a78bfa" }, | |
| { label: "Molecular Module (118 elements)", color: "#c4b5fd" }, | |
| { label: "SciGate FFN — domain routing", color: "#8b5cf6" }, | |
| { label: "× 32 layers (7B) / 40 (13B)", color: "#475569" }, | |
| { label: "LM Head", color: "#a78bfa" }, | |
| ], | |
| trainSteps: [ | |
| { title: "1. Install Dependencies", cmd: "pip install torch transformers accelerate datasets\npip install rdkit pubchempy pylatexenc # science deps\npip install flash-attn # CUDA only" }, | |
| { title: "2. Build Science Tokenizer", cmd: "python tokenizer/vortex_tokenizer.py \\\n --corpus_dir ./data/raw \\\n --vocab_size 50000 \\\n --output_dir ./tokenizer/trained" }, | |
| { title: "3. Prepare Science Data", cmd: "python data/dataset_loader.py \\\n --datasets pile_scientific s2orc automath pubmed_qa \\\n --output_dir ./data/processed\n\n# Optional: scrape additional sources\npython data/scraper.py \\\n --sources arxiv pubmed wikipedia nist nasa \\\n --max_docs 100000" }, | |
| { title: "4. Train from Scratch", cmd: "python train.py \\\n --model_size 7b \\\n --device cuda \\\n --data_dir ./data/processed \\\n --output_dir ./checkpoints \\\n --max_steps 100000 \\\n --use_curriculum" }, | |
| { title: "5. Push to HuggingFace", cmd: "from huggingface_hub import HfApi\napi = HfApi()\napi.upload_folder(\n folder_path='./checkpoints/latest',\n repo_id='Matrix-Corp/Vortex-7b-V1',\n repo_type='model'\n)" }, | |
| ], | |
| ollama: "ollama create vortex-7b -f ollama_7b_modelfile\nollama run vortex-7b \"Explain quantum entanglement\"", | |
| vllm: "python inference/inference.py \\\n --model_path ./checkpoints/latest \\\n --model_size 7b \\\n --device cuda \\\n --interactive", | |
| hf: "from transformers import AutoModelForCausalLM, AutoTokenizer\n\nmodel = AutoModelForCausalLM.from_pretrained(\n \"Matrix-Corp/Vortex-7b-V1\",\n torch_dtype=\"auto\",\n device_map=\"auto\"\n)\ntokenizer = AutoTokenizer.from_pretrained(\n \"Matrix-Corp/Vortex-7b-V1\"\n)\ninputs = tokenizer(\"Explain photosynthesis\", return_tensors=\"pt\")\noutputs = model.generate(**inputs, max_new_tokens=512)\nprint(tokenizer.decode(outputs[0]))", | |
| }, | |
| touchgrass: { | |
| color: C.tg, glow: "rgba(74,222,128,0.12)", icon: "🌿", | |
| name: "Touch Grass", tagline: "Music AI Assistant", | |
| hardware: "Any hardware — ultra lightweight", | |
| models: [ | |
| { name: "TouchGrass-3B", params: "3B", status: "planned", use: "Ultra lightweight music assistant", vram: "6GB", base: "Qwen3.5-3B-Instruct" }, | |
| { name: "TouchGrass-7B", params: "7B", status: "planned", use: "Full-featured music assistant", vram: "14GB", base: "Qwen3.5-7B-Instruct" }, | |
| ], | |
| features: ["Tab & Chord Generation", "Music Theory Engine", "Ear Training Module", "Music EQ Adapter", "Songwriting Assistant", "All Instruments"], | |
| benchmarks: [ | |
| { name: "Music Theory", scores: { "3B": 70, "7B": 82 } }, | |
| { name: "Tab Gen", scores: { "3B": 65, "7B": 78 } }, | |
| { name: "Ear Training", scores: { "3B": 68, "7B": 80 } }, | |
| { name: "Songwriting", scores: { "3B": 72, "7B": 85 } }, | |
| { name: "EQ Detect", scores: { "3B": 74, "7B": 83 } }, | |
| ], | |
| arch: [ | |
| { label: "Qwen3.5 Base + Music Token Extensions", color: "#4ade80" }, | |
| { label: "LoRA Fine-tune (r=16, music data)", color: "#22c55e" }, | |
| { label: "Tab & Chord Module (validated output)", color: "#4ade80" }, | |
| { label: "Music Theory Engine (circle of fifths etc)", color: "#86efac" }, | |
| { label: "Ear Training Module (interval/quality)", color: "#22c55e" }, | |
| { label: "Music EQ Adapter (4 emotions)", color: "#4ade80" }, | |
| { label: "Songwriting Module (structure + hooks)", color: "#86efac" }, | |
| { label: "Instrument Context Switch", color: "#22c55e" }, | |
| { label: "LM Head", color: "#4ade80" }, | |
| ], | |
| trainSteps: [ | |
| { title: "1. Install Dependencies", cmd: "pip install torch transformers accelerate peft bitsandbytes trl\npip install datasets music21 # music processing" }, | |
| { title: "2. Extend Tokenizer", cmd: "python tokenizer/music_token_extension.py \\\n --base_model Qwen/Qwen3.5-7B-Instruct \\\n --output_dir ./tokenizer/touchgrass" }, | |
| { title: "3. Generate Music QA Dataset", cmd: "python data/music_qa_generator.py \\\n --categories all \\\n --instruments all \\\n --skill_levels beginner intermediate advanced \\\n --output ./data/music_qa.json" }, | |
| { title: "4. LoRA Fine-tune", cmd: "python training/finetune.py \\\n --base_model Qwen/Qwen3.5-7B-Instruct \\\n --train_data ./data/music_qa.json \\\n --use_lora --lora_r 16 --lora_alpha 32 \\\n --epochs 3 --batch_size 8 \\\n --learning_rate 1e-4 \\\n --mixed_precision bf16" }, | |
| { title: "5. Push to HuggingFace", cmd: "from huggingface_hub import HfApi\napi = HfApi()\napi.upload_folder(\n folder_path='./outputs/checkpoint-final',\n repo_id='Matrix-Corp/TouchGrass-7B',\n repo_type='model'\n)" }, | |
| ], | |
| ollama: "ollama create touchgrass-7b -f ollama_7b_modelfile\nollama run touchgrass-7b \"Teach me how to play a G chord\"", | |
| vllm: "python inference/inference.py \\\n --model Matrix-Corp/TouchGrass-7B \\\n --instrument guitar \\\n --skill_level beginner \\\n --interactive", | |
| hf: "from transformers import AutoModelForCausalLM, AutoTokenizer\n\nmodel = AutoModelForCausalLM.from_pretrained(\n \"Matrix-Corp/TouchGrass-7B\",\n torch_dtype=\"auto\",\n device_map=\"auto\"\n)\ntokenizer = AutoTokenizer.from_pretrained(\n \"Matrix-Corp/TouchGrass-7B\"\n)\ninputs = tokenizer(\n \"[GUITAR][BEGINNER] How do I play a G chord?\",\n return_tensors=\"pt\"\n)\noutputs = model.generate(**inputs, max_new_tokens=512)\nprint(tokenizer.decode(outputs[0]))", | |
| }, | |
| }; | |
| const HARDWARE = [ | |
| { name: "MacBook Pro M2 16GB", icon: "💻", vram: 16, type: "MPS", canRun: ["Zenith-7B (INT4)", "Vortex-7B", "TouchGrass-3B", "TouchGrass-7B"] }, | |
| { name: "MacBook Pro M3 Max 48GB",icon: "💻", vram: 48, type: "MPS", canRun: ["Zenith-7B", "Zenith-28B (INT4)", "Vortex-7B", "Vortex-13B", "TouchGrass-3B", "TouchGrass-7B"] }, | |
| { name: "Nvidia 4060 Laptop 8GB", icon: "🖥️", vram: 8, type: "CUDA", canRun: ["Zenith-7B (INT4)", "Vortex-7B", "TouchGrass-3B"] }, | |
| { name: "Nvidia 4060 Ti 16GB", icon: "🖥️", vram: 16, type: "CUDA", canRun: ["Zenith-7B", "Vortex-7B", "Vortex-13B (INT8)", "TouchGrass-3B", "TouchGrass-7B"] }, | |
| { name: "Tenstorrent p300a", icon: "⚡", vram: 64, type: "TENSTORRENT", canRun: ["Zenith-7B", "Zenith-28B", "Zenith-32B", "Zenith-70B (INT4)"] }, | |
| { name: "2× Tenstorrent p300a", icon: "⚡", vram: 128, type: "TENSTORRENT", canRun: ["Zenith-7B", "Zenith-28B", "Zenith-32B", "Zenith-70B (INT8)"] }, | |
| { name: "A100 80GB", icon: "🔥", vram: 80, type: "CUDA", canRun: ["Zenith-7B", "Zenith-28B", "Zenith-32B", "Zenith-70B (INT4)", "Vortex-7B", "Vortex-13B", "TouchGrass-3B", "TouchGrass-7B"] }, | |
| ]; | |
| const STATUS_STYLE = { | |
| preview: { label: "PREVIEW", color: "#f59e0b", bg: "rgba(245,158,11,0.1)" }, | |
| planned: { label: "PLANNED", color: "#64748b", bg: "rgba(100,116,139,0.1)" }, | |
| released: { label: "RELEASED", color: "#4ade80", bg: "rgba(74,222,128,0.1)" }, | |
| }; | |
| const NAV = [ | |
| { id: "explorer", label: "Models", icon: "◈" }, | |
| { id: "architecture", label: "Architecture", icon: "⬡" }, | |
| { id: "benchmarks", label: "Benchmarks", icon: "▲" }, | |
| { id: "training", label: "Training", icon: "◎" }, | |
| { id: "deploy", label: "Deploy", icon: "▶" }, | |
| { id: "hardware", label: "Hardware", icon: "⬢" }, | |
| ]; | |
| function CodeBlock({ code, color }) { | |
| const [copied, setCopied] = useState(false); | |
| const copy = () => { | |
| navigator.clipboard.writeText(code).then(() => { setCopied(true); setTimeout(() => setCopied(false), 1800); }); | |
| }; | |
| return ( | |
| <div style={{ position: "relative" }}> | |
| <pre style={{ background: "#060a0e", border: `1px solid ${C.border}`, borderRadius: 8, padding: "18px 20px", fontSize: 11, color: "#7dd3fc", overflowX: "auto", lineHeight: 1.9, margin: 0, whiteSpace: "pre-wrap", wordBreak: "break-all" }}> | |
| {code} | |
| </pre> | |
| <button onClick={copy} style={{ position: "absolute", top: 10, right: 10, background: copied ? `${color}22` : "transparent", border: `1px solid ${copied ? color : C.border}`, borderRadius: 5, padding: "4px 10px", color: copied ? color : C.muted, cursor: "pointer", fontSize: 9, letterSpacing: 1 }}> | |
| {copied ? "✓ COPIED" : "COPY"} | |
| </button> | |
| </div> | |
| ); | |
| } | |
| function App() { | |
| const [family, setFamily] = useState("zenith"); | |
| const [section, setSection] = useState("explorer"); | |
| const [hw, setHw] = useState(null); | |
| const [deployTab, setDeployTab] = useState("ollama"); | |
| const [trainStep, setTrainStep] = useState(0); | |
| const F = MODELS[family]; | |
| const col = F.color; | |
| const glow = F.glow; | |
| const handleFamilyChange = (key) => { setFamily(key); setTrainStep(0); setHw(null); }; | |
| return ( | |
| <div style={{ background: C.bg, minHeight: "100vh", display: "flex", flexDirection: "column", color: C.text }}> | |
| {/* ── Header ── */} | |
| <div style={{ borderBottom: `1px solid ${C.border}`, padding: "14px 24px", display: "flex", alignItems: "center", justifyContent: "space-between", background: "rgba(13,17,23,0.98)", position: "sticky", top: 0, zIndex: 99 }}> | |
| <div style={{ display: "flex", alignItems: "center", gap: 12 }}> | |
| <div style={{ width: 34, height: 34, background: `linear-gradient(135deg, ${C.zenith}, ${C.vortex})`, borderRadius: 7, display: "flex", alignItems: "center", justifyContent: "center", fontSize: 17, fontWeight: 800, color: "#000" }}>M</div> | |
| <div> | |
| <div style={{ fontSize: 13, fontWeight: 700, letterSpacing: 3, color: "#fff" }}>MATRIX.CORP</div> | |
| <div style={{ fontSize: 9, color: C.muted, letterSpacing: 2 }}>AI MODEL REGISTRY</div> | |
| </div> | |
| </div> | |
| <div style={{ display: "flex", gap: 8 }}> | |
| {Object.entries(MODELS).map(([key, m]) => ( | |
| <button key={key} onClick={() => handleFamilyChange(key)} style={{ background: family === key ? m.glow : "transparent", border: `1px solid ${family === key ? m.color : C.border}`, borderRadius: 6, padding: "6px 14px", color: family === key ? m.color : C.muted, cursor: "pointer", fontSize: 11, letterSpacing: 1, transition: "all 0.15s" }}> | |
| {m.icon} {key === "touchgrass" ? "TOUCH GRASS" : m.name.toUpperCase().split(" ")[0]} | |
| </button> | |
| ))} | |
| </div> | |
| </div> | |
| <div style={{ display: "flex", flex: 1, minHeight: 0 }}> | |
| {/* ── Sidebar ── */} | |
| <div style={{ width: 188, borderRight: `1px solid ${C.border}`, padding: "20px 0", display: "flex", flexDirection: "column", gap: 2, flexShrink: 0, background: "rgba(13,17,23,0.6)" }}> | |
| {NAV.map(item => ( | |
| <button key={item.id} onClick={() => setSection(item.id)} style={{ background: section === item.id ? `linear-gradient(90deg, ${glow}, transparent)` : "transparent", border: "none", borderLeft: `2px solid ${section === item.id ? col : "transparent"}`, padding: "11px 20px", color: section === item.id ? col : C.muted, cursor: "pointer", fontSize: 11, letterSpacing: 1, textAlign: "left", display: "flex", alignItems: "center", gap: 10, transition: "all 0.15s" }}> | |
| <span style={{ fontSize: 13, opacity: section === item.id ? 1 : 0.6 }}>{item.icon}</span> | |
| {item.label.toUpperCase()} | |
| </button> | |
| ))} | |
| {/* Family pill */} | |
| <div style={{ margin: "20px 12px 0", padding: "14px 12px", background: glow, border: `1px solid ${col}22`, borderRadius: 9 }}> | |
| <div style={{ fontSize: 22, marginBottom: 7 }}>{F.icon}</div> | |
| <div style={{ fontSize: 10, color: col, letterSpacing: 1, marginBottom: 5, fontWeight: 700 }}>{F.name.toUpperCase()}</div> | |
| <div style={{ fontSize: 9, color: C.muted, lineHeight: 1.6 }}>{F.hardware}</div> | |
| <div style={{ marginTop: 10, fontSize: 9, color: C.muted }}> | |
| {F.models.length} model{F.models.length > 1 ? "s" : ""} | |
| </div> | |
| </div> | |
| </div> | |
| {/* ── Main Content ── */} | |
| <div style={{ flex: 1, padding: "28px 32px", overflowY: "auto" }}> | |
| {/* ────── EXPLORER ────── */} | |
| {section === "explorer" && ( | |
| <div> | |
| <div style={{ marginBottom: 26 }}> | |
| <div style={{ fontSize: 10, color: col, letterSpacing: 3, marginBottom: 7 }}>MODEL EXPLORER</div> | |
| <div style={{ fontSize: 24, fontWeight: 800, color: "#fff", marginBottom: 5 }}>{F.icon} {F.name}</div> | |
| <div style={{ fontSize: 12, color: C.muted }}>{F.tagline}</div> | |
| </div> | |
| <div style={{ display: "flex", flexWrap: "wrap", gap: 7, marginBottom: 28 }}> | |
| {F.features.map(f => ( | |
| <span key={f} style={{ padding: "4px 13px", background: glow, border: `1px solid ${col}30`, borderRadius: 20, fontSize: 10, color: col }}>{f}</span> | |
| ))} | |
| </div> | |
| <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(270px, 1fr))", gap: 16 }}> | |
| {F.models.map(m => ( | |
| <div key={m.name} style={{ background: C.card, border: `1px solid ${C.border}`, borderRadius: 11, padding: 22, transition: "border-color 0.15s, transform 0.15s", cursor: "default" }} | |
| onMouseEnter={e => { e.currentTarget.style.borderColor = col + "55"; e.currentTarget.style.transform = "translateY(-2px)"; }} | |
| onMouseLeave={e => { e.currentTarget.style.borderColor = C.border; e.currentTarget.style.transform = "none"; }}> | |
| <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", marginBottom: 14 }}> | |
| <div> | |
| <div style={{ fontSize: 15, fontWeight: 700, color: "#fff" }}>{m.name}</div> | |
| <div style={{ fontSize: 11, color: col, marginTop: 3 }}>{m.params} parameters</div> | |
| </div> | |
| <span style={{ padding: "3px 9px", background: STATUS_STYLE[m.status].bg, color: STATUS_STYLE[m.status].color, borderRadius: 5, fontSize: 9, letterSpacing: 1 }}>{STATUS_STYLE[m.status].label}</span> | |
| </div> | |
| <div style={{ fontSize: 11, color: C.muted, marginBottom: 14, lineHeight: 1.7 }}>{m.use}</div> | |
| <div style={{ borderTop: `1px solid ${C.border}`, paddingTop: 13, display: "flex", flexDirection: "column", gap: 7 }}> | |
| <div style={{ display: "flex", justifyContent: "space-between", fontSize: 10 }}> | |
| <span style={{ color: C.muted }}>VRAM REQUIRED</span> | |
| <span style={{ color: "#fff", fontWeight: 700 }}>{m.vram}</span> | |
| </div> | |
| <div style={{ display: "flex", justifyContent: "space-between", fontSize: 10, gap: 10 }}> | |
| <span style={{ color: C.muted, flexShrink: 0 }}>BASE MODEL</span> | |
| <span style={{ color: "#94a3b8", textAlign: "right" }}>{m.base}</span> | |
| </div> | |
| </div> | |
| </div> | |
| ))} | |
| </div> | |
| </div> | |
| )} | |
| {/* ────── ARCHITECTURE ────── */} | |
| {section === "architecture" && ( | |
| <div> | |
| <div style={{ marginBottom: 26 }}> | |
| <div style={{ fontSize: 10, color: col, letterSpacing: 3, marginBottom: 7 }}>ARCHITECTURE VISUALIZER</div> | |
| <div style={{ fontSize: 24, fontWeight: 800, color: "#fff" }}>{F.icon} {F.name} — Layer Stack</div> | |
| </div> | |
| <div style={{ display: "flex", gap: 28, flexWrap: "wrap" }}> | |
| <div style={{ flex: "1 1 380px", maxWidth: 480 }}> | |
| {F.arch.map((layer, i) => ( | |
| <div key={i} style={{ padding: "13px 20px", background: i % 2 === 0 ? `${layer.color}10` : `${layer.color}07`, border: `1px solid ${layer.color}30`, borderBottom: i < F.arch.length - 1 ? "none" : `1px solid ${layer.color}30`, borderRadius: i === 0 ? "9px 9px 0 0" : i === F.arch.length - 1 ? "0 0 9px 9px" : 0, display: "flex", justifyContent: "space-between", alignItems: "center" }}> | |
| <span style={{ fontSize: 12, color: layer.color }}>{layer.label}</span> | |
| <span style={{ fontSize: 9, color: C.muted, flexShrink: 0, marginLeft: 10 }}>L{i + 1}</span> | |
| </div> | |
| ))} | |
| </div> | |
| {family === "zenith" && ( | |
| <div style={{ flex: "1 1 280px" }}> | |
| <div style={{ padding: 20, background: C.card, border: `1px solid ${C.border}`, borderRadius: 11, marginBottom: 16 }}> | |
| <div style={{ fontSize: 10, color: col, letterSpacing: 2, marginBottom: 14 }}>EQ ENGINE DEEP DIVE</div> | |
| {[ | |
| ["EQ state vector", "frustration (0–1) + 8 emotion logits = 9 values"], | |
| ["Attention bias", "per-head scalar → shifts attention distribution"], | |
| ["FFN gate", "sigmoid over hidden dim → suppresses/amplifies neurons"], | |
| ["GRU recurrence", "state passed layer-to-layer → emotional memory"], | |
| ["Consistency loss", "MSE between adjacent layer states → smooth arc"], | |
| ["Always FP16", "EQ modules never quantized — quality critical"], | |
| ].map(([k, v], i) => ( | |
| <div key={i} style={{ marginBottom: 10, paddingBottom: 10, borderBottom: i < 5 ? `1px solid ${C.border}` : "none" }}> | |
| <div style={{ fontSize: 10, color: col, marginBottom: 3 }}>{k}</div> | |
| <div style={{ fontSize: 10, color: C.muted, lineHeight: 1.5 }}>{v}</div> | |
| </div> | |
| ))} | |
| </div> | |
| </div> | |
| )} | |
| {family === "vortex" && ( | |
| <div style={{ flex: "1 1 280px" }}> | |
| <div style={{ padding: 20, background: C.card, border: `1px solid ${C.border}`, borderRadius: 11 }}> | |
| <div style={{ fontSize: 10, color: col, letterSpacing: 2, marginBottom: 14 }}>SCIENCE MODULES</div> | |
| {[ | |
| ["Equation Module", "LaTeX span detection + structural tree encoding"], | |
| ["Numerical Module", "Digit-level encoding, sci notation, unit awareness"], | |
| ["Citation Module", "Citation span detection + provenance tracking"], | |
| ["Molecular Module", "118 element embeddings + SMILES + amino acids"], | |
| ["SciGate FFN", "7-domain routing — different FFN path per science area"], | |
| ].map(([k, v], i) => ( | |
| <div key={i} style={{ marginBottom: 10, paddingBottom: 10, borderBottom: i < 4 ? `1px solid ${C.border}` : "none" }}> | |
| <div style={{ fontSize: 10, color: col, marginBottom: 3 }}>{k}</div> | |
| <div style={{ fontSize: 10, color: C.muted, lineHeight: 1.5 }}>{v}</div> | |
| </div> | |
| ))} | |
| </div> | |
| </div> | |
| )} | |
| {family === "touchgrass" && ( | |
| <div style={{ flex: "1 1 280px" }}> | |
| <div style={{ padding: 20, background: C.card, border: `1px solid ${C.border}`, borderRadius: 11 }}> | |
| <div style={{ fontSize: 10, color: col, letterSpacing: 2, marginBottom: 14 }}>MUSIC MODULES</div> | |
| {[ | |
| ["Tab & Chord Module", "Validated ASCII tab + chord diagram generation"], | |
| ["Theory Engine", "Circle of fifths, modes, progressions, voice leading"], | |
| ["Ear Training", "Interval/quality description, solfege exercises"], | |
| ["Music EQ Adapter", "4 emotions: frustrated / confused / excited / confident"], | |
| ["Songwriting Module", "Structure, lyrics, hooks, genre-aware progressions"], | |
| ].map(([k, v], i) => ( | |
| <div key={i} style={{ marginBottom: 10, paddingBottom: 10, borderBottom: i < 4 ? `1px solid ${C.border}` : "none" }}> | |
| <div style={{ fontSize: 10, color: col, marginBottom: 3 }}>{k}</div> | |
| <div style={{ fontSize: 10, color: C.muted, lineHeight: 1.5 }}>{v}</div> | |
| </div> | |
| ))} | |
| </div> | |
| </div> | |
| )} | |
| </div> | |
| </div> | |
| )} | |
| {/* ────── BENCHMARKS ────── */} | |
| {section === "benchmarks" && ( | |
| <div> | |
| <div style={{ marginBottom: 26 }}> | |
| <div style={{ fontSize: 10, color: col, letterSpacing: 3, marginBottom: 7 }}>BENCHMARK CHARTS</div> | |
| <div style={{ fontSize: 24, fontWeight: 800, color: "#fff" }}>{F.icon} {F.name} — Estimated Performance</div> | |
| <div style={{ marginTop: 8, padding: "8px 14px", background: "rgba(245,158,11,0.08)", border: "1px solid rgba(245,158,11,0.2)", borderRadius: 7, fontSize: 10, color: "#f59e0b", display: "inline-block" }}> | |
| ⚠ Preliminary estimates based on base model benchmarks + fine-tuning projections. Real benchmarks coming with trained weights. | |
| </div> | |
| </div> | |
| <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(300px, 1fr))", gap: 16 }}> | |
| {F.benchmarks.map(bench => ( | |
| <div key={bench.name} style={{ background: C.card, border: `1px solid ${C.border}`, borderRadius: 11, padding: 22 }}> | |
| <div style={{ fontSize: 13, color: "#fff", marginBottom: 18, letterSpacing: 1, fontWeight: 700 }}>{bench.name}</div> | |
| {Object.entries(bench.scores).map(([model, score]) => ( | |
| <div key={model} style={{ marginBottom: 14 }}> | |
| <div style={{ display: "flex", justifyContent: "space-between", fontSize: 10, marginBottom: 7 }}> | |
| <span style={{ color: C.muted }}>{model}</span> | |
| <span style={{ color: col, fontWeight: 700 }}>{score}%</span> | |
| </div> | |
| <div style={{ height: 7, background: C.border, borderRadius: 4, overflow: "hidden" }}> | |
| <div style={{ height: "100%", width: `${score}%`, background: `linear-gradient(90deg, ${col}, ${col}77)`, borderRadius: 4 }} /> | |
| </div> | |
| </div> | |
| ))} | |
| </div> | |
| ))} | |
| </div> | |
| </div> | |
| )} | |
| {/* ────── TRAINING ────── */} | |
| {section === "training" && ( | |
| <div> | |
| <div style={{ marginBottom: 26 }}> | |
| <div style={{ fontSize: 10, color: col, letterSpacing: 3, marginBottom: 7 }}>INTERACTIVE TRAINING GUIDE</div> | |
| <div style={{ fontSize: 24, fontWeight: 800, color: "#fff" }}>{F.icon} How to Train {F.name}</div> | |
| </div> | |
| {/* Step tabs */} | |
| <div style={{ display: "flex", marginBottom: 24, borderRadius: 9, overflow: "hidden", border: `1px solid ${C.border}` }}> | |
| {F.trainSteps.map((s, i) => ( | |
| <button key={i} onClick={() => setTrainStep(i)} style={{ flex: 1, padding: "11px 6px", background: trainStep === i ? glow : "transparent", border: "none", borderRight: i < F.trainSteps.length - 1 ? `1px solid ${C.border}` : "none", color: trainStep === i ? col : C.muted, cursor: "pointer", fontSize: 9, letterSpacing: 0.5, transition: "all 0.15s", lineHeight: 1.6 }}> | |
| <div style={{ fontSize: 16, marginBottom: 3 }}>{"①②③④⑤"[i]}</div> | |
| STEP {i + 1} | |
| </button> | |
| ))} | |
| </div> | |
| <div style={{ background: C.card, border: `1px solid ${col}33`, borderRadius: 11, padding: 26 }}> | |
| <div style={{ fontSize: 13, color: col, marginBottom: 18, letterSpacing: 1, fontWeight: 700 }}>{F.trainSteps[trainStep].title}</div> | |
| <CodeBlock code={F.trainSteps[trainStep].cmd} color={col} /> | |
| <div style={{ display: "flex", justifyContent: "space-between", marginTop: 22 }}> | |
| <button onClick={() => setTrainStep(Math.max(0, trainStep - 1))} disabled={trainStep === 0} style={{ background: "transparent", border: `1px solid ${trainStep === 0 ? C.border + "55" : C.border}`, borderRadius: 7, padding: "9px 22px", color: trainStep === 0 ? C.muted + "55" : C.muted, cursor: trainStep === 0 ? "default" : "pointer", fontSize: 11 }}>← Previous</button> | |
| <span style={{ fontSize: 10, color: C.muted, alignSelf: "center" }}>{trainStep + 1} / {F.trainSteps.length}</span> | |
| <button onClick={() => setTrainStep(Math.min(F.trainSteps.length - 1, trainStep + 1))} disabled={trainStep === F.trainSteps.length - 1} style={{ background: trainStep === F.trainSteps.length - 1 ? "transparent" : glow, border: `1px solid ${trainStep === F.trainSteps.length - 1 ? C.border + "55" : col}`, borderRadius: 7, padding: "9px 22px", color: trainStep === F.trainSteps.length - 1 ? C.muted + "55" : col, cursor: trainStep === F.trainSteps.length - 1 ? "default" : "pointer", fontSize: 11 }}>Next Step →</button> | |
| </div> | |
| </div> | |
| </div> | |
| )} | |
| {/* ────── DEPLOY ────── */} | |
| {section === "deploy" && ( | |
| <div> | |
| <div style={{ marginBottom: 26 }}> | |
| <div style={{ fontSize: 10, color: col, letterSpacing: 3, marginBottom: 7 }}>DEPLOYMENT WALKTHROUGH</div> | |
| <div style={{ fontSize: 24, fontWeight: 800, color: "#fff" }}>{F.icon} Deploy {F.name}</div> | |
| </div> | |
| <div style={{ display: "flex", marginBottom: 22, borderRadius: 9, overflow: "hidden", border: `1px solid ${C.border}`, width: "fit-content" }}> | |
| {[["ollama","🦙 Ollama"],["vllm","⚡ vLLM"],["hf","🤗 Transformers"]].map(([id, label]) => ( | |
| <button key={id} onClick={() => setDeployTab(id)} style={{ padding: "10px 22px", background: deployTab === id ? glow : "transparent", border: "none", borderRight: id !== "hf" ? `1px solid ${C.border}` : "none", color: deployTab === id ? col : C.muted, cursor: "pointer", fontSize: 11, letterSpacing: 0.5, transition: "all 0.15s" }}> | |
| {label} | |
| </button> | |
| ))} | |
| </div> | |
| <div style={{ background: C.card, border: `1px solid ${C.border}`, borderRadius: 11, padding: 26 }}> | |
| <div style={{ fontSize: 11, color: col, marginBottom: 18, letterSpacing: 1 }}> | |
| {deployTab === "ollama" ? "LOCAL DEPLOYMENT — Easiest, works offline" : deployTab === "vllm" ? "HIGH-THROUGHPUT API SERVER" : "HUGGING FACE TRANSFORMERS INTEGRATION"} | |
| </div> | |
| <CodeBlock code={deployTab === "ollama" ? F.ollama : deployTab === "vllm" ? F.vllm : F.hf} color={col} /> | |
| <div style={{ marginTop: 18, padding: 14, background: `${col}0e`, border: `1px solid ${col}20`, borderRadius: 8, fontSize: 11, color: C.muted, lineHeight: 1.7 }}> | |
| {deployTab === "ollama" && "💡 Best for local use, privacy, and testing. Install Ollama from ollama.ai — works on Mac, Linux, and Windows. No GPU required for 3B/7B models."} | |
| {deployTab === "vllm" && "💡 Best for production APIs and high concurrency. Requires CUDA GPU. Supports OpenAI-compatible API format — drop-in replacement for existing pipelines."} | |
| {deployTab === "hf" && "💡 Best for research and custom pipelines. Works with any PyTorch-compatible hardware including CPU, CUDA, and MPS (Apple Silicon)."} | |
| </div> | |
| </div> | |
| </div> | |
| )} | |
| {/* ────── HARDWARE ────── */} | |
| {section === "hardware" && ( | |
| <div> | |
| <div style={{ marginBottom: 26 }}> | |
| <div style={{ fontSize: 10, color: col, letterSpacing: 3, marginBottom: 7 }}>HARDWARE SELECTOR</div> | |
| <div style={{ fontSize: 24, fontWeight: 800, color: "#fff" }}>What Can I Run?</div> | |
| <div style={{ fontSize: 12, color: C.muted, marginTop: 5 }}>Click your hardware to see compatible models across all families</div> | |
| </div> | |
| <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(210px, 1fr))", gap: 12, marginBottom: 28 }}> | |
| {HARDWARE.map((h, i) => ( | |
| <button key={i} onClick={() => setHw(hw === i ? null : i)} style={{ background: hw === i ? glow : C.card, border: `1px solid ${hw === i ? col : C.border}`, borderRadius: 11, padding: "16px 18px", textAlign: "left", cursor: "pointer", transition: "all 0.15s", transform: hw === i ? "translateY(-2px)" : "none" }}> | |
| <div style={{ fontSize: 22, marginBottom: 9 }}>{h.icon}</div> | |
| <div style={{ fontSize: 12, color: "#fff", marginBottom: 5, fontWeight: 600 }}>{h.name}</div> | |
| <div style={{ display: "flex", gap: 8 }}> | |
| <span style={{ fontSize: 9, color: C.muted, background: C.border, padding: "2px 7px", borderRadius: 4 }}>{h.vram}GB</span> | |
| <span style={{ fontSize: 9, color: C.muted, background: C.border, padding: "2px 7px", borderRadius: 4 }}>{h.type}</span> | |
| </div> | |
| </button> | |
| ))} | |
| </div> | |
| {hw !== null && ( | |
| <div style={{ background: C.card, border: `1px solid ${col}33`, borderRadius: 11, padding: 26 }}> | |
| <div style={{ fontSize: 12, color: col, marginBottom: 18, letterSpacing: 1, fontWeight: 700 }}> | |
| {HARDWARE[hw].icon} {HARDWARE[hw].name} — {HARDWARE[hw].canRun.length} Compatible Models | |
| </div> | |
| <div style={{ display: "flex", flexWrap: "wrap", gap: 9 }}> | |
| {HARDWARE[hw].canRun.map(m => { | |
| const isZenith = m.startsWith("Zenith"); | |
| const isVortex = m.startsWith("Vortex"); | |
| const isTG = m.startsWith("Touch"); | |
| const mc = isZenith ? C.zenith : isVortex ? C.vortex : C.tg; | |
| return ( | |
| <span key={m} style={{ padding: "7px 16px", background: `${mc}11`, border: `1px solid ${mc}33`, borderRadius: 7, fontSize: 11, color: mc, fontWeight: 600 }}>{m}</span> | |
| ); | |
| })} | |
| </div> | |
| <div style={{ marginTop: 18, padding: 14, background: "rgba(255,255,255,0.03)", borderRadius: 8, fontSize: 10, color: C.muted, lineHeight: 1.7 }}> | |
| 💡 Models marked with (INT4) or (INT8) require quantization. Use bitsandbytes for CUDA or llama.cpp for CPU/MPS inference. | |
| </div> | |
| </div> | |
| )} | |
| </div> | |
| )} | |
| </div> | |
| </div> | |
| {/* ── Footer ── */} | |
| <div style={{ borderTop: `1px solid ${C.border}`, padding: "11px 24px", display: "flex", justifyContent: "space-between", alignItems: "center", fontSize: 9, color: C.muted, letterSpacing: 1, background: "rgba(13,17,23,0.8)" }}> | |
| <span>MATRIX.CORP © 2025 — 3 FAMILIES · 8 MODELS · BUILT BY ZANDY-WANDY</span> | |
| <div style={{ display: "flex", gap: 18 }}> | |
| <span style={{ color: C.zenith }}>● ZENITH</span> | |
| <span style={{ color: C.vortex }}>● VORTEX</span> | |
| <span style={{ color: C.tg }}>● TOUCH GRASS</span> | |
| </div> | |
| </div> | |
| </div> | |
| ); | |
| } | |
| ReactDOM.createRoot(document.getElementById("root")).render(<App />); | |
| </script> | |
| </body> | |
| </html> |