fixed index.html

0394b2f 12 months ago

11.6 kB

	<!-- templates/index.html -->
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<title>File Upload</title>
	<!-- Add Bootstrap CDN link for styling -->
	<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
	<!-- Add these links to the head section of your HTML -->
	<link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">
	<link href="https://fonts.googleapis.com/css?family=Lora:400,700" rel="stylesheet">

	<style>
	/* Custom CSS for fade-in transition effect */
	.card {
	opacity: 0;
	transition: opacity 0.5s ease-in-out;
	}

	.card.show {
	opacity: 1;
	}
	body {
	font-family: 'Lora', sans-serif;
	font-size: 16px;
	background-color: #eaf4ea; /* Light green background */
	color: #333; /* Dark text color */
	}

	h1, h2, h3, h4, h5, h6 {
	font-family: 'Roboto', serif;
	font-weight: bold;
	}

	.container {
	background-color: rgba(255, 255, 255, 0.9); /* Semi-transparent white background for content */
	border-radius: 15px;
	padding: 20px;
	margin-top: 50px;
	}

	h1, h2 {
	color: #4CAF50; /* Dark green title color */
	}

	button.btn-primary {
	background-color: #4CAF50; /* Dark green button color */
	border: none;
	}

	button.btn-primary:hover {
	background-color: #45a049; /* Slightly darker green on hover */
	}

	.card {
	background-color: #f8f9fa; /* Light gray background for cards */
	border: 1px solid #ddd; /* Light gray border */
	border-radius: 10px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow */
	}

	.card-header {
	background-color: #4CAF50; /* Dark green header color for cards */
	color: white;
	border-radius: 10px 10px 0 0;
	}

	.card-body {
	padding: 15px;
	}

	.list-group-item {
	border: none;
	}

	.btn-success {
	background-color: #28a745; /* Dark green for success button */
	border: none;
	}

	.btn-success:hover {
	background-color: #218838; /* Slightly darker green on hover */
	}

	#predictions:hover::before {
	content: "Tables displaying TPM values corresponding to plant tissues";
	position: absolute;
	bottom: 100%; /* Position the tooltip above the text */
	left: 50%;
	transform: translateX(-50%);
	background-color: #333;
	color: #fff;
	padding: 5px;
	border-radius: 5px;
	font-size: 12px;
	}
	</style>
	</head>
	<body>
	<div class="container">
	<h1 class="mb-4">
	<a href="https://huggingface.co/Gurveer05/FloraBERT" target="_blank" rel="noopener noreferrer" style="color: #218838;">FloraBERT</a>
	</h1>
	<form>
	<div class="form-group">
	<label for="fileInput">Select .txt files:</label>
	<div class="input-group">
	<div class="custom-file">
	<input type="file" class="custom-file-input" id="fileInput" accept=".txt" multiple onchange="displaySelectedFiles()">
	<label class="custom-file-label" for="fileInput">Choose files</label>
	</div>
	</div>
	</div>
	<button type="button" class="btn btn-primary" id="uploadButton" onclick="processFiles()">Upload and Process</button>
	<p id="uploadMessage" class="text-muted mt-2"></p>
	<div id="selectedFiles" class="mt-2"></div>
	</form>

	<h2 class="mt-5" id="predictions" title="Table displaying TPM values corresponding to plant tissues">Predictions</h2>
	<div id="loadingIcon" class="d-none">
	<p class="text-muted">Processing... <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span></p>
	</div>
	<div id="predictionsList" class="mt-3"></div>

	<button type="button" class="btn btn-success mt-3" onclick="downloadAllPredictions()">Download All Predictions</button>
	</div>

	<script>
	// Maintain a cache for predictions
	const predictionsCache = {};

	function displaySelectedFiles() {
	const fileInput = document.getElementById('fileInput');
	const selectedFilesContainer = document.getElementById('selectedFiles');
	const files = fileInput.files;

	selectedFilesContainer.innerHTML = '';

	for (let i = 0; i < files.length; i++) {
	const fileName = files[i].name;
	const fileLabel = document.createElement('span');
	fileLabel.innerText = fileName;

	if (i > 0) {
	selectedFilesContainer.appendChild(document.createTextNode(', '));
	}

	selectedFilesContainer.appendChild(fileLabel);
	}
	}

	async function processFiles() {
	const fileInput = document.getElementById('fileInput');
	const files = fileInput.files;

	const uploadButton = document.getElementById('uploadButton');
	const uploadMessage = document.getElementById('uploadMessage');
	const loadingIcon = document.getElementById('loadingIcon');
	const predictionsList = document.getElementById('predictionsList');
	const selectedFilesContainer = document.getElementById('selectedFiles');

	// Disable the upload button
	uploadButton.disabled = true;

	uploadMessage.innerText = ''; // Clear previous messages

	if (files.length === 0) {
	// Update upload message for no file selected
	uploadMessage.innerText = 'Please choose at least one file.';
	// Enable the upload button
	uploadButton.disabled = false;
	return;
	}

	const url = 'http://127.0.0.1:8000';

	loadingIcon.classList.remove('d-none');
	// predictionsList.innerHTML = ''; // Do not clear previous cards

	for (let i = 0; i < files.length; i++) {
	const file = files[i];
	const formData = new FormData();
	formData.append('file', file);

	const response = await fetch(`${url}/uploadfile/`, {
	method: 'POST',
	body: formData
	});

	if (response.ok) {
	const result = await response.json();
	const filename = result.filename;

	const predictionsResponse = await fetch(`${url}/process/${filename}`);
	const predictions = await predictionsResponse.json();

	predictionsCache[filename] = predictions;

	// Display predictions as cards (newest on top)
	if (!document.getElementById(`card-${filename}`)) {
	const cardHtml = `
	<div id="card-${filename}" class="card mt-3">
	<div class="card-header">
	${filename}
	</div>
	<div class="card-body">
	<ul class="list-group list-group-flush">
	${predictions.map((predictionList, index) => `
	<li class="list-group-item">
	<strong>Sequence ${index + 1}</strong>
	<table class="table table-bordered mt-2">
	<thead>
	<tr>
	<th scope="col">Tissue</th>
	<th scope="col">Prediction</th>
	</tr>
	</thead>
	<tbody>
	${predictionList.map(prediction => `
	<tr>
	<td>${prediction.tissue}</td>
	<td>${prediction.prediction}</td>
	</tr>
	`).join('')}
	</tbody>
	</table>
	</li>
	`).join('')}
	</ul>
	</div>
	</div>
	`;
	predictionsList.innerHTML = cardHtml + predictionsList.innerHTML;

	// Trigger fade-in effect
	setTimeout(() => {
	document.querySelectorAll('.card').forEach(card => card.classList.add('show'));
	}, 100);
	}

	// Update upload message immediately
	uploadMessage.innerText = `Processed files!`;

	// Clear the message after a short delay (e.g., 2000 milliseconds)
	setTimeout(() => {
	uploadMessage.innerText = '';
	}, 2000);
	} else {
	console.error('Failed to upload file:', file.name);
	uploadMessage.innerText = `Failed to upload file ${i + 1} of ${files.length}.`;
	}
	}

	// Enable the upload button after all files are processed
	uploadButton.disabled = false;

	// Hide processing icon after all files are processed
	loadingIcon.classList.add('d-none');

	// Clear displayed selected files after processing
	selectedFilesContainer.innerHTML = '';
	}

	function downloadAllPredictions() {
	// Convert predictionsCache to a JSON string
	const predictionsJSON = JSON.stringify(predictionsCache, null, 2);

	// Create a Blob containing the JSON data
	const blob = new Blob([predictionsJSON], { type: 'application/json' });

	// Create a link element and trigger a click to download the file
	const a = document.createElement('a');
	a.href = URL.createObjectURL(blob);
	a.download = 'all_predictions.json';
	a.click();
	}
	</script>

	<!-- Add Bootstrap JS and Popper.js CDN links -->
	<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
	</body>
	</html>