| <html> |
|
|
| <head> |
| <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> |
| <title>OpenSLU Visual Analysis</title> |
| <meta name="viewport" content="width=device-width, initial-scale=1"> |
| <link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet"> |
| <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script> |
| <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> |
| <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.1/dist/echarts.min.js"></script> |
| <style type="text/css"> |
| span.rcorners2 { |
| background-color: #e6e6e6; |
| color: #000; |
| } |
| </style> |
| <link rel="icon" href="{{url_for('static',filename='favicon.ico')}}" type ="image/x-icon"> |
| </head> |
|
|
| <body> |
| <div class="row" style="width: 100%;margin: 2px;"> |
| <div class="col-md-12 col-sm-12" style="display: flex; flex-direction: column; align-items: center;"> |
|
|
| <div class="row" style="width: 100%; margin: 20px 0px 30px 0px; justify-content: center;"> |
| <div class="col-md-4"> |
| <div class="card" |
| style="width: 100%;display: flex;align-content: center;flex-direction: column;flex-wrap: nowrap;justify-content: center;align-items: center;"> |
| <div style="margin-bottom: 0px; margin-top: 20px;text-align: center;"> |
| <b>Error Intent Label Distribution</b> |
| </div> |
| <div id="intent-pie" style="width: 100%;height:300px;"></div> |
| </div> |
|
|
| </div> |
| <div class="col-md-4"> |
| <div class="card" |
| style="width: 100%;display: flex;align-content: center;flex-direction: column;flex-wrap: nowrap;justify-content: center;align-items: center;"> |
| <div style="margin-bottom: 0px; margin-top: 20px;text-align: center;"> |
| <b>Error Slot Label Distribution</b> |
| </div> |
| <div id="slot-pie" style="width: 100%;height:300px;"></div> |
| </div> |
| </div> |
| <div class="col-md-4"> |
| <div class="card" |
| style="width: 90%;display: flex;align-content: center;flex-direction: column;flex-wrap: nowrap;justify-content: center;align-items: center;"> |
| <div class="card-body" style="width: 100%;"> |
| <div id="card-title" style="text-align: center;"></div> |
| <div id="gauge_chart" style="width: 100%; height:200px;"></div> |
| <p class="card-text" style="margin-top: -80px;" id="card-statistics"> |
| </p> |
| </div> |
| </div> |
| </div> |
| </div> |
| <div class="row" style="width: 100%; margin: 20px 0px 30px 0px; justify-content: center;"> |
|
|
|
|
|
|
| <script type="text/javascript"> |
| {% autoescape false %} |
| var slot_dict = {{ slot_dict }} |
| var slot_dict_list = {{ slot_dict_list }} |
| var intent_dict = {{ intent_dict }} |
| var intent_dict_list = {{ intent_dict_list }} |
| |
| {% endautoescape %} |
| function drawPieChart(docId, data, type) { |
| var chartDom = document.getElementById(docId); |
| var data_keys = [] |
| for (var i = 0; i < data.length; i++) { |
| data_keys.push(data[i]["name"]) |
| } |
| var myChart = echarts.init(chartDom); |
| |
| var option = { |
| tooltip: { |
| trigger: 'item' |
| }, |
| visualMap: { |
| show: false, |
| |
| |
| splitNumber: 10, |
| inRange: { |
| color: ["#a50026", "#d73027", "#f46d43", "#fdae61", "#fee090", "#ffffbf", "#e0f3f8", "#abd9e9", "#74add1", "#4575b4", "#313695"] |
| |
| }, |
| pieces: [ |
| { gt: data[1]["value"], lte: data[0]["value"] }, |
| { gt: data[2]["value"], lte: data[1]["value"] }, |
| { gt: data[3]["value"], lte: data[2]["value"] }, |
| { gt: data[4]["value"], lte: data[3]["value"] }, |
| { gt: data[5]["value"], lte: data[4]["value"] }, |
| { gt: data[6]["value"], lte: data[5]["value"] }, |
| { gt: data[7]["value"], lte: data[6]["value"] }, |
| { gt: data[8]["value"], lte: data[7]["value"] }, |
| { gt: data[9]["value"], lte: data[8]["value"] }, |
| { lte: data[9]["value"] } |
| ] |
| }, |
| series: [ |
| { |
| type: 'pie', |
| radius: ['50%', '70%'], |
| avoidLabelOverlap: false, |
| itemStyle: { |
| |
| borderRadius: 10, |
| borderColor: '#fff', |
| borderWidth: 2 |
| }, |
| label: { |
| show: false, |
| position: 'center' |
| }, |
| emphasis: { |
| label: { |
| show: true, |
| fontSize: 20, |
| fontWeight: 'bold' |
| } |
| }, |
| labelLine: { |
| show: false |
| }, |
| data: data |
| } |
| ] |
| }; |
| |
| option && myChart.setOption(option); |
| myChart.on('click', function (params) { |
| if (type == "slot") { |
| var detailChart = drawGaugeChart("gauge_chart", slot_dict, params.name, "slot") |
| } else { |
| var detailChart = drawGaugeChart("gauge_chart", intent_dict, params.name, "intent") |
| } |
| |
| }); |
| } |
| function drawBarChart(docId, data, type) { |
| var chartDom = document.getElementById(docId); |
| var data_dicts = {} |
| var data_keys = [] |
| var bars = [] |
| for (var i = 0; i < data.length; i++) { |
| data_dicts[data[i]["name"]] = data[i]["value"] |
| data_keys.push(data[i]["name"]) |
| bars.push({ type: 'bar' }) |
| } |
| var myChart = echarts.init(chartDom); |
| |
| option = { |
| legend: {}, |
| tooltip: {}, |
| dataset: { |
| dimensions: data_keys, |
| source: [data_dicts] |
| }, |
| xAxis: { type: 'category' }, |
| yAxis: {}, |
| |
| |
| series: bars |
| }; |
| option && myChart.setOption(option); |
| myChart.on('click', function (params) { |
| if (type == "slot") { |
| var detailChart = drawGaugeChart("gauge_chart", slot_dict, params.name, "slot") |
| } else { |
| var detailChart = drawGaugeChart("gauge_chart", intent_dict, params.name, "intent") |
| } |
| |
| }); |
| } |
| function greatBarChart(docId, data, type) { |
| var chartDom = document.getElementById(docId); |
| var myChart = echarts.init(chartDom); |
| myChart.hideLoading(); |
| var data_lists = [] |
| var data_keys = [] |
| var bars = [] |
| var colors = [ |
| '#dd6b66', |
| '#759aa0', |
| '#e69d87', |
| '#8dc1a9', |
| '#ea7e53', |
| '#eedd78', |
| '#73a373', |
| '#73b9bc', |
| '#7289ab', |
| '#91ca8c', |
| '#f49f42' |
| ] |
| for (var i = 0; i < data.length; i++) { |
| data_lists.push({ "value": data[i]["value"], "itemStyle": { color: colors[i % colors.length] } }) |
| data_keys.push(data[i]["name"]) |
| bars.push({ type: 'bar' }) |
| } |
| console.log(data_lists) |
| option = { |
| tooltip: { |
| trigger: 'axis', |
| axisPointer: { |
| type: 'shadow', |
| label: { |
| show: true |
| } |
| } |
| }, |
| toolbox: { |
| show: true, |
| feature: { |
| dataZoom: { yAxisIndex: 'none', title: 'Area Zoom' }, |
| |
| dataView: { show: true, readOnly: false, title: 'Raw Data' }, |
| magicType: { show: true, type: ['line', 'bar'], title: { line: 'Switch to Line Chart', bar: 'Switch to Bar Chart' } }, |
| restore: { show: true, title: 'Restore Image' }, |
| saveAsImage: { show: true, title: 'Save as Image' } |
| } |
| }, |
| calculable: true, |
| legend: { |
| data: ['Budget 2011'], |
| itemGap: 5 |
| }, |
| grid: { |
| top: 50, |
| bottom: 50, |
| left: 10, |
| right: 30, |
| containLabel: true |
| }, |
| xAxis: { type: 'category', data: data_keys, show: false }, |
| yAxis: {}, |
| dataZoom: [ |
| { |
| show: true, |
| start: 0, |
| end: 100 |
| }, |
| { |
| type: 'inside', |
| start: 0, |
| end: 100 |
| }, |
| { |
| show: true, |
| yAxisIndex: 0, |
| filterMode: 'empty', |
| width: 20, |
| |
| height: '60%', |
| showDataShadow: false, |
| |
| } |
| ], |
| series: [{ data: data_lists, type: 'bar' }] |
| }; |
| option && myChart.setOption(option); |
| myChart.on('click', function (params) { |
| if (type == "slot") { |
| var detailChart = drawGaugeChart("gauge_chart", slot_dict, params.name, "slot") |
| } else { |
| var detailChart = drawGaugeChart("gauge_chart", intent_dict, params.name, "intent") |
| } |
| |
| }); |
| } |
| var xchart = greatBarChart("intent-pie", intent_dict_list, "intent") |
| var ychart = greatBarChart("slot-pie", slot_dict_list, "slot") |
| function drawGaugeChart(docId, x_dict, x_name, type) { |
| var chartDom = document.getElementById(docId); |
| var data = x_dict[x_name] |
| var total = data[0][1] |
| var error = data[1][1] |
| var option = { |
| series: [{ |
| type: 'gauge', |
| startAngle: 170, |
| endAngle: 10, |
| min: 0, |
| max: 100, |
| pointer: { show: false }, |
| splitLine: { |
| show: false, |
| distance: 0, |
| length: 10 |
| }, |
| axisTick: { show: false }, |
| axisLabel: { |
| show: false, |
| distance: 50 |
| }, |
| detail: { |
| show: false, |
| width: 50, |
| height: 14, |
| fontSize: 14, |
| color: 'inherit', |
| borderColor: 'inherit', |
| borderRadius: 20, |
| borderWidth: 1, |
| formatter: '{value}%' |
| }, |
| itemStyle: { |
| color: 'rgb(128,183,214)', |
| |
| |
| |
| |
| |
| }, |
| progress: { |
| show: true, |
| roundCap: true, |
| width: 18 |
| }, |
| axisLine: { |
| roundCap: true, |
| lineStyle: { width: 18 } |
| }, |
| data: [100.0 * error / total] |
| }] |
| }; |
| var myChart = echarts.init(chartDom); |
| option && myChart.setOption(option); |
| var element = document.getElementById("card-statistics"); |
| var html_txt = `` |
| html_txt += '<div style="margin: 0px 10px 10px 10px;"><b>' + Math.round(100.0 * error / total * 10) / 10 + '%</b> of <b>' + x_name + '</b> labels are predicted incorrectly. They are predicted as: </div>'; |
| for (var i = 2; i < data.length; i++) { |
| ratio = Math.round(100.0 * data[i][1] / error * 10) / 10 |
| html_txt += `<div style="margin: 0px 10px 0px 10px;"> |
| <div style="width:15%; height:12px; background-color:rgb(234, 235, 235);border-radius: 6px; display: inline-block;"> |
| <div style="width:` |
| + (ratio) + `%; height:12px; background-color:rgb(128,183,214);border-radius: 6px; display: inline-block;"></div> |
| </div> |
| <div style="width: 63%;margin-left: 12px;display: inline-block;">` |
| + data[i][0] + |
| `</div> |
| <div style="width:15%; display: inline-block;text-align: right;">` |
| + ratio + |
| `%</div></div>`; |
| } |
| element.innerHTML = html_txt; |
| var title = document.getElementById("card-title"); |
| title.innerHTML = "<b>Error ratio for " + type + " '" + x_name + "'</b>" |
| } |
| var detailChart = drawGaugeChart("gauge_chart", slot_dict, slot_dict_list[0].name, "slot") |
| </script> |
| </div> |
| </div> |
| <div class="col-md-12 col-sm-12" style="margin: -30px 10px 10px 10px; padding: 0px 40px 0px 40px;"> |
| <div style="font-size: larger;margin-bottom: 10px;"><b>Instance Analysis</b> |
| <hr /> |
| </div> |
| {% for example in examples %} |
| <b>Intent:</b> |
| {% for e in example["intent"] %} |
| {% if e["intent"] == e["pred_intent"] %} |
|
|
| <button type="button" class="btn btn-white"> |
| <span class="badge text-dark btn-light">{{e["pred_intent"]}}</span> |
| </button> |
| {% else %} |
| <button type="button" class="btn btn-light" data-bs-trigger="hover" data-bs-toggle="popover" |
| data-bs-placement="left" data-bs-content=" |
| <b>Golden Intent: </b> |
| <span class='badge text-dark btn-light' style='background-color: #e6e6e6;'> |
| {{e['intent']}} |
| </span>"> |
| <span class="badge" |
| style="background-color: rgb(246,123,74);color: rgb(255, 255, 255);">{{e["pred_intent"]}}</span> |
| </button> |
| {% endif %} |
| {% endfor %} |
|
|
| <br /> |
| <b>Slot:</b> |
| {% for e in example["slot"] %} |
| {% if e["slot"] == e["pred_slot"] %} |
|
|
| <button type="button" class="btn btn-white"> |
| {{e["text"]}} <span class="badge text-dark" style="background-color: rgb(255, 255, 255); |
| color: rgb(62 62 62); |
| box-shadow: 2px 2px 7px 1px rgba(210, 210, 210, 0.42);">{{e["pred_slot"]}}</span> |
| </button> |
| {% else %} |
| <button type="button" class="btn btn-light" data-bs-trigger="hover" data-bs-toggle="popover" |
| data-bs-placement="left" data-bs-content=" |
| <b>Golden Slot: </b> |
| <span class='rcorners2 badge text-dark btn-light'> |
| {{e['slot']}} |
| </span>"> |
| {{e["text"]}} <span class="badge" style="background-color: rgb(246,123,74); |
| color: rgb(255, 255, 255); |
| ">{{e["pred_slot"]}}</span> |
| </button> |
| {% endif %} |
| {% endfor %} |
| <hr /><br /> |
| {% endfor %} |
| <div class="row"> |
| <div class="col"><button type="button" class="btn btn-outline-light text-dark" |
| style="box-shadow: 2px 2px 7px 1px rgba(210, 210, 210, 0.42);" onclick="jump('/?page={{page - 1}}')">← Last |
| Page</button></div> |
| <div class="col" style="justify-content: center;display: flex;align-content: center;align-items: center;"> |
| <div class="row" style="width: 230px;"> |
| <div class="col" style="display: flex; align-items: center;">Page Index:</div> |
| <div class="col"> |
| <div class="input-group"> |
| <input type="text" class="form-control" id="inputs" value="{{page}}"> |
| </div> |
| </div> |
| </div> |
|
|
|
|
| </div> |
| <script> |
| var inputDom = document.getElementById('inputs'); |
| inputDom.onblur = function () { |
| var n = Number(inputDom.value); |
| if (!isNaN(n)){ |
| window.location.href = '/?page=' + inputDom.value; |
| } |
| |
| }; |
| function jump(url){ window.location.href=url;} |
| </script> |
| <div class="col" style="display: flex; justify-content: flex-end; padding-right: 40px;"><button |
| type="button" class="btn btn-outline-light text-dark" |
| style="box-shadow: 2px 2px 7px 1px rgba(210, 210, 210, 0.42);" onclick="jump('/?page={{page + 1}}')">Next |
| Page →</button></div> |
| </div> |
|
|
|
|
| </div> |
| </div> |
|
|
| </body> |
| <script> |
| var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]')) |
| var popoverList = popoverTriggerList.map(function (popoverTriggerEl) { |
| return new bootstrap.Popover(popoverTriggerEl, { |
| "html": true, |
| "placement": "bottom" |
| }) |
| }); |
| </script> |
|
|
| </html> |
