Spaces:

gpimentel
/

pokedex-web

Sleeping

App Files Files Community

pokedex-web / frontend /src /components /MobileNetV3Diagram.js

gpimentel's picture

feat: add MobileNetV3 diagram and update styles

261dd71 3 months ago

History Blame Contribute Delete

7.11 kB

	'use client';

	import React from 'react';
	import styles from './MobileNetV3Diagram.module.css';

	export default function MobileNetV3Diagram() {
	return (
	<div className={styles.card}>
	<div className={styles.cardScanline}></div>

	<header className={styles.header}>
	<div className={styles.title}>MobileNetV3-Large Student</div>
	<div className={styles.subtitle}>
	Destilado dos 5 Professores ResNet-18  ·  66.6 MB FP32  ·  1026 classes
	</div>
	</header>
	<div className={styles.divider}></div>

	<div className={styles.pipeline}>

	<div className={`${styles.layer} ${styles.lInput}`} style={{ animationDelay: '0.04s' }}>
	<div className={styles.layerName}>Input Tensor</div>
	<div className={styles.layerDim}>128 × 128 × 1 — grayscale silhouette</div>
	</div>

	<div className={styles.conn}>
	<div className={styles.connLine}></div>
	</div>

	<div className={`${styles.layer} ${styles.lConv}`} style={{ animationDelay: '0.08s' }}>
	<div className={styles.layerName}>Conv2d Adaptado</div>
	<div className={styles.layerDim}>in=1  \|  16 filtros  \|  3×3  \|  stride 2</div>
	</div>

	<div className={styles.conn}>
	<div className={styles.connLine}></div>
	</div>

	<div className={styles.stageGroup} style={{ animationDelay: '0.14s' }}>
	<div className={styles.stageLabel}>Blocos Inverted Residual + SE</div>
	<div className={`${styles.layer} ${styles.lBlock}`} style={{ width: '100%', animationDelay: '0.15s' }}>
	<div className={styles.layerName}>Bottleneck ×3 — expansão 16→64</div>
	<div className={styles.layerDim}>DWConv 3×3  \|  SE squeeze 4→16  \|  stride 2  \|  h-swish</div>
	</div>
	<div className={`${styles.conn} ${styles.connSm}`}>
	<div className={styles.connLine}></div>
	</div>
	<div className={`${styles.layer} ${styles.lBlock}`} style={{ width: '100%', animationDelay: '0.18s' }}>
	<div className={styles.layerName}>Bottleneck ×3 — expansão 24→88</div>
	<div className={styles.layerDim}>DWConv 3×3  \|  SE squeeze 4→24  \|  stride 2  \|  ReLU</div>
	</div>
	<div className={`${styles.conn} ${styles.connSm}`}>
	<div className={styles.connLine}></div>
	</div>
	<div className={`${styles.layer} ${styles.lBlock}`} style={{ width: '100%', animationDelay: '0.21s' }}>
	<div className={styles.layerName}>Bottleneck ×6 — expansão 40→240</div>
	<div className={styles.layerDim}>DWConv 5×5  \|  SE squeeze 8→40  \|  h-swish  \|  stride 2</div>
	</div>
	<div className={`${styles.conn} ${styles.connSm}`}>
	<div className={styles.connLine}></div>
	</div>
	<div className={`${styles.layer} ${styles.lBlock}`} style={{ width: '100%', animationDelay: '0.24s' }}>
	<div className={styles.layerName}>Bottleneck ×4 — expansão 80→400</div>
	<div className={styles.layerDim}>DWConv 3×3  \|  SE squeeze 16→80  \|  h-swish  \|  stride 1</div>
	</div>
	<div className={`${styles.conn} ${styles.connSm}`}>
	<div className={styles.connLine}></div>
	</div>
	<div className={`${styles.layer} ${styles.lBlock}`} style={{ width: '100%', animationDelay: '0.27s' }}>
	<div className={styles.layerName}>Bottleneck ×2 — expansão 112→672</div>
	<div className={styles.layerDim}>DWConv 5×5  \|  SE squeeze 24→112  \|  h-swish  \|  stride 1</div>
	</div>
	<div className={`${styles.conn} ${styles.connSm}`}>
	<div className={styles.connLine}></div>
	</div>
	<div className={`${styles.layer} ${styles.lBlock}`} style={{ width: '100%', animationDelay: '0.30s' }}>
	<div className={styles.layerName}>Bottleneck ×3 — expansão 160→960</div>
	<div className={styles.layerDim}>DWConv 5×5  \|  SE squeeze 32→160  \|  h-swish  \|  stride 2</div>
	</div>
	</div>

	<div className={styles.conn}>
	<div className={styles.connLine}></div>
	</div>

	<div className={`${styles.layer} ${styles.lConv}`} style={{ animationDelay: '0.33s' }}>
	<div className={styles.layerName}>Conv2d 1×1</div>
	<div className={styles.layerDim}>960 → 1280  \|  h-swish</div>
	</div>

	<div className={styles.conn}>
	<div className={styles.connLine}></div>
	</div>

	<div className={`${styles.layer} ${styles.lPool}`} style={{ animationDelay: '0.35s' }}>
	<div className={styles.layerName}>Global Average Pool</div>
	<div className={styles.layerDim}>AvgPool 7×7  →  1 × 1 × 1280</div>
	</div>

	<div className={styles.conn}>
	<div className={styles.connLine}></div>
	</div>

	<div className={`${styles.layer} ${styles.lFlatten}`} style={{ animationDelay: '0.38s' }}>
	<div className={styles.layerName}>Flatten + Dropout</div>
	<div className={styles.layerDim}>1280-dim  \|  p=0.2</div>
	</div>

	<div className={styles.conn}>
	<div className={styles.connLine}></div>
	</div>

	<div className={`${styles.layer} ${styles.lOutput}`} style={{ animationDelay: '0.41s' }}>
	<div className={styles.layerName}>FC — Classifier Head</div>
	<div className={styles.layerDim}>Linear(1280 → 1026)  \|  1025 target species + 1 OOD rejection sink</div>
	</div>

	</div>

	<div className={styles.kdBadge}>
	<div className={styles.kdBadgeIcon}>↓</div>
	<div className={styles.kdBadgeText}>
	Destilado de 5 Professores ResNet-18 (230 MB) via L<sub>total</sub> = (1−α)L<sub>hard</sub> + αL<sub>soft</sub> + γL<sub>OOD</sub>
	</div>
	</div>

	<div className={styles.legend}>
	<div className={styles.legendItem}>
	<div className={`${styles.legDot} ${styles.legCyan}`}></div>I/O
	</div>
	<div className={styles.legendItem}>
	<div className={`${styles.legDot} ${styles.legGreen}`}></div>Convolucional
	</div>
	<div className={styles.legendItem}>
	<div className={`${styles.legDot} ${styles.legPurple}`}></div>Bottleneck + SE
	</div>
	<div className={styles.legendItem}>
	<div className={`${styles.legDot} ${styles.legAmber}`}></div>Pooling / Flatten
	</div>
	</div>

	</div>
	);
	}