|
<!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="Join our ѕerver bоοsting serѵice, we will have a plan that fits you." 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> |
