app.py

"""KRAZYKITTY // NEURAL LAB — Hugging Face research portfolio dashboard."""

from __future__ import annotations

import gradio as gr

from portfolio import project_choices, render_project
from readiness import TRACK_REQUIREMENTS, render_assessment, requirement_choices
from research_library import collection_choices, render_collection

CSS = """
:root {
  --kk-void: #090611; --kk-surface: #170D2B; --kk-deep: #6D28D9;
  --kk-violet: #8B5CF6; --kk-ultraviolet: #A855F7;
  --kk-lavender: #D8B4FE; --kk-mist: #E2E0F0;
}
body, .gradio-container {
  background: var(--kk-void) !important; color: var(--kk-mist) !important;
  font-family: Inter, ui-sans-serif, system-ui, "Segoe UI", sans-serif !important;
}
.gradio-container {
  --body-background-fill: #090611; --body-text-color: #E2E0F0;
  --body-text-color-subdued: #D8B4FE;
  --block-background-fill: #170D2B; --block-background-fill-dark: #170D2B;
  --block-border-color: #6D28D9; --block-border-color-dark: #6D28D9;
  --block-label-background-fill: #170D2B; --block-label-background-fill-dark: #170D2B;
  --block-label-text-color: #D8B4FE; --block-label-text-color-dark: #D8B4FE;
  --block-title-text-color: #E2E0F0; --block-title-text-color-dark: #E2E0F0;
  --input-background-fill: #090611; --input-background-fill-dark: #090611;
  --input-border-color: #8B5CF6; --input-border-color-dark: #8B5CF6;
  --input-text-color: #E2E0F0; --input-text-color-dark: #E2E0F0;
  --input-placeholder-color: #D8B4FE; --input-placeholder-color-dark: #D8B4FE;
  --button-primary-background-fill: #6D28D9; --button-primary-background-fill-dark: #6D28D9;
  --button-primary-background-fill-hover: #8B5CF6; --button-primary-background-fill-hover-dark: #8B5CF6;
  --button-primary-text-color: #E2E0F0; --button-primary-text-color-dark: #E2E0F0;
  --button-secondary-background-fill: #170D2B; --button-secondary-background-fill-dark: #170D2B;
  --button-secondary-text-color: #D8B4FE; --button-secondary-text-color-dark: #D8B4FE;
  --checkbox-background-color: #090611; --checkbox-background-color-dark: #090611;
  --checkbox-background-color-selected: #6D28D9; --checkbox-background-color-selected-dark: #6D28D9;
  --checkbox-label-background-fill: #090611; --checkbox-label-background-fill-dark: #090611;
  --checkbox-label-background-fill-selected: #170D2B; --checkbox-label-background-fill-selected-dark: #170D2B;
  --checkbox-label-text-color: #E2E0F0; --checkbox-label-text-color-dark: #E2E0F0;
  --background-fill-primary: #090611; --background-fill-primary-dark: #090611;
  --background-fill-secondary: #170D2B; --background-fill-secondary-dark: #170D2B;
  --border-color-primary: #6D28D9; --border-color-primary-dark: #6D28D9;
  --color-accent: #8B5CF6;
  max-width: 100% !important; padding: 0 !important; font-size: 16px !important;
  background-image: linear-gradient(rgba(109,40,217,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(109,40,217,.07) 1px, transparent 1px) !important;
  background-size: 64px 64px !important;
}
.gradio-container .lab-shell, .gradio-container .neko-shell {
  width: min(calc(100% - 3rem), 1180px); margin-inline: auto;
}
.gradio-container a { color: var(--kk-lavender); text-underline-offset: .25em; }
.gradio-container .main { max-width: 100% !important; padding: 0 !important; }
.gradio-container .html-container { padding: 0 !important; }
.gradio-container :where(a, button, input, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--kk-lavender) !important; outline-offset: 4px !important;
}
.gradio-container ::selection { background: var(--kk-lavender); color: var(--kk-void); }
.gradio-container .lab-header, .gradio-container .neko-header {
  background: var(--kk-void); border-bottom: 1px solid var(--kk-deep); padding: 0;
}
.gradio-container .lab-nav {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  min-height: 80px; flex-wrap: wrap; padding-block: 1rem;
}
.gradio-container .lab-brand {
  color: var(--kk-mist); font-size: .9rem; font-weight: 850; letter-spacing: .04em;
  text-decoration: none;
}
.gradio-container .lab-nav nav { display: flex; flex-wrap: wrap; gap: 1.4rem; }
.gradio-container .lab-nav nav a {
  font: 700 .75rem Consolas, monospace; letter-spacing: .08em; text-decoration: none;
}
.gradio-container .lab-nav nav a:hover { color: var(--kk-mist); }
.gradio-container .lab-hero, .gradio-container .neko-hero {
  display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(250px, .8fr);
  align-items: center; gap: 3rem; min-height: 0; padding-block: clamp(3rem, 6vw, 5rem);
}
.gradio-container .lab-kicker, .gradio-container .neko-kicker,
.gradio-container .section-kicker, .gradio-container .detail-eyebrow,
.gradio-container .boundary-label {
  color: var(--kk-lavender); font: 700 .75rem Consolas, monospace;
  letter-spacing: .13em; text-transform: uppercase;
}
.gradio-container .lab-hero h1, .gradio-container .neko-hero h1 {
  font-size: clamp(3rem, 7.5vw, 6.4rem); line-height: 1; font-weight: 900;
  letter-spacing: -.065em; margin: 1.1rem 0 1.5rem; max-width: none;
}
.gradio-container .lab-hero h1 span, .gradio-container .neko-hero h1 span {
  display: block; color: var(--kk-lavender);
}
.gradio-container .lab-lede, .gradio-container .neko-hero p {
  font-size: 1.1rem; line-height: 1.8; color: var(--kk-lavender); max-width: 58ch; margin: 0;
}
.gradio-container .hero-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.8rem; }
.gradio-container .project-link {
  display: inline-flex; align-items: center; justify-content: center; min-height: 46px;
  padding: .7rem 1.2rem; background: var(--kk-deep); color: var(--kk-mist);
  border: 1px solid var(--kk-violet); border-radius: 8px; font-size: .9rem;
  font-weight: 750; text-decoration: none; line-height: 1.4;
}
.gradio-container .project-link.secondary { background: var(--kk-surface); }
.gradio-container .project-link:hover { background: var(--kk-violet); color: var(--kk-void); }
.gradio-container .hero-console, .gradio-container .boundary-card {
  padding: 1.6rem; border: 1px solid var(--kk-violet); border-radius: 16px;
  background: linear-gradient(145deg, var(--kk-surface), var(--kk-void));
  box-shadow: 0 0 48px rgba(109,40,217,.14);
}
.gradio-container .console-mark {
  display: flex; align-items: center; justify-content: center; min-height: 140px;
  font-size: 3.8rem; letter-spacing: -.08em; font-weight: 900; color: var(--kk-mist);
  border-bottom: 1px solid var(--kk-deep); margin-bottom: 1rem;
}
.gradio-container .console-mark span { color: var(--kk-violet); }
.gradio-container .console-list { display: grid; gap: .7rem; }
.gradio-container .console-list span {
  display: flex; justify-content: space-between; gap: .5rem;
  font: .7rem Consolas, monospace; color: var(--kk-lavender);
}
.gradio-container .console-list strong { color: var(--kk-mist); }
.gradio-container .boundary-card strong {
  display: block; font-size: 1.6rem; line-height: 1.3; margin: 1rem 0; color: var(--kk-mist);
}
.gradio-container .boundary-card p { font-size: .95rem; line-height: 1.8; color: var(--kk-lavender); }
.gradio-container .lab-section { padding-block: 3rem; border-top: 1px solid var(--kk-deep); }
.gradio-container .lab-section h2, .gradio-container .neko-links h2 {
  font-size: clamp(1.8rem, 3.4vw, 2.8rem); font-weight: 850; line-height: 1.15;
  letter-spacing: -.04em; margin: .8rem 0 1rem; color: var(--kk-mist);
}
.gradio-container .section-lede { font-size: 1rem; line-height: 1.8; color: var(--kk-lavender); max-width: 72ch; }
.gradio-container .portfolio-grid, .gradio-container .principle-grid, .gradio-container .collection-grid {
  display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem; margin-top: 1.5rem;
}
.gradio-container .portfolio-card, .gradio-container .principle-card, .gradio-container .collection-card {
  min-height: 0; padding: 1.5rem; border: 1px solid var(--kk-deep);
  border-radius: 12px; background: var(--kk-surface); text-align: left; text-decoration: none;
}
.gradio-container .portfolio-card h3, .gradio-container .principle-card h3,
.gradio-container .collection-card h3 {
  font-size: 1.2rem; font-weight: 800; line-height: 1.4; color: var(--kk-mist); margin: .8rem 0 .5rem;
}
.gradio-container .portfolio-card p, .gradio-container .principle-card p,
.gradio-container .collection-card p {
  color: var(--kk-lavender); font-size: .95rem; line-height: 1.7; margin: 0;
}
.gradio-container a.collection-card:hover { border-color: var(--kk-lavender); }
.gradio-container .state-badge {
  display: inline-flex; border: 1px solid var(--kk-violet); border-radius: 5px;
  padding: .3rem .5rem; font: 700 .65rem Consolas, monospace; letter-spacing: .06em;
  color: var(--kk-lavender); line-height: 1.4;
}
.gradio-container .explorer-wrap, .gradio-container .demo-wrap {
  width: min(calc(100% - 3rem),1180px) !important; margin: 0 auto 2rem !important;
  padding: 0 !important; gap: 1.25rem !important; border: 0;
}
.gradio-container .explorer-panel, .gradio-container .demo-panel {
  padding: 1.5rem !important; border: 1px solid var(--kk-deep) !important;
  border-radius: 12px !important; background: var(--kk-surface) !important; gap: 1rem !important;
}
.gradio-container .explorer-panel .prose h2, .gradio-container .demo-panel .prose h2 {
  font-size: 1.35rem; line-height: 1.35; font-weight: 800; margin: 0 0 .8rem;
}
.gradio-container .explorer-panel .prose h3, .gradio-container .demo-panel .prose h3 {
  font-size: 1rem; font-weight: 800; color: var(--kk-lavender); margin: .8rem 0;
}
.gradio-container .prose p, .gradio-container .prose li { line-height: 1.75; }
.gradio-container .project-detail, .gradio-container .collection-detail {
  min-height: 0; height: 100%; padding: 1.75rem; border: 1px solid var(--kk-deep);
  border-radius: 12px; background: var(--kk-surface);
}
.gradio-container .detail-topline { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center; }
.gradio-container .project-detail h2 {
  font-size: clamp(1.8rem,3vw,2.5rem); font-weight: 850; letter-spacing: -.04em; margin: 1rem 0;
}
.gradio-container .collection-detail h3 { font-size: 1.5rem; font-weight: 800; line-height: 1.3; margin: 1rem 0; }
.gradio-container .project-detail h3 { font-size: 1rem; font-weight: 800; margin: 1.4rem 0 .6rem; }
.gradio-container .project-detail p, .gradio-container .project-detail li,
.gradio-container .collection-detail p, .gradio-container .collection-detail dd {
  font-size: .95rem; line-height: 1.75; color: var(--kk-lavender);
}
.gradio-container .project-detail ul { padding-left: 1.2rem; list-style: disc; }
.gradio-container .next-gate, .gradio-container .scope-note {
  margin: 1.2rem 0; padding: 1rem; background: var(--kk-void);
  border-left: 3px solid var(--kk-ultraviolet); border-radius: 5px;
}
.gradio-container .collection-facts { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem; margin: 1.5rem 0; }
.gradio-container .collection-facts div { padding: 1rem; border: 1px solid var(--kk-deep); border-radius: 8px; background: var(--kk-void); }
.gradio-container .collection-facts dt { color: var(--kk-lavender); font: .7rem Consolas,monospace; text-transform: uppercase; }
.gradio-container .collection-facts dd { margin: .4rem 0 0; font-weight: 750; }
.gradio-container .truth-banner { margin-top: 1.5rem; padding: 1rem; border: 1px solid var(--kk-deep); border-radius: 8px; font: .7rem/1.7 Consolas,monospace; color: var(--kk-lavender); }
.gradio-container .lab-footer, .gradio-container .neko-links {
  padding-block: 2rem; border-top: 1px solid var(--kk-deep); background: var(--kk-void);
}
.gradio-container .footer-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; font: .7rem/1.8 Consolas,monospace; color: var(--kk-lavender); }
.gradio-container .neko-links ul { display: flex; flex-wrap: wrap; gap: 1rem 2rem; padding: 0; list-style: none; }
.gradio-container .neko-links a { font-size: .9rem; }
.gradio-container button.primary { min-height: 46px; border-radius: 8px !important; font-weight: 750 !important; }
.gradio-container .cm-editor, .gradio-container .cm-gutters { background: var(--kk-void) !important; color: var(--kk-lavender) !important; }
.gradio-container .cm-content, .gradio-container .cm-content span { color: var(--kk-mist) !important; }
.gradio-container .cm-scroller { max-height: 440px !important; overflow: auto !important; font-size: 13px !important; }
.gradio-container .json-holder, .gradio-container .json-holder * { color: var(--kk-lavender) !important; background-color: var(--kk-void) !important; }
.gradio-container .block label, .gradio-container .block .label { color: var(--kk-lavender) !important; }
@media (max-width: 800px) {
  .lab-hero, .neko-hero { grid-template-columns: 1fr; gap: 2rem; }
  .hero-console { max-width: 420px; width: 100%; }
  .console-mark { min-height: 90px; font-size: 3rem; }
  .lab-nav { align-items: flex-start; flex-direction: column; gap: 1rem; }
}
@media (max-width: 560px) {
  .lab-shell, .neko-shell,
  .explorer-wrap, .demo-wrap { width: calc(100% - 2rem) !important; }
  .portfolio-grid, .principle-grid,
  .collection-grid, .collection-facts { grid-template-columns: 1fr; }
  .explorer-panel, .demo-panel { padding: 1rem !important; min-width: 0 !important; }
  .project-detail, .collection-detail { padding: 1.25rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}
"""

HERO = """
<header class="lab-header">
  <div class="lab-shell lab-nav">
    <a class="lab-brand" href="https://krazykitty.dev/" target="_blank" rel="noreferrer">KRAZYKITTY // NEURAL LAB</a>
    <nav aria-label="Research navigation"><a href="#portfolio">PORTFOLIO</a><a href="#project-explorer">EXPLORE</a><a href="#readiness">READINESS</a><a href="https://huggingface.co/spaces/KrazyKitty/KittyLM-Research" target="_blank" rel="noreferrer">KITTYLM ↗</a></nav>
  </div>
</header>
<main>
  <section class="lab-shell lab-hero" aria-labelledby="lab-title">
    <div>
      <span class="lab-kicker">Ultraviolet research interface</span>
      <h1 id="lab-title">NEURAL<span>LAB</span></h1>
      <p class="lab-lede">A navigable map of KrazyKitty's language-model, dataset, and agent-systems research—built around provenance, reproducibility, and honest evidence boundaries.</p>
      <div class="hero-actions"><a class="project-link" href="#project-explorer">Explore the research ↓</a><a class="project-link secondary" href="https://krazykitty.dev/#about" target="_blank" rel="noreferrer">Meet KrazyKitty ↗</a></div>
    </div>
    <aside class="hero-console" aria-label="Dashboard state">
      <div class="console-mark">K<span>//</span>K</div>
      <div class="console-list">
        <span>LIVE MODEL <strong>NONE</strong></span>
        <span>DATA UPLOAD <strong>NONE</strong></span>
        <span>EXTERNAL TOOLS <strong>NONE</strong></span>
        <span>DASHBOARD <strong>INTERACTIVE</strong></span>
      </div>
    </aside>
  </section>
  <section class="lab-section" id="portfolio">
    <div class="lab-shell">
      <span class="section-kicker">01 // Portfolio map</span>
      <h2>One lab. Distinct research boundaries.</h2>
      <p class="section-lede">Each node distinguishes published artifacts from planned work. Select a node below for its current evidence, limits, and next approval gate.</p>
      <div class="portfolio-grid">
        <article class="portfolio-card"><span class="state-badge verified">VERIFIED PUBLIC</span><h3>KittyLM</h3><p>Independent language-model research from tokenizer and architecture through training and evaluation engineering.</p></article>
        <article class="portfolio-card"><span class="state-badge verified">VERIFIED PUBLIC</span><h3>DATA LAB</h3><p>Dataset provenance, permission, preprocessing, quality, and evaluation-resource research.</p></article>
        <article class="portfolio-card"><span class="state-badge verified">VERIFIED PUBLIC</span><h3>NEKO//AGENT</h3><p>Tool use, retrieval, task execution, agent evaluation, and sandboxed safety boundaries.</p></article>
        <article class="portfolio-card"><span class="state-badge verified">VERIFIED PUBLIC</span><h3>Research Collections</h3><p>Curated Hugging Face repositories and papers grouped into four public research tracks.</p></article>
      </div>
    </div>
  </section>
</main>
"""

LOWER_SECTIONS = """
<section class="lab-section">
  <div class="lab-shell">
    <span class="section-kicker">05 // Operating principles</span>
    <h2>Claims follow evidence.</h2>
    <div class="principle-grid">
      <article class="principle-card"><h3>Provenance first</h3><p>Sources, revisions, licences, permissions, transformations, and integrity hashes remain attached to research artifacts.</p></article>
      <article class="principle-card"><h3>Smallest trustworthy step</h3><p>Complexity enters only when a controlled experiment or architectural boundary justifies it.</p></article>
      <article class="principle-card"><h3>Human authority</h3><p>Publishing, external writes, personal data, and consequential actions stay behind explicit approval gates.</p></article>
      <article class="principle-card"><h3>Measured status</h3><p>Verified, proposed, planned, failed, and unknown are visible states—not interchangeable marketing language.</p></article>
    </div>
    <div class="truth-banner">NO MODEL LOADED // NO GENERATED RESPONSE // NO TELEMETRY // NO FAKE LIVE STATUS</div>
  </div>
</section>
<section class="lab-section">
  <div class="lab-shell">
    <span class="section-kicker">06 // Research library</span>
    <h2>Four curated study tracks.</h2>
    <p class="section-lede">Collection contents are real Hugging Face repositories and papers. Inclusion supports study; it does not replace each resource's licence, access, or usage review.</p>
    <div class="collection-grid">
      <a class="collection-card" href="https://huggingface.co/collections/KrazyKitty/krazykitty-transformer-foundations-6acbaca0f392f5a1fc1e9650" target="_blank" rel="noreferrer"><span class="state-badge verified">VERIFIED PUBLIC</span><h3>Transformer Foundations</h3><p>Attention, bidirectional pretraining, autoregressive modelling, and compact open baselines.</p></a>
      <a class="collection-card" href="https://huggingface.co/collections/KrazyKitty/krazykitty-model-training-6acbacafe431a8f2d5adcb5f" target="_blank" rel="noreferrer"><span class="state-badge verified">VERIFIED PUBLIC</span><h3>Model Training</h3><p>Compute allocation, parameter-efficient adaptation, quantised finetuning, and preference optimisation.</p></a>
      <a class="collection-card" href="https://huggingface.co/collections/KrazyKitty/krazykitty-data-provenance-and-evaluation-6acbacbf0fdd3575a61550e6" target="_blank" rel="noreferrer"><span class="state-badge verified">VERIFIED PUBLIC</span><h3>Data Provenance &amp; Evaluation</h3><p>Open corpus construction, transparent filtering, benchmark governance, and contamination awareness.</p></a>
      <a class="collection-card" href="https://huggingface.co/collections/KrazyKitty/neko-agent-agent-systems-6acbacd0a0d63e6bb904c0e2" target="_blank" rel="noreferrer"><span class="state-badge verified">VERIFIED PUBLIC</span><h3>Agent Systems</h3><p>Reasoning with actions, tool learning, reflective agents, and executable software-engineering evaluation.</p></a>
    </div>
  </div>
</section>
<footer class="lab-footer">
  <div class="lab-shell footer-row"><span>KRAZYKITTY // NEURAL LAB</span><span>BUILD // MEASURE // VERIFY // SHARE DELIBERATELY</span></div>
</footer>
"""


def update_requirements(track: str) -> gr.CheckboxGroup:
    """Reset the checklist whenever the research track changes."""

    return gr.CheckboxGroup(choices=requirement_choices(track), value=[])


with gr.Blocks(title="KRAZYKITTY // NEURAL LAB") as demo:
    gr.HTML(HERO, container=False, apply_default_css=False)
    with gr.Row(elem_id="project-explorer", elem_classes=["explorer-wrap"]):
        with gr.Column(scale=1, min_width=260, elem_classes=["explorer-panel"]):
            gr.Markdown(
                "## 02 // Project explorer\nChoose a research node. Status labels are evidence states, not live service indicators."
            )
            project_picker = gr.Dropdown(
                choices=project_choices(),
                value="KittyLM",
                label="Research node",
                info="Opens a read-only evidence summary.",
                interactive=True,
            )
        with gr.Column(scale=2, min_width=320):
            project_detail = gr.HTML(render_project("KittyLM"), container=False, apply_default_css=False)
    project_picker.change(
        render_project,
        inputs=project_picker,
        outputs=project_detail,
        api_visibility="private",
    )
    with gr.Row(elem_id="collection-explorer", elem_classes=["explorer-wrap"]):
        with gr.Column(scale=1, min_width=260, elem_classes=["explorer-panel"]):
            gr.Markdown(
                "## 03 // Collection explorer\nReview the scope and first-party research node for each public Collection."
            )
            collection_picker = gr.Dropdown(
                choices=collection_choices(),
                value="Transformer Foundations",
                label="Research Collection",
                info="Opens a curated research track.",
                interactive=True,
            )
        with gr.Column(scale=2, min_width=320):
            collection_detail = gr.HTML(
                render_collection("Transformer Foundations"), container=False, apply_default_css=False
            )
    collection_picker.change(
        render_collection,
        inputs=collection_picker,
        outputs=collection_detail,
        api_visibility="private",
    )
    with gr.Row(elem_id="readiness", elem_classes=["explorer-wrap"]):
        with gr.Column(scale=1, min_width=300, elem_classes=["explorer-panel"]):
            gr.Markdown(
                "## 04 // Research-readiness check\nA transparent documentation checklist—not a model, safety certification, or publication decision."
            )
            track_picker = gr.Dropdown(
                choices=list(TRACK_REQUIREMENTS),
                value="Language model experiment",
                label="Research track",
                interactive=True,
            )
            requirement_picker = gr.CheckboxGroup(
                choices=requirement_choices("Language model experiment"),
                label="Evidence currently documented",
                info="Tick only evidence that exists and can be reviewed.",
            )
            assess_button = gr.Button("Assess documentation readiness", variant="primary")
        with gr.Column(scale=1, min_width=300):
            readiness_result = gr.Markdown(
                render_assessment("Language model experiment", []),
                elem_classes=["explorer-panel"],
            )
    track_picker.change(
        update_requirements,
        inputs=track_picker,
        outputs=requirement_picker,
        api_visibility="private",
    )
    assess_button.click(
        render_assessment,
        inputs=[track_picker, requirement_picker],
        outputs=readiness_result,
        api_visibility="private",
    )
    gr.HTML(LOWER_SECTIONS, container=False, apply_default_css=False)


if __name__ == "__main__":
    demo.launch(css=CSS, footer_links=[])