| <style> | |
| :root{ | |
| --bg: #ffffff; | |
| --fg: #0f0f11; | |
| --muted: #6b7280; | |
| --ring: #e5e7eb; | |
| --chip: #f4f4f5; | |
| --hf-yellow: #ffcc4d; | |
| --hf-black: #0c0c0c; | |
| --accent: #ff4d88; /* HelpingAI pink — change as you like */ | |
| --accent-2:#ff8fb2; | |
| --shadow: 0 20px 40px rgba(2,6,23,.08), inset 0 1px 0 rgba(255,255,255,.5); | |
| --radius: 18px; | |
| } | |
| @media (prefers-color-scheme: dark){ | |
| :root{ | |
| --bg: #0f0f11; | |
| --fg: #f5f5f7; | |
| --muted: #a1a1aa; | |
| --ring: #26272b; | |
| --chip: #151518; | |
| --shadow: 0 20px 40px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.03); | |
| } | |
| } | |
| * { box-sizing: border-box } | |
| body{ | |
| margin:0; | |
| background: | |
| radial-gradient(1200px 500px at 10% -10%, rgba(255,77,136,.10), transparent 60%), | |
| radial-gradient(900px 400px at 110% 0%, rgba(255,204,77,.12), transparent 55%), | |
| var(--bg); | |
| color:var(--fg); | |
| font: 14px/1.4 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji"; | |
| padding:32px; | |
| display:grid; | |
| place-items:center; | |
| min-height:100dvh; | |
| } | |
| .org-card{ | |
| width:min(880px, 94vw); | |
| background: linear-gradient(180deg, rgba(255,255,255,.6), rgba(255,255,255,.2)) padding-box; | |
| background-color: var(--bg); | |
| border: 1px solid var(--ring); | |
| border-radius: var(--radius); | |
| box-shadow: var(--shadow); | |
| overflow:hidden; | |
| } | |
| .banner{ | |
| position:relative; | |
| height:96px; | |
| background: | |
| radial-gradient(1200px 180px at -10% 10%, rgba(255,77,136,.18), transparent 60%), | |
| radial-gradient(900px 160px at 110% -10%, rgba(255,204,77,.25), transparent 55%), | |
| linear-gradient(90deg, rgba(255,77,136,.10), rgba(255,204,77,.15)); | |
| border-bottom:1px solid var(--ring); | |
| } | |
| .row{ | |
| display:flex; gap:18px; align-items:center; | |
| padding:18px 20px; | |
| } | |
| .avatar{ | |
| width:72px; height:72px; border-radius:16px; background:var(--bg); border:1px solid var(--ring); | |
| display:grid; place-items:center; margin-top:-40px; box-shadow:0 10px 24px rgba(0,0,0,.10); | |
| } | |
| .avatar svg{ width:46px; height:46px } | |
| .title{ | |
| display:flex; flex-direction:column; gap:6px; min-width:0; | |
| } | |
| .title h1{ | |
| margin:0; font-size:22px; letter-spacing:.2px; line-height:1.2; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; | |
| } | |
| .tagline{ color:var(--muted); font-size:13px; } | |
| .badges{ | |
| margin-left:auto; display:flex; gap:10px; flex-wrap:wrap; align-items:center; | |
| } | |
| .badge{ | |
| display:inline-flex; align-items:center; gap:8px; | |
| padding:8px 12px; border-radius:12px; background:var(--chip); border:1px solid var(--ring); | |
| font-weight:600; letter-spacing:.2px; | |
| } | |
| .badge .num{ font-variant-numeric: tabular-nums; } | |
| .chips{ padding:0 20px 16px; display:flex; gap:8px; flex-wrap:wrap } | |
| .chip{ | |
| padding:6px 10px; border-radius:999px; background:var(--chip); border:1px solid var(--ring); color:var(--muted); font-size:12px; | |
| } | |
| .cta{ | |
| padding:2px 20px 20px; display:flex; gap:10px; flex-wrap:wrap; | |
| } | |
| .btn{ | |
| display:inline-flex; align-items:center; gap:10px; | |
| padding:10px 14px; border-radius:12px; border:1px solid var(--ring); text-decoration:none; color:var(--fg); | |
| transition: transform .04s ease, box-shadow .2s ease, border-color .2s ease; | |
| will-change: transform; | |
| } | |
| .btn:hover{ transform: translateY(-1px); box-shadow:0 12px 24px rgba(0,0,0,.10) } | |
| .btn:active{ transform: translateY(0) } | |
| .btn.primary{ background:linear-gradient(180deg, var(--accent), var(--accent-2)); color:white; border-color:transparent } | |
| .btn.hf{ background:#fff; border-color:#111; color:#111 } | |
| @media (prefers-color-scheme: dark){ | |
| .btn.hf{ background:#111; border-color:#222; color:#fff } | |
| } | |
| .btn .dot{ width:8px; height:8px; border-radius:50%; background:var(--hf-yellow); box-shadow:0 0 0 2px var(--hf-black) inset } | |
| .btn small{ opacity:.8 } | |
| .meta{ | |
| padding:14px 20px; border-top:1px dashed var(--ring); color:var(--muted); display:flex; gap:14px; flex-wrap:wrap; font-size:12px | |
| } | |
| .meta a{ color:inherit; text-decoration:none; border-bottom:1px dashed currentColor } | |
| .spacer{ flex:1 } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- ORG CARD --> | |
| <article class="org-card" role="group" aria-label="Hugging Face Organization: HelpingAI"> | |
| <div class="banner"></div> | |
| <div class="row"> | |
| <!-- Replace the SVG with your logo if you have one --> | |
| <div class="avatar" aria-hidden="true"> | |
| <!-- Simple neural-nodes logo --> | |
| <svg viewBox="0 0 64 64" fill="none"> | |
| <defs> | |
| <linearGradient id="g" x1="0" y1="0" x2="64" y2="64" gradientUnits="userSpaceOnUse"> | |
| <stop stop-color="#ff4d88"/><stop offset="1" stop-color="#ffcc4d"/> | |
| </linearGradient> | |
| </defs> | |
| <circle cx="12" cy="32" r="6" fill="url(#g)"/> | |
| <circle cx="32" cy="12" r="6" fill="url(#g)"/> | |
| <circle cx="32" cy="32" r="6" fill="url(#g)"/> | |
| <circle cx="32" cy="52" r="6" fill="url(#g)"/> | |
| <circle cx="52" cy="32" r="6" fill="url(#g)"/> | |
| <path d="M18 32h8M32 18v8M32 38v8M38 32h8" stroke="url(#g)" stroke-width="4" stroke-linecap="round"/> | |
| </svg> | |
| </div> | |
| <div class="title"> | |
| <h1>HelpingAI Labs</h1> | |
| <div class="tagline">World’s first Intermediate-Reasoning models — smarter, faster, token-efficient.</div> | |
| </div> | |
| <div class="badges" aria-label="Organization stats"> | |
| <span class="badge" title="Models published"> | |
| <!-- model icon --> | |
| <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 2 2 7l10 5 10-5-10-5Zm0 7L2 4v13l10 5 10-5V4l-10 5Z"/></svg> | |
| <span class="num">12</span> | |
| </span> | |
| <span class="badge" title="Datasets"> | |
| <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M3 5h18v4H3zM3 10h18v4H3zM3 15h18v4H3z"/></svg> | |
| <span class="num">6</span> | |
| </span> | |
| <span class="badge" title="Spaces / Demos"> | |
| <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M4 4h7v7H4zM13 4h7v7h-7zM4 13h7v7H4zM13 13h7v7h-7z"/></svg> | |
| <span class="num">3</span> | |
| </span> | |
| <span class="badge" title="Followers"> | |
| <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M12 12a5 5 0 1 0-5-5 5 5 0 0 0 5 5Zm0 2c-5 0-9 2.5-9 5.5V22h18v-2.5C21 16.5 17 14 12 14Z"/></svg> | |
| <span class="num">1.8k</span> | |
| </span> | |
| </div> | |
| </div> | |
| <div class="chips" aria-label="Highlights"> | |
| <span class="chip">Intermediate Reasoning</span> | |
| <span class="chip">High EQ</span> | |
| <span class="chip">OpenAI-compatible API</span> | |
| <span class="chip">10× token-efficient</span> | |
| <span class="chip">Multimodal</span> | |
| </div> | |
| <div class="cta"> | |
| <a class="btn primary" href="https://chat.helpingai.co" target="_blank" rel="noopener"> | |
| <!-- rocket --> | |
| <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M13 3l8 8-3 3-2-2-4 4 2 2-2 2-3-3-3 1 1-3-3-3 2-2 2 2 4-4-2-2 3-3Zm1 6l1 1-4 4-1-1 4-4Z"/></svg> | |
| Try on Playground | |
| </a> | |
| <a class="btn" href="https://helpingai.co" target="_blank" rel="noopener"> | |
| <!-- link --> | |
| <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M10 13a5 5 0 0 0 7 0l2-2a5 5 0 1 0-7-7l-1.5 1.5M14 11a5 5 0 0 0-7 0l-2 2a5 5 0 1 0 7 7L13.5 19"/></svg> | |
| Website | |
| </a> | |
| <a class="btn hf" href="https://huggingface.co/organizations/helpingai" target="_blank" rel="noopener"> | |
| <span class="dot" aria-hidden="true"></span> | |
| <strong>Follow</strong> <small>on Hugging Face</small> | |
| </a> | |
| <span class="spacer"></span> | |
| <a class="btn" href="https://helpingai.co/docs" target="_blank" rel="noopener"> | |
| <!-- book --> | |
| <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M4 3h11a3 3 0 0 1 3 3v13a2 2 0 0 1-2 2H5a3 3 0 0 1-1-6V6a3 3 0 0 1 0-3Z"/></svg> | |
| Docs | |
| </a> | |
| </div> | |
| <div class="meta"> | |
| <span>Latest model: <a href="https://huggingface.co/HelpingAI/Dhanishtha-2.0-preview" target="_blank" rel="noopener">Dhanishtha-2.0-preview</a></span> | |
| <span>SDK: OpenAI-compatible</span> | |
| <span>Latency: sub-second streaming</span> | |
| <span>Contact: <a href="mailto:hello@helpingai.co">hello@helpingai.co</a></span> | |
| </div> | |
| </article> | |
| </body> | |