194 lines
No EOL
7.3 KiB
HTML
194 lines
No EOL
7.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="pt">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Adrian Victor - Demonstração da API do Prof. Rodrigo Ribeiro</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<link rel="stylesheet" href="/static/main.css?fixcache=1">
|
|
<script src="/static/scripts/ccd.js"></script>
|
|
<script src="/static/scripts/music.js" defer></script>
|
|
<script src="/static/scripts/88x31.js" defer></script>
|
|
<script src="/static/scripts/tips.js" defer></script>
|
|
<link rel="apple-touch-icon" sizes="180x180" href="/static/apple-touch-icon.png">
|
|
<link rel="icon" type="image/png" sizes="32x32" href="/static/favicon-32x32.png">
|
|
<link rel="icon" type="image/png" sizes="16x16" href="/static/favicon-16x16.png">
|
|
<link rel="manifest" href="/static/site.webmanifest">
|
|
<script src="https://keepandroidopen.org/banner.js" defer></script>
|
|
<meta property="og:title" content="Adrian Victor - Demonstração da API do Prof. Rodrigo Ribeiro">
|
|
<meta property="og:description" content="Website/blog pessoal de Adrian Victor.">
|
|
<meta property="og:type" content="article">
|
|
<meta property="og:url" content="https://adrianvic.github.io/school/api-rodrigoribeiro/">
|
|
<meta property="og:image" content="https://adrianvic.github.io/static/images/bear.jpg">
|
|
</head>
|
|
<body>
|
|
<style>
|
|
.bg {
|
|
opacity: .4!important;
|
|
}
|
|
</style>
|
|
<noscript>
|
|
<style>
|
|
.i88x31:hover {
|
|
transform: scale(2);
|
|
}
|
|
</style>
|
|
</noscript>
|
|
<div id="everythingHelper">
|
|
<img src="/static/images/bear.jpg" class="bg">
|
|
<header>
|
|
<div>
|
|
<h1>Adrian Victor:Trabalhos</h1>
|
|
<a id="headerSubtitle"><i>Fanasy is not a crime, find your castle in the sky.</i></a>
|
|
<script>
|
|
const headeri18n =
|
|
{
|
|
by: "por",
|
|
options: "Opções",
|
|
hideBackground: "Esconder imagem de fundo",
|
|
back: "voltar"
|
|
}
|
|
</script>
|
|
</div>
|
|
<div id="linksHelper">
|
|
<div id="music">
|
|
</div>
|
|
<ul id="headerLinks">
|
|
<a href="/pt/">início</a>
|
|
<a href="/pt/blog/">blog</a>
|
|
<a href="/pt/misc/">misc</a>
|
|
</ul>
|
|
</div>
|
|
</header>
|
|
<div id="mainHelper">
|
|
<style>
|
|
#mainAPI, #login {
|
|
display: none;
|
|
}
|
|
|
|
#mainAPI.selected, #login.selected {
|
|
display: flex;
|
|
}
|
|
</style>
|
|
<div style="display: flex; gap: 1em; flex-direction: column;">
|
|
<h1>Demonstração da API do Prof. Rodrigo Ribeiro</h1>
|
|
<p>A API do Prof. Rodrigo Ribeiro permite que o <i>client</i> envie uma imagem, assim retornando o resultado de uma leitura óptica realizada sobre a mesma com inteligência artificial. Esse client lê o resultado e o mostra de forma simples para o usuário.</p>
|
|
<p><a href="https://api.rodrigoribeiro.net/doc">Mais informações sobre a API podem ser encontradas no seu website.</a></p>
|
|
<div id="token">Token: Ausente</div>
|
|
<div id="login" class="selected" style="flex-direction: column; gap: .6em;">
|
|
<input type="text" id="username" placeholder="E-mail">
|
|
<input type="password" id="password" placeholder="Senha">
|
|
<div>
|
|
<button id="submit">Logar</button>
|
|
<button id="submitb">Criar Usuário</button>
|
|
</div>
|
|
</div>
|
|
<div id="mainAPI" style="flex-direction: column; gap: 1em;">
|
|
<div style="display: flex; flex-direction: column; gap: .6em;">
|
|
<input type="file" id="file">
|
|
<div>
|
|
<button id="submitImage">Enviar imagem.</button>
|
|
<button id="logout">Deletar token</button>
|
|
</div>
|
|
</div>
|
|
<div id="imageResults">
|
|
<p>Resultados da leitura óptica:</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
const usernameInput = document.getElementById('username');
|
|
const passwordInput = document.getElementById('password');
|
|
const tokenLabel = document.getElementById('token');
|
|
const submitButton = document.getElementById('submit');
|
|
const cuButton = document.getElementById('submitb');
|
|
const fileEl = document.getElementById('file');
|
|
const submitImageButton = document.getElementById('submitImage');
|
|
const imageResults = document.getElementById("imageResults");
|
|
const loginDiv = document.getElementById("login");
|
|
const apiDiv = document.getElementById("mainAPI");
|
|
const logoutButton = document.getElementById("logout");
|
|
|
|
let token = '';
|
|
|
|
async function api(endpoint, data) {
|
|
const info = {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'Authorization': `Bearer ${token}`
|
|
},
|
|
body: JSON.stringify(data),
|
|
}
|
|
let res = await fetch(`https://api.rodrigoribeiro.net/${endpoint}`, info);
|
|
res = await res.json()
|
|
console.log(res)
|
|
return res;
|
|
}
|
|
|
|
function login(username, password, createAccount = false) {
|
|
return api(createAccount ? "registrar" : "login", { email: username, senha: password });
|
|
}
|
|
|
|
submitButton.addEventListener('click', async () => {
|
|
if (!usernameInput.value && !passwordInput.value) {
|
|
alert("Preencha os campos necessários.")
|
|
return;
|
|
}
|
|
res = await login(usernameInput.value, passwordInput.value);
|
|
const is_logged = (res.status_code == 200);
|
|
if (is_logged) {
|
|
token = res.response.token;
|
|
toggleDivsVisibility();
|
|
}
|
|
tokenLabel.innerHTML = `Token: ${is_logged ? 'Presente' : 'Ausente (erro de autenticação)'}`;
|
|
})
|
|
|
|
cuButton.addEventListener('click', async () => {
|
|
if (!usernameInput.value && !passwordInput.value) {
|
|
alert("Preencha os campos necessários.")
|
|
return;
|
|
}
|
|
res = await login(usernameInput.value, passwordInput.value, true);
|
|
const is_logged = (res.status_code == 201);
|
|
tokenLabel.innerHTML = `Token: ${is_logged ? 'Ausente (conta criada e pronta para logar)' : 'Ausente (erro ao criar usuário)'}`;
|
|
})
|
|
|
|
submitImageButton.addEventListener('click', async () => {
|
|
const file = fileEl.files[0];
|
|
if (!file) return;
|
|
|
|
const fr = new FileReader();
|
|
fr.onload = async () => {
|
|
const dataUrl = fr.result;
|
|
const base64 = dataUrl.split(',')[1];
|
|
const res = await api('detectar', {
|
|
"image": base64,
|
|
"preview": true
|
|
})
|
|
|
|
imageResults.innerHTML = "";
|
|
|
|
res.response.objects.forEach(object => {
|
|
let resultsEntry = document.createElement("p");
|
|
resultsEntry.innerHTML = `<i>${object.class}</i> detectado com confiança de ${object.score * 100}%`
|
|
imageResults.appendChild(resultsEntry);
|
|
});
|
|
};
|
|
fr.readAsDataURL(file);
|
|
});
|
|
|
|
logout.addEventListener('click', () => {
|
|
token = "";
|
|
toggleDivsVisibility();
|
|
tokenLabel.innerText = "Token: Ausente"
|
|
})
|
|
|
|
function toggleDivsVisibility() {
|
|
apiDiv.classList.toggle('selected');
|
|
loginDiv.classList.toggle('selected');
|
|
}
|
|
</script>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html> |