Scribd
Upload
5 views27 pages

DOCTYPE HTML

The document outlines an interactive application focused on Terahertz (THz) technology for 6G communications, highlighting its potential to meet the increasing demand for data with ultra-high speeds and low latency. It discusses THz propagation phenomena, measurement techniques, and modeling methods, emphasizing the advantages of using the THz band for future wireless applications. The application aims to present complex information in an accessible format, featuring interactive visualizations and explanations for better understanding.

Uploaded by

mokshithsrinivas07
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
5 views27 pages

DOCTYPE HTML

The document outlines an interactive application focused on Terahertz (THz) technology for 6G communications, highlighting its potential to meet the increasing demand for data with ultra-high speeds and low latency. It discusses THz propagation phenomena, measurement techniques, and modeling methods, emphasizing the advantages of using the THz band for future wireless applications. The application aims to present complex information in an accessible format, featuring interactive visualizations and explanations for better understanding.

Uploaded by

mokshithsrinivas07
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 27

<!

DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Interactive Explorer: THz for 6G Communications</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<link href="https://fonts.googleapis.com/css2?
family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<!-- Visualization & Content Choices:
- Propagation: FSPL (Chart.js line, toggle ranges), Absorption (Chart.js line,
highlight windows/peaks), Rain/Fog (Chart.js line, toggle conditions), Scattering
(HTML/CSS diagram). Goal: Explain, Compare. Interaction: Toggles, hovers.
Justification: Visual data comprehension.
- Use Cases: Tailwind grid/cards for applications (Table I, Sec VI). Click to
expand/modal for details on models. Goal: Organize, Inform. Interaction: Click.
Justification: Structured access to diverse examples.
- Measuring/Modeling: HTML/CSS table for Sounding (Table II), HTML/CSS
diagrams for Modeling (Fig 13, 14). Goal: Inform, Compare. Interaction: Toggles.
Justification: Simplified technical overview.
- LLM Integration: "Explain this" buttons for key concepts (Propagation, Use
Cases) and "Summarize" button for Overview. Goal: Inform, Synthesize. Interaction:
Click to generate LLM explanation/summary in a modal. Justification: Enhances
understanding of complex topics and provides quick summaries.
- CONFIRMATION: NO SVG graphics used. NO Mermaid JS used. -->
<style>
body {
font-family: 'Inter', sans-serif;
background-color: #fdfbf6;
color: #374151;
}
.nav-link {
@apply px-3 py-2 rounded-md text-sm font-medium text-gray-700 hover:bg-
sky-100 hover:text-sky-700 transition-colors;
}
.nav-link.active {
@apply bg-sky-600 text-white;
}
.section-title {
@apply text-3xl font-bold text-sky-700 mb-6 text-center;
}
.content-card {
@apply bg-white p-6 rounded-xl shadow-lg hover:shadow-xl transition-
shadow duration-300;
}
.chart-container {
position: relative;
width: 100%;
max-width: 700px;
margin-left: auto;
margin-right: auto;
height: 350px;
max-height: 450px;
padding: 1rem;
background-color: #ffffff;
border-radius: 0.75rem;
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0,
0.05);
}
@media (min-width: 768px) {
.chart-container {
height: 400px;
}
}
.tab-button {
@apply px-4 py-2 font-medium text-sm rounded-lg transition-colors duration-
150;
}
.tab-button.active {
@apply bg-sky-600 text-white;
}
.tab-button:not(.active) {
@apply bg-gray-200 text-gray-700 hover:bg-gray-300;
}
.modal {
@apply fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full
flex justify-center items-center;
}
.modal-content {
@apply bg-white p-8 rounded-lg shadow-xl w-11/12 md:w-3/4 lg:w-1/2 max-
h-[80vh] overflow-y-auto;
}
.tooltip {
@apply absolute z-10 px-3 py-2 text-sm font-medium text-white bg-gray-900
rounded-lg shadow-sm opacity-0 transition-opacity duration-300;
}
.has-tooltip:hover .tooltip {
@apply opacity-100;
}
.sparkle-button {
@apply flex-shrink-0;
}
</style>
</head>
<body class="antialiased">

<nav class="bg-white/80 backdrop-blur-md shadow-md sticky top-0 z-50">


<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center justify-between h-16">
<div class="flex items-center">
<span class="font-bold text-xl text-sky-700">THz for 6G</span>
</div>
<div class="hidden md:block">
<div class="ml-10 flex items-baseline space-x-4">
<a href="#overview" class="nav-link active">Overview</a>
<a href="#why_thz" class="nav-link">Why THz?</a>
<a href="#propagation" class="nav-link">Propagation</a>
<a href="#use_cases" class="nav-link">Use Cases</a>
<a href="#measurement_modeling" class="nav-link">Measure &
Model</a>
<a href="#challenges_future" class="nav-link">Road Ahead</a>
</div>
</div>
<div class="md:hidden">
<button id="mobile-menu-button" class="inline-flex items-center
justify-center p-2 rounded-md text-gray-400 hover:text-sky-700 hover:bg-gray-100
focus:outline-none focus:ring-2 focus:ring-inset focus:ring-sky-500">
<span class="sr-only">Open main menu</span>
<svg class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg"
fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-
width="2" d="M4 6h16M4 12h16m-7 6h7" />
</svg>
<svg class="hidden h-6 w-6" xmlns="http://www.w3.org/2000/svg"
fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-
width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
</div>
</div>
<div class="md:hidden hidden" id="mobile-menu">
<div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
<a href="#overview" class="nav-link block">Overview</a>
<a href="#why_thz" class="nav-link block">Why THz?</a>
<a href="#propagation" class="nav-link block">Propagation</a>
<a href="#use_cases" class="nav-link block">Use Cases</a>
<a href="#measurement_modeling" class="nav-link block">Measure &
Model</a>
<a href="#challenges_future" class="nav-link block">Road Ahead</a>
</div>
</div>
</nav>

<div class="max-w-7xl mx-auto py-8 px-4 sm:px-6 lg:px-8 space-y-16">

<section id="overview" class="pt-16 -mt-16">


<h2 class="section-title">Overview: THz for 6G Communications</h2>
<div class="content-card text-lg">
<p id="overviewText" class="mb-4">This interactive application explores
the key findings of the survey paper: "Terahertz Channel Propagation Phenomena,
Measurement Techniques and Modeling for 6G Wireless Communication
Applications." As the demand for data skyrockets, the Sixth-Generation (6G) of
wireless networks requires innovative solutions. The Terahertz (THz) band (0.1-3.0
THz) emerges as a prime candidate, offering vast unused spectrum to achieve
Terabit-per-second (Tbps) data rates and ultra-low latency.</p>
<p>This paper provides a comprehensive insight into THz channel
propagation characteristics, measurement capabilities, and modeling methods. It
surveys recent measurement campaigns and modeling efforts, discusses challenges,
and outlines future research directions towards realizing the 6G vision. This
application aims to distill that information into an accessible and engaging
format.</p>
<button id="summarizeOverviewButton" class="mt-4 px-4 py-2 bg-
emerald-200 text-emerald-800 rounded-full text-sm font-semibold hover:bg-emerald-
300 transition-colors sparkle-button w-full">✨ Summarize Overview ✨</button>
</div>
</section>

<section id="why_thz" class="pt-16 -mt-16">


<h2 class="section-title">Why Terahertz for 6G?</h2>
<div class="grid md:grid-cols-2 gap-8 items-center">
<div class="content-card">
<h3 class="text-xl font-semibold text-sky-600 mb-3">The 6G
Imperative</h3>
<ul class="list-disc list-inside space-y-2 text-gray-700">
<li>Exponential growth in data demand, exceeding 1 Tbps by
2030.</li>
<li>Current sub-300 GHz spectrum is saturated.</li>
<li>6G envisions Tbps speeds, massive capacity, and microsecond
latencies.</li>
</ul>
</div>
<div class="content-card">
<h3 class="text-xl font-semibold text-sky-600 mb-3">THz
Advantages</h3>
<ul class="list-disc list-inside space-y-2 text-gray-700">
<li>Vast, largely unoccupied, and unregulated spectrum (0.1-3.0
THz).</li>
<li>Potential for ultra-wide bandwidths, enabling ultra-high data
rates.</li>
<li>Enables new applications in sensing, imaging, and positioning
alongside communication.</li>
<li>Smaller antenna sizes possible due to shorter wavelengths.</li>
</ul>
</div>
</div>
<p class="mt-6 text-center text-gray-600">The THz band is not just about
more speed; it's about enabling a new paradigm of wireless capabilities for the
future.</p>
</section>

<section id="propagation" class="pt-16 -mt-16">


<h2 class="section-title">Understanding THz Propagation</h2>
<p class="text-center mb-8 text-lg text-gray-600">The unique
characteristics of THz waves lead to distinct propagation phenomena. Understanding
these is crucial for designing effective 6G systems. This section provides an
interactive look at some key factors.</p>

<div class="space-y-12">
<div class="content-card">
<h3 class="text-xl font-semibold text-sky-600 mb-3 flex items-center
justify-between">
Free Space Path Loss (FSPL)
<button class="ml-2 px-3 py-1 bg-sky-200 text-sky-800 rounded-full
text-xs font-semibold hover:bg-sky-300 transition-colors sparkle-button" data-
concept="Free Space Path Loss">✨ Explain this ✨</button>
</h3>
<p class="mb-4 text-gray-700">FSPL is the signal attenuation over
distance in free space. It increases with frequency and distance. At THz frequencies,
FSPL is significantly higher than at lower frequencies, necessitating high-gain,
directional antennas.</p>
<div class="chart-container">
<canvas id="fsplChart"></canvas>
</div>
<div class="mt-4 text-center">
<label for="fsplRange" class="mr-2 text-sm font-medium text-gray-
700">Select Range:</label>
<select id="fsplRange" class="p-2 border border-gray-300 rounded-
md text-sm">
<option value="100m">100 m</option>
<option value="1km" selected>1 km</option>
<option value="10km">10 km</option>
</select>
</div>
</div>

<div class="content-card">
<h3 class="text-xl font-semibold text-sky-600 mb-3 flex items-center
justify-between">
Atmospheric Molecular Absorption
<button class="ml-2 px-3 py-1 bg-sky-200 text-sky-800 rounded-full
text-xs font-semibold hover:bg-sky-300 transition-colors sparkle-button" data-
concept="Atmospheric Molecular Absorption">✨ Explain this ✨</button>
</h3>
<p class="mb-4 text-gray-700">Water vapor (H₂O) and oxygen (O₂)
molecules in the atmosphere resonate at specific THz frequencies, causing severe
signal absorption. This creates "transmission windows" where communication is
more feasible. These absorption peaks can lead to attenuation exceeding 10,000
dB/km.</p>
<div class="chart-container">
<canvas id="absorptionChart"></canvas>
</div>
</div>

<div class="content-card">
<h3 class="text-xl font-semibold text-sky-600 mb-3 flex items-center
justify-between">
Rain & Fog Attenuation
<button class="ml-2 px-3 py-1 bg-sky-200 text-sky-800 rounded-full
text-xs font-semibold hover:bg-sky-300 transition-colors sparkle-button" data-
concept="Rain and Fog Attenuation">✨ Explain this ✨</button>
</h3>
<p class="mb-4 text-gray-700">Rain, snow, and fog also attenuate THz
signals. While generally less severe than molecular absorption or FSPL, these
meteorological effects must be considered for outdoor links. The impact tends to
saturate at higher THz frequencies.</p>
<div class="flex justify-center mb-4 space-x-2">
<button id="rainTab" class="tab-button active">Rain
Attenuation</button>
<button id="fogTab" class="tab-button">Fog/Cloud
Attenuation</button>
</div>
<div class="chart-container">
<canvas id="weatherAttenuationChart"></canvas>
</div>
<div id="rainOptions" class="mt-4 text-center">
<label for="rainType" class="mr-2 text-sm font-medium text-gray-
700">Rain Intensity:</label>
<select id="rainType" class="p-2 border border-gray-300 rounded-
md text-sm">
<option value="light">Light Rain (0.25 mm/h)</option>
<option value="moderate" selected>Moderate Rain (2.5
mm/h)</option>
<option value="heavy">Heavy Rain (12.5 mm/h)</option>
<option value="extreme">Extreme Rain (50 mm/h)</option>
</select>
</div>
<div id="fogOptions" class="mt-4 text-center hidden">
<label for="fogType" class="mr-2 text-sm font-medium text-gray-
700">Fog/Cloud Density:</label>
<select id="fogType" class="p-2 border border-gray-300 rounded-md
text-sm">
<option value="medium" selected>Medium Fog/Cloud (0.05
g/m³)</option>
<option value="heavy">Heavy Fog/Cloud (0.5 g/m³)</option>
</select>
</div>
</div>

<div class="content-card">
<h3 class="text-xl font-semibold text-sky-600 mb-3 flex items-center
justify-between">
Diffuse Scattering & Material Interactions
<button class="ml-2 px-3 py-1 bg-sky-200 text-sky-800 rounded-full
text-xs font-semibold hover:bg-sky-300 transition-colors sparkle-button" data-
concept="Diffuse Scattering and Material Interactions">✨ Explain this ✨</button>
</h3>
<p class="mb-4 text-gray-700">Due to their very short wavelengths
(sub-millimeter), THz waves interact strongly with surface roughness that might
appear smooth to lower frequencies. This leads to significant diffuse scattering,
where the signal reflects in many directions, rather than just a single specular
reflection. Other interactions include penetration through non-conducting materials
(like plastic, paper) and absorption by materials.</p>
<div class="flex flex-col md:flex-row justify-around items-center p-4 bg-
slate-50 rounded-lg">
<div class="text-center mb-4 md:mb-0">
<div class="w-48 h-32 border-2 border-dashed border-sky-400
rounded-lg flex flex-col justify-center items-center p-2 relative">
<span class="font-semibold text-sky-600">Smooth
Surface</span>
<svg viewBox="0 0 100 60" class="w-full h-full">
<line x1="10" y1="50" x2="90" y2="50" stroke="#0369a1"
stroke-width="2"/>
<line x1="20" y1="10" x2="50" y2="40" stroke="#fb923c"
stroke-width="1.5" stroke-dasharray="4 2"/>
<line x1="50" y1="40" x2="80" y2="10" stroke="#fb923c"
stroke-width="1.5"/>
<text x="50" y="58" text-anchor="middle" font-size="6"
fill="#374151">Specular Reflection</text>
</svg>
</div>
</div>
<div class="text-center">
<div class="w-48 h-32 border-2 border-dashed border-sky-400
rounded-lg flex flex-col justify-center items-center p-2 relative">
<span class="font-semibold text-sky-600">Rough Surface (for
THz)</span>
<svg viewBox="0 0 100 60" class="w-full h-full">
<path d="M10 50 Q 20 45, 30 50 T 50 50 T 70 50 T 90 50"
stroke="#0369a1" stroke-width="2" fill="none"/>
<line x1="20" y1="10" x2="40" y2="43" stroke="#fb923c"
stroke-width="1.5" stroke-dasharray="4 2"/>
<line x1="40" y1="43" x2="30" y2="15" stroke="#fb923c"
stroke-width="1.5"/>
<line x1="40" y1="43" x2="50" y2="12" stroke="#fb923c"
stroke-width="1.5"/>
<line x1="40" y1="43" x2="60" y2="20" stroke="#fb923c"
stroke-width="1.5"/>
<text x="50" y="58" text-anchor="middle" font-size="6"
fill="#374151">Diffuse Scattering</text>
</svg>
</div>
</div>
</div>
<p class="mt-4 text-gray-700">Understanding these interactions is
vital for modeling multipath propagation and link reliability in THz systems.</p>
</div>
</div>
</section>

<section id="use_cases" class="pt-16 -mt-16">


<h2 class="section-title">THz in Action: Diverse Use Cases</h2>
<p class="text-center mb-8 text-lg text-gray-600">The unique properties of
THz radiation open doors to a plethora of applications, from ultra-high-speed
downloads to advanced sensing. This section highlights some key use cases
identified for THz communications.</p>
<div id="useCasesGrid" class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
</div>
</section>

<div id="useCaseModal" class="modal hidden">


<div class="modal-content">
<div class="flex justify-between items-center mb-4">
<h3 id="modalTitle" class="text-2xl font-semibold text-sky-700">Use
Case Details</h3>
<button id="closeModal" class="text-gray-700 hover:text-red-500 text-
2xl">&times;</button>
</div>
<div id="modalBody" class="space-y-3 text-gray-700">
</div>
</div>
</div>

<div id="llmExplanationModal" class="modal hidden">


<div class="modal-content">
<div class="flex justify-between items-center mb-4">
<h3 id="llmModalTitle" class="text-2xl font-semibold text-sky-
700">Explanation</h3>
<button id="closeLlmModal" class="text-gray-700 hover:text-red-500
text-2xl">&times;</button>
</div>
<div id="llmModalBody" class="space-y-3 text-gray-700">
</div>
</div>
</div>

<section id="measurement_modeling" class="pt-16 -mt-16">


<h2 class="section-title">Measuring & Modeling the THz Channel</h2>
<p class="text-center mb-8 text-lg text-gray-600">Accurate channel
characterization is fundamental for designing robust THz communication systems.
This involves sophisticated measurement techniques and advanced modeling
approaches.</p>

<div class="grid md:grid-cols-2 gap-8">


<div class="content-card">
<h3 class="text-xl font-semibold text-sky-600 mb-4">Channel
Sounding Techniques</h3>
<p class="mb-4">Various techniques are employed to "sound" or
measure the THz channel:</p>
<div id="soundingTechniquesTableContainer" class="overflow-x-auto">
</div>
</div>

<div class="content-card">
<h3 class="text-xl font-semibold text-sky-600 mb-4">Channel Modeling
Methods</h3>
<p class="mb-4">Models are developed to predict channel
behavior:</p>
<ul class="space-y-4">
<li>
<h4 class="font-semibold text-gray-800">Deterministic Models
(e.g., Ray-Tracing)</h4>
<p class="text-sm text-gray-600">Use laws of physics and precise
environment geometry to predict signal paths. Computationally intensive but can be
accurate.</p>
<div class="mt-2 p-3 bg-slate-50 rounded-md text-center has-
tooltip">
<span class="text-sm text-sky-700">Ray-Tracing Concept
&#x24D8;</span>
<div class="tooltip">Rays are traced from Tx to Rx, accounting
for reflections, diffractions, and scattering based on environmental geometry.</div>
<svg viewBox="0 0 100 50" class="w-32 h-16 mx-auto mt-1">
<rect x="5" y="20" width="10" height="10" fill="#3b82f6"/>
<text x="10" y="15" font-size="6">Tx</text>
<rect x="85" y="20" width="10" height="10"
fill="#10b981"/> <text x="90" y="15" font-size="6">Rx1</text>
<line x1="15" y1="25" x2="85" y2="25" stroke="#fb923c"
stroke-width="1"/> <rect x="45" y="5" width="10" height="30" fill="#9ca3af"/>
<line x1="15" y1="25" y2="45" stroke="#fdba74" stroke-width="1" stroke-
dasharray="2 2"/> <line x1="45" y1="10" x2="85" y2="25" stroke="#fdba74"
stroke-width="1" stroke-dasharray="2 2"/>
</svg>
</div>
</li>
<li>
<h4 class="font-semibold text-gray-800">Stochastic Models (e.g.,
Saleh-Valenzuela, GBSM)</h4>
<p class="text-sm text-gray-600">Based on statistical
distributions derived from measurements. Less complex but rely on extensive
data.</p>
<div class="mt-2 p-3 bg-slate-50 rounded-md text-center has-
tooltip">
<span class="text-sm text-sky-700">Clustering Concept (SV
Model) &#x24D8;</span>
<div class="tooltip">Multipath components arrive in clusters,
with rays within a cluster having similar delays and angles. Both clusters and rays
within clusters decay in power.</div>
<svg viewBox="0 0 100 60" class="w-40 h-20 mx-auto mt-1">
<line x1="10" y1="50" x2="10" y2="10" stroke="#3b82f6"
stroke-width="2"/> <text x="10" y="5" font-size="5">P</text>
<line x1="10" y1="50" x2="90" y2="50" stroke="#3b82f6"
stroke-width="2"/> <text x="95" y="50" font-size="5">Time</text>
<line x1="20" y1="50" x2="20" y2="20" stroke="#fb923c"
stroke-width="1.5"/>
<line x1="25" y1="50" x2="25" y2="25" stroke="#fdba74"
stroke-width="1.5"/>
<circle cx="22.5" cy="15" r="10" stroke="#a5b4fc" stroke-
dasharray="2 2" fill="none"/> <text x="22.5" y="8" font-size="4">Cluster
1</text>
<line x1="50" y1="50" x2="50" y2="30" stroke="#fb923c"
stroke-width="1.5"/>
<line x1="55" y1="50" x2="55" y2="35" stroke="#fdba74"
stroke-width="1.5"/>
<circle cx="52.5" cy="25" r="10" stroke="#a5b4fc" stroke-
dasharray="2 2" fill="none"/> <text x="52.5" y="18" font-size="4">Cluster
2</text>
</svg>
</div>
</li>
<li>
<h4 class="font-semibold text-gray-800">Hybrid Models</h4>
<p class="text-sm text-gray-600">Combine deterministic and
stochastic methods to balance accuracy and complexity. Often use ray-tracing
calibrated with measurement data.</p>
</li>
</ul>
</div>
</div>
</section>

<section id="challenges_future" class="pt-16 -mt-16">


<h2 class="section-title">The Road Ahead: Challenges & Future
Directions</h2>
<p class="text-center mb-8 text-lg text-gray-600">Realizing the full
potential of THz for 6G involves overcoming significant challenges and pursuing
innovative research.</p>
<div class="grid md:grid-cols-2 gap-8">
<div class="content-card">
<h3 class="text-xl font-semibold text-sky-600 mb-3">Open Issues &
Challenges</h3>
<ul class="list-disc list-inside space-y-2 text-gray-700">
<li>Modeling diffuse particle scattering accurately.</li>
<li>Understanding and mitigating atmospheric channel dispersion
(GVD).</li>
<li>Capturing time-varying channel characteristics due to mobility
and blockage.</li>
<li>Establishing RF EMF exposure guidelines for THz
frequencies.</li>
<li>Developing compact, low-cost, and high-power THz
components.</li>
</ul>
</div>
<div class="content-card">
<h3 class="text-xl font-semibold text-sky-600 mb-3">Future Research
Directions</h3>
<ul class="list-disc list-inside space-y-2 text-gray-700">
<li>Ultra-Massive MIMO (UM-MIMO) channel modeling.</li>
<li>Advanced material characterization at THz frequencies.</li>
<li>AI-enabled channel modeling for efficiency and accuracy.</li>
<li>Further development of hybrid channel models.</li>
<li>Improved channel sounding techniques (faster, wider bandwidth,
MIMO).</li>
<li>Reconfigurable Intelligent Surfaces (RIS) for THz.</li>
</ul>
</div>
</div>
</section>

</div>

<footer class="bg-gray-800 text-white text-center p-6 mt-12">


<p>&copy; 2025 THz for 6G Interactive Explorer. Based on the survey by
Serghiou et al.</p>
<p class="text-sm text-gray-400 mt-1">This is a conceptual application for
information exploration.</p>
</footer>

<script>
const mobileMenuButton = document.getElementById('mobile-menu-button');
const mobileMenu = document.getElementById('mobile-menu');
mobileMenuButton.addEventListener('click', () => {
mobileMenu.classList.toggle('hidden');
mobileMenuButton.querySelectorAll('svg').forEach(svg =>
svg.classList.toggle('hidden'));
});

document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
document.querySelectorAll('.nav-link').forEach(link =>
link.classList.remove('active'));
if (!this.classList.contains('block')) {
this.classList.add('active');
} else {
const desktopLink = document.querySelector(`.md\\:block a[href="$
{this.getAttribute('href')}"]`);
if (desktopLink) desktopLink.classList.add('active');
}
if (!mobileMenu.classList.contains('hidden')) {
mobileMenu.classList.add('hidden');
mobileMenuButton.querySelectorAll('svg').forEach(svg =>
svg.classList.toggle('hidden'));
}
});
});

const sections = document.querySelectorAll('section');


const navLinks = document.querySelectorAll('.nav-link');
window.onscroll = () => {
let current = '';
sections.forEach(section => {
const sectionTop = section.offsetTop;
if (pageYOffset >= sectionTop - 80) {
current = section.getAttribute('id');
}
});

navLinks.forEach(link => {
link.classList.remove('active');
if (link.getAttribute('href').substring(1) === current) {
link.classList.add('active');
}
});
if (!current && pageYOffset < sections[0].offsetTop - 80) {
const firstLink = document.querySelector('.nav-link[href="#overview"]');
if(firstLink) firstLink.classList.add('active');
}
};

const fsplFrequencies = Array.from({ length: 30 }, (_, i) => (i + 1) * 100);

function calculateFSPL(freq_GHz, dist_km) {


const dist_m = dist_km * 1000;
return 20 * Math.log10(dist_m) + 20 * Math.log10(freq_GHz) + 92.45;
}

const fsplDatasets = {
'100m': fsplFrequencies.map(f => calculateFSPL(f, 0.1)),
'1km': fsplFrequencies.map(f => calculateFSPL(f, 1)),
'10km': fsplFrequencies.map(f => calculateFSPL(f, 10)),
};

const fsplChartCtx = document.getElementById('fsplChart').getContext('2d');


const fsplChart = new Chart(fsplChartCtx, {
type: 'line',
data: {
labels: fsplFrequencies.map(f => f/1000 + ' THz'),
datasets: [{
label: 'FSPL for 1 km (dB)',
data: fsplDatasets['1km'],
borderColor: 'rgb(2, 132, 199)',
tension: 0.1,
fill: false,
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
x: { title: { display: true, text: 'Frequency (THz)' } },
y: { title: { display: true, text: 'Path Loss (dB)' } }
},
plugins: {
tooltip: {
callbacks: {
label: function(context) {
let label = context.dataset.label || '';
if (label) {
label += ': ';
}
if (context.parsed.y !== null) {
label += context.parsed.y.toFixed(2) + ' dB';
}
return label;
}
}
},
title: {
display: true,
text: 'Free Space Path Loss vs. Frequency'
}
}
}
});

document.getElementById('fsplRange').addEventListener('change', function() {
const selectedRange = this.value;
fsplChart.data.datasets[0].data = fsplDatasets[selectedRange];
fsplChart.data.datasets[0].label = `FSPL for ${selectedRange.replace('km','
km').replace('m', ' m')} (dB)`;
fsplChart.update();
});

const absorptionFrequencies = [50, 100, 183, 220, 325, 380, 448, 557, 620,
752, 900, 980];
const absorptionData = [0.1, 0.3, 30, 3, 10, 200, 300, 15000,300,
10000,100, 2000];
const absorptionWindows = [
{freq: 200, label: "Window ~200GHz"},
{freq: 350, label: "Window ~350GHz"},
{freq: 850, label: "Window ~850GHz"}
];

const absorptionChartCtx =
document.getElementById('absorptionChart').getContext('2d');
new Chart(absorptionChartCtx, {
type: 'line',
data: {
labels: absorptionFrequencies.map(f => f + ' GHz'),
datasets: [{
label: 'Atmospheric Gas Attenuation (dB/km)',
data: absorptionData,
borderColor: 'rgb(234, 88, 12)',
backgroundColor: 'rgba(234, 88, 12, 0.1)',
tension: 0.3,
fill: true,
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
x: { title: { display: true, text: 'Frequency (GHz)' } },
y: { title: { display: true, text: 'Attenuation (dB/km)' }, type:
'logarithmic' }
},
plugins: {
tooltip: {
callbacks: {
label: function(context) {
let label = context.dataset.label || '';
if (label) { label += ': '; }
if (context.parsed.y !== null) {
label += context.parsed.y.toFixed(1) + ' dB/km';
}
return label;
}
}
},
title: {
display: true,
text: 'Atmospheric Molecular Absorption'
},
annotation: {
annotations: absorptionWindows.map(win => ({
type: 'line',
scaleID: 'x',
value: win.freq + ' GHz',
borderColor: 'rgba(75, 192, 192, 0.5)',
borderWidth: 2,
borderDash: [6, 6],
label: {
content: win.label,
enabled: true,
position: 'top',
backgroundColor: 'rgba(75, 192, 192, 0.2)',
font: { size: 10 },
color: '#333'
}
}))
}
}
}
});

const weatherFrequencies = [10, 50, 100, 200, 300, 400, 600, 800, 1000];
const rainAttenuationData = {
light: [0.01, 0.1, 0.2, 0.3, 0.35, 0.38, 0.4, 0.41, 0.42],
moderate: [0.05, 0.8, 1.5, 2.0, 2.2, 2.3, 2.4, 2.45, 2.5],
heavy: [0.2, 3.0, 5.0, 6.0, 6.5, 6.8, 7.0, 7.1, 7.2],
extreme: [0.8, 10.0,18.0,22.0,24.0, 25.0, 26.0,26.5, 27.0]
};
const fogAttenuationData = {
medium: [0.002, 0.05, 0.2, 0.5, 0.8, 1.0, 1.3, 1.5, 1.6],
heavy: [0.02, 0.5, 2.0, 5.0, 8.0, 10.0,13.0,15.0,16.0]
};

const weatherChartCtx =
document.getElementById('weatherAttenuationChart').getContext('2d');
const weatherChart = new Chart(weatherChartCtx, {
type: 'line',
data: {
labels: weatherFrequencies.map(f => f + ' GHz'),
datasets: [{
label: 'Moderate Rain Attenuation (2.5 mm/h)',
data: rainAttenuationData.moderate,
borderColor: 'rgb(59, 130, 246)',
tension: 0.1,
fill: false,
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
x: { title: { display: true, text: 'Frequency (GHz)' } },
y: { title: { display: true, text: 'Attenuation (dB/km)' } }
},
plugins: {
tooltip: {
callbacks: {
label: function(context) {
let label = context.dataset.label || '';
if (label) { label += ': '; }
if (context.parsed.y !== null) {
label += context.parsed.y.toFixed(2) + ' dB/km';
}
return label;
}
}
},
title: {
display: true,
text: 'Rain Attenuation vs. Frequency'
}
}
}
});

const rainTab = document.getElementById('rainTab');


const fogTab = document.getElementById('fogTab');
const rainOptions = document.getElementById('rainOptions');
const fogOptions = document.getElementById('fogOptions');
const rainTypeSelect = document.getElementById('rainType');
const fogTypeSelect = document.getElementById('fogType');

rainTab.addEventListener('click', () => {
rainTab.classList.add('active');
fogTab.classList.remove('active');
rainOptions.classList.remove('hidden');
fogOptions.classList.add('hidden');
updateWeatherChart('rain', rainTypeSelect.value);
});

fogTab.addEventListener('click', () => {
fogTab.classList.add('active');
rainTab.classList.remove('active');
fogOptions.classList.remove('hidden');
rainOptions.classList.add('hidden');
updateWeatherChart('fog', fogTypeSelect.value);
});

rainTypeSelect.addEventListener('change', function()
{ updateWeatherChart('rain', this.value); });
fogTypeSelect.addEventListener('change', function()
{ updateWeatherChart('fog', this.value); });

function updateWeatherChart(type, selection) {


if (type === 'rain') {
weatherChart.data.datasets[0].data = rainAttenuationData[selection];
const selectedText =
rainTypeSelect.options[rainTypeSelect.selectedIndex].text;
weatherChart.data.datasets[0].label = `Rain Attenuation ($
{selectedText})`;
weatherChart.options.plugins.title.text = 'Rain Attenuation vs. Frequency';
} else {
weatherChart.data.datasets[0].data = fogAttenuationData[selection];
const selectedText =
fogTypeSelect.options[fogTypeSelect.selectedIndex].text;
weatherChart.data.datasets[0].label = `Fog/Cloud Attenuation ($
{selectedText})`;
weatherChart.options.plugins.title.text = 'Fog/Cloud Attenuation vs.
Frequency';
}
weatherChart.update();
}
const useCases = [
{
id: "kiosk",
title: "Kiosk/Desktop Downloads",
icon: "💻",
range: "~0.5 m",
propagation: "LoS, NLOS, user alignment uncertainty.",
details: "Ultra-fast file exchange (e.g., 'information showers'). Models
consider reflections, antenna misalignment. Early systems demonstrated 20 Gbps
over 1m at 300 GHz. Stochastic models for various scenarios up to 321 GHz exist.
Recent work explores 500-750 GHz bands, noting significant specular and diffuse
components from materials."
},
{
id: "datacenter",
title: "Data Center Networks",
icon: "",
range: "A few 10s of m",
propagation: "LoS, Directed-NLOS (DNLoS), reflections from racks.",
details: "Wireless links between servers/racks to replace cables, improving
flexibility and cooling. MIMO channel sounding at 300-312 GHz characterized delay
dispersion, shadowing, path loss. Models include moving scatterers and impact of
cooling systems. Cluster-based SV model modifications developed."
},
{
id: "intradevice",
title: "Intra-Device Communication",
icon: "📱",
range: "A few cm",
propagation: "LoS, significant multipath within device casing.",
details: "Chip-to-chip, board-to-board wireless links to save space and
energy. Measurements at 300 GHz show sensitivity to Tx/Rx heights. Propagation in
narrow enclosures induces less multipath than open environments, but PCB impact is
relevant. Simulations show Tbps potential for on-chip links."
},
{
id: "backhaul",
title: "Wireless Backhaul/Fronthaul",
icon: "📡",
range: "~100 m to km range",
propagation: "Primarily LoS, atmospheric attenuation, rain/fog critical.",
details: "Extending fiber networks where physical cables are impractical.
Requires highly directive antennas. Automatic planning algorithms essential.
Demonstrated 64 Gbps over 850m at 240 GHz."
},
{
id: "wlan",
title: "Wireless Local Area Networks (WLAN)",
icon: "📶",
range: "~20 m (indoor)",
propagation: "LoS, link blockage, scattering, reflections.",
details: "Mainly for interconnecting access points. Calibrated Ray-Tracing
(RT) simulations for indoor channels at 300 GHz. GBSMs describe specular
components and scattering loss. Antenna misalignment and directivity are critical.
Studies on AP densification and dynamic user blockage exist."
},
{
id: "hst",
title: "High-Speed Train (HST) Communications",
icon: "🚄",
range: "< 100 m (Train-to-Infrastructure)",
propagation: "LoS, Directed-NLOS, dynamic conditions, high path loss.",
details: "For Train-to-Infrastructure (T2I) and intra-wagon links.
Measurements at 304 GHz for T2I show 2nd order reflections are important. Intra-
wagon channels also studied. Reflectors or RIS could aid DNLoS. Multipath sparsity is
a key characteristic."
},
{
id: "isl",
title: "Inter-Satellite Links (ISL)",
icon: "",
range: "~1 km to 100s of km",
propagation: "LoS, minimal atmospheric attenuation (in space), satellite
drift.",
details: "Alternative to microwave/optical for satellite communication. THz
offers large bandwidth with less strict alignment than optical. Near-earth and deep-
space channels considered. Achieved 100 Gbps at 1km (340 GHz), 2.5 Gbps at
100km (requires high gain/power)."
},
{
id: "v2x",
title: "Vehicle-to-Everything (V2X)",
icon: "🚗",
range: "< 100 m",
propagation: "LoS, reflections, dynamic conditions, blockage by other
vehicles.",
details: "For enhanced road safety and user experience. Interference
studies at 300 GHz show impact of side-lane reflections. Measurements for V2V
(stationary) considered LoS, reflections, under-vehicle paths. Models for V2I in
urban/highway scenarios, including rain/snow effects."
},
{
id: "d2d",
title: "Device-to-Device (D2D) Communications",
icon: "📲",
range: "~1 m",
propagation: "LoS, dynamic conditions, molecular attenuation,
interference.",
details: "Direct communication between nearby devices to enhance
spectral efficiency. Challenges include device discovery and interference
management. Double-directional measurements at 140 GHz for urban D2D. 2D
GBSM for short-range D2D developed."
},
{
id: "nanonetwork",
title: "Nano-Networks (e.g., In-Vivo)",
icon: "🔬",
range: "A few cm (sub-mm regions)",
propagation: "Tissue penetration loss, scattering, molecular absorption by
tissue.",
details: "For applications like in-body medical nano-machines. Models
account for molecular characteristics of human tissue, scattering from cells.
Radiative transfer theory used for path loss. Studies on iWNSNs analyze path loss,
noise, and capacity (Tbps at mm distances)."
}
];

const useCasesGrid = document.getElementById('useCasesGrid');


const modal = document.getElementById('useCaseModal');
const modalTitle = document.getElementById('modalTitle');
const modalBody = document.getElementById('modalBody');
const closeModalButton = document.getElementById('closeModal');

useCases.forEach(uc => {
const card = document.createElement('div');
card.className = 'content-card cursor-pointer group';
card.innerHTML = `
<div class="flex items-center mb-3">
<span class="text-3xl mr-3 group-hover:scale-110 transition-
transform">${uc.icon}</span>
<h3 class="text-lg font-semibold text-sky-600 group-hover:text-sky-700
transition-colors">${uc.title}</h3>
</div>
<p class="text-sm text-gray-600 mb-1"><strong class="font-medium
text-gray-700">Range:</strong> ${uc.range}</p>
<p class="text-sm text-gray-600"><strong class="font-medium text-gray-
700">Propagation:</strong> ${uc.propagation}</p>
<span class="block mt-3 text-xs text-sky-500 group-
hover:underline">Click for details</span>
`;
card.addEventListener('click', () => {
modalTitle.textContent = uc.title;
modalBody.innerHTML = `
<p><strong class="font-medium">Typical Range:</strong> $
{uc.range}</p>
<p><strong class="font-medium">Key Propagation
Characteristics:</strong> ${uc.propagation}</p>
<hr class="my-3">
<p><strong class="font-medium">Details & Modeling
Insights:</strong></p>
<p class="text-sm">${uc.details.replace(/\n/g, '<br>')}</p>
<button id="explainUseCaseButton" class="mt-4 px-4 py-2 bg-purple-
200 text-purple-800 rounded-full text-sm font-semibold hover:bg-purple-300
transition-colors sparkle-button w-full" data-concept="${uc.title}">✨ Explain this
Use Case ✨</button>
`;
modal.classList.remove('hidden');

document.getElementById('explainUseCaseButton').addEventListener('click',
function() {
const concept = this.getAttribute('data-concept');
openLlmExplanation(concept, "Explain the concept of");
});
});
useCasesGrid.appendChild(card);
});

closeModalButton.addEventListener('click', () => {
modal.classList.add('hidden');
});
modal.addEventListener('click', (event) => {
if (event.target === modal) {
modal.classList.add('hidden');
}
});
const llmExplanationModal = document.getElementById('llmExplanationModal');
const llmModalTitle = document.getElementById('llmModalTitle');
const llmModalBody = document.getElementById('llmModalBody');
const closeLlmModalButton = document.getElementById('closeLlmModal');

closeLlmModalButton.addEventListener('click', () => {
llmExplanationModal.classList.add('hidden');
});
llmExplanationModal.addEventListener('click', (event) => {
if (event.target === llmExplanationModal) {
llmExplanationModal.classList.add('hidden');
}
});

async function getGeminiExplanation(promptText, targetElementId) {


const targetElement = document.getElementById(targetElementId);
if (!targetElement) {
console.error("Target element not found:", targetElementId);
return;
}

targetElement.innerHTML = '<div class="text-center py-4"><div


class="animate-spin rounded-full h-8 w-8 border-b-2 border-sky-500
mx-auto"></div><p class="text-gray-600 mt-2">Generating
explanation...</p></div>';

let chatHistory = [];


chatHistory.push({ role: "user", parts: [{ text: promptText }] });

const payload = { contents: chatHistory };


const apiKey = "";
const apiUrl =
`https://generativelanguage.googleapis.com/v1beta/models/gemini-2.0-
flash:generateContent?key=${apiKey}`;

try {
const response = await fetch(apiUrl, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(payload)
});
const result = await response.json();
if (result.candidates && result.candidates.length > 0 &&
result.candidates[0].content && result.candidates[0].content.parts &&
result.candidates[0].content.parts.length > 0) {
const text = result.candidates[0].content.parts[0].text;
targetElement.innerHTML = `<p>${text.replace(/\n/g, '<br>')}</p>`;
} else {
targetElement.innerHTML = '<p class="text-red-500">Error: Could not
get explanation from LLM. Please try again.</p>';
console.error("LLM response structure unexpected:", result);
}
} catch (error) {
targetElement.innerHTML = '<p class="text-red-500">Error: Failed to
connect to LLM. Please check your network or try again later.</p>';
console.error("Error calling Gemini API:", error);
}
}

function openLlmExplanation(concept, promptPrefix) {


llmModalTitle.textContent = `${promptPrefix.includes("Summarize") ?
"Summary" : "Explanation"}: ${concept}`;
llmExplanationModal.classList.remove('hidden');
const prompt = `${promptPrefix} "${concept}" in the context of Terahertz
(THz) wireless communication for 6G networks. Keep it concise and easy to
understand.`;
getGeminiExplanation(prompt, 'llmModalBody');
}

document.querySelectorAll('.sparkle-button').forEach(button => {
button.addEventListener('click', function() {
const concept = this.getAttribute('data-concept');
openLlmExplanation(concept, "Explain the concept of");
});
});

document.getElementById('summarizeOverviewButton').addEventListener('click',
function() {
const overviewText = document.getElementById('overviewText').innerText;
openLlmExplanation("Overview", `Summarize the following text about
Terahertz (THz) for 6G communications: "${overviewText}"`);
});

const soundingTechniquesData = [
{ name: "THz-TDS", domain: "Time", bandwidth: "> 5 THz", dynamicRange:
"~100 dB", speed: "ms to 1 min", realTime: "Yes (pulsed)", range: "< 1 m",
useCases: "Material properties, molecular attenuation, scattering." },
{ name: "THz-FDS", domain: "Frequency", bandwidth: "~6 THz (high res)",
dynamicRange: "~100 dB", speed: "Several mins", realTime: "No", range: "< 1 m",
useCases: "Material properties, high-resolution spectroscopy." },
{ name: "VNA-based", domain: "Frequency", bandwidth: "Few 100s GHz",
dynamicRange: "~120 dB", speed: "Several mins/sweep", realTime: "No", range:
"Few 10s of m", useCases: "Static P2P, WLAN, backhaul, detailed path loss." },
{ name: "Sliding Correlator (SC)", domain: "Time", bandwidth: "Up to ~8 GHz
(current)", dynamicRange: "~30 dB", speed: "1000s CIRs/sec", realTime: "Yes",
range: "Few 10s of m", useCases: "Dynamic channels, V2X, HST, D2D, blockage." }
];

const tableContainer =
document.getElementById('soundingTechniquesTableContainer');
let tableHTML = `
<table class="min-w-full divide-y divide-gray-200">
<thead class="bg-gray-50">
<tr>
<th class="px-4 py-2 text-left text-xs font-medium text-gray-500
uppercase tracking-wider">Technique</th>
<th class="px-4 py-2 text-left text-xs font-medium text-gray-500
uppercase tracking-wider hidden sm:table-cell">Bandwidth</th>
<th class="px-4 py-2 text-left text-xs font-medium text-gray-500
uppercase tracking-wider hidden md:table-cell">Real-time</th>
<th class="px-4 py-2 text-left text-xs font-medium text-gray-500
uppercase tracking-wider">Primary Use</th>
</tr>
</thead>
<tbody class="bg-white divide-y divide-gray-200">`;
soundingTechniquesData.forEach(tech => {
tableHTML += `
<tr>
<td class="px-4 py-2 whitespace-nowrap text-sm font-medium text-
gray-900">${tech.name}</td>
<td class="px-4 py-2 whitespace-nowrap text-sm text-gray-500
hidden sm:table-cell">${tech.bandwidth}</td>
<td class="px-4 py-2 whitespace-nowrap text-sm text-gray-500
hidden md:table-cell">${tech.realTime}</td>
<td class="px-4 py-2 text-sm text-gray-500">$
{tech.useCases}</td>
</tr>`;
});
tableHTML += `</tbody></table>`;
tableContainer.innerHTML = tableHTML;

</script>
</body>
</html>

You might also like