|
<!DOCTYPE html> |
|
<html lang="en"> |
|
<head> |
|
<meta charset="UTF-8"> |
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
<title>Hugging Face Assistant</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, #ff758c 0%, #ff7eb3 100%); |
|
} |
|
.chat-bubble { |
|
border-radius: 20px; |
|
position: relative; |
|
max-width: 80%; |
|
} |
|
.user-bubble { |
|
background-color: #f3f4f6; |
|
margin-left: auto; |
|
border-bottom-right-radius: 5px; |
|
} |
|
.bot-bubble { |
|
background-color: white; |
|
margin-right: auto; |
|
border-bottom-left-radius: 5px; |
|
} |
|
.typing-indicator span { |
|
display: inline-block; |
|
width: 8px; |
|
height: 8px; |
|
border-radius: 50%; |
|
background-color: #6b7280; |
|
margin: 0 2px; |
|
animation: bounce 1.4s infinite ease-in-out; |
|
} |
|
.typing-indicator span:nth-child(2) { |
|
animation-delay: 0.2s; |
|
} |
|
.typing-indicator span:nth-child(3) { |
|
animation-delay: 0.4s; |
|
} |
|
@keyframes bounce { |
|
0%, 60%, 100% { transform: translateY(0); } |
|
30% { transform: translateY(-5px); } |
|
} |
|
.feature-card:hover { |
|
transform: translateY(-5px); |
|
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); |
|
} |
|
</style> |
|
</head> |
|
<body class="bg-gray-50 min-h-screen"> |
|
<div class="gradient-bg text-white py-6 px-4 shadow-lg"> |
|
<div class="container mx-auto flex justify-between items-center"> |
|
<div class="flex items-center space-x-3"> |
|
<img src="https://huggingface.co/front/assets/huggingface_logo-noborder.svg" alt="Hugging Face Logo" class="h-10"> |
|
<h1 class="text-2xl font-bold">Hugging Face Assistant</h1> |
|
</div> |
|
<div class="flex space-x-4"> |
|
<button class="bg-white text-pink-600 px-4 py-2 rounded-full font-semibold hover:bg-gray-100 transition"> |
|
<i class="fas fa-sign-in-alt mr-2"></i>Login |
|
</button> |
|
<button class="border border-white px-4 py-2 rounded-full font-semibold hover:bg-white hover:text-pink-600 transition"> |
|
<i class="fas fa-user-plus mr-2"></i>Sign Up |
|
</button> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<div class="container mx-auto px-4 py-8"> |
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8"> |
|
|
|
<div class="lg:col-span-1 bg-white rounded-xl shadow-md p-6 h-fit sticky top-6"> |
|
<h2 class="text-xl font-bold text-gray-800 mb-6 flex items-center"> |
|
<i class="fas fa-robot mr-3 text-pink-500"></i> How Can I Help? |
|
</h2> |
|
|
|
<div class="space-y-4"> |
|
<div class="feature-card bg-gray-50 p-4 rounded-lg transition cursor-pointer hover:bg-pink-50 border border-gray-100" onclick="showFeature('models')"> |
|
<h3 class="font-semibold text-gray-800 flex items-center"> |
|
<i class="fas fa-search mr-2 text-blue-500"></i> Find Models |
|
</h3> |
|
<p class="text-sm text-gray-600 mt-1">Discover the perfect pre-trained model for your project</p> |
|
</div> |
|
|
|
<div class="feature-card bg-gray-50 p-4 rounded-lg transition cursor-pointer hover:bg-pink-50 border border-gray-100" onclick="showFeature('create')"> |
|
<h3 class="font-semibold text-gray-800 flex items-center"> |
|
<i class="fas fa-plus-circle mr-2 text-green-500"></i> Create Models |
|
</h3> |
|
<p class="text-sm text-gray-600 mt-1">Guide to training and sharing your own models</p> |
|
</div> |
|
|
|
<div class="feature-card bg-gray-50 p-4 rounded-lg transition cursor-pointer hover:bg-pink-50 border border-gray-100" onclick="showFeature('chat')"> |
|
<h3 class="font-semibold text-gray-800 flex items-center"> |
|
<i class="fas fa-comments mr-2 text-purple-500"></i> Chat with Models |
|
</h3> |
|
<p class="text-sm text-gray-600 mt-1">Learn how to interact with conversational AI models</p> |
|
</div> |
|
|
|
<div class="feature-card bg-gray-50 p-4 rounded-lg transition cursor-pointer hover:bg-pink-50 border border-gray-100" onclick="showFeature('ideas')"> |
|
<h3 class="font-semibold text-gray-800 flex items-center"> |
|
<i class="fas fa-lightbulb mr-2 text-yellow-500"></i> Transform Ideas |
|
</h3> |
|
<p class="text-sm text-gray-600 mt-1">Turn your concepts into AI applications</p> |
|
</div> |
|
|
|
<div class="feature-card bg-gray-50 p-4 rounded-lg transition cursor-pointer hover:bg-pink-50 border border-gray-100" onclick="showFeature('contribute')"> |
|
<h3 class="font-semibold text-gray-800 flex items-center"> |
|
<i class="fas fa-hands-helping mr-2 text-teal-500"></i> Contribute |
|
</h3> |
|
<p class="text-sm text-gray-600 mt-1">Make valuable contributions to the community</p> |
|
</div> |
|
</div> |
|
|
|
<div class="mt-8 bg-pink-50 border border-pink-100 rounded-lg p-4"> |
|
<h3 class="font-semibold text-pink-800 flex items-center"> |
|
<i class="fas fa-bolt mr-2"></i> Quick Start |
|
</h3> |
|
<p class="text-sm text-pink-700 mt-2">New to Hugging Face? Try these first:</p> |
|
<ul class="mt-2 space-y-2 text-sm"> |
|
<li class="flex items-center text-pink-600 hover:text-pink-800 cursor-pointer" onclick="quickAction('install')"> |
|
<i class="fas fa-download mr-2"></i> Install transformers |
|
</li> |
|
<li class="flex items-center text-pink-600 hover:text-pink-800 cursor-pointer" onclick="quickAction('demo')"> |
|
<i class="fas fa-play mr-2"></i> Try a demo |
|
</li> |
|
<li class="flex items-center text-pink-600 hover:text-pink-800 cursor-pointer" onclick="quickAction('tutorial')"> |
|
<i class="fas fa-graduation-cap mr-2"></i> Beginner tutorial |
|
</li> |
|
</ul> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="lg:col-span-2"> |
|
<div class="bg-white rounded-xl shadow-md overflow-hidden"> |
|
|
|
<div class="bg-gray-800 text-white px-6 py-4 flex items-center"> |
|
<div class="w-10 h-10 rounded-full bg-pink-500 flex items-center justify-center mr-3"> |
|
<i class="fas fa-robot text-white text-xl"></i> |
|
</div> |
|
<div> |
|
<h2 class="font-bold">Hugging Face Guide</h2> |
|
<p class="text-xs text-gray-300">Online • Ready to assist</p> |
|
</div> |
|
<div class="ml-auto flex space-x-2"> |
|
<button class="w-8 h-8 rounded-full bg-gray-700 flex items-center justify-center hover:bg-gray-600"> |
|
<i class="fas fa-phone-alt text-xs"></i> |
|
</button> |
|
<button class="w-8 h-8 rounded-full bg-gray-700 flex items-center justify-center hover:bg-gray-600"> |
|
<i class="fas fa-video text-xs"></i> |
|
</button> |
|
<button class="w-8 h-8 rounded-full bg-gray-700 flex items-center justify-center hover:bg-gray-600"> |
|
<i class="fas fa-ellipsis-v text-xs"></i> |
|
</button> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="h-96 overflow-y-auto p-4 bg-gray-50" id="chat-messages"> |
|
<div class="mb-4 flex"> |
|
<div class="chat-bubble bot-bubble px-4 py-3 shadow-sm"> |
|
<p class="text-gray-800">Hello! 👋 I'm your Hugging Face assistant. How can I help you today? I can guide you through:</p> |
|
<ul class="mt-2 ml-5 list-disc text-gray-700 text-sm"> |
|
<li>Finding and using models</li> |
|
<li>Creating and training your own models</li> |
|
<li>Chatting with AI models</li> |
|
<li>Turning your ideas into AI applications</li> |
|
<li>Contributing to the Hugging Face community</li> |
|
</ul> |
|
<p class="mt-2 text-gray-600 text-sm">Click on any option to the left or type your question below!</p> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="border-t border-gray-200 p-4 bg-white"> |
|
<div class="flex items-center"> |
|
<button class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center text-gray-500 hover:bg-gray-200 mr-2"> |
|
<i class="fas fa-paperclip"></i> |
|
</button> |
|
<input type="text" id="user-input" placeholder="Type your message here..." class="flex-1 border border-gray-300 rounded-full px-4 py-2 focus:outline-none focus:ring-2 focus:ring-pink-500 focus:border-transparent"> |
|
<button onclick="sendMessage()" class="w-10 h-10 rounded-full bg-pink-500 flex items-center justify-center text-white hover:bg-pink-600 ml-2"> |
|
<i class="fas fa-paper-plane"></i> |
|
</button> |
|
</div> |
|
<div class="mt-2 flex justify-between text-xs text-gray-500"> |
|
<div> |
|
<span class="cursor-pointer hover:text-pink-500"><i class="fas fa-microphone mr-1"></i> Voice</span> |
|
<span class="ml-3 cursor-pointer hover:text-pink-500"><i class="fas fa-keyboard mr-1"></i> Keyboard</span> |
|
</div> |
|
<div> |
|
<span class="cursor-pointer hover:text-pink-500">Press Enter to send</span> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="mt-8 bg-white rounded-xl shadow-md p-6" id="feature-display"> |
|
<div class="text-center py-10"> |
|
<i class="fas fa-comment-dots text-4xl text-gray-300 mb-4"></i> |
|
<h3 class="text-xl font-semibold text-gray-500">Select a feature from the sidebar</h3> |
|
<p class="text-gray-400 mt-2">Or ask me anything about Hugging Face in the chat!</p> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<script> |
|
// Feature content templates |
|
const featureContents = { |
|
models: ` |
|
<div class="space-y-6"> |
|
<div class="flex items-start"> |
|
<div class="bg-blue-100 p-3 rounded-full mr-4"> |
|
<i class="fas fa-search text-blue-600 text-xl"></i> |
|
</div> |
|
<div> |
|
<h3 class="font-bold text-lg text-gray-800">Finding Models</h3> |
|
<p class="text-gray-600 mt-1">Discover the perfect pre-trained model for your needs from thousands available on Hugging Face.</p> |
|
|
|
<div class="mt-4 grid grid-cols-1 md:grid-cols-2 gap-4"> |
|
<div class="border border-gray-200 rounded-lg p-3 hover:border-blue-300 transition"> |
|
<h4 class="font-semibold text-blue-600 flex items-center"> |
|
<i class="fas fa-filter mr-2"></i> Filter Models |
|
</h4> |
|
<p class="text-sm text-gray-600 mt-1">Use tags to filter by task (text classification, question answering, etc.), framework, and dataset.</p> |
|
</div> |
|
<div class="border border-gray-200 rounded-lg p-3 hover:border-blue-300 transition"> |
|
<h4 class="font-semibold text-blue-600 flex items-center"> |
|
<i class="fas fa-star mr-2"></i> Popular Models |
|
</h4> |
|
<p class="text-sm text-gray-600 mt-1">Start with well-known models like BERT, GPT-2, or DistilBERT that have extensive documentation.</p> |
|
</div> |
|
</div> |
|
|
|
<div class="mt-4 bg-blue-50 border border-blue-100 rounded-lg p-4"> |
|
<h4 class="font-semibold text-blue-700 flex items-center"> |
|
<i class="fas fa-terminal mr-2"></i> Quick Code Example |
|
</h4> |
|
<div class="mt-2 bg-gray-800 rounded p-3 text-white text-sm font-mono overflow-x-auto"> |
|
<span class="text-green-400">from</span> transformers <span class="text-green-400">import</span> pipeline<br> |
|
classifier = pipeline(<span class="text-yellow-300">"sentiment-analysis"</span>)<br> |
|
classifier(<span class="text-yellow-300">"I love using Hugging Face!"</span>) |
|
</div> |
|
<button class="mt-3 bg-blue-600 text-white px-3 py-1 rounded text-sm hover:bg-blue-700 transition"> |
|
<i class="fas fa-copy mr-1"></i> Copy Code |
|
</button> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<div class="mt-6 border-t border-gray-200 pt-6"> |
|
<h3 class="font-bold text-lg text-gray-800 flex items-center"> |
|
<i class="fas fa-question-circle text-purple-500 mr-2"></i> Need Help Choosing? |
|
</h3> |
|
<p class="text-gray-600 mt-2">Tell me about your project and I'll recommend suitable models:</p> |
|
|
|
<div class="mt-3 grid grid-cols-1 sm:grid-cols-3 gap-3"> |
|
<button onclick="suggestModel('nlp')" class="bg-white border border-gray-200 rounded-lg p-3 hover:border-purple-300 hover:bg-purple-50 transition text-left"> |
|
<h4 class="font-semibold text-purple-600">NLP Tasks</h4> |
|
<p class="text-sm text-gray-600 mt-1">Text classification, generation, translation, etc.</p> |
|
</button> |
|
<button onclick="suggestModel('vision')" class="bg-white border border-gray-200 rounded-lg p-3 hover:border-purple-300 hover:bg-purple-50 transition text-left"> |
|
<h4 class="font-semibold text-purple-600">Computer Vision</h4> |
|
<p class="text-sm text-gray-600 mt-1">Image classification, object detection, etc.</p> |
|
</button> |
|
<button onclick="suggestModel('audio')" class="bg-white border border-gray-200 rounded-lg p-3 hover:border-purple-300 hover:bg-purple-50 transition text-left"> |
|
<h4 class="font-semibold text-purple-600">Audio Processing</h4> |
|
<p class="text-sm text-gray-600 mt-1">Speech recognition, audio classification, etc.</p> |
|
</button> |
|
</div> |
|
</div> |
|
</div> |
|
`, |
|
create: ` |
|
<div class="space-y-6"> |
|
<div class="flex items-start"> |
|
<div class="bg-green-100 p-3 rounded-full mr-4"> |
|
<i class="fas fa-plus-circle text-green-600 text-xl"></i> |
|
</div> |
|
<div> |
|
<h3 class="font-bold text-lg text-gray-800">Creating Models</h3> |
|
<p class="text-gray-600 mt-1">Learn how to train and share your own models on Hugging Face.</p> |
|
|
|
<div class="mt-4 space-y-4"> |
|
<div class="flex items-start"> |
|
<div class="bg-gray-100 p-2 rounded-full mr-3 mt-1"> |
|
<span class="text-gray-600 font-bold text-sm">1</span> |
|
</div> |
|
<div> |
|
<h4 class="font-semibold text-gray-700">Prepare Your Dataset</h4> |
|
<p class="text-sm text-gray-600 mt-1">Gather and preprocess your training data. Hugging Face supports many common formats.</p> |
|
</div> |
|
</div> |
|
|
|
<div class="flex items-start"> |
|
<div class="bg-gray-100 p-2 rounded-full mr-3 mt-1"> |
|
<span class="text-gray-600 font-bold text-sm">2</span> |
|
</div> |
|
<div> |
|
<h4 class="font-semibold text-gray-700">Choose a Base Model</h4> |
|
<p class="text-sm text-gray-600 mt-1">Start with a pre-trained model that matches your task (e.g., BERT for text).</p> |
|
</div> |
|
</div> |
|
|
|
<div class="flex items-start"> |
|
<div class="bg-gray-100 p-2 rounded-full mr-3 mt-1"> |
|
<span class="text-gray-600 font-bold text-sm">3</span> |
|
</div> |
|
<div> |
|
<h4 class="font-semibold text-gray-700">Fine-tune the Model</h4> |
|
<p class="text-sm text-gray-600 mt-1">Train on your specific dataset using the Transformers library.</p> |
|
</div> |
|
</div> |
|
|
|
<div class="flex items-start"> |
|
<div class="bg-gray-100 p-2 rounded-full mr-3 mt-1"> |
|
<span class="text-gray-600 font-bold text-sm">4</span> |
|
</div> |
|
<div> |
|
<h4 class="font-semibold text-gray-700">Upload to Hub</h4> |
|
<p class="text-sm text-gray-600 mt-1">Share your model with the community through the Model Hub.</p> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<div class="mt-6 bg-green-50 border border-green-100 rounded-lg p-4"> |
|
<h4 class="font-semibold text-green-700 flex items-center"> |
|
<i class="fas fa-lightbulb mr-2"></i> Pro Tip |
|
</h4> |
|
<p class="text-sm text-green-700 mt-2">Start with a smaller model like DistilBERT for faster iteration. You can always scale up later!</p> |
|
|
|
<div class="mt-4 bg-white rounded-lg p-3 border border-green-200"> |
|
<h5 class="font-medium text-gray-700 flex items-center"> |
|
<i class="fas fa-code mr-2 text-sm"></i> Training Snippet |
|
</h5> |
|
<div class="mt-2 bg-gray-800 rounded p-3 text-white text-sm font-mono overflow-x-auto"> |
|
<span class="text-green-400">from</span> transformers <span class="text-green-400">import</span> Trainer, TrainingArguments<br><br> |
|
training_args = TrainingArguments(<br> |
|
output_dir=<span class="text-yellow-300">"./results"</span>,<br> |
|
per_device_train_batch_size=<span class="text-blue-400">8</span>,<br> |
|
num_train_epochs=<span class="text-blue-400">3</span><br> |
|
)<br><br> |
|
trainer = Trainer(<br> |
|
model=model,<br> |
|
args=training_args,<br> |
|
train_dataset=train_dataset<br> |
|
)<br><br> |
|
trainer.train() |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<div class="mt-6 border-t border-gray-200 pt-6"> |
|
<h3 class="font-bold text-lg text-gray-800">Ready to Create?</h3> |
|
<p class="text-gray-600 mt-2">Choose your path:</p> |
|
|
|
<div class="mt-4 grid grid-cols-1 md:grid-cols-2 gap-4"> |
|
<div class="border border-gray-200 rounded-lg p-4 hover:border-green-300 hover:bg-green-50 transition cursor-pointer"> |
|
<h4 class="font-semibold text-green-600 flex items-center"> |
|
<i class="fas fa-book mr-2"></i> Tutorial |
|
</h4> |
|
<p class="text-sm text-gray-600 mt-2">Follow our step-by-step guide to create your first model.</p> |
|
<button class="mt-3 bg-green-600 text-white px-3 py-1 rounded text-sm hover:bg-green-700 transition"> |
|
Start Learning |
|
</button> |
|
</div> |
|
|
|
<div class="border border-gray-200 rounded-lg p-4 hover:border-green-300 hover:bg-green-50 transition cursor-pointer"> |
|
<h4 class="font-semibold text-green-600 flex items-center"> |
|
<i class="fas fa-rocket mr-2"></i> Quick Start |
|
</h4> |
|
<p class="text-sm text-gray-600 mt-2">Use our template to jump right into model creation.</p> |
|
<button class="mt-3 bg-green-600 text-white px-3 py-1 rounded text-sm hover:bg-green-700 transition"> |
|
Launch Template |
|
</button> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
`, |
|
chat: ` |
|
<div class="space-y-6"> |
|
<div class="flex items-start"> |
|
<div class="bg-purple-100 p-3 rounded-full mr-4"> |
|
<i class="fas fa-comments text-purple-600 text-xl"></i> |
|
</div> |
|
<div> |
|
<h3 class="font-bold text-lg text-gray-800">Chat with AI Models</h3> |
|
<p class="text-gray-600 mt-1">Learn how to interact with conversational AI models on Hugging Face.</p> |
|
|
|
<div class="mt-4 space-y-4"> |
|
<div class="bg-purple-50 border border-purple-100 rounded-lg p-4"> |
|
<h4 class="font-semibold text-purple-700 flex items-center"> |
|
<i class="fas fa-robot mr-2"></i> Using Chat Models |
|
</h4> |
|
<p class="text-sm text-purple-700 mt-2">Many models support conversational interfaces. Try these popular options:</p> |
|
|
|
<div class="mt-3 grid grid-cols-1 sm:grid-cols-3 gap-3"> |
|
<div class="bg-white rounded-lg p-3 border border-purple-200"> |
|
<h5 class="font-medium text-gray-700">BlenderBot</h5> |
|
<p class="text-xs text-gray-600 mt-1">Facebook's conversational agent</p> |
|
<button class="mt-2 text-xs bg-purple-600 text-white px-2 py-1 rounded hover:bg-purple-700 transition"> |
|
Try Demo |
|
</button> |
|
</div> |
|
<div class="bg-white rounded-lg p-3 border border-purple-200"> |
|
<h5 class="font-medium text-gray-700">GPT-2</h5> |
|
<p class="text-xs text-gray-600 mt-1">Text generation model</p> |
|
<button class="mt-2 text-xs bg-purple-600 text-white px-2 py-1 rounded hover:bg-purple-700 transition"> |
|
Try Demo |
|
</button> |
|
</div> |
|
<div class="bg-white rounded-lg p-3 border border-purple-200"> |
|
<h5 class="font-medium text-gray-700">DialoGPT</h5> |
|
<p class="text-xs text-gray-600 mt-1">Microsoft's dialogue model</p> |
|
<button class="mt-2 text-xs bg-purple-600 text-white px-2 py-1 rounded hover:bg-purple-700 transition"> |
|
Try Demo |
|
</button> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<div class="bg-white border border-gray-200 rounded-lg p-4"> |
|
<h4 class="font-semibold text-gray-700 flex items-center"> |
|
<i class="fas fa-code mr-2"></i> Code Implementation |
|
</h4> |
|
<p class="text-sm text-gray-600 mt-2">Here's how to set up a simple chat interface:</p> |
|
|
|
<div class="mt-3 bg-gray-800 rounded p-3 text-white text-sm font-mono overflow-x-auto"> |
|
<span class="text-green-400">from</span> transformers <span class="text-green-400">import</span> pipeline<br><br> |
|
<span class="text-gray-500"># Load a conversational model</span><br> |
|
chatbot = pipeline(<span class="text-yellow-300">"conversational"</span>, model=<span class="text-yellow-300">"facebook/blenderbot-400M-distill"</span>)<br><br> |
|
<span class="text-gray-500"># Start a conversation</span><br> |
|
conversation = chatbot(<span class="text-yellow-300">"Hi there! How are you?"</span>)<br> |
|
<span class="text-green-400">print</span>(conversation) |
|
</div> |
|
|
|
<div class="mt-3 flex space-x-3"> |
|
<button class="bg-purple-600 text-white px-3 py-1 rounded text-sm hover:bg-purple-700 transition flex items-center"> |
|
<i class="fas fa-copy mr-1"></i> Copy Code |
|
</button> |
|
<button class="bg-gray-200 text-gray-700 px-3 py-1 rounded text-sm hover:bg-gray-300 transition flex items-center"> |
|
<i class="fas fa-play mr-1"></i> Run in Colab |
|
</button> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<div class="mt-6 border-t border-gray-200 pt-6"> |
|
<h3 class="font-bold text-lg text-gray-800">Advanced Chat Features</h3> |
|
|
|
<div class="mt-4 grid grid-cols-1 md:grid-cols-2 gap-4"> |
|
<div class="border border-gray-200 rounded-lg p-4 hover:border-purple-300 hover:bg-purple-50 transition cursor-pointer"> |
|
<h4 class="font-semibold text-purple-600 flex items-center"> |
|
<i class="fas fa-cog mr-2"></i> Customize Responses |
|
</h4> |
|
<p class="text-sm text-gray-600 mt-2">Learn how to fine-tune models for your specific tone and style.</p> |
|
<button class="mt-3 text-purple-600 border border-purple-300 bg-white px-3 py-1 rounded text-sm hover:bg-purple-100 transition"> |
|
Learn More |
|
</button> |
|
</div> |
|
|
|
<div class="border border-gray-200 rounded-lg p-4 hover:border-purple-300 hover:bg-purple-50 transition cursor-pointer"> |
|
<h4 class="font-semibold text-purple-600 flex items-center"> |
|
<i class="fas fa-shield-alt mr-2"></i> Safety & Moderation |
|
</h4> |
|
<p class="text-sm text-gray-600 mt-2">Implement filters and controls for safer conversations.</p> |
|
<button class="mt-3 text-purple-600 border border-purple-300 bg-white px-3 py-1 rounded text-sm hover:bg-purple-100 transition"> |
|
Learn More |
|
</button> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
`, |
|
ideas: ` |
|
<div class="space-y-6"> |
|
<div class="flex items-start"> |
|
<div class="bg-yellow-100 p-3 rounded-full mr-4"> |
|
<i class="fas fa-lightbulb text-yellow-600 text-xl"></i> |
|
</div> |
|
<div> |
|
<h3 class="font-bold text-lg text-gray-800">Transform Ideas into AI Tools</h3> |
|
<p class="text-gray-600 mt-1">Turn your concepts into real Hugging Face applications with these steps:</p> |
|
|
|
<div class="mt-6 space-y-6"> |
|
<div class="flex items-start"> |
|
<div class="bg-gray-100 p-2 rounded-full mr-4 mt-1"> |
|
<i class="fas fa-pen text-gray-600"></i> |
|
</div> |
|
<div> |
|
<h4 class="font-semibold text-gray-700">1. Define Your Idea</h4> |
|
<p class="text-sm text-gray-600 mt-1">Clearly outline what problem your AI tool will solve. Be specific about inputs, outputs, and use cases.</p> |
|
<div class="mt-3 bg-white border border-gray-200 rounded-lg p-3"> |
|
<h5 class="font-medium text-sm text-gray-700">Example Idea:</h5> |
|
<p class="text-sm text-gray-600 mt-1 italic">"An AI that analyzes customer support emails and automatically categorizes them by urgency and topic."</p> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<div class="flex items-start"> |
|
<div class="bg-gray-100 p-2 rounded-full mr-4 mt-1"> |
|
<i class="fas fa-search text-gray-600"></i> |
|
</div> |
|
<div> |
|
<h4 class="font-semibold text-gray-700">2. Research Existing Models</h4> |
|
<p class="text-sm text-gray-600 mt-1">Check if there are existing models that can serve as a foundation for your idea.</p> |
|
<button class="mt-3 bg-yellow-600 text-white px-3 py-1 rounded text-sm hover:bg-yellow-700 transition flex items-center"> |
|
<i class="fas fa-search mr-1"></i> Search Models |
|
</button> |
|
</div> |
|
</div> |
|
|
|
<div class="flex items-start"> |
|
<div class="bg-gray-100 p-2 rounded-full mr-4 mt-1"> |
|
<i class="fas fa-code text-gray-600"></i> |
|
</div> |
|
<div> |
|
<h4 class="font-semibold text-gray-700">3. Build a Prototype</h4> |
|
<p class="text-sm text-gray-600 mt-1">Use the Transformers library to create a working version of your idea.</p> |
|
<div class="mt-3 bg-gray-800 rounded p-3 text-white text-sm font-mono overflow-x-auto"> |
|
<span class="text-green-400"># Example: Text classification prototype</span><br> |
|
classifier = pipeline(<span class="text-yellow-300">"text-classification"</span>, <br> |
|
model=<span class="text-yellow-300">"distilbert-base-uncased"</span>, <br> |
|
tokenizer=<span class="text-yellow-300">"distilbert-base-uncased"</span>)<br><br> |
|
<span class="text-green-400"># Test with sample input</span><br> |
|
result = classifier(<span class="text-yellow-300">"Your sample text here"</span>) |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<div class="flex items-start"> |
|
<div class="bg-gray-100 p-2 rounded-full mr-4 mt-1"> |
|
<i class="fas fa-share-alt text-gray-600"></i> |
|
</div> |
|
<div> |
|
<h4 class="font-semibold text-gray-700">4. Share Your Application</h4> |
|
<p class="text-sm text-gray-600 mt-1">Deploy your model as a Space or share it with the community.</p> |
|
<div class="mt-3 grid grid-cols-2 gap-3"> |
|
<button class="bg-yellow-600 text-white px-3 py-2 rounded text-sm hover:bg-yellow-700 transition flex items-center justify-center"> |
|
<i class="fas fa-rocket mr-1"></i> Deploy Space |
|
</button> |
|
<button class="bg-gray-200 text-gray-700 px-3 py-2 rounded text-sm hover:bg-gray-300 transition flex items-center justify-center"> |
|
<i class="fas fa-users mr-1"></i> Share Model |
|
</button> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<div class="mt-6 border-t border-gray-200 pt-6"> |
|
<h3 class="font-bold text-lg text-gray-800">Need Inspiration?</h3> |
|
<p class="text-gray-600 mt-2">Browse successful Hugging Face applications:</p> |
|
|
|
<div class="mt-4 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4"> |
|
<div class="border border-gray-200 rounded-lg p-4 hover:border-yellow-300 hover:bg-yellow-50 transition cursor-pointer"> |
|
<h4 class="font-semibold text-yellow-600">Sentiment Analyzer</h4> |
|
<p class="text-xs text-gray-600 mt-1">Analyze text for positive/negative sentiment</p> |
|
<div class="mt-2 flex justify-between items-center"> |
|
<span class="text-xs bg-gray-100 px-2 py-1 rounded">NLP</span> |
|
<button class="text-xs bg-yellow-600 text-white px-2 py-1 rounded hover:bg-yellow-700 transition"> |
|
View Demo |
|
</button> |
|
</div> |
|
</div> |
|
|
|
<div class="border border-gray-200 rounded-lg p-4 hover:border-yellow-300 hover:bg-yellow-50 transition cursor-pointer"> |
|
<h4 class="font-semibold text-yellow-600">FAQ Bot</h4> |
|
<p class="text-xs text-gray-600 mt-1">Answer common questions automatically</p> |
|
<div class="mt-2 flex justify-between items-center"> |
|
<span class="text-xs bg-gray-100 px-2 py-1 rounded">Chat</span> |
|
<button class="text-xs bg-yellow-600 text-white px-2 py-1 rounded hover:bg-yellow-700 transition"> |
|
View Demo |
|
</button> |
|
</div> |
|
</div> |
|
|
|
<div class="border border-gray-200 rounded-lg p-4 hover:border-yellow-300 hover:bg-yellow-50 transition cursor-pointer"> |
|
<h4 class="font-semibold text-yellow-600">Document Summarizer</h4> |
|
<p class="text-xs text-gray-600 mt-1">Generate concise summaries of long texts</p> |
|
<div class="mt-2 flex justify-between items-center"> |
|
<span class="text-xs bg-gray-100 px-2 py-1 rounded">NLP</span> |
|
<button class="text-xs bg-yellow-600 text-white px-2 py-1 rounded hover:bg-yellow-700 transition"> |
|
View Demo |
|
</button> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
`, |
|
contribute: ` |
|
<div class="space-y-6"> |
|
<div class="flex items-start"> |
|
<div class="bg-teal-100 p-3 rounded-full mr-4"> |
|
<i class="fas fa-hands-helping text-teal-600 text-xl"></i> |
|
</div> |
|
<div> |
|
<h3 class="font-bold text-lg text-gray-800">Make Valuable Contributions</h3> |
|
<p class="text-gray-600 mt-1">The Hugging Face community thrives on contributions from people like you. Here's how you can help:</p> |
|
|
|
<div class="mt-6 grid grid-cols-1 md:grid-cols-2 gap-6"> |
|
<div class="border border-gray-200 rounded-lg p-5 hover:border-teal-300 hover:bg-teal-50 transition"> |
|
<div class="bg-teal-100 w-12 h-12 rounded-full flex items-center justify-center mb-4"> |
|
<i class="fas fa-code text-teal-600 text-xl"></i> |
|
</div> |
|
<h4 class="font-semibold text-gray-800">Improve Models</h4> |
|
<p class="text-sm text-gray-600 mt-2">Fine-tune existing models on new datasets or optimize their performance.</p> |
|
<button class="mt-4 bg-teal-600 text-white px-3 py-1 rounded text-sm hover:bg-teal-700 transition"> |
|
Contribute Code |
|
</button> |
|
</div> |
|
|
|
<div class="border border-gray-200 rounded-lg p-5 hover:border-teal-300 hover:bg-teal-50 transition"> |
|
<div class="bg-teal-100 w-12 h-12 rounded-full flex items-center justify-center mb-4"> |
|
<i class="fas fa-book text-teal-600 text-xl"></i> |
|
</div> |
|
<h4 class="font-semibold text-gray-800">Enhance Documentation</h4> |
|
<p class="text-sm text-gray-600 mt-2">Help improve tutorials, model cards, and API documentation.</p> |
|
<button class="mt-4 bg-teal-600 text-white px-3 py-1 rounded text-sm hover:bg-teal-700 transition"> |
|
Improve Docs |
|
</button> |
|
</div> |
|
|
|
<div class="border border-gray-200 rounded-lg p-5 hover:border-teal-300 hover:bg-teal-50 transition"> |
|
<div class="bg-teal-100 w-12 h-12 rounded-full flex items-center justify-center mb-4"> |
|
<i class="fas fa-database text-teal-600 text-xl"></i> |
|
</div> |
|
<h4 class="font-semibold text-gray-800">Share Datasets</h4> |
|
<p class="text-sm text-gray-600 mt-2">Upload and share datasets to help others train better models.</p> |
|
<button class="mt-4 bg-teal-600 text-white px-3 py-1 rounded text-sm hover:bg-teal-700 transition"> |
|
Upload Dataset |
|
</button> |
|
</div> |
|
|
|
<div class="border border-gray-200 rounded-lg p-5 hover:border-teal-300 hover:bg-teal-50 transition"> |
|
<div class="bg-teal-100 w-12 h-12 rounded-full flex items-center justify-center mb-4"> |
|
<i class="fas fa-comments text-teal-600 text-xl"></i> |
|
</div> |
|
<h4 class="font-semibold text-gray-800">Community Support</h4> |
|
<p class="text-sm text-gray-600 mt-2">Answer questions on forums and help others solve problems.</p> |
|
<button class="mt-4 bg-teal-600 text-white px-3 py-1 rounded text-sm hover:bg-teal-700 transition"> |
|
Join Discussions |
|
</button> |
|
</div> |
|
</div> |
|
|
|
<div class="mt-8 bg-teal-50 border border-teal-100 rounded-lg p-5"> |
|
<h4 class="font-semibold text-teal-800 flex items-center"> |
|
<i class="fas fa-star mr-2"></i> Getting Started as a Contributor |
|
</h4> |
|
<ol class="mt-3 space-y-3 list-decimal list-inside text-sm text-gray-700"> |
|
<li>Create a Hugging Face account if you haven't already</li> |
|
<li>Explore the <span class="font-semibold text-teal-700">Contributing Guidelines</span> in the documentation</li> |
|
<li>Start with small issues labeled <span class="bg-teal-100 text-teal-800 px-2 py-0.5 rounded">good first issue</span></li> |
|
<li>Join the community discussions on the Hugging Face forum</li> |
|
<li>Consider attending or hosting community events</li> |
|
</ol> |
|
|
|
<div class="mt-4 flex space-x-3"> |
|
<button class="bg-teal-600 text-white px-4 py-2 rounded text-sm hover:bg-teal-700 transition flex items-center"> |
|
<i class="fas fa-book-open mr-2"></i> Contribution Guide |
|
</button> |
|
<button class="bg-white text-teal-600 border border-teal-300 px-4 py-2 rounded text-sm hover:bg-teal-50 transition flex items-center"> |
|
<i class="fas fa-users mr-2"></i> Join Community |
|
</button> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
` |
|
}; |
|
|
|
// Sample responses for chat |
|
const sampleResponses = { |
|
greeting: "Hello! I'm your Hugging Face assistant. How can I help you today?", |
|
models: "To find models, you can search the Hugging Face Model Hub using filters for tasks, frameworks, and datasets. Would you like me to suggest some models based on your needs?", |
|
create: "Creating models involves preparing your dataset, choosing a base model, fine-tuning it, and uploading to the Hub. I can guide you through each step!", |
|
chat: "You can chat with many conversational models on Hugging Face. Popular options include BlenderBot, GPT-2, and DialoGPT. Would you like to try a demo?", |
|
ideas: "To turn your ideas into AI tools, start by clearly defining your concept, then research existing models that could help. I can help you brainstorm and find technical solutions!", |
|
contribute: "The Hugging Face community welcomes contributions! You can improve models, enhance documentation, share datasets, or help others in the forums. Where would you like to contribute?", |
|
install: "To install the transformers library, run: <code class='bg-gray-100 px-2 py-1 rounded'>pip install transformers</code>", |
|
demo: "You can try many model demos directly on Hugging Face. Here are some popular ones: <a href='#' class='text-blue-500 hover:underline'>BlenderBot</a>, <a href='#' class='text-blue-500 hover:underline'>GPT-2</a>, <a href='#' class='text-blue-500 hover:underline'>Stable Diffusion</a>", |
|
tutorial: "The Hugging Face course is a great starting point: <a href='#' class='text-blue-500 hover:underline'>Hugging Face Course</a>. Would you like recommendations based on your skill level?", |
|
nlp: "For NLP tasks, consider these models: <br>- Text Classification: <strong>distilbert-base-uncased</strong><br>- Question Answering: <strong>bert-large-uncased-whole-word-masking-finetuned-squad</strong><br>- Text Generation: <strong>gpt2</strong>", |
|
vision: "For computer vision: <br>- Image Classification: <strong>google/vit-base-patch16-224</strong><br>- Object Detection: <strong>facebook/detr-resnet-50</strong>", |
|
audio: "For audio processing: <br>- Speech Recognition: <strong>facebook/wav2vec2-base-960h</strong><br>- Audio Classification: <strong>superb/hubert-base-superb-ks</strong>" |
|
}; |
|
|
|
// Show feature content |
|
function showFeature(feature) { |
|
document.getElementById('feature-display').innerHTML = featureContents[feature]; |
|
|
|
// Add a chat message about the feature |
|
addBotMessage(sampleResponses[feature]); |
|
} |
|
|
|
// Quick actions |
|
function quickAction(action) { |
|
addBotMessage(sampleResponses[action]); |
|
} |
|
|
|
// Suggest models |
|
function suggestModel(type) { |
|
addBotMessage(sampleResponses[type]); |
|
} |
|
|
|
// Chat functions |
|
function addMessage(sender, message) { |
|
const chatMessages = document.getElementById('chat-messages'); |
|
const messageDiv = document.createElement('div'); |
|
messageDiv.className = `mb-4 flex ${sender === 'user' ? 'justify-end' : 'justify-start'}`; |
|
|
|
const bubble = document.createElement('div'); |
|
bubble.className = `chat-bubble px-4 py-3 shadow-sm ${sender === 'user' ? 'user-bubble' : 'bot-bubble'}`; |
|
|
|
bubble.innerHTML = message; |
|
messageDiv.appendChild(bubble); |
|
chatMessages.appendChild(messageDiv); |
|
|
|
// Scroll to bottom |
|
chatMessages.scrollTop = chatMessages.scrollHeight; |
|
} |
|
|
|
function addBotMessage(message) { |
|
// Show typing indicator |
|
const chatMessages = document.getElementById('chat-messages'); |
|
const typingDiv = document.createElement('div'); |
|
typingDiv.className = 'mb-4 flex justify-start'; |
|
|
|
const typingBubble = document.createElement('div'); |
|
typingBubble.className = 'chat-bubble bot-bubble px-4 py-3 shadow-sm'; |
|
typingBubble.innerHTML = '<div class="typing-indicator"><span></span><span></span><span></span></div>'; |
|
|
|
typingDiv.appendChild(typingBubble); |
|
chatMessages.appendChild(typingDiv); |
|
chatMessages.scrollTop = chatMessages.scrollHeight; |
|
|
|
// After a delay, replace with actual message |
|
setTimeout(() => { |
|
chatMessages.removeChild(typingDiv); |
|
addMessage('bot', message); |
|
}, 1000 + Math.random() * 1000); |
|
} |
|
|
|
function sendMessage() { |
|
const userInput = document.getElementById('user-input'); |
|
const message = userInput.value.trim(); |
|
|
|
if (message) { |
|
addMessage('user', message); |
|
userInput.value = ''; |
|
|
|
// Simple response logic |
|
const lowerMsg = message.toLowerCase(); |
|
let response = "I'm not sure I understand. Could you rephrase that?"; |
|
|
|
if (lowerMsg.includes('hello') || lowerMsg.includes('hi')) { |
|
response = sampleResponses.greeting; |
|
} else if (lowerMsg.includes('model') || lowerMsg.includes('find')) { |
|
response = sampleResponses.models; |
|
} else if (lowerMsg.includes('create') || lowerMsg.includes('train')) { |
|
response = sampleResponses.create; |
|
} else if (lowerMsg.includes('chat') || lowerMsg.includes('talk')) { |
|
response = sampleResponses.chat; |
|
} else if (lowerMsg.includes('idea') || lowerMsg.includes('project')) { |
|
response = sampleResponses.ideas; |
|
} else if (lowerMsg.includes('help') || lowerMsg.includes('contribute')) { |
|
response = sampleResponses.contribute; |
|
} else if (lowerMsg.includes('install')) { |
|
response = sampleResponses.install; |
|
} else if (lowerMsg.includes('demo')) { |
|
response = sampleResponses.demo; |
|
} else if (lowerMsg.includes('tutorial') || lowerMsg.includes('learn')) { |
|
response = sampleResponses.tutorial; |
|
} |
|
|
|
setTimeout(() => { |
|
addBotMessage(response); |
|
}, 500); |
|
} |
|
} |
|
|
|
// Allow sending message with Enter key |
|
document.getElementById('user-input').addEventListener('keypress', function(e) { |
|
if (e.key === 'Enter') { |
|
sendMessage(); |
|
} |
|
}); |
|
|
|
// Initial welcome message |
|
setTimeout(() => { |
|
addBotMessage("Welcome to your personalized Hugging Face assistant! I can help you navigate the platform, find models, create AI applications, and contribute to the community. What would you like to explore first?"); |
|
}, 1000); |
|
</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=XXXMARK/kotahi" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
</html> |
