Spaces:

ThingAI
/

README

Configuration error

App Files Files Community

Upload 2 files

by usermma - opened 4 days ago

base: refs/heads/main

←

from: refs/pr/3

Discussion Files changed

+816

-2

Files changed (2) hide show

README.md +6 -2
index.html +810 -0

README.md CHANGED Viewed

@@ -1,5 +1,9 @@
 ---
 title: ThingsAI
 type: org
 tags:
 - slm
@@ -19,8 +23,8 @@ tags:
   A lightweight bilingual (Italian + English) language model with 135M parameters. Features GQA, SwiGLU, RMSNorm, and RoPE. Trained on 50B+ tokens of curated data.
 * **Quark-270M**
   Our scaled small model featuring 270M parameters, 32 layers, 768 hidden dimensions, and a 65K vocabulary. Designed for extended bilingual capabilities.
-* **Quark-Math-Code (~36M)**
-  Our ultra-compact, deep-thin architecture (~36M parameters, 14 layers, 65K vocabulary) engineered specifically for STEM, coding, and mathematical reasoning. Actively pre-training on a 5B token target with a hardened Chain-of-Thought (CoT), OpenWebMath, and pure-code mix.
 * **Quark-Mod**
   A multi-label moderation model covering 9 categories for safe AI deployment: toxic, severe_toxic, obscene, threat, insult, identity_hate, cyberbullying, hate_speech, offensive.

 ---
 title: ThingsAI
+sdk: static
+emoji: 📚
+colorFrom: indigo
+colorTo: blue
 type: org
 tags:
 - slm
   A lightweight bilingual (Italian + English) language model with 135M parameters. Features GQA, SwiGLU, RMSNorm, and RoPE. Trained on 50B+ tokens of curated data.
 * **Quark-270M**
   Our scaled small model featuring 270M parameters, 32 layers, 768 hidden dimensions, and a 65K vocabulary. Designed for extended bilingual capabilities.
+* **Quark-Math-Code (72M)**
+  Our ultra-compact, deep-thin architecture (72M parameters, 14 layers, 65K vocabulary) engineered specifically for STEM, coding, and mathematical reasoning. Actively pre-training on a 5B token target with a hardened Chain-of-Thought (CoT), OpenWebMath, and pure-code mix.
 * **Quark-Mod**
   A multi-label moderation model covering 9 categories for safe AI deployment: toxic, severe_toxic, obscene, threat, insult, identity_hate, cyberbullying, hate_speech, offensive.

index.html ADDED Viewed

	@@ -0,0 +1,810 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>ThingsAI - Smart & Efficient SLMs</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --bg: #030014;
+            --surface: rgba(10, 10, 20, 0.7);
+            --surface-card: rgba(18, 18, 35, 0.45);
+            --surface-light: rgba(30, 30, 60, 0.35);
+            --text: #f4f4f7;
+            --text-secondary: #94a3b8;
+            --accent: #6366f1;
+            --accent-gradient: linear-gradient(135deg, #818cf8 0%, #4f46e5 100%);
+            --glow-green: rgba(52, 211, 153, 0.15);
+            --border: rgba(255, 255, 255, 0.05);
+            --border-hover: rgba(99, 102, 241, 0.3);
+            --radius-lg: 24px;
+            --radius-md: 16px;
+            --radius-sm: 12px;
+            --font: 'Plus Jakarta Sans', system-ui, sans-serif;
+        }
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        body {
+            font-family: var(--font);
+            background-color: var(--bg);
+            color: var(--text);
+            line-height: 1.6;
+            -webkit-font-smoothing: antialiased;
+            overflow-x: hidden;
+            position: relative;
+        }
+        body::before {
+            content: "";
+            position: fixed;
+            top: -20%;
+            left: 50%;
+            transform: translateX(-50%);
+            width: 100vw;
+            height: 100vh;
+            background: radial-gradient(circle at 50% 0%, rgba(99, 102, 241, 0.15) 0%, rgba(168, 85, 247, 0.05) 30%, transparent 70%);
+            z-index: -1;
+            pointer-events: none;
+        }
+        body::after {
+            content: "";
+            position: fixed;
+            bottom: -20%;
+            right: -10%;
+            width: 50vw;
+            height: 50vh;
+            background: radial-gradient(circle at 100% 100%, rgba(79, 70, 229, 0.08) 0%, transparent 60%);
+            z-index: -1;
+            pointer-events: none;
+        }
+        .container {
+            width: 100%;
+            max-width: 1250px;
+            margin: 0 auto;
+            padding: 0 32px;
+        }
+        /* ===== NAVBAR ===== */
+        .navbar {
+            position: sticky;
+            top: 0;
+            z-index: 100;
+            background: rgba(3, 0, 20, 0.6);
+            backdrop-filter: blur(20px);
+            -webkit-backdrop-filter: blur(20px);
+            border-bottom: 1px solid var(--border);
+            padding: 16px 0;
+        }
+        .nav-container {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        .logo {
+            font-size: 1.35rem;
+            font-weight: 800;
+            letter-spacing: -0.03em;
+            background: linear-gradient(135deg, #ffffff 40%, #a5b4fc 100%);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            display: flex;
+            align-items: center;
+            gap: 8px;
+        }
+        .logo::before {
+            content: "";
+            width: 10px;
+            height: 10px;
+            background: var(--accent);
+            border-radius: 50%;
+            box-shadow: 0 0 12px var(--accent);
+        }
+        /* ===== HERO SECTION ===== */
+        .hero {
+            padding: 120px 0 80px;
+            text-align: center;
+            position: relative;
+        }
+        .badge {
+            display: inline-flex;
+            align-items: center;
+            gap: 8px;
+            background: rgba(99, 102, 241, 0.05);
+            border: 1px solid rgba(99, 102, 241, 0.15);
+            padding: 6px 16px;
+            border-radius: 100px;
+            font-size: 0.8rem;
+            font-weight: 600;
+            color: #a5b4fc;
+            margin-bottom: 32px;
+            letter-spacing: 0.02em;
+        }
+        .hero h1 {
+            font-size: clamp(2.8rem, 7vw, 5rem);
+            font-weight: 800;
+            line-height: 1.05;
+            margin-bottom: 24px;
+            letter-spacing: -0.04em;
+            color: #ffffff;
+        }
+        .hero h1 span {
+            background: linear-gradient(135deg, #ffffff 30%, #818cf8 70%, #c084fc 100%);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+        }
+        .subtitle {
+            font-size: 1.3rem;
+            color: var(--text-secondary);
+            max-width: 700px;
+            margin: 0 auto 48px;
+            font-weight: 400;
+            line-height: 1.6;
+        }
+        .chat-pipe {
+            display: flex;
+            max-width: 650px;
+            margin: 0 auto;
+            border-radius: 100px;
+            background: var(--surface-light);
+            border: 1px solid var(--border);
+            padding: 8px;
+            transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
+            backdrop-filter: blur(12px);
+            -webkit-backdrop-filter: blur(12px);
+            box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255,255,255,0.05);
+        }
+        .chat-pipe:focus-within {
+            border-color: var(--border-hover);
+            box-shadow: 0 0 0 5px rgba(99, 102, 241, 0.15), 0 30px 60px rgba(0, 0, 0, 0.5);
+            transform: translateY(-2px);
+        }
+        .chat-pipe input {
+            flex: 1;
+            background: transparent;
+            border: none;
+            padding: 0 24px;
+            font-size: 1rem;
+            color: var(--text);
+            outline: none;
+            font-family: inherit;
+        }
+        .chat-pipe input::placeholder {
+            color: #4b5563;
+        }
+        .chat-pipe button {
+            display: flex;
+            align-items: center;
+            gap: 10px;
+            padding: 14px 32px;
+            background: var(--accent-gradient);
+            color: #ffffff;
+            border: none;
+            border-radius: 100px;
+            font-weight: 600;
+            font-size: 0.95rem;
+            cursor: pointer;
+            font-family: inherit;
+            transition: all 0.3s var(--transition);
+            box-shadow: 0 8px 20px rgba(79, 70, 229, 0.25);
+        }
+        .chat-pipe button:hover {
+            filter: brightness(1.15);
+            box-shadow: 0 8px 25px rgba(79, 70, 229, 0.4);
+            transform: translateY(-1px);
+        }
+        .chat-pipe button svg {
+            transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+        }
+        .chat-pipe button:hover svg {
+            transform: translateX(5px);
+        }
+        /* ===== SECTIONS ARCHITECTURE ===== */
+        .section {
+            margin: 140px 0;
+        }
+        .section-header {
+            display: flex;
+            flex-direction: column;
+            align-items: flex-start;
+            gap: 12px;
+            margin-bottom: 56px;
+        }
+        .section-header h2 {
+            font-size: 2.2rem;
+            font-weight: 800;
+            letter-spacing: -0.03em;
+            background: linear-gradient(135deg, #ffffff 60%, #94a3b8 100%);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+        }
+        .section-header .line {
+            width: 60px;
+            height: 3px;
+            background: var(--accent-gradient);
+            border-radius: 10px;
+        }
+        /* ===== CARDS GRID SYSTEM ===== */
+        .cards-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
+            gap: 32px;
+        }
+        .card {
+            background: var(--surface-card);
+            border: 1px solid var(--border);
+            border-radius: var(--radius-lg);
+            padding: 36px;
+            transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
+            position: relative;
+            backdrop-filter: blur(10px);
+            -webkit-backdrop-filter: blur(10px);
+            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
+        }
+        .card:hover {
+            transform: translateY(-8px);
+            border-color: var(--border-hover);
+            background: rgba(22, 22, 45, 0.6);
+            box-shadow: 0 30px 60px -10px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(99, 102, 241, 0.1);
+        }
+        .card.highlight {
+            background: linear-gradient(180deg, rgba(25, 25, 50, 0.5) 0%, rgba(12, 12, 28, 0.6) 100%);
+            border-color: rgba(99, 102, 241, 0.25);
+        }
+        .card.highlight::before {
+            content: "";
+            position: absolute;
+            top: 0; right: 10%; width: 30%; height: 1px;
+            background: linear-gradient(90deg, transparent, rgba(168, 85, 247, 0.4), transparent);
+        }
+        .card-tag {
+            display: inline-flex;
+            font-size: 0.7rem;
+            font-weight: 700;
+            text-transform: uppercase;
+            letter-spacing: 0.06em;
+            padding: 5px 12px;
+            border-radius: 6px;
+            background: rgba(255, 255, 255, 0.03);
+            border: 1px solid var(--border);
+            color: var(--text-secondary);
+            margin-bottom: 24px;
+        }
+        .card-tag.status { background: rgba(52, 211, 153, 0.06); color: #34d399; border-color: rgba(52, 211, 153, 0.15); }
+        .card-tag.special { background: rgba(192, 132, 252, 0.06); color: #c084fc; border-color: rgba(192, 132, 252, 0.15); }
+        .card-tag.safety { background: rgba(248, 113, 113, 0.06); color: #f87171; border-color: rgba(248, 113, 113, 0.15); }
+        .card-tag.old { background: rgba(251, 191, 36, 0.06); color: #fbbf24; border-color: rgba(251, 191, 36, 0.15); }
+        .card-tag.instruct { background: rgba(59, 130, 246, 0.06); color: #60a5fa; border-color: rgba(59, 130, 246, 0.2); }
+        .card h3 {
+            font-size: 1.65rem;
+            font-weight: 700;
+            margin-bottom: 14px;
+            letter-spacing: -0.02em;
+            color: #ffffff;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            gap: 12px;
+        }
+        .param-badge {
+            font-size: 0.75rem;
+            font-weight: 600;
+            background: rgba(255, 255, 255, 0.04);
+            padding: 4px 10px;
+            border-radius: 8px;
+            color: #a5b4fc;
+            border: 1px solid var(--border);
+        }
+        .card-desc {
+            color: var(--text-secondary);
+            font-size: 1rem;
+            margin-bottom: 20px;
+            line-height: 1.6;
+        }
+        .card-tech {
+            font-size: 0.88rem;
+            color: rgba(148, 163, 184, 0.7);
+            margin-bottom: 28px;
+            padding-top: 16px;
+            border-top: 1px solid rgba(255, 255, 255, 0.04);
+        }
+        .card-link {
+            display: inline-flex;
+            align-items: center;
+            gap: 6px;
+            color: #ffffff;
+            text-decoration: none;
+            font-weight: 600;
+            font-size: 0.95rem;
+            transition: all 0.25s;
+        }
+        .card-link:hover {
+            color: #818cf8;
+            transform: translateX(3px);
+        }
+        .card-status-btn {
+            display: inline-block;
+            padding: 6px 16px;
+            border-radius: 100px;
+            font-size: 0.8rem;
+            font-weight: 600;
+            border: 1px solid rgba(251, 191, 36, 0.2);
+        }
+        /* ===== DETAILS ENGINE ===== */
+        .card summary {
+            list-style: none;
+            cursor: pointer;
+            outline: none;
+        }
+        .card summary::-webkit-details-marker { display: none; }
+        .card summary::after {
+            content: "+";
+            position: absolute;
+            right: 36px;
+            top: 36px;
+            font-size: 1.5rem;
+            font-weight: 300;
+            color: var(--text-secondary);
+            transition: transform 0.3s ease;
+        }
+        .card[open] summary::after {
+            transform: rotate(45deg);
+            color: #ffffff;
+        }
+        .card-details {
+            padding-top: 24px;
+            border-top: 1px solid rgba(255, 255, 255, 0.05);
+            animation: fadeIn 0.4s ease-out forwards;
+        }
+        @keyframes fadeIn {
+            from { opacity: 0; transform: translateY(4px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+        .split-variants {
+            display: flex;
+            gap: 12px;
+        }
+        .variant {
+            flex: 1;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 8px;
+            padding: 14px;
+            border-radius: var(--radius-sm);
+            font-weight: 600;
+            font-size: 0.9rem;
+            text-decoration: none;
+            color: white;
+            transition: all 0.25s;
+            border: 1px solid rgba(255,255,255,0.05);
+            position: relative;
+            overflow: hidden;
+        }
+        .variant::after {
+            content: "↗";
+            font-size: 0.8em;
+            opacity: 0;
+            transform: translateX(-5px);
+            transition: all 0.2s;
+        }
+        .variant:hover::after {
+            opacity: 1;
+            transform: translateX(0);
+        }
+        .variant:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 10px 20px rgba(0,0,0,0.2);
+            filter: brightness(1.1);
+        }
+        .variant.base { background: rgba(37, 99, 235, 0.15); border-color: rgba(37, 99, 235, 0.3); color: #3b82f6; }
+        .variant.base:hover { background: rgba(37, 99, 235, 0.25); }
+        .variant.bilingual { background: rgba(5, 150, 105, 0.15); border-color: rgba(5, 150, 105, 0.3); color: #10b981; }
+        .variant.bilingual:hover { background: rgba(5, 150, 105, 0.25); }
+        .variant.instruct { background: rgba(124, 58, 237, 0.15); border-color: rgba(124, 58, 237, 0.3); color: #8b5cf6; }
+        .variant.instruct:hover { background: rgba(124, 58, 237, 0.25); }
+        .variant.base-270 { background: rgba(217, 119, 6, 0.15); border-color: rgba(217, 119, 6, 0.3); color: #f59e0b; }
+        .variant.base-270:hover { background: rgba(217, 119, 6, 0.25); }
+        /* ===== FEATURES SECTOR ===== */
+        .features-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+            gap: 32px;
+        }
+        .feature-card {
+            background: rgba(255, 255, 255, 0.01);
+            border: 1px solid var(--border);
+            border-radius: var(--radius-md);
+            padding: 36px;
+            transition: all 0.3s;
+        }
+        .feature-card:hover {
+            border-color: rgba(255, 255, 255, 0.1);
+            background: rgba(255, 255, 255, 0.02);
+        }
+        .feature-card .icon {
+            font-size: 1.8rem;
+            margin-bottom: 24px;
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            width: 52px;
+            height: 52px;
+            background: rgba(255, 255, 255, 0.02);
+            border-radius: var(--radius-sm);
+            border: 1px solid var(--border);
+        }
+        .feature-card h4 {
+            font-size: 1.25rem;
+            font-weight: 700;
+            margin-bottom: 14px;
+            color: #ffffff;
+            letter-spacing: -0.01em;
+        }
+        .feature-card p {
+            font-size: 0.95rem;
+            color: var(--text-secondary);
+            line-height: 1.6;
+        }
+        /* ===== INDUSTRIAL DATA TABLE ===== */
+        .table-container {
+            border-radius: var(--radius-lg);
+            border: 1px solid var(--border);
+            overflow-x: auto;
+            background: var(--surface);
+            box-shadow: 0 40px 80px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255,255,255,0.03);
+            backdrop-filter: blur(20px);
+            -webkit-backdrop-filter: blur(20px);
+        }
+        .custom-table {
+            width: 100%;
+            border-collapse: collapse;
+            text-align: left;
+        }
+        .custom-table th {
+            padding: 24px 32px;
+            font-size: 0.75rem;
+            font-weight: 700;
+            text-transform: uppercase;
+            letter-spacing: 0.1em;
+            color: var(--text-secondary);
+            background: rgba(255, 255, 255, 0.02);
+            border-bottom: 1px solid var(--border);
+        }
+        .custom-table td {
+            padding: 22px 32px;
+            font-size: 0.98rem;
+            border-bottom: 1px solid rgba(255,255,255,0.03);
+            color: var(--text-secondary);
+            transition: all 0.2s;
+        }
+        .custom-table tr:last-child td { border-bottom: none; }
+        .custom-table tr:hover td {
+            background: rgba(255, 255, 255, 0.01);
+            color: #ffffff;
+        }
+        .table-link {
+            color: #ffffff;
+            text-decoration: none;
+            font-weight: 600;
+            display: inline-flex;
+            align-items: center;
+            gap: 8px;
+            transition: color 0.2s;
+        }
+        .table-link:hover {
+            color: #818cf8;
+        }
+        /* ===== FOOTER ===== */
+        footer {
+            border-top: 1px solid var(--border);
+            padding: 56px 0;
+            margin-top: 140px;
+            background: rgba(2, 0, 10, 0.8);
+        }
+        .footer-content {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            font-size: 0.9rem;
+            color: var(--text-secondary);
+            flex-wrap: wrap;
+            gap: 24px;
+        }
+        .footer-content span {
+            font-weight: 700;
+            color: #ffffff;
+        }
+        /* ===== RESPONSIVE GRID (MAX BREAKPOINTS) ===== */
+        @media (max-width: 968px) {
+            .hero { padding: 90px 0 60px; }
+            .hero h1 { font-size: 3.5rem; }
+            .cards-grid { grid-template-columns: 1fr; }
+            .footer-content { flex-direction: column; text-align: center; }
+        }
+        @media (max-width: 580px) {
+            .container { padding: 0 20px; }
+            .hero h1 { font-size: 2.4rem; }
+            .subtitle { font-size: 1.1rem; }
+            .chat-pipe {
+                flex-direction: column;
+                border-radius: 20px;
+                padding: 8px;
+                gap: 12px;
+            }
+            .chat-pipe input { padding: 12px 8px; }
+            .chat-pipe button { width: 100%; justify-content: center; border-radius: 14px; }
+            .split-variants { flex-direction: column; }
+            .custom-table th, .custom-table td { padding: 16px 20px; }
+        }
+    </style>
+</head>
+<body>
+    <div class="page-wrapper">
+        <nav class="navbar">
+            <div class="container nav-container">
+                <div class="logo">ThingsAI</div>
+            </div>
+        </nav>
+        <header class="hero">
+            <div class="container">
+                <span class="badge">✨ Quark v0.1 released</span>
+                <h1>Next-gen intelligence, <span>scaled down.</span></h1>
+                <p class="subtitle">
+                    Building highly efficient, logic-driven Small Language Models that run natively on edge hardware and consumer devices.
+                </p>
+                <form action="https://chat.things-ai.org/" target="_blank" class="chat-pipe">
+                    <input type="text" placeholder="Ask Quark anything..." required name="ignore_message">
+                    <button type="submit">
+                        <span>Launch Chat</span>
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
+                    </button>
+                </form>
+            </div>
+        </header>
+        <main class="container">
+            <section class="section">
+                <div class="section-header">
+                    <h2>Available Models</h2>
+                    <span class="line"></span>
+                </div>
+                <div class="cards-grid">
+                    <details class="card">
+                        <summary>
+                            <div class="card-tag">Bilingual</div>
+                            <h3>Quark-135M <span class="param-badge">135M</span></h3>
+                            <p class="card-desc">A lightweight bilingual language model optimized for speed and localized logic. Click to expand variants.</p>
+                            <p class="card-tech">Features GQA, SwiGLU, RMSNorm, and RoPE. Trained on 50B+ tokens of ultra-curated data.</p>
+                        </summary>
+                        <div class="card-details">
+                            <div class="split-variants">
+                                <a href="https://huggingface.co/ThingAI/Quark-135m" target="_blank" class="variant base">🧠 Base</a>
+                                <a href="https://huggingface.co/ThingAI/Quark-135m-Bilingual" target="_blank" class="variant bilingual">🌐 Bilingual</a>
+                            </div>
+                        </div>
+                    </details>
+                    <details class="card highlight">
+                        <summary>
+                            <div class="card-tag status">Featured Model</div>
+                            <h3>Quark-270M <span class="param-badge">270M</span></h3>
+                            <p class="card-desc">Our scaled small model featuring 32 layers and 768 hidden dimensions for advanced reasoning capabilities.</p>
+                            <p class="card-tech">Equipped with a dense 65K vocabulary. Specially designed for multi-turn instruct fine-tuning.</p>
+                        </summary>
+                        <div class="card-details">
+                            <div class="split-variants">
+                                <a href="https://huggingface.co/ThingAI/Quark-270m-Instruct" target="_blank" class="variant instruct">🚀 Instruct</a>
+                                <a href="https://huggingface.co/ThingAI/Quark-270m-Base" target="_blank" class="variant base-270">⚙️ Base</a>
+                            </div>
+                        </div>
+                    </details>
+                    <article class="card">
+                        <div class="card-tag old">Legacy</div>
+                        <h3>Quark-50M <span class="param-badge">50M</span></h3>
+                        <p class="card-desc">Our compact 50M parameter model — engineered for extremely hyper-low resource systems.</p>
+                        <p class="card-tech">Lightweight and highly volatile, ideal for basic sequence prediction and embedded units.</p>
+                        <a href="https://huggingface.co/ThingAI/Quark-50m" target="_blank" class="card-link">Explore Weights →</a>
+                    </article>
+                    <!-- Updated Quark-72M card with accurate details from README -->
+                    <article class="card">
+                        <div class="card-tag instruct">Instruct</div>
+                        <h3>Quark-72M <span class="param-badge">~72M</span></h3>
+                        <p class="card-desc">Instruction-tuned math & code model. Fine-tuned via SFT on a base checkpoint pre-trained on 5B tokens of math, code, and reasoning data.</p>
+                        <p class="card-tech">14 layers, 512 hidden size, GQA (8Q/2KV), SwiGLU, RoPE. Pre-trained on 5B tokens, then SFT‑aligned. License: Apache‑2.0.</p>
+                        <a href="https://huggingface.co/ThingAI/Quark-72M" target="_blank" class="card-link">Explore Weights →</a>
+                    </article>
+                    <article class="card">
+                        <div class="card-tag safety">Safety Matrix</div>
+                        <h3>Quark-Mod <span class="param-badge">Classifier</span></h3>
+                        <p class="card-desc">A high-throughput multi-label moderation engine covering 9 toxicity and cyber-safety categories.</p>
+                        <p class="card-tech">Detects: toxic, severe_toxic, obscene, threat, insult, identity_hate, and advanced content exploits.</p>
+                        <a href="https://huggingface.co/ThingAI/Quark-Mod" target="_blank" class="card-link">View Classifier →</a>
+                    </article>
+                </div>
+            </section>
+            <section class="section">
+                <div class="section-header">
+                    <h2>Core Focus Areas</h2>
+                    <span class="line"></span>
+                </div>
+                <div class="features-grid">
+                    <div class="feature-card">
+                        <div class="icon">⚡</div>
+                        <h4>Hyper-Efficient</h4>
+                        <p>Mastering sub-1B parameters using Grouped-Query Attention (GQA) architectures.</p>
+                    </div>
+                    <div class="feature-card">
+                        <div class="icon">🧠</div>
+                        <h4>Embedded CoT</h4>
+                        <p>Integrating step-by-step reasoning logic directly into the pre-training tokens.</p>
+                    </div>
+                    <div class="feature-card">
+                        <div class="icon">🌍</div>
+                        <h4>Bilingual Focus</h4>
+                        <p>High-density blending of localized Italian, English, and technical STEM pipelines.</p>
+                    </div>
+                    <div class="feature-card">
+                        <div class="icon">💻</div>
+                        <h4>True Open Source</h4>
+                        <p>All weights, configurations, and baseline streaming datasets are entirely open to the world.</p>
+                    </div>
+                </div>
+            </section>
+            <section class="section">
+                <div class="section-header">
+                    <h2>Open Ecosystem Index</h2>
+                    <span class="line"></span>
+                </div>
+                <div class="table-container">
+                    <table class="custom-table">
+                        <thead>
+                            <tr>
+                                <th>Repository Object</th>
+                                <th>Distribution Target</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr>
+                                <td><a href="https://huggingface.co/ThingAI/Quark-135m" target="_blank" class="table-link">📚 Quark-135M Base</a></td>
+                                <td>Foundational localized small baseline language matrix.</td>
+                            </tr>
+                            <tr>
+                                <td><a href="https://huggingface.co/ThingAI/Quark-135m-Bilingual" target="_blank" class="table-link">🌐 Quark-135M Bilingual</a></td>
+                                <td>Bilingual (IT + EN) checkpoint trained on balanced multi-source pools.</td>
+                            </tr>
+                            <tr>
+                                <td><a href="https://huggingface.co/ThingAI/Quark-270m-Instruct" target="_blank" class="table-link">🚀 Quark-270M Instruct</a></td>
+                                <td>Multi-turn conversation alignment model with strict formatting safety.</td>
+                            </tr>
+                            <tr>
+                                <td><a href="https://huggingface.co/ThingAI/Quark-270m-Base" target="_blank" class="table-link">⚙️ Quark-270M Base</a></td>
+                                <td>Base engine ready for specialized downstream task tokenization.</td>
+                            </tr>
+                            <tr>
+                                <td><a href="https://huggingface.co/ThingAI/Quark-50m" target="_blank" class="table-link">📦 Quark-50M</a></td>
+                                <td>Legacy foundational checkpoint for exploratory sequence architectures.</td>
+                            </tr>
+                            <tr>
+                                <td><a href="https://huggingface.co/ThingAI/Quark-Mod" target="_blank" class="table-link">🛡️ Quark-Mod</a></td>
+                                <td>Production safety guardrail classifier for modern pipeline filtering.</td>
+                            </tr>
+                            <tr>
+                                <td><a href="https://huggingface.co/collections/ThingAI/quark-v01" target="_blank" class="table-link">⚡️ Complete Collection (v0.1)</a></td>
+                                <td>Unified access hub to all current generation architectural releases.</td>
+                            </tr>
+                            <tr>
+                                <td><a href="https://github.com/overcastlab" target="_blank" class="table-link">💻 GitHub Organization</a></td>
+                                <td>Training codebases, data streaming pipelines, and infrastructure layers.</td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+            </section>
+        </main>
+        <footer>
+            <div class="container footer-content">
+                <p>&copy; 2026 <span>ThingsAI Labs</span>. Architectural weights distributed under Apache-2.0.</p>
+                <p>Engineered for absolute edge efficiency.</p>
+            </div>
+        </footer>
+    </div>
+</body>
+</html>