Spaces:

rajkumar218
/

llm-chat

Running

App Files Files Community

rajkumar218 commited on Apr 26

Commit

a6cbede

verified ·

1 Parent(s): 0e09d56

Add 3 files

Browse files

Files changed (3) hide show

README.md +6 -4
index.html +391 -19
prompts.txt +0 -0

README.md CHANGED Viewed

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

 ---
+title: llm-chat
+emoji: 🐳
+colorFrom: red
 colorTo: green
 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,391 @@
-<!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>LLM 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>
+        .chat-container {
+            height: calc(100vh - 200px);
+        }
+        .message-animation {
+            animation: fadeIn 0.3s ease-in-out;
+        }
+        @keyframes fadeIn {
+            from { opacity: 0; transform: translateY(10px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+        .slide-in {
+            animation: slideIn 0.3s ease-out;
+        }
+        @keyframes slideIn {
+            from { transform: translateX(100%); }
+            to { transform: translateX(0); }
+        }
+        .pulse {
+            animation: pulse 1.5s infinite;
+        }
+        @keyframes pulse {
+            0%, 100% { opacity: 1; }
+            50% { opacity: 0.5; }
+        }
+    </style>
+</head>
+<body class="bg-gray-100 font-sans">
+    <div class="container mx-auto max-w-6xl p-4">
+        <div class="bg-white rounded-xl shadow-lg overflow-hidden">
+            <!-- Header -->
+            <div class="bg-indigo-600 text-white p-4 flex justify-between items-center">
+                <h1 class="text-xl font-bold">LLM Chat Interface</h1>
+                <button id="config-btn" class="bg-indigo-700 hover:bg-indigo-800 px-4 py-2 rounded-lg transition">
+                    <i class="fas fa-cog mr-2"></i>Configure
+                </button>
+            </div>
+            <!-- Configuration Panel -->
+            <div id="config-panel" class="hidden bg-gray-50 p-4 border-b border-gray-200 slide-in">
+                <div class="mb-4">
+                    <label class="block text-gray-700 font-medium mb-2">LLM Provider</label>
+                    <select id="provider-select" class="w-full p-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">
+                        <option value="">Select a provider</option>
+                        <option value="azure-openai">Azure OpenAI</option>
+                        <option value="groq">Groq</option>
+                        <option value="openai">OpenAI</option>
+                        <option value="anthropic">Anthropic</option>
+                        <option value="cohere">Cohere</option>
+                    </select>
+                </div>
+                <!-- Dynamic Credential Form -->
+                <div id="credential-form" class="space-y-4">
+                    <!-- Form will be dynamically populated based on provider -->
+                </div>
+                <div class="flex justify-end mt-4">
+                    <button id="save-config" class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-lg transition">
+                        Save Configuration
+                    </button>
+                </div>
+            </div>
+            <!-- Chat Area -->
+            <div class="flex flex-col">
+                <div id="chat-messages" class="chat-container p-4 overflow-y-auto space-y-4">
+                    <div class="text-center text-gray-500 py-10">
+                        <i class="fas fa-comments text-4xl mb-2"></i>
+                        <p>Configure your LLM provider to start chatting</p>
+                    </div>
+                </div>
+                <!-- Input Area -->
+                <div class="p-4 border-t border-gray-200 bg-white">
+                    <div id="connection-status" class="hidden mb-2 flex items-center">
+                        <span class="w-3 h-3 rounded-full mr-2 bg-gray-400"></span>
+                        <span class="text-sm text-gray-600">Disconnected</span>
+                    </div>
+                    <div class="flex space-x-2">
+                        <input id="message-input" type="text" placeholder="Type your message..."
+                               class="flex-1 p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 disabled:opacity-50" disabled>
+                        <button id="send-btn" class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-lg transition disabled:opacity-50" disabled>
+                            <i class="fas fa-paper-plane"></i>
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            // DOM Elements
+            const configBtn = document.getElementById('config-btn');
+            const configPanel = document.getElementById('config-panel');
+            const providerSelect = document.getElementById('provider-select');
+            const credentialForm = document.getElementById('credential-form');
+            const saveConfigBtn = document.getElementById('save-config');
+            const chatMessages = document.getElementById('chat-messages');
+            const messageInput = document.getElementById('message-input');
+            const sendBtn = document.getElementById('send-btn');
+            const connectionStatus = document.getElementById('connection-status');
+            // Current configuration
+            let currentConfig = {
+                provider: null,
+                credentials: null,
+                connected: false
+            };
+            // Provider configuration templates
+            const providerConfigs = {
+                'azure-openai': {
+                    name: 'Azure OpenAI',
+                    fields: [
+                        { id: 'api-key', label: 'API Key', type: 'password', required: true },
+                        { id: 'endpoint', label: 'Endpoint URL', type: 'text', placeholder: 'https://your-resource.openai.azure.com/', required: true },
+                        { id: 'deployment-name', label: 'Deployment Name', type: 'text', required: true },
+                        { id: 'api-version', label: 'API Version', type: 'text', value: '2023-05-15', required: true }
+                    ]
+                },
+                'groq': {
+                    name: 'Groq',
+                    fields: [
+                        { id: 'api-key', label: 'API Key', type: 'password', required: true },
+                        { id: 'model', label: 'Model', type: 'text', value: 'mixtral-8x7b-32768', required: true }
+                    ]
+                },
+                'openai': {
+                    name: 'OpenAI',
+                    fields: [
+                        { id: 'api-key', label: 'API Key', type: 'password', required: true },
+                        { id: 'model', label: 'Model', type: 'text', value: 'gpt-4', required: true }
+                    ]
+                },
+                'anthropic': {
+                    name: 'Anthropic',
+                    fields: [
+                        { id: 'api-key', label: 'API Key', type: 'password', required: true },
+                        { id: 'model', label: 'Model', type: 'text', value: 'claude-2', required: true }
+                    ]
+                },
+                'cohere': {
+                    name: 'Cohere',
+                    fields: [
+                        { id: 'api-key', label: 'API Key', type: 'password', required: true },
+                        { id: 'model', label: 'Model', type: 'text', value: 'command', required: true }
+                    ]
+                }
+            };
+            // Toggle configuration panel
+            configBtn.addEventListener('click', function() {
+                configPanel.classList.toggle('hidden');
+            });
+            // Handle provider selection change
+            providerSelect.addEventListener('change', function() {
+                const selectedProvider = this.value;
+                if (!selectedProvider) {
+                    credentialForm.innerHTML = '';
+                    return;
+                }
+                const provider = providerConfigs[selectedProvider];
+                let formHTML = `<h3 class="font-medium text-gray-700 mb-3">${provider.name} Configuration</h3>`;
+                provider.fields.forEach(field => {
+                    formHTML += `
+                        <div class="mb-3">
+                            <label for="${field.id}" class="block text-sm font-medium text-gray-700 mb-1">${field.label}</label>
+                            <input type="${field.type}" id="${field.id}"
+                                   class="w-full p-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"
+                                   ${field.placeholder ? `placeholder="${field.placeholder}"` : ''}
+                                   ${field.value ? `value="${field.value}"` : ''}
+                                   ${field.required ? 'required' : ''}>
+                        </div>
+                    `;
+                });
+                credentialForm.innerHTML = formHTML;
+            });
+            // Save configuration
+            saveConfigBtn.addEventListener('click', function() {
+                const selectedProvider = providerSelect.value;
+                if (!selectedProvider) {
+                    alert('Please select a provider');
+                    return;
+                }
+                const provider = providerConfigs[selectedProvider];
+                const credentials = {};
+                let isValid = true;
+                provider.fields.forEach(field => {
+                    const input = document.getElementById(field.id);
+                    if (field.required && !input.value.trim()) {
+                        input.classList.add('border-red-500');
+                        isValid = false;
+                    } else {
+                        input.classList.remove('border-red-500');
+                        credentials[field.id] = input.value.trim();
+                    }
+                });
+                if (!isValid) {
+                    alert('Please fill in all required fields');
+                    return;
+                }
+                // Save configuration
+                currentConfig.provider = selectedProvider;
+                currentConfig.credentials = credentials;
+                // Test connection (simulated)
+                testConnection();
+                // Close config panel
+                configPanel.classList.add('hidden');
+                // Add system message
+                addMessage('system', `Configuration saved for ${provider.name}. You can now start chatting.`);
+            });
+            // Simulate connection test
+            function testConnection() {
+                connectionStatus.classList.remove('hidden');
+                const statusDot = connectionStatus.querySelector('span:first-child');
+                const statusText = connectionStatus.querySelector('span:last-child');
+                statusDot.classList.remove('bg-green-500', 'bg-red-500');
+                statusDot.classList.add('bg-yellow-500', 'pulse');
+                statusText.textContent = 'Connecting...';
+                // Simulate API call
+                setTimeout(() => {
+                    statusDot.classList.remove('bg-yellow-500', 'pulse');
+                    // For demo purposes, we'll assume connection is successful
+                    currentConfig.connected = true;
+                    statusDot.classList.add('bg-green-500');
+                    statusText.textContent = 'Connected';
+                    // Enable chat
+                    messageInput.disabled = false;
+                    sendBtn.disabled = false;
+                }, 1500);
+            }
+            // Add message to chat
+            function addMessage(role, content) {
+                const messageDiv = document.createElement('div');
+                messageDiv.classList.add('message-animation');
+                if (role === 'user') {
+                    messageDiv.innerHTML = `
+                        <div class="flex justify-end">
+                            <div class="bg-indigo-600 text-white rounded-lg p-3 max-w-3/4">
+                                <p>${content}</p>
+                            </div>
+                        </div>
+                    `;
+                } else if (role === 'assistant') {
+                    messageDiv.innerHTML = `
+                        <div class="flex justify-start">
+                            <div class="bg-gray-200 text-gray-800 rounded-lg p-3 max-w-3/4">
+                                <p>${content}</p>
+                            </div>
+                        </div>
+                    `;
+                } else { // system
+                    messageDiv.innerHTML = `
+                        <div class="flex justify-center">
+                            <div class="bg-gray-100 text-gray-600 text-sm rounded-lg p-2 max-w-3/4">
+                                <p>${content}</p>
+                            </div>
+                        </div>
+                    `;
+                }
+                chatMessages.appendChild(messageDiv);
+                chatMessages.scrollTop = chatMessages.scrollHeight;
+            }
+            // Handle send message
+            sendBtn.addEventListener('click', sendMessage);
+            messageInput.addEventListener('keypress', function(e) {
+                if (e.key === 'Enter') {
+                    sendMessage();
+                }
+            });
+            function sendMessage() {
+                const message = messageInput.value.trim();
+                if (!message || !currentConfig.connected) return;
+                // Add user message
+                addMessage('user', message);
+                messageInput.value = '';
+                // Show typing indicator
+                const typingIndicator = document.createElement('div');
+                typingIndicator.id = 'typing-indicator';
+                typingIndicator.innerHTML = `
+                    <div class="flex justify-start">
+                        <div class="bg-gray-200 text-gray-800 rounded-lg p-3 max-w-3/4">
+                            <div class="flex space-x-2">
+                                <div class="w-2 h-2 rounded-full bg-gray-500 animate-bounce" style="animation-delay: 0s"></div>
+                                <div class="w-2 h-2 rounded-full bg-gray-500 animate-bounce" style="animation-delay: 0.2s"></div>
+                                <div class="w-2 h-2 rounded-full bg-gray-500 animate-bounce" style="animation-delay: 0.4s"></div>
+                            </div>
+                        </div>
+                    </div>
+                `;
+                chatMessages.appendChild(typingIndicator);
+                chatMessages.scrollTop = chatMessages.scrollHeight;
+                // Simulate API call to backend
+                const apiEndpoint = '/api/chat'; // Your FastAPI endpoint
+                const requestData = {
+                    provider: currentConfig.provider,
+                    credentials: currentConfig.credentials,
+                    message: message
+                };
+                // In a real implementation, you would use fetch or axios
+                console.log('Sending to backend:', requestData);
+                // Simulate API response after delay
+                setTimeout(() => {
+                    // Remove typing indicator
+                    const indicator = document.getElementById('typing-indicator');
+                    if (indicator) chatMessages.removeChild(indicator);
+                    // For demo purposes, we'll use a mock response
+                    const mockResponses = {
+                        'azure-openai': `I'm your Azure OpenAI assistant. How can I help you today?`,
+                        'groq': `I'm powered by Groq's ultra-fast LLMs. What would you like to know?`,
+                        'openai': `Hello! I'm an OpenAI model. How can I assist you?`,
+                        'anthropic': `Greetings! I'm Claude from Anthropic. How may I help?`,
+                        'cohere': `I'm using Cohere's language model. What's on your mind?`
+                    };
+                    const response = mockResponses[currentConfig.provider] ||
+                                    "I'm your AI assistant. How can I help you today?";
+                    addMessage('assistant', response);
+                }, 1500);
+            }
+            // Initial setup
+            if (localStorage.getItem('llmConfig')) {
+                try {
+                    currentConfig = JSON.parse(localStorage.getItem('llmConfig'));
+                    if (currentConfig.provider) {
+                        providerSelect.value = currentConfig.provider;
+                        const event = new Event('change');
+                        providerSelect.dispatchEvent(event);
+                        // Populate fields with saved values
+                        if (currentConfig.credentials) {
+                            for (const [key, value] of Object.entries(currentConfig.credentials)) {
+                                const input = document.getElementById(key);
+                                if (input) input.value = value;
+                            }
+                        }
+                        // Test connection
+                        testConnection();
+                    }
+                } catch (e) {
+                    console.error('Failed to load config:', e);
+                }
+            }
+        });
+    </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=rajkumar218/llm-chat" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>

prompts.txt ADDED Viewed

File without changes