| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Universal LLM Playground</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> |
| .gradient-bg { |
| background: linear-gradient(135deg, #6e8efb, #a777e3); |
| } |
| .card-hover:hover { |
| transform: translateY(-5px); |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); |
| } |
| .provider-card { |
| transition: all 0.3s ease; |
| border: 2px solid transparent; |
| } |
| .provider-card:hover { |
| border-color: #6e8efb; |
| } |
| .provider-card.active { |
| border-color: #6e8efb; |
| background-color: #f0f4ff; |
| } |
| .tab-content { |
| display: none; |
| } |
| .tab-content.active { |
| display: block; |
| animation: fadeIn 0.5s ease-in-out; |
| } |
| @keyframes fadeIn { |
| from { opacity: 0; } |
| to { opacity: 1; } |
| } |
| .code-block { |
| font-family: 'Courier New', Courier, monospace; |
| background-color: #2d3748; |
| color: #f7fafc; |
| padding: 1rem; |
| border-radius: 0.375rem; |
| overflow-x: auto; |
| } |
| .model-badge { |
| font-size: 0.75rem; |
| padding: 0.25rem 0.5rem; |
| border-radius: 9999px; |
| background-color: #e9d8fd; |
| color: #6b46c1; |
| } |
| .response-area { |
| min-height: 200px; |
| background-color: #f8fafc; |
| border: 1px solid #e2e8f0; |
| border-radius: 0.5rem; |
| } |
| .token-counter { |
| position: absolute; |
| right: 1rem; |
| bottom: 1rem; |
| font-size: 0.75rem; |
| color: #718096; |
| } |
| </style> |
| </head> |
| <body class="bg-gray-50"> |
| |
| <header class="gradient-bg text-white py-16"> |
| <div class="container mx-auto px-6 text-center"> |
| <h1 class="text-4xl md:text-5xl font-bold mb-6">Universal LLM Playground</h1> |
| <p class="text-xl md:text-2xl mb-8 max-w-3xl mx-auto">Connect to any LLM provider with a single interface</p> |
| <div class="flex justify-center space-x-4"> |
| <a href="#setup" class="bg-white text-purple-600 px-6 py-3 rounded-full font-semibold hover:bg-purple-50 transition">Get Started</a> |
| <a href="#playground" class="border-2 border-white text-white px-6 py-3 rounded-full font-semibold hover:bg-white hover:text-purple-600 transition">Try It Now</a> |
| </div> |
| </div> |
| </header> |
|
|
| |
| <section id="setup" class="py-16 bg-white"> |
| <div class="container mx-auto px-6"> |
| <h2 class="text-3xl font-bold text-center text-gray-800 mb-12">Easy Setup for Any Provider</h2> |
| |
| <div class="max-w-6xl mx-auto grid grid-cols-1 md:grid-cols-2 gap-8"> |
| |
| <div class="bg-gray-50 p-8 rounded-xl border border-gray-200 card-hover transition"> |
| <div class="flex items-center mb-6"> |
| <div class="bg-purple-100 p-3 rounded-full mr-4"> |
| <i class="fas fa-laptop-code text-purple-600 text-2xl"></i> |
| </div> |
| <h3 class="text-2xl font-semibold text-gray-800">Local Models</h3> |
| </div> |
| <p class="text-gray-600 mb-6">Run models locally with Ollama, LM Studio, or directly with transformers.</p> |
| |
| <div class="space-y-4"> |
| <div> |
| <h4 class="font-medium text-gray-700 mb-2">1. Install Requirements</h4> |
| <div class="code-block mb-4"> |
| <p># For Ollama</p> |
| <p>curl -fsSL https://ollama.com/install.sh | sh</p> |
| <p>ollama pull mistral</p> |
| <p><br></p> |
| <p># For Python transformers</p> |
| <p>pip install torch transformers sentencepiece</p> |
| </div> |
| </div> |
| |
| <div> |
| <h4 class="font-medium text-gray-700 mb-2">2. Configuration</h4> |
| <div class="code-block"> |
| <p>local_model = {</p> |
| <p> "type": "ollama", // or "transformers"</p> |
| <p> "base_url": "http://localhost:11434",</p> |
| <p> "model": "mistral",</p> |
| <p> "temperature": 0.7</p> |
| <p>}</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="bg-gray-50 p-8 rounded-xl border border-gray-200 card-hover transition"> |
| <div class="flex items-center mb-6"> |
| <div class="bg-purple-100 p-3 rounded-full mr-4"> |
| <i class="fas fa-cloud text-purple-600 text-2xl"></i> |
| </div> |
| <h3 class="text-2xl font-semibold text-gray-800">Cloud Providers</h3> |
| </div> |
| <p class="text-gray-600 mb-6">Connect to OpenAI, Anthropic, Groq, or any API-compatible service.</p> |
| |
| <div class="space-y-4"> |
| <div> |
| <h4 class="font-medium text-gray-700 mb-2">1. Get API Keys</h4> |
| <p class="text-gray-600 mb-2">Create accounts and get API keys from:</p> |
| <ul class="list-disc pl-5 text-gray-600 space-y-1"> |
| <li><a href="https://platform.openai.com" class="text-purple-600 hover:underline">OpenAI</a></li> |
| <li><a href="https://console.anthropic.com" class="text-purple-600 hover:underline">Anthropic</a></li> |
| <li><a href="https://console.groq.com" class="text-purple-600 hover:underline">Groq</a></li> |
| </ul> |
| </div> |
| |
| <div> |
| <h4 class="font-medium text-gray-700 mb-2">2. Configuration</h4> |
| <div class="code-block"> |
| <p>openai_config = {</p> |
| <p> "type": "openai",</p> |
| <p> "api_key": "sk-your-key-here",</p> |
| <p> "model": "gpt-4-turbo",</p> |
| <p> "temperature": 0.7</p> |
| <p>}</p> |
| <p><br></p> |
| <p>anthropic_config = {</p> |
| <p> "type": "anthropic",</p> |
| <p> "api_key": "sk-your-key-here",</p> |
| <p> "model": "claude-3-opus-20240229"</p> |
| <p>}</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="bg-gray-50 p-8 rounded-xl border border-gray-200 card-hover transition"> |
| <div class="flex items-center mb-6"> |
| <div class="bg-purple-100 p-3 rounded-full mr-4"> |
| <i class="fas fa-robot text-purple-600 text-2xl"></i> |
| </div> |
| <h3 class="text-2xl font-semibold text-gray-800">Hugging Face</h3> |
| </div> |
| <p class="text-gray-600 mb-6">Use free Inference API or Pro endpoints for private models.</p> |
| |
| <div class="space-y-4"> |
| <div> |
| <h4 class="font-medium text-gray-700 mb-2">1. Get Access</h4> |
| <ul class="list-disc pl-5 text-gray-600 space-y-1"> |
| <li>Free tier: <a href="https://huggingface.co" class="text-purple-600 hover:underline">Hugging Face account</a></li> |
| <li>Pro tier: <a href="https://huggingface.co/pro" class="text-purple-600 hover:underline">Hugging Face Pro</a></li> |
| </ul> |
| </div> |
| |
| <div> |
| <h4 class="font-medium text-gray-700 mb-2">2. Configuration</h4> |
| <div class="code-block"> |
| <p>hf_config = {</p> |
| <p> "type": "huggingface",</p> |
| <p> "api_key": "hf_your_key_here",</p> |
| <p> "model": "mistralai/Mistral-7B-Instruct-v0.1",</p> |
| <p> "endpoint": "https://api-inference.huggingface.co/models/",</p> |
| <p> "pro_endpoint": false // Set true for Pro</p> |
| <p>}</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="bg-gray-50 p-8 rounded-xl border border-gray-200 card-hover transition"> |
| <div class="flex items-center mb-6"> |
| <div class="bg-purple-100 p-3 rounded-full mr-4"> |
| <i class="fas fa-image text-purple-600 text-2xl"></i> |
| </div> |
| <h3 class="text-2xl font-semibold text-gray-800">Image Generation</h3> |
| </div> |
| <p class="text-gray-600 mb-6">Connect to Stable Diffusion, DALL-E, or other image generation models.</p> |
| |
| <div class="space-y-4"> |
| <div> |
| <h4 class="font-medium text-gray-700 mb-2">1. Setup Options</h4> |
| <ul class="list-disc pl-5 text-gray-600 space-y-1"> |
| <li>Local: Stable Diffusion with diffusers</li> |
| <li>Cloud: DALL-E, Midjourney API, etc.</li> |
| </ul> |
| </div> |
| |
| <div> |
| <h4 class="font-medium text-gray-700 mb-2">2. Configuration</h4> |
| <div class="code-block"> |
| <p>image_config = {</p> |
| <p> "type": "dalle", // or "stable_diffusion"</p> |
| <p> "api_key": "sk-your-key-here", // For DALL-E</p> |
| <p> "model": "dall-e-3", // or "stabilityai/stable-diffusion-xl-base-1.0"</p> |
| <p> "size": "1024x1024"</p> |
| <p>}</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="max-w-4xl mx-auto mt-16 bg-purple-50 rounded-xl p-8 border border-purple-200"> |
| <h3 class="text-2xl font-semibold text-purple-800 mb-4">🚀 Quick Start</h3> |
| <p class="text-gray-700 mb-6">Copy this starter code to begin using any provider:</p> |
| |
| <div class="code-block mb-6"> |
| <p># Install required packages</p> |
| <p>pip install requests python-dotenv</p> |
| <p><br></p> |
| <p># In your .env file:</p> |
| <p>OPENAI_API_KEY=your_key_here</p> |
| <p>ANTHROPIC_API_KEY=your_key_here</p> |
| <p>HF_API_KEY=your_key_here</p> |
| <p><br></p> |
| <p># Basic usage example</p> |
| <p>from llm_connector import LLMConnector</p> |
| <p><br></p> |
| <p>connector = LLMConnector(provider="openai")</p> |
| <p>response = connector.generate("Explain quantum computing")</p> |
| <p>print(response)</p> |
| </div> |
| |
| <a href="#playground" class="bg-purple-600 text-white px-6 py-3 rounded-full font-semibold hover:bg-purple-700 transition inline-block">Try in Playground</a> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="playground" class="py-16 bg-gray-50"> |
| <div class="container mx-auto px-6"> |
| <h2 class="text-3xl font-bold text-center text-gray-800 mb-12">Interactive Playground</h2> |
| |
| <div class="max-w-6xl mx-auto bg-white rounded-xl shadow-md overflow-hidden"> |
| <div class="p-8"> |
| |
| <div class="mb-8"> |
| <h3 class="text-xl font-semibold text-gray-800 mb-4">Select LLM Provider</h3> |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-4"> |
| <div class="provider-card p-4 rounded-lg cursor-pointer text-center active" onclick="selectProvider('openai')"> |
| <div class="bg-blue-50 p-4 rounded-full inline-block mb-2"> |
| <i class="fab fa-openai text-blue-500 text-2xl"></i> |
| </div> |
| <h4 class="font-medium">OpenAI</h4> |
| <span class="model-badge inline-block mt-1">GPT-4</span> |
| </div> |
| <div class="provider-card p-4 rounded-lg cursor-pointer text-center" onclick="selectProvider('anthropic')"> |
| <div class="bg-orange-50 p-4 rounded-full inline-block mb-2"> |
| <i class="fas fa-robot text-orange-500 text-2xl"></i> |
| </div> |
| <h4 class="font-medium">Anthropic</h4> |
| <span class="model-badge inline-block mt-1">Claude 3</span> |
| </div> |
| <div class="provider-card p-4 rounded-lg cursor-pointer text-center" onclick="selectProvider('groq')"> |
| <div class="bg-green-50 p-4 rounded-full inline-block mb-2"> |
| <i class="fas fa-bolt text-green-500 text-2xl"></i> |
| </div> |
| <h4 class="font-medium">Groq</h4> |
| <span class="model-badge inline-block mt-1">Mixtral</span> |
| </div> |
| <div class="provider-card p-4 rounded-lg cursor-pointer text-center" onclick="selectProvider('huggingface')"> |
| <div class="bg-yellow-50 p-4 rounded-full inline-block mb-2"> |
| <i class="fas fa-h-square text-yellow-500 text-2xl"></i> |
| </div> |
| <h4 class="font-medium">Hugging Face</h4> |
| <span class="model-badge inline-block mt-1">Mistral</span> |
| </div> |
| <div class="provider-card p-4 rounded-lg cursor-pointer text-center" onclick="selectProvider('ollama')"> |
| <div class="bg-purple-50 p-4 rounded-full inline-block mb-2"> |
| <i class="fas fa-laptop-code text-purple-500 text-2xl"></i> |
| </div> |
| <h4 class="font-medium">Ollama</h4> |
| <span class="model-badge inline-block mt-1">Local</span> |
| </div> |
| <div class="provider-card p-4 rounded-lg cursor-pointer text-center" onclick="selectProvider('transformers')"> |
| <div class="bg-red-50 p-4 rounded-full inline-block mb-2"> |
| <i class="fas fa-code text-red-500 text-2xl"></i> |
| </div> |
| <h4 class="font-medium">Transformers</h4> |
| <span class="model-badge inline-block mt-1">PyTorch</span> |
| </div> |
| <div class="provider-card p-4 rounded-lg cursor-pointer text-center" onclick="selectProvider('dalle')"> |
| <div class="bg-pink-50 p-4 rounded-full inline-block mb-2"> |
| <i class="fas fa-image text-pink-500 text-2xl"></i> |
| </div> |
| <h4 class="font-medium">DALL·E</h4> |
| <span class="model-badge inline-block mt-1">Images</span> |
| </div> |
| <div class="provider-card p-4 rounded-lg cursor-pointer text-center" onclick="selectProvider('sd')"> |
| <div class="bg-indigo-50 p-4 rounded-full inline-block mb-2"> |
| <i class="fas fa-paint-brush text-indigo-500 text-2xl"></i> |
| </div> |
| <h4 class="font-medium">Stable Diffusion</h4> |
| <span class="model-badge inline-block mt-1">Local</span> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="mb-8"> |
| <h3 class="text-xl font-semibold text-gray-800 mb-4">Configuration</h3> |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> |
| <div> |
| <label class="block text-gray-700 mb-2">Model</label> |
| <select class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500"> |
| <option>gpt-4-turbo</option> |
| <option>gpt-4</option> |
| <option>gpt-3.5-turbo</option> |
| </select> |
| </div> |
| <div> |
| <label class="block text-gray-700 mb-2">API Key</label> |
| <input type="password" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500" placeholder="sk-..."> |
| </div> |
| <div> |
| <label class="block text-gray-700 mb-2">Temperature</label> |
| <input type="range" min="0" max="1" step="0.1" value="0.7" class="w-full"> |
| <div class="flex justify-between text-sm text-gray-500 mt-1"> |
| <span>Precise</span> |
| <span>Balanced</span> |
| <span>Creative</span> |
| </div> |
| </div> |
| <div> |
| <label class="block text-gray-700 mb-2">Max Tokens</label> |
| <input type="number" value="1000" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500"> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="mb-8"> |
| <h3 class="text-xl font-semibold text-gray-800 mb-4">Prompt</h3> |
| <div class="relative"> |
| <textarea class="w-full p-4 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500 h-40" placeholder="Enter your prompt here..."></textarea> |
| <div class="token-counter">0 tokens</div> |
| </div> |
| <div class="flex space-x-3 mt-3"> |
| <button class="bg-gray-100 text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-200"> |
| <i class="fas fa-magic mr-2"></i> Enhance |
| </button> |
| <button class="bg-gray-100 text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-200"> |
| <i class="fas fa-history mr-2"></i> History |
| </button> |
| <button class="bg-gray-100 text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-200"> |
| <i class="fas fa-save mr-2"></i> Save |
| </button> |
| </div> |
| </div> |
| |
| |
| <div> |
| <div class="flex justify-between items-center mb-4"> |
| <h3 class="text-xl font-semibold text-gray-800">Response</h3> |
| <div class="flex space-x-2"> |
| <button class="bg-gray-100 text-gray-700 px-3 py-1 rounded-lg text-sm hover:bg-gray-200"> |
| <i class="fas fa-copy mr-1"></i> Copy |
| </button> |
| <button class="bg-gray-100 text-gray-700 px-3 py-1 rounded-lg text-sm hover:bg-gray-200"> |
| <i class="fas fa-download mr-1"></i> Save |
| </button> |
| </div> |
| </div> |
| <div class="response-area p-4"> |
| <p class="text-gray-500 italic">Response will appear here...</p> |
| </div> |
| <div class="flex justify-between items-center mt-3 text-sm text-gray-500"> |
| <div> |
| <span>Tokens: 0</span> |
| <span class="mx-2">|</span> |
| <span>Time: 0s</span> |
| </div> |
| <div> |
| <span>Model: gpt-4-turbo</span> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="flex justify-center space-x-4 mt-8"> |
| <button class="gradient-bg text-white px-8 py-3 rounded-full font-semibold hover:opacity-90 transition flex items-center"> |
| <i class="fas fa-paper-plane mr-2"></i> Generate |
| </button> |
| <button class="border-2 border-purple-600 text-purple-600 px-8 py-3 rounded-full font-semibold hover:bg-purple-50 transition flex items-center"> |
| <i class="fas fa-redo mr-2"></i> Regenerate |
| </button> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="max-w-4xl mx-auto mt-16"> |
| <h3 class="text-2xl font-semibold text-gray-800 mb-6">API Usage Examples</h3> |
| |
| <div class="mb-8"> |
| <div class="flex items-center mb-4"> |
| <div class="bg-blue-100 p-2 rounded-full mr-3"> |
| <i class="fas fa-code text-blue-500"></i> |
| </div> |
| <h4 class="text-lg font-medium text-gray-700">Basic Text Generation</h4> |
| </div> |
| <div class="code-block"> |
| <p>import LLMConnector</p> |
| <p><br></p> |
| <p># Initialize with your preferred provider</p> |
| <p>llm = LLMConnector(provider="openai", api_key="your_key")</p> |
| <p><br></p> |
| <p># Simple generation</p> |
| <p>response = llm.generate(</p> |
| <p> prompt="Explain quantum computing",</p> |
| <p> model="gpt-4-turbo",</p> |
| <p> temperature=0.7,</p> |
| <p> max_tokens=1000</p> |
| <p>)</p> |
| <p><br></p> |
| <p>print(response)</p> |
| </div> |
| </div> |
| |
| <div class="mb-8"> |
| <div class="flex items-center mb-4"> |
| <div class="bg-purple-100 p-2 rounded-full mr-3"> |
| <i class="fas fa-image text-purple-500"></i> |
| </div> |
| <h4 class="text-lg font-medium text-gray-700">Image Generation</h4> |
| </div> |
| <div class="code-block"> |
| <p>import LLMConnector</p> |
| <p><br></p> |
| <p># Initialize image generator</p> |
| <p>image_gen = LLMConnector(provider="dalle", api_key="your_key")</p> |
| <p><br></p> |
| <p># Generate image</p> |
| <p>image_url = image_gen.generate_image(</p> |
| <p> prompt="A futuristic cityscape at sunset",</p> |
| <p> model="dall-e-3",</p> |
| <p> size="1024x1024",</p> |
| <p> quality="hd"</p> |
| <p>)</p> |
| <p><br></p> |
| <p>print(f"Image generated at: {image_url}")</p> |
| </div> |
| </div> |
| |
| <div class="mb-8"> |
| <div class="flex items-center mb-4"> |
| <div class="bg-green-100 p-2 rounded-full mr-3"> |
| <i class="fas fa-exchange-alt text-green-500"></i> |
| </div> |
| <h4 class="text-lg font-medium text-gray-700">Chat Completion</h4> |
| </div> |
| <div class="code-block"> |
| <p>import LLMConnector</p> |
| <p><br></p> |
| <p># Initialize chat</p> |
| <p>chat = LLMConnector(provider="anthropic", api_key="your_key")</p> |
| <p><br></p> |
| <p># Start conversation</p> |
| <p>messages = [</p> |
| <p> {"role": "system", "content": "You are a helpful assistant."},</p> |
| <p> {"role": "user", "content": "What's the weather today?"}</p> |
| <p>]</p> |
| <p><br></p> |
| <p># Get response</p> |
| <p>response = chat.chat_complete(</p> |
| <p> messages=messages,</p> |
| <p> model="claude-3-opus-20240229",</p> |
| <p> temperature=0.5</p> |
| <p>)</p> |
| <p><br></p> |
| <p>print(response)</p> |
| </div> |
| </div> |
| |
| <div> |
| <div class="flex items-center mb-4"> |
| <div class="bg-yellow-100 p-2 rounded-full mr-3"> |
| <i class="fas fa-server text-yellow-500"></i> |
| </div> |
| <h4 class="text-lg font-medium text-gray-700">Local Model Setup</h4> |
| </div> |
| <div class="code-block"> |
| <p>import LLMConnector</p> |
| <p><br></p> |
| <p># Initialize local Ollama model</p> |
| <p>local_llm = LLMConnector(</p> |
| <p> provider="ollama",</p> |
| <p> base_url="http://localhost:11434",</p> |
| <p> model="mistral"</p> |
| <p>)</p> |
| <p><br></p> |
| <p># Generate text</p> |
| <p>response = local_llm.generate(</p> |
| <p> prompt="Explain the theory of relativity",</p> |
| <p> temperature=0.7</p> |
| <p>)</p> |
| <p><br></p> |
| <p>print(response)</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-16 bg-white"> |
| <div class="container mx-auto px-6"> |
| <h2 class="text-3xl font-bold text-center text-gray-800 mb-12">Key Features</h2> |
| |
| <div class="max-w-6xl mx-auto grid grid-cols-1 md:grid-cols-3 gap-8"> |
| <div class="bg-gray-50 p-8 rounded-xl border border-gray-200 card-hover transition"> |
| <div class="bg-blue-100 p-4 rounded-full inline-block mb-4"> |
| <i class="fas fa-exchange-alt text-blue-500 text-2xl"></i> |
| </div> |
| <h3 class="text-xl font-semibold text-gray-800 mb-3">Provider Agnostic</h3> |
| <p class="text-gray-600">Switch between different LLM providers with a single line of code. No need to rewrite your application when changing models.</p> |
| </div> |
| |
| <div class="bg-gray-50 p-8 rounded-xl border border-gray-200 card-hover transition"> |
| <div class="bg-purple-100 p-4 rounded-full inline-block mb-4"> |
| <i class="fas fa-sliders-h text-purple-500 text-2xl"></i> |
| </div> |
| <h3 class="text-xl font-semibold text-gray-800 mb-3">Unified Interface</h3> |
| <p class="text-gray-600">Consistent API for text generation, chat completion, and image generation across all providers.</p> |
| </div> |
| |
| <div class="bg-gray-50 p-8 rounded-xl border border-gray-200 card-hover transition"> |
| <div class="bg-green-100 p-4 rounded-full inline-block mb-4"> |
| <i class="fas fa-lock text-green-500 text-2xl"></i> |
| </div> |
| <h3 class="text-xl font-semibold text-gray-800 mb-3">Secure Configuration</h3> |
| <p class="text-gray-600">Environment variable support for API keys and sensitive configuration. Never hardcode credentials.</p> |
| </div> |
| |
| <div class="bg-gray-50 p-8 rounded-xl border border-gray-200 card-hover transition"> |
| <div class="bg-yellow-100 p-4 rounded-full inline-block mb-4"> |
| <i class="fas fa-tachometer-alt text-yellow-500 text-2xl"></i> |
| </div> |
| <h3 class="text-xl font-semibold text-gray-800 mb-3">Performance Metrics</h3> |
| <p class="text-gray-600">Track response times, token usage, and costs across different providers and models.</p> |
| </div> |
| |
| <div class="bg-gray-50 p-8 rounded-xl border border-gray-200 card-hover transition"> |
| <div class="bg-red-100 p-4 rounded-full inline-block mb-4"> |
| <i class="fas fa-code-branch text-red-500 text-2xl"></i> |
| </div> |
| <h3 class="text-xl font-semibold text-gray-800 mb-3">Fallback Handling</h3> |
| <p class="text-gray-600">Automatic fallback to alternative models when primary model is unavailable or rate-limited.</p> |
| </div> |
| |
| <div class="bg-gray-50 p-8 rounded-xl border border-gray-200 card-hover transition"> |
| <div class="bg-indigo-100 p-4 rounded-full inline-block mb-4"> |
| <i class="fas fa-plug text-indigo-500 text-2xl"></i> |
| </div> |
| <h3 class="text-xl font-semibold text-gray-800 mb-3">Extensible Design</h3> |
| <p class="text-gray-600">Easy to add new providers or customize existing ones with plugin architecture.</p> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <footer class="gradient-bg text-white py-12"> |
| <div class="container mx-auto px-6"> |
| <div class="max-w-4xl mx-auto text-center"> |
| <h2 class="text-2xl font-bold mb-6">Start Building with Any LLM Today</h2> |
| <p class="text-lg mb-8">Universal interface for all your AI model needs. Switch providers without rewriting your application.</p> |
| <div class="flex justify-center space-x-4"> |
| <a href="#setup" class="bg-white text-purple-600 px-6 py-3 rounded-full font-semibold hover:bg-purple-50 transition">Get Started</a> |
| <a href="#playground" class="border-2 border-white text-white px-6 py-3 rounded-full font-semibold hover:bg-white hover:text-purple-600 transition">Try Playground</a> |
| </div> |
| <p class="mt-10 text-purple-200">© 2023 Universal LLM Playground. MIT License.</p> |
| </div> |
| </div> |
| </footer> |
|
|
| <script> |
| |
| function selectProvider(provider) { |
| |
| document.querySelectorAll('.provider-card').forEach(card => { |
| card.classList.remove('active'); |
| }); |
| |
| |
| event.currentTarget.classList.add('active'); |
| |
| |
| const modelSelect = document.querySelector('select'); |
| let options = []; |
| |
| switch(provider) { |
| case 'openai': |
| options = ['gpt-4-turbo', 'gpt-4', 'gpt-3.5-turbo']; |
| break; |
| case 'anthropic': |
| options = ['claude-3-opus-20240229', 'claude-3-sonnet-20240229', 'claude-2.1']; |
| break; |
| case 'groq': |
| options = ['mixtral-8x7b-32768', 'llama2-70b-4096']; |
| break; |
| case 'huggingface': |
| options = ['mistralai/Mistral-7B-Instruct-v0.1', 'meta-llama/Llama-2-7b-chat-hf']; |
| break; |
| case 'ollama': |
| options = ['mistral', 'llama2', 'codellama']; |
| break; |
| case 'transformers': |
| options = ['local/transformers']; |
| break; |
| case 'dalle': |
| options = ['dall-e-3', 'dall-e-2']; |
| break; |
| case 'sd': |
| options = ['stabilityai/stable-diffusion-xl-base-1.0']; |
| break; |
| } |
| |
| |
| modelSelect.innerHTML = ''; |
| options.forEach(opt => { |
| const option = document.createElement('option'); |
| option.value = opt; |
| option.textContent = opt; |
| modelSelect.appendChild(option); |
| }); |
| |
| |
| const apiKeyInput = document.querySelector('input[type="password"]'); |
| if (provider === 'openai') { |
| apiKeyInput.placeholder = 'sk-...'; |
| } else if (provider === 'anthropic') { |
| apiKeyInput.placeholder = 'sk-ant-...'; |
| } else if (provider === 'huggingface') { |
| apiKeyInput.placeholder = 'hf_...'; |
| } else { |
| apiKeyInput.placeholder = 'API key (if required)'; |
| } |
| } |
| |
| |
| const promptTextarea = document.querySelector('textarea'); |
| const tokenCounter = document.querySelector('.token-counter'); |
| |
| promptTextarea.addEventListener('input', () => { |
| |
| const tokenCount = Math.ceil(promptTextarea.value.length / 4); |
| tokenCounter.textContent = `${tokenCount} tokens`; |
| }); |
| |
| |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { |
| anchor.addEventListener('click', function (e) { |
| e.preventDefault(); |
| document.querySelector(this.getAttribute('href')).scrollIntoView({ |
| behavior: 'smooth' |
| }); |
| }); |
| }); |
| </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=Simultaneous-Orthoganlity-In-Time/new-deep-site" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
