-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
131 lines (127 loc) · 5.98 KB
/
index.html
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
<html>
<head>
<title>Scalene</title>
<link rel="icon" href="favicon.ico" type="image/x-icon">
<!-- Latest compiled and minified CSS -->
<script src="https://code.jquery.com/jquery-3.6.0.slim.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<link href="prism.css" rel="stylesheet" />
<style>
.table-condensed>thead>tr>th, .table-condensed>tbody>tr>th, .table-condensed>tfoot>tr>th, .table-condensed>thead>tr>td, .table-condensed>tbody>tr>td, .table-condensed>tfoot>tr>td{
padding: 1px; border-spacing: 0px; border:none;
}
form label:hover, form button:hover {
background-color: black;
color: white;
}
form label:active, form button:active {
background-color: blue;
color: white;
}
</style>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-4JXPHEBMTY"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-4JXPHEBMTY');
</script>
<script src="example-profile.js"></script>
<script src="prism.js"></script>
<script src="tablesort.js"></script>
<script src="tablesort.number.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vega@5.21.0"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-lite@5.2.0"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-embed@6.20.0"></script>
<script defer src="scalene-gui.js" type="text/javascript"></script>
<script defer src="scalene-demo.js" type="text/javascript"></script>
</head>
<body>
<a href="https://github.com/plasma-umass/scalene">
<p class="text-center">
<img src="scalene-image.png" height="100">
</p>
</a>
<p />
<form id="jsonFile" name="jsonFile" enctype="multipart/form-data" method="post">
<div class="form-group">
<div class="d-flex justify-content-center">
<label for='fileinput' style="padding: 5px 5px; border-radius: 5px; border: 1px ridge black; font-size: 0.8rem; height: auto;">Select a profile (.json)</label>
<input style="height: 0; width: 10; opacity:0" type='file' id='fileinput' accept='.json' onchange="loadFile();">
<!-- <label for='demoinput' style="padding: 5px 5px; border-radius: 5px; border: 1px ridge black; font-size: 0.8rem; height: auto;">demo</label>
<input style="height: 0; width: 0; opacity:0" type='button' id='demoinput' accept='.json' onclick="loadDemo();">
-->
</div>
</div>
</form>
<div class="d-flex justify-content-center">
<details>
<summary style="font-size:0.8rem; color: blue">advanced options</summary>
<!-- <label for='demoinput' style="padding: 5px 5px; border-radius: 5px; border: 1px ridge black; font-size: 0.8rem; height: auto;">demo</label>
<input style="height: 0; width: 0; opacity:0" type='button' id='demoinput' accept='.json' onclick="loadDemo();">
-->
<B style="font-size:0.8rem">Proposed optimizations</B><BR />
<label for='api-key' style="font-size: 0.8rem">Enter an <a href="https://beta.openai.com/signup">OpenAI key</a> to enable:</label>
<input type="text" style="font-size: 0.8rem" size="22" placeholder="(OpenAI API key)" id="api-key" oninput="checkApiKey(event.target.value)"></input>
<span id='valid-api-key'></span>
<br />
<div>
<input type="radio" name="optimize-radio" id="optimize-performance" value="performance" checked>
<label style="font-size: 0.8rem" for="optimize-performance">
Optimize runtime performance
</label>
</div>
<div>
<input type="radio" name="optimize-radio" id="optimize-memory" value="memory">
<label style="font-size: 0.8rem" for="optimize-memory">
Optimize memory efficiency
</label>
</div>
<input type="checkbox" id="use-gpu-checkbox" name="use-gpu-checkbox-label" onclick="try { window.localStorage.setItem('scalene-gpu-checkbox', document.getElementById('use-gpu-checkbox').checked); } catch {}">
<label style="font-size: 0.8rem" for="use-gpu-checkbox">
Include GPU optimizations
</label>
<br />
<font style="font-size: 0.8rem">
Click on an explosion (💥) to see proposed optimizations for a region of code,<br />
or on a lightning bolt (⚡) to propose optimizations for a specific line.<br />
Click again to generate a different one.<br />
<em>Note that optimizations are AI-generated and may not be correct.</em>
<br />
</font>
<br />
<!--
<br />
<form id="jsonFile" name="jsonFile" enctype="multipart/form-data" method="post">
<div class="form-group">
<label for='fileinput' style="padding: 5px 5px; border-radius: 5px; border: 1px ridge black; font-size: 0.8rem; height: auto;">Load a profile (.json)</label>
<input style="height: 0; width: 10; opacity:0" type='file' id='fileinput' accept='.json' onchange="loadFile();"></input>
</div>
</form>
-->
</details>
</div>
<div id="profile">
<p class="text-center">
Profile your Python code
with <a href="https://github.com/plasma-umass/scalene">Scalene</a>,
then select the generated
file <tt>profile.json</tt>.
</p>
<p class="text-center">Click <a href="" id="demo-text">demo</a> to explore an
example Scalene profile.
</p>
<nav class="navbar fixed-bottom navbar-default justify-content-center">
<div class="container justify-content-center">
<p class="text-center">
<font style="font-size:small">
<a href="https://github.com/plasma-umass/scalene-gui">source code on Github</a>
</font>
</p>
</div>
</nav>
</div>
</body>
</html>