| <!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> |
