Spaces:
Sleeping
Sleeping
File size: 5,713 Bytes
809791b a204d40 1387ef8 be8fbcb 1387ef8 809791b 354e59a f2e7ce4 be8fbcb 809791b 1387ef8 be8fbcb f2e7ce4 1387ef8 6783ada 1387ef8 b797ec7 6783ada 1387ef8 a204d40 1387ef8 a204d40 809791b 354e59a 6783ada 354e59a 6783ada 354e59a 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 133 134 135 136 137 138 | <!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>
<form class="chat-box" method="POST">
<h1 id="titulo-criar-perfil">Vamos criar seu perfil?</h1>
<div class="small-link" id="link-ja-tenho">
<a href="#" onclick="mostrarPerfis(); return false;">Já tenho perfil</a>
</div>
<div class="small-link hidden" id="link-criar">
<a href="/">Criar perfil</a>
</div>
<div id="existing-profiles" class="hidden">
<h1>Selecione um perfil</h1>
{% if profiles %}
<ul>
{% for id, data in profiles.items() %}
<li><a href="/perfil/{{ id }}">{{ data.name or "Usuário " ~ id }}</a></li>
{% endfor %}
</ul>
{% else %}
<p>Não há perfis cadastrados.</p>
{% endif %}
</div>
<div id="formulario-perfil">
<label for="name">Seu nome:</label>
<input type="text" id="name" name="name" required
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");
// Função para fechar o modal
function closeModal() {
modal.style.display = "none";
// Marca na sessão que o intro já foi visto
sessionStorage.setItem('introShown', 'true');
}
// Ao carregar a página, verifica se deve mostrar o modal
window.addEventListener('load', function() {
// Se NÃO tiver a flag 'introShown' na sessão, mostra o modal
if (!sessionStorage.getItem('introShown')) {
modal.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);
// Verifica se está na tela de "Criar perfil" (se o formulario-perfil não está hidden)
const formVisible = !document.getElementById('formulario-perfil').classList.contains('hidden');
if (formVisible && !checkedOne) {
e.preventDefault(); // Impede o envio
errorMsg.style.display = 'block';
} else {
errorMsg.style.display = 'none';
}
});
</script>
</body>
</html>
|