senangwebs-chatbot
Version:
Lightweight JavaScript library with OpenRouter API integration for AI-powered conversations.
279 lines (265 loc) • 10.8 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>SenangWebs Chatbot - Examples</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 min-h-screen">
<main class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
<!-- Header -->
<div class="text-center mb-12">
<h1 class="text-5xl font-bold text-gray-900 mb-4">
SenangWebs Chatbot
</h1>
<p class="text-xl text-gray-600 mb-2">Comprehensive Examples & Demos</p>
</div>
<!-- Learning Path -->
<div
class="bg-gradient-to-r from-blue-500 to-purple-600 rounded-lg shadow-md p-8 text-white mb-8"
>
<h2 class="text-2xl font-bold mb-4">Recommended Learning Path</h2>
<div class="space-y-3">
<div class="flex items-start">
<div
class="bg-white text-blue-600 rounded-full w-8 h-8 flex items-center justify-center font-bold mr-3 flex-shrink-0"
>
1
</div>
<div>
<p class="font-semibold">Start with Basic Chatbot</p>
<p class="text-sm opacity-90">
Learn keyword matching and basic configuration
</p>
</div>
</div>
<div class="flex items-start">
<div
class="bg-white text-blue-600 rounded-full w-8 h-8 flex items-center justify-center font-bold mr-3 flex-shrink-0"
>
2
</div>
<div>
<p class="font-semibold">Try Chat History</p>
<p class="text-sm opacity-90">Understand session persistence</p>
</div>
</div>
<div class="flex items-start">
<div
class="bg-white text-blue-600 rounded-full w-8 h-8 flex items-center justify-center font-bold mr-3 flex-shrink-0"
>
3
</div>
<div>
<p class="font-semibold">Get OpenRouter API Key</p>
<p class="text-sm opacity-90">Sign up at openrouter.ai</p>
</div>
</div>
<div class="flex items-start">
<div
class="bg-white text-blue-600 rounded-full w-8 h-8 flex items-center justify-center font-bold mr-3 flex-shrink-0"
>
4
</div>
<div>
<p class="font-semibold">Test AI-Only Mode</p>
<p class="text-sm opacity-90">
Experience AI-powered conversations
</p>
</div>
</div>
<div class="flex items-start">
<div
class="bg-white text-blue-600 rounded-full w-8 h-8 flex items-center justify-center font-bold mr-3 flex-shrink-0"
>
5
</div>
<div>
<p class="font-semibold">Explore Hybrid Mode</p>
<p class="text-sm opacity-90">
Best of both worlds - keywords + AI
</p>
</div>
</div>
<div class="flex items-start">
<div
class="bg-white text-blue-600 rounded-full w-8 h-8 flex items-center justify-center font-bold mr-3 flex-shrink-0"
>
6
</div>
<div>
<p class="font-semibold">Setup Secure Proxy</p>
<p class="text-sm opacity-90">
Prepare for production deployment
</p>
</div>
</div>
</div>
</div>
<!-- Basic Examples -->
<div class="bg-white rounded-lg shadow-md p-8 mb-8">
<div class="flex items-center mb-4">
<h2 class="text-2xl font-bold">Basic Examples</h2>
</div>
<p class="text-gray-600 mb-4">
Start here if you're new to SenangWebs Chatbot
</p>
<div class="space-y-3">
<a
href="basic/01-simple-chatbot.html"
class="block p-4 border-l-4 border-blue-500 bg-blue-50 hover:bg-blue-100 transition"
>
<h3 class="font-semibold text-lg">
01. Simple Keyword-Based Chatbot
</h3>
<p class="text-sm text-gray-600">
Traditional FAQ chatbot - No API required
</p>
<span class="text-xs text-blue-600"
>Difficulty: Beginner • No API Key</span
>
</a>
</div>
</div>
<!-- API Integration -->
<div class="bg-white rounded-lg shadow-md p-8 mb-8">
<div class="flex items-center mb-4">
<h2 class="text-2xl font-bold">AI-Powered Chatbots</h2>
</div>
<p class="text-gray-600 mb-4">
OpenRouter API integration for AI-powered conversations
</p>
<div class="space-y-3">
<a
href="api-integration/01-ai-only-mode.html"
class="block p-4 border-l-4 border-purple-500 bg-purple-50 hover:bg-purple-100 transition"
>
<h3 class="font-semibold text-lg">01. AI-Only Mode</h3>
<p class="text-sm text-gray-600">
Pure AI responses with real-time streaming
</p>
<span class="text-xs text-purple-600"
>Difficulty: Intermediate • API Key Required</span
>
</a>
<a
href="api-integration/02-hybrid-mode.html"
class="block p-4 border-l-4 border-purple-500 bg-purple-50 hover:bg-purple-100 transition"
>
<h3 class="font-semibold text-lg">02. Hybrid Mode</h3>
<p class="text-sm text-gray-600">
Smart routing: Keywords for common queries, AI for everything else
</p>
<span class="text-xs text-purple-600"
>Difficulty: Intermediate • API Key Required</span
>
</a>
<a
href="api-integration/03-interactive-testing.html"
class="block p-4 border-l-4 border-purple-500 bg-purple-50 hover:bg-purple-100 transition"
>
<h3 class="font-semibold text-lg">03. Interactive Testing Page</h3>
<p class="text-sm text-gray-600">
Test different models and parameters in real-time
</p>
<span class="text-xs text-purple-600"
>Difficulty: Advanced • API Key Required</span
>
</a>
<a
href="api-integration/04-secure-proxy-setup.html"
class="block p-4 border-l-4 border-green-500 bg-green-50 hover:bg-green-100 transition"
>
<h3 class="font-semibold text-lg">04. Secure Proxy Setup 🔐</h3>
<p class="text-sm text-gray-600">
Production-ready security with server-side proxy
</p>
<span class="text-xs text-green-600"
>Difficulty: Advanced • For Production Use</span
>
</a>
</div>
</div>
<!-- Advanced Features -->
<div class="bg-white rounded-lg shadow-md p-8 mb-8">
<div class="flex items-center mb-4">
<h2 class="text-2xl font-bold">Advanced Features</h2>
</div>
<p class="text-gray-600 mb-4">
Explore advanced functionality and customization
</p>
<div class="space-y-3">
<a
href="advanced-features/01-chat-history.html"
class="block p-4 border-l-4 border-orange-500 bg-orange-50 hover:bg-orange-100 transition"
>
<h3 class="font-semibold text-lg">01. Chat History Management</h3>
<p class="text-sm text-gray-600">
Save, load, export, and import conversation history
</p>
<span class="text-xs text-orange-600"
>Difficulty: Intermediate • No API Key</span
>
</a>
<a
href="advanced-features/02-external-knowledge-base.html"
class="block p-4 border-l-4 border-orange-500 bg-orange-50 hover:bg-orange-100 transition"
>
<h3 class="font-semibold text-lg">02. External Knowledge Base</h3>
<p class="text-sm text-gray-600">
Load FAQ data from external JSON files
</p>
<span class="text-xs text-orange-600"
>Difficulty: Intermediate • No API Key</span
>
</a>
</div>
</div>
<!-- Proxy Servers -->
<div class="bg-white rounded-lg shadow-md p-8">
<div class="flex items-center mb-4">
<h2 class="text-2xl font-bold">Proxy Server Implementations</h2>
</div>
<p class="text-gray-600 mb-4">
Production-ready server-side proxies for API security
</p>
<div class="space-y-3">
<div class="block p-4 border-l-4 border-red-500 bg-red-50">
<h3 class="font-semibold text-lg">Node.js/Express Proxy</h3>
<p class="text-sm text-gray-600 mb-2">
Full-featured proxy with streaming support
</p>
<code class="text-xs bg-gray-100 px-2 py-1 rounded block"
>proxy-servers/proxy-nodejs.js</code
>
</div>
<div class="block p-4 border-l-4 border-red-500 bg-red-50">
<h3 class="font-semibold text-lg">PHP Proxy</h3>
<p class="text-sm text-gray-600 mb-2">
Simple proxy for shared hosting
</p>
<code class="text-xs bg-gray-100 px-2 py-1 rounded block"
>proxy-servers/proxy-php.php</code
>
</div>
<div class="block p-4 border-l-4 border-red-500 bg-red-50">
<h3 class="font-semibold text-lg">Cloudflare Workers</h3>
<p class="text-sm text-gray-600 mb-2">
Serverless edge computing solution
</p>
<code class="text-xs bg-gray-100 px-2 py-1 rounded block"
>proxy-servers/proxy-cloudflare-worker.js</code
>
</div>
</div>
<div class="mt-4 p-4 bg-yellow-50 border border-yellow-200 rounded">
<p class="text-sm text-yellow-800">
<strong>📖 Documentation:</strong> See
<code>proxy-servers/README.md</code> for complete setup instructions
</p>
</div>
</div>
</main>
</body>
</html>