Spaces:

QCDevs
/

Selector

Running

App Files Files Community

Selector / templates /index.html

QCDevs

Update copyright year information

e78b2e5 verified 4 months ago

raw

history blame contribute delete

35.9 kB

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Selector Web Server</title>
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css">
	<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
	<style>
	:root {
	--sidebar-width: 280px;
	--primary-color: #2563eb;
	--sidebar-bg: #f8fafc;
	--header-bg: #f1f5f9;
	--border-color: #e2e8f0;
	--text-primary: #1e293b;
	--text-secondary: #64748b;
	}

	html, body {
	height: 100%;
	width: 100%;
	margin: 0;
	padding: 0;
	overflow: hidden;
	}

	body {
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
	color: var(--text-primary);
	line-height: 1.6;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	}

	.wrapper {
	display: flex;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	overflow: hidden;
	}

	#sidebar {
	min-width: var(--sidebar-width);
	max-width: var(--sidebar-width);
	height: 100%;
	overflow-y: auto;
	background-color: var(--sidebar-bg);
	border-right: 1px solid var(--border-color);
	flex-shrink: 0;
	}

	#content {
	flex: 1;
	height: 100%;
	overflow-y: auto;
	padding: 2rem;
	background-color: white;
	position: relative;
	}

	.section {
	height: 100%;
	overflow-y: auto;
	padding-bottom: 4rem;
	}

	.sidebar-header {
	padding: 1.5rem;
	background: var(--header-bg);
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-bottom: 1px solid var(--border-color);
	}

	#sidebarCollapse, #showSidebarBtn {
	background: transparent;
	border: none;
	padding: 0.5rem;
	color: var(--text-primary);
	border-radius: 0.375rem;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all 0.2s;
	}

	#sidebarCollapse:hover, #showSidebarBtn:hover {
	background: rgba(0, 0, 0, 0.05);
	transform: translateX(2px);
	}

	#sidebarCollapse i {
	transition: transform 0.3s ease;
	}

	#sidebar.active #sidebarCollapse i {
	transform: rotate(180deg);
	}

	#showSidebarBtn {
	position: fixed;
	left: 1.5rem;
	top: 1.5rem;
	z-index: 1000;
	display: none;
	background-color: white;
	border: 1px solid var(--border-color);
	box-shadow: 0 1px 3px rgba(0,0,0,0.1);
	}

	#showSidebarBtn.show {
	display: flex;
	}

	.sidebar-title {
	margin: 0;
	font-weight: 600;
	color: var(--text-primary);
	font-size: 1.125rem;
	}

	.components {
	padding: 1.5rem 0;
	}

	.components a {
	padding: 0.75rem 1.5rem;
	display: flex;
	align-items: center;
	color: var(--text-secondary);
	text-decoration: none;
	transition: all 0.2s;
	font-weight: 500;
	}

	.components a i {
	margin-right: 0.75rem;
	font-size: 1.25rem;
	}

	.components a:hover {
	background: var(--header-bg);
	color: var(--text-primary);
	}

	.components a.active {
	background: var(--header-bg);
	color: var(--primary-color);
	border-right: 3px solid var(--primary-color);
	}

	.card {
	border: 1px solid var(--border-color);
	border-radius: 0.5rem;
	box-shadow: 0 1px 3px rgba(0,0,0,0.1);
	}

	.card-body {
	padding: 1.5rem;
	}

	.form-label {
	font-weight: 500;
	color: var(--text-primary);
	margin-bottom: 0.5rem;
	}

	.form-control, .form-select {
	border-color: var(--border-color);
	border-radius: 0.375rem;
	padding: 0.625rem;
	}

	.form-control:focus, .form-select:focus {
	border-color: var(--primary-color);
	box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1);
	}

	.btn-primary {
	background-color: var(--primary-color);
	border: none;
	padding: 0.625rem 1.25rem;
	font-weight: 500;
	}

	.btn-primary:hover {
	background-color: #1d4ed8;
	}

	.btn-success, .btn-info {
	font-weight: 500;
	padding: 0.625rem 1.25rem;
	}

	.loading {
	display: none;
	align-items: center;
	gap: 0.75rem;
	padding: 1rem;
	background-color: var(--sidebar-bg);
	border-radius: 0.375rem;
	}

	.result-section {
	display: none;
	margin-top: 2rem;
	}

	.bg-light {
	background-color: var(--sidebar-bg) !important;
	border-radius: 0.375rem;
	}

	h2 {
	font-weight: 600;
	margin-bottom: 1.5rem;
	color: var(--text-primary);
	}

	h5, h6 {
	font-weight: 600;
	color: var(--text-primary);
	}

	.footer {
	position: fixed;
	bottom: 0;
	width: 100%;
	background-color: var(--header-bg);
	border-top: 1px solid var(--border-color);
	padding: 1rem;
	display: flex;
	justify-content: space-between;
	align-items: center;
	z-index: 1000;
	}

	.footer .copyright {
	color: var(--text-secondary);
	font-size: 0.875rem;
	}

	.footer .status {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	color: var(--text-secondary);
	font-size: 0.875rem;
	}

	.footer .status .status-indicator {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	}

	.footer .status .status-details {
	display: none;
	position: absolute;
	bottom: 100%;
	right: 1rem;
	background: white;
	border: 1px solid var(--border-color);
	border-radius: 0.5rem;
	padding: 1rem;
	box-shadow: 0 -4px 6px -1px rgba(0, 0, 0, 0.1);
	min-width: 200px;
	}

	.footer .status:hover .status-details {
	display: block;
	}

	.status-details div {
	margin-bottom: 0.5rem;
	}

	.status-details .component {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	}

	.status-details .component-indicator {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	}

	.status-details .resources {
	margin-top: 0.75rem;
	padding-top: 0.75rem;
	border-top: 1px solid var(--border-color);
	}

	/* Markdown content styling */
	.section {
	padding: 2rem;
	}

	.section table {
	border-collapse: collapse;
	margin: 1rem 0;
	width: 100%;
	}

	.section table th,
	.section table td {
	border: 1px solid var(--border-color);
	padding: 0.75rem;
	text-align: left;
	}

	.section table th {
	background-color: var(--header-bg);
	font-weight: 600;
	}

	.section table tr:nth-child(even) {
	background-color: var(--header-bg);
	}

	.section h1,
	.section h2,
	.section h3 {
	color: var(--text-primary);
	margin-top: 2rem;
	margin-bottom: 1rem;
	}

	.section h1 {
	font-size: 2rem;
	border-bottom: 2px solid var(--border-color);
	padding-bottom: 0.5rem;
	}

	.section h2 {
	font-size: 1.5rem;
	}

	.section h3 {
	font-size: 1.25rem;
	}

	.section p {
	margin-bottom: 1rem;
	line-height: 1.6;
	}

	.section ul,
	.section ol {
	margin-bottom: 1rem;
	padding-left: 2rem;
	}

	.section li {
	margin-bottom: 0.5rem;
	}

	.section code {
	background-color: var(--header-bg);
	padding: 0.2rem 0.4rem;
	border-radius: 0.25rem;
	font-family: monospace;
	}

	.section pre {
	background-color: var(--header-bg);
	padding: 1rem;
	border-radius: 0.5rem;
	overflow-x: auto;
	margin: 1rem 0;
	}

	.section a {
	color: var(--primary-color);
	text-decoration: none;
	}

	.section a:hover {
	text-decoration: underline;
	}

	/* Math equations */
	.section .MathJax_Display {
	overflow-x: auto;
	max-width: 100%;
	margin: 1em 0;
	}

	.section .MathJax {
	font-size: 1.1em !important;
	}

	.section .math-block {
	overflow-x: auto;
	margin: 1em 0;
	text-align: center;
	}
	</style>
	<!-- MathJax Configuration -->
	<script type="text/x-mathjax-config">
	MathJax.Hub.Config({
	tex2jax: {
	inlineMath: [['$','$'], ['\$','\$']],
	processEscapes: true
	}
	});
	</script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-AMS_HTML"></script>
	<script>
	let currentIndices = null; // Store the current indices globally

	// Initialize layout on page load
	document.addEventListener('DOMContentLoaded', function() {
	// Handle iframe environment
	if (window.self !== window.top) {
	// We're in an iframe
	document.documentElement.style.height = '100%';
	document.body.style.height = '100%';
	}

	// Initialize navigation
	initializeNavigation();

	// Show initial section
	showSection('selection');

	// Update parameters for default algorithm
	updateDefaultParams();

	// Load markdown content
	loadMarkdownContent();

	// Initialize form handlers
	initializeFormHandlers();
	});

	function initializeNavigation() {
	// Handle navigation clicks
	document.querySelectorAll('.nav-link').forEach(link => {
	link.addEventListener('click', function(e) {
	e.preventDefault();
	const sectionId = this.getAttribute('data-section');
	if (sectionId) {
	showSection(sectionId);
	}
	});
	});
	}

	function initializeFormHandlers() {
	// Selection form handler
	const selectionForm = document.getElementById('selectionForm');
	if (selectionForm) {
	selectionForm.addEventListener('submit', handleSelectionSubmit);
	}

	// Diversity form handler
	const diversityForm = document.getElementById('diversity-form');
	if (diversityForm) {
	diversityForm.addEventListener('submit', handleDiversitySubmit);
	}

	// Algorithm change handler
	const algorithmSelect = document.getElementById('algorithm');
	if (algorithmSelect) {
	algorithmSelect.addEventListener('change', handleAlgorithmChange);
	}

	// nbins_axis change handler
	const nbinsInput = document.getElementById('nbins_axis');
	if (nbinsInput) {
	nbinsInput.addEventListener('input', handleNbinsChange);
	}
	}

	function showSection(sectionId) {
	console.log('Showing section:', sectionId);
	// Hide all sections
	document.querySelectorAll('.section').forEach(section => {
	section.style.display = 'none';
	});

	// Show selected section
	const selectedSection = document.getElementById(sectionId);
	if (selectedSection) {
	selectedSection.style.display = 'block';
	console.log('Section displayed:', sectionId);

	// Update active nav link
	document.querySelectorAll('.nav-link').forEach(link => {
	link.classList.remove('active');
	if (link.getAttribute('data-section') === sectionId) {
	link.classList.add('active');
	}
	});

	// Reset scroll position
	selectedSection.scrollTop = 0;
	}
	}

	async function handleSelectionSubmit(e) {
	e.preventDefault();
	console.log('Selection form submitted');

	const formData = new FormData(e.target);
	const resultSection = document.getElementById('resultSection');
	const warningsDiv = document.getElementById('warnings');
	const errorDiv = document.getElementById('error');
	const successContent = document.getElementById('success-content');
	const indicesDiv = document.getElementById('indices');

	// Show loading state
	resultSection.style.display = 'block';
	warningsDiv.style.display = 'none';
	errorDiv.style.display = 'none';
	successContent.style.display = 'none';

	try {
	console.log('Sending selection request...');
	const response = await fetch('/upload_selection', {
	method: 'POST',
	body: formData
	});

	const data = await response.json();
	console.log('Selection response:', data);

	if (response.ok && data.success) {
	currentIndices = data.indices;

	if (data.warnings && data.warnings.length > 0) {
	warningsDiv.textContent = 'Warnings: ' + data.warnings.join(', ');
	warningsDiv.style.display = 'block';
	}

	indicesDiv.textContent = JSON.stringify(data.indices, null, 2);
	successContent.style.display = 'block';
	} else {
	errorDiv.textContent = data.error \|\| 'Failed to process selection';
	errorDiv.style.display = 'block';
	}
	} catch (error) {
	console.error('Selection error:', error);
	errorDiv.textContent = 'Error processing request: ' + error.message;
	errorDiv.style.display = 'block';
	}
	}

	async function handleDiversitySubmit(e) {
	e.preventDefault();
	console.log('Diversity form submitted');

	const formData = new FormData(e.target);
	const parameters = document.getElementById('div_parameters').value;

	try {
	const params = JSON.parse(parameters \|\| '{}');
	formData.set('div_parameters', JSON.stringify(params));

	const response = await fetch('/calculate_diversity', {
	method: 'POST',
	body: formData
	});

	const result = await response.json();
	console.log('Diversity response:', result);

	if (response.ok) {
	document.getElementById('diversity-results').style.display = 'block';
	document.getElementById('diversity-score').textContent = result.diversity_score;
	} else {
	alert('Error: ' + result.error);
	}
	} catch (error) {
	console.error('Diversity error:', error);
	alert('Error calculating diversity: ' + error.message);
	}
	}

	function handleAlgorithmChange() {
	const algorithm = this.value;
	const nbinsContainer = document.getElementById('nbins_axis_container');

	console.log('Algorithm changed to:', algorithm);

	if (algorithm === 'GridPartition') {
	nbinsContainer.style.display = 'block';
	} else {
	nbinsContainer.style.display = 'none';
	}

	updateDefaultParams();
	}

	function handleNbinsChange() {
	if (document.getElementById('algorithm').value === 'GridPartition') {
	const params = JSON.parse(document.getElementById('parameters').value \|\| '{}');
	params.nbins_axis = parseInt(this.value) \|\| 5;
	document.getElementById('parameters').value = JSON.stringify(params, null, 2);
	}
	}

	async function updateDefaultParams() {
	const algorithm = document.getElementById('algorithm').value;
	const parametersTextarea = document.getElementById('parameters');
	const nbinsInput = document.getElementById('nbins_axis');

	try {
	console.log('Fetching default params for:', algorithm);
	const response = await fetch(`/get_default_params/${algorithm}`);
	const data = await response.json();

	if (response.ok) {
	const params = data;
	if (algorithm === 'GridPartition') {
	params.nbins_axis = parseInt(nbinsInput.value) \|\| 5;
	}
	parametersTextarea.value = JSON.stringify(params, null, 2);
	} else {
	console.error('Error getting default parameters:', data.error);
	parametersTextarea.value = '{}';
	}
	} catch (error) {
	console.error('Default params error:', error);
	parametersTextarea.value = '{}';
	}
	}

	async function loadMarkdownContent() {
	try {
	console.log('Loading markdown content...');
	const aboutResponse = await fetch('/md/about.md');
	const aboutData = await aboutResponse.json();
	document.getElementById('about-content').innerHTML = aboutData.html;

	const contactResponse = await fetch('/md/contacts.md');
	const contactData = await contactResponse.json();
	document.getElementById('contact-content').innerHTML = contactData.html;

	if (window.MathJax && window.MathJax.Hub) {
	window.MathJax.Hub.Queue(["Typeset", window.MathJax.Hub]);
	}
	} catch (error) {
	console.error('Markdown loading error:', error);
	}
	}
	</script>
	</head>
	<body>
	<button type="button" id="showSidebarBtn" class="btn">
	<i class="bi bi-chevron-right"></i>
	</button>

	<div class="wrapper">
	<!-- Sidebar -->
	<nav id="sidebar">
	<div class="sidebar-header">
	<h5 class="sidebar-title">Selector Server</h5>
	<button type="button" id="sidebarCollapse" class="btn">
	<i class="bi bi-chevron-left"></i>
	</button>
	</div>
	<ul class="nav flex-column">
	<li class="nav-item">
	<a href="#" class="nav-link active" data-section="selection">
	<i class="bi bi-grid-3x3-gap me-2"></i>Subset Selection
	</a>
	</li>
	<li class="nav-item">
	<a href="#" class="nav-link" data-section="diversity">
	<i class="bi bi-graph-up me-2"></i>Diversity Calculation
	</a>
	</li>
	<li class="nav-item">
	<a href="#" class="nav-link" data-section="about">
	<i class="bi bi-info-circle me-2"></i>About
	</a>
	</li>
	<li class="nav-item">
	<a href="#" class="nav-link" data-section="contact">
	<i class="bi bi-envelope me-2"></i>Contact
	</a>
	</li>
	</ul>
	</nav>

	<!-- Page Content -->
	<div id="content">
	<!-- Selection Section -->
	<div id="selection" class="section">
	<h2>Subset Selection</h2>
	<div class="card">
	<div class="card-body">
	<form id="selectionForm" enctype="multipart/form-data">
	<div class="mb-3">
	<label for="file" class="form-label">Upload Feature Matrix</label>
	<input type="file" class="form-control" id="file" name="file" accept=".txt,.npz,.xlsx,.xls">
	<small class="text-muted">Supported formats: .txt, .npz, .xlsx, .xls (max 32MB)</small>
	</div>

	<div class="mb-3">
	<label for="size" class="form-label">Subset Size</label>
	<input type="number" class="form-control" id="size" name="size" min="1" step="1" required>
	<small class="text-muted">Number of data points to select (integer)</small>
	</div>

	<div class="mb-3">
	<label for="distance_metric" class="form-label">Distance Function</label>
	<select class="form-select" id="distance_metric" name="distance_metric">
	<option value="euclidean">euclidean</option>
	<option value="cityblock">cityblock</option>
	<option value="cosine">cosine</option>
	<option value="l1">l1</option>
	<option value="l2">l2</option>
	<option value="manhattan">manhattan</option>
	<option value="braycurtis">braycurtis</option>
	<option value="canberra">canberra</option>
	<option value="chebyshev">chebyshev</option>
	<option value="correlation">correlation</option>
	<option value="dice">dice</option>
	<option value="hamming">hamming</option>
	<option value="jaccard">jaccard</option>
	<option value="kulsinski">kulsinski</option>
	<option value="mahalanobis">mahalanobis</option>
	<option value="minkowski">minkowski</option>
	<option value="rogerstanimoto">rogerstanimoto</option>
	<option value="russellrao">russellrao</option>
	<option value="seuclidean">seuclidean</option>
	<option value="sokalmichener">sokalmichener</option>
	<option value="sokalsneath">sokalsneath</option>
	<option value="sqeuclidean">sqeuclidean</option>
	<option value="yule">yule</option>
	</select>
	<small class="text-muted">Distance metric from scikit-learn's pairwise_distances (optional)</small>
	</div>

	<div class="mb-3">
	<label for="algorithm" class="form-label">Selection Method</label>
	<select class="form-select" id="algorithm" name="algorithm">
	<optgroup label="Distance-based Methods">
	<option value="MaxMin">MaxMin</option>
	<option value="MaxSum">MaxSum</option>
	<option value="OptiSim">OptiSim</option>
	<option value="DISE">DISE</option>
	</optgroup>
	<optgroup label="Partition-based Methods">
	<option value="GridPartition">Grid Partition</option>
	</optgroup>
	<optgroup label="Similarity-based Methods">
	<option value="NSimilarity">NSimilarity</option>
	</optgroup>
	</select>
	</div>

	<div class="mb-3" id="nbins_axis_container" style="display: none;">
	<label for="nbins_axis" class="form-label">Number of Bins per Axis</label>
	<input type="number" class="form-control" id="nbins_axis" name="nbins_axis" min="1" value="5">
	<small class="form-text text-muted">Number of bins to partition each axis into</small>
	</div>

	<div class="mb-3">
	<label for="parameters" class="form-label">Additional Parameters (JSON format)</label>
	<textarea class="form-control font-monospace" id="parameters" name="parameters" rows="10"></textarea>
	</div>

	<div class="d-grid gap-2">
	<button type="submit" class="btn btn-primary">
	<i class="bi bi-play-fill me-2"></i>Run Subset Selection
	</button>
	</div>
	</form>
	</div>
	</div>

	<div id="resultSection" class="mt-4" style="display: none;">
	<div class="card">
	<div class="card-body">
	<h5 class="card-title">Results</h5>
	<div id="warnings" class="alert alert-warning" style="display: none;"></div>
	<div id="error" class="alert alert-danger" style="display: none;"></div>

	<div id="success-content" style="display: none;">
	<h4>Selected Indices:</h4>
	<pre id="indices"></pre>
	<div class="mb-3">
	<label for="download-format" class="form-label">Download Format</label>
	<select class="form-select" id="download-format">
	<option value="txt">TXT</option>
	<option value="npz">NPZ</option>
	<option value="xlsx">Excel</option>
	</select>
	</div>
	<button class="btn btn-primary" onclick="downloadIndices()">Download Results</button>
	</div>
	</div>
	</div>
	</div>
	</div>

	<!-- Diversity Section -->
	<div id="diversity" class="section" style="display: none;">
	<h2>Diversity Calculation</h2>
	<div class="container mt-4">
	<form id="diversity-form" enctype="multipart/form-data">
	<div class="mb-3">
	<label for="feature_subset" class="form-label">Upload Feature Subset</label>
	<input type="file" class="form-control" id="feature_subset" name="feature_subset" accept=".csv,.txt,.xlsx,.xls,.npz">
	<small class="text-muted">Upload your feature subset matrix (supported formats: CSV, TXT, XLSX, NPZ)</small>
	</div>

	<div class="mb-3">
	<label for="features" class="form-label">Upload Features (Optional)</label>
	<input type="file" class="form-control" id="features" name="features" accept=".csv,.txt,.xlsx,.xls,.npz">
	<small class="text-muted">Upload your features matrix. It's only for hypersphere overlaping algorithm.</small>
	</div>

	<div class="mb-3">
	<label for="div_type" class="form-label">Diversity Type</label>
	<select class="form-select" id="div_type" name="div_type">
	<option value="logdet">Log Determinant</option>
	<option value="shannon_entropy">Shannon Entropy</option>
	<option value="explicit_diversity_index">Explicit Diversity Index</option>
	<option value="wdud">WDUD</option>
	<option value="hypersphere_overlap">Hypersphere Overlap</option>
	<option value="gini_coefficient">Gini Coefficient</option>
	</select>
	</div>

	<div class="mb-3">
	<label for="div_parameters" class="form-label">Additional Parameters (JSON format)</label>
	<textarea class="form-control font-monospace" id="div_parameters" name="div_parameters" rows="5"></textarea>
	<small class="text-muted">Specify normalize, truncation, and cs parameters in JSON format</small>
	</div>

	<div class="d-grid gap-2">
	<button type="submit" class="btn btn-primary">Calculate Diversity</button>
	</div>

	<!-- Results section -->
	<div id="diversity-results" class="mt-4" style="display: none;">
	<h3>Results</h3>
	<div class="card">
	<div class="card-body">
	<h5 class="card-title">Diversity Score</h5>
	<p class="card-text" id="diversity-score"></p>
	</div>
	</div>
	</div>
	</form>
	</div>
	</div>

	<!-- About Section -->
	<div id="about" class="section" style="display: none;">
	<h2>About</h2>
	<div class="content">
	<h2>Motivation</h2>
	<p>Selecting diverse and representative subsets is crucial for the data-driven models and machine learning applications in many science and engineering disciplines, especially for molecular design and drug discovery. Motivated by this, we develop the Selector package, a free and open-source Python library for selecting diverse subsets.</p>
	<p>The <code>Selector</code> library implements a range of existing algorithms for subset sampling based on the distance between and similarity of samples, as well as tools based on spatial partitioning. In addition, it includes seven diversity measures for quantifying the diversity of a given set. We also implemented various mathematical formulations to convert similarities into dissimilarities.</p>

	<h2>Selector Library</h2>
	<p>Selector is a free, open-source, and cross-platform Python library designed to help you effortlessly identify the most diverse subset of molecules from your dataset. Please use the following citation in any publication using Selector library:</p>

	<h2>Citation</h2>
	<p>Please use the following citation in any publication using the <code>Selector</code> library:</p>
	<p><strong>To be added</strong></p>

	<h2>More Information</h2>
	<p>For more information about the Selector library, please visit our <a href="https://github.com/theochem/selector" target="_blank">GitHub repository</a> and documentation at <a href="https://selector.qcdevs.org" target="_blank">https://selector.qcdevs.org</a>.</p>

	<h2>Acknowledgments</h2>
	<p>This webserver is supported by the DRI EDIA Champions Pilot Program. We are grateful to the <a href="https://alliancecan.ca/" target="_blank">Digital Research Alliance</a> for providing the computing resources.</p>
	</div>
	</div>

	<!-- Contact Section -->
	<div id="contact" class="section" style="display: none;">
	<h2>Contact</h2>
	<div class="content">
	<p>The <code>Selector</code> source code is hosted on <a href="https://github.com/theochem/Selector" target="_blank">GitHub</a> and is released under the <a href="https://github.com/theochem/Selector/blob/master/LICENSE" target="_blank">GNU General Public License v3.0</a>.</p>

	<p>We welcome any contributions to the Selector library in accordance with our Code of Conduct; please see our <a href="https://qcdevs.org/guidelines/" target="_blank">Contributing Guidelines</a>.</p>

	<p>Please report any issues you encounter while using Selector library on <a href="https://github.com/theochem/Selector/issues" target="_blank">GitHub Issues</a>.</p>

	<p>For further information and inquiries, please contact us at <a href="mailto:qcdevs@gmail.com">qcdevs@gmail.com</a>.</p>
	</div>
	</div>
	</div>
	</div>

	<!-- Footer -->
	<div class="footer">
	<div class="copyright">
	© Copyright 2022-2026, The QC-Devs Community.
	</div>
	</div>

	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
	</body>
	</html>