Spaces:
Sleeping
Sleeping
File size: 5,352 Bytes
809791b a204d40 1387ef8 be8fbcb 1387ef8 809791b 354e59a ae01725 f2e7ce4 be8fbcb 809791b 1387ef8 6783ada 7b7d873 6783ada 1387ef8 b797ec7 6783ada 1387ef8 a204d40 1387ef8 a204d40 809791b 354e59a ae01725 354e59a ae01725 354e59a ae01725 6783ada ae01725 354e59a 6783ada 354e59a 6783ada ae01725 6783ada 354e59a 809791b | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 | <!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
<title>Bem-vindo!</title>
<script>
function mostrarPerfis() {
document.getElementById('existing-profiles').classList.remove('hidden');
document.getElementById('formulario-perfil').classList.add('hidden');
document.getElementById('link-ja-tenho').classList.add('hidden');
document.getElementById('link-criar').classList.remove('hidden');
document.getElementById('titulo-criar-perfil').classList.add('hidden');
}
</script>
</head>
<body>
<!-- Welcome Modal -->
<div id="introModal" class="modal">
<div class="modal-content">
<span class="close-btn" onclick="closeModal()">×</span>
<h2 class="modal-title">BookMatchAI: Seu Assistente Literário Inteligente 📚</h2>
<p class="modal-desc" style="font-size: 1em; text-align: left; margin-bottom: 15px;">
<strong>O que este projeto faz:</strong><br>
Este é um assistente conversacional capaz de entender o perfil do usuário (gêneros favoritos e nome) para fazer recomendações de livros personalizadas e discutir literatura em linguagem natural.
</p>
<div class="tech-stack">
<h4>🚀 Stack Tecnológico Utilizado:</h4>
<ul>
<li><strong>Linguagem & Backend:</strong> Python 3 + Flask (Estrutura MVC).</li>
<li><strong>Inteligência Artificial:</strong> Google Gemini API (Sistema inteligente que consulta, filtra e seleciona dinamicamente os modelos de IA disponíveis para uso).</li>
<li><strong>Frontend:</strong> HTML5, CSS3 e JavaScript (Design responsivo e interativo).</li>
<li><strong>Performance & Infra:</strong> Implementação de Cache (cachetools), Logs robustos e Deploy via Docker no Hugging Face.</li>
</ul>
</div>
<button id="start-intro-btn" onclick="closeModal()">Entendi, vamos começar!</button>
</div>
</div>
<!-- Floating Info Button -->
<div id="infoFab" class="info-fab" onclick="openModal()" title="Sobre o Projeto">
ℹ️
</div>
<form class="chat-box" method="POST">
<h1 id="titulo-criar-perfil">Vamos criar seu perfil?</h1>
<div id="formulario-perfil">
<label for="name">Seu nome:</label>
<input type="text" id="name" name="name" required
placeholder="Digite seu nome aqui..."
title="Por favor, preencha seu nome"
oninvalid="this.setCustomValidity('Por favor, preencha seu nome')"
oninput="this.setCustomValidity('')"><br><br>
<p>Quais gêneros de livros você gosta?</p>
<div class="genre-grid">
{% for genre in genres %}
<label class="genre-label" for="{{ genre }}">
<input type="checkbox" id="{{ genre }}" name="preferences" value="{{ genre }}">
{{ genre.title() }}
</label>
{% endfor %}
</div>
<p id="genre-error" style="color: red; display: none; font-size: 0.9em; margin-top: 5px;">⚠️ Selecione pelo menos um gênero.</p>
<br>
<button type="submit">Começar</button>
</div>
</form>
<script>
// Modal Logic
const modal = document.getElementById("introModal");
const fab = document.getElementById("infoFab");
// Função para abrir o modal
function openModal() {
modal.style.display = "block";
fab.style.display = "none";
}
// Função para fechar o modal
function closeModal() {
modal.style.display = "none";
fab.style.display = "block"; // Mostra o botão flutuante
// Marca na sessão que o intro já foi visto
sessionStorage.setItem('introShown_v3', 'true');
}
// Ao carregar a página
window.addEventListener('load', function() {
// Se NÃO tiver a flag, mostra modal
if (!sessionStorage.getItem('introShown_v3')) {
openModal();
} else {
// Se já viu, mostra só o botão flutuante
fab.style.display = "block";
}
});
// Fecha se clicar fora da caixa do modal
window.onclick = function(event) {
if (event.target == modal) {
closeModal();
}
}
// Validação do Formulário
document.querySelector('form').addEventListener('submit', function(e) {
const checkboxes = document.querySelectorAll('input[name="preferences"]');
const errorMsg = document.getElementById('genre-error');
let checkedOne = Array.prototype.slice.call(checkboxes).some(x => x.checked);
if (!checkedOne) {
e.preventDefault(); // Impede o envio
errorMsg.style.display = 'block';
} else {
errorMsg.style.display = 'none';
}
});
</script>
</body>
</html>
|