Finished programming work.
This commit is contained in:
parent
f0fe591eb5
commit
84913fd6d0
4 changed files with 165 additions and 33 deletions
|
|
@ -34,18 +34,40 @@
|
|||
</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>
|
||||
<div style="display: flex; flex-direction: column; gap: .6em;">
|
||||
<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="text" id="password" placeholder="Senha">
|
||||
<input type="password" id="password" placeholder="Senha">
|
||||
<div>
|
||||
<button id="submit">Logar</button>
|
||||
<button id="submitb">Criar Usuário</button>
|
||||
</div>
|
||||
</div>
|
||||
<div id="token">Token: Ausente</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');
|
||||
|
|
@ -53,28 +75,34 @@
|
|||
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),
|
||||
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.")
|
||||
|
|
@ -82,10 +110,13 @@
|
|||
}
|
||||
res = await login(usernameInput.value, passwordInput.value);
|
||||
const is_logged = (res.status_code == 200);
|
||||
if (is_logged) token = res.response.token;
|
||||
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.")
|
||||
|
|
@ -95,6 +126,41 @@
|
|||
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>
|
||||
|
|
|
|||
4
docs/static/main.css
vendored
4
docs/static/main.css
vendored
|
|
@ -136,10 +136,10 @@ h2 {
|
|||
}
|
||||
|
||||
textarea, input, button {
|
||||
border: thick solid var(--theme-color-lighter);
|
||||
border: medium solid var(--theme-color-lighter);
|
||||
background-color: black;
|
||||
color: white;
|
||||
padding: 4px;
|
||||
padding: .6em;
|
||||
}
|
||||
|
||||
#sound {
|
||||
|
|
|
|||
|
|
@ -1,18 +1,40 @@
|
|||
---
|
||||
pageTitle: "Demonstração da API do Prof. Rodrigo Ribeiro"
|
||||
---
|
||||
<style>
|
||||
#mainAPI, #login {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#mainAPI.selected, #login.selected {
|
||||
display: flex;
|
||||
}
|
||||
</style>
|
||||
<div style="display: flex; gap: 1em; flex-direction: column;">
|
||||
<h1>{{pageTitle}}</h1>
|
||||
<div style="display: flex; flex-direction: column; gap: .6em;">
|
||||
<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="text" id="password" placeholder="Senha">
|
||||
<input type="password" id="password" placeholder="Senha">
|
||||
<div>
|
||||
<button id="submit">Logar</button>
|
||||
<button id="submitb">Criar Usuário</button>
|
||||
</div>
|
||||
</div>
|
||||
<div id="token">Token: Ausente</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');
|
||||
|
|
@ -20,28 +42,34 @@ pageTitle: "Demonstração da API do Prof. Rodrigo Ribeiro"
|
|||
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),
|
||||
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.")
|
||||
|
|
@ -49,10 +77,13 @@ pageTitle: "Demonstração da API do Prof. Rodrigo Ribeiro"
|
|||
}
|
||||
res = await login(usernameInput.value, passwordInput.value);
|
||||
const is_logged = (res.status_code == 200);
|
||||
if (is_logged) token = res.response.token;
|
||||
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.")
|
||||
|
|
@ -62,4 +93,39 @@ pageTitle: "Demonstração da API do Prof. Rodrigo Ribeiro"
|
|||
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>
|
||||
|
|
@ -136,10 +136,10 @@ h2 {
|
|||
}
|
||||
|
||||
textarea, input, button {
|
||||
border: thick solid var(--theme-color-lighter);
|
||||
border: medium solid var(--theme-color-lighter);
|
||||
background-color: black;
|
||||
color: white;
|
||||
padding: 4px;
|
||||
padding: .6em;
|
||||
}
|
||||
|
||||
#sound {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue