| <!DOCTYPE html> |
| <html> |
| <head> |
| <title>OTIS Playground</title> |
| <meta charset="utf-8"/> |
| |
| |
| <style> |
| * { |
| |
| box-sizing: border-box; |
| } |
| html, body { |
| width: 100%; |
| height: 100%; |
| margin: 0; |
| padding: 0; |
| background-color: #a7b2bb; |
| color: rgba(39,40,34,0.80); |
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; |
| font-size: 17px; |
| } |
| .contents { |
| width: 90%; |
| margin: 0 auto; |
| } |
| #path { |
| display: block; |
| width: 100%; |
| max-width: 1000px; |
| border-radius: 15px; |
| background-color: #272822; |
| border: 0; |
| color: #dfdfde; |
| line-height: 50px; |
| padding: 0 25px; |
| font-size: 15px; |
| font-family: Hack, monospace; |
| outline: none; |
| box-shadow: 0px 15px 15px rgba(0,0,0,0.3); |
| margin: 10px auto; |
| } |
| #input, #output { |
| display: block; |
| width: 100%; |
| max-width: 1000px; |
| border-radius: 15px; |
| background-color: #272822; |
| border: 0; |
| padding: 25px; |
| color: #dfdfde; |
| font-size: 15px; |
| font-family: Hack, monospace; |
| outline: none; |
| box-shadow: 0px 15px 15px rgba(0,0,0,0.3); |
| resize: vertical; |
| margin: 10px auto; |
| word-wrap:unset; |
| } |
| |
| #input { |
| height: 300px; |
| } |
| #output { |
| height: 150px; |
| } |
| .top { |
| display: block; |
| margin: 40px auto 40px auto; |
| text-align: center; |
| } |
| .top .logo { |
| position: relative; |
| left: -2px; |
| display: block; |
| margin: 0 auto 5px auto; |
| } |
| .top .sub { |
| color: #272822; |
| font-size: 32px; |
| font-weight: 900; |
| margin: 0 auto 0 auto; |
| } |
| .bottom { |
| display: block; |
| max-width: 800px; |
| margin: 40px auto 40px auto; |
| } |
| .bottom pre{ |
| background: rgba(0,0,0,0.10); |
| padding: 20px; |
| border-radius: 6px; |
| font-family: Hack, monospace; |
| font-size: 15px; |
| } |
| .bottom p{ |
| text-align: center; |
| } |
| .bottom h2, .bottom h3{ |
| text-align: center; |
| color: #272822; |
| } |
| .octocat { |
| margin-top: 20px; |
| opacity: 0.82; |
| } |
| .example { |
| overflow: auto; |
| } |
| a { |
| color: black |
| } |
| </style> |
| </head> |
| <body> |
| <div class="contents"> |
| <div class="top"> |
| <div class="sub">OTIS PLAYGROUND</div> |
| <p>Otis an Anti-Spam AI Model</p> |
| </div> |
| <div><input type="text" value="C一eck out our amazin伞 b芯芯褧ting servi褋e 选here you can get to Leve訌 3 for 3 mont一s for just 20 USD." id="path" |
| data-gramm_editor="false" spellcheck="false" autocomplete="off"></div> |
| <div> |
| <textarea id="output" readonly |
| data-gramm_editor="false" spellcheck="false" autocomplete="off" |
| ></textarea> |
| </div> |
|
|
| <div class="bottom"> |
| <h3>What is OTIS?</h3> |
| <p>Otis is an advanced anti-spam artificial intelligence model designed to mitigate and combat the proliferation of unwanted and malicious content within digital communication channels. Leveraging cutting-edge machine learning algorithms and sophisticated pattern recognition techniques.</p> |
| |
| <br> |
| <br> |
| <center><a href="https://github.com/JewishLewish/Otis">Github Repo</a></center> |
| <br> |
| </p> |
| |
| </div> |
| </div> |
|
|
| <script> |
| document.addEventListener('DOMContentLoaded', () => { |
| var prev_path = null; |
| |
| window.setInterval(function() { |
| var path = document.getElementById("path").value.trim(); |
| if (path == "") { |
| |
| } else if (path != prev_path) { |
| analyzeContent(path) |
| .then(function(output) { |
| document.getElementById("output").value = output; |
| prev_path = path; |
| }) |
| .catch(function(error) { |
| console.error(error); |
| }); |
| } |
| }, 200); |
| }); |
| |
| function analyzeContent(content) { |
| return new Promise(function(resolve, reject) { |
| const endpoint = `/${content}`; |
| |
| fetch(endpoint) |
| .then(function(response) { |
| if (response.ok) { |
| return response.text(); |
| } else { |
| throw new Error('Failed to fetch data'); |
| } |
| }) |
| .then(function(data) { |
| resolve(data); |
| }) |
| .catch(function(error) { |
| reject(error); |
| }); |
| }); |
| } |
| |
| </script> |
|
|
| </body> |
| </html> |
