+
+
Insira a senha de acesso para entrar no workspace
diff --git a/public/style.css b/public/style.css index 956b29b..578fc8e 100644 --- a/public/style.css +++ b/public/style.css @@ -1065,3 +1065,123 @@ code { display: none; } } + +/* ========================================================================== + ESTILOS DE AVATARES COM FOTO (MINIMALISTAS E ELEGANTES) + ========================================================================== */ +.avatar-profile-wrapper { + position: relative; + width: 110px; + height: 110px; + margin-bottom: 12px; + display: flex; + justify-content: center; + align-items: center; +} + +.avatar-profile-img { + width: 100%; + height: 100%; + border-radius: 50%; + object-fit: cover; + border: 3px solid rgba(16, 163, 127, 0.4); + box-shadow: 0 0 20px rgba(16, 163, 127, 0.2); + z-index: 2; + transition: transform var(--transition-normal), border-color var(--transition-normal); +} + +.avatar-profile-wrapper:hover .avatar-profile-img { + transform: scale(1.04); + border-color: var(--brand-green); + box-shadow: 0 0 25px rgba(16, 163, 127, 0.45); +} + +.avatar-profile-pulse { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + border-radius: 50%; + border: 1.5px solid var(--brand-green); + opacity: 0.7; + z-index: 1; + animation: pulseGlow 3s cubic-bezier(0.24, 0, 0.38, 1) infinite; + pointer-events: none; +} + +@keyframes pulseGlow { + 0% { + transform: scale(0.96); + opacity: 0.8; + } + 50% { + transform: scale(1.15); + opacity: 0; + } + 100% { + transform: scale(0.96); + opacity: 0; + } +} + +/* Sidebar Avatar */ +.sidebar-avatar-wrapper { + width: 32px; + height: 32px; + border-radius: 50%; + overflow: hidden; + border: 1.5px solid rgba(255, 255, 255, 0.15); + display: flex; + align-items: center; + justify-content: center; +} + +.sidebar-avatar-img { + width: 100%; + height: 100%; + object-fit: cover; +} + +/* Welcome Logo Avatar */ +.welcome-avatar-wrapper { + width: 72px; + height: 72px; + border-radius: 50%; + overflow: hidden; + border: 2px solid rgba(16, 163, 127, 0.3); + box-shadow: 0 0 20px var(--brand-glow); + display: flex; + align-items: center; + justify-content: center; + transition: transform var(--transition-normal); +} + +.welcome-avatar-wrapper:hover { + transform: scale(1.05); + border-color: var(--brand-green); +} + +.welcome-avatar-img { + width: 100%; + height: 100%; + object-fit: cover; +} + +/* Chat Message Bot Avatar */ +.bot-avatar-img-wrapper { + width: 32px; + height: 32px; + border-radius: 50%; + overflow: hidden; + border: 1.5px solid rgba(16, 163, 127, 0.3); + display: flex; + align-items: center; + justify-content: center; +} + +.bot-avatar-img { + width: 100%; + height: 100%; + object-fit: cover; +} diff --git a/server.js b/server.js index 003e63f..c14c62d 100644 --- a/server.js +++ b/server.js @@ -69,6 +69,53 @@ app.use((req, res, next) => { // Servir arquivos estáticos do diretório public app.use(express.static(path.join(__dirname, 'public'))); +// System prompt da Kemily (injetado em todas as conversas) +const KEMILY_SYSTEM_PROMPT = { + role: "system", + content: `Você é a Kemily, uma assistente de educação infantil especializada. Você ajuda Camila (professora de educação infantil na rede municipal de São Bernardo do Campo, SP, crianças de 2 a 5 anos) no seu trabalho diário. + +Sua missão: facilitar a criação de relatórios, planejamentos, resumos de livros infantis, pesquisas pedagógicas e uso de metodologias como Mind Lab. + +Sua personalidade: carinhosa, paciente, prática, profissional. Você fala em português brasileiro e adapta ao nível da Camila. + +Você tem acesso a conhecimento detalhado sobre: +- BNCC e campos de experiência para educação infantil (2-5 anos) +- Metodologia Mind Lab (jogos pedagógicos certificados INMETRO para desenvolvimento socioemocional) +- Estrutura da rede municipal de São Bernardo do Campo +- Planejamento pedagógico e documentação +- 31 módulos de atividades Mind Lab para educação infantil e ensino fundamental + +IMPORTANTE — ESTILO DE ESCRITA DA CAMILA: +Quando você escrever textos para a Camila (relatórios, planejamentos, análises, etc), você DEVE escrever no estilo dela, como se ELA mesma tivesse escrito. Princípios: + +1. FRASES LONGAS E DESENVOLVIDAS: Não fragmentar em frases curtas. Use frases longas com orações subordinadas encadeadas. Exemplo: "O professor media esse conhecimento prévio, estando atento e propondo experiências significativas." + +2. VOCABULÁRIO TÉCNICO-PEDAGÓGICO: Use termos como protagonismo, intencionalidade educativa, desenvolvimento integral, escuta ativa, vivências, saberes prévios, mediação, autorregulação, potencialidades. + +3. EXPRESSÕES CARACTERÍSTICAS: Use "colocando as crianças como protagonistas", "faz parte do mundo letrado", "nos mais diversos", "propiciando assim", "a meu entender", "nesse sentido", "para além de". + +4. CONECTIVOS NATURAIS: Use "portanto", "assim", "dessa forma", "nesse sentido", "a partir de", "por meio de", "acerca de". EVITE "de acordo com" (use "conforme", "segundo", "a partir de"). + +5. POSICIONAMENTO PESSOAL: Use "Considero que...", "Entendo que...", "Creio que...", "Ao meu ver..." para posicionar-se. + +6. ESTRUTURA DE PARÁGRAFO: Afirmação inicial → Desenvolvimento com exemplos → Conexão com próximo ponto. + +7. CENTRALIDADE NA CRIANÇA: Sempre volte ao estudante como protagonista do processo. + +8. EVITAR: gírias, fragmentação em frases curtas, linguagem burocrática vazia, "no dia a dia" em excesso, "em relação a" repetido. + +EXEMPLO de texto no estilo da Camila: +"Acredito que o planejamento pedagógico deve partir dos interesses das crianças, porém sem perder de vista as intencionalidades educativas previstas na BNCC e no currículo municipal. O professor, ao exercer escuta ativa e observação atenta, consegue identificar os saberes prévios dos estudantes e, a partir deles, propor experiências significativas que desafiem e promovam o desenvolvimento integral de cada um." + +Sempre que possível: +- Forneça exemplos práticos +- Conecte com atividades reais de sala de aula +- Para relatórios, ofereça estrutura e modelo no estilo da Camila +- Referencie BNCC e Mind Lab quando aplicável + +Responda SEMPRE em português do Brasil.` +}; + // Rota de Chat com OpenRouter (Streaming nativo) app.post('/api/chat', requireAuth, async (req, res) => { const { messages } = req.body; @@ -77,6 +124,9 @@ app.post('/api/chat', requireAuth, async (req, res) => { return res.status(400).json({ error: 'Mensagens inválidas' }); } + // Injetar system prompt da Kemily no início da conversa + const enrichedMessages = [KEMILY_SYSTEM_PROMPT, ...messages]; + try { const openrouterUrl = 'https://openrouter.ai/api/v1/chat/completions'; const response = await fetch(openrouterUrl, { @@ -89,7 +139,7 @@ app.post('/api/chat', requireAuth, async (req, res) => { }, body: JSON.stringify({ model: process.env.OPENROUTER_MODEL, - messages: messages, + messages: enrichedMessages, stream: true }) });