Hugging Face's logo

Spaces:
Matrix-Corp
/
Guide
Running

App Files Community
Zandy-Wandy commited on
Commit
543c45d
·
verified ·
1 Parent(s): f1eedb3

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +537 -19
index.html CHANGED
@@ -1,19 +1,537 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8"/>
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
6
+ <title>Matrix.Corp — AI Model Registry</title>
7
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js"></script>
8
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js"></script>
9
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/7.23.2/babel.min.js"></script>
10
+ <style>
11
+ * { box-sizing: border-box; margin: 0; padding: 0; }
12
+ body { background: #080c10; font-family: 'IBM Plex Mono', 'Courier New', monospace; color: #e2e8f0; }
13
+ ::-webkit-scrollbar { width: 6px; height: 6px; }
14
+ ::-webkit-scrollbar-track { background: #0d1117; }
15
+ ::-webkit-scrollbar-thumb { background: #1e2936; border-radius: 3px; }
16
+ ::-webkit-scrollbar-thumb:hover { background: #2d3f52; }
17
+ button { font-family: 'IBM Plex Mono', 'Courier New', monospace; }
18
+ pre { font-family: 'IBM Plex Mono', 'Courier New', monospace; }
19
+ </style>
20
+ </head>
21
+ <body>
22
+ <div id="root"></div>
23
+ <script type="text/babel">
24
+
25
+ const { useState } = React;
26
+
27
+ const C = {
28
+ zenith: "#6ee7f7",
29
+ vortex: "#a78bfa",
30
+ tg: "#4ade80",
31
+ bg: "#080c10",
32
+ card: "#0d1117",
33
+ border: "#1e2936",
34
+ text: "#e2e8f0",
35
+ muted: "#64748b",
36
+ };
37
+
38
+ const MODELS = {
39
+ zenith: {
40
+ color: C.zenith, glow: "rgba(110,231,247,0.12)", icon: "🌌",
41
+ name: "Zenith", tagline: "Reasoning & Emotional Intelligence",
42
+ hardware: "Tenstorrent p300a",
43
+ models: [
44
+ { name: "Zenith-7B", params: "7B", status: "preview", use: "Code generation & fast inference", vram: "14GB", base: "Qwen2.5-Coder-7B" },
45
+ { name: "Zenith-28B", params: "28B", status: "preview", use: "Nuanced reasoning + EQ awareness", vram: "56GB", base: "Qwen3.5-27B (Claude Opus 4.6 distill)" },
46
+ { name: "Zenith-32B", params: "32B", status: "preview", use: "Mathematical & structured reasoning", vram: "64GB", base: "DeepSeek-R1-Distill-Qwen-32B" },
47
+ { name: "Zenith-70B", params: "70B", status: "preview", use: "Max capability — multi-card", vram: "140GB / INT4: 35GB", base: "DeepSeek-R1-Distill-Llama-70B" },
48
+ ],
49
+ features: ["Ring Attention 32K", "MoE 12 experts top-2", "EQ Engine (V1)", "TP=8 / PP=4", "NoC optimized", "Ollama + vLLM"],
50
+ benchmarks: [
51
+ { name: "GSM8K", scores: { "28B": 75, "32B": 82, "70B": 89 } },
52
+ { name: "HumanEval", scores: { "28B": 45, "32B": 52, "70B": 68 } },
53
+ { name: "MATH", scores: { "28B": 35, "32B": 42, "70B": 55 } },
54
+ { name: "EQ Bench", scores: { "28B": 78, "32B": 80, "70B": 84 } },
55
+ { name: "TruthfulQA",scores: { "28B": 65, "32B": 70, "70B": 76 } },
56
+ ],
57
+ arch: [
58
+ { label: "Input Embedding + Position", color: "#6ee7f7" },
59
+ { label: "Ring Attention (32K, 8K chunks)", color: "#38bdf8" },
60
+ { label: "MoE Layer — 12 experts, top-2 routing", color: "#6ee7f7" },
61
+ { label: "EQ Attention Bias (per-head)", color: "#67e8f9" },
62
+ { label: "EQ-Gated FFN (sigmoid gate)", color: "#38bdf8" },
63
+ { label: "EQ State Recurrence (GRU)", color: "#6ee7f7" },
64
+ { label: "× 36 layers (28B) / 40 (32B) / 64 (70B)", color: "#475569" },
65
+ { label: "LM Head", color: "#6ee7f7" },
66
+ ],
67
+ trainSteps: [
68
+ { title: "1. Install Dependencies", cmd: "pip install torch transformers accelerate peft bitsandbytes\npip install flash-attn # CUDA only" },
69
+ { 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" },
70
+ { 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" },
71
+ { 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" },
72
+ { 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)" },
73
+ ],
74
+ ollama: "ollama create zenith-28b -f Modelfile\nollama run zenith-28b \"Solve this step by step: ...\"",
75
+ 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",
76
+ 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]))",
77
+ },
78
+ vortex: {
79
+ color: C.vortex, glow: "rgba(167,139,250,0.12)", icon: "🔬",
80
+ name: "Vortex Scientific", tagline: "Deep Science Reasoning",
81
+ hardware: "MacBook M2/M3 + Nvidia 4060",
82
+ models: [
83
+ { name: "Vortex-7B", params: "7B", status: "preview", use: "Science reasoning on consumer hardware", vram: "8GB", base: "From scratch — custom architecture" },
84
+ { name: "Vortex-13B", params: "13B", status: "preview", use: "Advanced multi-domain science", vram: "16GB / INT8", base: "From scratch — custom architecture" },
85
+ ],
86
+ features: ["Hybrid SSM + Attention", "60% SSM / 40% Attn (7B)", "4 Science Modules", "Custom 50K Sci Tokenizer", "LaTeX & Equations", "Molecular Module"],
87
+ benchmarks: [
88
+ { name: "Physics", scores: { "7B": 62, "13B": 74 } },
89
+ { name: "Math", scores: { "7B": 58, "13B": 71 } },
90
+ { name: "Chemistry", scores: { "7B": 65, "13B": 78 } },
91
+ { name: "Biology", scores: { "7B": 60, "13B": 72 } },
92
+ { name: "Zoology", scores: { "7B": 55, "13B": 68 } },
93
+ ],
94
+ arch: [
95
+ { label: "Science Tokenizer (50K vocab)", color: "#a78bfa" },
96
+ { label: "SSM Block — O(n) complexity (Mamba-style)", color: "#8b5cf6" },
97
+ { label: "Local Attention — 512 token window", color: "#a78bfa" },
98
+ { label: "Equation Module (LaTeX parser)", color: "#c4b5fd" },
99
+ { label: "Numerical Reasoning Module", color: "#8b5cf6" },
100
+ { label: "Citation Awareness Module", color: "#a78bfa" },
101
+ { label: "Molecular Module (118 elements)", color: "#c4b5fd" },
102
+ { label: "SciGate FFN — domain routing", color: "#8b5cf6" },
103
+ { label: "× 32 layers (7B) / 40 (13B)", color: "#475569" },
104
+ { label: "LM Head", color: "#a78bfa" },
105
+ ],
106
+ trainSteps: [
107
+ { title: "1. Install Dependencies", cmd: "pip install torch transformers accelerate datasets\npip install rdkit pubchempy pylatexenc # science deps\npip install flash-attn # CUDA only" },
108
+ { 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" },
109
+ { 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" },
110
+ { 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" },
111
+ { 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)" },
112
+ ],
113
+ ollama: "ollama create vortex-7b -f ollama_7b_modelfile\nollama run vortex-7b \"Explain quantum entanglement\"",
114
+ vllm: "python inference/inference.py \\\n --model_path ./checkpoints/latest \\\n --model_size 7b \\\n --device cuda \\\n --interactive",
115
+ 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]))",
116
+ },
117
+ touchgrass: {
118
+ color: C.tg, glow: "rgba(74,222,128,0.12)", icon: "🌿",
119
+ name: "Touch Grass", tagline: "Music AI Assistant",
120
+ hardware: "Any hardware — ultra lightweight",
121
+ models: [
122
+ { name: "TouchGrass-3B", params: "3B", status: "planned", use: "Ultra lightweight music assistant", vram: "6GB", base: "Qwen3.5-3B-Instruct" },
123
+ { name: "TouchGrass-7B", params: "7B", status: "planned", use: "Full-featured music assistant", vram: "14GB", base: "Qwen3.5-7B-Instruct" },
124
+ ],
125
+ features: ["Tab & Chord Generation", "Music Theory Engine", "Ear Training Module", "Music EQ Adapter", "Songwriting Assistant", "All Instruments"],
126
+ benchmarks: [
127
+ { name: "Music Theory", scores: { "3B": 70, "7B": 82 } },
128
+ { name: "Tab Gen", scores: { "3B": 65, "7B": 78 } },
129
+ { name: "Ear Training", scores: { "3B": 68, "7B": 80 } },
130
+ { name: "Songwriting", scores: { "3B": 72, "7B": 85 } },
131
+ { name: "EQ Detect", scores: { "3B": 74, "7B": 83 } },
132
+ ],
133
+ arch: [
134
+ { label: "Qwen3.5 Base + Music Token Extensions", color: "#4ade80" },
135
+ { label: "LoRA Fine-tune (r=16, music data)", color: "#22c55e" },
136
+ { label: "Tab & Chord Module (validated output)", color: "#4ade80" },
137
+ { label: "Music Theory Engine (circle of fifths etc)", color: "#86efac" },
138
+ { label: "Ear Training Module (interval/quality)", color: "#22c55e" },
139
+ { label: "Music EQ Adapter (4 emotions)", color: "#4ade80" },
140
+ { label: "Songwriting Module (structure + hooks)", color: "#86efac" },
141
+ { label: "Instrument Context Switch", color: "#22c55e" },
142
+ { label: "LM Head", color: "#4ade80" },
143
+ ],
144
+ trainSteps: [
145
+ { title: "1. Install Dependencies", cmd: "pip install torch transformers accelerate peft bitsandbytes trl\npip install datasets music21 # music processing" },
146
+ { title: "2. Extend Tokenizer", cmd: "python tokenizer/music_token_extension.py \\\n --base_model Qwen/Qwen3.5-7B-Instruct \\\n --output_dir ./tokenizer/touchgrass" },
147
+ { 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" },
148
+ { 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" },
149
+ { 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)" },
150
+ ],
151
+ ollama: "ollama create touchgrass-7b -f ollama_7b_modelfile\nollama run touchgrass-7b \"Teach me how to play a G chord\"",
152
+ vllm: "python inference/inference.py \\\n --model Matrix-Corp/TouchGrass-7B \\\n --instrument guitar \\\n --skill_level beginner \\\n --interactive",
153
+ 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]))",
154
+ },
155
+ };
156
+
157
+ const HARDWARE = [
158
+ { name: "MacBook Pro M2 16GB", icon: "💻", vram: 16, type: "MPS", canRun: ["Zenith-7B (INT4)", "Vortex-7B", "TouchGrass-3B", "TouchGrass-7B"] },
159
+ { 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"] },
160
+ { name: "Nvidia 4060 Laptop 8GB", icon: "🖥️", vram: 8, type: "CUDA", canRun: ["Zenith-7B (INT4)", "Vortex-7B", "TouchGrass-3B"] },
161
+ { name: "Nvidia 4060 Ti 16GB", icon: "🖥️", vram: 16, type: "CUDA", canRun: ["Zenith-7B", "Vortex-7B", "Vortex-13B (INT8)", "TouchGrass-3B", "TouchGrass-7B"] },
162
+ { name: "Tenstorrent p300a", icon: "⚡", vram: 64, type: "TENSTORRENT", canRun: ["Zenith-7B", "Zenith-28B", "Zenith-32B", "Zenith-70B (INT4)"] },
163
+ { name: "2× Tenstorrent p300a", icon: "⚡", vram: 128, type: "TENSTORRENT", canRun: ["Zenith-7B", "Zenith-28B", "Zenith-32B", "Zenith-70B (INT8)"] },
164
+ { 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"] },
165
+ ];
166
+
167
+ const STATUS_STYLE = {
168
+ preview: { label: "PREVIEW", color: "#f59e0b", bg: "rgba(245,158,11,0.1)" },
169
+ planned: { label: "PLANNED", color: "#64748b", bg: "rgba(100,116,139,0.1)" },
170
+ released: { label: "RELEASED", color: "#4ade80", bg: "rgba(74,222,128,0.1)" },
171
+ };
172
+
173
+ const NAV = [
174
+ { id: "explorer", label: "Models", icon: "◈" },
175
+ { id: "architecture", label: "Architecture", icon: "⬡" },
176
+ { id: "benchmarks", label: "Benchmarks", icon: "▲" },
177
+ { id: "training", label: "Training", icon: "◎" },
178
+ { id: "deploy", label: "Deploy", icon: "▶" },
179
+ { id: "hardware", label: "Hardware", icon: "⬢" },
180
+ ];
181
+
182
+ function CodeBlock({ code, color }) {
183
+ const [copied, setCopied] = useState(false);
184
+ const copy = () => {
185
+ navigator.clipboard.writeText(code).then(() => { setCopied(true); setTimeout(() => setCopied(false), 1800); });
186
+ };
187
+ return (
188
+ <div style={{ position: "relative" }}>
189
+ <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" }}>
190
+ {code}
191
+ </pre>
192
+ <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 }}>
193
+ {copied ? "✓ COPIED" : "COPY"}
194
+ </button>
195
+ </div>
196
+ );
197
+ }
198
+
199
+ function App() {
200
+ const [family, setFamily] = useState("zenith");
201
+ const [section, setSection] = useState("explorer");
202
+ const [hw, setHw] = useState(null);
203
+ const [deployTab, setDeployTab] = useState("ollama");
204
+ const [trainStep, setTrainStep] = useState(0);
205
+
206
+ const F = MODELS[family];
207
+ const col = F.color;
208
+ const glow = F.glow;
209
+
210
+ const handleFamilyChange = (key) => { setFamily(key); setTrainStep(0); setHw(null); };
211
+
212
+ return (
213
+ <div style={{ background: C.bg, minHeight: "100vh", display: "flex", flexDirection: "column", color: C.text }}>
214
+
215
+ {/* ── Header ── */}
216
+ <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 }}>
217
+ <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
218
+ <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>
219
+ <div>
220
+ <div style={{ fontSize: 13, fontWeight: 700, letterSpacing: 3, color: "#fff" }}>MATRIX.CORP</div>
221
+ <div style={{ fontSize: 9, color: C.muted, letterSpacing: 2 }}>AI MODEL REGISTRY</div>
222
+ </div>
223
+ </div>
224
+ <div style={{ display: "flex", gap: 8 }}>
225
+ {Object.entries(MODELS).map(([key, m]) => (
226
+ <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" }}>
227
+ {m.icon} {key === "touchgrass" ? "TOUCH GRASS" : m.name.toUpperCase().split(" ")[0]}
228
+ </button>
229
+ ))}
230
+ </div>
231
+ </div>
232
+
233
+ <div style={{ display: "flex", flex: 1, minHeight: 0 }}>
234
+
235
+ {/* ── Sidebar ── */}
236
+ <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)" }}>
237
+ {NAV.map(item => (
238
+ <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" }}>
239
+ <span style={{ fontSize: 13, opacity: section === item.id ? 1 : 0.6 }}>{item.icon}</span>
240
+ {item.label.toUpperCase()}
241
+ </button>
242
+ ))}
243
+
244
+ {/* Family pill */}
245
+ <div style={{ margin: "20px 12px 0", padding: "14px 12px", background: glow, border: `1px solid ${col}22`, borderRadius: 9 }}>
246
+ <div style={{ fontSize: 22, marginBottom: 7 }}>{F.icon}</div>
247
+ <div style={{ fontSize: 10, color: col, letterSpacing: 1, marginBottom: 5, fontWeight: 700 }}>{F.name.toUpperCase()}</div>
248
+ <div style={{ fontSize: 9, color: C.muted, lineHeight: 1.6 }}>{F.hardware}</div>
249
+ <div style={{ marginTop: 10, fontSize: 9, color: C.muted }}>
250
+ {F.models.length} model{F.models.length > 1 ? "s" : ""}
251
+ </div>
252
+ </div>
253
+ </div>
254
+
255
+ {/* ── Main Content ── */}
256
+ <div style={{ flex: 1, padding: "28px 32px", overflowY: "auto" }}>
257
+
258
+ {/* ────── EXPLORER ────── */}
259
+ {section === "explorer" && (
260
+ <div>
261
+ <div style={{ marginBottom: 26 }}>
262
+ <div style={{ fontSize: 10, color: col, letterSpacing: 3, marginBottom: 7 }}>MODEL EXPLORER</div>
263
+ <div style={{ fontSize: 24, fontWeight: 800, color: "#fff", marginBottom: 5 }}>{F.icon} {F.name}</div>
264
+ <div style={{ fontSize: 12, color: C.muted }}>{F.tagline}</div>
265
+ </div>
266
+ <div style={{ display: "flex", flexWrap: "wrap", gap: 7, marginBottom: 28 }}>
267
+ {F.features.map(f => (
268
+ <span key={f} style={{ padding: "4px 13px", background: glow, border: `1px solid ${col}30`, borderRadius: 20, fontSize: 10, color: col }}>{f}</span>
269
+ ))}
270
+ </div>
271
+ <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(270px, 1fr))", gap: 16 }}>
272
+ {F.models.map(m => (
273
+ <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" }}
274
+ onMouseEnter={e => { e.currentTarget.style.borderColor = col + "55"; e.currentTarget.style.transform = "translateY(-2px)"; }}
275
+ onMouseLeave={e => { e.currentTarget.style.borderColor = C.border; e.currentTarget.style.transform = "none"; }}>
276
+ <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", marginBottom: 14 }}>
277
+ <div>
278
+ <div style={{ fontSize: 15, fontWeight: 700, color: "#fff" }}>{m.name}</div>
279
+ <div style={{ fontSize: 11, color: col, marginTop: 3 }}>{m.params} parameters</div>
280
+ </div>
281
+ <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>
282
+ </div>
283
+ <div style={{ fontSize: 11, color: C.muted, marginBottom: 14, lineHeight: 1.7 }}>{m.use}</div>
284
+ <div style={{ borderTop: `1px solid ${C.border}`, paddingTop: 13, display: "flex", flexDirection: "column", gap: 7 }}>
285
+ <div style={{ display: "flex", justifyContent: "space-between", fontSize: 10 }}>
286
+ <span style={{ color: C.muted }}>VRAM REQUIRED</span>
287
+ <span style={{ color: "#fff", fontWeight: 700 }}>{m.vram}</span>
288
+ </div>
289
+ <div style={{ display: "flex", justifyContent: "space-between", fontSize: 10, gap: 10 }}>
290
+ <span style={{ color: C.muted, flexShrink: 0 }}>BASE MODEL</span>
291
+ <span style={{ color: "#94a3b8", textAlign: "right" }}>{m.base}</span>
292
+ </div>
293
+ </div>
294
+ </div>
295
+ ))}
296
+ </div>
297
+ </div>
298
+ )}
299
+
300
+ {/* ────── ARCHITECTURE ────── */}
301
+ {section === "architecture" && (
302
+ <div>
303
+ <div style={{ marginBottom: 26 }}>
304
+ <div style={{ fontSize: 10, color: col, letterSpacing: 3, marginBottom: 7 }}>ARCHITECTURE VISUALIZER</div>
305
+ <div style={{ fontSize: 24, fontWeight: 800, color: "#fff" }}>{F.icon} {F.name} — Layer Stack</div>
306
+ </div>
307
+ <div style={{ display: "flex", gap: 28, flexWrap: "wrap" }}>
308
+ <div style={{ flex: "1 1 380px", maxWidth: 480 }}>
309
+ {F.arch.map((layer, i) => (
310
+ <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" }}>
311
+ <span style={{ fontSize: 12, color: layer.color }}>{layer.label}</span>
312
+ <span style={{ fontSize: 9, color: C.muted, flexShrink: 0, marginLeft: 10 }}>L{i + 1}</span>
313
+ </div>
314
+ ))}
315
+ </div>
316
+
317
+ {family === "zenith" && (
318
+ <div style={{ flex: "1 1 280px" }}>
319
+ <div style={{ padding: 20, background: C.card, border: `1px solid ${C.border}`, borderRadius: 11, marginBottom: 16 }}>
320
+ <div style={{ fontSize: 10, color: col, letterSpacing: 2, marginBottom: 14 }}>EQ ENGINE DEEP DIVE</div>
321
+ {[
322
+ ["EQ state vector", "frustration (0–1) + 8 emotion logits = 9 values"],
323
+ ["Attention bias", "per-head scalar → shifts attention distribution"],
324
+ ["FFN gate", "sigmoid over hidden dim → suppresses/amplifies neurons"],
325
+ ["GRU recurrence", "state passed layer-to-layer → emotional memory"],
326
+ ["Consistency loss", "MSE between adjacent layer states → smooth arc"],
327
+ ["Always FP16", "EQ modules never quantized — quality critical"],
328
+ ].map(([k, v], i) => (
329
+ <div key={i} style={{ marginBottom: 10, paddingBottom: 10, borderBottom: i < 5 ? `1px solid ${C.border}` : "none" }}>
330
+ <div style={{ fontSize: 10, color: col, marginBottom: 3 }}>{k}</div>
331
+ <div style={{ fontSize: 10, color: C.muted, lineHeight: 1.5 }}>{v}</div>
332
+ </div>
333
+ ))}
334
+ </div>
335
+ </div>
336
+ )}
337
+
338
+ {family === "vortex" && (
339
+ <div style={{ flex: "1 1 280px" }}>
340
+ <div style={{ padding: 20, background: C.card, border: `1px solid ${C.border}`, borderRadius: 11 }}>
341
+ <div style={{ fontSize: 10, color: col, letterSpacing: 2, marginBottom: 14 }}>SCIENCE MODULES</div>
342
+ {[
343
+ ["Equation Module", "LaTeX span detection + structural tree encoding"],
344
+ ["Numerical Module", "Digit-level encoding, sci notation, unit awareness"],
345
+ ["Citation Module", "Citation span detection + provenance tracking"],
346
+ ["Molecular Module", "118 element embeddings + SMILES + amino acids"],
347
+ ["SciGate FFN", "7-domain routing — different FFN path per science area"],
348
+ ].map(([k, v], i) => (
349
+ <div key={i} style={{ marginBottom: 10, paddingBottom: 10, borderBottom: i < 4 ? `1px solid ${C.border}` : "none" }}>
350
+ <div style={{ fontSize: 10, color: col, marginBottom: 3 }}>{k}</div>
351
+ <div style={{ fontSize: 10, color: C.muted, lineHeight: 1.5 }}>{v}</div>
352
+ </div>
353
+ ))}
354
+ </div>
355
+ </div>
356
+ )}
357
+
358
+ {family === "touchgrass" && (
359
+ <div style={{ flex: "1 1 280px" }}>
360
+ <div style={{ padding: 20, background: C.card, border: `1px solid ${C.border}`, borderRadius: 11 }}>
361
+ <div style={{ fontSize: 10, color: col, letterSpacing: 2, marginBottom: 14 }}>MUSIC MODULES</div>
362
+ {[
363
+ ["Tab & Chord Module", "Validated ASCII tab + chord diagram generation"],
364
+ ["Theory Engine", "Circle of fifths, modes, progressions, voice leading"],
365
+ ["Ear Training", "Interval/quality description, solfege exercises"],
366
+ ["Music EQ Adapter", "4 emotions: frustrated / confused / excited / confident"],
367
+ ["Songwriting Module", "Structure, lyrics, hooks, genre-aware progressions"],
368
+ ].map(([k, v], i) => (
369
+ <div key={i} style={{ marginBottom: 10, paddingBottom: 10, borderBottom: i < 4 ? `1px solid ${C.border}` : "none" }}>
370
+ <div style={{ fontSize: 10, color: col, marginBottom: 3 }}>{k}</div>
371
+ <div style={{ fontSize: 10, color: C.muted, lineHeight: 1.5 }}>{v}</div>
372
+ </div>
373
+ ))}
374
+ </div>
375
+ </div>
376
+ )}
377
+ </div>
378
+ </div>
379
+ )}
380
+
381
+ {/* ────── BENCHMARKS ────── */}
382
+ {section === "benchmarks" && (
383
+ <div>
384
+ <div style={{ marginBottom: 26 }}>
385
+ <div style={{ fontSize: 10, color: col, letterSpacing: 3, marginBottom: 7 }}>BENCHMARK CHARTS</div>
386
+ <div style={{ fontSize: 24, fontWeight: 800, color: "#fff" }}>{F.icon} {F.name} — Estimated Performance</div>
387
+ <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" }}>
388
+ ⚠ Preliminary estimates based on base model benchmarks + fine-tuning projections. Real benchmarks coming with trained weights.
389
+ </div>
390
+ </div>
391
+ <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(300px, 1fr))", gap: 16 }}>
392
+ {F.benchmarks.map(bench => (
393
+ <div key={bench.name} style={{ background: C.card, border: `1px solid ${C.border}`, borderRadius: 11, padding: 22 }}>
394
+ <div style={{ fontSize: 13, color: "#fff", marginBottom: 18, letterSpacing: 1, fontWeight: 700 }}>{bench.name}</div>
395
+ {Object.entries(bench.scores).map(([model, score]) => (
396
+ <div key={model} style={{ marginBottom: 14 }}>
397
+ <div style={{ display: "flex", justifyContent: "space-between", fontSize: 10, marginBottom: 7 }}>
398
+ <span style={{ color: C.muted }}>{model}</span>
399
+ <span style={{ color: col, fontWeight: 700 }}>{score}%</span>
400
+ </div>
401
+ <div style={{ height: 7, background: C.border, borderRadius: 4, overflow: "hidden" }}>
402
+ <div style={{ height: "100%", width: `${score}%`, background: `linear-gradient(90deg, ${col}, ${col}77)`, borderRadius: 4 }} />
403
+ </div>
404
+ </div>
405
+ ))}
406
+ </div>
407
+ ))}
408
+ </div>
409
+ </div>
410
+ )}
411
+
412
+ {/* ────── TRAINING ────── */}
413
+ {section === "training" && (
414
+ <div>
415
+ <div style={{ marginBottom: 26 }}>
416
+ <div style={{ fontSize: 10, color: col, letterSpacing: 3, marginBottom: 7 }}>INTERACTIVE TRAINING GUIDE</div>
417
+ <div style={{ fontSize: 24, fontWeight: 800, color: "#fff" }}>{F.icon} How to Train {F.name}</div>
418
+ </div>
419
+
420
+ {/* Step tabs */}
421
+ <div style={{ display: "flex", marginBottom: 24, borderRadius: 9, overflow: "hidden", border: `1px solid ${C.border}` }}>
422
+ {F.trainSteps.map((s, i) => (
423
+ <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 }}>
424
+ <div style={{ fontSize: 16, marginBottom: 3 }}>{"①②③④⑤"[i]}</div>
425
+ STEP {i + 1}
426
+ </button>
427
+ ))}
428
+ </div>
429
+
430
+ <div style={{ background: C.card, border: `1px solid ${col}33`, borderRadius: 11, padding: 26 }}>
431
+ <div style={{ fontSize: 13, color: col, marginBottom: 18, letterSpacing: 1, fontWeight: 700 }}>{F.trainSteps[trainStep].title}</div>
432
+ <CodeBlock code={F.trainSteps[trainStep].cmd} color={col} />
433
+ <div style={{ display: "flex", justifyContent: "space-between", marginTop: 22 }}>
434
+ <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>
435
+ <span style={{ fontSize: 10, color: C.muted, alignSelf: "center" }}>{trainStep + 1} / {F.trainSteps.length}</span>
436
+ <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>
437
+ </div>
438
+ </div>
439
+ </div>
440
+ )}
441
+
442
+ {/* ────── DEPLOY ────── */}
443
+ {section === "deploy" && (
444
+ <div>
445
+ <div style={{ marginBottom: 26 }}>
446
+ <div style={{ fontSize: 10, color: col, letterSpacing: 3, marginBottom: 7 }}>DEPLOYMENT WALKTHROUGH</div>
447
+ <div style={{ fontSize: 24, fontWeight: 800, color: "#fff" }}>{F.icon} Deploy {F.name}</div>
448
+ </div>
449
+
450
+ <div style={{ display: "flex", marginBottom: 22, borderRadius: 9, overflow: "hidden", border: `1px solid ${C.border}`, width: "fit-content" }}>
451
+ {[["ollama","🦙 Ollama"],["vllm","⚡ vLLM"],["hf","🤗 Transformers"]].map(([id, label]) => (
452
+ <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" }}>
453
+ {label}
454
+ </button>
455
+ ))}
456
+ </div>
457
+
458
+ <div style={{ background: C.card, border: `1px solid ${C.border}`, borderRadius: 11, padding: 26 }}>
459
+ <div style={{ fontSize: 11, color: col, marginBottom: 18, letterSpacing: 1 }}>
460
+ {deployTab === "ollama" ? "LOCAL DEPLOYMENT — Easiest, works offline" : deployTab === "vllm" ? "HIGH-THROUGHPUT API SERVER" : "HUGGING FACE TRANSFORMERS INTEGRATION"}
461
+ </div>
462
+ <CodeBlock code={deployTab === "ollama" ? F.ollama : deployTab === "vllm" ? F.vllm : F.hf} color={col} />
463
+ <div style={{ marginTop: 18, padding: 14, background: `${col}0e`, border: `1px solid ${col}20`, borderRadius: 8, fontSize: 11, color: C.muted, lineHeight: 1.7 }}>
464
+ {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."}
465
+ {deployTab === "vllm" && "💡 Best for production APIs and high concurrency. Requires CUDA GPU. Supports OpenAI-compatible API format — drop-in replacement for existing pipelines."}
466
+ {deployTab === "hf" && "💡 Best for research and custom pipelines. Works with any PyTorch-compatible hardware including CPU, CUDA, and MPS (Apple Silicon)."}
467
+ </div>
468
+ </div>
469
+ </div>
470
+ )}
471
+
472
+ {/* ────── HARDWARE ────── */}
473
+ {section === "hardware" && (
474
+ <div>
475
+ <div style={{ marginBottom: 26 }}>
476
+ <div style={{ fontSize: 10, color: col, letterSpacing: 3, marginBottom: 7 }}>HARDWARE SELECTOR</div>
477
+ <div style={{ fontSize: 24, fontWeight: 800, color: "#fff" }}>What Can I Run?</div>
478
+ <div style={{ fontSize: 12, color: C.muted, marginTop: 5 }}>Click your hardware to see compatible models across all families</div>
479
+ </div>
480
+
481
+ <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(210px, 1fr))", gap: 12, marginBottom: 28 }}>
482
+ {HARDWARE.map((h, i) => (
483
+ <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" }}>
484
+ <div style={{ fontSize: 22, marginBottom: 9 }}>{h.icon}</div>
485
+ <div style={{ fontSize: 12, color: "#fff", marginBottom: 5, fontWeight: 600 }}>{h.name}</div>
486
+ <div style={{ display: "flex", gap: 8 }}>
487
+ <span style={{ fontSize: 9, color: C.muted, background: C.border, padding: "2px 7px", borderRadius: 4 }}>{h.vram}GB</span>
488
+ <span style={{ fontSize: 9, color: C.muted, background: C.border, padding: "2px 7px", borderRadius: 4 }}>{h.type}</span>
489
+ </div>
490
+ </button>
491
+ ))}
492
+ </div>
493
+
494
+ {hw !== null && (
495
+ <div style={{ background: C.card, border: `1px solid ${col}33`, borderRadius: 11, padding: 26 }}>
496
+ <div style={{ fontSize: 12, color: col, marginBottom: 18, letterSpacing: 1, fontWeight: 700 }}>
497
+ {HARDWARE[hw].icon} {HARDWARE[hw].name} — {HARDWARE[hw].canRun.length} Compatible Models
498
+ </div>
499
+ <div style={{ display: "flex", flexWrap: "wrap", gap: 9 }}>
500
+ {HARDWARE[hw].canRun.map(m => {
501
+ const isZenith = m.startsWith("Zenith");
502
+ const isVortex = m.startsWith("Vortex");
503
+ const isTG = m.startsWith("Touch");
504
+ const mc = isZenith ? C.zenith : isVortex ? C.vortex : C.tg;
505
+ return (
506
+ <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>
507
+ );
508
+ })}
509
+ </div>
510
+ <div style={{ marginTop: 18, padding: 14, background: "rgba(255,255,255,0.03)", borderRadius: 8, fontSize: 10, color: C.muted, lineHeight: 1.7 }}>
511
+ 💡 Models marked with (INT4) or (INT8) require quantization. Use bitsandbytes for CUDA or llama.cpp for CPU/MPS inference.
512
+ </div>
513
+ </div>
514
+ )}
515
+ </div>
516
+ )}
517
+
518
+ </div>
519
+ </div>
520
+
521
+ {/* ── Footer ── */}
522
+ <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)" }}>
523
+ <span>MATRIX.CORP © 2025 — 3 FAMILIES · 8 MODELS · BUILT BY ZANDY-WANDY</span>
524
+ <div style={{ display: "flex", gap: 18 }}>
525
+ <span style={{ color: C.zenith }}>● ZENITH</span>
526
+ <span style={{ color: C.vortex }}>● VORTEX</span>
527
+ <span style={{ color: C.tg }}>● TOUCH GRASS</span>
528
+ </div>
529
+ </div>
530
+ </div>
531
+ );
532
+ }
533
+
534
+ ReactDOM.createRoot(document.getElementById("root")).render(<App />);
535
+ </script>
536
+ </body>
537
+ </html>