Skip to content

Professional Enterprise UI Redesign - Advanced Facial Analysis Platform #5

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
iihimanshuu merged 2 commits into from
Jul 31, 2025
Merged

Professional Enterprise UI Redesign - Advanced Facial Analysis Platform #5

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ec83ddc
Professional Enterprise UI Redesign - Advanced Facial Analysis Platform
iihimanshuu Jul 31, 2025
cd2837c
Fix GitHub Actions deployment with proper environment configuration
iihimanshuu Jul 31, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 23 additions & 6 deletions .github/workflows/deploy.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,17 +6,34 @@ on:
pull_request:
branches: [ main ]

permissions:
contents: read
pages: write
id-token: write

concurrency:
group: "pages"
cancel-in-progress: false

jobs:
deploy:
runs-on: ubuntu-latest
environment:
name: github-pages
url: ${{ steps.deployment.outputs.page_url }}

steps:
- name: Checkout
uses: actions/checkout@v3
uses: actions/checkout@v4

- name: Deploy to GitHub Pages
uses: peaceiris/actions-gh-pages@v3
if: github.ref == 'refs/heads/main'
- name: Setup Pages
uses: actions/configure-pages@v4

- name: Upload artifact
uses: actions/upload-pages-artifact@v3
with:
github_token: ${{ secrets.GITHUB_TOKEN }}
publish_dir: ./
path: '.'

- name: Deploy to GitHub Pages
id: deployment
uses: actions/deploy-pages@v4
169 changes: 122 additions & 47 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,9 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>VisionAuth - Face Analysis System</title>
<title>VisionAuth - Advanced Facial Analysis Platform</title>
<link rel="stylesheet" href="styles.css">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<!-- MediaPipe Face Landmarks -->
<script src="https://cdn.jsdelivr.net/npm/@mediapipe/face_mesh/face_mesh.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@mediapipe/camera_utils/camera_utils.js"></script>
Expand All @@ -18,87 +19,161 @@
<canvas id="canvas"></canvas>
</div>

<!-- Mode Selection Panel -->
<!-- Professional Header -->
<header class="app-header">
<div class="header-content">
<div class="logo-section">
<div class="logo-icon">VA</div>
<div class="logo-text">
<h1>VisionAuth</h1>
<span class="subtitle">Advanced Facial Analysis Platform</span>
</div>
</div>
<div class="header-actions">
<button class="header-btn" id="docsBtn">Documentation</button>
<button class="header-btn" id="supportBtn">Support</button>
</div>
</div>
</header>

<!-- Professional Mode Selection Panel -->
<div class="mode-panel" id="modePanel">
<h2>VisionAuth Analysis</h2>
<p>Choose your analysis mode:</p>
<div class="panel-header">
<h2>Configuration Center</h2>
<p>Select your analysis parameters and deployment mode</p>
</div>

<div class="mode-selection">
<div class="mode-option" data-mode="performance">
<h3>🚀 High Performance</h3>
<p>Fast analysis, lower accuracy</p>
<div class="mode-features">
<span>⚡ Instant start</span>
<span>📊 Basic analysis</span>
<span>🎯 Quick results</span>
<div class="mode-icon">⚡</div>
<div class="mode-content">
<h3>Performance Mode</h3>
<p>Optimized for real-time processing with reduced latency</p>
<div class="mode-specs">
<span>• 640x480 Resolution</span>
<span>• 30 FPS Processing</span>
<span>• Low Resource Usage</span>
</div>
</div>
</div>

<div class="mode-option" data-mode="accuracy">
<h3>🎯 High Accuracy</h3>
<p>Detailed analysis, slower processing</p>
<div class="mode-features">
<span>🔍 Detailed detection</span>
<span>📈 Advanced analysis</span>
<span>🎨 Rich wireframes</span>
<div class="mode-icon">🎯</div>
<div class="mode-content">
<h3>Precision Mode</h3>
<p>Enhanced accuracy with detailed facial landmark analysis</p>
<div class="mode-specs">
<span>• 1280x720 Resolution</span>
<span>• 468 Landmark Points</span>
<span>• High Detail Processing</span>
</div>
</div>
</div>
</div>

<div class="feature-selection" id="featureSelection" style="display: none;">
<h3>Select Analysis Features:</h3>
<div class="selection-header">
<h3>Analysis Module Selection</h3>
<p>Choose your primary analysis focus</p>
</div>
<div class="feature-toggles">
<label class="feature-toggle">
<input type="radio" name="analysisType" value="emotions" checked>
<span class="toggle-label">😊 Emotion Detection</span>
<div class="toggle-content">
<div class="toggle-icon">😊</div>
<div class="toggle-text">
<span class="toggle-title">Emotion Recognition</span>
<span class="toggle-desc">Real-time facial expression analysis</span>
</div>
</div>
</label>
<label class="feature-toggle">
<input type="radio" name="analysisType" value="age">
<span class="toggle-label">📅 Age Estimation</span>
<div class="toggle-content">
<div class="toggle-icon">📊</div>
<div class="toggle-text">
<span class="toggle-title">Age Estimation</span>
<span class="toggle-desc">Advanced demographic analysis</span>
</div>
</div>
</label>
</div>
<button class="start-analysis-btn" id="startAnalysisBtn">Start Analysis</button>
<button class="start-analysis-btn" id="startAnalysisBtn">Initialize Analysis Engine</button>
</div>
</div>

<!-- Analysis Box -->
<div class="analysis-box" id="analysisBox" style="display: none;">
<div class="analysis-header">
<h3>Live Analysis</h3>
<div class="status-indicator active" id="statusIndicator"></div>
</div>
<div class="analysis-content">
<div class="analysis-item">
<span class="label">Mode:</span>
<span class="value" id="modeValue">--</span>
<!-- Professional Analysis Dashboard -->
<div class="analysis-dashboard" id="analysisBox" style="display: none;">
<div class="dashboard-header">
<div class="dashboard-title">
<h3>Live Analysis Dashboard</h3>
<div class="status-indicator active" id="statusIndicator"></div>
</div>
<div class="analysis-item">
<span class="label">Feature:</span>
<span class="value" id="featureValue">--</span>
<div class="dashboard-controls">
<button class="control-btn" id="exportBtn">Export Data</button>
<button class="control-btn" id="settingsBtn">Settings</button>
</div>
<div class="analysis-item">
<span class="label">Result:</span>
<span class="value" id="resultValue">--</span>
</div>
<div class="analysis-item">
<span class="label">Confidence:</span>
<span class="value" id="confidenceValue">--</span>
</div>
<div class="dashboard-content">
<div class="metric-grid">
<div class="metric-card">
<div class="metric-header">
<span class="metric-label">Analysis Mode</span>
<span class="metric-icon">⚙️</span>
</div>
<div class="metric-value" id="modeValue">--</div>
</div>
<div class="metric-card">
<div class="metric-header">
<span class="metric-label">Active Module</span>
<span class="metric-icon">🔧</span>
</div>
<div class="metric-value" id="featureValue">--</div>
</div>
<div class="metric-card">
<div class="metric-header">
<span class="metric-label">Detection Result</span>
<span class="metric-icon">📈</span>
</div>
<div class="metric-value" id="resultValue">--</div>
</div>
<div class="metric-card">
<div class="metric-header">
<span class="metric-label">Confidence Level</span>
<span class="metric-icon">🎯</span>
</div>
<div class="metric-value" id="confidenceValue">--</div>
</div>
</div>
</div>
</div>

<!-- Control Panel -->
<!-- Professional Control Panel -->
<div class="control-panel" id="controlPanel" style="display: none;">
<button class="control-btn" id="stopBtn">Stop Analysis</button>
<button class="control-btn" id="fullscreenBtn">Fullscreen</button>
<button class="control-btn" id="changeModeBtn">Change Mode</button>
<div class="control-group">
<button class="control-btn primary" id="stopBtn">
<span class="btn-icon">⏹️</span>
<span class="btn-text">Terminate Session</span>
</button>
<button class="control-btn secondary" id="fullscreenBtn">
<span class="btn-icon">⛶</span>
<span class="btn-text">Fullscreen</span>
</button>
<button class="control-btn secondary" id="changeModeBtn">
<span class="btn-icon">⚙️</span>
<span class="btn-text">Reconfigure</span>
</button>
</div>
</div>

<!-- Loading Overlay -->
<!-- Professional Loading Overlay -->
<div class="loading-overlay hidden" id="loadingOverlay">
<div class="loading-content">
<div class="spinner"></div>
<p>Initializing camera...</p>
<div class="loading-spinner"></div>
<div class="loading-text">
<h3>Initializing Analysis Engine</h3>
<p>Establishing secure camera connection...</p>
</div>
</div>
</div>
</div>
Expand Down
Loading
Loading