Spaces:

Mohit0199
/

chatrouter

Running

App Files Files Community

Mohit0199 commited on about 1 month ago

Commit

4f20b87

verified ·

1 Parent(s): a63a141

create a chatbot which is customizable and where user can enter their openrouter api key and then can select any llm available on openrouter and can use it in chatbot.

Browse files

Files changed (2) hide show

README.md +8 -5
index.html +305 -18

README.md CHANGED Viewed

@@ -1,10 +1,13 @@
 ---
-title: Chatrouter Your Llm Portal
-emoji: 🏃
-colorFrom: red
-colorTo: yellow
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: ChatRouter - Your LLM Portal 🚀
+colorFrom: green
+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,306 @@
-<!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>ChatRouter - AI Chat Interface</title>
+    <link rel="icon" type="image/x-icon" href="https://static.photos/technology/200x200/42">
+    <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>
+    <style>
+        .chat-height {
+            height: calc(100vh - 200px);
+        }
+        .message-bubble {
+            max-width: 85%;
+            word-wrap: break-word;
+        }
+        .typing-indicator {
+            display: inline-block;
+            width: 8px;
+            height: 8px;
+            border-radius: 50%;
+            background-color: #9ca3af;
+            margin-right: 4px;
+        }
+        .typing-indicator:nth-child(1) {
+            animation: typing 1s infinite;
+        }
+        .typing-indicator:nth-child(2) {
+            animation: typing 1s infinite 0.2s;
+        }
+        .typing-indicator:nth-child(3) {
+            animation: typing 1s infinite 0.4s;
+            margin-right: 0;
+        }
+        @keyframes typing {
+            0% { transform: translateY(0); }
+            50% { transform: translateY(-5px); }
+            100% { transform: translateY(0); }
+        }
+    </style>
+</head>
+<body class="bg-gradient-to-br from-indigo-900 to-purple-900 text-white">
+    <div class="container mx-auto px-4 py-8 max-w-5xl">
+        <header class="flex justify-between items-center mb-8">
+            <div class="flex items-center space-x-3">
+                <i data-feather="cpu" class="w-8 h-8 text-indigo-300"></i>
+                <h1 class="text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-indigo-300 to-purple-300">ChatRouter</h1>
+            </div>
+            <button id="settingsBtn" class="flex items-center space-x-2 bg-indigo-800 hover:bg-indigo-700 px-4 py-2 rounded-lg transition-all">
+                <i data-feather="settings" class="w-5 h-5"></i>
+                <span>Settings</span>
+            </button>
+        </header>
+        <!-- Settings Modal -->
+        <div id="settingsModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
+            <div class="bg-gray-800 rounded-xl p-6 w-full max-w-md">
+                <div class="flex justify-between items-center mb-4">
+                    <h2 class="text-xl font-bold">Chat Settings</h2>
+                    <button id="closeSettings" class="text-gray-400 hover:text-white">
+                        <i data-feather="x"></i>
+                    </button>
+                </div>
+                <div class="space-y-4">
+                    <div>
+                        <label class="block text-sm font-medium mb-1">OpenRouter API Key</label>
+                        <input type="password" id="apiKeyInput" placeholder="Enter your API key" class="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500">
+                        <p class="text-xs text-gray-400 mt-1">Your key is stored locally and never sent to our servers</p>
+                    </div>
+                    <div>
+                        <label class="block text-sm font-medium mb-1">Select Model</label>
+                        <select id="modelSelect" class="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500">
+                            <option value="openai/gpt-3.5-turbo">GPT-3.5 Turbo</option>
+                            <option value="openai/gpt-4">GPT-4</option>
+                            <option value="anthropic/claude-2">Claude 2</option>
+                            <option value="google/palm-2-chat-bison">PaLM 2 Chat</option>
+                            <option value="meta-llama/llama-2-70b-chat">Llama 2 (70B)</option>
+                        </select>
+                    </div>
+                    <div>
+                        <label class="block text-sm font-medium mb-1">Chat Theme</label>
+                        <div class="flex space-x-2">
+                            <button data-theme="indigo" class="theme-btn w-8 h-8 bg-indigo-600 rounded-full border-2 border-transparent focus:border-white"></button>
+                            <button data-theme="emerald" class="theme-btn w-8 h-8 bg-emerald-600 rounded-full border-2 border-transparent focus:border-white"></button>
+                            <button data-theme="rose" class="theme-btn w-8 h-8 bg-rose-600 rounded-full border-2 border-transparent focus:border-white"></button>
+                            <button data-theme="amber" class="theme-btn w-8 h-8 bg-amber-600 rounded-full border-2 border-transparent focus:border-white"></button>
+                            <button data-theme="cyan" class="theme-btn w-8 h-8 bg-cyan-600 rounded-full border-2 border-transparent focus:border-white"></button>
+                        </div>
+                    </div>
+                    <button id="saveSettings" class="w-full bg-indigo-600 hover:bg-indigo-500 text-white py-2 rounded-lg transition-colors">Save Settings</button>
+                </div>
+            </div>
+        </div>
+        <!-- Chat Container -->
+        <div class="bg-gray-800 bg-opacity-60 backdrop-blur-lg rounded-2xl shadow-xl overflow-hidden">
+            <!-- Chat Messages -->
+            <div id="chatContainer" class="chat-height overflow-y-auto p-4 space-y-4">
+                <div class="flex justify-center">
+                    <div class="bg-gray-700 bg-opacity-50 px-4 py-2 rounded-lg text-sm text-gray-300">
+                        <i data-feather="info" class="inline mr-2 w-4 h-4"></i>
+                        Enter your API key in settings to start chatting
+                    </div>
+                </div>
+            </div>
+            <!-- Input Area -->
+            <div class="border-t border-gray-700 p-4 bg-gray-800">
+                <div class="flex items-center space-x-2">
+                    <textarea id="messageInput" placeholder="Type your message..." rows="1" class="flex-1 bg-gray-700 border border-gray-600 rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-indigo-500 resize-none max-h-32"></textarea>
+                    <button id="sendBtn" class="bg-indigo-600 hover:bg-indigo-500 text-white p-3 rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed" disabled>
+                        <i data-feather="send" class="w-5 h-5"></i>
+                    </button>
+                </div>
+                <div class="flex justify-between items-center mt-2 text-xs text-gray-400">
+                    <div id="typingIndicator" class="flex items-center hidden">
+                        <span class="mr-2">AI is typing</span>
+                        <div class="typing-indicator"></div>
+                        <div class="typing-indicator"></div>
+                        <div class="typing-indicator"></div>
+                    </div>
+                    <div>
+                        <span id="modelIndicator">No model selected</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <footer class="mt-8 text-center text-sm text-gray-400">
+            <p>ChatRouter connects you to the best AI models via OpenRouter</p>
+            <p class="mt-1">Your conversations stay private and secure</p>
+        </footer>
+    </div>
+    <script>
+        feather.replace();
+        // DOM Elements
+        const settingsBtn = document.getElementById('settingsBtn');
+        const settingsModal = document.getElementById('settingsModal');
+        const closeSettings = document.getElementById('closeSettings');
+        const apiKeyInput = document.getElementById('apiKeyInput');
+        const modelSelect = document.getElementById('modelSelect');
+        const saveSettings = document.getElementById('saveSettings');
+        const messageInput = document.getElementById('messageInput');
+        const sendBtn = document.getElementById('sendBtn');
+        const chatContainer = document.getElementById('chatContainer');
+        const typingIndicator = document.getElementById('typingIndicator');
+        const modelIndicator = document.getElementById('modelIndicator');
+        const themeBtns = document.querySelectorAll('.theme-btn');
+        // Load saved settings
+        function loadSettings() {
+            const savedApiKey = localStorage.getItem('chatRouterApiKey');
+            const savedModel = localStorage.getItem('chatRouterModel');
+            const savedTheme = localStorage.getItem('chatRouterTheme') || 'indigo';
+            if (savedApiKey) {
+                apiKeyInput.value = savedApiKey;
+                sendBtn.disabled = false;
+            }
+            if (savedModel) {
+                modelSelect.value = savedModel;
+                modelIndicator.textContent = `Using: ${savedModel.split('/').pop()}`;
+            }
+            // Apply theme
+            document.body.className = `bg-gradient-to-br from-${savedTheme}-900 to-purple-900 text-white`;
+        }
+        // Save settings
+        saveSettings.addEventListener('click', () => {
+            const apiKey = apiKeyInput.value.trim();
+            const model = modelSelect.value;
+            if (apiKey) {
+                localStorage.setItem('chatRouterApiKey', apiKey);
+                localStorage.setItem('chatRouterModel', model);
+                sendBtn.disabled = false;
+                modelIndicator.textContent = `Using: ${model.split('/').pop()}`;
+                settingsModal.classList.add('hidden');
+                // Add confirmation message to chat
+                addMessage('system', 'Settings saved successfully. You can now start chatting!');
+            } else {
+                alert('Please enter your OpenRouter API key');
+            }
+        });
+        // Theme selection
+        themeBtns.forEach(btn => {
+            btn.addEventListener('click', () => {
+                const theme = btn.dataset.theme;
+                localStorage.setItem('chatRouterTheme', theme);
+                document.body.className = `bg-gradient-to-br from-${theme}-900 to-purple-900 text-white`;
+                // Update button colors to match theme
+                document.querySelectorAll('.bg-indigo-600').forEach(el => {
+                    el.classList.remove('bg-indigo-600', 'hover:bg-indigo-500');
+                    el.classList.add(`bg-${theme}-600`, `hover:bg-${theme}-500`);
+                });
+            });
+        });
+        // Modal controls
+        settingsBtn.addEventListener('click', () => {
+            settingsModal.classList.remove('hidden');
+        });
+        closeSettings.addEventListener('click', () => {
+            settingsModal.classList.add('hidden');
+        });
+        // Auto-resize textarea
+        messageInput.addEventListener('input', () => {
+            messageInput.style.height = 'auto';
+            messageInput.style.height = (messageInput.scrollHeight) + 'px';
+        });
+        // Add message to chat
+        function addMessage(role, content) {
+            const messageDiv = document.createElement('div');
+            messageDiv.className = `flex ${role === 'user' ? 'justify-end' : 'justify-start'}`;
+            const bubble = document.createElement('div');
+            bubble.className = `message-bubble rounded-2xl px-4 py-3 ${role === 'user' ? 'bg-indigo-600 rounded-tr-none' : 'bg-gray-700 rounded-tl-none'}`;
+            bubble.textContent = content;
+            messageDiv.appendChild(bubble);
+            chatContainer.appendChild(messageDiv);
+            chatContainer.scrollTop = chatContainer.scrollHeight;
+        }
+        // Send message to OpenRouter
+        async function sendMessage() {
+            const message = messageInput.value.trim();
+            if (!message) return;
+            const apiKey = localStorage.getItem('chatRouterApiKey');
+            const model = localStorage.getItem('chatRouterModel');
+            if (!apiKey || !model) {
+                addMessage('system', 'Please configure your API key and model in settings first.');
+                return;
+            }
+            // Add user message to chat
+            addMessage('user', message);
+            messageInput.value = '';
+            messageInput.style.height = 'auto';
+            // Show typing indicator
+            typingIndicator.classList.remove('hidden');
+            try {
+                const response = await fetch('https://openrouter.ai/api/v1/chat/completions', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                        'Authorization': `Bearer ${apiKey}`,
+                        'HTTP-Referer': window.location.href,
+                        'X-Title': 'ChatRouter'
+                    },
+                    body: JSON.stringify({
+                        model: model,
+                        messages: [{ role: 'user', content: message }]
+                    })
+                });
+                const data = await response.json();
+                if (data.error) {
+                    addMessage('system', `Error: ${data.error.message}`);
+                } else if (data.choices && data.choices[0].message.content) {
+                    addMessage('assistant', data.choices[0].message.content);
+                }
+            } catch (error) {
+                addMessage('system', `Error: ${error.message}`);
+            } finally {
+                typingIndicator.classList.add('hidden');
+            }
+        }
+        // Event listeners
+        messageInput.addEventListener('keydown', (e) => {
+            if (e.key === 'Enter' && !e.shiftKey) {
+                e.preventDefault();
+                sendMessage();
+            }
+        });
+        sendBtn.addEventListener('click', sendMessage);
+        // Initialize
+        loadSettings();
+        // Welcome message
+        setTimeout(() => {
+            if (!localStorage.getItem('chatRouterApiKey')) {
+                addMessage('system', 'Welcome to ChatRouter! Please enter your OpenRouter API key in settings to begin.');
+            }
+        }, 1000);
+    </script>
+</body>
 </html>