Menambah AI untuk menghitung dan menjelaskan rumus

Dapatkan penjelasan rumus dengan AI
mininxd · Apr 8, 2024 · 0a3bbc0 · 0a3bbc0
1 parent 0db86cb
commit 0a3bbc0
Show file tree

Hide file tree

Showing 7 changed files with 221 additions and 8 deletions.
diff --git a/ai.js b/ai.js
@@ -0,0 +1,68 @@
+const rumus = document.getElementById("rumusEl");
+let text, prompt;
+
+
+function ganti(str, obj) {
+  for (const x in obj) {
+    str = str.replace(new RegExp(x, 'g'), obj[x]);
+  }
+  return str;
+};
+
+
+
+ function interval(fn, t) {
+    fn();
+    return(setInterval(fn, t));
+}
+
+var i = 0
+function timer() {
+  i++;
+  var time = parseFloat(i/10);
+  $("#timer").html(time + "s");
+}
+setInterval(timer, 100);
+
+function hitung() {
+fetch('https://chat.ai.cneko.org/?t=' + text + '&p=' + prompt).then(res => {return res.json()})
+.then(data => {
+  //console.log(data);
+ const result = ganti( data.response, {
+   '"' : "", '\n': ' <br> ' 
+ });
+
+ $('.loaderWrapper').css("display","none");
+ $('#donate').css("display","flex");
+  $('#resultEl').html('<md-block>' + result + '</md-block>');
+}).catch(e => {
+  //console.log(e);
+  $('.loaderWrapper').css("display","none");
+  $('#resultEl').html('<h2>Failed to Fetch</h2><ul>  <li>Cek kembali jaringan kamu</li> <li>koneksi ke AI gagal</li> <li>coba refresh halaman</li> </ul>');
+});
+}
+
+
+$('.modalClose').on('click', function() {
+   $('.loaderWrapper').css("display","block");
+  $('#resultEl').html('');
+  $('#donate').css("display","none");
+  $('.modal').css('display', 'none');
+});
+
+
+$('.openModal').on('click', function() {
+  if(rumus.textContent.length == 0) {
+    alert("Isi rumus terlebih dahulu");
+  } else {
+  i = 0;
+//fix pertambahan
+const rumusFix = rumus.textContent.replace("+"," add ");
+
+  $('.modal').css('display', 'block');
+  text = "kerjakan matematika saya, bulatkan dan jumlah desimal jika ada, ini rumusnya " + rumusFix + ", dan jelaskan rumus tersebut pakai bahasa indonesia, kalau rumusnya tidak ada kosongkan";
+  prompt = text;
+  hitung();
+  }
+});
+
diff --git a/desktop.css b/desktop.css
@@ -4,12 +4,12 @@ div.desktop-container{
   display: flex;
   flex: center;
   justify-content: center;
-  margin-top: 50%;
+  margin-top: 1em;
 }
 
 div.desktop-wrapper {
   max-width: 375px;
-  height: 575px;
+  height: fit-content;
   background: #222;
   border:2px solid #000;
   padding: 10px;
@@ -44,10 +44,16 @@ div.desktop-button {
   text-align: center;
 }
 
-
+div.modalWrapper {
+  width: 50%;
+  height: 100%;
+}
 p.footer {
-   transform: translateY(-3em);
+   transform: translateY(0);
    color: #fff;
+   padding: 0;
  }
-
+.tag {
+  display: none;
+}
 }
diff --git a/index.html b/index.html
@@ -1,6 +1,7 @@
 <head>
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <script type="module" src="./script.js"></script>
+  <script type="module" src="https://md-block.verou.me/md-block.js"></script>
   <script type="module" src="./keyboard.js"></script>
   <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
  <link rel="stylesheet" href="./style.css">
@@ -55,12 +56,39 @@
     <div id="jumlahEl" class="btn jumlah">=</div>
     </div>
 
+<div class="openModal">
+hitung rumus dengan AI <span class="tag">Baru</span>
+</div>
+
+  <p class="footer">mininxd</p>
  </div>
 
   </div>
 
 </div>
 </div>
+
+
+
+  <div class="modal">
+    <div class="modalClose"></div>
+  <div class="modalWrapper">
+<span id="resultEl"></span>
+    <div class="loaderWrapper">
+<div id="loader" class="loader"></div>
+<p>AI sedang berpikir... <span id="timer">0.0s</span></p>
+    </div>
+
+  <div style="text-align:center; padding-bottom:1;0px; position:relative; top:10%">
+    <md-block id="donate" style="display:none; justify-content:center">
+    [![source - github](https://img.shields.io/badge/source-github-2a2a2a?style=for-the-badge&logo=github)](https://github.com/MininxD/kalkulator-web)
+    [![donate - saweria](https://img.shields.io/badge/donate-saweria-orange?style=for-the-badge)](https://saweria.co/mininxd)
+  </md-block>
+  <span class="info">// Tekan sisi gelap untuk tutup pop-up</span>
+  </div>
+
+
+  </div>
+  </div>
 
-  <p class="footer">mininxd</p>
 </body>
diff --git a/loader.css b/loader.css
@@ -0,0 +1,33 @@
+/* HTML: <div class="loader"></div> */
+.loader {
+  --s: 25px;
+
+  --_d: calc(0.353*var(--s));
+  width: calc(var(--s) + var(--_d));
+  aspect-ratio: 1;
+  display: grid;
+}
+.loader:before,
+.loader:after {
+  content:"";
+  clip-path:polygon(var(--_d) 0,100% 0,100% calc(100% - var(--_d)),calc(100% - var(--_d)) 100%,0 100%,0 var(--_d));
+  background:
+    conic-gradient(from -90deg at var(--s) var(--_d),
+     #fff 135deg,#888 0 270deg,#D2E2FC 0);
+  animation: l4 1.2s infinite;
+}
+.loader:before {
+  z-index: 1;
+  margin-bottom: calc(var(--_d)/-2 - 1px);
+}
+.loader:after {
+  margin-top: calc(var(--_d)/-2 - 1px);
+  animation-delay: 0.6s
+}
+@keyframes l4{
+  0%     {transform: translate(0)}
+  16.67% {transform: translate(-10px)}
+  33.33% {transform: translate(10px)}
+  50%,
+  100%   {transform: translate(0)}
+}
diff --git a/modal.css b/modal.css
@@ -0,0 +1,67 @@
+div.openModal {
+  position: relative;
+  border-radius: 50px;
+  left: 50%;
+  transform: translateX(-50%);
+  user-select: none;
+     transition: 0.1s linear;
+     padding: 20px;
+     font-size: 25px;
+     background: #F7F9FC;
+     width: 80%;
+     margin-top:10px;
+     margin-bottom:10px;
+}
+ .openModal:hover {
+  border-radius: 20px;
+  background: #36a9ff;
+  color: #fff;
+}
+div.modal {
+  display: none;
+  width: 100vh;
+  height: 100vh;
+  position: fixed;
+  z-index: 1;
+  transition: 0.3s linear;
+}
+div.modalClose {
+  background: #0009;
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 2;
+  height: 100vh;
+  width: 100vh;
+}
+div.modalWrapper {
+  border-radius: 20px;
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  z-index: 3;
+  transform: translate(-50%, -50%);
+  max-width: 90%;
+  width: 85%;
+  min-height: 200px;
+  height: 80%;
+  padding: 0.5rem;
+  background: #F7F9FC;
+  color: #000;
+  overflow: scroll;
+  box-shadow: 5px 3px #000;
+  border: 2px solid #000;
+}
+.loaderWrapper {
+  font-family: Monospace;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+.info {
+  font-size: 14px;
+  opacity: 0.5;
+  font-family: Monospace;
+  font-style: oblique;
+}
diff --git a/script.js b/script.js
@@ -1,4 +1,4 @@
-
+import "./ai.js";
 var rumus = document.getElementById("rumusEl");
 var hasil = document.getElementById("hasilEl");
 

diff --git a/style.css b/style.css
@@ -1,5 +1,6 @@
 @import url("./desktop.css");
-
+@import url("./modal.css");
+@import url("./loader.css");
 
 body {
    position: relative;
@@ -89,4 +90,14 @@ body {
      text-align: center;
      font-style: oblique;
      opacity: 0.4;
+     padding-bottom: 1em;
+   }
+   .tag {
+     font-size: 10px;
+     background: #BAE3C6;
+     color: #000;
+     padding: 5px;
+     border-radius: 50px;
+     vertical-align: super;
+
    }