Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Multi-Model AI Hub</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <!-- Include the official Hugging Face Inference Library --> | |
| <script type="module"> | |
| import { HfInference } from 'https://cdn.jsdelivr.net/npm/@huggingface/inference@2.8.1/+esm' | |
| const tokenInput = document.getElementById('hfToken'); | |
| const modelSelect = document.getElementById('modelSelect'); | |
| const promptInput = document.getElementById('promptInput'); | |
| const runButton = document.getElementById('runBtn'); | |
| const outputDiv = document.getElementById('outputWindow'); | |
| runButton.addEventListener('click', async () => { | |
| const token = tokenInput.value.trim(); | |
| const model = modelSelect.value; | |
| const prompt = promptInput.value.trim(); | |
| if (!token || !prompt) { | |
| alert('Please enter your token and a prompt.'); | |
| return; | |
| } | |
| runButton.disabled = true; | |
| runButton.innerText = "Thinking..."; | |
| outputDiv.innerText = "Querying Hugging Face Serverless API..."; | |
| try { | |
| // Initialize the official client helper | |
| const hf = new HfInference(token); | |
| // Call the text generation API via the official SDK wrapper | |
| const response = await hf.textGeneration({ | |
| model: model, | |
| inputs: prompt, | |
| parameters: { | |
| max_new_tokens: 256, | |
| return_full_text: false | |
| } | |
| }); | |
| if (response && response.generated_text) { | |
| outputDiv.innerText = response.generated_text; | |
| } else { | |
| outputDiv.innerText = JSON.stringify(response, null, 2); | |
| } | |
| } catch (error) { | |
| outputDiv.innerText = `API Error: ${error.message}\n\nTip: If it says 'Model is loading', wait 20 seconds and press Send again while the Hugging Face servers wake up the weights!`; | |
| } finally { | |
| runButton.disabled = false; | |
| runButton.innerText = "Send Request"; | |
| } | |
| }); | |
| </script> | |
| </head> | |
| <body class="bg-gray-900 text-gray-100 min-h-screen flex flex-col items-center justify-center p-4"> | |
| <div class="w-full max-w-2xl bg-gray-800 p-6 rounded-xl shadow-md border border-gray-700"> | |
| <h1 class="text-2xl font-bold mb-4 text-center text-blue-400">Multi-Model AI Hub</h1> | |
| <!-- Key Input --> | |
| <div class="mb-4"> | |
| <label class="block text-sm font-semibold mb-1 text-gray-400">Your Hugging Face Token:</label> | |
| <input type="password" id="hfToken" placeholder="Paste your hf_... key here" | |
| class="w-full p-2.5 rounded bg-gray-700 border border-gray-600 text-white focus:outline-none focus:border-blue-500"> | |
| </div> | |
| <!-- Model Dropdown Menu --> | |
| <div class="mb-4"> | |
| <label class="block text-sm font-semibold mb-1 text-gray-400">Choose Model:</label> | |
| <select id="modelSelect" class="w-full p-2.5 rounded bg-gray-700 border border-gray-600 text-white focus:outline-none focus:border-blue-500"> | |
| <option value="google/gemma-4-12b-unified">Gemma 4 (12B Unified Text/Vision/Audio)</option> | |
| <option value="google/gemma-4-31b">Gemma 4 (31B Frontier Dense)</option> | |
| <option value="deepseek-ai/DeepSeek-R1-Distill-Qwen-8B">DeepSeek R1 (Distill Qwen 8B)</option> | |
| </select> | |
| </div> | |
| <!-- Prompt Textarea --> | |
| <div class="mb-4"> | |
| <label class="block text-sm font-semibold mb-1 text-gray-400">Prompt:</label> | |
| <textarea id="promptInput" rows="4" placeholder="Type your prompt here..." | |
| class="w-full p-2.5 rounded bg-gray-700 border border-gray-600 text-white focus:outline-none focus:border-blue-500"></textarea> | |
| </div> | |
| <!-- Execution Button --> | |
| <button id="runBtn" class="w-full bg-blue-600 hover:bg-blue-700 font-bold py-2.5 px-4 rounded transition"> | |
| Send Request | |
| </button> | |
| <!-- Response Window --> | |
| <div class="mt-6"> | |
| <label class="block text-sm font-semibold mb-1 text-gray-400">Model Output:</label> | |
| <div id="outputWindow" class="w-full p-3 rounded bg-gray-950 border border-gray-800 min-h-[100px] whitespace-pre-wrap text-gray-300"> | |
| Waiting for input... | |
| </div> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |