Spaces:
Sleeping
Sleeping
File size: 6,202 Bytes
fcd463d |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 |
"""
API key creation guide component
"""
import gradio as gr
def create_api_guide():
"""Create API key creation guide with expandable sections"""
with gr.Accordion("Need help creating API keys?", open=False):
gr.Markdown("### Step-by-Step API Key Creation Guide")
with gr.Tabs():
# Groq API Key Guide
with gr.Tab("Groq API Key"):
groq_guide = '''
<div class="api-guide">
<h4>Creating a Groq API Key</h4>
<ol>
<li>Go to <a href="https://console.groq.com" target="_blank">Groq Console</a></li>
<li>Sign up or log in to your account</li>
<li>Navigate to <strong>API Keys</strong> section</li>
<li>Click on <strong>Create API Key</strong></li>
<li>Give your key a descriptive name</li>
<li>Copy the generated key (starts with <code>gsk_</code>)</li>
<li>Paste it in the Groq API Key field above</li>
</ol>
<div class="note">
<span class="material-icons">info</span>
<p>Keep your API key secure and never share it publicly.</p>
</div>
<div class="resources">
<h5>Additional Resources:</h5>
<ul>
<li><a href="https://groq.com" target="_blank">Groq Official Website</a></li>
<li><a href="https://console.groq.com/docs/quickstart" target="_blank">Groq Quickstart Guide</a></li>
<li><a href="https://console.groq.com/docs/authentication" target="_blank">Authentication Documentation</a></li>
</ul>
</div>
</div>
'''
gr.HTML(groq_guide)
# Hugging Face Token Guide
with gr.Tab("Hugging Face Token"):
hf_guide = '''
<div class="api-guide">
<h4>Creating a Hugging Face Token</h4>
<ol>
<li>Go to <a href="https://huggingface.co" target="_blank">Hugging Face</a></li>
<li>Sign up or log in to your account</li>
<li>Click on your profile picture → <strong>Settings</strong></li>
<li>Navigate to <strong>Access Tokens</strong></li>
<li>Click on <strong>New Token</strong></li>
<li>Select token type: <strong>Write</strong></li>
<li>Give your token a descriptive name</li>
<li>Copy the generated token (starts with <code>hf_</code>)</li>
<li>Paste it in the Hugging Face Token field above</li>
</ol>
<div class="note">
<span class="material-icons">warning</span>
<p>Write token is required for creating and updating Spaces.</p>
</div>
<div class="resources">
<h5>Additional Resources:</h5>
<ul>
<li><a href="https://huggingface.co/docs/hub/security-tokens" target="_blank">Token Security Guide</a></li>
<li><a href="https://huggingface.co/docs/hub/spaces-overview" target="_blank">Spaces Documentation</a></li>
<li><a href="https://huggingface.co/docs/hub/spaces-sdks" target="_blank">SDK Reference</a></li>
</ul>
</div>
</div>
'''
gr.HTML(hf_guide)
# Best Practices
with gr.Tab("Best Practices"):
practices_guide = '''
<div class="api-guide">
<h4>API Key Security Best Practices</h4>
<div class="security-tip">
<span class="material-icons">lock</span>
<div>
<strong>Key Rotation</strong>
<p>Regularly rotate your API keys (every 90 days recommended).</p>
</div>
</div>
<div class="security-tip">
<span class="material-icons">visibility_off</span>
<div>
<strong>Never Expose Keys</strong>
<p>Never commit API keys to version control or share in public forums.</p>
</div>
</div>
<div class="security-tip">
<span class="material-icons">shield</span>
<div>
<strong>Use Environment Variables</strong>
<p>Store keys in environment variables instead of hardcoding.</p>
</div>
</div>
<div class="security-tip">
<span class="material-icons">notifications</span>
<div>
<strong>Monitor Usage</strong>
<p>Regularly check API usage and set up alerts for unusual activity.</p>
</div>
</div>
<div class="security-tip">
<span class="material-icons">delete</span>
<div>
<strong>Revoke Unused Keys</strong>
<p>Immediately revoke keys that are no longer needed.</p>
</div>
</div>
</div>
'''
gr.HTML(practices_guide)
return None |