Spaces:
Sleeping
Sleeping
| <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> | |