Skip to content

Commit d686dcd

Browse files
author
Atakan Emre
committed
style: update header and layout styles for improved responsiveness and aesthetics
- Adjusted header height, padding, and transition effects for better UX. - Modified header actions and brand spacing for a cleaner look. - Enhanced nav links with new gap and font size settings. - Introduced new quantum game and protocol sections with grid layouts. - Improved styling for various elements including buttons, notes, and stats. - Added responsive adjustments for mobile layouts, ensuring better usability.
1 parent b7ed914 commit d686dcd

3 files changed

Lines changed: 1304 additions & 110 deletions

File tree

‎frontend/index.html‎

Lines changed: 92 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
<link rel="preconnect" href="https://fonts.googleapis.com">
99
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
1010
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@500;700&display=swap" rel="stylesheet">
11-
<link rel="stylesheet" href="styles.css?v=20260522-qml-v11">
11+
<link rel="stylesheet" href="styles.css?v=20260524-circuit-schema-2">
1212
</head>
1313
<body>
1414
<canvas id="quantumField" aria-hidden="true"></canvas>
@@ -29,7 +29,9 @@
2929
<a href="#kuantum-temelleri">Kuantum</a>
3030
<a href="#quantum-ml-akisi">QML</a>
3131
<a href="#mimari">Mimariler</a>
32+
<a href="#quantum-oyun">Oyun</a>
3233
<a href="#veri-kokpiti">Yöntem</a>
34+
<a href="#deney-protokolu">Protokol</a>
3335
<a href="#deney-matrisi">Matris</a>
3436
<a href="#sonuclar">Sonuçlar</a>
3537
<a href="#lab">Metrik</a>
@@ -54,9 +56,9 @@
5456
<p class="eyebrow">Yüksek Lisans Semineri - Şahin Atakan Emre</p>
5557
<h1>Medikal Veri Analizinde Klasik ve Kuantum Makine Öğrenmesi Modellerinin İncelenmesi</h1>
5658
<p class="hero-text">
57-
BACE, BBBP ve ClinTox veri setleri üzerinde tanımlayıcı (descriptor) tabanlı modeller,
58-
moleküler grafik ağları, saf kuantum yöntemler ve hibrit kuantum-klasik
59-
başlık mimarisi aynı deneysel zeminde karşılaştırıldı.
59+
BACE, BBBP ve ClinTox veri setleri üzerinde klasik modeller, klasik grafik
60+
modeller, saf kuantum modeller, kuantum grafik modeli ve hibrit kuantum-klasik
61+
model aynı deneysel zeminde karşılaştırıldı.
6062
</p>
6163
<div class="hero-actions" aria-label="Hızlı bağlantılar">
6264
<a class="primary-action" href="#sonuclar">Bulguları İncele</a>
@@ -98,7 +100,7 @@ <h2>Kuantum avantajı varsayılmadı; güçlü klasik referanslarla ölçüldü.
98100
<div class="thesis-points">
99101
<div class="point">
100102
<span>01</span>
101-
<p>Tanımlayıcı (descriptor) tabanlı klasik modeller küçük ve orta ölçekli moleküler verilerde güçlü referanstır.</p>
103+
<p>Klasik tanımlayıcı modeller küçük ve orta ölçekli moleküler verilerde güçlü referanstır.</p>
102104
</div>
103105
<div class="point">
104106
<span>02</span>
@@ -116,7 +118,7 @@ <h2>Kuantum avantajı varsayılmadı; güçlü klasik referanslarla ölçüldü.
116118
<p class="section-kicker">Materyal</p>
117119
<h2>Üç ilaç keşfi görevi, ortak deneysel protokol</h2>
118120
<p>
119-
Moleküller SMILES dizgeleri üzerinden işlendi; tanımlayıcı (descriptor) tabanlı modeller için
121+
Moleküller SMILES dizgeleri üzerinden işlendi; klasik tanımlayıcı modeller için
120122
ECFP/Morgan parmak izleri, grafik modeller için atom-bağ yapıları kullanıldı.
121123
</p>
122124
</div>
@@ -221,7 +223,7 @@ <h3>Veri okuma kuralı</h3>
221223
<p class="section-kicker">Veri temsili</p>
222224
<h2>SMILES kaydı klasik, grafik ve kuantum modele farklı yüzlerle girer</h2>
223225
<p>
224-
Aynı molekül önce kimyasal dize olarak gelir; descriptor hattında ECFP bitlerine,
226+
Aynı molekül önce kimyasal dize olarak gelir; klasik tanımlayıcı hatta ECFP bitlerine,
225227
grafik hattında atom-bağ ağına, kuantum hattında ise sıkıştırılmış kubit temsiline dönüşür.
226228
</p>
227229
</div>
@@ -374,6 +376,43 @@ <h2>Saf kuantum ve hibrit başlık aynı devre mantığında ayrışır</h2>
374376
</div>
375377
</section>
376378

379+
<section id="quantum-oyun" class="section-band quantum-game-section">
380+
<div class="section-heading">
381+
<p class="section-kicker">Etkileşimli QML oyunu</p>
382+
<h2>Kuantum Molekül Laboratuvarı</h2>
383+
<p>
384+
Veri setini, model ailesini, kubit sayısını ve devre derinliğini seçerek
385+
moleküler verinin kuantum makine öğrenmesi hattında nasıl kodlandığını,
386+
ölçümden sonra nasıl klasik metriklere döndüğünü oyunlaştırılmış bir sahnede incele.
387+
</p>
388+
</div>
389+
<div class="quantum-game-layout">
390+
<aside class="quantum-game-controls" aria-label="Kuantum oyun kontrol paneli">
391+
<div>
392+
<span>Model</span>
393+
<div class="result-controls vertical compact" id="quantumGameModelTabs"></div>
394+
</div>
395+
<div>
396+
<span>Veri seti</span>
397+
<div class="result-controls compact" id="quantumGameTaskTabs"></div>
398+
</div>
399+
<div>
400+
<span>q / d</span>
401+
<div class="result-controls compact" id="quantumGameQubitTabs"></div>
402+
<div class="result-controls compact" id="quantumGameDepthTabs"></div>
403+
</div>
404+
<div>
405+
<span>Oyun adımı</span>
406+
<div class="result-controls compact" id="quantumGameStageTabs"></div>
407+
</div>
408+
</aside>
409+
<div class="quantum-game-stage">
410+
<canvas id="quantumGameCanvas" width="1240" height="660" aria-label="Kuantum makine öğrenmesi oyunlaştırılmış laboratuvarı"></canvas>
411+
</div>
412+
<aside class="quantum-game-note" id="quantumGameNote"></aside>
413+
</div>
414+
</section>
415+
377416
<section id="veri-kokpiti" class="section-band data-cockpit">
378417
<div class="section-heading">
379418
<p class="section-kicker">Deneysel yöntem ve CSV veri katmanı</p>
@@ -391,6 +430,51 @@ <h2>Analiz CSV'lerinden beslenen araştırma paneli</h2>
391430
</div>
392431
</section>
393432

433+
<section id="deney-protokolu" class="section-band protocol-section">
434+
<div class="section-heading">
435+
<p class="section-kicker">Deney protokolü ve simülasyon ortamı</p>
436+
<h2>Klasik, kuantum ve hibrit modeller aynı deney protokolünde karşılaştırıldı</h2>
437+
<p>
438+
Çalışmadaki kuantum modeller gerçek kuantum donanımında değil, klasik hesaplama donanımı üzerinde
439+
çalışan kuantum devre simülatörleriyle yürütüldü. Bu nedenle bulgular kuantum cihaz üstünlüğü
440+
olarak değil; aynı veri ayrımları, temsil hattı, seed politikası ve metrik ailesi altında klasik,
441+
grafik, saf kuantum ve hibrit model davranışlarının karşılaştırması olarak okunmalıdır.
442+
</p>
443+
</div>
444+
<div class="protocol-grid">
445+
<div class="protocol-stage">
446+
<canvas id="protocolCanvas" width="1180" height="620" aria-label="Deney protokolü, kuantum simülasyon ortamı ve model karşılaştırma hattı"></canvas>
447+
</div>
448+
<aside class="protocol-facts" aria-label="Temel deney ortamı ve donanım notları">
449+
<div class="protocol-fact">
450+
<span>Veri ve split</span>
451+
<strong>BACE · BBBP · ClinTox</strong>
452+
<small>Train, validation ve test ayrımları sabit tutuldu.</small>
453+
</div>
454+
<div class="protocol-fact">
455+
<span>Kuantum simülasyonu</span>
456+
<strong>Qiskit Aer · PennyLane</strong>
457+
<small>QSVM/VQC için aer_statevector CPU; hibrit başlık için lightning.qubit. shots=0, exact statevector simülasyonunu ifade eder.</small>
458+
</div>
459+
<div class="protocol-fact">
460+
<span>Eğitim donanımı</span>
461+
<strong>Ryzen 9 9950X · RTX 4080 Super · 64 GB DDR5 6200 MHz</strong>
462+
<small>CUDA hızlandırmalı klasik/encoder aşamaları bu sistem üzerinde yürütüldü.</small>
463+
</div>
464+
<div class="protocol-fact">
465+
<span>Donanım yorumu</span>
466+
<strong>Gerçek kuantum donanımı kullanılmadı</strong>
467+
<small>Devre sonuçları simülasyon çıktısıdır; kuantum cihaz üstünlüğü iddiası kurulmaz.</small>
468+
</div>
469+
<div class="protocol-fact">
470+
<span>Tekrar üretilebilirlik</span>
471+
<strong>5 seed · AUROC + ek metrikler</strong>
472+
<small>0, 42, 123, 456 ve 789 seed değerleri kullanıldı.</small>
473+
</div>
474+
</aside>
475+
</div>
476+
</section>
477+
394478
<section id="deney-matrisi" class="section-band visual-analysis-section experiment-matrix-section">
395479
<div class="section-heading">
396480
<p class="section-kicker">Deney matrisi</p>
@@ -659,6 +743,6 @@ <h2>Kuantum modeller güçlü klasik referanslarla birlikte okunmalıdır.</h2>
659743
<span>BACE · BBBP · ClinTox · QSVM · VQC · QGNN · Hybrid QHead</span>
660744
</footer>
661745

662-
<script src="script.js?v=20260522-qml-v11"></script>
746+
<script src="script.js?v=20260524-circuit-schema-2"></script>
663747
</body>
664748
</html>

0 commit comments

Comments
 (0)