|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Hugging Face Coding 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> |
|
|
.message-animation { |
|
|
animation: fadeIn 0.3s ease-in-out; |
|
|
} |
|
|
@keyframes fadeIn { |
|
|
from { opacity: 0; transform: translateY(10px); } |
|
|
to { opacity: 1; transform: translateY(0); } |
|
|
} |
|
|
.typing-indicator::after { |
|
|
content: '...'; |
|
|
animation: typing 1.5s infinite; |
|
|
} |
|
|
@keyframes typing { |
|
|
0% { content: '.'; } |
|
|
33% { content: '..'; } |
|
|
66% { content: '...'; } |
|
|
} |
|
|
.code-block { |
|
|
font-family: 'Courier New', monospace; |
|
|
background-color: #2d3748; |
|
|
color: #f7fafc; |
|
|
border-radius: 0.375rem; |
|
|
padding: 1rem; |
|
|
overflow-x: auto; |
|
|
} |
|
|
.copy-btn { |
|
|
transition: all 0.2s ease; |
|
|
} |
|
|
.copy-btn:hover { |
|
|
background-color: #4a5568; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-100 min-h-screen flex flex-col"> |
|
|
|
|
|
<header class="bg-purple-700 text-white shadow-lg"> |
|
|
<div class="container mx-auto px-4 py-3 flex items-center justify-between"> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<i class="fas fa-robot text-2xl"></i> |
|
|
<h1 class="text-xl md:text-2xl font-bold">Hugging Face Coding Assistant</h1> |
|
|
</div> |
|
|
<div class="flex items-center space-x-4"> |
|
|
<button id="theme-toggle" class="p-2 rounded-full hover:bg-purple-600 transition"> |
|
|
<i class="fas fa-moon"></i> |
|
|
</button> |
|
|
<button id="clear-chat" class="px-3 py-1 bg-purple-600 rounded hover:bg-purple-500 transition"> |
|
|
<i class="fas fa-trash-alt mr-1"></i> Clear |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<main class="flex-1 container mx-auto px-4 py-6 flex flex-col md:flex-row gap-6"> |
|
|
|
|
|
<aside class="w-full md:w-64 bg-white rounded-lg shadow-md p-4 h-fit sticky top-6"> |
|
|
<div class="mb-6"> |
|
|
<h2 class="text-lg font-semibold text-gray-800 mb-2 flex items-center"> |
|
|
<i class="fas fa-cog mr-2 text-purple-600"></i> Quick Actions |
|
|
</h2> |
|
|
<div class="space-y-2"> |
|
|
<button class="quick-action-btn" data-prompt="Explain Python functions"> |
|
|
<i class="fas fa-code mr-2"></i> Python Help |
|
|
</button> |
|
|
<button class="quick-action-btn" data-prompt="Show me JavaScript array methods"> |
|
|
<i class="fab fa-js-square mr-2"></i> JavaScript Help |
|
|
</button> |
|
|
<button class="quick-action-btn" data-prompt="How to use Hugging Face models?"> |
|
|
<i class="fas fa-brain mr-2"></i> HF Models |
|
|
</button> |
|
|
<button class="quick-action-btn" data-prompt="Git commands cheat sheet"> |
|
|
<i class="fab fa-git-alt mr-2"></i> Git Help |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<h2 class="text-lg font-semibold text-gray-800 mb-2 flex items-center"> |
|
|
<i class="fas fa-history mr-2 text-purple-600"></i> Recent Topics |
|
|
</h2> |
|
|
<div id="recent-topics" class="space-y-1"> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
</aside> |
|
|
|
|
|
|
|
|
<section class="flex-1 flex flex-col bg-white rounded-lg shadow-md overflow-hidden"> |
|
|
|
|
|
<div id="messages" class="flex-1 p-4 overflow-y-auto space-y-4"> |
|
|
|
|
|
<div class="message-animation bg-purple-100 rounded-lg p-4"> |
|
|
<div class="flex items-start"> |
|
|
<div class="flex-shrink-0 bg-purple-600 text-white rounded-full w-8 h-8 flex items-center justify-center mr-3"> |
|
|
<i class="fas fa-robot"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="font-semibold text-purple-800">Hugging Face Assistant</h3> |
|
|
<p class="text-gray-700 mt-1">Hello! I'm your Hugging Face coding assistant. I can help with programming questions, explain concepts, debug code, and guide you through Hugging Face tools. What would you like to learn today?</p> |
|
|
<div class="mt-3 grid grid-cols-1 sm:grid-cols-2 gap-2"> |
|
|
<button class="suggestion-btn">Explain Python decorators</button> |
|
|
<button class="suggestion-btn">How to fine-tune a model?</button> |
|
|
<button class="suggestion-btn">Show React component example</button> |
|
|
<button class="suggestion-btn">Debug this JavaScript code</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="border-t border-gray-200 p-4 bg-gray-50"> |
|
|
<form id="chat-form" class="flex items-center space-x-2"> |
|
|
<div class="flex-1 relative"> |
|
|
<input |
|
|
id="user-input" |
|
|
type="text" |
|
|
placeholder="Ask me anything about coding or Hugging Face..." |
|
|
class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent" |
|
|
autocomplete="off" |
|
|
> |
|
|
<button type="button" id="voice-btn" class="absolute right-3 top-3 text-gray-400 hover:text-purple-600"> |
|
|
<i class="fas fa-microphone"></i> |
|
|
</button> |
|
|
</div> |
|
|
<button type="submit" class="bg-purple-600 hover:bg-purple-700 text-white px-4 py-3 rounded-lg transition"> |
|
|
<i class="fas fa-paper-plane"></i> |
|
|
</button> |
|
|
</form> |
|
|
<div class="mt-2 flex flex-wrap gap-2"> |
|
|
<span class="text-xs text-gray-500">Try:</span> |
|
|
<button class="text-xs text-purple-600 hover:text-purple-800" data-prompt="How to use transformers library?">transformers</button> |
|
|
<button class="text-xs text-purple-600 hover:text-purple-800" data-prompt="Explain async/await in JavaScript">async/await</button> |
|
|
<button class="text-xs text-purple-600 hover:text-purple-800" data-prompt="Show pandas dataframe example">pandas</button> |
|
|
<button class="text-xs text-purple-600 hover:text-purple-800" data-prompt="What is a neural network?">neural network</button> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
</main> |
|
|
|
|
|
|
|
|
<footer class="bg-gray-800 text-white py-4"> |
|
|
<div class="container mx-auto px-4 text-center text-sm"> |
|
|
<p>Hugging Face Coding Assistant - Powered by AI models</p> |
|
|
<p class="mt-1 text-gray-400">This is a demo interface. Not affiliated with Hugging Face.</p> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
<script> |
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
// Theme toggle |
|
|
const themeToggle = document.getElementById('theme-toggle'); |
|
|
themeToggle.addEventListener('click', function() { |
|
|
document.documentElement.classList.toggle('dark'); |
|
|
const icon = themeToggle.querySelector('i'); |
|
|
if (document.documentElement.classList.contains('dark')) { |
|
|
icon.classList.replace('fa-moon', 'fa-sun'); |
|
|
document.body.classList.add('bg-gray-900'); |
|
|
document.body.classList.remove('bg-gray-100'); |
|
|
} else { |
|
|
icon.classList.replace('fa-sun', 'fa-moon'); |
|
|
document.body.classList.remove('bg-gray-900'); |
|
|
document.body.classList.add('bg-gray-100'); |
|
|
} |
|
|
}); |
|
|
|
|
|
// Chat functionality |
|
|
const chatForm = document.getElementById('chat-form'); |
|
|
const userInput = document.getElementById('user-input'); |
|
|
const messagesContainer = document.getElementById('messages'); |
|
|
const recentTopicsContainer = document.getElementById('recent-topics'); |
|
|
const clearChatBtn = document.getElementById('clear-chat'); |
|
|
|
|
|
// Sample responses for demo purposes |
|
|
const sampleResponses = { |
|
|
"Explain Python functions": `Python functions are blocks of reusable code that perform a specific task. They help organize code into logical chunks and make it more readable and maintainable. |
|
|
|
|
|
<pre class="code-block mt-3 relative"> |
|
|
<span class="text-green-400">def</span> <span class="text-yellow-300">greet</span>(name): |
|
|
<span class="text-green-400">"""This function greets the person passed in as a parameter"""</span> |
|
|
<span class="text-green-400">print</span>(<span class="text-yellow-300">f"Hello, </span>{name}<span class="text-yellow-300">. How are you?"</span>) |
|
|
|
|
|
<span class="text-gray-400"># Calling the function</span> |
|
|
greet(<span class="text-yellow-300">"Alice"</span>) |
|
|
</pre> |
|
|
|
|
|
Key points about functions: |
|
|
- Defined with the <span class="font-mono bg-gray-200 px-1 rounded">def</span> keyword |
|
|
- Can accept parameters (inputs) |
|
|
- Can return values using the <span class="font-mono bg-gray-200 px-1 rounded">return</span> statement |
|
|
- Help avoid code duplication`, |
|
|
|
|
|
"Show me JavaScript array methods": `JavaScript provides many useful array methods. Here are some commonly used ones: |
|
|
|
|
|
<pre class="code-block mt-3 relative"> |
|
|
<span class="text-green-400">const</span> numbers = [1, 2, 3, 4, 5]; |
|
|
|
|
|
<span class="text-gray-400">// map() - creates a new array with results of calling a function on every element</span> |
|
|
<span class="text-green-400">const</span> doubled = numbers.map(num => num * 2); |
|
|
|
|
|
<span class="text-gray-400">// filter() - creates new array with elements that pass a test</span> |
|
|
<span class="text-green-400">const</span> evens = numbers.filter(num => num % 2 === 0); |
|
|
|
|
|
<span class="text-gray-400">// reduce() - reduces array to a single value</span> |
|
|
<span class="text-green-400">const</span> sum = numbers.reduce((total, num) => total + num, 0); |
|
|
|
|
|
<span class="text-gray-400">// forEach() - executes a function for each element</span> |
|
|
numbers.forEach(num => console.log(num)); |
|
|
|
|
|
<span class="text-gray-400">// includes() - checks if array contains a value</span> |
|
|
<span class="text-green-400">const</span> hasThree = numbers.includes(3); |
|
|
</pre> |
|
|
|
|
|
Other useful methods: find(), some(), every(), sort(), slice(), splice()`, |
|
|
|
|
|
"How to use Hugging Face models?": `Hugging Face provides thousands of pre-trained models through their <span class="font-mono bg-gray-200 px-1 rounded">transformers</span> library. Here's how to use them: |
|
|
|
|
|
1. First install the library: |
|
|
<pre class="code-block mt-3 relative"> |
|
|
pip install transformers |
|
|
</pre> |
|
|
|
|
|
2. Basic usage for text classification: |
|
|
<pre class="code-block mt-3 relative"> |
|
|
<span class="text-green-400">from</span> transformers <span class="text-green-400">import</span> pipeline |
|
|
|
|
|
<span class="text-gray-400"># Create a text classification pipeline</span> |
|
|
classifier = pipeline(<span class="text-yellow-300">"text-classification"</span>) |
|
|
|
|
|
<span class="text-gray-400"># Use the model</span> |
|
|
result = classifier(<span class="text-yellow-300">"I love using Hugging Face models!"</span>) |
|
|
<span class="text-green-400">print</span>(result) <span class="text-gray-400"># Outputs sentiment analysis</span> |
|
|
</pre> |
|
|
|
|
|
3. For more control, you can load specific models: |
|
|
<pre class="code-block mt-3 relative"> |
|
|
<span class="text-green-400">from</span> transformers <span class="text-green-400">import</span> AutoTokenizer, AutoModelForSequenceClassification |
|
|
|
|
|
<span class="text-gray-400"># Load tokenizer and model</span> |
|
|
model_name = <span class="text-yellow-300">"distilbert-base-uncased-finetuned-sst-2-english"</span> |
|
|
tokenizer = AutoTokenizer.from_pretrained(model_name) |
|
|
model = AutoModelForSequenceClassification.from_pretrained(model_name) |
|
|
|
|
|
<span class="text-gray-400"># Tokenize input and get predictions</span> |
|
|
inputs = tokenizer(<span class="text-yellow-300">"Hugging Face is awesome!"</span>, return_tensors=<span class="text-yellow-300">"pt"</span>) |
|
|
outputs = model(**inputs) |
|
|
</pre>`, |
|
|
|
|
|
"Git commands cheat sheet": `Here's a cheat sheet for common Git commands: |
|
|
|
|
|
<pre class="code-block mt-3 relative"> |
|
|
<span class="text-gray-400"># Initialize a new repository</span> |
|
|
git init |
|
|
|
|
|
<span class="text-gray-400"># Clone an existing repository</span> |
|
|
git clone <repository_url> |
|
|
|
|
|
<span class="text-gray-400"># Check status of files</span> |
|
|
git status |
|
|
|
|
|
<span class="text-gray-400"># Add files to staging area</span> |
|
|
git add <file> <span class="text-gray-400"># Add specific file</span> |
|
|
git add . <span class="text-gray-400"># Add all changed files</span> |
|
|
|
|
|
<span class="text-gray-400"># Commit changes</span> |
|
|
git commit -m <span class="text-yellow-300">"Commit message"</span> |
|
|
|
|
|
<span class="text-gray-400"># Push changes to remote</span> |
|
|
git push origin <branch> |
|
|
|
|
|
<span class="text-gray-400"># Pull latest changes</span> |
|
|
git pull |
|
|
|
|
|
<span class="text-gray-400"># Create and switch to new branch</span> |
|
|
git checkout -b <new_branch> |
|
|
|
|
|
<span class="text-gray-400"># Merge branches</span> |
|
|
git merge <branch> |
|
|
|
|
|
<span class="text-gray-400"># View commit history</span> |
|
|
git log |
|
|
|
|
|
<span class="text-gray-400"># Discard changes in working directory</span> |
|
|
git checkout -- <file> |
|
|
</pre>` |
|
|
}; |
|
|
|
|
|
// Add message to chat |
|
|
function addMessage(content, isUser = false) { |
|
|
const messageDiv = document.createElement('div'); |
|
|
messageDiv.className = `message-animation ${isUser ? 'bg-blue-50' : 'bg-purple-100'} rounded-lg p-4`; |
|
|
|
|
|
const messageContent = isUser |
|
|
? `<div class="flex items-start"> |
|
|
<div class="flex-shrink-0 bg-blue-600 text-white rounded-full w-8 h-8 flex items-center justify-center mr-3"> |
|
|
<i class="fas fa-user"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="font-semibold text-blue-800">You</h3> |
|
|
<p class="text-gray-700 mt-1">${content}</p> |
|
|
</div> |
|
|
</div>` |
|
|
: `<div class="flex items-start"> |
|
|
<div class="flex-shrink-0 bg-purple-600 text-white rounded-full w-8 h-8 flex items-center justify-center mr-3"> |
|
|
<i class="fas fa-robot"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="font-semibold text-purple-800">Hugging Face Assistant</h3> |
|
|
<div class="text-gray-700 mt-1">${content}</div> |
|
|
</div> |
|
|
</div>`; |
|
|
|
|
|
messageDiv.innerHTML = messageContent; |
|
|
messagesContainer.appendChild(messageDiv); |
|
|
messageDiv.scrollIntoView({ behavior: 'smooth' }); |
|
|
|
|
|
// Add code copy functionality |
|
|
messageDiv.querySelectorAll('.code-block').forEach(block => { |
|
|
const copyBtn = document.createElement('button'); |
|
|
copyBtn.className = 'copy-btn absolute top-2 right-2 bg-gray-700 text-white px-2 py-1 text-xs rounded'; |
|
|
copyBtn.innerHTML = '<i class="fas fa-copy mr-1"></i> Copy'; |
|
|
copyBtn.addEventListener('click', () => { |
|
|
const code = block.textContent; |
|
|
navigator.clipboard.writeText(code); |
|
|
copyBtn.innerHTML = '<i class="fas fa-check mr-1"></i> Copied!'; |
|
|
setTimeout(() => { |
|
|
copyBtn.innerHTML = '<i class="fas fa-copy mr-1"></i> Copy'; |
|
|
}, 2000); |
|
|
}); |
|
|
block.appendChild(copyBtn); |
|
|
}); |
|
|
} |
|
|
|
|
|
// Simulate typing indicator |
|
|
function showTypingIndicator() { |
|
|
const typingDiv = document.createElement('div'); |
|
|
typingDiv.className = 'message-animation bg-purple-100 rounded-lg p-4'; |
|
|
typingDiv.innerHTML = ` |
|
|
<div class="flex items-start"> |
|
|
<div class="flex-shrink-0 bg-purple-600 text-white rounded-full w-8 h-8 flex items-center justify-center mr-3"> |
|
|
<i class="fas fa-robot"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="font-semibold text-purple-800">Hugging Face Assistant</h3> |
|
|
<p class="text-gray-700 mt-1 typing-indicator">Thinking</p> |
|
|
</div> |
|
|
</div> |
|
|
`; |
|
|
messagesContainer.appendChild(typingDiv); |
|
|
typingDiv.scrollIntoView({ behavior: 'smooth' }); |
|
|
return typingDiv; |
|
|
} |
|
|
|
|
|
// Handle form submission |
|
|
chatForm.addEventListener('submit', function(e) { |
|
|
e.preventDefault(); |
|
|
const message = userInput.value.trim(); |
|
|
if (!message) return; |
|
|
|
|
|
// Add user message |
|
|
addMessage(message, true); |
|
|
userInput.value = ''; |
|
|
|
|
|
// Add to recent topics if not already there |
|
|
if (!Array.from(recentTopicsContainer.querySelectorAll('button')).some(btn => btn.textContent === message)) { |
|
|
const topicBtn = document.createElement('button'); |
|
|
topicBtn.className = 'w-full text-left px-2 py-1 text-sm text-purple-600 hover:bg-purple-50 rounded transition'; |
|
|
topicBtn.innerHTML = `<i class="fas fa-comment-dots mr-2"></i>${message}`; |
|
|
topicBtn.addEventListener('click', () => { |
|
|
userInput.value = message; |
|
|
userInput.focus(); |
|
|
}); |
|
|
recentTopicsContainer.insertBefore(topicBtn, recentTopicsContainer.firstChild); |
|
|
|
|
|
// Limit to 5 recent topics |
|
|
if (recentTopicsContainer.children.length > 5) { |
|
|
recentTopicsContainer.removeChild(recentTopicsContainer.lastChild); |
|
|
} |
|
|
} |
|
|
|
|
|
// Show typing indicator |
|
|
const typingIndicator = showTypingIndicator(); |
|
|
|
|
|
// Simulate AI response after delay |
|
|
setTimeout(() => { |
|
|
// Remove typing indicator |
|
|
messagesContainer.removeChild(typingIndicator); |
|
|
|
|
|
// Find response or use default |
|
|
let response = sampleResponses[message] || |
|
|
`I'd be happy to help with "${message}". Here's what I know about this topic: |
|
|
|
|
|
This is a demo response. In a real implementation, this would connect to a Hugging Face model or API to generate a detailed response about the topic you asked about. |
|
|
|
|
|
For now, try asking about: |
|
|
- Python programming |
|
|
- JavaScript concepts |
|
|
- Hugging Face models |
|
|
- Git commands |
|
|
- Machine learning basics`; |
|
|
|
|
|
// Add AI response |
|
|
addMessage(response); |
|
|
}, 1500); |
|
|
}); |
|
|
|
|
|
// Quick action buttons |
|
|
document.querySelectorAll('.quick-action-btn').forEach(btn => { |
|
|
btn.addEventListener('click', function() { |
|
|
const prompt = this.getAttribute('data-prompt'); |
|
|
userInput.value = prompt; |
|
|
userInput.focus(); |
|
|
}); |
|
|
}); |
|
|
|
|
|
// Suggestion buttons |
|
|
document.querySelectorAll('.suggestion-btn').forEach(btn => { |
|
|
btn.addEventListener('click', function() { |
|
|
userInput.value = this.textContent; |
|
|
userInput.focus(); |
|
|
}); |
|
|
}); |
|
|
|
|
|
// Quick prompt buttons |
|
|
document.querySelectorAll('[data-prompt]').forEach(btn => { |
|
|
btn.addEventListener('click', function() { |
|
|
userInput.value = this.getAttribute('data-prompt'); |
|
|
userInput.focus(); |
|
|
}); |
|
|
}); |
|
|
|
|
|
// Clear chat button |
|
|
clearChatBtn.addEventListener('click', function() { |
|
|
messagesContainer.innerHTML = ` |
|
|
<div class="message-animation bg-purple-100 rounded-lg p-4"> |
|
|
<div class="flex items-start"> |
|
|
<div class="flex-shrink-0 bg-purple-600 text-white rounded-full w-8 h-8 flex items-center justify-center mr-3"> |
|
|
<i class="fas fa-robot"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="font-semibold text-purple-800">Hugging Face Assistant</h3> |
|
|
<p class="text-gray-700 mt-1">Chat cleared. What would you like to learn about now?</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
`; |
|
|
}); |
|
|
|
|
|
// Voice input button (demo only - would need proper implementation) |
|
|
document.getElementById('voice-btn').addEventListener('click', function() { |
|
|
alert('Voice input would be implemented here. In a real app, this would use the Web Speech API.'); |
|
|
}); |
|
|
}); |
|
|
</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=bditto5/hugging-face-code-assistant" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
