<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>LLM Clinical Data</title>
<script src="//cdnjs.cloudflare.com/ajax/libs/annyang/2.6.1/annyang.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
"use strict";
var mode_pesanan = false;
var mode_tanya = false;
var bicara=annyang
// first we make sure annyang started succesfully
if (bicara) {
// define the functions our commands will run.
var hello = function(text) {
$("#prompt-input").slideDown("slow");
scrollTo("#prompt-input");
if (mode_tanya==false) {
$("#prompt-input").val(""+text)
mode_tanya = true
} else {
let prev= $("#prompt-input").val()
$("#prompt-input").val(prev+" "+text)
}
//console.log($("#prompt-input").val())
$("#AppTitle").val("Tanya")
};
var pesanan = function(text) {
console.log("|"+text+"|")
if (text=="lanjut" || text=="masuk") {
submitButton();
} else {
$("#prompt-input").slideDown("slow");
scrollTo("#prompt-input");
if (mode_pesanan==false) {
$("#prompt-input").val("@ "+text)
mode_pesanan = true
} else {
let prev= $("#prompt-input").val()
$("#prompt-input").val(prev+" "+text)
}
}
};
var warna = function() {
$("#warna").slideDown("slow");
scrollTo("#section_warna");
};
var warna_minuman = function() {
$("#warna_minuman").slideDown("slow");
scrollTo("#section_warna_minuman");
};
var rasa = function() {
$("#rasa").slideDown("slow");
scrollTo("#section_rasa");
};
var aroma = function() {
$("#aroma").slideDown("slow");
scrollTo("#section_aroma");
};
var tutup = function() {
$("#hello1").hide();
$("#section_hello").hide();
$("#section_warna").hide();
$("#section_rasa").hide();
$("#section_aroma").hide();
scrollTo("#section_hello");
};
var submitButton = function() {
$("#button-input").slideDown("slow");
scrollTo("#button-input");
$("#button-input").click()
console.log("LANJUT")
mode_pesanan = false
mode_tanya = false
};
var getStarted = function() {
window.location.href = 'https://arafaasia.com';
}
// define our commands.
// * The key is the phrase you want your users to say.
// * The value is the action to do.
// You can pass a function, a function name (as a string), or write your function as part of the commands object.
var commands = {
'halo *teman': hello,
'tanya *teman': hello,
'pesanan *teman': pesanan,
'*teman': pesanan,
'lanjut': submitButton,
'masuk': submitButton,
};
// OPTIONAL: activate debug mode for detailed logging in the console
bicara.debug();
bicara.addCommands(commands);
bicara.setLanguage('id-ID'); // en
// Start listening. You can call this here, or attach this call to an event, button, etc.
bicara.start();
} else {
$(document).ready(function() {
$('#unsupported').fadeIn('fast');
});
}
var scrollTo = function(identifier, speed=1000) {
//console.log(identifier, speed)
$(identifier).show();
$('html, body').animate({
// scrollTop: $(identifier).offset().top
}, speed || 1000);
}
</script>
<style>
.table {
display:table;
height:100%;
border:1px solid #000;
}
.row2 {
display:table-row;
height:100%;
}
.cell1, .cell2, .cell3 {
display:table-cell;
width:33%;
height:auto;
border:1px solid #CCC;
}
#section_warna {
background-color: #ADAD03;
color: #fff;
}
#section_rasa {
background-color: #03AD77;
color: #fff;
}
#section_aroma {
background-color: #6503AD;
color: #fff;
}
</style>
<style>
figure {
display: flex inline;
justify-content: space-between;
border: 1px #cccccc solid;
padding: 4px;
margin: auto;
}
figcaption {
background-color: #ADAD03;
color: white;
font-style: italic;
padding: 0px;
text-align: center;
font-size: 14px;
}
.container {
background: white;
margin: 0 auto;
padding: 5%;
width: 90%;
}
.img_ds1 {
width: 80%;
height: auto
horizontal-align: center;
}
.img_ds {
width: 100%;
height: 100%; // auto
vertical-align: middle;
}
.pics_in_a_row {
display: flex;
}
.img1 { flex: 1.5; }
.img2 { flex: 1.5; }
.img3 { flex: 1.5; }
.pics_in_a_row {
margin: 25px 0;
}
.pics_in_a_row > div:not(:last-child) {
margin-right: 2%;
}
</style>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
main {
max-width: 700px;
}
#conversation .user::before {
content: 'Anda: ';
font-weight: bold;
display: block;
}
#conversation .model::before {
content: 'AI: ';
font-weight: bold;
display: block;
}
#spinner {
opacity: 0;
transition: opacity 500ms ease-in;
width: 30px;
height: 30px;
border: 3px solid #222;
border-bottom-color: transparent;
border-radius: 50%;
animation: rotation 1s linear infinite;
}
@keyframes rotation {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
#spinner.active {
opacity: 1;
}
</style>
<style>
{box-sizing: border-box;}
/* Button used to open the contact form - fixed at the bottom of the page */
.open-button {
background-color: #555;
color: white;
padding: 10px 10px;
border: none;
cursor: pointer;
opacity: 0.8;
position: fixed;
bottom: 23px;
right: 30%;
width: 280px;
}
/* The popup form - hidden by default */
.form-popup {
display: none;
position: fixed;
bottom: 0;
right: 30%;
border: 3px solid #f1f1f1;
z-index: 9;
}
/* Add styles to the form container */
.form-container {
max-width: 300px;
padding: 10px;
background-color: white;
font-size: 12px;
}
/* Full-width input fields */
.form-container input[type=text], .form-container input[type=password] {
width: 100%;
padding: 2px;
margin: 1px 0 2px 0;
border: none;
background: #f1f1f1;
}
/* When the inputs get focus, do something */
.form-container input[type=text]:focus, .form-container input[type=password]:focus {
background-color: #ddd;
outline: none;
}
/* Set a style for the submit/login button */
.form-container .btn {
background-color: #04AA6D;
color: white;
padding: 10px 10px;
border: none;
cursor: pointer;
width: 100%;
margin-bottom:10px;
opacity: 0.8;
}
/* Add a red background color to the cancel button */
.form-container .cancel {
background-color: red;
}
.form-container .umum {
background-color: grey;
}
/* Add some hover effects to buttons */
.form-container .btn:hover, .open-button:hover {
opacity: 1;
}
</style>
<script>
function openForm() {
document.getElementById("myForm").style.display = "block";
}
function closeForm() {
document.getElementById("myForm").style.display = "none";
}
function closeAiForm(id) {
document.getElementById("myaiForm"+id).style.display = "none";
document.getElementById("myaiForm2"+id).style.display = "block";
}
function openAiForm(id) {
document.getElementById("myaiForm"+id).style.display = "block";
document.getElementById("myaiForm2"+id).style.display = "none";
}
function abcde(id) {
alert("abcde:"+id);
}
</script>
</head>
<body>
<main class="border rounded mx-auto my-5 p-4">
<h1 id="AppTitle">Clinical Data</h1>
<p>Mengubah text tentang konsultasi pasien ke dokter, menjadi JSON atau Form</p>
<p>Ucapkan misalnya "Budiman hari ini konsultasi ke dokter mengeluh sudah batuk selama dua hari dan belum reda batuknya, dia merasa sedikit pusing dan mual", lanjutkan dengan "masuk" atau "lanjut"</p>
<div id="conversation" class="px-2"></div>
<div class="d-flex justify-content-center mb-3">
<div id="spinner"></div>
</div>
<form method="post">
<input id="prompt-input" name="prompt" class="form-control"/>
<div class="d-flex justify-content-end">
<button id="button-input" class="btn btn-primary mt-2">Send</button>
</div>
</form>
<div id="error" class="d-none text-danger">
Erro occurred, check the browser developer console for more information.
</div>
</main>
</body>
</html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/typescript/5.6.3/typescript.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script type="module">
// to let me write TypeScript, without adding the burden of npm we do a dirty, non-production-ready hack
// and transpile the TypeScript code in the browser
// this is (arguably) A neat demo trick, but not suitable for production!
async function loadTs() {
const response = await fetch('/chat_app.ts');
const tsCode = await response.text();
const jsCode = window.ts.transpile(tsCode, { target: "es2015" });
let script = document.createElement('script');
script.type = 'module';
script.text = jsCode;
document.body.appendChild(script);
}
loadTs().catch((e) => {
console.error(e);
document.getElementById('error').classList.remove('d-none');
document.getElementById('spinner').classList.remove('active');
});
</script>