Spaces:
Paused
Paused
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"/> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"/> | |
| <title>Hermes-HF Environment Builder</title> | |
| <style> | |
| *{margin:0;padding:0;box-sizing:border-box} | |
| body{background:#0d0e12;color:#e2e4e9;font-family:'Inter',-apple-system,sans-serif;min-height:100vh;display:flex;align-items:center;justify-content:center} | |
| .card{background:#14151b;border-radius:16px;border:1px solid #1e1f26;max-width:560px;width:100%;margin:24px;padding:32px} | |
| h1{font-size:20px;font-weight:600;margin-bottom:4px} | |
| h1 span{color:#6366f1} | |
| .sub{font-size:13px;color:#7a7d89;margin-bottom:24px} | |
| label{display:block;font-size:13px;color:#7a7d89;margin-bottom:6px;margin-top:16px} | |
| label:first-of-type{margin-top:0} | |
| input,select{width:100%;padding:10px 12px;background:#0d0e12;border:1px solid #1e1f26;border-radius:8px;color:#e2e4e9;font-size:14px;outline:none;transition:.15s} | |
| input:focus,select:focus{border-color:#6366f1} | |
| input::placeholder{color:#4a4d57} | |
| .row{display:grid;grid-template-columns:1fr 1fr;gap:12px} | |
| .btn{padding:10px 20px;border:none;border-radius:8px;font-size:14px;font-weight:500;cursor:pointer;transition:.15s;margin-top:20px} | |
| .btn-primary{background:#6366f1;color:#fff} | |
| .btn-primary:hover{background:#5558e6} | |
| .btn-secondary{background:#1e1f26;color:#e2e4e9;margin-left:8px} | |
| .btn-secondary:hover{background:#2a2b33} | |
| .output{margin-top:20px;display:none} | |
| .output.show{display:block} | |
| .output h3{font-size:13px;color:#7a7d89;margin-bottom:8px} | |
| .code-block{background:#0d0e12;border:1px solid #1e1f26;border-radius:8px;padding:14px;font-family:'JetBrains Mono','Fira Code',monospace;font-size:12px;white-space:pre-wrap;word-break:break-all;color:#a5b4fc;max-height:300px;overflow-y:auto} | |
| .copy-btn{background:none;border:1px solid #1e1f26;color:#7a7d89;padding:6px 12px;border-radius:6px;cursor:pointer;font-size:12px;margin-top:8px;transition:.15s} | |
| .copy-btn:hover{background:#1e1f26;color:#e2e4e9} | |
| .badge{display:inline-block;padding:2px 8px;border-radius:99px;font-size:11px;font-weight:500;margin-left:6px} | |
| .badge-green{background:#064e3b;color:#34d399} | |
| .badge-yellow{background:#713f12;color:#fbbf24} | |
| @media(max-width:500px){.card{margin:12px;padding:20px}.row{grid-template-columns:1fr}} | |
| </style> | |
| </head> | |
| <body> | |
| <div class="card"> | |
| <h1><span>◆</span> Hermes-HF</h1> | |
| <p class="sub">Generate your environment variables for Hugging Face Spaces.</p> | |
| <label for="provider">Provider</label> | |
| <select id="provider"> | |
| <option value="">Select a provider...</option> | |
| <option value="openrouter">OpenRouter</option> | |
| <option value="huggingface">HuggingFace Inference</option> | |
| <option value="anthropic">Anthropic (Claude)</option> | |
| <option value="openai">OpenAI</option> | |
| <option value="google">Google (Gemini)</option> | |
| <option value="deepseek">DeepSeek</option> | |
| <option value="xai">xAI (Grok)</option> | |
| <option value="custom">Custom OpenAI-compatible</option> | |
| </select> | |
| <div class="row"> | |
| <div> | |
| <label for="model">Model</label> | |
| <input id="model" placeholder="e.g. claude-sonnet-20241022"/> | |
| </div> | |
| <div> | |
| <label for="apikey">API Key</label> | |
| <input id="apikey" type="password" placeholder="sk-..."/> | |
| </div> | |
| </div> | |
| <label for="gateway_token">GATEWAY_TOKEN</label> | |
| <input id="gateway_token" placeholder="Auto-generated if empty"/> | |
| <label for="telegram_bot_token">TELEGRAM_BOT_TOKEN (optional)</label> | |
| <input id="telegram_bot_token" type="password" placeholder="..."/> | |
| <label for="telegram_users">TELEGRAM_ALLOWED_USERS (comma-separated IDs)</label> | |
| <input id="telegram_users" placeholder="123456789,987654321"/> | |
| <label for="custom_base">CUSTOM_BASE_URL (for custom provider)</label> | |
| <input id="custom_base" placeholder="https://api.example.com/v1"/> | |
| <label for="hf_token">HF_TOKEN</label> | |
| <input id="hf_token" type="password" placeholder="hf_..."/> | |
| <button class="btn btn-primary" onclick="generate()">Generate .env</button> | |
| <div class="output" id="output"> | |
| <h3>Your Environment Variables</h3> | |
| <div class="code-block" id="envOutput"></div> | |
| <button class="copy-btn" onclick="copyEnv()">Copy to clipboard</button> | |
| </div> | |
| </div> | |
| <script src="env-builder.js"></script> | |
| </body> | |
| </html> | |