FRA-Insight
This commit is contained in:
Flatlogic Bot
parent
d0d0828381
commit
e47299ebbe
150
assets/css/custom.css
Normal file
150
assets/css/custom.css
Normal file
@ -0,0 +1,150 @@
|
||||
/*
|
||||
Custom Styles for FRA-INSIGHT
|
||||
Theme: "Predictive Power Grid"
|
||||
*/
|
||||
|
||||
:root {
|
||||
--primary: #0047AB; /* Electric Blue */
|
||||
--secondary: #00B386; /* Eco Green */
|
||||
--accent: #FFD700; /* Energy Yellow */
|
||||
--bg-light: #F7FAFC; /* Soft Gray White */
|
||||
--text-primary: #1A1A1A;
|
||||
--text-secondary: #4A5568;
|
||||
--card-bg: #FFFFFF;
|
||||
--border-radius: 0.5rem;
|
||||
--shadow-sm: 0 4px 12px rgba(0,0,0,0.06);
|
||||
--shadow-md: 0 8px 20px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
|
||||
background-color: var(--bg-light);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.navbar-custom {
|
||||
background-color: var(--card-bg);
|
||||
box-shadow: var(--shadow-sm);
|
||||
padding: 1rem 0;
|
||||
}
|
||||
|
||||
.navbar-custom .navbar-brand {
|
||||
font-family: 'Poppins', sans-serif;
|
||||
font-weight: 600;
|
||||
font-size: 1.75rem;
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.navbar-custom .navbar-brand i {
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
.navbar-custom .nav-link {
|
||||
font-family: 'Poppins', sans-serif;
|
||||
font-weight: 500;
|
||||
color: var(--text-secondary);
|
||||
margin: 0 0.5rem;
|
||||
border-radius: 0.25rem;
|
||||
transition: color 0.3s ease, background-color 0.3s ease;
|
||||
}
|
||||
|
||||
.navbar-custom .nav-link:hover,
|
||||
.navbar-custom .nav-link.active {
|
||||
color: var(--primary);
|
||||
background-color: rgba(0, 71, 171, 0.05);
|
||||
}
|
||||
|
||||
.body-content {
|
||||
padding: 2rem 0;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-family: 'Poppins', sans-serif;
|
||||
font-weight: 600;
|
||||
font-size: 2.5rem;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-family: 'Poppins', sans-serif;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.card {
|
||||
border: none;
|
||||
border-radius: var(--border-radius);
|
||||
box-shadow: var(--shadow-sm);
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
|
||||
.card-title {
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background-color: var(--primary);
|
||||
border-color: var(--primary);
|
||||
font-weight: 500;
|
||||
padding: 0.75rem 1.5rem;
|
||||
border-radius: 0.25rem;
|
||||
transition: background-color 0.3s ease, border-color 0.3s ease;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background-color: #003a8c;
|
||||
border-color: #003a8c;
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background-color: var(--secondary);
|
||||
border-color: var(--secondary);
|
||||
font-weight: 500;
|
||||
padding: 0.75rem 1.5rem;
|
||||
border-radius: 0.25rem;
|
||||
transition: background-color 0.3s ease, border-color 0.3s ease;
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background-color: #009a72;
|
||||
border-color: #009a72;
|
||||
}
|
||||
|
||||
.kpi-card {
|
||||
text-align: center;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.kpi-number {
|
||||
font-family: 'Roboto Mono', monospace;
|
||||
font-size: 3rem;
|
||||
font-weight: 700;
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.kpi-label {
|
||||
font-size: 1.1rem;
|
||||
color: var(--text-secondary);
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.footer {
|
||||
background-color: var(--card-bg);
|
||||
padding: 2rem 0;
|
||||
margin-top: 4rem;
|
||||
text-align: center;
|
||||
font-size: 0.9rem;
|
||||
color: var(--text-secondary);
|
||||
box-shadow: 0 -4px 12px rgba(0,0,0,0.04);
|
||||
}
|
||||
|
||||
/* Plotly chart container */
|
||||
.chart-container {
|
||||
min-height: 450px;
|
||||
width: 100%;
|
||||
}
|
||||
2
assets/js/main.js
Normal file
2
assets/js/main.js
Normal file
@ -0,0 +1,2 @@
|
||||
// Custom JS for FRA-INSIGHT
|
||||
// Future interactivity will go here.
|
||||
175
federated.php
Normal file
175
federated.php
Normal file
@ -0,0 +1,175 @@
|
||||
<?php
|
||||
$page_title = "Federated Learning";
|
||||
include 'includes/header.php';
|
||||
?>
|
||||
<style>
|
||||
.federated-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 400px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.fl-node {
|
||||
position: absolute;
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
padding: 10px;
|
||||
font-size: 0.9rem;
|
||||
box-shadow: var(--shadow-sm);
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||
}
|
||||
.fl-node.central {
|
||||
width: 160px;
|
||||
height: 160px;
|
||||
background-color: var(--primary);
|
||||
color: white;
|
||||
z-index: 10;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
.fl-node.local {
|
||||
background-color: var(--card-bg);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
.fl-line {
|
||||
position: absolute;
|
||||
background-color: #ccc;
|
||||
z-index: 1;
|
||||
transform-origin: 0 0;
|
||||
transition: background-color 0.5s ease;
|
||||
}
|
||||
.fl-line.animated {
|
||||
background-color: var(--accent);
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="container mt-5">
|
||||
<h1 class="page-title">Federated Learning Simulation</h1>
|
||||
<p class="lead mb-5">Visualizing how distributed learning improves the national model without sharing sensitive data.</p>
|
||||
|
||||
<div class="row g-4">
|
||||
<div class="col-lg-8">
|
||||
<div class="card h-100">
|
||||
<div class="card-body">
|
||||
<div id="federated-visualization" class="federated-container"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-4">
|
||||
<div class="card h-100">
|
||||
<div class="card-header">
|
||||
<h5 class="mb-0">Simulation Log</h5>
|
||||
</div>
|
||||
<div id="log-container" class="card-body" style="max-height: 350px; overflow-y: auto; font-family: 'Roboto Mono', monospace; font-size: 0.85rem;">
|
||||
<p class="text-muted">Click the button to start the simulation...</p>
|
||||
</div>
|
||||
<div class="card-footer text-center">
|
||||
<button id="trigger-round" class="btn btn-primary">Trigger New Aggregation Round</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const container = document.getElementById('federated-visualization');
|
||||
const logContainer = document.getElementById('log-container');
|
||||
const triggerButton = document.getElementById('trigger-round');
|
||||
let round = 0;
|
||||
|
||||
const nodes = [
|
||||
{ id: 'central', name: 'National Model', isCentral: true },
|
||||
{ id: 'node1', name: 'Mumbai Substation', angle: 0 },
|
||||
{ id: 'node2', name: 'Delhi Substation', angle: 72 },
|
||||
{ id: 'node3', name: 'Chennai Substation', angle: 144 },
|
||||
{ id: 'node4', name: 'Kolkata Substation', angle: 216 },
|
||||
{ id: 'node5', name: 'Bangalore Substation', angle: 288 },
|
||||
];
|
||||
|
||||
const radius = 150;
|
||||
const containerWidth = container.offsetWidth;
|
||||
const containerHeight = container.offsetHeight;
|
||||
const centerX = containerWidth / 2;
|
||||
const centerY = containerHeight / 2;
|
||||
|
||||
// Create nodes and lines
|
||||
nodes.forEach(node => {
|
||||
const nodeEl = document.createElement('div');
|
||||
nodeEl.id = node.id;
|
||||
nodeEl.className = `fl-node ${node.isCentral ? 'central' : 'local'}`;
|
||||
nodeEl.innerHTML = `<strong>${node.name}</strong>`;
|
||||
if (node.isCentral) {
|
||||
nodeEl.style.left = `${centerX - 80}px`;
|
||||
nodeEl.style.top = `${centerY - 80}px`;
|
||||
} else {
|
||||
const x = centerX + radius * Math.cos(node.angle * Math.PI / 180) - 60;
|
||||
const y = centerY + radius * Math.sin(node.angle * Math.PI / 180) - 60;
|
||||
nodeEl.style.left = `${x}px`;
|
||||
nodeEl.style.top = `${y}px`;
|
||||
|
||||
// Draw line from local to central
|
||||
const line = document.createElement('div');
|
||||
line.id = `line-${node.id}`;
|
||||
line.className = 'fl-line';
|
||||
const angle = Math.atan2(y - centerY, x - centerX) * 180 / Math.PI;
|
||||
const length = Math.sqrt(Math.pow(x - centerX, 2) + Math.pow(y - centerY, 2));
|
||||
line.style.width = `${length}px`;
|
||||
line.style.height = '2px';
|
||||
line.style.left = `${centerX}px`;
|
||||
line.style.top = `${centerY}px`;
|
||||
line.style.transform = `rotate(${angle}deg)`;
|
||||
container.appendChild(line);
|
||||
}
|
||||
container.appendChild(nodeEl);
|
||||
});
|
||||
|
||||
function log(message, type = 'info') {
|
||||
const colors = { info: 'text-secondary', success: 'text-success', emphasis: 'text-primary' };
|
||||
logContainer.innerHTML += `<p class="mb-1 ${colors[type]}">[${new Date().toLocaleTimeString()}] ${message}</p>`;
|
||||
logContainer.scrollTop = logContainer.scrollHeight;
|
||||
}
|
||||
|
||||
triggerButton.addEventListener('click', function() {
|
||||
if (round === 0) {
|
||||
logContainer.innerHTML = '';
|
||||
}
|
||||
round++;
|
||||
log(`Starting Aggregation Round ${round}...`, 'emphasis');
|
||||
this.disabled = true;
|
||||
|
||||
let delay = 500;
|
||||
nodes.filter(n => !n.isCentral).forEach(node => {
|
||||
setTimeout(() => {
|
||||
log(`Node ${node.name} sending model updates...`);
|
||||
document.getElementById(`line-${node.id}`).classList.add('animated');
|
||||
}, delay);
|
||||
delay += 300;
|
||||
});
|
||||
|
||||
setTimeout(() => {
|
||||
log('All updates received. Aggregating national model...');
|
||||
const centralNode = document.getElementById('central');
|
||||
centralNode.style.transform = 'scale(1.1)';
|
||||
}, delay + 500);
|
||||
|
||||
setTimeout(() => {
|
||||
log(`Round ${round} complete. National model updated.`, 'success');
|
||||
document.getElementById('central').style.transform = 'scale(1)';
|
||||
nodes.filter(n => !n.isCentral).forEach(node => {
|
||||
document.getElementById(`line-${node.id}`).classList.remove('animated');
|
||||
});
|
||||
this.disabled = false;
|
||||
}, delay + 1500);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<?php include 'includes/footer.php'; ?>
|
||||
112
green.php
Normal file
112
green.php
Normal file
@ -0,0 +1,112 @@
|
||||
<?php
|
||||
$page_title = "Green Impact";
|
||||
include 'includes/header.php';
|
||||
?>
|
||||
|
||||
<div class="container mt-5">
|
||||
<h1 class="page-title">Green Impact</h1>
|
||||
<p class="lead mb-5">Tracking our contribution to a more sustainable and environmentally friendly power grid.</p>
|
||||
|
||||
<!-- Green KPIs -->
|
||||
<div class="row g-4 mb-5">
|
||||
<div class="col-md-4">
|
||||
<div class="card kpi-card bg-success text-white">
|
||||
<div class="card-body">
|
||||
<div class="kpi-number">2.7 tons</div>
|
||||
<div class="kpi-label">CO₂ Emissions Saved</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="card kpi-card bg-info text-white">
|
||||
<div class="card-body">
|
||||
<div class="kpi-number">3,000 L</div>
|
||||
<div class="kpi-label">Transformer Oil Preserved</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="card kpi-card bg-warning text-dark">
|
||||
<div class="card-body">
|
||||
<div class="kpi-number">45 MWh</div>
|
||||
<div class="kpi-label">Energy Loss Prevented</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Charts and Commitment -->
|
||||
<div class="row g-4">
|
||||
<div class="col-lg-8">
|
||||
<div class="card h-100">
|
||||
<div class="card-header">
|
||||
<h5 class="mb-0">Sustainability Trends (Last 12 Months)</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div id="sustainability-chart" class="chart-container"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-4">
|
||||
<div class="card h-100">
|
||||
<div class="card-body d-flex flex-column">
|
||||
<h5 class="card-title">Our Commitment to a Greener Grid</h5>
|
||||
<p class="text-secondary flex-grow-1">By proactively identifying and addressing transformer faults, FRA-INSIGHT not only enhances grid reliability but also plays a crucial role in environmental conservation. Preventing catastrophic failures avoids oil spills and reduces the carbon footprint associated with manufacturing and transporting replacement units. Our goal is a grid that is not just smart, but also sustainable.</p>
|
||||
<button class="btn btn-secondary w-100"><i class="bi bi-file-earmark-zip"></i> Download Sustainability Report</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// Mock data for 12 months
|
||||
const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
|
||||
const co2Saved = Array.from({length: 12}, (_, i) => (i + 1) * 0.2 + Math.random() * 0.1);
|
||||
const oilPreserved = Array.from({length: 12}, (_, i) => (i + 1) * 250 + Math.random() * 100);
|
||||
|
||||
// Create Trend Chart
|
||||
const co2Trace = {
|
||||
x: months,
|
||||
y: co2Saved,
|
||||
name: 'CO₂ Saved (tons)',
|
||||
type: 'scatter',
|
||||
mode: 'lines+markers',
|
||||
line: { color: 'var(--secondary)' }
|
||||
};
|
||||
|
||||
const oilTrace = {
|
||||
x: months,
|
||||
y: oilPreserved,
|
||||
name: 'Oil Preserved (L)',
|
||||
type: 'scatter',
|
||||
mode: 'lines+markers',
|
||||
yaxis: 'y2',
|
||||
line: { color: 'var(--primary)' }
|
||||
};
|
||||
|
||||
const layout = {
|
||||
title: 'Monthly Environmental Savings',
|
||||
xaxis: { title: 'Month' },
|
||||
yaxis: {
|
||||
title: 'CO₂ Saved (tons)',
|
||||
titlefont: { color: 'var(--secondary)' },
|
||||
tickfont: { color: 'var(--secondary)' }
|
||||
},
|
||||
yaxis2: {
|
||||
title: 'Oil Preserved (L)',
|
||||
titlefont: { color: 'var(--primary)' },
|
||||
tickfont: { color: 'var(--primary)' },
|
||||
overlaying: 'y',
|
||||
side: 'right'
|
||||
},
|
||||
legend: { x: 0, y: 1.2, orientation: 'h' },
|
||||
margin: { t: 60, l: 60, r: 60, b: 60 }
|
||||
};
|
||||
|
||||
Plotly.newPlot('sustainability-chart', [co2Trace, oilTrace], layout, {responsive: true});
|
||||
});
|
||||
</script>
|
||||
|
||||
<?php include 'includes/footer.php'; ?>
|
||||
13
includes/footer.php
Normal file
13
includes/footer.php
Normal file
@ -0,0 +1,13 @@
|
||||
</main>
|
||||
|
||||
<footer class="bg-dark text-white text-center p-4 mt-5">
|
||||
<div class="container">
|
||||
<p class="mb-0">© <?php echo date("Y"); ?> FRA-INSIGHT. All Rights Reserved.</p>
|
||||
<p>Developed by Flatlogic | SIH 2025</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
|
||||
<script src="assets/js/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
75
includes/header.php
Normal file
75
includes/header.php
Normal file
@ -0,0 +1,75 @@
|
||||
<?php
|
||||
$current_page = basename($_SERVER['PHP_SELF']);
|
||||
$page_title = isset($page_title) ? $page_title : "FRA-INSIGHT";
|
||||
|
||||
$nav_items = [
|
||||
'index.php' => 'Home Dashboard',
|
||||
'upload.php' => 'Upload & Analyze',
|
||||
'resilience.php' => 'Resilience Index',
|
||||
'policy.php' => 'Policy View',
|
||||
'federated.php' => 'Federated Learning',
|
||||
'green.php' => 'Green Impact'
|
||||
];
|
||||
?>
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
|
||||
<title><?php echo htmlspecialchars($page_title); ?> | FRA-INSIGHT</title>
|
||||
<meta name="description" content="AI-based Explainable Diagnostics for India’s Power Infrastructure.">
|
||||
<meta name="keywords" content="FRA-INSIGHT, transformer health, power grid, AI diagnostics, predictive maintenance">
|
||||
|
||||
<!-- Open Graph / Facebook -->
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:title" content="<?php echo htmlspecialchars($page_title); ?> | FRA-INSIGHT">
|
||||
<meta property="og:description" content="AI-based Explainable Diagnostics for India’s Power Infrastructure.">
|
||||
<meta property="og:image" content="<?php echo htmlspecialchars($_SERVER['PROJECT_IMAGE_URL'] ?? ''); ?>">
|
||||
|
||||
<!-- Twitter -->
|
||||
<meta property="twitter:card" content="summary_large_image">
|
||||
<meta property="twitter:title" content="<?php echo htmlspecialchars($page_title); ?> | FRA-INSIGHT">
|
||||
<meta property="twitter:description" content="AI-based Explainable Diagnostics for India’s Power Infrastructure.">
|
||||
<meta property="twitter:image" content="<?php echo htmlspecialchars($_SERVER['PROJECT_IMAGE_URL'] ?? ''); ?>">
|
||||
|
||||
<!-- Stylesheets -->
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
|
||||
|
||||
<!-- Fonts -->
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700&family=Inter:wght@400;500&family=Roboto+Mono:wght@400;700&display=swap" rel="stylesheet">
|
||||
|
||||
<link rel="stylesheet" href="assets/css/custom.css?v=<?php echo time(); ?>">
|
||||
|
||||
<!-- JS Libraries -->
|
||||
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/qrious@4.0.2/dist/qrious.min.js"></script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<nav class="navbar navbar-expand-lg navbar-custom">
|
||||
<div class="container">
|
||||
<a class="navbar-brand" href="index.php">
|
||||
<i class="bi bi-lightning-charge-fill"></i>
|
||||
FRA-INSIGHT
|
||||
</a>
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarNav">
|
||||
<ul class="navbar-nav ms-auto">
|
||||
<?php foreach ($nav_items as $file => $name): ?>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link <?php echo ($current_page == $file) ? 'active' : ''; ?>" href="<?php echo $file; ?>"><?php echo $name; ?></a>
|
||||
</li>
|
||||
<?php endforeach; ?>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<main>
|
||||
252
index.php
252
index.php
@ -1,150 +1,112 @@
|
||||
<?php
|
||||
declare(strict_types=1);
|
||||
@ini_set('display_errors', '1');
|
||||
@error_reporting(E_ALL);
|
||||
@date_default_timezone_set('UTC');
|
||||
$page_title = "Home Dashboard";
|
||||
include 'includes/header.php';
|
||||
?>
|
||||
|
||||
$phpVersion = PHP_VERSION;
|
||||
$now = date('Y-m-d H:i:s');
|
||||
?>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>New Style</title>
|
||||
<?php
|
||||
// Read project preview data from environment
|
||||
$projectDescription = $_SERVER['PROJECT_DESCRIPTION'] ?? '';
|
||||
$projectImageUrl = $_SERVER['PROJECT_IMAGE_URL'] ?? '';
|
||||
?>
|
||||
<?php if ($projectDescription): ?>
|
||||
<!-- Meta description -->
|
||||
<meta name="description" content='<?= htmlspecialchars($projectDescription) ?>' />
|
||||
<!-- Open Graph meta tags -->
|
||||
<meta property="og:description" content="<?= htmlspecialchars($projectDescription) ?>" />
|
||||
<!-- Twitter meta tags -->
|
||||
<meta property="twitter:description" content="<?= htmlspecialchars($projectDescription) ?>" />
|
||||
<?php endif; ?>
|
||||
<?php if ($projectImageUrl): ?>
|
||||
<!-- Open Graph image -->
|
||||
<meta property="og:image" content="<?= htmlspecialchars($projectImageUrl) ?>" />
|
||||
<!-- Twitter image -->
|
||||
<meta property="twitter:image" content="<?= htmlspecialchars($projectImageUrl) ?>" />
|
||||
<?php endif; ?>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
:root {
|
||||
--bg-color-start: #6a11cb;
|
||||
--bg-color-end: #2575fc;
|
||||
--text-color: #ffffff;
|
||||
--card-bg-color: rgba(255, 255, 255, 0.01);
|
||||
--card-border-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: 'Inter', sans-serif;
|
||||
background: linear-gradient(45deg, var(--bg-color-start), var(--bg-color-end));
|
||||
color: var(--text-color);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: 100vh;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
body::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><path d="M-10 10L110 10M10 -10L10 110" stroke-width="1" stroke="rgba(255,255,255,0.05)"/></svg>');
|
||||
animation: bg-pan 20s linear infinite;
|
||||
z-index: -1;
|
||||
}
|
||||
@keyframes bg-pan {
|
||||
0% { background-position: 0% 0%; }
|
||||
100% { background-position: 100% 100%; }
|
||||
}
|
||||
main {
|
||||
padding: 2rem;
|
||||
}
|
||||
.card {
|
||||
background: var(--card-bg-color);
|
||||
border: 1px solid var(--card-border-color);
|
||||
border-radius: 16px;
|
||||
padding: 2rem;
|
||||
backdrop-filter: blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
.loader {
|
||||
margin: 1.25rem auto 1.25rem;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border: 3px solid rgba(255, 255, 255, 0.25);
|
||||
border-top-color: #fff;
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
@keyframes spin {
|
||||
from { transform: rotate(0deg); }
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
.hint {
|
||||
opacity: 0.9;
|
||||
}
|
||||
.sr-only {
|
||||
position: absolute;
|
||||
width: 1px; height: 1px;
|
||||
padding: 0; margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
white-space: nowrap; border: 0;
|
||||
}
|
||||
h1 {
|
||||
font-size: 3rem;
|
||||
font-weight: 700;
|
||||
margin: 0 0 1rem;
|
||||
letter-spacing: -1px;
|
||||
}
|
||||
p {
|
||||
margin: 0.5rem 0;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
code {
|
||||
background: rgba(0,0,0,0.2);
|
||||
padding: 2px 6px;
|
||||
border-radius: 4px;
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
|
||||
}
|
||||
footer {
|
||||
position: absolute;
|
||||
bottom: 1rem;
|
||||
font-size: 0.8rem;
|
||||
opacity: 0.7;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<div class="container mt-5">
|
||||
<div class="text-center mb-5">
|
||||
<h1 style="font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 3rem; color: var(--primary);">FRA-INSIGHT</h1>
|
||||
<p class="lead" style="font-family: 'Inter', sans-serif; color: var(--text-secondary); font-size: 1.25rem;">AI-based Explainable Diagnostics for India’s Power Infrastructure</p>
|
||||
</div>
|
||||
|
||||
<!-- National Stats -->
|
||||
<div class="row g-4 mb-5">
|
||||
<div class="col-md-3">
|
||||
<div class="card kpi-card">
|
||||
<div class="card-body">
|
||||
<div class="kpi-number">800,000</div>
|
||||
<div class="kpi-label">Total Transformers</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<div class="card kpi-card">
|
||||
<div class="card-body">
|
||||
<div class="kpi-number text-danger">127</div>
|
||||
<div class="kpi-label">Risk Zones</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<div class="card kpi-card">
|
||||
<div class="card-body">
|
||||
<div class="kpi-number" style="color: var(--secondary);">2.7 tons</div>
|
||||
<div class="kpi-label">CO₂ Saved</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<div class="card kpi-card">
|
||||
<div class="card-body">
|
||||
<div class="kpi-number" style="color: var(--accent);">3,000 L</div>
|
||||
<div class="kpi-label">Oil Preserved</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Map Section -->
|
||||
<div class="card">
|
||||
<h1>Analyzing your requirements and generating your website…</h1>
|
||||
<div class="loader" role="status" aria-live="polite" aria-label="Applying initial changes">
|
||||
<span class="sr-only">Loading…</span>
|
||||
<div class="card-header">
|
||||
<h5 class="card-title mb-0">National Transformer Health Map</h5>
|
||||
</div>
|
||||
<p class="hint"><?= ($_SERVER['HTTP_HOST'] ?? '') === 'appwizzy.com' ? 'AppWizzy' : 'Flatlogic' ?> AI is collecting your requirements and applying the first changes.</p>
|
||||
<p class="hint">This page will update automatically as the plan is implemented.</p>
|
||||
<p>Runtime: PHP <code><?= htmlspecialchars($phpVersion) ?></code> — UTC <code><?= htmlspecialchars($now) ?></code></p>
|
||||
<div class="card-body">
|
||||
<div id="map-container" class="chart-container"></div>
|
||||
</div>
|
||||
</main>
|
||||
<footer>
|
||||
Page updated: <?= htmlspecialchars($now) ?> (UTC)
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
</div>
|
||||
|
||||
<div class="text-center mt-4">
|
||||
<a href="upload.php" class="btn btn-primary btn-lg">Analyze FRA Data <i class="bi bi-arrow-right"></i></a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// Generate random data points for the map
|
||||
const numPoints = 150;
|
||||
const latitudes = Array.from({length: numPoints}, () => 8 + Math.random() * 28); // India lat range
|
||||
const longitudes = Array.from({length: numPoints}, () => 68 + Math.random() * 30); // India lon range
|
||||
const healthStatus = Array.from({length: numPoints}, () => Math.random()); // 0 -> good, 1 -> bad
|
||||
|
||||
const colors = healthStatus.map(h => {
|
||||
if (h > 0.8) return 'red';
|
||||
if (h > 0.5) return 'yellow';
|
||||
return 'green';
|
||||
});
|
||||
|
||||
const sizes = healthStatus.map(h => {
|
||||
if (h > 0.8) return 15;
|
||||
if (h > 0.5) return 10;
|
||||
return 5;
|
||||
});
|
||||
|
||||
const mapData = [{
|
||||
type: 'scattermapbox',
|
||||
lat: latitudes,
|
||||
lon: longitudes,
|
||||
mode: 'markers',
|
||||
marker: {
|
||||
size: sizes,
|
||||
color: colors,
|
||||
opacity: 0.7
|
||||
},
|
||||
text: healthStatus.map(h => `Health Score: ${(100 * (1-h)).toFixed(0)}%`),
|
||||
hoverinfo: 'text'
|
||||
}];
|
||||
|
||||
const layout = {
|
||||
mapbox: {
|
||||
style: 'open-street-map',
|
||||
center: { lat: 20.5937, lon: 78.9629 },
|
||||
zoom: 3.8
|
||||
},
|
||||
margin: { r: 0, t: 0, b: 0, l: 0 },
|
||||
showlegend: false
|
||||
};
|
||||
|
||||
Plotly.newPlot('map-container', mapData, layout, {responsive: true});
|
||||
});
|
||||
</script>
|
||||
|
||||
<?php include 'includes/footer.php'; ?>
|
||||
|
||||
141
policy.php
Normal file
141
policy.php
Normal file
@ -0,0 +1,141 @@
|
||||
<?php
|
||||
$page_title = "Policy View";
|
||||
include 'includes/header.php';
|
||||
?>
|
||||
|
||||
<div class="container mt-5">
|
||||
<h1 class="page-title">Policy View</h1>
|
||||
<p class="lead mb-5">Aggregated national data for strategic planning and policy making.</p>
|
||||
|
||||
<!-- Main Content Row -->
|
||||
<div class="row g-4">
|
||||
<!-- Left Column: Heatmap -->
|
||||
<div class="col-lg-8">
|
||||
<div class="card h-100">
|
||||
<div class="card-header">
|
||||
<h5 class="mb-0">National Resilience Heatmap</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div id="india-heatmap" class="chart-container"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right Column: Policy Section & Charts -->
|
||||
<div class="col-lg-4">
|
||||
<div class="card mb-4">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Policy Impact</h5>
|
||||
<p class="text-secondary">From Diagnosis to National Planning.</p>
|
||||
<p>The aggregated data provides insights for resource allocation, pre-emptive maintenance scheduling, and long-term grid fortification strategies. By identifying high-risk zones, policy makers can direct investments to areas with the most critical need.</p>
|
||||
<button class="btn btn-primary w-100"><i class="bi bi-download"></i> Download National Resilience Report</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div id="high-risk-chart" class="chart-container" style="min-height: 280px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- District-level chart -->
|
||||
<div class="row mt-4">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div id="district-health-chart" class="chart-container"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', async function() {
|
||||
// URL for India GeoJSON data
|
||||
const geoJsonUrl = 'https://cdn.jsdelivr.net/gh/udit-001/india-maps-data/geojson/india.geojson';
|
||||
|
||||
try {
|
||||
// Fetch GeoJSON
|
||||
const response = await fetch(geoJsonUrl);
|
||||
if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
|
||||
const indiaGeoJSON = await response.json();
|
||||
|
||||
// Mock data for states
|
||||
const stateNames = indiaGeoJSON.features.map(feature => feature.properties.ST_NM);
|
||||
const healthData = stateNames.map(name => ({
|
||||
state: name,
|
||||
health: Math.floor(Math.random() * 50) + 50 // Health score 50-100
|
||||
}));
|
||||
|
||||
// 1. Create Choropleth Heatmap
|
||||
const mapData = [{
|
||||
type: 'choroplethmapbox',
|
||||
geojson: indiaGeoJSON,
|
||||
locations: healthData.map(d => d.state),
|
||||
z: healthData.map(d => d.health),
|
||||
featureidkey: 'properties.ST_NM',
|
||||
colorscale: 'Viridis',
|
||||
reversescale: true,
|
||||
marker: { opacity: 0.7 },
|
||||
colorbar: { title: 'Health Score' }
|
||||
}];
|
||||
|
||||
const mapLayout = {
|
||||
mapbox: {
|
||||
style: 'carto-positron',
|
||||
center: { lat: 20.5937, lon: 78.9629 },
|
||||
zoom: 3.5
|
||||
},
|
||||
margin: { r: 0, t: 0, b: 0, l: 0 }
|
||||
};
|
||||
|
||||
Plotly.newPlot('india-heatmap', mapData, mapLayout, {responsive: true});
|
||||
|
||||
} catch (error) {
|
||||
console.error("Failed to load GeoJSON data:", error);
|
||||
document.getElementById('india-heatmap').innerHTML = '<div class="alert alert-danger">Failed to load map data. Please check the console for details.</div>';
|
||||
}
|
||||
|
||||
// 2. High-Risk Transformers Chart
|
||||
const riskData = {
|
||||
zones: ['North', 'South', 'East', 'West', 'Central'],
|
||||
count: [25, 18, 32, 41, 11]
|
||||
};
|
||||
const highRiskChart = [{
|
||||
x: riskData.zones,
|
||||
y: riskData.count,
|
||||
type: 'bar',
|
||||
marker: { color: 'var(--primary)' }
|
||||
}];
|
||||
const highRiskLayout = {
|
||||
title: 'High-Risk Transformers by Zone',
|
||||
xaxis: { title: 'Zone' },
|
||||
yaxis: { title: 'Number of Units' },
|
||||
margin: { t: 40, l: 50, r: 20, b: 40 }
|
||||
};
|
||||
Plotly.newPlot('high-risk-chart', highRiskChart, {responsive: true});
|
||||
|
||||
// 3. Average Health by District Chart
|
||||
const districtData = {
|
||||
districts: ['Mumbai', 'Pune', 'Nagpur', 'Thane', 'Nashik', 'Aurangabad', 'Solapur', 'Amravati'],
|
||||
health: [85, 78, 92, 81, 76, 88, 72, 90]
|
||||
};
|
||||
const districtHealthChart = [{
|
||||
x: districtData.districts,
|
||||
y: districtData.health,
|
||||
type: 'line',
|
||||
marker: { color: 'var(--secondary)' }
|
||||
}];
|
||||
const districtHealthLayout = {
|
||||
title: 'Average Health by District (Sample)',
|
||||
xaxis: { title: 'District' },
|
||||
yaxis: { title: 'Average Health Score' },
|
||||
margin: { t: 40, l: 50, r: 20, b: 40 }
|
||||
};
|
||||
Plotly.newPlot('district-health-chart', districtHealthChart, {responsive: true});
|
||||
});
|
||||
</script>
|
||||
|
||||
<?php include 'includes/footer.php'; ?>
|
||||
23
privacy.php
Normal file
23
privacy.php
Normal file
@ -0,0 +1,23 @@
|
||||
<?php require_once 'includes/header.php'; ?>
|
||||
|
||||
<div class="container py-5">
|
||||
<h1>Privacy Policy</h1>
|
||||
<p class="lead">Your privacy is important to us. This privacy statement explains the personal data FRA-INSIGHT processes, how FRA-INSIGHT processes it, and for what purposes.</p>
|
||||
|
||||
<h2>1. Data We Collect</h2>
|
||||
<p>This is a placeholder privacy policy. The application currently does not collect any personal data from public users.</p>
|
||||
|
||||
<h2>2. How We Use Data</h2>
|
||||
<p>Placeholder text. When features are added that collect data (like a contact form or user accounts), this section will be updated to describe how that data is used.</p>
|
||||
|
||||
<h2>3. Cookies</h2>
|
||||
<p>Placeholder text. We may use cookies to enhance your experience. Our use of cookies will be detailed here.</p>
|
||||
|
||||
<h2>4. Your Rights</h2>
|
||||
<p>Placeholder text. Information about user rights regarding their data will be listed here.</p>
|
||||
|
||||
<h2>5. Contact Us</h2>
|
||||
<p>If you have any questions about this Privacy Policy, please contact us (contact information to be provided).</p>
|
||||
</div>
|
||||
|
||||
<?php require_once 'includes/footer.php'; ?>
|
||||
140
resilience.php
Normal file
140
resilience.php
Normal file
@ -0,0 +1,140 @@
|
||||
<?php
|
||||
$page_title = "Resilience Index";
|
||||
include 'includes/header.php';
|
||||
?>
|
||||
|
||||
<div class="container mt-5">
|
||||
<h1 class="page-title">Resilience Index</h1>
|
||||
<p class="lead mb-5">An overview of transformer fleet health and digital twin visualization.</p>
|
||||
|
||||
<div class="row">
|
||||
<!-- Left Column: Table and Actions -->
|
||||
<div class="col-lg-6">
|
||||
<div class="card h-100">
|
||||
<div class="card-header">
|
||||
<h5 class="mb-0">Transformer Health Scores</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="table-responsive">
|
||||
<table class="table table-hover">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Transformer ID</th>
|
||||
<th>Location</th>
|
||||
<th>Resilience Index</th>
|
||||
<th>Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="health-table-body"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer text-center">
|
||||
<button class="btn btn-primary"><i class="bi bi-file-earmark-pdf"></i> Generate Maintenance Report</button>
|
||||
<a href="green.php" class="btn btn-secondary"><i class="bi bi-tree"></i> View Sustainability Impact</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right Column: Charts -->
|
||||
<div class="col-lg-6">
|
||||
<!-- Bar Chart -->
|
||||
<div class="card mb-4">
|
||||
<div class="card-body">
|
||||
<div id="resilience-bar-chart" class="chart-container"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 3D Scatter Plot -->
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="mb-0">3D Digital Twin</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div id="digital-twin-chart" class="chart-container"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// Mock Data
|
||||
const locations = ['Mumbai', 'Delhi', 'Bangalore', 'Chennai', 'Kolkata', 'Hyderabad', 'Pune', 'Ahmedabad'];
|
||||
const transformers = Array.from({length: 8}, (_, i) => {
|
||||
const health = Math.floor(Math.random() * 60) + 40; // Score between 40 and 100
|
||||
let status, color;
|
||||
if (health < 60) {
|
||||
status = 'Critical';
|
||||
color = 'red';
|
||||
} else if (health < 85) {
|
||||
status = 'Warning';
|
||||
color = 'yellow';
|
||||
} else {
|
||||
status = 'Healthy';
|
||||
color = 'green';
|
||||
}
|
||||
return {
|
||||
id: `TRF-${1001 + i}`,
|
||||
location: locations[i],
|
||||
health: health,
|
||||
status: status,
|
||||
color: color,
|
||||
x: Math.random() * 100,
|
||||
y: Math.random() * 100,
|
||||
z: Math.random() * 100
|
||||
};
|
||||
});
|
||||
|
||||
// 1. Populate Table
|
||||
const tableBody = document.getElementById('health-table-body');
|
||||
transformers.forEach(t => {
|
||||
const row = `<tr>
|
||||
<td>${t.id}</td>
|
||||
<td>${t.location}</td>
|
||||
<td><strong>${t.health}</strong></td>
|
||||
<td><span class="badge bg-${t.status === 'Healthy' ? 'success' : (t.status === 'Warning' ? 'warning' : 'danger')} text-dark">${t.status}</span></td>
|
||||
</tr>`;
|
||||
tableBody.innerHTML += row;
|
||||
});
|
||||
|
||||
// 2. Create Bar Chart
|
||||
const barChartData = [{
|
||||
x: transformers.map(t => t.id),
|
||||
y: transformers.map(t => t.health),
|
||||
type: 'bar',
|
||||
marker: {
|
||||
color: transformers.map(t => t.color)
|
||||
}
|
||||
}];
|
||||
const barLayout = {
|
||||
title: 'Resilience Index by Transformer',
|
||||
xaxis: { title: 'Transformer ID' },
|
||||
yaxis: { title: 'Health Score (0-100)' },
|
||||
margin: { t: 40, l: 60, r: 20, b: 60 }
|
||||
};
|
||||
Plotly.newPlot('resilience-bar-chart', barChartData, barLayout, {responsive: true});
|
||||
|
||||
// 3. Create 3D Digital Twin
|
||||
const scatter3dData = [{
|
||||
x: transformers.map(t => t.x),
|
||||
y: transformers.map(t => t.y),
|
||||
z: transformers.map(t => t.z),
|
||||
mode: 'markers',
|
||||
type: 'scatter3d',
|
||||
marker: {
|
||||
color: transformers.map(t => t.color),
|
||||
size: 8
|
||||
},
|
||||
text: transformers.map(t => `${t.id}<br>Health: ${t.health}`),
|
||||
hoverinfo: 'text'
|
||||
}];
|
||||
const scatterLayout = {
|
||||
title: 'Fault Zone Visualization',
|
||||
margin: { l: 0, r: 0, b: 0, t: 40 }
|
||||
};
|
||||
Plotly.newPlot('digital-twin-chart', scatter3dData, scatterLayout, {responsive: true});
|
||||
});
|
||||
</script>
|
||||
|
||||
<?php include 'includes/footer.php'; ?>
|
||||
19
sitemap.xml
Normal file
19
sitemap.xml
Normal file
@ -0,0 +1,19 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<urlset
|
||||
xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
|
||||
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
|
||||
xsi:schemaLocation="http://www.sitemaps.org/schemas/sitemap/0.9
|
||||
http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd">
|
||||
|
||||
<url>
|
||||
<loc>/</loc>
|
||||
<lastmod>2025-10-15T00:00:00+00:00</lastmod>
|
||||
<priority>1.00</priority>
|
||||
</url>
|
||||
<url>
|
||||
<loc>/privacy.php</loc>
|
||||
<lastmod>2025-10-15T00:00:00+00:00</lastmod>
|
||||
<priority>0.80</priority>
|
||||
</url>
|
||||
|
||||
</urlset>
|
||||
185
upload.php
Normal file
185
upload.php
Normal file
@ -0,0 +1,185 @@
|
||||
<?php
|
||||
$page_title = "Upload & Analyze FRA";
|
||||
include 'includes/header.php';
|
||||
?>
|
||||
|
||||
<div class="container mt-5">
|
||||
<div class="row">
|
||||
<div class="col-lg-5">
|
||||
<h1 class="page-title">Upload & Analyze</h1>
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Upload FRA Data File</h5>
|
||||
<form id="upload-form">
|
||||
<div class="mb-3">
|
||||
<label for="fra-file" class="form-label">Accepts .csv, .xls, .txt files. </label>
|
||||
<input class="form-control" type="file" id="fra-file" accept=".csv,.xls,.txt">
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary w-100">Analyze Now</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-7">
|
||||
<h1 class="page-title">Analysis Results</h1>
|
||||
<div id="results-container" class="d-none">
|
||||
<!-- Diagnostic Summary -->
|
||||
<div class="card mb-4">
|
||||
<div class="card-header"><h5 class="mb-0">Diagnostic Summary</h5></div>
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<strong>Fault Type:</strong>
|
||||
<p id="fault-type" class="fs-5"></p>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<strong>Confidence Score:</strong>
|
||||
<p id="confidence-score" class="fs-5"></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- FRA Curve -->
|
||||
<div class="card mb-4">
|
||||
<div class="card-header"><h5 class="mb-0">FRA Curve Visualization</h5></div>
|
||||
<div class="card-body">
|
||||
<div id="fra-chart" class="chart-container"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- XDI & Aadhaar -->
|
||||
<div class="row">
|
||||
<div class="col-md-7">
|
||||
<div class="card">
|
||||
<div class="card-header"><h5 class="mb-0">Explainable Diagnostic Intelligence (XDI)</h5></div>
|
||||
<div class="card-body">
|
||||
<p id="xdi-summary"></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-5">
|
||||
<div class="card text-center">
|
||||
<div class="card-header"><h5 class="mb-0">Transformer Aadhaar ID</h5></div>
|
||||
<div class="card-body">
|
||||
<canvas id="qr-code"></canvas>
|
||||
<p id="aadhaar-id" class="mt-2 mb-0" style="font-family: 'Roboto Mono', monospace;"></p>
|
||||
<span class="badge bg-success"><i class="bi bi-patch-check-fill"></i> Blockchain Verified</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Progress Bar -->
|
||||
<div id="progress-container" class="d-none">
|
||||
<div class="d-flex align-items-center">
|
||||
<strong>Analyzing...</strong>
|
||||
<div class="progress w-100 ms-3" style="height: 20px;">
|
||||
<div id="progress-bar" class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 0%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Initial State Message -->
|
||||
<div id="initial-message" class="text-center p-5">
|
||||
<i class="bi bi-clipboard-data" style="font-size: 4rem; color: #ccc;"></i>
|
||||
<p class="mt-3 text-muted">Your analysis results will appear here.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
document.getElementById('upload-form').addEventListener('submit', function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
const fileInput = document.getElementById('fra-file');
|
||||
if (fileInput.files.length === 0) {
|
||||
alert('Please select a file to upload.');
|
||||
return;
|
||||
}
|
||||
|
||||
// Hide initial message and results, show progress bar
|
||||
document.getElementById('initial-message').classList.add('d-none');
|
||||
document.getElementById('results-container').classList.add('d-none');
|
||||
document.getElementById('progress-container').classList.remove('d-none');
|
||||
|
||||
// Simulate analysis progress
|
||||
let progress = 0;
|
||||
const progressBar = document.getElementById('progress-bar');
|
||||
const interval = setInterval(() => {
|
||||
progress += 5;
|
||||
progressBar.style.width = progress + '%';
|
||||
if (progress >= 100) {
|
||||
clearInterval(interval);
|
||||
// Show results after progress completes
|
||||
displayResults();
|
||||
}
|
||||
}, 150);
|
||||
});
|
||||
|
||||
function displayResults() {
|
||||
// Hide progress, show results
|
||||
document.getElementById('progress-container').classList.add('d-none');
|
||||
document.getElementById('results-container').classList.remove('d-none');
|
||||
|
||||
// 1. Generate random diagnostic data
|
||||
const faultTypes = ['Core Deformation', 'Winding Shift', 'Insulation Degradation', 'Bushing Fault'];
|
||||
const randomFault = faultTypes[Math.floor(Math.random() * faultTypes.length)];
|
||||
const randomConfidence = (Math.random() * (98 - 75) + 75).toFixed(2);
|
||||
const xdiMessages = {
|
||||
'Core Deformation': 'Analysis indicates a high-frequency resonance shift, consistent with physical core deformation. Recommend immediate physical inspection.',
|
||||
'Winding Shift': 'A significant impedance mismatch was detected in the mid-frequency range, pointing to a probable axial or radial winding shift.',
|
||||
'Insulation Degradation': 'Low-frequency response shows increased capacitance, suggesting moisture ingress or paper insulation breakdown.',
|
||||
'Bushing Fault': 'Resonance peaks in the very high-frequency spectrum are anomalous, indicating a likely partial discharge or fault in the bushing.'
|
||||
};
|
||||
|
||||
document.getElementById('fault-type').textContent = randomFault;
|
||||
document.getElementById('confidence-score').textContent = randomConfidence + '%';
|
||||
document.getElementById('xdi-summary').textContent = xdiMessages[randomFault];
|
||||
|
||||
// 2. Generate FRA Curve
|
||||
const freq = Array.from({length: 200}, (_, i) => 1000 + i * 10000);
|
||||
const magnitude = freq.map(f => -20 * Math.log10(f/1e6) + (Math.random() - 0.5) * 5);
|
||||
const anomalyStart = Math.floor(Math.random() * 100) + 50; // Anomaly between index 50 and 150
|
||||
for(let i = anomalyStart; i < anomalyStart + 20; i++) {
|
||||
magnitude[i] *= 1.2;
|
||||
}
|
||||
|
||||
const fraTrace = {
|
||||
x: freq,
|
||||
y: magnitude,
|
||||
mode: 'lines',
|
||||
name: 'FRA Signature'
|
||||
};
|
||||
const layout = {
|
||||
title: 'Frequency Response Analysis (FRA) Curve',
|
||||
xaxis: { title: 'Frequency (Hz)', type: 'log' },
|
||||
yaxis: { title: 'Magnitude (dB)' },
|
||||
shapes: [{
|
||||
type: 'rect',
|
||||
xref: 'x',
|
||||
yref: 'paper',
|
||||
x0: freq[anomalyStart],
|
||||
y0: 0,
|
||||
x1: freq[anomalyStart + 20],
|
||||
y1: 1,
|
||||
fillcolor: 'rgba(255, 215, 0, 0.4)', // Accent color
|
||||
line: { width: 0 }
|
||||
}],
|
||||
margin: { t: 40, l: 60, r: 20, b: 60 }
|
||||
};
|
||||
Plotly.newPlot('fra-chart', [fraTrace], layout, {responsive: true});
|
||||
|
||||
// 3. Generate Aadhaar ID and QR Code
|
||||
const aadhaarId = 'FRA-AD-' + Math.random().toString(36).substr(2, 9).toUpperCase();
|
||||
document.getElementById('aadhaar-id').textContent = aadhaarId;
|
||||
|
||||
new QRious({
|
||||
element: document.getElementById('qr-code'),
|
||||
value: aadhaarId,
|
||||
size: 120
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<?php include 'includes/footer.php'; ?>
|
||||
Loading…
x
Reference in New Issue
Block a user