Skip to content

Commit

Permalink
Demo: add index.html
Browse files Browse the repository at this point in the history
  • Loading branch information
AndyChiangSH committed Jul 21, 2024
1 parent 1079d12 commit 593f629
Showing 1 changed file with 148 additions and 0 deletions.
148 changes: 148 additions & 0 deletions demo/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,148 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BADGE</title>
<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>
</div>
<hr class="my-5">
<div id="data" 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">
<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">
<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">
<option value="zero-shot" selected>Zero-shot</option>
<option value="one-shot">One-shot</option>
<option value="few-shot">Few-shot</option>
<option value="CoT">Chain of Thought</option>
</select>
</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">
<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-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">
Prompt
</button>
</h2>
<div id="prompt_1" class="accordion-collapse collapse" data-bs-parent="#accordion_prompt_1">
<div class="accordion-body">
<p id="prompt_1_text">...</p>
</div>
</div>
</div>
</div>
</div>
<div class="my-3 d-grid">
<button id="generate" class="btn btn-success" type="button">Generate</button>
</div>
</div>
<hr class="my-5">
<div id="report" 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">
<i class="bi bi-clipboard"></i>
</button>
<a id="download-txt" class="btn btn-secondary">
<i class="bi bi-download"></i>
</a>
</div>
</div>
<p id="report_text" class="card-text">
...
</p>
</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>
</div>
<div class="my-3">
<div class="accordion" id="accordion_prompt_2">
<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">
Prompt
</button>
</h2>
<div id="prompt_2" class="accordion-collapse collapse" data-bs-parent="#accordion_prompt_2">
<div class="accordion-body">
<p id="prompt_2_text">...</p>
</div>
</div>
</div>
</div>
</div>
<div class="my-3 d-grid">
<button id="evaluate" class="btn btn-primary" type="button">Evaluate</button>
</div>
</div>
<hr class="my-5">
<div id="score" 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">
<i class="bi bi-clipboard"></i>
</button>
<a id="download-txt" class="btn btn-secondary">
<i class="bi bi-download"></i>
</a>
</div>
</div>
<p id="score_text" class="card-text">
...
</p>
</div>
</div>
</div>
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
crossorigin="anonymous"></script>
</body>
</html>

0 comments on commit 593f629

Please sign in to comment.