Skip to content

Commit 0d8e755

Browse files
Add blog post (#183)
* ai blog post * Add more of blog post * more changes * Add images * Fix images * Update blog * Delete old blog * fix wording * tone changes * More tweaks * Add links and cleanup * Add extra link * Add more images * Add one more header * Clarify options * Tweak headers * fix * fixes * Final push * node fix * node fix * fix --------- Co-authored-by: Dmitry Filimonov <[email protected]>
1 parent 0d7d273 commit 0d8e755

File tree

10 files changed

+61683
-20
lines changed

10 files changed

+61683
-20
lines changed

.github/workflows/deploy.yml

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,9 @@ jobs:
3434
- uses: actions/checkout@v2
3535
- uses: actions/setup-node@v3
3636
with:
37-
node-version: 16
37+
node-version: '18.12'
3838
- name: deploy
3939
if: ${{ github.event_name != 'pull_request' }}
4040
run: make deploy
41+
env:
42+
NODE_OPTIONS: --openssl-legacy-provider

.github/workflows/smoke-tests.yml

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,12 +13,16 @@ jobs:
1313
- uses: actions/checkout@v2
1414
- uses: actions/setup-node@v3
1515
with:
16-
node-version: 16
16+
node-version: '18.12'
1717
- name: install dependencies
1818
run: yarn install
19+
env:
20+
NODE_OPTIONS: --openssl-legacy-provider
1921

2022
- name: ensure docusaurus can build
2123
run: yarn build
24+
env:
25+
NODE_OPTIONS: --openssl-legacy-provider
2226

2327
- name: install gems
2428
run: sudo gem install http colorize

blog/ai-profiling-hackathon.mdx

Lines changed: 162 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,162 @@
1+
---
2+
title: "AI-Powered Flamegraph Interpreter in Grafana Pyroscope"
3+
description: "Explore how our AI-powered tool is revolutionizing flamegraph interpretation"
4+
sidebar_label: "AI-Powered Flamegraph Interpreter"
5+
image: "https://github.com/grafana/pyroscope/assets/23323466/441f89c8-8757-4c3d-b1b9-d8a1960c4c5d"
6+
slug: /ai-powered-flamegraph-interpreter
7+
date: "2023-12-04"
8+
9+
authors:
10+
- name: Ryan Perry
11+
url: https://github.com/Rperry2174
12+
image_url: https://avatars.githubusercontent.com/u/23323466?v=4
13+
- name: ChatGPT
14+
title: Editor
15+
url: https://chat.openai.com/
16+
image_url: https://chat.openai.com/favicon-32x32.png
17+
---
18+
19+
import {OpenAI} from '../src/components/Blog/OpenAI';
20+
import {DistributorCpu} from '../src/components/Blog/DistributorCpu';
21+
import {Flamegraph} from '../src/components/Blog/Flamegraph';
22+
23+
import {Response1, BaseResponse, BeginnerResponse, PoemResponse, CustomerSuccessResponse, SpanishResponse, ITDepartmentHumorResponse, HackerNewsThreadResponse, MichaelScottExplainsResponse} from '../src/components/Blog/OpenAI';
24+
25+
![Go-Gopher-PSD-With-larger-Newspaper_01](https://github.com/grafana/pyroscope/assets/23323466/441f89c8-8757-4c3d-b1b9-d8a1960c4c5d)
26+
27+
If you're of the opinion that AI isn't going to solve all the world's problems, you're probably right. And if you think it could, well, you might be onto something too.
28+
29+
In the world of software engineering, particularly observability, where complexity often outpaces comprehension, **AI isn't just a fancy tool; it's becoming an inevitable necessity**.
30+
31+
During the Grafana Hackathon, the Pyroscope team embraced this reality. We tackled a genuine challenge head-on with AI: making flamegraph analysis intuitive, even for those new to profiling.
32+
33+
We've seen that AI excels at tasks like language interpretation. So, why not leverage it to demystify flamegraphs? This led us to our Hackathon mission:
34+
35+
**Demonstrate how AI can transform the user experience in analyzing and interpreting flamegraphs.**
36+
37+
We did this by giving humans and AI the same flamegraph and asking them to interpret it as shown below. We then compared the results and analyzed the differences.
38+
39+
<video id="vid" style={{width: "100%"}} autoPlay loop muted playsinline src="https://s3.amazonaws.com/pyroscope.io/videos/ai5.mp4"/>
40+
41+
## A Direct Challenge: How Well Can You Interpret This Flamegraph?
42+
43+
Before diving into AI’s capabilities, let's set a baseline. Here’s a flamegraph for you to analyze. See if you can answer these key profiling questions:
44+
45+
1. **Performance Bottleneck**: What's causing the slowdown?
46+
2. **Root Cause**: Why is it happening?
47+
3. **Recommended Fix**: How would you resolve it?
48+
49+
<Flamegraph profileData={DistributorCpu}></Flamegraph>
50+
51+
This is where many face challenges, particularly beginners. But understanding these flamegraphs is key to simplifying the code that powers them.
52+
53+
## AI’s Flamegraph Interpretation: An Eye-Opening Comparison
54+
55+
Now for the fun part: let's see how our AI interprets this same flamegraph. We use a prompt that is roughly equivalent to the questions above.
56+
57+
### Click the button to see the AI's interpretation of the flamegraph below
58+
59+
<OpenAI response={BaseResponse} pulsating />
60+
<Flamegraph profileData={DistributorCpu}></Flamegraph>
61+
62+
It was given a similar prompt to the questions above:
63+
```txt
64+
interpret this flamegraph for me and answer the following three questions:
65+
- **Performance Bottleneck**: What's slowing things down?
66+
- **Root Cause**: Why is this happening?
67+
- **Recommended Fix**: How can we resolve it?
68+
69+
[ ... specially compressed flamegraph data ]
70+
```
71+
72+
How does its analysis stack up against yours? Statistically it probably did either better or worse than you (obviously)...
73+
74+
## Bots vs. Brains: Who's better at Flamegraph Interpretation?
75+
76+
We didn't stop at theoreticals. We put AI to a real-world test, sending the same flamegraph to a diverse group of individuals, categorizing them by their expertise in flamegraph analysis, and comparing their responses to AI's.
77+
78+
### Distribution of participants by skill level:
79+
80+
![image](https://github.com/grafana/pyroscope/assets/23323466/67969551-b830-47ca-bfb8-596d95a8d7d3)
81+
82+
### The Results Are In: AI is better than (most) humans at interpreting flamegraphs
83+
84+
![image](https://github.com/grafana/pyroscope/assets/23323466/bacff852-16da-4ef4-9d03-6900196ec595)
85+
86+
- Flamegraph Experts: **Score: 83% passed**. They demonstrated high accuracy and detailed understanding, quickly pinpointing issues and interpreting them correctly
87+
88+
- Flamegraph Advanced: **Score: 70% passed**. Their responses varied, some were spot on while others often didn't dig far enough into the flamegraph to identify the root cause
89+
90+
- Non-Technical Professionals: **Score: 23% passed**. This group most frequently took thie `idk` option on especially the root cause and recommended fix question -- some very entertaining guesses though!
91+
92+
- **AI Interpreter**: Pass Score: 100% (10 iterations with same prompt). The AI consistently outperformed `beginners` and `advanced` users, providing accurate, albeit less detailed/nuanced, interpretations than the `experts`.
93+
94+
**These initial results at least point towards a great opportunity in adding value to _most_ users by incorporating AI.**
95+
96+
We will definitely be exploring this further via more formal testing and would love to hear your thoughts on this as well -- where do you see it fitting in best to your workflow?
97+
98+
## AI in Pyroscope: A clear win for UX
99+
100+
While we still have the rest of the week to tweak our project for the Hackathon, what we've learned so far is that **AI's strength lies not just in analysis but more importantly in "filling the gaps" by augmenting and enhancing user experience** no matter what level you're at.
101+
102+
It only takes using a flamegraph successfully once to really move from the `beginner` to `advanced` category. The thing is, from a product standpoint our biggest challenge has been building a user-experience that can span from `beginner` to `expert` and still be useful for both.
103+
104+
However, with just a little bit of prompt engineering we can use AI to bridge this gap and provide and **endless array of tailored experiences for each user**.
105+
106+
## AI Tailored Responses for Diverse User Needs
107+
108+
### Explain the flamegraph to a beginner with no flamegraph knowledge...
109+
<OpenAI response={BeginnerResponse}/>
110+
111+
### Explain the flamegraph in the form of a HN thread...
112+
<OpenAI response={HackerNewsThreadResponse}/>
113+
114+
### Explain the flamegraph in the form of IT department humor...
115+
<OpenAI response={ITDepartmentHumorResponse}/>
116+
117+
### Explain the flamegraph in the form of a poem...
118+
<OpenAI response={PoemResponse}/>
119+
120+
### Explain the flamegraph in the form of a Michael Scott quote...
121+
<OpenAI response={MichaelScottExplainsResponse}/>
122+
123+
Whether you're a beginner, an expert, or just someone bored at work trying to find an entertaining way to do an otherwise boring task -- all it takes is a little prompt engineering to tune the experience to your liking.
124+
125+
With just a few lines of code we can adjust these prompts (or allow users to adjust them) to guide everyone from `beginner` to `expert`.
126+
127+
## Your Turn: Test AIs analysis of _your_ code!
128+
129+
It's worth noting that, the flamegraph used for this post is a current representation of our distributor. As you can see, our distributors have bottlnecks in two notorious tasks that most companies are likely not doing perfectly either: [regular expressions](https://github.com/grafana/pyroscope/blob/0cf0bcaf4febe9c611ef3bf7782492735b1ae9ed/pkg/pprof/pprof.go#L1122-L1132) which is technically the bottlneck, but [compression/parsing](https://github.com/grafana/pyroscope/blob/731f434bfa33b626437195ee564f0f87b19e1e84/pkg/distributor/distributor.go#L245-L347) is also an acceptable answer for bottlneck (fixes comoing soon!).
130+
131+
However, while AI was successful in analyzing _this particular_ flamegraph, there are probably 51,331,542 more cases where AI fails (or succeeds) spectacularly and **we'd love for you to find and share real examples with us!**
132+
133+
### How to use our AI-powered flamegraph interpreter on your own flamegraphs
134+
#### Option 1: Upload pprof to Flamegraph.com
135+
Upload `pprof` file containing _one_ flamegraph to [flamegraph.com](http://flamegraph.com) and click the "ai explainer" button.
136+
You can get a pprof file from most easily from Go runtime, but Pyroscope exports pprof from _all_ languages via the export button.
137+
138+
**Note: You do have to export `pprof` format specifically and upload to [flamegraph.com](http://flamegraph.com) separately; exporting directly to flamegraph.com via the `flamegraph.com` button will not (yet) work**
139+
140+
![image](https://github.com/grafana/pyroscope/assets/23323466/500b94d8-e003-4fe5-89ef-d17530e2fe8b)
141+
142+
#### Option 2: View flamegraph in Grafana Cloud:
143+
Send profiling data to [Grafana Cloud Profiles](https://grafana.com/auth/sign-up/create-user?pg=pyroscope-ai-blog) and look at the Cloud profiles app (you can sign up for a free account) and click the "ai explainer" button
144+
145+
![image](https://github.com/pyroscope-io/docs/assets/23323466/01a7a7b1-296b-4841-ae95-1a6bf0e777b1)
146+
147+
#### Option 3: Wait a bit...
148+
Wait until we release an open source version of this tool (pending positive feedback from the community)
149+
150+
## All feedback / ideas welcome!
151+
152+
Let us know the good, bad and ugly of your experience with AI-powered flamegraph analysis:
153+
- **On Twitter**: [@PyroscopeIO](https://twitter.com/PyroscopeIO) and let the world know how you're using AI in flamegraph analysis. [Placeholder for Twitter Handle]
154+
- **On Slack**: Join the conversation in our [community channel](https://grafana.slack.com/archives/C049PLMV8TB)
155+
- **On GitHub**: Feel free to add to [the discussion](https://github.com/grafana/pyroscope/discussions/2797) to share detailed feedback or suggest enhancements
156+
157+
## Appendix
158+
159+
In case you were wondering how we clasified peopel into groups we had them self categorize on the following scale:
160+
1. **Flamegraph Experts**: Comprising experienced software engineers and DevOps engineers who have used flamegraphs before
161+
2. **Flamegraph Advanced**: Junior developers, technical support staff, frontend engineers, or other engineers new to Pyroscope or continuous profiling tools
162+
3. **Non-Technical Professionals**: From sales, marketing, HR, and project management, know their way around observability tooling but seldom if ever directly involved in coding or debugging

blog/ci-profiling-with-pyroscope.mdx

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -18,12 +18,12 @@ authors:
1818
# CI Profiling with Pyroscope
1919
![thumbnail_image](https://user-images.githubusercontent.com/23323466/223543631-c7df802a-17f0-4f96-8709-f6cae7933149.png)
2020

21-
Profiling today looks _very_ different than it did just a few years ago. As people move to more cloud-native workloads
21+
Profiling today looks _very_ different than it did just a few years ago. As people move to more cloud-native workloads
2222
continuous profiling has evolved into a key piece of many companies' observability suites. At Pyroscope, we've been a huge
2323
part of this evolution thanks to an ever-expanding community who has provided great insight into the use cases where profiling
24-
is most valuable and how we can continue to improve that experience.
24+
is most valuable and how we can continue to improve that experience.
2525

26-
As a result, over the past few years we've released several products to help developers improve their applications' performance.
26+
As a result, over the past few years we've released several products to help developers improve their applications' performance.
2727
1. **Continuous Profiling**: Our most popular a tool for continuously profiling your applications accross your entire system and then
2828
storing and querying that data efficiently
2929

@@ -33,10 +33,10 @@ our adhoc tool allows you to both capture and save specific profiles to later re
3333
3. **Profiling Exemplars**: Profiles linked to particular meaningful units such as HTTP requests or trace spans
3434

3535
## Introducing CI Profiling
36-
Now, we're excited to announce the latest addition to the Pyroscope family - CI Profiling. Continuous Integration and Delivery (CI/CD) pipelines are critical for modern software development, but they can also be a
37-
source of frustration and inefficiency. Waiting for long test runs, dealing with frequent failures and timeouts, and wasting
38-
resources are all common problems associated with CI/CD pipelines. These issues can be compounded when multiple developers
39-
are working on the same codebase or when teams are working across multiple repositories. That's why we've developed this new feature that can help:
36+
Now, we're excited to announce the latest addition to the Pyroscope family - CI Profiling. Continuous Integration and Delivery (CI/CD) pipelines are critical for modern software development, but they can also be a
37+
source of frustration and inefficiency. Waiting for long test runs, dealing with frequent failures and timeouts, and wasting
38+
resources are all common problems associated with CI/CD pipelines. These issues can be compounded when multiple developers
39+
are working on the same codebase or when teams are working across multiple repositories. That's why we've developed this new feature that can help:
4040

4141
**Continuous Profiling with Pyroscope in your CI/CD pipelines.**
4242

@@ -59,7 +59,7 @@ are working on the same codebase or when teams are working across multiple repos
5959
## How to Add Profiling to your CI/CD Pipeline
6060

6161
While we currently support profiling test suites in Node, Go, and Ruby is coming soon (see [docs](/docs/ci)) for this blog post we will just describe from a high level the steps for profiling
62-
a test suite in any language, but using Node as an example. Over time we plan to add support for other langauges / frameworks as well.
62+
a test suite in any language, but using Node as an example. Over time we plan to add support for other langauges / frameworks as well.
6363

6464
### Add Profiling via Test Config
6565

@@ -127,7 +127,7 @@ jobs:
127127
uses: actions/checkout@v2
128128
- uses: actions/setup-node@v2
129129
with:
130-
node-version: '16.18'
130+
node-version: '18.12'
131131
- name: Install pyroscope-ci
132132
uses: jaxxstorm/[email protected]
133133
with: # Grab the latest version
@@ -148,8 +148,8 @@ Being able to view flamegraphs for test results in the PR body enables quick ide
148148
149149
### View results in Pyroscope UI
150150
151-
Viewing results in the Pyroscope UI allows for you to see how your test suit has performed over time and understand where regressions where introduced (or improvements were made).
152-
The Pyroscope UI also makes it easy to view the flamegraph diff between branches, prs, commits or any individual test runs.
151+
Viewing results in the Pyroscope UI allows for you to see how your test suit has performed over time and understand where regressions where introduced (or improvements were made).
152+
The Pyroscope UI also makes it easy to view the flamegraph diff between branches, prs, commits or any individual test runs.
153153
154154
![image](https://user-images.githubusercontent.com/23323466/223591332-e62ec6f7-d6d9-440f-90ed-ac4698dcc30e.png)
155155
@@ -172,7 +172,7 @@ Before we delve into the specifics of our optimization efforts, let's first prov
172172
In our efforts to optimize the performance of our test suite, we decided to explore alternatives to `ts-jest`, the popular tool used for
173173
testing TypeScript code with Jest. While `ts-jest` allows developers to run their tests with type checking enabled, it can also lead to
174174
significant performance overhead. Specifically, this overhead comes from the fact that running type checking during test runs can slow
175-
down the test execution time, leading to longer build times and potentially wasting resources.
175+
down the test execution time, leading to longer build times and potentially wasting resources.
176176

177177
Through our profiling efforts with Pyroscope, we were able to identify this performance bottleneck and look for ways to address it.
178178

@@ -223,6 +223,6 @@ post were implemented, but also how convenient it is to automatically get flameg
223223
## How to add Pyroscope CI Profiling to your test suite
224224

225225
By using Pyroscope's CI Profiling, teams can collaborate better and optimize their resources across your ci/cd pipeline.
226-
As displayed in this post, there's likely _some_ if not many low-hanging-fruit optimizations to make by simply addding Pyroscope's CI Profiling tool to your test suite.
226+
As displayed in this post, there's likely _some_ if not many low-hanging-fruit optimizations to make by simply addding Pyroscope's CI Profiling tool to your test suite.
227227

228228
To learn more about how you can add profiling to your CI/CD suite, visit our [docs](/docs/ci). As always us know what you think!

docs/ci.mdx

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -85,7 +85,7 @@ The following sections provide language/testing framework specific instructions
8585
### Setting up Pyroscope in Node
8686
To set up Pyroscope, you'll need to create two new files in your project (or edit them if they already exist):
8787

88-
1. `globalSetup.js`: This file initializes Pyroscope and starts profiling.
88+
1. `globalSetup.js`: This file initializes Pyroscope and starts profiling.
8989
Pyroscope will only profile your code when the CI environment variable is turned on. Here's an example:
9090
```js
9191
const Pyroscope = require('@pyroscope/nodejs');
@@ -129,7 +129,7 @@ The following sections provide language/testing framework specific instructions
129129
}
130130
```
131131
That's it! Pyroscope will now profile your tests in your CI/CD pipeline.
132-
132+
133133
</TabItem>
134134
</Tabs>
135135

@@ -225,12 +225,12 @@ To avoid this behavior, you can try running your tests without cache using the `
225225
## Viewing test suite profiles in Pyroscope Cloud
226226

227227
While testing you may try exporting profiling locally, but in practice we've built tooling around profiles for your test suites that makes
228-
optimizing and improving test suites convenient.
228+
optimizing and improving test suites convenient.
229229

230230
The CI Context (branch, commit) are all inferred from the environment.
231231
If your auto detection service doesn't work with your CI system, you can pass each flag manually (`--branch` and `--commitSHA`).
232232

233-
All the data gathered while your tests were running will be merged and grouped by profile type, which is then uploaded to Pyroscope Cloud.
233+
All the data gathered while your tests were running will be merged and grouped by profile type, which is then uploaded to Pyroscope Cloud.
234234

235235
## Integrating with Github Actions
236236

@@ -253,7 +253,7 @@ jobs:
253253
uses: actions/checkout@v2
254254
- uses: actions/setup-node@v2
255255
with:
256-
node-version: '16.18'
256+
node-version: '18.12'
257257
- name: Install pyroscope-ci
258258
uses: jaxxstorm/[email protected]
259259
with: # Grab the latest version

package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@
2929
"docusaurus-gtm-plugin": "^0.0.2",
3030
"docusaurus-plugin-sass": "^0.2.1",
3131
"lottie-react": "^2.3.1",
32+
"marked": "^11.0.0",
3233
"mdx-embed": "1.0.0",
3334
"nuka-carousel": "5.3.0",
3435
"posthog-docusaurus": "^1.0.3",

0 commit comments

Comments
 (0)