Spaces:

hogiahien
/

chatforge-ai-your-llm-playground

Running

App Files Files Community

hogiahien commited on Oct 18

Commit

a65ff1c

verified ·

1 Parent(s): 329c8ce

create a simple LLM frontend which lets the user input the API key and custom OpenAI-compatible endpoints and the ability to save chats in local browser storage

Browse files

Files changed (2) hide show

README.md +7 -4
index.html +433 -18

README.md CHANGED Viewed

@@ -1,10 +1,13 @@
 ---
-title: Chatforge Ai Your Llm Playground
-emoji: 🏃
 colorFrom: blue
-colorTo: pink
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: ChatForge AI - Your LLM Playground 🚀
 colorFrom: blue
+colorTo: purple
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://deepsite.hf.co).

index.html CHANGED Viewed

@@ -1,19 +1,434 @@
-<!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>ChatForge AI - Your LLM Playground</title>
+    <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>
+    <script>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    colors: {
+                        primary: '#6366f1',
+                        secondary: '#8b5cf6',
+                    }
+                }
+            }
+        }
+    </script>
+    <style>
+        .chat-container {
+            height: calc(100vh - 200px);
+        }
+        .message-bubble {
+            max-width: 80%;
+            word-wrap: break-word;
+        }
+        .fade-in {
+            animation: fadeIn 0.5s ease-in;
+        }
+        @keyframes fadeIn {
+            from { opacity: 0; transform: translateY(10px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+        .glow {
+            box-shadow: 0 0 20px rgba(99, 102, 241, 0.3);
+        }
+    </style>
+</head>
+<body class="bg-gray-900 text-white">
+    <!-- Vanta.js Background -->
+    <div id="vanta-bg" class="fixed inset-0 -z-10"></div>
+    <!-- Main Container -->
+    <div class="container mx-auto px-4 py-8 max-w-6xl">
+        <!-- Header -->
+        <header class="text-center mb-8 fade-in">
+            <h1 class="text-4xl md:text-6xl font-bold bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent mb-4">
+                ChatForge AI
+            </h1>
+            <p class="text-xl text-gray-300">Your Personal LLM Playground 🚀</p>
+        </header>
+        <!-- Settings Panel -->
+        <div class="bg-gray-800/80 backdrop-blur-lg rounded-2xl p-6 mb-6 glow fade-in">
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                <!-- API Configuration -->
+                <div>
+                    <h2 class="text-2xl font-semibold mb-4 text-primary flex items-center">
+                        <i data-feather="key" class="mr-2"></i>
+                        API Configuration
+                    </h2>
+                    <div class="space-y-4">
+                        <div>
+                            <label class="block text-sm font-medium text-gray-300 mb-2">API Key</label>
+                            <input type="password" id="apiKey"
+                                   class="w-full px-4 py-3 bg-gray-700 border border-gray-600 rounded-xl focus:ring-2 focus:ring-primary focus:border-transparent transition-all duration-300"
+                                   placeholder="Enter your API key...">
+                        </div>
+                        <div>
+                            <label class="block text-sm font-medium text-gray-300 mb-2">Endpoint URL</label>
+                            <input type="url" id="endpoint"
+                                   class="w-full px-4 py-3 bg-gray-700 border border-gray-600 rounded-xl focus:ring-2 focus:ring-primary focus:border-transparent transition-all duration-300"
+                                   placeholder="https://api.openai.com/v1/chat/completions"
+                                   value="https://api.openai.com/v1/chat/completions">
+                        </div>
+                        <button onclick="saveSettings()"
+                                class="w-full bg-primary hover:bg-primary/90 text-white py-3 px-6 rounded-xl font-semibold transition-all duration-300 transform hover:scale-105 flex items-center justify-center">
+                            <i data-feather="save" class="mr-2"></i>
+                            Save Settings
+                        </button>
+                    </div>
+                </div>
+                <!-- Chat Management -->
+                <div>
+                    <h2 class="text-2xl font-semibold mb-4 text-secondary flex items-center">
+                        <i data-feather="message-square" class="mr-2"></i>
+                        Chat Management
+                    </h2>
+                    <div class="space-y-4">
+                        <div class="flex space-x-4">
+                            <input type="text" id="chatName"
+                                   class="flex-1 px-4 py-3 bg-gray-700 border border-gray-600 rounded-xl focus:ring-2 focus:ring-secondary focus:border-transparent transition-all duration-300"
+                                   placeholder="New chat name...">
+                            <button onclick="createNewChat()"
+                                    class="bg-secondary hover:bg-secondary/90 text-white px-6 py-3 rounded-xl font-semibold transition-all duration-300 transform hover:scale-105">
+                                <i data-feather="plus"></i>
+                            </button>
+                        </div>
+                        <select id="chatSelector" onchange="loadChat(this.value)"
+                                class="w-full px-4 py-3 bg-gray-700 border border-gray-600 rounded-xl focus:ring-2 focus:ring-secondary focus:border-transparent transition-all duration-300">
+                            <option value="">Select a chat...</option>
+                        </select>
+                        <button onclick="deleteCurrentChat()"
+                                class="w-full bg-red-600 hover:bg-red-700 text-white py-3 px-6 rounded-xl font-semibold transition-all duration-300 flex items-center justify-center">
+                            <i data-feather="trash-2" class="mr-2"></i>
+                            Delete Current Chat
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <!-- Chat Interface -->
+        <div class="bg-gray-800/80 backdrop-blur-lg rounded-2xl p-6 chat-container flex flex-col glow fade-in">
+            <!-- Chat Messages -->
+            <div id="chatMessages" class="flex-1 overflow-y-auto mb-6 space-y-4 p-4">
+                <div class="text-center text-gray-400 py-8">
+                    <i data-feather="message-circle" class="w-12 h-12 mx-auto mb-4 opacity-50"></i>
+                    <p>Start a conversation with your AI assistant!</p>
+                </div>
+            </div>
+            <!-- Input Area -->
+            <div class="border-t border-gray-700 pt-4">
+                <div class="flex space-x-4">
+                    <input type="text" id="messageInput"
+                           class="flex-1 px-4 py-3 bg-gray-700 border border-gray-600 rounded-xl focus:ring-2 focus:ring-primary focus:border-transparent transition-all duration-300"
+                           placeholder="Type your message here..."
+                           onkeypress="handleKeyPress(event)">
+                    <button onclick="sendMessage()"
+                            class="bg-primary hover:bg-primary/90 text-white px-8 py-3 rounded-xl font-semibold transition-all duration-300 transform hover:scale-105 flex items-center">
+                        <i data-feather="send" class="mr-2"></i>
+                        Send
+                    </button>
+                </div>
+            </div>
+        </div>
+        <!-- Status Bar -->
+        <div class="mt-4 text-center text-gray-400 text-sm">
+            <div id="status" class="flex items-center justify-center space-x-2">
+                <i data-feather="wifi" class="w-4 h-4"></i>
+                <span>Ready to chat</span>
+            </div>
+        </div>
+    </div>
+    <script>
+        // Initialize Vanta.js background
+        VANTA.GLOBE({
+            el: "#vanta-bg",
+            mouseControls: true,
+            touchControls: true,
+            gyroControls: false,
+            minHeight: 200.00,
+            minWidth: 200.00,
+            scale: 1.00,
+            scaleMobile: 1.00,
+            color: 0x6366f1,
+            backgroundColor: 0x111827,
+            size: 0.8
+        });
+        // Global variables
+        let currentChatId = null;
+        let chats = JSON.parse(localStorage.getItem('chats') || '{}');
+        let settings = JSON.parse(localStorage.getItem('settings') || '{}');
+        // Initialize on load
+        document.addEventListener('DOMContentLoaded', function() {
+            feather.replace();
+            loadSettings();
+            loadChatList();
+            // Load last active chat if exists
+            const lastChat = localStorage.getItem('lastActiveChat');
+            if (lastChat && chats[lastChat]) {
+                loadChat(lastChat);
+            }
+        });
+        function saveSettings() {
+            const apiKey = document.getElementById('apiKey').value;
+            const endpoint = document.getElementById('endpoint').value;
+            settings = { apiKey, endpoint };
+            localStorage.setItem('settings', JSON.stringify(settings));
+            showStatus('Settings saved successfully!', 'success');
+        }
+        function loadSettings() {
+            if (settings.apiKey) {
+                document.getElementById('apiKey').value = settings.apiKey;
+            }
+            if (settings.endpoint) {
+                document.getElementById('endpoint').value = settings.endpoint;
+            }
+        }
+        function createNewChat() {
+            const chatName = document.getElementById('chatName').value.trim();
+            if (!chatName) {
+                showStatus('Please enter a chat name', 'error');
+                return;
+            }
+            const chatId = 'chat_' + Date.now();
+            chats[chatId] = {
+                name: chatName,
+                messages: [],
+                createdAt: new Date().toISOString()
+            };
+            localStorage.setItem('chats', JSON.stringify(chats));
+            loadChatList();
+            loadChat(chatId);
+            document.getElementById('chatName').value = '';
+            showStatus('New chat created!', 'success');
+        }
+        function loadChatList() {
+            const selector = document.getElementById('chatSelector');
+            selector.innerHTML = '<option value="">Select a chat...</option>';
+            Object.keys(chats).forEach(chatId => {
+                const option = document.createElement('option');
+                option.value = chatId;
+                option.textContent = chats[chatId].name;
+                if (chatId === currentChatId) {
+                    option.selected = true;
+                }
+                selector.appendChild(option);
+            });
+        }
+        function loadChat(chatId) {
+            if (!chatId || !chats[chatId]) {
+                currentChatId = null;
+                document.getElementById('chatMessages').innerHTML = `
+                    <div class="text-center text-gray-400 py-8">
+                        <i data-feather="message-circle" class="w-12 h-12 mx-auto mb-4 opacity-50"></i>
+                        <p>Start a conversation with your AI assistant!</p>
+                    </div>`;
+                feather.replace();
+                return;
+            }
+            currentChatId = chatId;
+            localStorage.setItem('lastActiveChat', chatId);
+            const messagesContainer = document.getElementById('chatMessages');
+            messagesContainer.innerHTML = '';
+            chats[chatId].messages.forEach(message => {
+                addMessageToChat(message.role, message.content, false);
+            });
+            loadChatList();
+            showStatus(`Loaded chat: ${chats[chatId].name}`, 'success');
+        }
+        function deleteCurrentChat() {
+            if (!currentChatId) {
+                showStatus('No chat selected to delete', 'error');
+                return;
+            }
+            if (confirm(`Are you sure you want to delete "${chats[currentChatId].name}"?`)) {
+                delete chats[currentChatId];
+                localStorage.setItem('chats', JSON.stringify(chats));
+                currentChatId = null;
+                loadChatList();
+                loadChat(null);
+                showStatus('Chat deleted successfully', 'success');
+            }
+        }
+        async function sendMessage() {
+            const input = document.getElementById('messageInput');
+            const message = input.value.trim();
+            if (!message) return;
+            if (!settings.apiKey || !settings.endpoint) {
+                showStatus('Please configure API settings first', 'error');
+                return;
+            }
+            if (!currentChatId) {
+                createNewChat();
+            }
+            // Add user message
+            addMessageToChat('user', message, true);
+            input.value = '';
+            // Show typing indicator
+            const typingIndicator = addTypingIndicator();
+            try {
+                const response = await fetch(settings.endpoint, {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                        'Authorization': `Bearer ${settings.apiKey}`
+                    },
+                    body: JSON.stringify({
+                        model: "gpt-3.5-turbo",
+                        messages: [
+                            ...chats[currentChatId].messages.map(msg => ({
+                                role: msg.role,
+                                content: msg.content
+                            })),
+                            { role: 'user', content: message }
+                        ],
+                        stream: false
+                    })
+                });
+                if (!response.ok) {
+                    throw new Error(`API error: ${response.status}`);
+                }
+                const data = await response.json();
+                const aiResponse = data.choices[0].message.content;
+                // Remove typing indicator
+                typingIndicator.remove();
+                // Add AI response
+                addMessageToChat('assistant', aiResponse, true);
+                showStatus('Message sent successfully', 'success');
+            } catch (error) {
+                typingIndicator.remove();
+                showStatus(`Error: ${error.message}`, 'error');
+                console.error('API Error:', error);
+            }
+        }
+        function addMessageToChat(role, content, save = true) {
+            const messagesContainer = document.getElementById('chatMessages');
+            // Remove empty state if present
+            if (messagesContainer.children.length === 1 && messagesContainer.children[0].querySelector('.text-center')) {
+                messagesContainer.innerHTML = '';
+            }
+            const messageDiv = document.createElement('div');
+            messageDiv.className = `fade-in flex ${role === 'user' ? 'justify-end' : 'justify-start'}`;
+            const bubble = document.createElement('div');
+            bubble.className = `message-bubble px-4 py-3 rounded-2xl ${
+                role === 'user'
+                    ? 'bg-primary text-white rounded-br-none'
+                    : 'bg-gray-700 text-white rounded-bl-none'
+            }`;
+            bubble.textContent = content;
+            messageDiv.appendChild(bubble);
+            messagesContainer.appendChild(messageDiv);
+            messagesContainer.scrollTop = messagesContainer.scrollHeight;
+            if (save && currentChatId) {
+                chats[currentChatId].messages.push({ role, content });
+                localStorage.setItem('chats', JSON.stringify(chats));
+            }
+            feather.replace();
+        }
+        function addTypingIndicator() {
+            const messagesContainer = document.getElementById('chatMessages');
+            const typingDiv = document.createElement('div');
+            typingDiv.className = 'fade-in flex justify-start';
+            const bubble = document.createElement('div');
+            bubble.className = 'message-bubble px-4 py-3 rounded-2xl bg-gray-700 text-white rounded-bl-none flex space-x-1';
+            bubble.innerHTML = `
+                <div class="w-2 h-2 bg-gray-400 rounded-full animate-bounce"></div>
+                <div class="w-2 h-2 bg-gray-400 rounded-full animate-bounce" style="animation-delay: 0.1s"></div>
+                <div class="w-2 h-2 bg-gray-400 rounded-full animate-bounce" style="animation-delay: 0.2s"></div>
+            `;
+            typingDiv.appendChild(bubble);
+            messagesContainer.appendChild(typingDiv);
+            messagesContainer.scrollTop = messagesContainer.scrollHeight;
+            return typingDiv;
+        }
+        function handleKeyPress(event) {
+            if (event.key === 'Enter' && !event.shiftKey) {
+                event.preventDefault();
+                sendMessage();
+            }
+        }
+        function showStatus(message, type = 'info') {
+            const status = document.getElementById('status');
+            const icon = status.querySelector('i');
+            status.className = `flex items-center justify-center space-x-2 ${
+                type === 'error' ? 'text-red-400' :
+                type === 'success' ? 'text-green-400' : 'text-gray-400'
+            }`;
+            status.querySelector('span').textContent = message;
+            // Update icon based on status type
+            const iconName = type === 'error' ? 'alert-circle' :
+                            type === 'success' ? 'check-circle' : 'info';
+            icon.setAttribute('data-feather', iconName);
+            feather.replace();
+            // Auto-hide success messages after 3 seconds
+            if (type === 'success') {
+                setTimeout(() => {
+                    status.className = 'flex items-center justify-center space-x-2 text-gray-400';
+            status.querySelector('span').textContent = 'Ready to chat';
+                    icon.setAttribute('data-feather', 'wifi');
+                    feather.replace();
+                }, 3000);
+            }
+        }
+    </script>
+</body>
 </html>