Spaces:

bditto5
/

hugging-face-code-assistant

Running

File size: 23,315 Bytes

8d41005

<!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 -->
    <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 Content -->
    <main class="flex-1 container mx-auto px-4 py-6 flex flex-col md:flex-row gap-6">
        <!-- Sidebar -->
        <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">
                    <!-- Will be populated by JavaScript -->
                </div>
            </div>
        </aside>

        <!-- Chat Area -->
        <section class="flex-1 flex flex-col bg-white rounded-lg shadow-md overflow-hidden">
            <!-- Messages Container -->
            <div id="messages" class="flex-1 p-4 overflow-y-auto space-y-4">
                <!-- Welcome Message -->
                <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>

            <!-- Input Area -->
            <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 -->
    <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 &lt;repository_url&gt;

<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 &lt;file&gt;       <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 &lt;branch&gt;

<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 &lt;new_branch&gt;

<span class="text-gray-400"># Merge branches</span>
git merge &lt;branch&gt;

<span class="text-gray-400"># View commit history</span>
git log

<span class="text-gray-400"># Discard changes in working directory</span>
git checkout -- &lt;file&gt;
</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>