senangwebs-chatbot
Version:
Lightweight JavaScript library with OpenRouter API integration for AI-powered conversations.
146 lines (128 loc) • 7.97 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test OpenRouter Integration</title>
<link rel="stylesheet" href="../../dist/swc.css">
<script src="https://cdn.tailwindcss.com"></script>
<script src="../../dist/swc.js"></script>
</head>
<body class="bg-gray-100 font-sans">
<div class="max-w-4xl mx-auto my-12 px-5">
<div class="bg-white p-8 shadow-lg rounded-lg">
<h1 class="text-3xl font-bold mb-6 text-gray-800">🧪 OpenRouter API Test</h1>
<div class="bg-yellow-50 border border-yellow-400 rounded-lg p-4 mb-5">
<strong class="text-yellow-800">⚠️ API Key Required</strong><br>
<span class="text-yellow-700">Enter your OpenRouter API key below to test. Get one at:
<a href="https://openrouter.ai/keys" target="_blank" class="text-blue-600 hover:underline">https://openrouter.ai/keys</a></span>
</div>
<div id="setup">
<label for="apiKey" class="block font-semibold text-gray-700 mb-2">API Key:</label>
<input type="password" id="apiKey" placeholder="sk-or-v1-..."
class="w-full p-3 mb-4 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-teal-500">
<label for="model" class="block font-semibold text-gray-700 mb-2">Model:</label>
<select id="model" class="w-full p-3 mb-4 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-teal-500">
<option value="openai/gpt-3.5-turbo">OpenAI GPT-3.5 Turbo (Fast & Cheap)</option>
<option value="openai/gpt-4-turbo">OpenAI GPT-4 Turbo (Smart & Expensive)</option>
<option value="anthropic/claude-3-haiku">Claude 3 Haiku (Fast)</option>
<option value="meta-llama/llama-3-8b-instruct">Llama 3 8B (Open Source)</option>
<option value="nvidia/nemotron-nano-12b-v2-vl:free">NVIDIA NeMoT-Nano 12B-v2-vl (Free)</option>
</select>
<label for="mode" class="block font-semibold text-gray-700 mb-2">Mode:</label>
<select id="mode" class="w-full p-3 mb-4 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-teal-500">
<option value="ai-only">AI Only</option>
<option value="hybrid" selected>Hybrid (Recommended)</option>
<option value="keyword-only">Keyword Only (No API)</option>
</select>
<button onclick="initializeChat()"
class="w-full bg-blue-600 hover:bg-blue-700 text-white font-semibold py-3 px-6 rounded-lg transition-colors duration-200">
🚀 Initialize Chatbot
</button>
</div>
<div id="status" style="display: none;" class="bg-green-50 border border-green-500 rounded-lg p-4 mb-5">
<strong class="text-green-800">✅ Chatbot Initialized!</strong><br>
<span class="text-green-700">Mode: <span id="currentMode"></span> | Model: <span id="currentModel"></span></span>
</div>
<div id="chatContainer" style="display: none;" class="mt-8">
<h2 class="text-2xl font-bold mb-4 text-gray-800">Chat</h2>
<!-- Chatbot will be dynamically inserted here -->
</div>
<div id="instructions" class="mt-8 p-6 bg-gray-50 rounded-lg">
<h3 class="text-xl font-bold mb-4 text-gray-800">Testing Instructions:</h3>
<ol class="list-decimal list-inside space-y-3 text-gray-700 leading-relaxed">
<li>Enter your OpenRouter API key above</li>
<li>Select a model and mode</li>
<li>Click "Initialize Chatbot"</li>
<li>Try these test queries:
<ul class="list-disc list-inside ml-6 mt-2 space-y-1">
<li><strong>Keyword test:</strong> "hello" or "help"</li>
<li><strong>AI test:</strong> "What's 2+2?" or "Tell me a joke"</li>
<li><strong>Streaming test:</strong> Ask a longer question</li>
</ul>
</li>
<li>Watch for:
<ul class="list-disc list-inside ml-6 mt-2 space-y-1">
<li>Typing indicators</li>
<li>Streaming text appearing character by character</li>
<li>Stop button during AI responses</li>
<li>Different message styles (keyword vs AI)</li>
</ul>
</li>
</ol>
</div>
</div>
</div>
<script>
function initializeChat() {
const apiKey = document.getElementById('apiKey').value.trim();
const model = document.getElementById('model').value;
const mode = document.getElementById('mode').value;
if (mode !== 'keyword-only' && !apiKey) {
alert('Please enter an API key for AI modes!');
return;
}
// Show chat container and status first
document.getElementById('currentMode').textContent = mode;
document.getElementById('currentModel').textContent = mode === 'keyword-only' ? 'N/A' : model;
document.getElementById('status').style.display = 'block';
document.getElementById('chatContainer').style.display = 'block';
document.getElementById('setup').style.display = 'none';
// Remove existing chatbot container and recreate it
const chatContainer = document.getElementById('chatContainer');
const oldChatbot = chatContainer.querySelector('[data-swc-test]');
if (oldChatbot) {
oldChatbot.remove();
}
// Create new chatbot element
const newChatbot = document.createElement('div');
newChatbot.setAttribute('data-swc', '');
newChatbot.setAttribute('data-swc-theme-color', '#0D9488');
newChatbot.setAttribute('data-swc-bot-name', 'Test Bot');
newChatbot.setAttribute('data-swc-chat-display', 'modern');
newChatbot.setAttribute('data-swc-api-mode', mode);
if (mode !== 'keyword-only') {
newChatbot.setAttribute('data-swc-api-key', apiKey);
newChatbot.setAttribute('data-swc-api-model', model);
newChatbot.setAttribute('data-swc-api-streaming', 'true');
newChatbot.setAttribute('data-swc-system-prompt', 'You are a helpful test assistant. Be concise and friendly.');
}
// Add to container
chatContainer.appendChild(newChatbot);
// Initialize chatbot with a small delay to ensure DOM is ready
setTimeout(() => {
initializeChatbot();
console.log('%c✅ Chatbot Initialized', 'color: #0D9488; font-weight: bold;');
console.log('Mode:', mode);
console.log('Model:', mode === 'keyword-only' ? 'N/A' : model);
}, 100);
}
// Page load handler
window.addEventListener('DOMContentLoaded', () => {
console.log('%c🧪 OpenRouter Test Page Loaded', 'color: #0D9488; font-size: 16px; font-weight: bold;');
console.log('Version: 1.3.0');
console.log('Features: OpenRouter API Integration with Streaming');
});
</script>
</body>
</html>