Spaces:

maxwellb-hf
/

ygwyg

Running

App Files Files Community

maxwellb-hf commited on Aug 25, 2025

Commit

a1022f8

verified ·

1 Parent(s): a423c0b

Error loading models... use the correct models endpoint to load models, and the generate endpoint to generate, from the same server - Initial Deployment

Browse files

Files changed (2) hide show

README.md +6 -4
index.html +418 -19

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Ygwyg
-emoji: 💻
 colorFrom: yellow
-colorTo: indigo
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: ygwyg
+emoji: 🐳
 colorFrom: yellow
+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,418 @@
-<!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>Ollama Chat Interface</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>
+        /* Custom scrollbar */
+        .custom-scrollbar::-webkit-scrollbar {
+            width: 6px;
+        }
+        .custom-scrollbar::-webkit-scrollbar-track {
+            background: #f1f1f1;
+            border-radius: 10px;
+        }
+        .custom-scrollbar::-webkit-scrollbar-thumb {
+            background: #888;
+            border-radius: 10px;
+        }
+        .custom-scrollbar::-webkit-scrollbar-thumb:hover {
+            background: #555;
+        }
+        /* Animation for message loading */
+        @keyframes pulse {
+            0%, 100% { opacity: 0.6; }
+            50% { opacity: 1; }
+        }
+        .animate-pulse {
+            animation: pulse 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+        }
+        /* Smooth transitions */
+        .transition-all {
+            transition-property: all;
+            transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+            transition-duration: 200ms;
+        }
+    </style>
+</head>
+<body class="bg-gray-100 h-screen flex flex-col">
+    <!-- Header -->
+    <header class="bg-indigo-600 text-white shadow-md">
+        <div class="container mx-auto px-4 py-3 flex justify-between items-center">
+            <div class="flex items-center space-x-2">
+                <i class="fas fa-robot text-2xl"></i>
+                <h1 class="text-xl font-bold">Ollama Chat</h1>
+            </div>
+            <div class="flex items-center space-x-4">
+                <button id="settings-btn" class="p-2 rounded-full hover:bg-indigo-700 transition-all">
+                    <i class="fas fa-cog"></i>
+                </button>
+                <button id="clear-btn" class="px-3 py-1 bg-indigo-700 rounded-md hover:bg-indigo-800 transition-all">
+                    <i class="fas fa-trash-alt mr-1"></i> Clear
+                </button>
+            </div>
+        </div>
+    </header>
+    <!-- Settings Modal -->
+    <div id="settings-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
+        <div class="bg-white rounded-lg shadow-xl w-full max-w-md">
+            <div class="flex justify-between items-center border-b px-4 py-3">
+                <h3 class="text-lg font-semibold">Settings</h3>
+                <button id="close-settings" class="text-gray-500 hover:text-gray-700">
+                    <i class="fas fa-times"></i>
+                </button>
+            </div>
+            <div class="p-4">
+                <div class="mb-4">
+                    <label class="block text-gray-700 text-sm font-bold mb-2" for="endpoint">
+                        Ollama Endpoint
+                    </label>
+                    <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
+                           id="endpoint" type="text" placeholder="http://localhost:11434/api/generate" value="http://localhost:11434/api/generate">
+                </div>
+                <div class="mb-4">
+                    <label class="block text-gray-700 text-sm font-bold mb-2" for="model">
+                        Model
+                    </label>
+                    <select class="shadow border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="model">
+                        <option value="">Loading models...</option>
+                    </select>
+                </div>
+                <div class="mb-4">
+                    <label class="block text-gray-700 text-sm font-bold mb-2" for="temperature">
+                        Temperature: <span id="temp-value">0.7</span>
+                    </label>
+                    <input type="range" id="temperature" min="0" max="1" step="0.1" value="0.7"
+                           class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer">
+                </div>
+            </div>
+            <div class="flex justify-end border-t px-4 py-3">
+                <button id="save-settings" class="px-4 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700 transition-all">
+                    Save
+                </button>
+            </div>
+        </div>
+    </div>
+    <!-- Chat Container -->
+    <div class="flex-1 overflow-hidden container mx-auto px-4 py-4 flex flex-col">
+        <div id="chat-messages" class="flex-1 overflow-y-auto custom-scrollbar mb-4 space-y-4">
+            <!-- Messages will be inserted here -->
+            <div class="welcome-message bg-white p-4 rounded-lg shadow">
+                <div class="flex items-start space-x-3">
+                    <div class="flex-shrink-0 bg-indigo-100 p-2 rounded-full">
+                        <i class="fas fa-robot text-indigo-600"></i>
+                    </div>
+                    <div>
+                        <h3 class="font-bold text-gray-800">Ollama Assistant</h3>
+                        <p class="text-gray-600 mt-1">Hello! I'm your Ollama-powered AI assistant. How can I help you today?</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <!-- Input Area -->
+        <div class="bg-white rounded-lg shadow-md border border-gray-200 p-4">
+            <div class="flex items-end space-x-2">
+                <div class="flex-1">
+                    <textarea id="user-input" rows="2"
+                              class="w-full px-3 py-2 text-gray-700 border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 resize-none"
+                              placeholder="Type your message here..."></textarea>
+                </div>
+                <button id="send-btn" class="bg-indigo-600 hover:bg-indigo-700 text-white p-3 rounded-lg transition-all">
+                    <i class="fas fa-paper-plane"></i>
+                </button>
+            </div>
+            <div class="flex justify-between items-center mt-2 text-sm text-gray-500">
+                <div>
+                    <span id="char-count">0</span>/1000
+                </div>
+                <div class="flex space-x-2">
+                    <button id="upload-btn" class="text-gray-500 hover:text-indigo-600 transition-all">
+                        <i class="fas fa-paperclip"></i>
+                    </button>
+                    <button id="mic-btn" class="text-gray-500 hover:text-indigo-600 transition-all">
+                        <i class="fas fa-microphone"></i>
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            // DOM Elements
+            const chatMessages = document.getElementById('chat-messages');
+            const userInput = document.getElementById('user-input');
+            const sendBtn = document.getElementById('send-btn');
+            const clearBtn = document.getElementById('clear-btn');
+            const settingsBtn = document.getElementById('settings-btn');
+            const settingsModal = document.getElementById('settings-modal');
+            const closeSettings = document.getElementById('close-settings');
+            const saveSettings = document.getElementById('save-settings');
+            const charCount = document.getElementById('char-count');
+            const tempValue = document.getElementById('temp-value');
+            const temperature = document.getElementById('temperature');
+            // Configuration
+            let config = {
+                endpoint: 'http://localhost:11434/api/generate',
+                model: '',
+                temperature: 0.7
+            };
+            // Load saved settings from localStorage
+            if (localStorage.getItem('ollamaConfig')) {
+                config = JSON.parse(localStorage.getItem('ollamaConfig'));
+                document.getElementById('endpoint').value = config.endpoint;
+                document.getElementById('model').value = config.model;
+                document.getElementById('temperature').value = config.temperature;
+                tempValue.textContent = config.temperature;
+            } else {
+                document.getElementById('endpoint').value = config.endpoint;
+            }
+            // Fetch available models from server
+            fetchAvailableModels();
+            // Event Listeners
+            userInput.addEventListener('input', updateCharCount);
+            userInput.addEventListener('keydown', function(e) {
+                if (e.key === 'Enter' && !e.shiftKey) {
+                    e.preventDefault();
+                    sendMessage();
+                }
+            });
+            sendBtn.addEventListener('click', sendMessage);
+            clearBtn.addEventListener('click', clearChat);
+            settingsBtn.addEventListener('click', () => {
+                settingsModal.classList.remove('hidden');
+                fetchAvailableModels();
+            });
+            closeSettings.addEventListener('click', () => settingsModal.classList.add('hidden'));
+            saveSettings.addEventListener('click', saveSettingsHandler);
+            temperature.addEventListener('input', function() {
+                tempValue.textContent = this.value;
+            });
+            // Functions
+            async function fetchAvailableModels() {
+                const modelSelect = document.getElementById('model');
+                try {
+                    // Show loading state
+                    modelSelect.innerHTML = '<option value="">Loading models...</option>';
+                    const response = await fetch(`${config.endpoint.replace('/api/generate', '')}/api/tags`);
+                    if (!response.ok) {
+                        throw new Error(`HTTP error! status: ${response.status}`);
+                    }
+                    const data = await response.json();
+                    modelSelect.innerHTML = '';
+                    if (data.models && data.models.length > 0) {
+                        data.models.forEach(model => {
+                            const option = document.createElement('option');
+                            option.value = model.name;
+                            option.textContent = model.name;
+                            if (model.details) {
+                                option.textContent += ` (${model.details.family})`;
+                            }
+                            modelSelect.appendChild(option);
+                        });
+                        // Restore selected model if available
+                        if (config.model) {
+                            modelSelect.value = config.model;
+                        } else if (data.models.length > 0) {
+                            // Set first model as default if none is selected
+                            config.model = data.models[0].name;
+                            modelSelect.value = config.model;
+                        }
+                    } else {
+                        throw new Error('No models available');
+                    }
+                } catch (error) {
+                    console.error('Error fetching models:', error);
+                    modelSelect.innerHTML = '<option value="">Error loading models</option>';
+                    // Add fallback options
+                    const fallbackModels = ['llama2', 'mistral', 'gemma', 'phi'];
+                    fallbackModels.forEach(model => {
+                        const option = document.createElement('option');
+                        option.value = model;
+                        option.textContent = model;
+                        modelSelect.appendChild(option);
+                    });
+                    if (config.model) {
+                        modelSelect.value = config.model;
+                    }
+                }
+            }
+            function updateCharCount() {
+                const count = userInput.value.length;
+                charCount.textContent = count;
+                if (count > 1000) {
+                    charCount.classList.add('text-red-500');
+                } else {
+                    charCount.classList.remove('text-red-500');
+                }
+            }
+            function sendMessage() {
+                const message = userInput.value.trim();
+                if (!message) return;
+                // Add user message to chat
+                addMessage('user', message);
+                userInput.value = '';
+                updateCharCount();
+                // Add loading indicator for AI response
+                const loadingId = addLoadingIndicator();
+                // Prepare request data
+                const requestData = {
+                    model: config.model,
+                    prompt: message,
+                    stream: false,
+                    options: {
+                        temperature: parseFloat(config.temperature)
+                    }
+                };
+                // Send request to Ollama endpoint
+                fetch(`${config.endpoint.replace('/api/tags', '/api/generate')}`, {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json'
+                    },
+                    body: JSON.stringify(requestData)
+                })
+                .then(response => {
+                    if (!response.ok) {
+                        throw new Error(`HTTP error! status: ${response.status}`);
+                    }
+                    return response.json();
+                })
+                .then(data => {
+                    // Remove loading indicator
+                    removeLoadingIndicator(loadingId);
+                    // Add AI response to chat
+                    if (data.response) {
+                        addMessage('ai', data.response);
+                    } else {
+                        addMessage('ai', "I'm sorry, I couldn't process your request. Please try again.");
+                    }
+                })
+                .catch(error => {
+                    console.error('Error:', error);
+                    removeLoadingIndicator(loadingId);
+                    addMessage('ai', `Error: ${error.message}`);
+                });
+            }
+            function addMessage(sender, text) {
+                const messageDiv = document.createElement('div');
+                messageDiv.className = `message ${sender}-message bg-white p-4 rounded-lg shadow ${sender === 'user' ? 'bg-indigo-50' : ''}`;
+                messageDiv.innerHTML = `
+                    <div class="flex items-start space-x-3">
+                        <div class="flex-shrink-0 ${sender === 'user' ? 'bg-indigo-600 text-white' : 'bg-indigo-100 text-indigo-600'} p-2 rounded-full">
+                            <i class="fas ${sender === 'user' ? 'fa-user' : 'fa-robot'}"></i>
+                        </div>
+                        <div class="flex-1">
+                            <h3 class="font-bold text-gray-800">${sender === 'user' ? 'You' : 'Ollama AI'}</h3>
+                            <p class="text-gray-600 mt-1 whitespace-pre-wrap">${text}</p>
+                        </div>
+                    </div>
+                `;
+                chatMessages.appendChild(messageDiv);
+                chatMessages.scrollTop = chatMessages.scrollHeight;
+            }
+            function addLoadingIndicator() {
+                const id = 'loading-' + Date.now();
+                const loadingDiv = document.createElement('div');
+                loadingDiv.id = id;
+                loadingDiv.className = 'message ai-message bg-white p-4 rounded-lg shadow';
+                loadingDiv.innerHTML = `
+                    <div class="flex items-start space-x-3">
+                        <div class="flex-shrink-0 bg-indigo-100 p-2 rounded-full">
+                            <i class="fas fa-robot text-indigo-600"></i>
+                        </div>
+                        <div class="flex-1">
+                            <h3 class="font-bold text-gray-800">Ollama AI</h3>
+                            <div class="flex space-x-2 mt-2">
+                                <div class="w-2 h-2 bg-gray-400 rounded-full animate-pulse"></div>
+                                <div class="w-2 h-2 bg-gray-400 rounded-full animate-pulse delay-100"></div>
+                                <div class="w-2 h-2 bg-gray-400 rounded-full animate-pulse delay-200"></div>
+                            </div>
+                        </div>
+                    </div>
+                `;
+                chatMessages.appendChild(loadingDiv);
+                chatMessages.scrollTop = chatMessages.scrollHeight;
+                return id;
+            }
+            function removeLoadingIndicator(id) {
+                const element = document.getElementById(id);
+                if (element) {
+                    element.remove();
+                }
+            }
+            function clearChat() {
+                // Keep only the welcome message
+                const welcomeMessage = document.querySelector('.welcome-message');
+                chatMessages.innerHTML = '';
+                if (welcomeMessage) {
+                    chatMessages.appendChild(welcomeMessage);
+                }
+            }
+            function saveSettingsHandler() {
+                config.endpoint = document.getElementById('endpoint').value;
+                config.model = document.getElementById('model').value;
+                config.temperature = parseFloat(document.getElementById('temperature').value);
+                // Save to localStorage
+                localStorage.setItem('ollamaConfig', JSON.stringify(config));
+                // Close modal
+                settingsModal.classList.add('hidden');
+                // Show confirmation
+                const confirmation = document.createElement('div');
+                confirmation.className = 'fixed bottom-4 right-4 bg-green-500 text-white px-4 py-2 rounded-md shadow-lg flex items-center space-x-2';
+                confirmation.innerHTML = `
+                    <i class="fas fa-check-circle"></i>
+                    <span>Settings saved successfully!</span>
+                `;
+                document.body.appendChild(confirmation);
+                setTimeout(() => {
+                    confirmation.classList.add('opacity-0');
+                    setTimeout(() => confirmation.remove(), 300);
+                }, 3000);
+            }
+        });
+    </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=maxwellb-hf/ygwyg" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>