Synapse-Graph/index.html at main · FiscalMindset/Synapse-Graph · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <link rel="icon" type="image/png" href="favicon.png">
    <title>Synapse-Graph — Intro</title>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
    <style>
      :root{--bg:#0a0f1a;--card-bg:rgba(15,25,45,0.85);--muted:#6b8aad;--accent:#60d4ff;--accent2:#3ee1ff;--glow:rgba(62,225,255,0.15)}
      @keyframes fadeUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
      @keyframes pulse-glow{0%,100%{box-shadow:0 0 30px var(--glow),0 0 60px rgba(62,225,255,0.05)}50%{box-shadow:0 0 50px var(--glow),0 0 80px rgba(62,225,255,0.1)}}
      @keyframes border-glow{0%,100%{border-color:rgba(62,225,255,0.3)}50%{border-color:rgba(62,225,255,0.6)}}
      @keyframes scan-line{0%{top:-2px}100%{top:100%}}
      @keyframes pulse{0%,100%{opacity:1}50%{opacity:0.6}}
      *{box-sizing:border-box}
      html,body{height:100%;margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;background:var(--bg);color:#e6eef8;overflow:hidden}
      .video-frame{position:relative;height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px}
      .video-frame::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,transparent,var(--accent2),var(--accent),transparent);animation:scan-line 3s linear infinite;opacity:0.5}
      .frame-border{position:absolute;top:12px;left:12px;right:12px;bottom:12px;border:1px solid rgba(62,225,255,0.2);border-radius:8px;pointer-events:none;animation:border-glow 4s ease-in-out infinite}
      .scene-label{position:absolute;top:18px;left:18px;background:linear-gradient(135deg,rgba(62,225,255,0.2),rgba(96,212,255,0.1));padding:6px 12px;border-radius:6px;font-size:10px;font-weight:600;color:var(--accent2);letter-spacing:1px}
      .intro-card{background:var(--card-bg);backdrop-filter:blur(20px);border:1px solid rgba(62,225,255,0.15);border-radius:14px;padding:20px;max-width:1100px;width:100%;animation:fadeUp 1s ease both;box-shadow:0 30px 80px rgba(0,0,0,0.6),inset 0 1px 0 rgba(255,255,255,0.08);display:flex;flex-direction:column;gap:16px}
      .hero-layout{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:center;flex:1;min-height:0}

      .hero-text h1{font-size:38px;font-weight:800;margin:0 0 10px 0;background:linear-gradient(135deg,#e6eef8,#60d4ff);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1.1}
      .hero-text h2{font-size:13px;font-weight:500;color:var(--muted);margin:0 0 16px 0;line-height:1.5}

      .graph-video-container{position:relative;border-radius:12px;overflow:hidden;border:1px solid rgba(62,225,255,0.2);background:#000;max-height:280px;display:flex;align-items:center}
      .graph-video{width:100%;height:auto;display:block;border-radius:12px;max-height:280px;object-fit:cover}
      .video-overlay{position:absolute;bottom:10px;left:10px;background:rgba(0,0,0,0.8);padding:6px 12px;border-radius:8px;font-size:11px;color:var(--accent);display:flex;align-items:center;gap:6px}
      .video-overlay-icon{animation:pulse 2s infinite}

      .features-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
      .feature{background:rgba(0,20,40,0.5);border:1px solid rgba(62,225,255,0.1);border-radius:10px;padding:12px;transition:all .3s ease;cursor:default}
      .feature:hover{transform:translateY(-3px);border-color:rgba(62,225,255,0.3);box-shadow:0 8px 24px rgba(62,225,255,0.1)}
      .feature-icon{width:32px;height:32px;background:linear-gradient(135deg,rgba(62,225,255,0.2),rgba(96,212,255,0.1));border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:16px;margin-bottom:8px}
      .feature-title{font-size:12px;font-weight:700;color:#e6eef8;margin-bottom:4px}
      .feature-desc{font-size:10px;color:var(--muted);line-height:1.4}

      .cta-container{display:flex;flex-direction:column;gap:10px;margin-top:12px}
      .btn{background:linear-gradient(135deg,var(--accent2),var(--accent));border:none;color:#052034;padding:12px 22px;border-radius:10px;font-weight:700;font-size:13px;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:all .3s ease;animation:pulse-glow 3s ease-in-out infinite}
      .btn:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 12px 32px rgba(62,225,255,0.3)}
      .btn-arrow{font-size:16px}
      .meta{font-size:11px;color:var(--muted)}
      .meta a{color:var(--accent);text-decoration:none}

      @media (max-width:1000px) {
        .hero-layout{grid-template-columns:1fr;gap:16px}
        .intro-card{max-width:100%}
      }
      @media (max-width:900px) {
        .video-frame{padding:16px}
        .frame-border{top:8px;left:8px;right:8px;bottom:8px}
        .scene-label{top:10px;left:10px;font-size:9px;padding:4px 8px}
        .intro-card{padding:16px;border-radius:10px}
        .hero-text h1{font-size:32px}
        .hero-text h2{font-size:12px}
        .features-grid{grid-template-columns:1fr 1fr}
        .graph-video-container{max-height:200px}
      }
      @media (max-width:600px) {
        .video-frame{padding:8px}
        .intro-card{padding:14px;border-radius:8px;gap:12px}
        .hero-text h1{font-size:26px}
        .hero-text h2{font-size:11px}
        .features-grid{grid-template-columns:1fr;gap:8px}
        .feature{padding:10px}
        .btn{padding:10px 18px;font-size:12px}
        .meta{text-align:center}
        .graph-video-container{max-height:160px}
        .video-overlay{font-size:10px;padding:4px 8px}
      }
    </style>
  </head>
  <body>
    <div class="video-frame">
      <div class="frame-border"></div>
      <div class="scene-label">SCENE 00 — INTRO</div>
      <div class="intro-card">
        <div class="hero-layout">
          <div class="hero-text">
            <h1>Synapse-Graph</h1>
            <h2>Automated Circuit Discovery · OpenMetadata Governance<br>Differential Traces for AI Interpretability</h2>

            <div class="features-grid">
              <div class="feature">
                <div class="feature-icon">🔍</div>
                <div class="feature-title">Circuit Discovery</div>
                <div class="feature-desc">Auto-rank attention heads, single & pair ablation sweeps</div>
              </div>
              <div class="feature">
                <div class="feature-icon">🛡️</div>
                <div class="feature-title">Governance</div>
                <div class="feature-desc">Quarantine heads via OpenMetadata tags</div>
              </div>
              <div class="feature">
                <div class="feature-icon">📊</div>
                <div class="feature-title">Differential Traces</div>
                <div class="feature-desc">Baseline vs ablated overlays for debugging</div>
              </div>
              <div class="feature">
                <div class="feature-icon">🔗</div>
                <div class="feature-title">Lineage</div>
                <div class="feature-desc">Prompt → layer → head → token tracking</div>
              </div>
            </div>

            <div class="cta-container">
              <a class="btn" href="video_diagram.html">
                Start Demo
                <span class="btn-arrow">→</span>
              </a>
              <div class="meta">Repo: <a href="https://github.com/FiscalMindset/Synapse-Graph">FiscalMindset/Synapse-Graph</a></div>
            </div>
          </div>

          <div>
            <div class="graph-video-container">
              <video class="graph-video" autoplay muted loop playsinline controls>
                <source src="graph.mp4" type="video/mp4">
                Your browser does not support the video tag.
              </video>
              <div class="video-overlay">
                <span class="video-overlay-icon">▶</span>
                Live Synapse Graph Visualization
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <script src="tour.js"></script>
  </body>
</html>