Skip to content

Commit 9bce9fb

Browse files
wu-shengwu-sheng
authored
Blog + homepage: Meet Horizon UI — The AI Assistant (EN + CN) (#886)
1 parent 2dac005 commit 9bce9fb

13 files changed

Lines changed: 394 additions & 15 deletions

File tree

‎assets/scss/_custom_home.scss‎

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -294,6 +294,78 @@ $brand-grad: linear-gradient(180deg, #479EEB 0%, #3788D0 100%);
294294
}
295295

296296

297+
// ---------- HIGHLIGHT FEATURE ROWS (AI Assistant + 3D map, zigzag) ----------
298+
// Two flagship "experience" features presented as alternating media/copy rows.
299+
.feature-rows {
300+
.frow {
301+
display: grid; grid-template-columns: 1fr 1fr; gap: 52px; align-items: start;
302+
}
303+
.frow + .frow { margin-top: 80px; }
304+
// alternate: reversed rows put the media on the right, copy on the left,
305+
// and center the copy against the taller 3D stage
306+
.frow--reverse { align-items: center; }
307+
.frow--reverse .frow-media { order: 2; }
308+
309+
.frow-media {
310+
margin: 0; min-width: 0; // allow the framed shot / 3D stage to shrink in its cell
311+
display: flex; flex-direction: column; gap: 16px; // stack the framed capture + BYO callout
312+
// framed AI capture (video, or its poster) inside a row cell
313+
.hero-shot img,
314+
.hero-shot video { display: block; width: 100%; height: auto; max-height: 440px; object-fit: contain; background: #0f131a; }
315+
// the 3D map stage is centered + width-capped globally; fill the cell here
316+
.map3d-stage { max-width: 100%; }
317+
}
318+
319+
.frow-copy {
320+
.eyebrow { margin-bottom: 12px; }
321+
h2 { font-size: 30px; font-weight: 700; color: $ink; border: 0; padding: 0;
322+
margin: 0 0 14px; line-height: 1.22; }
323+
> p { font-size: 16px; color: $body; line-height: 1.65; margin: 0 0 20px; }
324+
}
325+
326+
// compact feature list in the copy column
327+
.frow-points {
328+
list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 14px;
329+
li {
330+
display: flex; gap: 12px; align-items: flex-start;
331+
font-size: 14.5px; color: $body; line-height: 1.55;
332+
strong { color: $ink; font-weight: 700; }
333+
}
334+
// meaning-bearing glyph in a brand chip — chart / magnifier / shield,
335+
// one per point so the icon reinforces the words
336+
.fp-ic {
337+
flex: 0 0 auto; margin-top: 1px;
338+
width: 26px; height: 26px; border-radius: 7px;
339+
display: grid; place-items: center;
340+
color: #fff; background: $brand-grad;
341+
box-shadow: 0 3px 8px rgba(55, 136, 208, .3);
342+
svg { width: 15px; height: 15px; display: block; }
343+
}
344+
}
345+
346+
.frow-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 4px; }
347+
}
348+
349+
// "bring your own LLM" callout — the cost / vendor-neutral message (under the AI video)
350+
.ai-byo {
351+
margin: 0;
352+
display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap;
353+
border: 1px solid #d6e4f5; border-radius: 12px;
354+
background: radial-gradient(130% 150% at 0% 0%, #f2f8ff 0%, #fff 62%);
355+
padding: 15px 17px;
356+
.ai-byo-tag {
357+
flex: 0 0 auto;
358+
display: inline-flex; align-items: center; height: 24px; padding: 0 11px;
359+
border-radius: 999px; font-size: 11.5px; font-weight: 700; letter-spacing: .02em;
360+
color: #fff; background: $brand-grad; box-shadow: 0 4px 12px rgba(55, 136, 208, .3);
361+
}
362+
p {
363+
flex: 1 1 240px; margin: 0; font-size: 13.5px; color: $body; line-height: 1.6;
364+
strong { color: $ink; }
365+
}
366+
}
367+
368+
297369
// ---------- ECOSYSTEM ----------
298370
.eco-grid {
299371
display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-bottom: 36px;
@@ -446,6 +518,10 @@ $brand-grad: linear-gradient(180deg, #479EEB 0%, #3788D0 100%);
446518
.home-hero-text h1 { font-size: 42px; }
447519
.cap-grid { grid-template-columns: 1fr 1fr; }
448520
.eco-grid { grid-template-columns: 1fr 1fr; }
521+
// stack the zigzag rows; always show the media on top when stacked
522+
.feature-rows .frow { grid-template-columns: 1fr; gap: 28px; }
523+
.feature-rows .frow + .frow { margin-top: 52px; }
524+
.feature-rows .frow--reverse .frow-media { order: 0; }
449525
.community-cards { grid-template-columns: 1fr; }
450526
.widget-card { flex-basis: 45%; min-height: 220px; }
451527
}

‎content/_index.html‎

Lines changed: 67 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -88,6 +88,73 @@ <h1>The observability platform for <span class="accent">cloud-native</span></h1>
8888
</section>
8989

9090
<div class="home-below">
91+
<!-- ===== HIGHLIGHTS: AI Assistant + 3D map (alternating rows) =====
92+
AI Assistant ships with Horizon UI 1.0 (feature is merged to main).
93+
Media: horizon-ai-assistant.mp4 (a 3x screen capture); horizon-ai-assistant.png is its
94+
click-to-play poster still. "AI Assistant docs" -> /next/ operate doc (on main); "Meet
95+
Horizon UI" -> the AI-assistant announcement post (draft: true until the 1.0 launch). -->
96+
<section class="home-section feature-rows">
97+
<div class="container">
98+
99+
<!-- Row 1 · AI Assistant — video + BYO callout on the left, copy on the right -->
100+
<div class="frow">
101+
<div class="frow-media">
102+
<figure class="hero-shot ai-shot">
103+
<span class="shot-bar"><i></i><i></i><i></i><em>horizon · AI Assistant</em></span>
104+
<video class="ai-video" poster="/images/home/horizon-ai-assistant.png"
105+
controls muted loop playsinline preload="none"
106+
aria-label="Horizon AI Assistant investigating latency — replies with inline charts and a service-dependency topology">
107+
<source src="/images/home/horizon-ai-assistant.mp4" type="video/mp4">
108+
</video>
109+
</figure>
110+
<div class="ai-byo">
111+
<span class="ai-byo-tag">Bring your own LLM</span>
112+
<p><strong>No frontier model required.</strong> Vendor-neutral — any OpenAI-compatible endpoint or Amazon Bedrock — and runs efficiently on a cost-effective model like <strong>DeepSeek</strong> or a mid-tier <strong>Claude Sonnet</strong>. The observability know-how lives in the tools, metric catalog and playbooks; the model orchestrates and narrates. Off by default.</p>
113+
</div>
114+
</div>
115+
<div class="frow-copy">
116+
<span class="eyebrow">NEW · AI ASSISTANT</span>
117+
<h2>Ask your observability in plain language</h2>
118+
<p>Horizon's built-in assistant answers questions about your running system — <em>"what's unhealthy right now?"</em>, <em>"investigate latency for checkout"</em> — and replies with an ordered narrative built from the <strong>same charts, topology and tables</strong> as the rest of the UI, not a wall of text.</p>
119+
<ul class="frow-points">
120+
<li>
121+
<span class="fp-ic" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 5v14a1 1 0 0 0 1 1h15"/><path d="M7.5 14l3.5-4 3 2.5 4.5-6"/></svg></span>
122+
<span><strong>Answers you can see.</strong> Inline charts, top-N lists, tables and a focused one-hop topology — drawn by the same widgets as the dashboards.</span>
123+
</li>
124+
<li>
125+
<span class="fp-ic" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="7"/><path d="M20.5 20.5l-4.2-4.2"/></svg></span>
126+
<span><strong>Guided root-cause.</strong> Playbooks walk root service → calling chain → error stack, read live Kubernetes pod logs, and can propose a profiling task only you approve.</span>
127+
</li>
128+
<li>
129+
<span class="fp-ic" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3l7 3v5c0 4.4-3 7.6-7 9-4-1.4-7-4.6-7-9V6l7-3z"/><path d="M9 12l2 2 4-4"/></svg></span>
130+
<span><strong>Read-only, your permissions.</strong> Every action re-checks a read verb you already hold — it never sees more than you can, and never edits anything.</span>
131+
</li>
132+
</ul>
133+
<div class="frow-cta">
134+
<a class="sky-btn primary" href="/docs/skywalking-horizon-ui/next/operate/ai-assistant/">AI Assistant docs <i class="iconfont icon-arrow-right"></i></a>
135+
<a class="sky-btn" href="/blog/2026-07-06-horizon-ui-ai-assistant/">Meet Horizon UI</a>
136+
</div>
137+
</div>
138+
</div>
139+
140+
<!-- Row 2 · 3D map — copy left, media right (alternating) -->
141+
<div class="frow frow--reverse">
142+
<figure class="frow-media">
143+
{{< map3d poster="/images/home/horizon-3d-map.png" badge="Interactive · sample data" >}}
144+
</figure>
145+
<div class="frow-copy">
146+
<span class="eyebrow">SEE IT IN 3D</span>
147+
<h2>Explore your topology in 3D</h2>
148+
<p>Walk your services and cloud-native infrastructure as a living 3D scene — orbit, zoom and click any node to inspect it. It opens as a full page and runs entirely in your browser from a frozen demo snapshot: no server, no login, no setup.</p>
149+
<div class="frow-cta">
150+
<a class="sky-btn primary" href="/3d-map-app/">Open the 3D map <span class="hint">full page</span></a>
151+
</div>
152+
</div>
153+
</div>
154+
155+
</div>
156+
</section>
157+
91158
<!-- ===== CAPABILITIES ===== -->
92159
<section class="home-section">
93160
<div class="container">
@@ -125,21 +192,6 @@ <h3>Profiling, in-agent and eBPF</h3>
125192
</div>
126193
</section>
127194

128-
<!-- ===== 3D INFRASTRUCTURE MAP ===== -->
129-
<section class="home-section map3d-band">
130-
<div class="container">
131-
<div class="section-head">
132-
<span class="eyebrow">SEE IT IN 3D</span>
133-
<h2>Explore your topology in 3D</h2>
134-
<p>Walk your services and cloud-native infrastructure as a living 3D scene — orbit, zoom and click any node to inspect it. It opens as a full page and runs entirely in your browser from a frozen demo snapshot: no server, no login, no setup.</p>
135-
</div>
136-
{{< map3d poster="/images/home/horizon-3d-map.png" badge="Interactive · sample data" >}}
137-
<div class="map3d-cta">
138-
<a class="sky-btn primary" href="/3d-map-app/">Open the 3D map <span class="hint">full page</span></a>
139-
</div>
140-
</div>
141-
</section>
142-
143195
<!-- ===== ECOSYSTEM ===== -->
144196
<section class="home-section ecosystem">
145197
<div class="container">

0 commit comments

Comments
 (0)