Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Speedup the VizIR HTML. #7713

Merged
merged 5 commits into from
Aug 4, 2023
Merged

Speedup the VizIR HTML. #7713

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
4f8ec08
From 12s to 2s, by eliminating the bulk of the $() calls.
mcourteaux Jul 26, 2023
b6a4c33
Speed up recursive depth function by not using jQuery.
mcourteaux Jul 26, 2023
17d720d
Changed out CodeMirror for Speed-Highlight. Additionally several fixe…
mcourteaux Jul 26, 2023
0ab4f90
Merge branch 'halide:main' into speedup-vizir
mcourteaux Jul 27, 2023
1ed0c52
Merge branch 'main' into pr/7713
steven-johnson Aug 3, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
50 changes: 41 additions & 9 deletions src/StmtToViz.cpp
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -879,6 +879,11 @@ class HTMLCodePrinter : public IRVisitor {
stream << "</a>";
}

// Prints newline to stream
void print_ln() {
stream << '\n';
}

// Prints a variable to stream
void print_variable(const std::string &x) {
stream << variable(x);
Expand Down Expand Up @@ -1459,18 +1464,22 @@ class HTMLCodePrinter : public IRVisitor {
scope.push(op->name, gen_unique_id());
print_opening_tag("div", "LetStmt");
print_cost_buttons(op);
print_opening_tag("p", "WrapLine");
print_opening_tag("div", "WrapLine");
print_opening_tag("span", "cost-highlight", "cost-bg-" + std::to_string(id));
print_opening_tag("span", "matched");
print_html_element("span", "keyword", "let ");
print_variable(op->name);
print_html_element("span", "Operator Assign", " = ");
print_closing_tag("span");
print_closing_tag("span"); // matched
print(op->value);
print_closing_tag("span");
print_closing_tag("p");
print(op->body);
print_closing_tag("span"); // Cost-Highlight
print_closing_tag("div"); // WrapLine
print_closing_tag("div");
print_ln();
// Technically, the body of the LetStmt is a child node in the IR
// tree, but moving it out of the <div> doesn't make any difference to
// the rendering, and significantly reduces DOM depth.
print(op->body);
scope.pop(op->name);
}

Expand All @@ -1479,6 +1488,7 @@ class HTMLCodePrinter : public IRVisitor {
print_cost_buttons(op);
print_function_call("assert", {op->condition, op->message});
print_closing_tag("div");
print_ln();
}

void visit(const ProducerConsumer *op) override {
Expand Down Expand Up @@ -1530,6 +1540,8 @@ class HTMLCodePrinter : public IRVisitor {
// Close div holding this producer/consumer
print_closing_tag("div");

print_ln();

// Pop out of loop scope
scope.pop(op->name);
}
Expand Down Expand Up @@ -1590,6 +1602,8 @@ class HTMLCodePrinter : public IRVisitor {
// Close div holding this for loop
print_closing_tag("div");

print_ln();

// Pop out of loop scope
scope.pop(op->name);
}
Expand Down Expand Up @@ -1639,6 +1653,8 @@ class HTMLCodePrinter : public IRVisitor {

// Close div holding this acquire
print_closing_tag("div");

print_ln();
}

void visit(const Store *op) override {
Expand Down Expand Up @@ -1672,6 +1688,8 @@ class HTMLCodePrinter : public IRVisitor {

// Close div holding this store
print_closing_tag("div");

print_ln();
}

void visit(const Provide *op) override {
Expand All @@ -1690,6 +1708,8 @@ class HTMLCodePrinter : public IRVisitor {
print(op->values[0]);
}
print_closing_tag("div");

print_ln();
}

void visit(const Allocate *op) override {
Expand Down Expand Up @@ -1752,13 +1772,16 @@ class HTMLCodePrinter : public IRVisitor {
print_visualization_button("allocate-viz-" + std::to_string(id));

// Print allocation body
print_ln();
print_opening_tag("div", "AllocateBody");
print(op->body);
print_closing_tag("div");

// Close dive holding the allocate
print_closing_tag("div");

print_ln();

// Pop out of allocate scope
scope.pop(op->name);
}
Expand All @@ -1769,6 +1792,7 @@ class HTMLCodePrinter : public IRVisitor {
print_html_element("span", "keyword", "free ");
print_variable(op->name);
print_closing_tag("div");
print_ln();
}

void visit(const Realize *op) override {
Expand Down Expand Up @@ -1842,6 +1866,7 @@ class HTMLCodePrinter : public IRVisitor {
print_block_stmt(op->first);
print_block_stmt(op->rest);
print_closing_tag("div");
print_ln();
}

void visit(const Fork *op) override {
Expand Down Expand Up @@ -1880,6 +1905,7 @@ class HTMLCodePrinter : public IRVisitor {

// Close div holding this fork
print_closing_tag("div");
print_ln();
}

void visit(const IfThenElse *op) override {
Expand Down Expand Up @@ -1928,6 +1954,7 @@ class HTMLCodePrinter : public IRVisitor {

// Close indented div holding `then` case
print_closing_tag("div");
print_ln();

// Close code block holding `then` case
print_html_element("span", "matched ClosingBrace cb-" + std::to_string(then_block_id), "}");
Expand Down Expand Up @@ -2005,6 +2032,7 @@ class HTMLCodePrinter : public IRVisitor {

// Close indented div holding `else` case
print_closing_tag("div");
print_ln();

// Close code block holding `else` case
print_html_element("span", "matched ClosingBrace cb-" + std::to_string(else_block_id), "}");
Expand All @@ -2015,6 +2043,7 @@ class HTMLCodePrinter : public IRVisitor {

// Close div holding the conditional
print_closing_tag("div");
print_ln();
}

void visit(const Evaluate *op) override {
Expand All @@ -2023,10 +2052,10 @@ class HTMLCodePrinter : public IRVisitor {
print_cost_buttons(op);
print(op->value);
print_closing_tag("div");
print_ln();
}

void visit(const Shuffle *op) override {
print_opening_tag("div", "Block");
if (op->is_concat()) {
print_function_call("concat_vectors", op->vectors);
} else if (op->is_interleave()) {
Expand All @@ -2048,14 +2077,14 @@ class HTMLCodePrinter : public IRVisitor {
}
print_function_call("shuffle", args);
}
print_closing_tag("div");
}

void visit(const VectorReduce *op) override {
print_opening_tag("div", "VectorReduce");
print_type(op->type);
print_function_call("vector_reduce", {op->op, op->value});
print_closing_tag("div");
print_ln();
}

void visit(const Prefetch *op) override {
Expand Down Expand Up @@ -2092,6 +2121,7 @@ class HTMLCodePrinter : public IRVisitor {
print_closing_tag("div");

print_closing_tag("div");
print_ln();
}

void visit(const Atomic *op) override {
Expand Down Expand Up @@ -2134,6 +2164,7 @@ class HTMLCodePrinter : public IRVisitor {

// Close div holding this atomic
print_closing_tag("div");
print_ln();
}
};

Expand Down Expand Up @@ -2781,6 +2812,7 @@ class IRVisualizer {
html_viz_printer.init_cost_info(cost_model);

// Generate html page
stream << "<!DOCTYPE html>\n";
stream << "<html>\n";
generate_head(m);
generate_body(m);
Expand Down Expand Up @@ -2864,7 +2896,7 @@ class IRVisualizer {
// Generate tab 3/3: Generated assembly code
void generate_assembly_tab(const Module &m) {
stream << "<div id='assembly-tab'>\n";
stream << "<div id='assemblyContent' style='display: none;'>\n";
stream << "<div id='assemblyContent' class='shj-lang-asm'>\n";
stream << "<pre>\n";
stream << asm_stream.str();
stream << "</pre>\n";
Expand Down Expand Up @@ -2943,4 +2975,4 @@ void print_to_viz(const std::string &html_output_filename,
}

} // namespace Internal
} // namespace Halide
} // namespace Halide
18 changes: 11 additions & 7 deletions src/irvisualizer/StmtToViz_dependencies.template.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,10 +18,14 @@

<script src='http://code.jquery.com/jquery-1.10.2.js'></script>

<!-- Assembly Code links -->
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.52.2/codemirror.min.css'></link>
<script src='https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.52.2/codemirror.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/mode/gas/gas.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/addon/selection/mark-selection.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/addon/search/searchcursor.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/addon/search/search.min.js'></script>

<!-- Assembly Code links (Speed Highlight) -->
<script type="module">
import { highlightAll } from 'https://cdn.jsdelivr.net/gh/speed-highlight/core/dist/index.js';
import 'https://cdn.jsdelivr.net/gh/speed-highlight/core/dist/languages/asm.js';
highlightAll();
</script>
<!-- adapted from the default style from: https://unpkg.com/@speed-highlight/core@1.1.11/dist/themes/default.css -->
<style type='text/css'>
[class*=shj-lang-]{white-space:pre;background:white;color:#112;box-shadow:0 0 5px #0001;text-shadow:none;font: 12px Consolas,Courier New,Monaco,Andale Mono,Ubuntu Mono,monospace;line-height:14px;box-sizing:border-box;max-width:min(100%,100vw)}.shj-inline{margin:0;padding:2px 5px;display:inline-block;border-radius:5px}[class*=shj-lang-]::selection,[class*=shj-lang-] ::selection{background:#bdf5}[class*=shj-lang-]>div{display:flex;overflow:auto}[class*=shj-lang-]>div :last-child{flex:1;outline:none}.shj-numbers{padding-left:5px;counter-reset:line}.shj-numbers div{padding-right:5px}.shj-numbers div:before{color:#999;display:block;content:counter(line);opacity:.5;text-align:right;margin-right:5px;counter-increment:line}.shj-syn-cmnt{font-style:italic}.shj-syn-err,.shj-syn-kwd{color:#e16}.shj-syn-num,.shj-syn-class{color:#f60}.shj-numbers,.shj-syn-cmnt{color:#999}.shj-syn-insert,.shj-syn-str{color:#7d8}.shj-syn-bool{color:#3bf}.shj-syn-type,.shj-syn-oper{color:#5af}.shj-syn-section,.shj-syn-func{color:#84f}.shj-syn-deleted,.shj-syn-var{color:#f44}.shj-oneline{padding:12px 10px}.shj-lang-http.shj-oneline .shj-syn-kwd{background:#25f;color:#fff;padding:5px 7px;border-radius:5px}.shj-multiline.shj-mode-header{padding:20px}.shj-multiline.shj-mode-header:before{content:attr(data-lang);color:#58f;display:block;padding:10px 20px;background:#58f3;border-radius:5px;margin-bottom:20px}
</style>
Loading