Spaces:
Sleeping
Sleeping
File size: 3,698 Bytes
ecd5b53 1fa8321 ecd5b53 1fa8321 ecd5b53 1fa8321 ecd5b53 1fa8321 ecd5b53 1fa8321 ecd5b53 1fa8321 ecd5b53 1fa8321 ecd5b53 1fa8321 ecd5b53 1fa8321 ecd5b53 1fa8321 ecd5b53 1fa8321 ecd5b53 | 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 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 | {% extends "base.html" %}
{% block content %}
<main class="main-wrap">
<section class="card">
<!-- Tabs -->
<div class="tabs">
<button id="tab-seq" class="tab active">Single Sequence</button>
<button id="tab-fasta" class="tab">Multiple Sequences</button>
</div>
<!-- SINGLE SEQUENCE -->
<div id="panel-seq" class="panel">
<label class="label">Protein Sequence</label>
<textarea id="sequenceInput" placeholder="Paste protein sequence"></textarea>
<div class="row">
<button id="predictBtn" class="btn">Predict Localization</button>
<div id="loadingSeq" class="loading hidden">Running prediction…</div>
</div>
<div id="seqResultCard" class="result-card hidden">
<div id="seqResultHeader" class="result-header"></div>
<div id="seqConfidenceWarning" class="warning-text"></div>
<div class="charts-row">
<div class="chart-card">
<h4 class="chart-title">Confidence Bar Chart</h4>
<canvas id="barChart"></canvas>
</div>
<div class="chart-card">
<h4 class="chart-title">Radar Plot</h4>
<canvas id="radarChart"></canvas>
</div>
</div>
<div class="prob-box">
<h4>Class Probabilities</h4>
<div id="seqProbList" class="prob-list"></div>
</div>
</div>
</div>
<!-- FASTA -->
<div id="panel-fasta" class="panel hidden">
<label class="label">Upload FASTA file</label>
<input id="fastaFile" type="file" accept=".fa,.fasta" />
<div class="row">
<button id="predictFastaBtn" class="btn">Predict from FASTA</button>
<div id="loadingFasta" class="loading hidden">Running batch prediction…</div>
</div>
<div id="fastaResultsWrapper" class="fasta-wrapper hidden">
<h3>FASTA Predictions</h3>
<p class="small-text">Click a row to view class probabilities.</p>
<div class="table-container">
<table class="results-table">
<thead>
<tr>
<th>#</th>
<th>Sequence ID</th>
<th>Length</th>
<th>Predicted Location</th>
<th>Max Confidence</th>
</tr>
</thead>
<tbody id="fastaTableBody"></tbody>
</table>
</div>
<!-- DOWNLOAD BUTTON -->
<button
id="downloadCsvBtn"
type="button"
class="btn"
style="margin-top: 1rem;"
>
Download CSV
</button>
</div>
</div>
</section>
</main>
<!-- FASTA DETAIL MODAL -->
<div id="fastaModal" class="modal hidden">
<div class="modal-backdrop" id="fastaModalBackdrop"></div>
<div class="modal-content">
<button id="fastaModalClose" class="modal-close">×</button>
<h3 id="fastaModalTitle">Sequence details</h3>
<p id="fastaModalMeta" class="modal-meta"></p>
<div class="prob-box">
<h4>Class Probabilities</h4>
<div id="fastaProbList" class="prob-list"></div>
</div>
</div>
</div>
<!-- BIG BAR CHART MODAL -->
<div id="bigBarModal" class="chart-modal hidden">
<div class="chart-modal-content">
<span class="close-big-chart" onclick="closeBigBar()">×</span>
<canvas id="bigBarChart" width="700" height="700"></canvas>
</div>
</div>
<!-- BIG RADAR CHART MODAL -->
<div id="bigRadarModal" class="chart-modal hidden">
<div class="chart-modal-content">
<span class="close-big-chart" onclick="closeBigRadar()">×</span>
<canvas id="bigRadarChart" width="700" height="700"></canvas>
</div>
</div>
{% endblock %}
|