Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>DS1-App</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> | |
| ; | |
| 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) { | |
| $("#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) | |
| } | |
| //console.log($("#prompt-input").val()) | |
| $("#AppTitle").val("Pesanan") | |
| }; | |
| 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 | |
| $("#AppTitle").val("-") | |
| }; | |
| 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, | |
| '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/[email protected]/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">Tanya Pesanan</h1> | |
| <p>Ucapkan: pesanan * | tanya * (masuk/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> | |
| <!-- | |
| <button class="open-button" onclick="openForm()">Open Form</button> | |
| <div class="form-popup" id="myForm"> | |
| <form action="" class="form-container"> | |
| <h3>Pesanan</h3> | |
| <table> | |
| <tr> | |
| <td><label for="ds_salesOrderId"><b>SO#</b></label><input type="text" placeholder="SO#" name="ds_salesOrderId" required></td> | |
| <td><label for="ds_salesDate"><b>Date</b></label><input type="text" placeholder="Date" name="ds_salesDate" required></td> | |
| </tr> | |
| </table> | |
| <label for="ds_customerName"><b></b></label><input type="text" placeholder="Cust" name="ds_customerName" required> | |
| <label for="ds_customerAddress"><b></b></label><input type="text" placeholder="Addr" name="ds_customerAddress" required> | |
| <table> | |
| <tr><th>Prod</th><th>Qty</th><th>Prc</th><th>Rp</th></tr> | |
| <tr> | |
| <td><input type="text" placeholder="-" name="ds_productName1"></td> | |
| <td><input type="text" placeholder="0" name="ds_quantity1"></td> | |
| <td><input type="text" placeholder="0" name="ds_unitPrice1"></td> | |
| <td><input type="text" placeholder="0" name="ds_itemAmt1"></td> | |
| </tr> | |
| <tr> | |
| <td><input type="text" placeholder="-" name="ds_productName2"></td> | |
| <td><input type="text" placeholder="0" name="ds_quantity2"></td> | |
| <td><input type="text" placeholder="0" name="ds_unitPrice2"></td> | |
| <td><input type="text" placeholder="0" name="ds_itemAmt2"></td> | |
| </tr> | |
| <tr> | |
| <td><input type="text" placeholder="-" name="ds_productName3"></td> | |
| <td><input type="text" placeholder="0" name="ds_quantity3"></td> | |
| <td><input type="text" placeholder="0" name="ds_unitPrice3"></td> | |
| <td><input type="text" placeholder="0" name="ds_itemAmt3"></td> | |
| </tr> | |
| </table> | |
| <table> | |
| <tr> | |
| <td><label for="ds_shippingCost"><b>Ongkir</b></label><input type="text" placeholder="Ongkir" name="ds_shippingCost" required></td> | |
| <td><label for="ds_totalAmount"><b>Total</b></label><input type="text" placeholder="Total" name="ds_totalAmount" required></td> | |
| </tr> | |
| </table> | |
| <button type="submit" class="btn">Submit</button> | |
| <button type="button" class="btn cancel" onclick="closeForm()">Close</button> | |
| </form> | |
| </div> | |
| --> | |
| </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> | |