File size: 4,901 Bytes
1dfcad5 389d530 1dfcad5 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 |
{% extends 'base.html' %}
{% block content %}
<section class="py-8">
<h1 class="text-3xl font-bold mb-4">Machine Failure Prediction</h1>
<div class="bg-gray-50 p-6 rounded shadow mb-6">
<h2 class="text-2xl font-semibold mb-2">Upload Machine Failure Data (CSV)</h2>
<form action="{{ url_for('machine_failure.upload_file_machine') }}" method="POST" enctype="multipart/form-data">
<input type="file" name="machine_file" accept=".csv" class="mb-4 block">
<button type="submit" class="btn-learn-more">Upload</button>
</form>
</div>
{% if preview_data %}
<div class="bg-white p-6 rounded shadow mb-6">
<h2 class="text-2xl font-semibold mb-4">Data Preview (First 5 Rows)</h2>
<div class="overflow-x-auto">
<table id="preview-table" class="min-w-full table-auto">
<thead>
<tr>
{% for column in columns %}
<th class="px-4 py-2 bg-gray-100">{{ column }}</th>
{% endfor %}
</tr>
</thead>
<tbody>
{% for row in preview_data %}
<tr>
{% for column in columns %}
<td class="border px-4 py-2">{{ row[column] }}</td>
{% endfor %}
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
<div class="bg-white p-6 rounded shadow">
<h2 class="text-2xl font-semibold mb-4">Summary Statistics</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="p-4 bg-blue-50 rounded">
<p><strong>Total Rows:</strong> <span class="summary-total-rows">{{ summary_stats.total_rows }}</span></p>
<p><strong>Total Columns:</strong> <span class="summary-total-cols">{{ summary_stats.total_columns }}</span></p>
</div>
<div class="p-4 bg-green-50 rounded">
<p><strong>Numeric Columns:</strong> <span class="summary-numeric-cols">{{ summary_stats.numeric_columns|join(', ') }}</span></p>
<p><strong>Categorical Columns:</strong> <span class="summary-categorical-cols">{{ summary_stats.categorical_columns|join(', ') }}</span></p>
</div>
</div>
</div>
<div id="feature-importance" class="bg-white p-6 rounded shadow mt-6 hidden">
<h2 class="text-2xl font-semibold mb-4">Top 5 Feature Importances</h2>
<div id="feature-importance-list"></div>
</div>
<div class="bg-white p-6 rounded shadow mt-6">
<h2 class="text-2xl font-semibold mb-4">Failure Prediction Metrics</h2>
<div class="flex flex-wrap gap-4 mb-4">
<div>
<label class="block font-semibold mb-1">Target Column</label>
<select id="predictTargetCol" class="border rounded p-2">
{% for column in columns %}
<option value="{{ column }}">{{ column }}</option>
{% endfor %}
</select>
</div>
<div>
<label class="block font-semibold mb-1">Model</label>
<select id="predictModel" class="border rounded p-2">
<option value="Random Forest">Random Forest</option>
<option value="XGBoost">XGBoost</option>
<option value="Logistic Regression">Logistic Regression</option>
</select>
</div>
<div class="flex items-end">
<button onclick="runPrediction()" class="btn-learn-more">Run Prediction</button>
</div>
</div>
<div id="predict-metrics" class="mb-4"></div>
<div id="predict-error" class="text-red-600 font-semibold mt-2"></div>
</div>
<div id="single-prediction-section" class="bg-white p-6 rounded shadow mt-6 hidden">
<h2 class="text-2xl font-semibold mb-4">Predict for a Single Instance</h2>
<form id="single-prediction-form" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mb-4">
</form>
<button onclick="predictSingleInstance()" class="btn-learn-more">Predict</button>
<div id="single-prediction-result" class="mt-4 p-4 bg-blue-100 rounded hidden">
<p class="font-semibold text-lg">Prediction: <span id="prediction-output" class="font-bold text-blue-800"></span></p>
<div id="probability-output" class="mt-2 text-sm"></div>
</div>
<div id="single-prediction-error" class="text-red-600 font-semibold mt-2"></div>
</div>
{% endif %}
</section>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<script src="{{ url_for('static', filename='index.js') }}"></script>
{% endblock %} |