Hugging Face's logo

Spaces:
valencar
/
PulmoX
Sleeping

App Files Community
PulmoX / index.html
valencar's picture
valencar
Upload 8 files
ef1c597 verified
raw
history blame contribute delete
17.9 kB
 <!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PulmoX - About</title>
<!-- INÍCIO DO CÓDIGO DO FAVICON -->
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
<!-- FIM DO CÓDIGO DO FAVICON -->
<style>
body {
font-family: sans-serif;
background-color: #080808;
color: #F5F5F5;
margin: 0;
padding: 0;
display: flex;
}
.sidebar {
width: 280px;
min-height: 100vh;
background-color: #181818; /* Fundo escuro simples */
backdrop-filter: none;
color: #F5F5F5;
padding: 20px;
box-sizing: border-box;
flex-shrink: 0;
display: flex; /* Adicionado para layout flexível */
flex-direction: column; /* Organiza os itens verticalmente */
}
.sidebar-content {
flex-grow: 1; /* Permite que o conteúdo cresça e empurre a imagem para baixo */
}
.sidebar-image {
margin-top: auto; /* Empurra a imagem para o final */
padding-top: 20px;
text-align: left;
}
.sidebar-image img {
max-width: 100%;
height: auto;
border-radius: 8px;
}
.sidebar-logo {
text-align: left; /* Alinha a logomarca à esquerda */
padding: 20px 0 0 0; /* Remove o padding extra para alinhar com o menu */
bbackground-color: transparent; /* Cor de fundo da sidebar */
}
.sidebar-menu {
margin-top: 40px; /* Ajusta o espaço entre a logo e o menu */
margin-bottom: 20px;
}
.sidebar-menu a {
display: block;
color: #F5F5F5;
text-decoration: none;
padding: 15px 20px; /* Aumenta o padding */
margin: 5px -20px; /* Estende a área de destaque para a borda da sidebar */
font-size: 28px; /* Aumenta a fonte para maior visibilidade */
font-family: sans-serif; /* Volta para a fonte padrão do corpo, mais legível */
font-weight: 700; /* Negrito, mas não excessivo */
transition: all 0.2s ease-in-out;
border-radius: 0 10px 10px 0; /* Borda arredondada no lado direito */
}
.sidebar-menu a:hover {
background-color: #303030; /* Fundo mais escuro no hover */
color: #F5F5F5; /* Texto branco no hover */
box-shadow: none;
}
.sidebar-menu a.active {
background-color: #303030; /* Fundo mais escuro no ativo */
color: #F5F5F5;
box-shadow: none;
font-weight: bold;
border-left: 3px solid #00C853; /* Linha de destaque minimalista */
padding-left: 17px; /* Ajusta o padding */
}
.main-content {
flex-grow: 1;
padding: 1rem 2rem;
box-sizing: border-box;
}
.main-container {
max-width: 700px;
margin: 0 auto;
}
.image-placeholder {
width: 100%;
height: 520px; /* Aumentado em 30% de 400px */
background-color: #303030;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 1.5rem;
font-size: 1.5rem;
color: rgba(204, 204, 204, 0.6);
overflow: hidden;
}
.image-placeholder img {
width: 100%; /* Garante que a imagem tente ocupar 100% da largura */
height: 100%; /* Garante que a imagem tente ocupar 100% da altura */
object-fit: contain; /* Garante que a proporção seja mantida */
}
.prediction-placeholder {
min-height: 50px;
margin-bottom: 1.5rem;
padding: 10px 0;
}
.columns-container {
display: flex;
gap: 1rem;
align-items: flex-start;
}
.column {
flex: 1;
}
.button-style {
border: 2px solid #F5F5F5;
border-radius: 12px;
background-color: #080808;
color: #F5F5F5;
padding: 1.2rem 2rem;
font-size: 20px;
font-family: sans-serif;
cursor: pointer;
width: 100%;
text-align: center;
transition: all 0.2s ease-in-out;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
box-sizing: border-box;
}
.button-style:hover {
background-color: #303030;
border-color: #00C853;
}
.upload-label {
display: block;
cursor: pointer;
}
#file-upload-input {
display: none;
}
.footer {
text-align: left; /* Garante o alinhamento à esquerda */
padding: 1rem 0;
color: #aaa;
font-size: 14px;
line-height: 1.5;
}
.footer a {
color: #9ecbff !important;
text-decoration: none !important;
}
/* Estilos adicionados do pulmox_landing.html para a página About */
.about-content h2 {
font-size: 24px;
margin-top: 1.5rem;
margin-bottom: 0.5rem;
}
.about-content p.lead {
color: #aaa;
font-size: 16px;
margin-bottom: 1.5rem;
}
.about-content .card {
background-color: #181818;
backdrop-filter: none;
border-radius: 0;
padding: 15px;
box-shadow: none;
border: 1px solid #303030; /* Borda sutil */
transition: all 0.3s ease-in-out;
}
.about-content .pill {
display: inline-block;
padding: 4px 8px;
border-radius: 999px;
background-color: #303030;
font-weight: 700;
color: rgba(204, 204, 204, 0.6);
font-size: 12px;
}
.about-content .muted {
color: #aaa;
}
.about-content .section-title {
font-size: 20px;
margin-top: 1.5rem;
margin-bottom: 0.5rem;
}
.about-content .section-sub {
color: #aaa;
margin-bottom: 1rem;
}
.about-content .pipeline {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.about-content .step {
flex: 1;
min-width: 150px;
background-color: #181818;
padding: 10px;
border-radius: 6px;
border: 1px solid #303030; /* Adicionar borda sutil */
transition: all 0.3s ease-in-out; /* Adicionar transição para o hover */
}
.about-content .step:hover {
background-color: #303030; /* Fundo um pouco mais escuro no hover */
border-color: #00C853; /* Borda de destaque verde no hover */
transform: translateY(-2px); /* Efeito de elevação sutil */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Sombra sutil */
}
/* Novo Design para o Card de Benefícios Chave */
.benefit-key-card {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px; /* Aumentar o gap */
padding: 25px; /* Aumentar o padding */
border: 2px solid #00C853;
box-shadow: 0 0 15px rgba(0, 200, 83, 0.3);
}
.benefit-key-card .card-content {
flex-grow: 1;
}
.benefit-key-card .card-title {
font-size: 20px; /* Aumentar o título para 20px */
font-weight: 800; /* Deixar mais bold */
margin: 8px 0 0;
}
.benefit-key-card .card-subtitle {
font-size: 14px; /* Uniformizar com o p dos outros cards */
margin: 6px 0 0;
}
.benefit-key-card .card-aside {
text-align: right;
font-size: 14px; /* Aumentar para 14px */
color: #00C853; /* Dar destaque à cor */
font-weight: 700;
flex-shrink: 0;
max-width: 200px; /* Aumentar a largura */
}
.about-content .step h4 {
margin: 0 0 5px;
font-size: 14px;
}
.about-content .step p {
margin: 0;
color: #aaa;
font-size: 13px;
}
/* Novo CSS para Títulos de Seção */
.section-title {
font-size: 28px;
font-weight: 800;
color: #fff; /* Garantir que o título seja branco */
margin-bottom: 5px;
position: relative;
display: inline-block;
}
.section-title::after {
content: '';
display: block;
width: 50px; /* Largura do separador */
height: 4px; /* Espessura do separador */
background-color: #00C853; /* Cor de destaque verde */
margin-top: 8px;
border-radius: 2px;
}
.section-sub {
font-size: 16px;
color: #aaa;
margin-bottom: 30px;
}
margin: 0;
color: #aaa;
font-size: 13px;
}
.about-content .step h4 {
display: flex;
align-items: center;
gap: 8px;
}
.about-content .step .icon {
font-size: 24px;
line-height: 1;
}
/* Novo Design para Benefícios */
.benefits-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
margin-top: 20px;
}
.benefit-card {
background-color: #181818;
border: 1px solid #303030;
border-radius: 8px;
padding: 20px;
transition: all 0.3s ease-in-out;
cursor: pointer;
}
.benefit-card:hover {
border-color: #00C853;
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}
.benefit-icon {
font-size: 36px;
line-height: 1;
margin-bottom: 10px;
display: block;
}
.benefit-card h3 {
margin: 0 0 8px;
font-size: 18px;
font-weight: 700;
}
.benefit-card p.muted {
font-size: 14px;
color: #aaa;
}
</style>
</head>
<body>
<div class="sidebar">
<div class="sidebar-logo">
<a href="index.html"><img src="pulmox_logo_v2.png" alt="PulmoX Logo" style="width: 220px; height: auto; margin-bottom: 20px;"></a>
</div>
<div class="sidebar-content">
<div class="sidebar-menu">
<a href="index.html" class="active">Sobre</a>
<a href="ai_system.html">PulmoX</a>
<a href="contact.html">Contato</a>
</div>
</div>
</div>
<div class="main-content">
<div class="main-container">
<div style="font-size:32px; font-weight:bold; margin-top:0px; line-height:1.2; margin-bottom: 1.5rem;">
Classificação Inteligente de Patologias Pulmonares
</div>
<div class="about-intro" style="margin-bottom: 2rem; padding: 1.5rem; background-color: #181818; border-radius: 0; backdrop-filter: none;">
<h1>PulmoX: Classificação Inteligente de Patologias Pulmonares</h1>
<p style="font-size: 18px; line-height: 1.6;">O PulmoX é um sistema de Inteligência Artificial desenvolvido para a classificação de doenças pulmonares em imagens de Raios-X de Tórax. Utilizando Deep Learning (Transfer Learning e Vision Transformers - ViT), o software foi treinado com mais de 7.000 imagens rotuladas, garantindo precisão clínica para triagem e apoio diagnóstico.</p>
<p style="font-size: 18px; line-height: 1.6;">Desenvolvido por pesquisadores do Laboratório de Análise de Dados e Inteligência Artificial (LANA) da Universidade Estadual da Paraíba (UEPB).</p>
</div>
<hr style="border-color: #303030; margin: 2rem 0;">
<div class="about-content">
<h2>Benefícios Chave</h2>
<p class="lead">O PulmoX visa otimizar o fluxo de trabalho clínico, padronizar laudos e acelerar decisões médicas.</p>
<div style="margin-top:18px" class="card benefit-key-card">
<div class="card-content">
<div class="pill">Modelo Validado: +7.000 Imagens Rotuladas</div>
<h3 class="card-title">Otimização de Fluxo e Suporte Diagnóstico</h3>
<p class="card-subtitle muted">Integração Empresarial: Compatibilidade DICOM e API</p>
</div>
<div class="card-aside muted">
Valor Estratégico para Instituições de Saúde
</div>
</div>
<section style="margin-top: 2rem;">
<h2 class="section-title">Como Funciona</h2>
<p class="section-sub">Pipeline simples e integrado para incorporar IA ao seu fluxo de trabalho clínico.</p>
<div class="pipeline">
<div class="step">
<h4><span class="icon" style="color: #00C853;">📂</span> Upload / Integração DICOM</h4>
<p>O PulmoX recebe imagens em formatos clínicos e as prepara para análise.</p>
</div>
<div class="step">
<h4><span class="icon" style="color: #00C853;">🧼</span> Pré‑processamento</h4>
<p>Normalização, redimensionamento e melhoria de contraste para robustez do modelo.</p>
</div>
<div class="step">
<h4><span class="icon" style="color: #00C853;">💡</span> Inferência com ViT</h4>
<p>Vision Transformers e Transfer Learning para extração de padrões sutis.</p>
</div>
<div class="step">
<h4><span class="icon" style="color: #00C853;">🎯</span> Mapa de Calor & Classe</h4>
<p>Geração de probabilidades, mapa de calor explicável e relatório pré‑formatado.</p>
</div>
<div class="step">
<h4><span class="icon" style="color: #00C853;">🎯</span> 4. Resultados</h4>
<p>Geração de probabilidades e relatório pré-formatado.</p>
</div>
</div>
</section>
<section id="beneficios" style="margin-top: 2rem;">
<h2 class="section-title">Benefícios Detalhados</h2>
<p class="section-sub">Resultados práticos que impactam a operação e a qualidade do atendimento.</p>
<div class="benefits-grid">
<div class="benefit-card">
<span class="benefit-icon" style="color: #00C853;">⚡</span>
<h3>Agilidade Operacional</h3>
<p class="muted">Triagens mais rápidas e redução de filas de espera, otimizando o tempo clínico.</p>
</div>
<div class="benefit-card">
<span class="benefit-icon" style="color: #00C853;">✅</span>
<h3>Padronização e Consistência</h3>
<p class="muted">Menos variabilidade entre profissionais e maior consistência no diagnóstico.</p>
</div>
<div class="benefit-card">
<span class="benefit-icon" style="color: #00C853;">🧠</span>
<h3>Suporte à Decisão</h3>
<p class="muted">Relatórios com probabilidade e mapas de calor que auxiliam a interpretação clínica.</p>
</div>
</div>
</section>
<section style="margin-top: 2rem;">
<h2 class="section-title">Base de Treinamento</h2>
<p class="section-sub">Modelo treinado com um conjunto open source de mais de 7.000 imagens de raios‑X rotuladas cobrindo patologias relevantes.</p>
<div class="benefits-grid">
<div class="benefit-card">
<span class="benefit-icon" style="color: #00C853;">🛡️</span>
<h3>Robustez</h3>
<p class="muted">Treinamento com imagens de diferentes equipamentos e resoluções para melhor generalização.</p>
</div>
<div class="benefit-card">
<span class="benefit-icon" style="color: #00C853;">🔬</span>
<h3>Variedade Clínica</h3>
<p class="muted">Patologias múltiplas representadas para permitir classificação multi‑rótulo.</p>
</div>
<div class="benefit-card">
<span class="benefit-icon" style="color: #00C853;">🔄</span>
<h3>Atualizações</h3>
<p class="muted">Pipeline que suporta re‑treinamento contínuo e incorporação de novas anotações.</p>
</div>
</div>
</section>
</div>
</div>
</div>
</body>
</html>