34987-vm/upload.php
2025-10-15 16:26:32 +00:00

185 lines
7.9 KiB
PHP

<?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'; ?>