-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy path17152350963069.html
535 lines (457 loc) · 27 KB
/
17152350963069.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
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>
LoReFT-Llama3-8B-Instruct-Commonsense-170k - Prepare for the FUTURE
</title>
<link href="atom.xml" rel="alternate" title="Prepare for the FUTURE" type="application/atom+xml">
<link rel="stylesheet" href="asset/css/style.min.css">
<link rel="stylesheet" href="asset/css/doc.css">
<script src="asset/app.js"></script>
</head>
<body>
<section class="hero">
<div class="hero-head">
<nav class="navbar" role="navigation" aria-label="main navigation">
<div class="container">
<div class="navbar-brand">
<a target="_self" class="navbar-item " href="index.html">Home</a>
<a target="_self" class="navbar-item " href="archives.html">Archives</a>
<a role="button" id="navbarSNSRssSwitchBtn" class="navbar-burger burger" aria-label="menu" aria-expanded="false" data-target="navbarSNSRssButtons">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
<div id="navbarSNSRssButtons" class="navbar-menu">
<div class="navbar-start">
</div>
<div class="navbar-end">
<div class="navbar-item">
<!--buttons start-->
<div class="buttons">
<a href="atom.xml" target="_blank" title="RSS">
<span class="icon is-large has-text-black-bis">
<svg class="svg-inline--fa fa-rss fa-w-14 fa-lg" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="rss" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" data-fa-i2svg=""><path fill="currentColor" d="M128.081 415.959c0 35.369-28.672 64.041-64.041 64.041S0 451.328 0 415.959s28.672-64.041 64.041-64.041 64.04 28.673 64.04 64.041zm175.66 47.25c-8.354-154.6-132.185-278.587-286.95-286.95C7.656 175.765 0 183.105 0 192.253v48.069c0 8.415 6.49 15.472 14.887 16.018 111.832 7.284 201.473 96.702 208.772 208.772.547 8.397 7.604 14.887 16.018 14.887h48.069c9.149.001 16.489-7.655 15.995-16.79zm144.249.288C439.596 229.677 251.465 40.445 16.503 32.01 7.473 31.686 0 38.981 0 48.016v48.068c0 8.625 6.835 15.645 15.453 15.999 191.179 7.839 344.627 161.316 352.465 352.465.353 8.618 7.373 15.453 15.999 15.453h48.068c9.034-.001 16.329-7.474 16.005-16.504z"></path></svg><!-- <i class="fas fa-rss fa-lg"></i> -->
</span>
</a>
</div>
<!--buttons end-->
</div>
</div>
</div>
</div>
</nav>
</div>
<div class="hero-body ct-body"></div>
</section>
<section class="ct-body">
<div class="container">
<div class="columns is-variable bd-klmn-columns is-4 is-centered">
<div class="column is-four-fifths">
<div class="post-body single-content">
<h1 class="title">
LoReFT-Llama3-8B-Instruct-Commonsense-170k
</h1>
<div class="media">
<div class="media-content">
<div class="content">
<p>
<span class="date">2024/05/09</span>
<br />
<span class="tran-tags">Tags:</span>
<a class="tag is-link is-light" href='tag_Llama3%20ReFTEng%20vs%20PEFT.html'>#Llama3 ReFTEng vs PEFT</a>
</p>
</div>
</div>
</div>
</div>
<article class="markdown-body single-content">
<h2><a id="prepare" class="anchor" aria-hidden="true"><span class="octicon octicon-link"></span></a>Prepare</h2>
<p>和 <a href="https://thu-yn.github.io/17147464283285.html" title="LoReFT-Llama3-8B-Base-Commonsense-170k">LoReFT-Llama3-8B-Base-Commonsense-170k</a> 相同。</p>
<h2><a id="debug" class="anchor" aria-hidden="true"><span class="octicon octicon-link"></span></a>Debug</h2>
<p>新建窗口，运行以下命令：</p>
<pre><code class="language-shell"># （在当前 "LoReFT" 的 conda 虚拟环境下）新建一个 screen，名为 LoReFT-llama3-8B-Instruct-Commonsense
screen -S LoReFT-llama3-8B-Instruct-Commonsense
# 运行程序
python train.py -task commonsense \
-data_dir dataset \
-model Meta-Llama-3-8B-Instruct \
-seed 42 \
-l all -r 8 -p f7+l7 -e 6 -lr 9e-4 \
-type LoreftIntervention \
-batch_size 4 \
-gradient_accumulation_steps 8 \
-eval_batch_size 2 \
--dropout 0.00 \
--test_split test \
--use_normalized_template \
--share_weights \
--warmup_ratio 0.1 \
--greedy_decoding \
-is_wandb \
-wandb_name prada-lab \
--wandb_proj just_fot_test
</code></pre>
<p><br />
运行结束后发现居然 eval 模块所有的值均为 <strong>0</strong>！！！！！！</p>
<p><img src="media/17152350963069/17152354479651.jpg" alt="" /></p>
<p>首先检查各个 eval 时产生的输出文件：在 <code>/root/autodl-tmp/pyreft/examples/loreft/official_results/Meta-Llama-3-8B-Instruct.commonsense.20240507072419909892</code> 中：</p>
<pre><code class="language-shell">├── Meta-Llama-3-8B-Instruct.commonsense.20240507072419909892
│ ├── ARC-Challenge_test_outputs.json
│ ├── ARC-Easy_test_outputs.json
│ ├── args.json
│ ├── boolq_test_outputs.json
│ ├── eval_results.json
│ ├── hellaswag_test_outputs.json
│ ├── openbookqa_test_outputs.json
│ ├── piqa_test_outputs.json
│ ├── social_i_qa_test_outputs.json
│ ├── winogrande_test_outputs.json
</code></pre>
<p><br />
随便打开一个 result.json 文件（以 <code>ARC-Challenge_test_outputs.json</code> 为例），发现其中的样例如下：</p>
<pre><code class="language-json">{
"instruction": "Please choose the correct answer to the question: An astronomer observes that a planet rotates faster after a meteorite impact. Which is the most likely effect of this increase in rotation?\n\nAnswer1: Planetary density will decrease. Answer2: Planetary years will become longer. Answer3: Planetary days will become shorter. Answer4: Planetary gravity will become stronger.\n\nAnswer format: answer1/answer2/answer3/answer4",
"raw_generation": "","generation":"","answer":"answer3"
}
</code></pre>
<p><br />
可以看到，其中 <code>raw_generation</code> 和 <code>generation</code> 均没有输出，看过其他 <code>json</code> 文件也是如此。对比 <a href="https://thu-yn.github.io/17147464283285.html" title="LoReFT-Llama3-8B-Base-Commonsense-170k">LoReFT-Llama3-8B-Base-Commonsense-170k</a> 结果中的 json 文件更为明显：</p>
<pre><code class="language-json">{
"instruction": "Please choose the correct answer to the question: An astronomer observes that a planet rotates faster after a meteorite impact. Which is the most likely effect of this increase in rotation?\n\nAnswer1: Planetary density will decrease. Answer2: Planetary years will become longer. Answer3: Planetary days will become shorter. Answer4: Planetary gravity will become stronger.\n\nAnswer format: answer1/answer2/answer3/answer4",
"raw_generation": "answer3",
"generation": "answer3",
"answer": "answer3"
}
</code></pre>
<p><br />
思考其原因：由于模型训练时的曲线一切都正常，所以应该是出现在 eval 环节里，找到 <code>train.py</code> 的主要 eval 模块：</p>
<pre><code class="language-python">for dataset_name in eval_datasets:
# split evalset into chunks
for split, (eval_dataset, data_items) in eval_datasets[dataset_name].items():
generations, stats = compute_metrics(
task, dataset_name, reft_model, tokenizer, eval_dataset, data_items,
trigger_tokens, run_name, eval_batch_size,
data_collator if task in classification_tasks else None,
split, greedy_decoding, temperature, top_p, top_k
)
# log
eval_results.update(stats)
if is_wandb:
wandb.log(stats)
generations = stats if generations is None else generations
result_json_file_name = f"{output_dir}/{run_name}/{dataset_name}_{split}_outputs.json"
with open(result_json_file_name, 'w') as json_file:
json.dump(generations, json_file, indent=4)
</code></pre>
<p><br />
可以看到，eval 主要调用了 <code>compute_metrics</code> 函数，在 <code>compute_metrics.py</code> 中找到该函数，发现针对模型 <code>Meta-Llama-3-8B-Instruct</code>，有两块主要的改动：</p>
<pre><code class="language-python"># 1
if "Meta-Llama-3-8B-Instruct" in tokenizer.name_or_path: # pretty bad workaround for llama-3, forgive me
terminators = [
tokenizer.eos_token_id,
tokenizer.convert_tokens_to_ids("<|eot_id|>")
]
trigger_tokens = "assistant\n\n"
# 2
if "Meta-Llama-3-8B-Instruct" in tokenizer.name_or_path: # pretty bad workaround for llama-3, forgive me
generation_args["eos_token_id"] = terminators
</code></pre>
<p><br />
由于采用 <code>Meta-Llama-3-8B-Base</code> 模型时，一切正常，且没有这部分改动，因此 *** 将以上两部分注释掉 ***，重新进行训练（这次只采用 <code>epoch=1</code>，验证是否有效）：</p>
<pre><code class="language-shell">python train.py -task commonsense \
-data_dir dataset \
-is_select \
-model Meta-Llama-3-8B-Instruct \
-seed 42 \
-l all -r 8 -p f7+l7 -e 1 -lr 9e-4 \
-type LoreftIntervention \
-batch_size 4 \
-gradient_accumulation_steps 8 \
-eval_batch_size 2 \
--dropout 0.00 \
--test_split test \
--use_normalized_template \
--share_weights \
--warmup_ratio 0.1 \
--greedy_decoding
</code></pre>
<p><br />
然而还是太慢了，因此考虑只训练一小部分数据集，进行加速：因为我们只需要观察在模型 eval 时是否有输出，因此可以这么做。</p>
<p>以下是要修改的部分：</p>
<p>在 <code>train.py</code> 的 <code>main()</code> 函数中，我们添加一个参数 <code>is_select</code>，用以说明是否进行测试：</p>
<pre><code class="language-python">parser.add_argument('-is_select', '--is_select', action='store_true')
</code></pre>
<p><br />
在 <code>finetune()</code> 函数开始时，新增该入参<code>is_select</code>，并进行一些基本的 check：</p>
<pre><code class="language-python">def finetune(
...,
is_select: bool,
...):
{
if is_select:
import random # for random choose
assert task in {"commonsense", "math"}
...
}
</code></pre>
<p><br />
在 <code>task_config.py</code> 内，对以上两个任务添加一个参数 <code>selected_train_datasets</code>：</p>
<pre><code class="language-python">task_config = {
"commonsense": {
"train_datasets": ["commonsense_170k"],
"selected_train_datasets": ["selected_commonsense_170k"],
...
},
"math": {
"train_datasets": ["math_10k"],
"selected_train_datasets": ["selected_math_10k"],
...
},
...
}
</code></pre>
<p><br />
回到 <code>train.py</code> 文件中，在 <code>train_dataset</code> 的创建做以下改动：</p>
<pre><code class="language-python">if is_select and task in {"commonsense", "math"}:
train_datasets = task_config[task]["selected_train_datasets"] if train_dataset is None else [train_dataset]
full_train_datasets = task_config[task]["train_datasets"] if train_dataset is None else [train_dataset]
else:
train_datasets = task_config[task]["train_datasets"] if train_dataset is None else [train_dataset]
</code></pre>
<h4><a id="%E8%BF%99%E9%87%8C%E9%9C%80%E8%A6%81%E8%AF%B4%E6%98%8E%E4%B8%80%E7%82%B9" class="anchor" aria-hidden="true"><span class="octicon octicon-link"></span></a>这里需要说明一点</h4>
<p>为什么要创造一个额外的路径（例如 <code>dataset/selected_commonsense_170k</code>），而不在原来的路径下重新创造一个例如 <code>selected_train.json</code> 的文件？</p>
<p>原因是训练数据集文件的名称 ** 必须为 train.json**！！！否则会报错（要改动非常多），所以我们直接选择重新建立一个文件夹（例如 <code>dataset/selected_commonsense_170k</code>），存储挑选得到的数据集 train.json。</p>
<p>接着进行数据集的挑选：</p>
<pre><code class="language-python"># 产生 1000 个小的数据集进行测试
if is_select and task in {"commonsense", "math"}:
# initialize
selected_train_dataset_dir = os.path.join(data_dir, train_datasets[0])
full_train_dataset_dir = os.path.join(data_dir, full_train_datasets[0])
# create fileholder
if not os.path.exists(selected_train_dataset_dir):
os.makedirs(selected_train_dataset_dir)
print("filefolder has been created:", selected_train_dataset_dir)
# load original dataset
with open(os.path.join(full_train_dataset_dir, "train.json"), 'r') as file:
train_data = json.load(file)
# selection
selected_train_data = random.sample(train_data, 1000)
# save selected dataset
with open(os.path.join(selected_train_dataset_dir, "train.json"), 'w') as file:
json.dump(selected_train_data, file, indent=4)
print("selected train data load successfully")
</code></pre>
<p><br />
我们将挑选后的数据放入 <code>/dataset/selected_original_name/train.json</code> 中，其余都不用改变，开始测试训练：</p>
<pre><code class="language-shell">python train.py -task commonsense \
-data_dir dataset \
-is_select \
-model Meta-Llama-3-8B-Instruct \
-seed 42 \
-l all -r 8 -p f7+l7 -e 1 -lr 9e-4 \
-type LoreftIntervention \
-batch_size 4 \
-gradient_accumulation_steps 8 \
-eval_batch_size 2 \
--dropout 0.00 \
--test_split test \
--use_normalized_template \
--share_weights \
--warmup_ratio 0.1 \
--greedy_decoding
</code></pre>
<p><br />
我都没运行完，因为很快，所以只需要有一两个 result.json 就可以观察结果了。我们找到存放结果的文件夹，打开其中一个文件：（以 <code>boolq_test_outputs.json</code> 为例）</p>
<pre><code class="language-json">[
{
"instruction": "Please answer the following question with true or false, question: does ethanol take more energy make that produces?\n\nAnswer format: true/false",
"raw_generation": "true",
"generation": "true",
"answer": "false"
},
...
]
</code></pre>
<p><br />
成功有输出！！！说明我们将那两个注释掉是有用的！！</p>
<p>但是为了对比出注释真的有用，我们还需要还原注释的情况下重新训练，观察是否有输出。在训练完成后，我们打开其中一个结果文件：（以 <code>boolq_test_outputs.json</code> 为例）</p>
<pre><code class="language-json">[
{
"instruction": "Please answer the following question with true or false, question: does ethanol take more energy make that produces?\n\nAnswer format: true/false",
"raw_generation": "","generation":"","answer":"false"
},
...
]
</code></pre>
<p><br />
可以看到注释的部分确实会让模型无法输出，因此将其注释掉后，重新训练。</p>
<pre><code class="language-python"># 1
# if "Meta-Llama-3-8B-Instruct" in tokenizer.name_or_path: # pretty bad workaround for llama-3, forgive me
# terminators = [
# tokenizer.eos_token_id,
# tokenizer.convert_tokens_to_ids("<|eot_id|>")
# ]
# trigger_tokens = "assistant\n\n"
# 2
# if "Meta-Llama-3-8B-Instruct" in tokenizer.name_or_path: # pretty bad workaround for llama-3, forgive me
# generation_args["eos_token_id"] = terminators
</code></pre>
<h2><a id="train" class="anchor" aria-hidden="true"><span class="octicon octicon-link"></span></a>Train</h2>
<p>重新开始训练：</p>
<pre><code class="language-shell">screen -S LoReFT-llama3-8B-Instruct-Commonsense
# 运行程序
python train.py -task commonsense \
-data_dir dataset \
-model Meta-Llama-3-8B-Instruct \
-seed 42 \
-l all -r 8 -p f7+l7 -e 6 -lr 9e-4 \
-type LoreftIntervention \
-batch_size 4 \
-gradient_accumulation_steps 8 \
-eval_batch_size 2 \
--dropout 0.00 \
--test_split test \
--use_normalized_template \
--share_weights \
--warmup_ratio 0.1 \
--greedy_decoding \
-is_wandb \
-wandb_name prada-lab \
--wandb_proj just_fot_test
</code></pre>
<h2><a id="result" class="anchor" aria-hidden="true"><span class="octicon octicon-link"></span></a>Result</h2>
<h3><a id="eval" class="anchor" aria-hidden="true"><span class="octicon octicon-link"></span></a>Eval</h3>
<p>该部分记录 llama3-8b-instruct 在微调commonsense task时的测试得分情况。</p>
<p><img src="media/17152350963069/ARC-Challenge.png" alt="ARC-Challenge" /></p>
<p><img src="media/17152350963069/ARC-Easy.png" alt="ARC-Easy" /></p>
<p><img src="media/17152350963069/boolq.png" alt="boolq" /></p>
<p><img src="media/17152350963069/hellaswag.png" alt="hellaswag" /></p>
<p><img src="media/17152350963069/openbookqa.png" alt="openbookqa" /></p>
<p><img src="media/17152350963069/piqa.png" alt="piqa" /></p>
<p><img src="media/17152350963069/social_i_qa.png" alt="social_i_qa" /></p>
<p><img src="media/17152350963069/winogrande.png" alt="winogrande" /></p>
<h3><a id="train" class="anchor" aria-hidden="true"><span class="octicon octicon-link"></span></a>Train</h3>
<p>该部分记录 llama3-8b-instruct 在微调commonsense task时的训练情况。</p>
<p><img src="media/17152350963069/epoch.png" alt="epoch" /></p>
<p><img src="media/17152350963069/global_step.png" alt="global_step" /></p>
<p><img src="media/17152350963069/grad_norm.png" alt="grad_norm" /></p>
<p><img src="media/17152350963069/learning_rate.png" alt="learning_rate" /></p>
<p><img src="media/17152350963069/loss.png" alt="loss" /></p>
<p><img src="media/17152350963069/n_params.png" alt="n_params" /></p>
<h3><a id="system" class="anchor" aria-hidden="true"><span class="octicon octicon-link"></span></a>System</h3>
<p>该部分记录 llama3-8b-instruct 在微调commonsense task时的系统情况。</p>
<p><img src="media/17152350963069/Disk%20I_O%20Utilization%20-MB-.png" alt="Disk I_O Utilization -MB-" /></p>
<p><img src="media/17152350963069/Disk%20Utilization%20-%25-.png" alt="Disk Utilization -%-" /></p>
<p><img src="media/17152350963069/Disk%20Utilization%20-GB-.png" alt="Disk Utilization -GB-" /></p>
<p><img src="media/17152350963069/GPU%20Memory%20Allocated%20-%25-.png" alt="GPU Memory Allocated -%-" /></p>
<p><img src="media/17152350963069/GPU%20Power%20Usage%20-%25-.png" alt="GPU Power Usage -%-" /></p>
<p><img src="media/17152350963069/GPU%20Power%20Usage%20-W-.png" alt="GPU Power Usage -W-" /></p>
<p><img src="media/17152350963069/GPU%20Temp%20-%E2%84%83-.png" alt="GPU Temp -℃-" /></p>
<p><img src="media/17152350963069/GPU%20Time%20Spent%20Accessing%20Memory%20-%25-.png" alt="GPU Time Spent Accessing Memory -%-" /></p>
<p><img src="media/17152350963069/GPU%20Utilization%20-%25-.png" alt="GPU Utilization -%-" /></p>
<p><img src="media/17152350963069/gpu.0.memoryAllocatedBytes.png" alt="gpu.0.memoryAllocatedBytes" /></p>
<p><img src="media/17152350963069/Network%20Traffic%20-bytes-.png" alt="Network Traffic -bytes-" /></p>
<p><img src="media/17152350963069/Process%20CPU%20Threads%20In%20Use.png" alt="Process CPU Threads In Use" /></p>
<p><img src="media/17152350963069/Process%20CPU%20Utilization%20-%25-.png" alt="Process CPU Utilization -%-" /></p>
<p><img src="media/17152350963069/Process%20Memory%20Available%20-non-swap-%20-MB-.png" alt="Process Memory Available -non-swap- -MB-" /></p>
<p><img src="media/17152350963069/Process%20Memory%20In%20Use%20-non-swap-%20-%25-.png" alt="Process Memory In Use -non-swap- -%-" /></p>
<p><img src="media/17152350963069/Process%20Memory%20In%20Use%20-non-swap-%20-MB-.png" alt="Process Memory In Use -non-swap- -MB-" /></p>
<p><img src="media/17152350963069/System%20CPU%20Utilization%20-per%20core-%20-%25-.png" alt="System CPU Utilization -per core- -%-" /></p>
<p><img src="media/17152350963069/System%20Memory%20Utilization%20-%25-.png" alt="System Memory Utilization -%-" /></p>
</article>
<div class="comments-wrap">
<div class="share-comments">
</div>
</div><!-- end comments wrap -->
</div>
</div><!-- end columns -->
</div><!-- end container -->
</section>
<footer class="footer">
<div class="content has-text-centered">
<p>
Copyright © 2019
Powered by <a target="_blank" href="http://www.mweb.im">MWeb</a>,
Theme used <a target="_blank" href="https://bulma.io/">Bulma CSS</a>.
</p>
</div>
</footer>
<style>.mweb-charts{background:#fff;}
body{ box-sizing: border-box;
margin: 0 auto;}
@media print{
pre, code, pre code {
overflow: visible !important;
white-space: pre-wrap !important; /* css-3 */
white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */
white-space: -pre-wrap !important; /* Opera 4-6 */
white-space: -o-pre-wrap !important; /* Opera 7 */
word-wrap: break-word !important; /* Internet Explorer 5.5+ */
}
html,body{margin:0;padding:4px;}
}
div.code-toolbar {
position: relative;
}
div.code-toolbar > .toolbar {
position: absolute;
z-index: 10;
top: .3em;
right: .2em;
transition: opacity 0.3s ease-in-out;
opacity: 0;
}
div.code-toolbar:hover > .toolbar {
opacity: 1;
}
/* Separate line b/c rules are thrown out if selector is invalid.
IE11 and old Edge versions don't support :focus-within. */
div.code-toolbar:focus-within > .toolbar {
opacity: 1;
}
div.code-toolbar > .toolbar > .toolbar-item {
display: inline-block;
}
div.code-toolbar > .toolbar > .toolbar-item > a {
cursor: pointer;
}
div.code-toolbar > .toolbar > .toolbar-item > button {
background: none;
border: 0;
color: inherit;
font: inherit;
line-height: normal;
overflow: visible;
padding: 0;
-webkit-user-select: none; /* for button */
-moz-user-select: none;
-ms-user-select: none;
}
div.code-toolbar > .toolbar > .toolbar-item > a,
div.code-toolbar > .toolbar > .toolbar-item > button,
div.code-toolbar > .toolbar > .toolbar-item > span {
color: inherit;
font-size: .8em;
padding: 4px .5em;
background: #f5f2f0;
background: rgba(224, 224, 224, 0.4);
box-shadow: 0 2px 0 0 rgba(0,0,0,0.2);
border-radius: .5em;
}
div.code-toolbar > .toolbar > .toolbar-item > a:hover,
div.code-toolbar > .toolbar > .toolbar-item > a:focus,
div.code-toolbar > .toolbar > .toolbar-item > button:hover,
div.code-toolbar > .toolbar > .toolbar-item > button:focus,
div.code-toolbar > .toolbar > .toolbar-item > span:hover,
div.code-toolbar > .toolbar > .toolbar-item > span:focus {
color: inherit;
text-decoration: none;
}
</style><script src="https://cdn.jsdelivr.net/npm/[email protected]/prism.min.js"></script><script src="https://cdn.jsdelivr.net/npm/[email protected]/plugins/line-numbers/prism-line-numbers.min.js"></script><script>!function(){if("undefined"!=typeof Prism&&"undefined"!=typeof document){var e=[],t={},n=function(){};Prism.plugins.toolbar={};var a=Prism.plugins.toolbar.registerButton=function(n,a){var r;r="function"==typeof a?a:function(e){var t;return"function"==typeof a.onClick?((t=document.createElement("button")).type="button",t.addEventListener("click",(function(){a.onClick.call(this,e)}))):"string"==typeof a.url?(t=document.createElement("a")).href=a.url:t=document.createElement("span"),a.className&&t.classList.add(a.className),t.textContent=a.text,t},n in t?console.warn('There is a button with the key "'+n+'" registered already.'):e.push(t[n]=r)},r=Prism.plugins.toolbar.hook=function(a){var r=a.element.parentNode;var l=a.element.classList;if(l.contains('language-mermaid') || l.contains('language-echarts') || l.contains('language-plantuml')){return;} if(r&&/pre/i.test(r.nodeName)&&!r.parentNode.classList.contains("code-toolbar")){var o=document.createElement("div");o.classList.add("code-toolbar"),r.parentNode.insertBefore(o,r),o.appendChild(r);var i=document.createElement("div");i.classList.add("toolbar");var l=e,d=function(e){for(;e;){var t=e.getAttribute("data-toolbar-order");if(null!=t)return(t=t.trim()).length?t.split(/\s*,\s*/g):[];e=e.parentElement}}(a.element);d&&(l=d.map((function(e){return t[e]||n}))),l.forEach((function(e){var t=e(a);if(t){var n=document.createElement("div");n.classList.add("toolbar-item"),n.appendChild(t),i.appendChild(n)}})),o.appendChild(i)}};a("label",(function(e){var t=e.element.parentNode;if(t&&/pre/i.test(t.nodeName)&&t.hasAttribute("data-label")){var n,a,r=t.getAttribute("data-label");try{a=document.querySelector("template#"+r)}catch(e){}return a?n=a.content:(t.hasAttribute("data-url")?(n=document.createElement("a")).href=t.getAttribute("data-url"):n=document.createElement("span"),n.textContent=r),n}})),Prism.hooks.add("complete",r)}}();</script><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/plugins/toolbar/prism-toolbar.min.css"><script src="https://cdn.jsdelivr.net/npm/[email protected]/plugins/copy-to-clipboard/prism-copy-to-clipboard.min.js"></script><script src="https://cdn.jsdelivr.net/npm/[email protected]/plugins/autoloader/prism-autoloader.min.js"></script><style>div.code-toolbar > .toolbar > .toolbar-item > a, div.code-toolbar > .toolbar > .toolbar-item > button, div.code-toolbar > .toolbar > .toolbar-item > span {padding: 4px .5em; background: #f5f2f0; background: rgba(224, 224, 224, 0.4);}</style>
</body>
</html>