-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathembeds.html
More file actions
140 lines (131 loc) · 7 KB
/
Copy pathembeds.html
File metadata and controls
140 lines (131 loc) · 7 KB
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
132
133
134
135
136
137
138
139
140
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Embeddable figures — AI Risk Acknowledgement Explorer</title>
<meta name="robots" content="noindex">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Figtree:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>
:root{--red:#A32035;--ink:#1A1A1A;--muted:#898A8D;--line:#E8E8E6;--bg:#FAFAFA;--card:#FFFFFF;}
*{box-sizing:border-box;margin:0;padding:0;}
body{font-family:'Figtree',sans-serif;background:var(--bg);color:var(--ink);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;}
.wrap{max-width:1000px;margin:0 auto;padding:34px 24px 70px;}
h1{font-size:24px;font-weight:600;letter-spacing:-0.01em;margin-bottom:10px;}
.lede{font-size:14.5px;line-height:1.6;color:#333;max-width:76ch;margin-bottom:14px;}
.note{background:var(--card);border:1px solid var(--line);border-left:3px solid var(--red);
border-radius:0 8px 8px 0;padding:16px 20px;max-width:820px;margin:0 0 30px;font-size:13.5px;line-height:1.6;}
.note b{font-weight:600;}
.note ul{margin:8px 0 0 18px;}
.note li{margin-bottom:4px;}
.how{font-size:13.5px;line-height:1.6;max-width:820px;margin:0 0 34px;}
.how h2{font-size:16px;font-weight:600;margin:22px 0 8px;}
pre{background:var(--ink);color:#F2F2F0;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
font-size:12px;line-height:1.55;padding:13px 15px;border-radius:7px;overflow-x:auto;margin:8px 0 0;}
.fig{background:var(--card);border:1px solid var(--line);border-radius:9px;margin-bottom:22px;overflow:hidden;}
.fig-h{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:baseline;justify-content:space-between;
padding:13px 16px;border-bottom:1px solid var(--line);}
.fig-n{font-size:15px;font-weight:600;}
.fig-id{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;color:var(--muted);}
.fig-body{padding:0;}
.fig iframe{display:block;width:100%;border:0;}
.fig-snip{padding:12px 16px 16px;border-top:1px solid var(--line);background:var(--bg);}
.fig-snip pre{margin:0;}
.copy{font-family:inherit;font-size:12px;font-weight:600;color:var(--red);background:none;border:1px solid var(--line);
border-radius:5px;padding:5px 11px;cursor:pointer;margin-top:9px;}
.copy:hover{border-color:var(--red);}
footer{margin-top:44px;padding-top:16px;border-top:1px solid var(--line);font-size:12.5px;color:var(--muted);}
footer a{color:var(--red);}
</style>
</head>
<body>
<div class="wrap">
<h1>Embeddable figures</h1>
<p class="lede">The seven published figures from the AI Risk Acknowledgement Explorer, each available as an
iframe for a public page. Every one is drawn by the tool's own code from a public file of aggregate
figures, so an embed cannot drift from the figure it shows.</p>
<div class="note">
<b>What is public, and what is not.</b>
<ul>
<li>The embeds read <code>embed-data.json</code>: the risk and mitigation taxonomies, the expert
panel's ratings, and the study's published aggregate rates.</li>
<li>It holds <b>no per-company records</b>, no coded passages and no documents. The explorer itself
stays password protected, and these figures are the only part of it that does not.</li>
<li>The sector heatmap is not embeddable: its columns are individual companies, so it cannot be
drawn from aggregates.</li>
</ul>
</div>
<div class="how">
<h2>How to embed one</h2>
<p>Paste the snippet under a figure. Each frame reports its own height to the page it sits in, so add
this once, anywhere on the host page, and the frames will size themselves. Without it they keep the
fallback height in the snippet, which is safe but fixed.</p>
<pre><script>
addEventListener('message', function (e) {
if (!e.data || e.data.type !== 'airisk-embed-height') return;
document.querySelectorAll('iframe[data-airisk="' + e.data.id + '"]')
.forEach(function (f) { f.style.height = e.data.height + 'px'; });
});
</script></pre>
</div>
<div id="figs"></div>
<footer>
Figures from the AI Risk Acknowledgement Explorer, MIT AI Risk Initiative.
<a href="./" target="_blank" rel="noopener">Open the full tool</a> (password required).
</footer>
</div>
<script>
// One entry per figure. The id is the ?embed= value the tool answers to, so this page cannot offer a
// figure the tool does not serve: a wrong id renders its own error inside the frame rather than here.
var FIGS = [
['table1', 'Table 1. The 24 risks, top 100 and top 1000', 900],
['fig1', 'Figure 1. Acknowledgment of each risk', 620],
['fig2', 'Figure 2. How many risks a company names, by sector', 460],
['fig3', 'Figure 3. How many risks a company names, by AI role', 340],
['fig4', 'Figure 4. Acknowledgment against expert mean severity', 420],
['fig5', 'Figure 5. Acknowledgment by expert-rated sector vulnerability', 1000],
['fig6', 'Figure 6. Mitigations by taxonomy category', 700]
];
var BASE = location.href.replace(/embeds\.html.*$/, '');
// The snippet is built as plain text, with real angle brackets, and escaped exactly once when it is put
// on the page. Half-escaping it in the builder is what produced 'loading="lazy"></iframe>', which
// looks like code and does not paste as code.
function snippet(id, name, h) {
return '<iframe src="' + BASE + 'index.html?embed=' + id + '"\n'
+ ' data-airisk="' + id + '"\n'
+ ' title="' + name + '"\n'
+ ' style="width:100%;height:' + h + 'px;border:0"\n'
+ ' loading="lazy"></iframe>';
}
function esc(s) {
return String(s).replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>');
}
document.getElementById('figs').innerHTML = FIGS.map(function (f) {
var id = f[0], name = f[1], h = f[2];
return '<div class="fig">'
+ '<div class="fig-h"><span class="fig-n">' + name + '</span><span class="fig-id">?embed=' + id + '</span></div>'
+ '<div class="fig-body"><iframe data-airisk="' + id + '" title="' + name + '" '
+ 'src="index.html?embed=' + id + '" style="height:' + h + 'px" loading="lazy"></iframe></div>'
+ '<div class="fig-snip"><pre id="s-' + id + '">' + esc(snippet(id, name, h)) + '</pre>'
+ '<button class="copy" data-copy="' + id + '">Copy this snippet</button></div>'
+ '</div>';
}).join('');
// the previews on this page size themselves the same way a host page's would
addEventListener('message', function (e) {
if (!e.data || e.data.type !== 'airisk-embed-height') return;
var f = document.querySelector('iframe[data-airisk="' + e.data.id + '"]');
if (f) f.style.height = e.data.height + 'px';
});
document.querySelectorAll('[data-copy]').forEach(function (b) {
b.addEventListener('click', function () {
var t = document.getElementById('s-' + b.getAttribute('data-copy')).textContent;
navigator.clipboard.writeText(t).then(function () {
var was = b.textContent; b.textContent = 'Copied'; setTimeout(function () { b.textContent = was; }, 1400);
});
});
});
</script>
</body>
</html>