mirror of https://github.com/doccano/doccano.git
pythonannotation-tooldatasetsactive-learningtext-annotationdatasetnatural-language-processingdata-labelingmachine-learning
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
270 lines
12 KiB
270 lines
12 KiB
{% extends "base.html" %} {% load static %} {% block header %} {% endblock %} {% block content %}
|
|
<section class="container" id="root">
|
|
<div class="columns">
|
|
|
|
<div class="column is-8">
|
|
<div class="box content">
|
|
<article class="post">
|
|
<h4>Learning Curve</h4>
|
|
<div class="media">
|
|
<div class="media-content">
|
|
<div class="content">
|
|
<canvas id="myChart"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="column is-4">
|
|
<div class="box content">
|
|
<article class="post">
|
|
<h4>Stats</h4>
|
|
<div class="media">
|
|
<div class="media-content">
|
|
<div class="content">
|
|
<canvas id="myPie"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="columns" style="margin-top:-1rem;">
|
|
<div class="column is-8">
|
|
<div class="box content">
|
|
<article class="post">
|
|
<h4>Label Management</h4>
|
|
<div class="media">
|
|
<div class="media-content">
|
|
<div class="content">
|
|
|
|
<div class="field is-horizontal">
|
|
<div class="field-label is-normal">
|
|
<label class="label">Label name</label>
|
|
</div>
|
|
<div class="field-body">
|
|
<div class="field">
|
|
<p class="control is-expanded has-icons-left">
|
|
<input class="input" type="text" placeholder="Label name" required>
|
|
<span class="icon is-small is-left">
|
|
<i class="fas fa-tag"></i>
|
|
</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="field is-horizontal">
|
|
<div class="field-label is-normal">
|
|
<label class="label">Shortcut</label>
|
|
</div>
|
|
<div class="field-body">
|
|
<div class="field is-narrow">
|
|
<div class="control">
|
|
<div class="select is-fullwidth">
|
|
<select>
|
|
<option>Business development</option>
|
|
<option>Marketing</option>
|
|
<option>Sales</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="field is-horizontal">
|
|
<div class="field-label is-normal">
|
|
<label class="label">Background Color</label>
|
|
</div>
|
|
<div class="field-body">
|
|
<div class="field">
|
|
<div class="control">
|
|
<input type="color" value="#209cee">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="field is-horizontal">
|
|
<div class="field-label is-normal">
|
|
<label class="label">Text Color</label>
|
|
</div>
|
|
<div class="field-body">
|
|
<div class="field">
|
|
<div class="control">
|
|
<input type="color" value="#ffffff">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="field is-horizontal">
|
|
<div class="field-label">
|
|
<!-- Left empty for spacing -->
|
|
</div>
|
|
<div class="field-body">
|
|
<div class="field">
|
|
<div class="control">
|
|
<button class="button is-primary">
|
|
Add
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="field is-grouped">
|
|
<p class="control is-expanded">
|
|
<input class="input" type="text" placeholder="Label name" v-model="newLabel" required>
|
|
</p>
|
|
<p class="control">
|
|
<input class="input" type="text" placeholder="Shortcut key" v-model="newShortcut" required>
|
|
</p>
|
|
<p class="control">
|
|
<a class="button is-primary" v-on:click="addLabel()">
|
|
Add
|
|
</a>
|
|
</p>
|
|
</div>
|
|
<table class="table">
|
|
<thead>
|
|
<tr>
|
|
<th>
|
|
Id
|
|
</th>
|
|
<th>Label name</th>
|
|
<th>Shortcut key</th>
|
|
<th>Deletion</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr v-for="(label, index) in labels">
|
|
<th>[[ index + 1 ]]</th>
|
|
<td>[[ label.text ]]</td>
|
|
<td>[[ label.shortcut ]]</td>
|
|
<td><a class="button is-danger is-small" v-on:click="removeLabel(index)">Delete</a></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="column is-4">
|
|
<div class="box content">
|
|
<article class="post">
|
|
<h4>Data Management</h4>
|
|
<div class="media">
|
|
<div class="media-content">
|
|
<div class="content">
|
|
<p>Data upload</p>
|
|
<div class="file has-name is-right is-fullwidth">
|
|
<label class="file-label">
|
|
<input class="file-input" type="file" name="resume" ref="file" v-on:change="handleFileUpload()" />
|
|
<span class="file-cta">
|
|
<span class="file-icon">
|
|
<i class="fas fa-upload"></i>
|
|
</span>
|
|
<span class="file-label">
|
|
Upload
|
|
</span>
|
|
</span>
|
|
<span class="file-name">
|
|
[[ file_name ]]
|
|
</span>
|
|
</label>
|
|
</div>
|
|
<br>
|
|
<p>Data Download</p>
|
|
<a class="button" href="{% url 'download' project.id %}">
|
|
<span class="icon">
|
|
<i class="fas fa-download"></i>
|
|
</span>
|
|
<span>Download</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</section>
|
|
<script type="text/javascript" src="{% static 'js/project_admin.js' %}"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
|
|
<script type="text/javascript">
|
|
var ctx = document.getElementById('myChart').getContext('2d');
|
|
var ctx1 = document.getElementById('myPie');
|
|
|
|
var pie = new Chart(ctx1, {
|
|
type: 'doughnut',
|
|
data: {
|
|
datasets: [{
|
|
data: [10, 20],
|
|
backgroundColor: ["#50dc64", "#3399ff"],
|
|
}],
|
|
labels: [
|
|
'Labeled',
|
|
'Unlabeled'
|
|
]
|
|
}
|
|
});
|
|
|
|
var chart = new Chart(ctx, {
|
|
// The type of chart we want to create
|
|
type: 'line',
|
|
|
|
// The data for our dataset
|
|
data: {
|
|
labels: [50, 100, 150, 200, 250, 300],
|
|
datasets: [{
|
|
label: "training",
|
|
backgroundColor: 'rgb(80, 220, 100)',
|
|
borderColor: 'rgb(80, 220, 100)',
|
|
//data: [72, 83, 86, 87, 88, 88.5],
|
|
data: [94, 93.5, 93, 93, 93, 92.5],
|
|
fill: false,
|
|
},
|
|
{
|
|
label: "validation",
|
|
backgroundColor: 'rgb(51, 153, 255)',
|
|
borderColor: 'rgb(51, 153, 255)',
|
|
data: [72, 80, 83, 85, 86, 86.5],
|
|
fill: false,
|
|
}
|
|
]
|
|
},
|
|
|
|
// Configuration options go here
|
|
options: {
|
|
legend: {
|
|
display: true,
|
|
position: 'right'
|
|
},
|
|
scales: {
|
|
yAxes: [{
|
|
scaleLabel: {
|
|
display: true,
|
|
labelString: 'Accuracy'
|
|
}
|
|
}],
|
|
xAxes: [{
|
|
scaleLabel: {
|
|
display: true,
|
|
labelString: 'Number of training samples'
|
|
}
|
|
}],
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
{% endblock %}
|