|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Conversational LLM-Based Decision Support for Defect Classification in AFM Images</title> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css"> |
|
|
<style> |
|
|
:root { |
|
|
--primary-color: #0f172a; |
|
|
--secondary-color: #1e293b; |
|
|
--accent-color: #3b82f6; |
|
|
--text-primary: #e2e8f0; |
|
|
--text-secondary: #94a3b8; |
|
|
--border-color: #334155; |
|
|
--gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
|
|
--card-bg: rgba(30, 41, 59, 0.7); |
|
|
--glass-bg: rgba(255, 255, 255, 0.05); |
|
|
--blur: blur(10px); |
|
|
} |
|
|
|
|
|
* { |
|
|
margin: 0; |
|
|
padding: 0; |
|
|
box-sizing: border-box; |
|
|
} |
|
|
|
|
|
body { |
|
|
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; |
|
|
background: var(--primary-color); |
|
|
color: var(--text-primary); |
|
|
line-height: 1.6; |
|
|
overflow-x: hidden; |
|
|
} |
|
|
|
|
|
.hero { |
|
|
min-height: 100vh; |
|
|
display: grid; |
|
|
place-items: center; |
|
|
position: relative; |
|
|
background: var(--gradient); |
|
|
overflow: hidden; |
|
|
} |
|
|
|
|
|
.hero::before { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
top: 0; |
|
|
left: 0; |
|
|
right: 0; |
|
|
bottom: 0; |
|
|
background: url('data:image/svg+xml,<svg width="60" height="60" viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><g fill="%23ffffff" fill-opacity="0.05"><circle cx="30" cy="30" r="1"/></g></svg>') repeat; |
|
|
animation: float 20s ease-in-out infinite; |
|
|
} |
|
|
|
|
|
@keyframes float { |
|
|
0%, 100% { transform: translateY(0) rotate(0deg); } |
|
|
50% { transform: translateY(-20px) rotate(180deg); } |
|
|
} |
|
|
|
|
|
.hero-content { |
|
|
text-align: center; |
|
|
z-index: 1; |
|
|
max-width: 800px; |
|
|
padding: 2rem; |
|
|
} |
|
|
|
|
|
.hero h1 { |
|
|
font-size: clamp(2.5rem, 5vw, 4rem); |
|
|
font-weight: 700; |
|
|
margin-bottom: 1rem; |
|
|
background: linear-gradient(to right, #fff, #cbd5e1); |
|
|
-webkit-background-clip: text; |
|
|
-webkit-text-fill-color: transparent; |
|
|
background-clip: text; |
|
|
} |
|
|
|
|
|
.hero p { |
|
|
font-size: 1.25rem; |
|
|
color: rgba(255, 255, 255, 0.8); |
|
|
margin-bottom: 2rem; |
|
|
} |
|
|
|
|
|
.authors { |
|
|
display: block; |
|
|
max-width: 900px; |
|
|
margin: 2rem auto; |
|
|
text-align: center; |
|
|
font-size: 1.1rem; |
|
|
line-height: 1.5; |
|
|
color: #ffffff; |
|
|
} |
|
|
|
|
|
.authors strong { |
|
|
color: #ffffff; |
|
|
} |
|
|
|
|
|
.authors sup { |
|
|
color: #a0c4ff; |
|
|
font-size: 0.8em; |
|
|
vertical-align: super; |
|
|
} |
|
|
|
|
|
.affiliations { |
|
|
margin-top: 1.5rem; |
|
|
font-size: 0.95rem; |
|
|
color: #d1d5db; |
|
|
line-height: 1.6; |
|
|
} |
|
|
|
|
|
.affiliations span { |
|
|
display: block; |
|
|
margin-bottom: 0.5rem; |
|
|
} |
|
|
|
|
|
.abstract { |
|
|
max-width: 1000px; |
|
|
margin: 4rem auto; |
|
|
padding: 2rem; |
|
|
} |
|
|
|
|
|
.abstract-card { |
|
|
background: var(--card-bg); |
|
|
border: 1px solid var(--border-color); |
|
|
border-radius: 1.5rem; |
|
|
padding: 2.5rem; |
|
|
position: relative; |
|
|
overflow: hidden; |
|
|
} |
|
|
|
|
|
.abstract-card::before { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
top: 0; |
|
|
left: 0; |
|
|
right: 0; |
|
|
height: 3px; |
|
|
background: var(--gradient); |
|
|
} |
|
|
|
|
|
.section-title { |
|
|
font-size: 2rem; |
|
|
margin-bottom: 1.5rem; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: 1rem; |
|
|
} |
|
|
|
|
|
.section-title i { |
|
|
color: var(--accent-color); |
|
|
} |
|
|
|
|
|
.framework { |
|
|
margin: 4rem 0; |
|
|
} |
|
|
|
|
|
.framework-grid { |
|
|
display: grid; |
|
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); |
|
|
gap: 2rem; |
|
|
margin: 2rem 0; |
|
|
} |
|
|
|
|
|
.framework-step { |
|
|
background: var(--card-bg); |
|
|
border: 1px solid var(--border-color); |
|
|
border-radius: 1rem; |
|
|
padding: 2rem; |
|
|
text-align: center; |
|
|
transition: transform 0.3s ease, box-shadow 0.3s ease; |
|
|
position: relative; |
|
|
overflow: hidden; |
|
|
} |
|
|
|
|
|
.framework-step:hover { |
|
|
transform: translateY(-5px); |
|
|
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); |
|
|
} |
|
|
|
|
|
.framework-step::before { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
top: 0; |
|
|
left: 0; |
|
|
right: 0; |
|
|
bottom: 0; |
|
|
background: var(--gradient); |
|
|
opacity: 0; |
|
|
transition: opacity 0.3s ease; |
|
|
} |
|
|
|
|
|
.framework-step:hover::before { |
|
|
opacity: 0.1; |
|
|
} |
|
|
|
|
|
.step-icon { |
|
|
font-size: 3rem; |
|
|
margin-bottom: 1rem; |
|
|
background: var(--gradient); |
|
|
-webkit-background-clip: text; |
|
|
-webkit-text-fill-color: transparent; |
|
|
background-clip: text; |
|
|
} |
|
|
|
|
|
.results { |
|
|
margin: 4rem 0; |
|
|
} |
|
|
|
|
|
.metrics-grid { |
|
|
display: grid; |
|
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); |
|
|
gap: 1.5rem; |
|
|
} |
|
|
|
|
|
.metric-card { |
|
|
background: var(--card-bg); |
|
|
border: 1px solid var(--border-color); |
|
|
border-radius: 1rem; |
|
|
padding: 1.5rem; |
|
|
text-align: center; |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.metric-card:hover { |
|
|
transform: scale(1.05); |
|
|
border-color: var(--accent-color); |
|
|
} |
|
|
|
|
|
.metric-value { |
|
|
font-size: 2.5rem; |
|
|
font-weight: 700; |
|
|
color: var(--accent-color); |
|
|
margin-bottom: 0.5rem; |
|
|
} |
|
|
|
|
|
.chat-demo { |
|
|
margin: 4rem 0; |
|
|
} |
|
|
|
|
|
.chat-window { |
|
|
background: var(--card-bg); |
|
|
border: 1px solid var(--border-color); |
|
|
border-radius: 1rem; |
|
|
overflow: hidden; |
|
|
max-width: 600px; |
|
|
margin: 0 auto; |
|
|
} |
|
|
|
|
|
.chat-header { |
|
|
background: var(--secondary-color); |
|
|
padding: 1rem; |
|
|
border-bottom: 1px solid var(--border-color); |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: 0.5rem; |
|
|
} |
|
|
|
|
|
.chat-header i { |
|
|
color: #10b981; |
|
|
} |
|
|
|
|
|
.chat-messages { |
|
|
height: 300px; |
|
|
overflow-y: auto; |
|
|
padding: 1rem; |
|
|
} |
|
|
|
|
|
.message { |
|
|
margin-bottom: 1rem; |
|
|
padding: 0.75rem 1rem; |
|
|
border-radius: 1rem; |
|
|
max-width: 80%; |
|
|
} |
|
|
|
|
|
.message.user { |
|
|
background: var(--accent-color); |
|
|
margin-left: auto; |
|
|
} |
|
|
|
|
|
.message.assistant { |
|
|
background: var(--secondary-color); |
|
|
border: 1px solid var(--border-color); |
|
|
} |
|
|
|
|
|
.links { |
|
|
text-align: center; |
|
|
margin: 4rem 0; |
|
|
} |
|
|
|
|
|
.cta-button { |
|
|
display: inline-flex; |
|
|
align-items: center; |
|
|
gap: 0.5rem; |
|
|
background: var(--gradient); |
|
|
color: white; |
|
|
padding: 1rem 2rem; |
|
|
border-radius: 2rem; |
|
|
text-decoration: none; |
|
|
font-weight: 600; |
|
|
transition: all 0.3s ease; |
|
|
box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3); |
|
|
} |
|
|
|
|
|
.cta-button:hover { |
|
|
transform: translateY(-2px); |
|
|
box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4); |
|
|
} |
|
|
|
|
|
.floating-particles { |
|
|
position: fixed; |
|
|
top: 0; |
|
|
left: 0; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
pointer-events: none; |
|
|
z-index: -1; |
|
|
} |
|
|
|
|
|
.particle { |
|
|
position: absolute; |
|
|
width: 2px; |
|
|
height: 2px; |
|
|
background: var(--accent-color); |
|
|
border-radius: 50%; |
|
|
animation: particle-float 10s linear infinite; |
|
|
} |
|
|
|
|
|
@keyframes particle-float { |
|
|
0% { |
|
|
transform: translateY(100vh) rotate(0deg); |
|
|
opacity: 0; |
|
|
} |
|
|
10% { |
|
|
opacity: 1; |
|
|
} |
|
|
90% { |
|
|
opacity: 1; |
|
|
} |
|
|
100% { |
|
|
transform: translateY(-100vh) rotate(360deg); |
|
|
opacity: 0; |
|
|
} |
|
|
} |
|
|
|
|
|
@media (max-width: 768px) { |
|
|
.hero { |
|
|
padding: 1rem; |
|
|
} |
|
|
|
|
|
.authors { |
|
|
grid-template-columns: 1fr; |
|
|
} |
|
|
|
|
|
.abstract-card { |
|
|
padding: 1.5rem; |
|
|
} |
|
|
|
|
|
.framework-grid { |
|
|
grid-template-columns: 1fr; |
|
|
} |
|
|
} |
|
|
|
|
|
.scroll-indicator { |
|
|
position: absolute; |
|
|
bottom: 2rem; |
|
|
left: 50%; |
|
|
transform: translateX(-50%); |
|
|
animation: bounce 2s infinite; |
|
|
color: rgba(255, 255, 255, 0.6); |
|
|
} |
|
|
|
|
|
@keyframes bounce { |
|
|
0%, 100% { transform: translateX(-50%) translateY(0); } |
|
|
50% { transform: translateX(-50%) translateY(-10px); } |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
<div class="floating-particles" id="particles"></div> |
|
|
|
|
|
<section class="hero"> |
|
|
<div class="hero-content"> |
|
|
<h1>Conversational LLM-Based Decision Support for Defect Classification in AFM Images</h1> |
|
|
<p>Revolutionizing nanoscale imaging through AI-powered defect detection and real-time guidance</p> |
|
|
|
|
|
<div class="authors"> |
|
|
<strong>ANGONA BISWAS<sup>1§</sup>, JAYDEEP RADE<sup>1§</sup>, NABILA MASUD<sup>1</sup>, MD HASIBUL HASAN HASIB<sup>1</sup>, ADITYA BALU<sup>3</sup>, JUNTAO ZHANG<sup>2</sup>, SOUMIK SARKAR<sup>2</sup>, ADARSH KRISHNAMURTHY<sup>1,2</sup>, JUAN REN<sup>2</sup>, and ANWESHA SARKAR<sup>1</sup></strong> |
|
|
<div class="affiliations"> |
|
|
<span><sup>1</sup>Department of Electrical and Computer Engineering, Iowa State University, 2520 Osborn Dr., Ames, 50011, IA, USA</span> |
|
|
<span><sup>2</sup>Department of Mechanical Engineering, Iowa State University, 2025 Black Engineering, Ames, IA 50011, USA</span> |
|
|
<span><sup>3</sup>Translational AI Center, Black Engineering, 2529 Union Dr Suite 2024, Ames, IA 50011, USA</span> |
|
|
<span><sup>§</sup>Equal Contribution</span> |
|
|
</div> |
|
|
<p style="margin-top:1rem;font-size:1rem;"> |
|
|
<i class="fas fa-envelope"></i> <strong>CORRESPONDING AUTHOR:</strong> Anwesha Sarkar (e-mail: anweshas@iastate.edu) |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="scroll-indicator"> |
|
|
<i class="fas fa-chevron-down fa-2x"></i> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
<main style="max-width: 1200px; margin: 0 auto; padding: 2rem;"> |
|
|
<div style="text-align:center;margin-bottom:1.5rem;"> |
|
|
<a href="https://github.com/idealab-isu/AFM-LLM-Defect-Guidance" target="_blank" class="cta-button"> |
|
|
<i class="fab fa-github"></i> GitHub |
|
|
</a> |
|
|
<a href="https://ieeexplore.ieee.org/document/11096088" target="_blank" class="cta-button" style="margin-left:1rem;"> |
|
|
<i class="fas fa-file-alt"></i> Paper |
|
|
</a> |
|
|
</div> |
|
|
|
|
|
<section class="abstract"> |
|
|
<div class="abstract-card"> |
|
|
<h2 class="section-title"> |
|
|
<i class="fas fa-file-alt"></i> |
|
|
Abstract |
|
|
</h2> |
|
|
<p> |
|
|
Atomic Force Microscopy (AFM) has emerged as a powerful tool for nanoscale imaging and quantitative characterization of organic (e.g., live cells, proteins, DNA, lipid bilayers) and inorganic (e.g., silicon wafers, polymers) specimens. However, image artifacts in AFM height and peak force error images directly affect the precision of nanomechanical measurements. Experimentalists face considerable challenges in obtaining high-quality AFM images due to the requirement of specialized expertise and constant manual monitoring. |
|
|
</p> |
|
|
<br> |
|
|
<p> |
|
|
Another challenge is the lack of high-quality AFM datasets to train machine learning models for automated defect detection. In this work, we propose a two-step AI framework that combines a vision-based deep learning (DL) model for classifying AFM image defects with a Large Language Models (LLMs)-based conversational assistant that provides real-time corrective guidance in natural language, making it particularly valuable for non-AFM experts aiming to obtain high-quality images. |
|
|
</p> |
|
|
<br> |
|
|
<p> |
|
|
We curated an annotated AFM defect dataset spanning organic and inorganic samples to train the defect detection model. Our defect classification model achieves <strong>91.43% overall accuracy</strong>, with a recall of <strong>93% for tip contamination</strong> and <strong>60% for not-tracking defects</strong>. |
|
|
</p> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
<section class="framework"> |
|
|
<h2 class="section-title"> |
|
|
<i class="fas fa-sitemap"></i> |
|
|
Two-Step AI Framework |
|
|
</h2> |
|
|
|
|
|
<div class="framework-grid"> |
|
|
<div class="framework-step"> |
|
|
<div class="step-icon"> |
|
|
<i class="fas fa-eye"></i> |
|
|
</div> |
|
|
<h3>Vision Model</h3> |
|
|
<p>Deep learning model classifies defects in AFM images with 91.43% accuracy</p> |
|
|
</div> |
|
|
|
|
|
<div class="framework-step"> |
|
|
<div class="step-icon"> |
|
|
<i class="fas fa-comments"></i> |
|
|
</div> |
|
|
<h3>LLM Assistant</h3> |
|
|
<p>Conversational AI provides real-time guidance in natural language</p> |
|
|
</div> |
|
|
|
|
|
<div class="framework-step"> |
|
|
<div class="step-icon"> |
|
|
<i class="fas fa-desktop"></i> |
|
|
</div> |
|
|
<h3>Unified Interface</h3> |
|
|
<p>Seamless interaction between DL model and LLM-based guidance</p> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
<section class="results"> |
|
|
<h2 class="section-title"> |
|
|
<i class="fas fa-chart-bar"></i> |
|
|
Model Performance |
|
|
</h2> |
|
|
|
|
|
<div class="metrics-grid"> |
|
|
<div class="metric-card"> |
|
|
<div class="metric-value">91.43%</div> |
|
|
<p>Overall Accuracy</p> |
|
|
</div> |
|
|
|
|
|
<div class="metric-card"> |
|
|
<div class="metric-value">93%</div> |
|
|
<p>Tip Contamination Recall</p> |
|
|
</div> |
|
|
|
|
|
<div class="metric-card"> |
|
|
<div class="metric-value">60%</div> |
|
|
<p>Not-Tracking Recall</p> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
<section class="chat-demo"> |
|
|
<h2 class="section-title"> |
|
|
<i class="fas fa-robot"></i> |
|
|
Interactive Demo |
|
|
</h2> |
|
|
|
|
|
<div class="chat-window"> |
|
|
<div class="chat-header"> |
|
|
<i class="fas fa-circle fa-xs"></i> |
|
|
<span>AFM Assistant</span> |
|
|
</div> |
|
|
|
|
|
<div class="chat-messages"> |
|
|
<div class="message user"> |
|
|
I see flat lines in my topography image that suggest tracking failure —what environmental or scanner factors could be contributing to this, and how do I address them? |
|
|
</div> |
|
|
|
|
|
<div class="message assistant"> |
|
|
1. Adjust feedback parameters: increase the proportional/integral gains cautiously<br><br> |
|
|
2. Increase setpoint force to maintain better tip-sample contact<br><br> |
|
|
3. For persistent problems, try changing scan direction or starting position<br><br> |
|
|
4. Decrease scan speed to give the feedback loop more time |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
<section class="links"> |
|
|
<a href="https://github.com/idealab-isu/AFM-LLM-Defect-Guidance" class="cta-button" target="_blank"> |
|
|
<i class="fab fa-github"></i> |
|
|
View on GitHub |
|
|
</a> |
|
|
</section> |
|
|
</main> |
|
|
|
|
|
<script> |
|
|
|
|
|
const particlesContainer = document.getElementById('particles'); |
|
|
const particleCount = 50; |
|
|
|
|
|
for (let i = 0; i < particleCount; i++) { |
|
|
const particle = document.createElement('div'); |
|
|
particle.className = 'particle'; |
|
|
particle.style.left = Math.random() * 100 + '%'; |
|
|
particle.style.animationDelay = Math.random() * 10 + 's'; |
|
|
particle.style.animationDuration = (Math.random() * 10 + 10) + 's'; |
|
|
particlesContainer.appendChild(particle); |
|
|
} |
|
|
|
|
|
|
|
|
document.querySelector('.scroll-indicator').addEventListener('click', () => { |
|
|
document.querySelector('.abstract').scrollIntoView({ behavior: 'smooth' }); |
|
|
}); |
|
|
|
|
|
|
|
|
const observerOptions = { |
|
|
threshold: 0.1, |
|
|
rootMargin: '0px 0px -50px 0px' |
|
|
}; |
|
|
|
|
|
const observer = new IntersectionObserver((entries) => { |
|
|
entries.forEach(entry => { |
|
|
if (entry.isIntersecting) { |
|
|
entry.target.style.opacity = '1'; |
|
|
entry.target.style.transform = 'translateY(0)'; |
|
|
} |
|
|
}); |
|
|
}, observerOptions); |
|
|
|
|
|
document.querySelectorAll('.framework-step, .metric-card').forEach(el => { |
|
|
el.style.opacity = '0'; |
|
|
el.style.transform = 'translateY(20px)'; |
|
|
el.style.transition = 'opacity 0.6s ease, transform 0.6s ease'; |
|
|
observer.observe(el); |
|
|
}); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
