|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Polyglot NLP | Transfer Learning for Low-Resource Languages</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<style> |
|
|
.gradient-bg { |
|
|
background: linear-gradient(135deg, #6B73FF 0%, #000DFF 50%, #00D4FF 100%); |
|
|
} |
|
|
.language-card:hover { |
|
|
transform: translateY(-5px); |
|
|
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); |
|
|
} |
|
|
.model-visualization { |
|
|
background: linear-gradient(45deg, #f3f4f6 0%, #e5e7eb 100%); |
|
|
} |
|
|
.typing-demo { |
|
|
width: 22ch; |
|
|
animation: typing 2s steps(22), blink .5s step-end infinite alternate; |
|
|
white-space: nowrap; |
|
|
overflow: hidden; |
|
|
border-right: 3px solid; |
|
|
font-family: monospace; |
|
|
} |
|
|
@keyframes typing { |
|
|
from { width: 0 } |
|
|
} |
|
|
@keyframes blink { |
|
|
50% { border-color: transparent } |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="font-sans antialiased text-gray-800"> |
|
|
|
|
|
<nav class="bg-white shadow-lg sticky top-0 z-50"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="flex justify-between h-16"> |
|
|
<div class="flex items-center"> |
|
|
<div class="flex-shrink-0 flex items-center"> |
|
|
<i class="fas fa-language text-3xl text-blue-600 mr-2"></i> |
|
|
<span class="text-xl font-bold text-gray-900">PolyglotNLP</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="hidden md:ml-6 md:flex md:items-center md:space-x-8"> |
|
|
<a href="#home" class="text-gray-900 hover:text-blue-600 px-3 py-2 text-sm font-medium">Home</a> |
|
|
<a href="#features" class="text-gray-900 hover:text-blue-600 px-3 py-2 text-sm font-medium">Features</a> |
|
|
<a href="#demo" class="text-gray-900 hover:text-blue-600 px-3 py-2 text-sm font-medium">Demo</a> |
|
|
<a href="#about" class="text-gray-900 hover:text-blue-600 px-3 py-2 text-sm font-medium">About</a> |
|
|
<a href="#contact" class="bg-blue-600 text-white px-4 py-2 rounded-md text-sm font-medium hover:bg-blue-700 transition">Get Started</a> |
|
|
</div> |
|
|
<div class="-mr-2 flex items-center md:hidden"> |
|
|
<button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none" aria-controls="mobile-menu" aria-expanded="false" id="mobile-menu-button"> |
|
|
<span class="sr-only">Open main menu</span> |
|
|
<i class="fas fa-bars"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="hidden md:hidden" id="mobile-menu"> |
|
|
<div class="pt-2 pb-3 space-y-1"> |
|
|
<a href="#home" class="bg-blue-50 border-blue-500 text-blue-600 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Home</a> |
|
|
<a href="#features" class="border-transparent text-gray-600 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-800 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Features</a> |
|
|
<a href="#demo" class="border-transparent text-gray-600 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-800 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Demo</a> |
|
|
<a href="#about" class="border-transparent text-gray-600 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-800 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">About</a> |
|
|
<a href="#contact" class="block w-full px-4 py-2 text-center text-white bg-blue-600 rounded-md hover:bg-blue-700 transition">Get Started</a> |
|
|
</div> |
|
|
</div> |
|
|
</nav> |
|
|
|
|
|
|
|
|
<section id="home" class="gradient-bg text-white py-20"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="lg:grid lg:grid-cols-2 lg:gap-8 items-center"> |
|
|
<div class="mb-12 lg:mb-0"> |
|
|
<h1 class="text-4xl md:text-5xl font-bold mb-6 leading-tight"> |
|
|
Breaking Language Barriers with <span class="typing-demo">Transfer Learning</span> |
|
|
</h1> |
|
|
<p class="text-xl mb-8 text-blue-100"> |
|
|
Empowering low-resource languages through advanced NLP techniques. Our transfer learning models bring high-quality language processing to underserved communities. |
|
|
</p> |
|
|
<div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4"> |
|
|
<a href="#demo" class="bg-white text-blue-600 hover:bg-gray-100 px-6 py-3 rounded-lg text-lg font-semibold text-center transition duration-300"> |
|
|
Try Our Demo |
|
|
</a> |
|
|
<a href="#about" class="border-2 border-white text-white hover:bg-white hover:text-blue-600 px-6 py-3 rounded-lg text-lg font-semibold text-center transition duration-300"> |
|
|
Learn More |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
<div class="relative"> |
|
|
<div class="bg-white/10 backdrop-blur-md rounded-2xl p-6 border border-white/20"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="w-3 h-3 rounded-full bg-red-500 mr-2"></div> |
|
|
<div class="w-3 h-3 rounded-full bg-yellow-500 mr-2"></div> |
|
|
<div class="w-3 h-3 rounded-full bg-green-500"></div> |
|
|
</div> |
|
|
<div class="bg-black/30 rounded-lg p-4 font-mono text-sm overflow-auto h-64"> |
|
|
<p class="text-green-400"># Initialize base model (mBERT)</p> |
|
|
<p class="text-green-400">base_model = AutoModel.from_pretrained('bert-base-multilingual-cased')</p> |
|
|
<br> |
|
|
<p class="text-green-400"># Add task-specific layers</p> |
|
|
<p class="text-green-400">class PolyglotModel(nn.Module):</p> |
|
|
<p class="text-green-400 ml-4">def __init__(self, base_model, num_languages):</p> |
|
|
<p class="text-green-400 ml-8">super().__init__()</p> |
|
|
<p class="text-green-400 ml-8">self.base = base_model</p> |
|
|
<p class="text-green-400 ml-8">self.classifier = nn.Linear(768, num_languages)</p> |
|
|
<br> |
|
|
<p class="text-green-400 ml-4">def forward(self, input_ids, attention_mask):</p> |
|
|
<p class="text-green-400 ml-8">outputs = self.base(input_ids, attention_mask)</p> |
|
|
<p class="text-green-400 ml-8">pooled = outputs.last_hidden_state[:, 0, :]</p> |
|
|
<p class="text-green-400 ml-8">return self.classifier(pooled)</p> |
|
|
<br> |
|
|
<p class="text-green-400"># Train with low-resource data</p> |
|
|
<p class="text-green-400">train_model(low_resource_data, epochs=5, lr=2e-5)</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="absolute -bottom-6 -right-6 bg-yellow-400 text-gray-900 px-4 py-2 rounded-lg shadow-lg font-bold"> |
|
|
Transfer Learning in Action |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-16 bg-gray-50"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="text-center mb-12"> |
|
|
<h2 class="text-3xl font-bold text-gray-900 mb-4">Supported Low-Resource Languages</h2> |
|
|
<p class="text-xl text-gray-600 max-w-3xl mx-auto"> |
|
|
We currently support these languages with limited digital resources, helping bridge the digital divide. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-6"> |
|
|
|
|
|
<div class="language-card bg-white p-6 rounded-xl shadow-md transition duration-300 flex flex-col items-center"> |
|
|
<div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-4"> |
|
|
<span class="text-2xl">🇮🇳</span> |
|
|
</div> |
|
|
<h3 class="font-bold text-lg mb-1">Nepali</h3> |
|
|
<p class="text-gray-600 text-sm text-center">~30M speakers</p> |
|
|
<div class="mt-3 w-full bg-gray-200 rounded-full h-2"> |
|
|
<div class="bg-blue-600 h-2 rounded-full" style="width: 45%"></div> |
|
|
</div> |
|
|
<span class="text-xs mt-1 text-gray-500">45% coverage</span> |
|
|
</div> |
|
|
|
|
|
<div class="language-card bg-white p-6 rounded-xl shadow-md transition duration-300 flex flex-col items-center"> |
|
|
<div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mb-4"> |
|
|
<span class="text-2xl">🇪🇹</span> |
|
|
</div> |
|
|
<h3 class="font-bold text-lg mb-1">Amharic</h3> |
|
|
<p class="text-gray-600 text-sm text-center">~25M speakers</p> |
|
|
<div class="mt-3 w-full bg-gray-200 rounded-full h-2"> |
|
|
<div class="bg-green-600 h-2 rounded-full" style="width: 38%"></div> |
|
|
</div> |
|
|
<span class="text-xs mt-1 text-gray-500">38% coverage</span> |
|
|
</div> |
|
|
|
|
|
<div class="language-card bg-white p-6 rounded-xl shadow-md transition duration-300 flex flex-col items-center"> |
|
|
<div class="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mb-4"> |
|
|
<span class="text-2xl">🇰🇪</span> |
|
|
</div> |
|
|
<h3 class="font-bold text-lg mb-1">Swahili</h3> |
|
|
<p class="text-gray-600 text-sm text-center">~16M speakers</p> |
|
|
<div class="mt-3 w-full bg-gray-200 rounded-full h-2"> |
|
|
<div class="bg-purple-600 h-2 rounded-full" style="width: 65%"></div> |
|
|
</div> |
|
|
<span class="text-xs mt-1 text-gray-500">65% coverage</span> |
|
|
</div> |
|
|
|
|
|
<div class="language-card bg-white p-6 rounded-xl shadow-md transition duration-300 flex flex-col items-center"> |
|
|
<div class="w-16 h-16 bg-yellow-100 rounded-full flex items-center justify-center mb-4"> |
|
|
<span class="text-2xl">🇲🇲</span> |
|
|
</div> |
|
|
<h3 class="font-bold text-lg mb-1">Burmese</h3> |
|
|
<p class="text-gray-600 text-sm text-center">~33M speakers</p> |
|
|
<div class="mt-3 w-full bg-gray-200 rounded-full h-2"> |
|
|
<div class="bg-yellow-600 h-2 rounded-full" style="width: 28%"></div> |
|
|
</div> |
|
|
<span class="text-xs mt-1 text-gray-500">28% coverage</span> |
|
|
</div> |
|
|
|
|
|
<div class="language-card bg-white p-6 rounded-xl shadow-md transition duration-300 flex flex-col items-center"> |
|
|
<div class="w-16 h-16 bg-red-100 rounded-full flex items-center justify-center mb-4"> |
|
|
<span class="text-2xl">🇮🇳</span> |
|
|
</div> |
|
|
<h3 class="font-bold text-lg mb-1">Odia</h3> |
|
|
<p class="text-gray-600 text-sm text-center">~35M speakers</p> |
|
|
<div class="mt-3 w-full bg-gray-200 rounded-full h-2"> |
|
|
<div class="bg-red-600 h-2 rounded-full" style="width: 22%"></div> |
|
|
</div> |
|
|
<span class="text-xs mt-1 text-gray-500">22% coverage</span> |
|
|
</div> |
|
|
|
|
|
<div class="language-card bg-white p-6 rounded-xl shadow-md transition duration-300 flex flex-col items-center"> |
|
|
<div class="w-16 h-16 bg-indigo-100 rounded-full flex items-center justify-center mb-4"> |
|
|
<span class="text-2xl">🇵🇰</span> |
|
|
</div> |
|
|
<h3 class="font-bold text-lg mb-1">Sindhi</h3> |
|
|
<p class="text-gray-600 text-sm text-center">~30M speakers</p> |
|
|
<div class="mt-3 w-full bg-gray-200 rounded-full h-2"> |
|
|
<div class="bg-indigo-600 h-2 rounded-full" style="width: 18%"></div> |
|
|
</div> |
|
|
<span class="text-xs mt-1 text-gray-500">18% coverage</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-12 text-center"> |
|
|
<a href="#" class="inline-flex items-center text-blue-600 hover:text-blue-800 font-medium"> |
|
|
Request a language <i class="fas fa-arrow-right ml-2"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="features" class="py-16 bg-white"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="text-center mb-16"> |
|
|
<h2 class="text-3xl font-bold text-gray-900 mb-4">Our Transfer Learning Approach</h2> |
|
|
<p class="text-xl text-gray-600 max-w-3xl mx-auto"> |
|
|
Leveraging state-of-the-art techniques to bring NLP to languages with limited digital resources. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid md:grid-cols-3 gap-8"> |
|
|
|
|
|
<div class="bg-gray-50 p-8 rounded-xl"> |
|
|
<div class="w-14 h-14 bg-blue-100 rounded-lg flex items-center justify-center mb-6"> |
|
|
<i class="fas fa-project-diagram text-blue-600 text-2xl"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold mb-3">Multilingual Base Models</h3> |
|
|
<p class="text-gray-600 mb-4"> |
|
|
We use pretrained multilingual models like mBERT and XLM-R as our foundation, then fine-tune them for specific low-resource languages. |
|
|
</p> |
|
|
<ul class="space-y-2"> |
|
|
<li class="flex items-start"> |
|
|
<i class="fas fa-check text-green-500 mt-1 mr-2"></i> |
|
|
<span>Leverages cross-lingual transfer</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<i class="fas fa-check text-green-500 mt-1 mr-2"></i> |
|
|
<span>Requires minimal target language data</span> |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-50 p-8 rounded-xl"> |
|
|
<div class="w-14 h-14 bg-purple-100 rounded-lg flex items-center justify-center mb-6"> |
|
|
<i class="fas fa-layer-group text-purple-600 text-2xl"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold mb-3">Adaptive Fine-Tuning</h3> |
|
|
<p class="text-gray-600 mb-4"> |
|
|
Our progressive unfreezing technique carefully adapts the model layers to preserve valuable multilingual knowledge while specializing for target languages. |
|
|
</p> |
|
|
<ul class="space-y-2"> |
|
|
<li class="flex items-start"> |
|
|
<i class="fas fa-check text-green-500 mt-1 mr-2"></i> |
|
|
<span>Preserves multilingual capabilities</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<i class="fas fa-check text-green-500 mt-1 mr-2"></i> |
|
|
<span>Optimizes for low-resource scenarios</span> |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-50 p-8 rounded-xl"> |
|
|
<div class="w-14 h-14 bg-green-100 rounded-lg flex items-center justify-center mb-6"> |
|
|
<i class="fas fa-robot text-green-600 text-2xl"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold mb-3">Task-Specific Heads</h3> |
|
|
<p class="text-gray-600 mb-4"> |
|
|
We add lightweight task-specific layers on top of the multilingual base, enabling efficient adaptation for various NLP tasks with minimal data. |
|
|
</p> |
|
|
<ul class="space-y-2"> |
|
|
<li class="flex items-start"> |
|
|
<i class="fas fa-check text-green-500 mt-1 mr-2"></i> |
|
|
<span>Supports multiple NLP tasks</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<i class="fas fa-check text-green-500 mt-1 mr-2"></i> |
|
|
<span>Reduces catastrophic forgetting</span> |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="mt-16 model-visualization rounded-2xl p-8"> |
|
|
<h3 class="text-2xl font-bold mb-6 text-center">Our Transfer Learning Architecture</h3> |
|
|
<div class="flex flex-col items-center"> |
|
|
<div class="w-full max-w-4xl"> |
|
|
|
|
|
<div class="flex flex-col items-center space-y-4"> |
|
|
|
|
|
<div class="w-full bg-gray-200 py-4 px-6 rounded-lg text-center font-mono"> |
|
|
Input Text (Low-Resource Language) |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="w-3/4 bg-blue-100 py-3 px-6 rounded-lg text-center relative"> |
|
|
<span class="font-mono">Multilingual Tokenizer</span> |
|
|
<div class="absolute -bottom-4 left-1/2 transform -translate-x-1/2 text-xs bg-blue-500 text-white px-2 py-1 rounded"> |
|
|
Shared Vocabulary |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="w-full"> |
|
|
<div class="text-center mb-2 text-sm font-medium">Multilingual Base Model (Frozen Initial Layers)</div> |
|
|
<div class="grid grid-cols-12 gap-1"> |
|
|
<div class="col-span-12 bg-blue-500 h-2 rounded-full"></div> |
|
|
<div class="col-span-12 bg-blue-400 h-2 rounded-full"></div> |
|
|
<div class="col-span-12 bg-blue-300 h-2 rounded-full"></div> |
|
|
<div class="col-span-12 bg-blue-200 h-2 rounded-full"></div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="w-full"> |
|
|
<div class="text-center mb-2 text-sm font-medium">Adaptive Fine-Tuned Layers</div> |
|
|
<div class="grid grid-cols-12 gap-1"> |
|
|
<div class="col-span-12 bg-purple-300 h-2 rounded-full"></div> |
|
|
<div class="col-span-12 bg-purple-400 h-2 rounded-full"></div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="w-2/3 bg-green-200 py-3 px-6 rounded-lg text-center relative"> |
|
|
<span class="font-mono">Language-Specific Task Head</span> |
|
|
<div class="absolute -bottom-4 left-1/2 transform -translate-x-1/2 text-xs bg-green-500 text-white px-2 py-1 rounded"> |
|
|
Trained on Target Data |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="w-full bg-gray-800 text-white py-4 px-6 rounded-lg text-center font-mono"> |
|
|
Task Output (e.g., Translation, Sentiment, etc.) |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="demo" class="py-16 bg-gray-50"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="text-center mb-12"> |
|
|
<h2 class="text-3xl font-bold text-gray-900 mb-4">Try Our Polyglot NLP Demo</h2> |
|
|
<p class="text-xl text-gray-600 max-w-3xl mx-auto"> |
|
|
Experience how transfer learning enables NLP for low-resource languages. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white rounded-xl shadow-lg overflow-hidden"> |
|
|
<div class="md:flex"> |
|
|
|
|
|
<div class="md:w-1/2 p-8 border-b md:border-b-0 md:border-r border-gray-200"> |
|
|
<h3 class="text-xl font-bold mb-6">Input Text</h3> |
|
|
|
|
|
<div class="mb-6"> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-2">Select Language</label> |
|
|
<select id="language-select" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500"> |
|
|
<option value="nepali">Nepali (नेपाली)</option> |
|
|
<option value="amharic">Amharic (አማርኛ)</option> |
|
|
<option value="swahili">Swahili (Kiswahili)</option> |
|
|
<option value="burmese">Burmese (မြန်မာဘာသာ)</option> |
|
|
</select> |
|
|
</div> |
|
|
|
|
|
<div class="mb-6"> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-2">Select Task</label> |
|
|
<select id="task-select" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500"> |
|
|
<option value="sentiment">Sentiment Analysis</option> |
|
|
<option value="translation">Translation to English</option> |
|
|
<option value="ner">Named Entity Recognition</option> |
|
|
</select> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-2">Enter Text</label> |
|
|
<textarea id="input-text" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500 h-32" placeholder="Type or paste text here..."></textarea> |
|
|
</div> |
|
|
|
|
|
<button id="process-btn" class="w-full mt-6 bg-blue-600 hover:bg-blue-700 text-white font-medium py-3 px-4 rounded-lg transition duration-300 flex items-center justify-center"> |
|
|
<i class="fas fa-cogs mr-2"></i> Process Text |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="md:w-1/2 p-8"> |
|
|
<h3 class="text-xl font-bold mb-6">Results</h3> |
|
|
|
|
|
<div id="loading" class="hidden text-center py-12"> |
|
|
<div class="inline-block animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-blue-500 mb-4"></div> |
|
|
<p class="text-gray-600">Processing your text with our transfer learning model...</p> |
|
|
</div> |
|
|
|
|
|
<div id="results" class="hidden"> |
|
|
<div class="mb-6"> |
|
|
<h4 class="font-medium text-gray-700 mb-2">Input Language</h4> |
|
|
<div id="input-lang" class="px-4 py-2 bg-gray-100 rounded-lg"></div> |
|
|
</div> |
|
|
|
|
|
<div class="mb-6"> |
|
|
<h4 class="font-medium text-gray-700 mb-2">Task Performed</h4> |
|
|
<div id="task-performed" class="px-4 py-2 bg-gray-100 rounded-lg"></div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h4 class="font-medium text-gray-700 mb-2">Results</h4> |
|
|
<div id="result-output" class="px-4 py-3 bg-gray-100 rounded-lg min-h-32"></div> |
|
|
</div> |
|
|
|
|
|
<div id="confidence" class="mt-4 hidden"> |
|
|
<h4 class="font-medium text-gray-700 mb-2">Model Confidence</h4> |
|
|
<div class="w-full bg-gray-200 rounded-full h-2.5"> |
|
|
<div id="confidence-bar" class="bg-blue-600 h-2.5 rounded-full" style="width: 0%"></div> |
|
|
</div> |
|
|
<p id="confidence-value" class="text-sm text-gray-600 mt-1"></p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div id="demo-placeholder" class="text-center py-12"> |
|
|
<i class="fas fa-language text-4xl text-gray-300 mb-4"></i> |
|
|
<h4 class="font-medium text-gray-500 mb-2">No results yet</h4> |
|
|
<p class="text-gray-400">Enter some text and click "Process Text" to see our transfer learning model in action.</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-8 bg-blue-50 border border-blue-200 rounded-lg p-6"> |
|
|
<div class="flex"> |
|
|
<div class="flex-shrink-0"> |
|
|
<i class="fas fa-info-circle text-blue-500 text-2xl"></i> |
|
|
</div> |
|
|
<div class="ml-3"> |
|
|
<h3 class="text-lg font-medium text-blue-800">About This Demo</h3> |
|
|
<p class="mt-2 text-blue-700"> |
|
|
This demo simulates how our transfer learning approach works with low-resource languages. While we can't run actual models in the browser, this shows the interface and expected behavior of our system. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="about" class="py-16 bg-white"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="lg:grid lg:grid-cols-2 lg:gap-12 items-center"> |
|
|
<div class="mb-12 lg:mb-0"> |
|
|
<h2 class="text-3xl font-bold text-gray-900 mb-6">Our Mission: Inclusive NLP</h2> |
|
|
<p class="text-lg text-gray-600 mb-6"> |
|
|
Over 3,000 languages are spoken worldwide, yet most NLP research focuses on just a handful of high-resource languages. We're changing that by making NLP accessible to all languages, regardless of available digital resources. |
|
|
</p> |
|
|
<p class="text-lg text-gray-600 mb-8"> |
|
|
Our transfer learning techniques allow us to achieve state-of-the-art results with as little as 1% of the data typically required for training NLP models from scratch. |
|
|
</p> |
|
|
|
|
|
<div class="space-y-6"> |
|
|
<div class="flex"> |
|
|
<div class="flex-shrink-0"> |
|
|
<div class="flex items-center justify-center h-12 w-12 rounded-md bg-blue-500 text-white"> |
|
|
<i class="fas fa-database"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div class="ml-4"> |
|
|
<h3 class="text-lg font-medium text-gray-900">Data Efficiency</h3> |
|
|
<p class="mt-2 text-gray-600"> |
|
|
Achieve 90% of high-resource language performance with just thousands (not millions) of training examples. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex"> |
|
|
<div class="flex-shrink-0"> |
|
|
<div class="flex items-center justify-center h-12 w-12 rounded-md bg-purple-500 text-white"> |
|
|
<i class="fas fa-globe"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div class="ml-4"> |
|
|
<h3 class="text-lg font-medium text-gray-900">Cross-Lingual Transfer</h3> |
|
|
<p class="mt-2 text-gray-600"> |
|
|
Knowledge from related languages boosts performance on truly low-resource languages. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="relative"> |
|
|
<div class="bg-gray-50 p-8 rounded-xl border border-gray-200"> |
|
|
<h3 class="text-xl font-bold mb-6">Performance Comparison</h3> |
|
|
<p class="text-gray-600 mb-6"> |
|
|
Our transfer learning approach outperforms traditional methods for low-resource languages: |
|
|
</p> |
|
|
|
|
|
<div class="space-y-6"> |
|
|
|
|
|
<div class="bg-white p-4 rounded-lg border border-gray-200"> |
|
|
<div class="flex justify-between mb-2"> |
|
|
<span class="text-sm font-medium text-gray-500">Model</span> |
|
|
<span class="text-sm font-medium text-gray-500">F1 Score</span> |
|
|
</div> |
|
|
|
|
|
<div class="space-y-4"> |
|
|
|
|
|
<div> |
|
|
<div class="flex justify-between mb-1"> |
|
|
<span class="text-sm font-medium text-gray-700">From Scratch</span> |
|
|
<span class="text-sm font-medium text-gray-700">42%</span> |
|
|
</div> |
|
|
<div class="w-full bg-gray-200 rounded-full h-2.5"> |
|
|
<div class="bg-red-500 h-2.5 rounded-full" style="width: 42%"></div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div> |
|
|
<div class="flex justify-between mb-1"> |
|
|
<span class="text-sm font-medium text-gray-700">Standard Fine-Tuning</span> |
|
|
<span class="text-sm font-medium text-gray-700">67%</span> |
|
|
</div> |
|
|
<div class="w-full bg-gray-200 rounded-full h-2.5"> |
|
|
<div class="bg-yellow-500 h-2.5 rounded-full" style="width: 67%"></div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div> |
|
|
<div class="flex justify-between mb-1"> |
|
|
<span class="text-sm font-medium text-gray-700">Our Transfer Learning</span> |
|
|
<span class="text-sm font-medium text-gray-700">83%</span> |
|
|
</div> |
|
|
<div class="w-full bg-gray-200 rounded-full h-2.5"> |
|
|
<div class="bg-green-500 h-2.5 rounded-full" style="width: 83%"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<p class="text-xs text-gray-500 mt-4 italic">Average performance across 5 low-resource languages on NER task</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white p-4 rounded-lg border border-gray-200"> |
|
|
<h4 class="font-medium mb-3">Data Requirements Comparison</h4> |
|
|
<div class="grid grid-cols-3 gap-4 text-center"> |
|
|
<div> |
|
|
<div class="text-2xl font-bold text-red-500">1M+</div> |
|
|
<div class="text-xs text-gray-500">From Scratch</div> |
|
|
</div> |
|
|
<div> |
|
|
<div class="text-2xl font-bold text-yellow-500">100K</div> |
|
|
<div class="text-xs text-gray-500">Standard FT</div> |
|
|
</div> |
|
|
<div> |
|
|
<div class="text-2xl font-bold text-green-500">10K</div> |
|
|
<div class="text-xs text-gray-500">Our Approach</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="absolute -bottom-6 -left-6 bg-white shadow-lg rounded-lg px-4 py-2 border border-gray-200"> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-3 h-3 rounded-full bg-green-500 mr-2"></div> |
|
|
<span class="font-medium">83% average performance</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="contact" class="py-16 gradient-bg text-white"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="lg:grid lg:grid-cols-2 lg:gap-12 items-center"> |
|
|
<div class="mb-12 lg:mb-0"> |
|
|
<h2 class="text-3xl font-bold mb-6">Get Started With Polyglot NLP</h2> |
|
|
<p class="text-xl mb-8 text-blue-100"> |
|
|
Whether you're a researcher, developer, or language community representative, we'd love to hear from you. |
|
|
</p> |
|
|
|
|
|
<div class="space-y-6"> |
|
|
<div class="flex"> |
|
|
<div class="flex-shrink-0"> |
|
|
<i class="fas fa-envelope text-2xl text-blue-300"></i> |
|
|
</div> |
|
|
<div class="ml-4"> |
|
|
<h3 class="text-lg font-medium">Email Us</h3> |
|
|
<p class="mt-1 text-blue-100">contact@polyglotnlp.org</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex"> |
|
|
<div class="flex-shrink-0"> |
|
|
<i class="fas fa-code-branch text-2xl text-blue-300"></i> |
|
|
</div> |
|
|
<div class="ml-4"> |
|
|
<h3 class="text-lg font-medium">GitHub</h3> |
|
|
<p class="mt-1 text-blue-100">github.com/polyglot-nlp</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex"> |
|
|
<div class="flex-shrink-0"> |
|
|
<i class="fas fa-file-alt text-2xl text-blue-300"></i> |
|
|
</div> |
|
|
<div class="ml-4"> |
|
|
<h3 class="text-lg font-medium">Research Paper</h3> |
|
|
<p class="mt-1 text-blue-100">Read our latest findings</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<div class="bg-white/10 backdrop-blur-md rounded-xl p-8 border border-white/20"> |
|
|
<h3 class="text-xl font-bold mb-6">Contact Form</h3> |
|
|
<form> |
|
|
<div class="mb-6"> |
|
|
<label for="name" class="block text-sm font-medium mb-2">Your Name</label> |
|
|
<input type="text" id="name" class="w-full px-4 py-2 bg-white/20 border border-white/30 rounded-lg focus:ring-2 focus:ring-blue-300 focus:border-blue-300 text-white placeholder-blue-200" placeholder="John Doe"> |
|
|
</div> |
|
|
|
|
|
<div class="mb-6"> |
|
|
<label for="email" class="block text-sm font-medium mb-2">Email Address</label> |
|
|
<input type="email" id="email" class="w-full px-4 py-2 bg-white/20 border border-white/30 rounded-lg focus:ring-2 focus:ring-blue-300 focus:border-blue-300 text-white placeholder-blue-200" placeholder="you@example.com"> |
|
|
</div> |
|
|
|
|
|
<div class="mb-6"> |
|
|
<label for="interest" class="block text-sm font-medium mb-2">I'm interested in</label> |
|
|
<select id="interest" class="w-full px-4 py-2 bg-white/20 border border-white/30 rounded-lg focus:ring-2 focus:ring-blue-300 focus:border-blue-300 text-white"> |
|
|
<option value="research">Research Collaboration</option> |
|
|
<option value="integration">API Integration</option> |
|
|
<option value="language">Adding a New Language</option> |
|
|
<option value="other">Other</option> |
|
|
</select> |
|
|
</div> |
|
|
|
|
|
<div class="mb-6"> |
|
|
<label for="message" class="block text-sm font-medium mb-2">Message</label> |
|
|
<textarea id="message" rows="4" class="w-full px-4 py-2 bg-white/20 border border-white/30 rounded-lg focus:ring-2 focus:ring-blue-300 focus:border-blue-300 text-white placeholder-blue-200" placeholder="Your message..."></textarea> |
|
|
</div> |
|
|
|
|
|
<button type="submit" class="w-full bg-white text-blue-600 hover:bg-gray-100 px-6 py-3 rounded-lg text-lg font-semibold transition duration-300"> |
|
|
Send Message |
|
|
</button> |
|
|
</form> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<footer class="bg-gray-900 text-white py-12"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="grid grid-cols-2 md:grid-cols-4 gap-8"> |
|
|
<div> |
|
|
<h3 class="text-lg font-semibold mb-4">PolyglotNLP</h3> |
|
|
<p class="text-gray-400"> |
|
|
Making NLP accessible for all languages through innovative transfer learning techniques. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h3 class="text-lg font-semibold mb-4">Resources</h3> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition">Documentation</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition">API Reference</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition">Research Papers</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition">Blog</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h3 class="text-lg font-semibold mb-4">Community</h3> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition">GitHub</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition">Discord</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition">Twitter</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition">Contributing</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h3 class="text-lg font-semibold mb-4">Legal</h3> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition">Privacy Policy</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition">Terms of Service</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition">License</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center"> |
|
|
<p class="text-gray-400 mb-4 md:mb-0"> |
|
|
© 2023 PolyglotNLP. All rights reserved. |
|
|
</p> |
|
|
<div class="flex space-x-6"> |
|
|
<a href="#" class="text-gray-400 hover:text-white transition"> |
|
|
<i class="fab fa-twitter text-xl"></i> |
|
|
</a> |
|
|
<a href="#" class="text-gray-400 hover:text-white transition"> |
|
|
<i class="fab fa-github text-xl"></i> |
|
|
</a> |
|
|
<a href="#" class="text-gray-400 hover:text-white transition"> |
|
|
<i class="fab fa-linkedin text-xl"></i> |
|
|
</a> |
|
|
<a href="#" class="text-gray-400 hover:text-white transition"> |
|
|
<i class="fab fa-youtube text-xl"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
<script> |
|
|
|
|
|
document.getElementById('mobile-menu-button').addEventListener('click', function() { |
|
|
const menu = document.getElementById('mobile-menu'); |
|
|
menu.classList.toggle('hidden'); |
|
|
}); |
|
|
|
|
|
|
|
|
document.getElementById('process-btn').addEventListener('click', function() { |
|
|
const inputText = document.getElementById('input-text').value.trim(); |
|
|
const language = document.getElementById('language-select').value; |
|
|
const task = document.getElementById('task-select').value; |
|
|
|
|
|
if (!inputText) { |
|
|
alert('Please enter some text to process'); |
|
|
return; |
|
|
} |
|
|
|
|
|
|
|
|
document.getElementById('loading').classList.remove('hidden'); |
|
|
document.getElementById('results').classList.add('hidden'); |
|
|
document.getElementById('demo-placeholder').classList.add('hidden'); |
|
|
|
|
|
|
|
|
setTimeout(function() { |
|
|
|
|
|
document.getElementById('loading').classList.add('hidden'); |
|
|
|
|
|
|
|
|
document.getElementById('input-lang').textContent = document.getElementById('language-select').options[document.getElementById('language-select').selectedIndex].text; |
|
|
document.getElementById('task-performed').textContent = document.getElementById('task-select').options[document.getElementById('task-select').selectedIndex].text; |
|
|
|
|
|
|
|
|
let resultOutput = ''; |
|
|
let confidence = Math.random() * 30 + 70; |
|
|
|
|
|
if (task === 'sentiment') { |
|
|
const sentiments = ['Positive', 'Negative', 'Neutral']; |
|
|
const randomSentiment = sentiments[Math.floor(Math.random() * sentiments.length)]; |
|
|
resultOutput = `Sentiment: <span class="font-bold ${randomSentiment === 'Positive' ? 'text-green-600' : randomSentiment === 'Negative' ? 'text-red-600' : 'text-yellow-600'}">${randomSentiment}</span>`; |
|
|
|
|
|
document.getElementById('confidence').classList.remove('hidden'); |
|
|
document.getElementById('confidence-bar').style.width = `${confidence}%`; |
|
|
document.getElementById('confidence-value').textContent = `Model is ${confidence.toFixed(1)}% confident in this prediction`; |
|
|
} |
|
|
else if (task === 'translation') { |
|
|
resultOutput = `This is a simulated translation from ${language} to English. In a real implementation, this would show the actual translation output from our transfer learning model.`; |
|
|
} |
|
|
else if (task === 'ner') { |
|
|
resultOutput = `[PERSON] John Doe [/PERSON] from [LOCATION] Kathmandu [/LOCATION] works at [ORGANIZATION] PolyglotNLP [/ORGANIZATION].`; |
|
|
} |
|
|
|
|
|
document.getElementById('result-output').innerHTML = resultOutput; |
|
|
document.getElementById('results').classList.remove('hidden'); |
|
|
}, 1500); |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelectorAll('a[href^="#"]').forEach(anchor => { |
|
|
anchor.addEventListener('click', function (e) { |
|
|
e.preventDefault(); |
|
|
|
|
|
const targetId = this.getAttribute('href'); |
|
|
if (targetId === '#') return; |
|
|
|
|
|
const targetElement = document.querySelector(targetId); |
|
|
if (targetElement) { |
|
|
window.scrollTo({ |
|
|
top: targetElement.offsetTop - 80, |
|
|
behavior: 'smooth' |
|
|
}); |
|
|
|
|
|
|
|
|
const mobileMenu = document.getElementById('mobile-menu'); |
|
|
if (!mobileMenu.classList.contains('hidden')) { |
|
|
mobileMenu.classList.add('hidden'); |
|
|
} |
|
|
} |
|
|
}); |
|
|
}); |
|
|
</script> |
|
|
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=gaur3009/newgbd" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
