Spaces:

bditto5
/

hugging-face-code-assistant

Running

App Files Files Community

bditto5 commited on Jul 14

Commit

8d41005

verified ·

1 Parent(s): 0699d49

undefined - Initial Deployment

Browse files

Files changed (2) hide show

README.md +7 -5
index.html +463 -19

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Hugging Face Code Assistant
-emoji: 👁
-colorFrom: blue
-colorTo: green
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: hugging-face-code-assistant
+emoji: 🐳
+colorFrom: red
+colorTo: yellow
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,463 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

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