components/api_guide.py

"""
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