Skip to content

Commit

Permalink
Demo: done
Browse files Browse the repository at this point in the history
  • Loading branch information
@AndyChiangSH
AndyChiangSH committed Jul 21, 2024
1 parent 593f629 commit 5d31e67
Show file tree
Hide file tree
Showing 49 changed files with 210 additions and 39 deletions.
Binary file added demo/image/badge_1.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added demo/image/badge_2.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added demo/image/badge_3.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added demo/image/favicon_io.zip
View file
Binary file not shown.
Binary file added demo/image/favicon_io/android-chrome-192x192.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added demo/image/favicon_io/android-chrome-512x512.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added demo/image/favicon_io/apple-touch-icon.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added demo/image/favicon_io/favicon-16x16.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added demo/image/favicon_io/favicon-32x32.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added demo/image/favicon_io/favicon.ico
View file
Binary file not shown.
1 change: 1 addition & 0 deletions demo/image/favicon_io/site.webmanifest
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}
93 changes: 58 additions & 35 deletions demo/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,36 +4,37 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BADGE</title>
<link rel="icon" href="image/favicon_io/favicon.ico" type="image/x-icon">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css">
</head>
<body>
<div class="container">
<div class="my-5">
<h1 class="text-center">BADGE: BADminton report Generation and Evaluation with LLM</h1>
<p class="text-center">This demo website showcases our paper, "BADGE: BADminton report Generation and Evaluation with LLM," presented at the
IJCAI 2024 Workshop IT4PSS.</p>
<h1 class="text-center">🎖 BADGE: BADminton report Generation and Evaluation with LLM</h1>
<p class="text-center">This demo website showcases our paper, "<a href="https://arxiv.org/abs/2406.18116" target="_blank">BADGE: BADminton report Generation and Evaluation with LLM</a>," presented at the
<a href="https://wasn.csie.ncu.edu.tw/workshop/IT4PSS2024.html" target="_blank">IJCAI 2024 Workshop IT4PSS</a>.</p>
</div>
<hr class="my-5">
<div id="data" class="my-5">
<hr class="my-5">
<h5>Data</h5>
<div class="my-3">
<label for="game" class="form-label">Game</label>
<select id="game" class="form-select" aria-label="game">
<select id="game" class="form-select data_select" aria-label="game">
<option value="Kento_MOMOTA_CHOU_Tien_Chen_Denmark_Open_2018_Finals" selected>Denmark Open 2018 Finals: Kento MOMOTA v.s. CHOU Tien Chen</option>
</select>
</div>
<div class="my-3">
<label for="input_data_type" class="form-label">Input Data Type</label>
<select id="input_data_type" class="form-select" aria-label="input_data_type">
<select id="input_data_type" class="form-select data_select" aria-label="input_data_type">
<option value="CSV" selected>CSV</option>
<option value="QA">QA</option>
</select>
</div>
<div class="my-3">
<label for="in_context_learning" class="form-label">In-Context Learning</label>
<select id="in_context_learning" class="form-select" aria-label="in_context_learning">
<select id="in_context_learning" class="form-select data_select" aria-label="in_context_learning">
<option value="zero-shot" selected>Zero-shot</option>
<option value="one-shot">One-shot</option>
<option value="few-shot">Few-shot</option>
Expand All @@ -42,107 +43,129 @@ <h5>Data</h5>
</div>
<div class="my-3">
<label for="large_language_models" class="form-label">Large Language Models</label>
<select id="large_language_models" class="form-select" aria-label="large_language_models">
<select id="large_language_models" class="form-select data_select" aria-label="large_language_models">
<option value="GPT-3.5" selected>GPT-3.5</option>
<option value="GPT-4">GPT-4</option>
</select>
</div>
<div class="my-3">
<div class="accordion" id="accordion_prompt_1">
<div class="accordion" id="accordion_generate_prompt">
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#prompt_1"
aria-expanded="true" aria-controls="prompt_1">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#generate_prompt"
aria-expanded="true" aria-controls="generate_prompt">
Prompt
</button>
</h2>
<div id="prompt_1" class="accordion-collapse collapse" data-bs-parent="#accordion_prompt_1">
<div id="generate_prompt" class="accordion-collapse collapse" data-bs-parent="#accordion_generate_prompt">
<div class="accordion-body">
<p id="prompt_1_text">...</p>
<pre id="generate_prompt_text">...</pre>
</div>
</div>
</div>
</div>
</div>
<div class="my-3 d-grid">
<button id="generate" class="btn btn-success" type="button">Generate</button>
<div id="generating" class="text-center">
<div class="spinner-border text-success" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
</div>
</div>
<hr class="my-5">
<div id="report" class="my-5">
<hr class="my-5">
<div class="card">
<div class="card-body">
<div class="d-flex justify-content-between align-items-center flex-wrap mb-3">
<h5 class="card-title">Report</h5>
<div class="d-flex">
<button id="copy-to-clipboard" class="btn btn-secondary me-2">
<button id="copy_report" class="btn btn-secondary me-2">
<i class="bi bi-clipboard"></i>
</button>
<a id="download-txt" class="btn btn-secondary">
<a id="download_report" class="btn btn-secondary">
<i class="bi bi-download"></i>
</a>
</div>
</div>
<p id="report_text" class="card-text">
...
</p>
<pre id="report_text" class="card-text">...</pre>
</div>
</div>
<div class="my-3">
<label for="evaluation_criteria" class="form-label">Evaluation Criteria</label>
<select id="evaluation_criteria" class="form-select" aria-label="evaluation_criteria">
<option value="Coherence" selected>Coherence</option>
<option value="Consistency">Consistency</option>
<option value="Excitement">Excitement</option>
<option value="Fluency">Fluency</option>
<select id="evaluation_criteria" class="form-select report_select" aria-label="evaluation_criteria">
<option value="coherence" selected>Coherence</option>
<option value="consistency">Consistency</option>
<option value="excitement">Excitement</option>
<option value="fluency">Fluency</option>
</select>
</div>
<div class="my-3">
<div class="accordion" id="accordion_prompt_2">
<div class="accordion" id="accordion_evaluate_prompt">
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#prompt_2"
aria-expanded="true" aria-controls="prompt_2">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#evaluate_prompt"
aria-expanded="true" aria-controls="evaluate_prompt">
Prompt
</button>
</h2>
<div id="prompt_2" class="accordion-collapse collapse" data-bs-parent="#accordion_prompt_2">
<div id="evaluate_prompt" class="accordion-collapse collapse" data-bs-parent="#accordion_evaluate_prompt">
<div class="accordion-body">
<p id="prompt_2_text">...</p>
<pre id="evaluate_prompt_text">...</pre>
</div>
</div>
</div>
</div>
</div>
<div class="my-3 d-grid">
<button id="evaluate" class="btn btn-primary" type="button">Evaluate</button>
<div id="evaluating" class="text-center">
<div class="spinner-border text-primary" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
</div>
</div>
<hr class="my-5">
<div id="score" class="my-5">
<hr class="my-5">
<div class="card">
<div class="card-body">
<div class="d-flex justify-content-between align-items-center flex-wrap mb-3">
<h5 class="card-title">Score</h5>
<div class="d-flex">
<button id="copy-to-clipboard" class="btn btn-secondary me-2">
<button id="copy_score" class="btn btn-secondary me-2">
<i class="bi bi-clipboard"></i>
</button>
<a id="download-txt" class="btn btn-secondary">
<a id="download_score" class="btn btn-secondary">
<i class="bi bi-download"></i>
</a>
</div>
</div>
<p id="score_text" class="card-text">
...
</p>
<pre id="score_text" class="card-text">...</pre>
</div>
</div>
</div>
<div id="footer" class="my-5 text-center">
<hr class="my-5">
<div class="d-flex justify-content-center my-2">
<a class="mx-2" href="https://github.com/AndyChiangSH/BADGE" target="_blank">
<img alt="GitHub Repo stars" src="https://img.shields.io/github/stars/AndyChiangSH/BADGE?style=social">
</a>
<a class="mx-2" href="https://github.com/AndyChiangSH/BADGE" target="_blank">
<img src="https://hits.seeyoufarm.com/api/count/incr/badge.svg?url=https%3A%2F%2Fgithub.com%2FAndyChiangSH%2FBADGE%2F&count_bg=%23FFBB00&title_bg=%23555555&icon=&icon_color=%23E7E7E7&title=Today+%2F+Total&edge_flat=false" />
</a>
</div>
<small class="text-muted">Last update: 2024/07/21</small><br>
<small class="text-muted">Copyright © 2024 <a href="https://andychiangsh.github.io/AndyChiangSH/" target="_blank">Andy Chiang</a></small>
</div>
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"
integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
<script src="script.js"></script>
</body>
</html>
147 changes: 147 additions & 0 deletions demo/script.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,147 @@
$(function () {
init();

function init() {
$('#data').show();
$('#report').hide();
$('#score').hide();
$('#generate').show();
$('#generating').hide();
$('.data_select').change(generate_prompt);
generate_prompt();
$('#evaluate').show();
$('#evaluating').hide();
}

function generate_prompt() {
let game = $("#game").val();
let input_data_type = $("#input_data_type").val();
let in_context_learning = $("#in_context_learning").val();
let large_language_models = $("#large_language_models").val();

// console.log(game, input_data_type, in_context_learning, large_language_models);

let prompt_path = "../prompt/generation/" + input_data_type + "+" + in_context_learning + ".txt"
$.get(prompt_path, function (prompt) {
let data_path = "../" + input_data_type + "/" + game + "/" + input_data_type + ".txt";
$.get(data_path, function (data) {
prompt = prompt.replace("{" + input_data_type + "}", data)
// console.log("prompt:", prompt);
$('#generate_prompt_text').text(prompt);
});
});
}

$('#generate').click(generate);

function generate() {
$('#data').show();
$('#report').hide();
$('#score').hide();
$('#generate').hide();
$('#generating').show();

setTimeout(function () {
$('#data').show();
$('#report').show();
$('#score').hide();
$('#generate').show();
$('#generating').hide();

let game = $("#game").val();
let input_data_type = $("#input_data_type").val();
let in_context_learning = $("#in_context_learning").val();
let large_language_models = $("#large_language_models").val();

let report_path = "../generation/" + game + "/" + large_language_models + "/" + input_data_type + "+" + in_context_learning + ".txt"
// console.log("report_path:", report_path);
$.get(report_path, function (report) {
// console.log("report:", report);
$('#report_text').text(report);
$('.report_select').change(evaluate_prompt);
evaluate_prompt();
});
}, 1000 + get_random_int(0, 1000));
}

function evaluate_prompt() {
let evaluation_criteria = $("#evaluation_criteria").val();
let report = $('#report_text').text();

// console.log(evaluation_criteria, report);

let prompt_path = "../prompt/evaluation/" + evaluation_criteria + ".txt";
$.get(prompt_path, function (prompt) {
prompt = prompt.replace("{Badminton Report}", report)
// console.log("prompt:", prompt);
$('#evaluate_prompt_text').text(prompt);
});
}

$('#evaluate').click(evaluate);

function evaluate() {
$('#data').show();
$('#report').show();
$('#score').hide();
$('#evaluate').hide();
$('#evaluating').show();

setTimeout(function () {
$('#data').show();
$('#report').show();
$('#score').show();
$('#evaluate').show();
$('#evaluating').hide();

let game = $("#game").val();
let input_data_type = $("#input_data_type").val();
let in_context_learning = $("#in_context_learning").val();
let large_language_models = $("#large_language_models").val();
let evaluation_criteria = $("#evaluation_criteria").val();

let score_path = "../evaluation/" + game + "/" + large_language_models + "/" + input_data_type + "+" + in_context_learning + ".txt/" + evaluation_criteria + ".txt"
// console.log("score_path:", score_path);
$.get(score_path, function (score) {
// console.log("score:", score);
$('#score_text').text(score);
});
}, 1000 + get_random_int(0, 1000));
}

$("#copy_report").click(function () {
let report = $('#report_text').text();
navigator.clipboard.writeText(report).then(function () {
alert("Copy to clipboard successful.");
}, function (err) {
alert("Copy to clipboard fail!");
});
})

$("#download_report").click(function () {
let report = $('#report_text').text();
this.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(report));
this.setAttribute('download', "report.txt");
})

$("#copy_score").click(function () {
let score = $('#score_text').text();
navigator.clipboard.writeText(score).then(function () {
alert("Copy to clipboard successful.");
}, function (err) {
alert("Copy to clipboard fail!");
});
})

$("#download_score").click(function () {
let score = $('#score_text').text();
this.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(score));
this.setAttribute('download', "score.txt");
})

function get_random_int(min, max) {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min + 1)) + min;
}
});
0 ..._Finals/GPT-3.5/csv+CoT.txt/coherence.txt → ..._Finals/GPT-3.5/CSV+CoT.txt/coherence.txt
View file
File renamed without changes.
0 ...inals/GPT-3.5/csv+CoT.txt/consistency.txt → ...inals/GPT-3.5/CSV+CoT.txt/consistency.txt
View file
File renamed without changes.
0 ...Finals/GPT-3.5/csv+CoT.txt/excitement.txt → ...Finals/GPT-3.5/CSV+CoT.txt/excitement.txt
View file
File renamed without changes.
0 ...18_Finals/GPT-3.5/csv+CoT.txt/fluency.txt → ...18_Finals/GPT-3.5/CSV+CoT.txt/fluency.txt
View file
File renamed without changes.
0 ...ls/GPT-3.5/csv+few-shot.txt/coherence.txt → ...ls/GPT-3.5/CSV+few-shot.txt/coherence.txt
View file
File renamed without changes.
0 .../GPT-3.5/csv+few-shot.txt/consistency.txt → .../GPT-3.5/CSV+few-shot.txt/consistency.txt
View file
File renamed without changes.
0 ...s/GPT-3.5/csv+few-shot.txt/excitement.txt → ...s/GPT-3.5/CSV+few-shot.txt/excitement.txt
View file
File renamed without changes.
0 ...nals/GPT-3.5/csv+few-shot.txt/fluency.txt → ...nals/GPT-3.5/CSV+few-shot.txt/fluency.txt
View file
File renamed without changes.
0 ...ls/GPT-3.5/csv+one-shot.txt/coherence.txt → ...ls/GPT-3.5/CSV+one-shot.txt/coherence.txt
View file
File renamed without changes.
0 .../GPT-3.5/csv+one-shot.txt/consistency.txt → .../GPT-3.5/CSV+one-shot.txt/consistency.txt
View file
File renamed without changes.
0 ...s/GPT-3.5/csv+one-shot.txt/excitement.txt → ...s/GPT-3.5/CSV+one-shot.txt/excitement.txt
View file
File renamed without changes.
0 ...nals/GPT-3.5/csv+one-shot.txt/fluency.txt → ...nals/GPT-3.5/CSV+one-shot.txt/fluency.txt
View file
File renamed without changes.
0 ...s/GPT-3.5/csv+zero-shot.txt/coherence.txt → ...s/GPT-3.5/CSV+zero-shot.txt/coherence.txt
View file
File renamed without changes.
0 ...GPT-3.5/csv+zero-shot.txt/consistency.txt → ...GPT-3.5/CSV+zero-shot.txt/consistency.txt
View file
File renamed without changes.
0 .../GPT-3.5/csv+zero-shot.txt/excitement.txt → .../GPT-3.5/CSV+zero-shot.txt/excitement.txt
View file
File renamed without changes.
0 ...als/GPT-3.5/csv+zero-shot.txt/fluency.txt → ...als/GPT-3.5/CSV+zero-shot.txt/fluency.txt
View file
File renamed without changes.
0 ...18_Finals/GPT-4/csv+CoT.txt/coherence.txt → ...18_Finals/GPT-4/CSV+CoT.txt/coherence.txt
View file
File renamed without changes.
0 ..._Finals/GPT-4/csv+CoT.txt/consistency.txt → ..._Finals/GPT-4/CSV+CoT.txt/consistency.txt
View file
File renamed without changes.
0 ...8_Finals/GPT-4/csv+CoT.txt/excitement.txt → ...8_Finals/GPT-4/CSV+CoT.txt/excitement.txt
View file
File renamed without changes.
0 ...2018_Finals/GPT-4/csv+CoT.txt/fluency.txt → ...2018_Finals/GPT-4/CSV+CoT.txt/fluency.txt
View file
File renamed without changes.
0 ...nals/GPT-4/csv+few-shot.txt/coherence.txt → ...nals/GPT-4/CSV+few-shot.txt/coherence.txt
View file
File renamed without changes.
0 ...ls/GPT-4/csv+few-shot.txt/consistency.txt → ...ls/GPT-4/CSV+few-shot.txt/consistency.txt
View file
File renamed without changes.
0 ...als/GPT-4/csv+few-shot.txt/excitement.txt → ...als/GPT-4/CSV+few-shot.txt/excitement.txt
View file
File renamed without changes.
0 ...Finals/GPT-4/csv+few-shot.txt/fluency.txt → ...Finals/GPT-4/CSV+few-shot.txt/fluency.txt
View file
File renamed without changes.
0 ...nals/GPT-4/csv+one-shot.txt/coherence.txt → ...nals/GPT-4/CSV+one-shot.txt/coherence.txt
View file
File renamed without changes.
0 ...ls/GPT-4/csv+one-shot.txt/consistency.txt → ...ls/GPT-4/CSV+one-shot.txt/consistency.txt
View file
File renamed without changes.
0 ...als/GPT-4/csv+one-shot.txt/excitement.txt → ...als/GPT-4/CSV+one-shot.txt/excitement.txt
View file
File renamed without changes.
0 ...Finals/GPT-4/csv+one-shot.txt/fluency.txt → ...Finals/GPT-4/CSV+one-shot.txt/fluency.txt
View file
File renamed without changes.
0 ...als/GPT-4/csv+zero-shot.txt/coherence.txt → ...als/GPT-4/CSV+zero-shot.txt/coherence.txt
View file
File renamed without changes.
0 ...s/GPT-4/csv+zero-shot.txt/consistency.txt → ...s/GPT-4/CSV+zero-shot.txt/consistency.txt
View file
File renamed without changes.
0 ...ls/GPT-4/csv+zero-shot.txt/excitement.txt → ...ls/GPT-4/CSV+zero-shot.txt/excitement.txt
View file
File renamed without changes.
0 ...inals/GPT-4/csv+zero-shot.txt/fluency.txt → ...inals/GPT-4/CSV+zero-shot.txt/fluency.txt
View file
File renamed without changes.
2 changes: 1 addition & 1 deletion prompt/generation/CSV+CoT.txt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ Let's think step by step:
3. Check the accuracy, wonderfulness, coherence, consistency and fluency of your report.
4. Rewrite and improve the report

csv table:
CSV table:
{CSV}

Report:
2 changes: 1 addition & 1 deletion prompt/generation/CSV+few-shot.txt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ Viktor Axelsen has recovered fully after undergoing ankle surgery last year. Sta

He can struggle a bit when he is forced to retrieve regularly or when he plays around the net a lot. But the World number 4, Axelsen can run away with the game if he takes the early charge on by playing aggressively from the frontcourt. His speed and agility are close to none when he is in full flow.

csv table:
CSV table:
{CSV}

Report:
2 changes: 1 addition & 1 deletion prompt/generation/CSV+one-shot.txt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ The Thai is used to dominating the net, but today An got the shuttle to tumble o
“It was good in the beginning, but after that I could only follow her game,” Intanon said. “She played at a slower pace and controlled everything. She always made me play her game. That’s not in my nature and I could not control the shuttle.
“Today she played the net better than me, and I could only push and she was already ready for the next shot.”

csv table:
CSV table:
{CSV}

Report:
2 changes: 1 addition & 1 deletion prompt/generation/CSV+zero-shot.txt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ I will give you the csv table of a badminton game.
Please follow the csv table and write a report for this badminton game.
Only write a report based on the csv table provided!

csv table:
CSV table:
{CSV}

Report:

0 comments on commit 5d31e67

Please sign in to comment.