Skip to content

Commit

Permalink
Frontend for Inference Profile.
Browse files Browse the repository at this point in the history 
PiperOrigin-RevId: 702799979
  • Loading branch information
@cliveverghese @copybara-github
cliveverghese authored and copybara-github committed Dec 6, 2024
1 parent d5704ab commit 5420d0d
Show file tree
Hide file tree
Showing 14 changed files with 1,109 additions and 1 deletion.
39 changes: 39 additions & 0 deletions frontend/app/common/interfaces/data_table.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -384,3 +384,42 @@ export type DataTableUnion = SimpleDataTable|FrameworkOpStatsData|
TfFunctionExplanationTable|TfFunctionDataTable|MetaHostOpTable|HostOpTable|
GeneralAnalysis|InputPipelineAnalysis|InputPipelineHostAnalysis|
RunEnvironment|RecommendationResult|RecommendationResult;

/** The base interface for a property of inference latency. */
export declare interface InferenceLatencyProperty {
sessionsPerSecond?: string;
}

/** The metadata property for Inference Profile. */
export declare interface InferenceProfileMetadataProperty {
modelIdList?: string;
hasBatching?: string;
hasTensorPattern?: string;
}

/** The metadata for Inference Profile. */
export declare interface InferenceProfileMetadata extends SimpleDataTable {
p: InferenceProfileMetadataProperty;
}

/** The data property of Inference Profile. */
export declare interface InferenceProfileDataProperty {
throughput?: string;
averageLatencyMs?: string;
tableExplanation?: string;
hasBatchingParam?: string;
batchingParamNumBatchThreads?: string;
batchingParamMaxBatchSize?: string;
batchingParamBatchTimeoutMicros?: string;
batchingParamMaxEnqueuedBatches?: string;
batchingParamAllowedBatchSizes?: string;
}

/** The data of Inference Profile. */
export declare interface InferenceProfileData extends SimpleDataTable {
p: InferenceProfileDataProperty;
}

/** All Inference Stats page data table type. */
export type InferenceProfileTable =
|InferenceProfileMetadata|InferenceProfileData;
42 changes: 42 additions & 0 deletions frontend/app/components/inference_profile/BUILD
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
load("@io_bazel_rules_sass//:defs.bzl", "sass_binary")
load("//defs:defs.bzl", "xprof_ng_module")

package(default_visibility = ["//frontend:internal"])

xprof_ng_module(
name = "inference_profile",
srcs = [
"inference_profile.ts",
"inference_profile_module.ts",
],
assets = [
":inference_profile_css",
"inference_profile.ng.html",
],
deps = [
"@npm//@angular/common",
"@npm//@angular/core",
"@npm//@angular/router",
"@npm//@ngrx/store",
"@npm//@types/google.visualization",
"@npm//rxjs",
"@org_xprof//frontend/app/common/angular:angular_material_core",
"@org_xprof//frontend/app/common/angular:angular_material_progress_bar",
"@org_xprof//frontend/app/common/angular:angular_material_select",
"@org_xprof//frontend/app/common/angular:angular_material_sidenav",
"@org_xprof//frontend/app/common/interfaces",
"@org_xprof//frontend/app/common/utils",
"@org_xprof//frontend/app/components/chart/table",
"@org_xprof//frontend/app/services/data_service",
"@org_xprof//frontend/app/store",
],
)

sass_binary(
name = "inference_profile_css",
src = "inference_profile.scss",
sourcemap = False,
deps = [
"@org_xprof//frontend/app/styles:common",
],
)
133 changes: 133 additions & 0 deletions frontend/app/components/inference_profile/inference_profile.ng.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,133 @@
<!-- Model selection. -->
<div class="section-container">
<h2 class="section-title">Model Selection</h2>
<div class="section-content">
<mat-form-field appearance="outline" class="model-selector">
<mat-label>Select Model</mat-label>
<mat-select
panelClass="panel-override"
[(value)]="selectedIndex"
(selectionChange)="updateView()"
>
<mat-option
*ngFor="let id of allModelIds; let indexOfElement = index"
[value]="indexOfElement"
>
{{ id }}
</mat-option>
</mat-select>
</mat-form-field>
</div>
</div>

<!-- Request level analysis is always included. -->
<div class="section-container">
<h2 class="section-title">Request level analysis</h2>
<div class="section-content">
<!-- Request properties. -->
<div class="session_text">
<b>Request throughput: {{ allRequestProperties[selectedIndex]?.throughput }} requests/sec</b>
</div>
<div class="session_text">
<b>Request average Latency: {{ allRequestProperties[selectedIndex]?.averageLatencyMs }} ms</b>
</div>

<!-- Request table. -->
<div>
<p>All the time related columns displayed in this table are in milliseconds.</p>
<p>Request details table, percentile is calculated based on column: </p>
<mat-form-field appearance="outline">
<mat-select [(value)]="requestPercentileIndex" (selectionChange)="update()" name="request-percentile-index">
<mat-option
*ngFor="let column of requestPercentileColumns; let indexOfElement = index"
[value]="indexOfElement"
>
{{ column }}
</mat-option>
</mat-select>
</mat-form-field>
<!-- TODO(go/progressbar-aria): Replace the aria-label with a better description, e.g. "Fetching user data" -->
<mat-progress-bar color="primary" mode="indeterminate" *ngIf="loading" aria-label="Loading"></mat-progress-bar>
<table *ngIf="!loading" [dataView]="requestView" page="enable" pageSize="1000"></table>
</div>
</div>
</div>

<!-- Batch level analysis is added if inference batching is enabled. -->
<div class="section-container" *ngIf="hasBatching">
<h2 class="section-title">Batch level analysis</h2>
<div class="section-content">
<!-- Batch properties. -->
<div class="session_text">
<b>Batch throughput: {{ allBatchProperties[selectedIndex]?.throughput }} batches/sec</b>
</div>
<div class="session_text">
<b>Batch average Latency: {{ allBatchProperties[selectedIndex]?.averageLatencyMs }} ms</b>
</div>

<!-- Batch parameters. -->
<div
class="session_text"
*ngIf="allBatchProperties[selectedIndex]?.hasBatchingParam === 'true'"
>
<b>This model is controlled by the following batching parameters:</b><br />
<ul>
<li>
<b>Number of batching threads: </b>
<b>{{ allBatchProperties[selectedIndex]?.batchingParamNumBatchThreads }}</b>
</li>

<li>
<b>Batch timeout in microseconds: </b>
<b>{{ allBatchProperties[selectedIndex]?.batchingParamBatchTimeoutMicros }}</b>
</li>

<li>
<b>Maximum size of a batch: </b>
<b>{{ allBatchProperties[selectedIndex]?.batchingParamMaxBatchSize }}</b>
</li>

<li>
<b>Maximum number of enqueued batches: </b>
<b>{{ allBatchProperties[selectedIndex]?.batchingParamMaxEnqueuedBatches }}</b>
</li>

<li>
<b>Sizes that are allowed to form a batch: </b>
<b>{{ allBatchProperties[selectedIndex]?.batchingParamAllowedBatchSizes }}</b>
</li>
</ul>
</div>

<!-- Batch table. -->
<div>
<p>Batch details table, percentile is calculated based on column: </p>
<mat-form-field appearance="outline">
<mat-select [(value)]="batchPercentileIndex" (selectionChange)="update()" name="batch-percentile-index">
<mat-option
*ngFor="let column of batchPercentileColumns; let indexOfElement = index"
[value]="indexOfElement"
>
{{ column }}
</mat-option>
</mat-select>
</mat-form-field>
<!-- TODO(go/progressbar-aria): Replace the aria-label with a better description, e.g. "Fetching user data" -->
<mat-progress-bar color="primary" mode="indeterminate" *ngIf="loading" aria-label="Loading"></mat-progress-bar>
<table *ngIf="!loading" [dataView]="batchView" page="enable" pageSize="1000"></table>
</div>
</div>
</div>

<!-- Tensor pattern analysis is added if tensor patterns are recorded. -->
<div class="section-container" *ngIf="hasTensorPattern">
<h2 class="section-title">Tensor transfer analysis</h2>
<div class="section-content">
<div>
<!-- TODO(go/progressbar-aria): Replace the aria-label with a better description, e.g. "Fetching user data" -->
<mat-progress-bar color="primary" mode="indeterminate" *ngIf="loading" aria-label="Loading"></mat-progress-bar>
<table *ngIf="!loading" [dataView]="tensorPatternView" page="enable" pageSize="1000"></table>
</div>
</div>
</div>
<table></table>
27 changes: 27 additions & 0 deletions frontend/app/components/inference_profile/inference_profile.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
@import 'frontend/app/styles/common';

:host {
padding: 20px;
}

.section-container {
margin: 20px;
}

.model-selector {
width: 50%;
min-width: 300px;
}

.row {
margin-top: 10px;
}

.session_text {
width: 100%;
}

mat-progress-bar {
width: 300px;
margin: 0 auto;
}
Loading

0 comments on commit 5420d0d

Please sign in to comment.