-
Notifications
You must be signed in to change notification settings - Fork 8
/
card.html
120 lines (112 loc) · 5.92 KB
/
card.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
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="Indonesian NLP Data Catalogue"/>
<title>IndoNLP | Data Catalogue</title>
<link rel="shortcut icon" type="image/x-icon" href="assets/images/favicons/favicon.ico">
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@200;400;700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Dosis:wght@300&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css">
<!-- Style -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.datatables.net/1.11.3/css/dataTables.bootstrap5.min.css">
<link href="assets/style/style.min.css" rel="stylesheet" />
<link href="assets/style/card.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/styles/default.min.css"/>
</head>
<body>
<div id="usagebox" class="overlay" style="display: none;">
<!-- Button to close the overlay navigation -->
<div class="hidden-overlay" onclick="showUsageBox()"></div>
<a href="javascript:void(0)" class="closebtn" onclick="showUsageBox()">×</a>
<!-- Overlay content -->
<div class="overlay-content" onclick="event.stopPropagation()">
<div class="usage-header">
Load this dataset directly with the Datasets library
</div>
<div class="usage-content">
First, install dependency and clone NusaCrowd
<!-- HTML generated using hilite.me -->
</div>
<div class="usage-content">
<div style="width: 100%; background: #ffffff; overflow:auto;border:solid gray;border-width:.1em .1em .1em .8em;padding:.2em .6em;"><pre style="margin: 0; line-height: 125%"><span style="color: #888888">pip install datasets</span>
<span style="color: #888888">git clone https://github.com/IndoNLP/nusa-crowd.git</span>
</pre></div>
</div>
<div class="usage-content">
<br/>
Then, the dataset can be downloaded locally by the python script below:
</div>
<div class="usage-content">
<div class="usage-code">
<!-- HTML generated using hilite.me --><div class="loading-code" style="background: #ffffff; overflow:auto;width:auto;border:solid gray;border-width:.1em .1em .1em .8em;padding:.2em .6em;"><pre style="margin: 0; line-height: 125%"><span style="color: #008800; font-weight: bold">from</span> <span style="color: #0e84b5; font-weight: bold">datasets</span> <span style="color: #008800; font-weight: bold">import</span> load_dataset
path <span style="color: #333333">=</span> <span style="background-color: #fff0f0">"nusa-crowd/nusacrowd/nusa_datasets/<span id="dset_name">TMP</span>"</span>
dataset <span style="color: #333333">=</span> load_dataset(path)
<span style="color: #888888"># see dataset sample:</span>
<span style="color: #007020">print</span>(dataset[<span style="background-color: #fff0f0">'train'</span>]<span style="color: #333333">.</span>to_pandas())
</pre></div>
</div>
<div class="usage-copy">
<button id="copy-button" class="btn" onclick="copyText()"><i class="fa fa-copy" onclick="copyText()"></i></button>
<div id="copy-text">Copied!</div>
</div>
</div>
</div>
</div>
</div>
<main class="main">
<!-- Navbar section -->
<div id ="nav-placeholder"></div>
<!-- END Navbar Section -->
<!-- Table section -->
<section style="background:linear-gradient(180deg, #FFFEFC -54.51%, #FFF8F0 99.98%);" id="home">
<div class="container">
<div class="table-section py-4">
<div class="filter-container">
<table class="table table-responsive table-container" id="table_card" >
</table>
</div>
</div>
</section>
<!-- END Table Section -->
</main>
</div>
<script>
function showUsageBox(loader_name) {
var dset = document.getElementById("dset_name");
dset.innerHTML = loader_name;
var x = document.getElementById("usagebox");
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}
$("#copy-text").hide();
}
function copyText() {
/* Get the text field */
var text = $(".loading-code").text().replace(" ","");
/* Copy the text inside the text field */
navigator.clipboard.writeText(text);
/* Show copied text */
$("#copy-text").show();
}
</script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.11.3/js/dataTables.bootstrap5.min.js"></script>
<script type="text/javascript" src="card.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/highlight.min.js"></script>
<script>hljs.highlightAll();</script>
<script>
$.get("navigation.html", function(data){
$("#nav-placeholder").replaceWith(data);
});
</script>
</body>
</html>