gpt2-app / app /chatbot.html
cahya's picture
embed js and css in to chatbot.html
9749435
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
<title>Indonesian GPT2 Chatbot</title>
<link rel="stylesheet" href="css/main.css">
<script src="js/main.js"></script>
</head>
<body onload="pageSetup();">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>
<div class="buttons" style="display: none">
<div class="minus button">-</div>
<div class="value">?</div>
<div class="plus button">+</div>
</div>
<div class="state" style="display: none">
<span class="users"></span>
</div>
<div class="container">
<div class="chat-container">
<div class="chat-messages">
<div class="messages">
</div>
</div>
</div>
<div class="chat-input input-group mb-3">
<input type="text" class="form-control user-input" placeholder="Type a message..." aria-label="User message" aria-describedby="basic-addon2">
<span class="input-group-text btn btn-primary user-input-button" id="basic-addon2">Send</span>
</div>
<!--
<div class="chat-suggestion">
Suggestion: <span class="js-loading">Loading…</span> <a class="js-suggestion hide">Kenapa kamu sedih?</a>
</div>
-->
<div class="server-message">
<span class="server-message-value"></span>
</div>
<div class="accordion" id="accordionExample">
<div class="accordion-item">
<h2 class="accordion-header" id="headingOne">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Bots Personalities
</button>
</h2>
<div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
<form class="bot-personality">
<div class="mb-3">
<div class="row g-2 align-items-center">
<div class="col-auto">
<label for="inputPersonality1" class="col-form-label">Personality 1:</label>
</div>
<div class="col-auto">
<input type="text" class="form-control" id="inputPersonality1">
</div>
</div>
<div class="row g-2 align-items-center">
<div class="col-auto">
<label for="inputPersonality2" class="col-form-label">Personality 2:</label>
</div>
<div class="col-auto">
<input type="text" class="form-control" id="inputPersonality2">
</div>
</div>
<div class="row g-2 align-items-center">
<div class="col-auto">
<label for="inputPersonality3" class="col-form-label">Personality 3:</label>
</div>
<div class="col-auto">
<input type="text" class="form-control" id="inputPersonality3">
</div>
</div>
<div class="row g-2 align-items-center">
<div class="col-auto">
<label for="inputPersonality4" class="col-form-label">Personality 4:</label>
</div>
<div class="col-auto">
<input type="text" class="form-control" id="inputPersonality4">
</div>
</div>
<div class="row g-2 align-items-center">
<div class="col-auto">
<label for="inputPersonality5" class="col-form-label">Personality 5:</label>
</div>
<div class="col-auto">
<input type="text" class="form-control" id="inputPersonality5">
</div>
</div>
</div>
<button id="updatePersonality" class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
Update Personality
</button>
</form>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingThree">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
Parameters
</button>
</h2>
<div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
<div class="chat-parameter card card-body">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="doSample" checked>
<label class="form-check-label" for="doSample">
Do Sample
</label>
</div>
<label for="minLength" class="form-label">Minimal Length: <span id="minLengthValue">1</span></label>
<input type="range" class="form-range" min="1" max="10" value="1" id="minLength" onmousemove="updateValue('minLengthValue', this.value);">
<label for="maxLength" class="form-label">Maximal Length: <span id="maxLengthValue">20</span></label>
<input type="range" class="form-range" min="20" max="50" value="20" id="maxLength" onmousemove="updateValue('maxLengthValue', this.value);">
<label for="temperature" class="form-label">Temperature: <span id="temperatureValue">0.7</span></label>
<input type="range" class="form-range" min="0.5" max="10" value="0.7" step="0.1" id="temperature" onmousemove="updateValue('temperatureValue', this.value);">
<label for="topK" class="form-label">Top k: <span id="topKValue">0</span></label>
<input type="range" class="form-range" min="0" max="50" value="0" id="topK" onmousemove="updateValue('topKValue', this.value);">
<label for="topP" class="form-label">Top p: <span id="topPValue">0.9</span></label>
<input type="range" class="form-range" min="0.1" max="1.0" value="0.9" step="0.01" id="topP" onmousemove="updateValue('topPValue', this.value);">
</div>
</div>
</div>
</div>
</div>
</body>
</html>