index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Apex AI Proxy - Your Free Personal AI Gateway</title>
    <meta name="description" content="Apex AI Proxy is a free personal AI Gateway running on Cloudflare Workers, aggregating multiple AI service providers to overcome rate limits.">
    <link rel="stylesheet" href="website/css/styles.css">
    <!-- 引入 Font Awesome 图标库 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <!-- 引入 Google Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <!-- 添加网站图标 -->
    <link rel="icon" href="website/images/favicon.ico" type="image/x-icon">
</head>
<body>
    <header class="header">
        <div class="container">
            <div class="logo">
                <img src="website/images/logo.svg" alt="Apex AI Proxy Logo">
                <h1>Apex AI Proxy</h1>
            </div>
            <div class="nav-container">
                <nav class="nav">
                    <ul>
                        <li><a href="#features" data-i18n="nav_features">Features</a></li>
                        <li><a href="#how-it-works" data-i18n="nav_how_it_works">How It Works</a></li>
                        <li><a href="#getting-started" data-i18n="nav_getting_started">Getting Started</a></li>
                        <li><a href="#config-tool" data-i18n="nav_config_tool">Config Tool</a></li>
                        <li><a href="https://github.com/loadchange/apex-ai-proxy" target="_blank" class="github-link">
                            <i class="fab fa-github"></i> <span data-i18n="nav_github">GitHub</span>
                        </a></li>
                    </ul>
                </nav>
                <div class="lang-switcher">
                    <button class="lang-btn active" data-lang="en">EN</button>
                    <button class="lang-btn" data-lang="zh">中</button>
                </div>
            </div>
            <div class="mobile-menu-btn">
                <span></span>
                <span></span>
                <span></span>
            </div>
        </div>
    </header>

    <section class="hero">
        <div class="container">
            <div class="hero-content">
                <h1 data-i18n="hero_title">🚀 Your Free Personal AI Gateway</h1>
                <p class="hero-subtitle" data-i18n="hero_subtitle">Aggregate multiple AI service providers, overcome rate limits, and maximize free quotas</p>
                <div class="hero-buttons">
                    <a href="#getting-started" class="btn btn-primary" data-i18n="hero_btn_start">Get Started</a>
                    <a href="https://github.com/loadchange/apex-ai-proxy" target="_blank" class="btn btn-secondary github-star-btn">
                        <i class="fab fa-github"></i> <span data-i18n="hero_btn_star">Star Us ⭐</span>
                    </a>
                </div>
                <div class="github-stats">
                    <div class="github-stat">
                        <i class="fas fa-star"></i>
                        <span id="star-count" data-i18n="hero_loading">Loading...</span>
                        <span data-i18n="hero_stars">Stars</span>
                    </div>
                    <div class="github-stat">
                        <i class="fas fa-code-branch"></i>
                        <span id="fork-count" data-i18n="hero_loading">Loading...</span>
                        <span data-i18n="hero_forks">Forks</span>
                    </div>
                </div>
            </div>
            <div class="hero-image">
                <img src="website/images/hero-illustration.svg" alt="Apex AI Proxy Illustration">
            </div>
        </div>
    </section>

    <section class="why-us" id="features">
        <div class="container">
            <h2 class="section-title" data-i18n="features_title">Why Choose Apex AI Proxy?</h2>
            <div class="features-grid">
                <div class="feature-card">
                    <div class="feature-icon">🆓</div>
                    <h3 data-i18n="feature_free_title">Completely Free</h3>
                    <p data-i18n="feature_free_desc">Runs entirely on Cloudflare Workers' free plan, no cost involved</p>
                </div>
                <div class="feature-card">
                    <div class="feature-icon">🔄</div>
                    <h3 data-i18n="feature_balance_title">Load Balancing</h3>
                    <p data-i18n="feature_balance_desc">Intelligently distributes requests across multiple providers to overcome rate limits</p>
                </div>
                <div class="feature-card">
                    <div class="feature-icon">💰</div>
                    <h3 data-i18n="feature_quota_title">Maximize Free Quotas</h3>
                    <p data-i18n="feature_quota_desc">Take advantage of free tiers from different AI providers, saving costs</p>
                </div>
                <div class="feature-card">
                    <div class="feature-icon">🔑</div>
                    <h3 data-i18n="feature_keys_title">Multiple API Keys</h3>
                    <p data-i18n="feature_keys_desc">Register multiple keys for the same service provider to further increase limits</p>
                </div>
                <div class="feature-card">
                    <div class="feature-icon">🤖</div>
                    <h3 data-i18n="feature_compat_title">OpenAI Client Compatible</h3>
                    <p data-i18n="feature_compat_desc">Works with any library that speaks OpenAI's API format, no code changes needed</p>
                </div>
                <div class="feature-card">
                    <div class="feature-icon">🌐</div>
                    <h3 data-i18n="feature_providers_title">Multi-Provider Support</h3>
                    <p data-i18n="feature_providers_desc">Aggregate Azure, DeepSeek, Aliyun, and more behind one unified API</p>
                </div>
            </div>
        </div>
    </section>

    <section class="how-it-works" id="how-it-works">
        <div class="container">
            <h2 class="section-title" data-i18n="how_title">How It Works</h2>
            <div class="workflow">
                <div class="workflow-step">
                    <div class="step-number">1</div>
                    <div class="step-content">
                        <h3 data-i18n="how_step1_title">Configure Providers</h3>
                        <p data-i18n="how_step1_desc">Configure your AI service providers and API keys in wrangler-config.js</p>
                    </div>
                </div>
                <div class="workflow-step">
                    <div class="step-number">2</div>
                    <div class="step-content">
                        <h3 data-i18n="how_step2_title">Deploy to Cloudflare</h3>
                        <p data-i18n="how_step2_desc">Deploy your proxy to Cloudflare Workers with a simple command</p>
                    </div>
                </div>
                <div class="workflow-step">
                    <div class="step-number">3</div>
                    <div class="step-content">
                        <h3 data-i18n="how_step3_title">Use Unified API</h3>
                        <p data-i18n="how_step3_desc">Send requests through the OpenAI-compatible API, the proxy automatically routes to available providers</p>
                    </div>
                </div>
                <div class="workflow-step">
                    <div class="step-number">4</div>
                    <div class="step-content">
                        <h3 data-i18n="how_step4_title">Break Limits</h3>
                        <p data-i18n="how_step4_desc">Enjoy higher request limits and lower costs while maintaining API consistency</p>
                    </div>
                </div>
            </div>
            <div class="architecture-diagram">
                <img src="website/images/architecture.svg" alt="Apex AI Proxy Architecture">
            </div>
        </div>
    </section>

    <section class="getting-started" id="getting-started">
        <div class="container">
            <h2 class="section-title" data-i18n="start_title">Get Started in 60 Seconds</h2>
            <div class="steps-container">
                <div class="step-card">
                    <h3 data-i18n="start_step1">1. Clone Repository</h3>
                    <div class="code-block">
                        <pre><code>git clone https://github.com/loadchange/apex-ai-proxy.git
cd apex-ai-proxy</code></pre>
                        <button class="copy-btn" data-clipboard-target="#clone-code">
                            <i class="far fa-copy"></i>
                        </button>
                    </div>
                </div>
                <div class="step-card">
                    <h3 data-i18n="start_step2">2. Install Dependencies</h3>
                    <div class="code-block">
                        <pre><code>pnpm install</code></pre>
                        <button class="copy-btn" data-clipboard-target="#install-code">
                            <i class="far fa-copy"></i>
                        </button>
                    </div>
                </div>
                <div class="step-card">
                    <h3 data-i18n="start_step3">3. Configure Providers</h3>
                    <p data-i18n="start_step3_desc">Configure your providers and API keys in <code>wrangler-config.js</code>, or use our <a href="#config-tool">visual configuration tool</a></p>
                </div>
                <div class="step-card">
                    <h3 data-i18n="start_step4">4. Deploy to Cloudflare Workers</h3>
                    <div class="code-block">
                        <pre><code>pnpm run deploy</code></pre>
                        <button class="copy-btn" data-clipboard-target="#deploy-code">
                            <i class="far fa-copy"></i>
                        </button>
                    </div>
                </div>
            </div>
            <div class="deploy-cta">
                <a href="https://dash.cloudflare.com/?to=/:account/workers-and-pages" target="_blank" class="btn btn-primary">
                    <i class="fas fa-cloud-upload-alt"></i> <span data-i18n="start_deploy">Deploy to Cloudflare Now</span>
                </a>
            </div>
        </div>
    </section>

    <section class="usage-example">
        <div class="container">
            <h2 class="section-title" data-i18n="usage_title">Usage Examples</h2>
            <div class="code-tabs">
                <div class="tabs">
                    <button class="tab-btn active" data-tab="python">Python</button>
                    <button class="tab-btn" data-tab="javascript">JavaScript</button>
                    <button class="tab-btn" data-tab="curl">cURL</button>
                </div>
                <div class="tab-content">
                    <div class="tab-pane active" id="python">
                        <pre><code class="language-python"># Works with ANY OpenAI client!
from openai import OpenAI

client = OpenAI(
    base_url="https://your-proxy.workers.dev/v1",
    api_key="your-configured-api-key"
)

# Use any model you've configured in your proxy
response = client.chat.completions.create(
    model="DeepSeek-R1",  # This will be routed to one of your configured providers
    messages=[{"role": "user", "content": "Why is this proxy awesome?"}]
)</code></pre>
                        <button class="copy-btn" data-clipboard-target="#python-code">
                            <i class="far fa-copy"></i>
                        </button>
                    </div>
                    <div class="tab-pane" id="javascript">
                        <pre><code class="language-javascript">// Using the OpenAI Node.js client
import OpenAI from 'openai';

const openai = new OpenAI({
  baseURL: 'https://your-proxy.workers.dev/v1',
  apiKey: 'your-configured-api-key',
});

async function main() {
  const completion = await openai.chat.completions.create({
    model: 'DeepSeek-R1',  // This will be routed to one of your configured providers
    messages: [{ role: 'user', content: 'Why is this proxy awesome?' }],
  });

  console.log(completion.choices[0].message.content);
}</code></pre>
                        <button class="copy-btn" data-clipboard-target="#javascript-code">
                            <i class="far fa-copy"></i>
                        </button>
                    </div>
                    <div class="tab-pane" id="curl">
                        <pre><code class="language-bash">curl https://your-proxy.workers.dev/v1/chat/completions \
  -H "Content-Type: application/json" \
  -H "Authorization: Bearer your-configured-api-key" \
  -d '{
    "model": "DeepSeek-R1",
    "messages": [{"role": "user", "content": "Why is this proxy awesome?"}]
  }'</code></pre>
                        <button class="copy-btn" data-clipboard-target="#curl-code">
                            <i class="far fa-copy"></i>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="config-tool" id="config-tool">
        <div class="container">
            <h2 class="section-title" data-i18n="config_title">Visual Configuration Tool</h2>
            <p class="section-description" data-i18n="config_desc">Easily create your wrangler-config.js file with our visual tool</p>

            <div class="collapse-expand-buttons">
                <button type="button" class="btn btn-secondary" id="collapse-all" data-i18n="btn_collapse_all">Collapse All</button>
                <button type="button" class="btn btn-secondary" id="expand-all" data-i18n="btn_expand_all">Expand All</button>
            </div>

            <div class="config-builder">
                <div class="config-form">
                    <div class="form-section">
                        <h3>
                            <span data-i18n="config_providers">Provider Configuration</span>
                            <div class="form-section-actions">
                                <button type="button" class="btn btn-secondary" id="add-provider" data-i18n="btn_add_provider">Add Provider</button>
                            </div>
                        </h3>
                        <div id="providers-container">
                            <!-- 提供商表单将通过 JavaScript 动态生成 -->
                            <div class="provider-form">
                                <div class="collapsible-header" data-listener-added="true">
                                    <span class="provider-title" id="provider-title-0" data-i18n="config_provider_name">Provider Name 0</span>
                                    <i class="fas fa-chevron-down collapse-icon"></i>
                                </div>
                                <div class="collapsible-content">
                                    <div class="form-group">
                                        <label for="provider-name-0" data-i18n="config_provider_name">Provider Name</label>
                                        <input type="text" id="provider-name-0" data-i18n="config_provider_name_placeholder" placeholder="e.g., openai, azure, aliyuncs" oninput="updateProviderTitle(0, this.value)">
                                    </div>
                                    <div class="form-group">
                                        <label for="provider-base-url-0" data-i18n="config_base_url">Base URL</label>
                                        <input type="text" id="provider-base-url-0" data-i18n="config_base_url_placeholder" placeholder="e.g., https://api.openai.com/v1">
                                    </div>
                                    <div class="form-group">
                                        <label for="provider-api-keys-0" data-i18n="config_api_keys">API Keys (one per line)</label>
                                        <textarea id="provider-api-keys-0" data-i18n="config_api_keys_placeholder" placeholder="Enter your API keys, one per line"></textarea>
                                    </div>
                                    <button type="button" class="btn btn-danger remove-provider" data-index="0" data-i18n="btn_remove">Remove</button>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="form-section">
                        <h3>
                            <span data-i18n="config_models">Model Configuration</span>
                            <div class="form-section-actions">
                                <button type="button" class="btn btn-secondary" id="add-model" data-i18n="btn_add_model">Add Model</button>
                            </div>
                        </h3>
                        <div id="models-container">
                            <!-- 模型表单将通过 JavaScript 动态生成 -->
                            <div class="model-form">
                                <div class="collapsible-header" data-listener-added="true">
                                    <span class="model-title" id="model-title-0" data-i18n="config_model_name">Model Name 0</span>
                                    <i class="fas fa-chevron-down collapse-icon"></i>
                                </div>
                                <div class="collapsible-content">
                                    <div class="form-group">
                                        <label for="model-name-0" data-i18n="config_model_name">Model Name</label>
                                        <input type="text" id="model-name-0" data-i18n="config_model_name_placeholder" placeholder="e.g., gpt-4, DeepSeek-R1" oninput="updateModelTitle(0, this.value)">
                                    </div>
                                    <div class="model-providers" id="model-providers-0">
                                        <div class="model-provider">
                                            <div class="collapsible-header" data-listener-added="true">
                                                <span class="provider-title" id="model-provider-title-0-0" data-i18n="config_model_provider">Provider 1</span>
                                                <i class="fas fa-chevron-down collapse-icon"></i>
                                            </div>
                                            <div class="collapsible-content">
                                                <div class="form-group">
                                                    <label for="model-provider-name-0-0" data-i18n="config_model_provider">Provider</label>
                                                    <select id="model-provider-name-0-0" class="provider-select" onchange="updateModelProviderTitle(0, 0, this.value)">
                                                        <!-- 选项将通过 JavaScript 动态生成 -->
                                                        <option value="" data-i18n="config_select_provider">Select Provider</option>
                                                    </select>
                                                </div>
                                                <div class="form-group">
                                                    <label for="model-provider-model-0-0" data-i18n="config_provider_model">Provider Model Name</label>
                                                    <input type="text" id="model-provider-model-0-0" data-i18n="config_provider_model_placeholder" placeholder="Model name used by the provider">
                                                </div>
                                                <button type="button" class="btn btn-danger remove-model-provider" data-model-index="0" data-provider-index="0" data-i18n="btn_remove">Remove</button>
                                            </div>
                                        </div>
                                    </div>
                                    <button type="button" class="btn btn-secondary add-model-provider" data-model-index="0" data-i18n="btn_add_model_provider">Add Provider</button>
                                    <button type="button" class="btn btn-danger remove-model" data-index="0" data-i18n="btn_remove">Remove</button>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="form-section">
                        <h3 data-i18n="config_service_key">Service API Key</h3>
                        <div class="form-group">
                            <label for="service-api-key" data-i18n="config_service_key">Service API Key</label>
                            <input type="text" id="service-api-key" data-i18n="config_service_key_placeholder" placeholder="Set an API key for accessing your proxy">
                            <button type="button" class="btn btn-secondary" id="generate-api-key" data-i18n="config_generate_key">Generate Random Key</button>
                        </div>
                    </div>

                    <button type="button" class="btn btn-primary" id="generate-config" data-i18n="config_generate">Generate Configuration</button>
                </div>

                <div class="config-preview">
                    <h3 data-i18n="config_preview">Configuration Preview</h3>
                    <div class="code-block">
                        <pre><code id="config-output" data-i18n="config_preview_placeholder">// Your configuration will appear here
// Fill out the form and click "Generate Configuration"</code></pre>
                        <button class="copy-btn" id="copy-config">
                            <i class="far fa-copy"></i>
                        </button>
                    </div>
                    <div class="config-actions">
                        <button type="button" class="btn btn-primary" id="download-config" data-i18n="config_download">Download Config File</button>
                        <button type="button" class="btn btn-secondary" id="reset-form" data-i18n="config_reset">Reset Form</button>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="star-project">
        <div class="container">
            <div class="star-content">
                <h2 data-i18n="star_title">Like This Project?</h2>
                <p data-i18n="star_desc">If Apex AI Proxy has helped you, please consider giving our GitHub repository a Star ⭐<br>It's crucial for our project's growth and continuous improvement!</p>
                <a href="https://github.com/loadchange/apex-ai-proxy" target="_blank" class="btn btn-primary github-star-btn">
                    <i class="fab fa-github"></i> <span data-i18n="hero_btn_star">Star Us ⭐</span>
                </a>
                <div class="star-benefits">
                    <div class="benefit">
                        <i class="fas fa-code-branch"></i>
                        <p data-i18n="star_benefit1">Help more people discover this project</p>
                    </div>
                    <div class="benefit">
                        <i class="fas fa-heart"></i>
                        <p data-i18n="star_benefit2">Support open source development</p>
                    </div>
                    <div class="benefit">
                        <i class="fas fa-bell"></i>
                        <p data-i18n="star_benefit3">Get notified of project updates</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <footer class="footer">
        <div class="container">
            <div class="footer-content">
                <div class="footer-logo">
                    <img src="website/images/logo.svg" alt="Apex AI Proxy Logo">
                    <h2>Apex AI Proxy</h2>
                </div>
                <div class="footer-links">
                    <div class="footer-links-column">
                        <h3 data-i18n="footer_project">Project</h3>
                        <ul>
                            <li><a href="https://github.com/loadchange/apex-ai-proxy" target="_blank" data-i18n="footer_repo">GitHub Repository</a></li>
                            <li><a href="https://github.com/loadchange/apex-ai-proxy/issues" target="_blank" data-i18n="footer_issues">Issue Feedback</a></li>
                            <li><a href="https://github.com/loadchange/apex-ai-proxy/blob/main/LICENSE" target="_blank" data-i18n="footer_license">MIT License</a></li>
                        </ul>
                    </div>
                    <div class="footer-links-column">
                        <h3 data-i18n="footer_resources">Resources</h3>
                        <ul>
                            <li><a href="#features" data-i18n="nav_features">Features</a></li>
                            <li><a href="#how-it-works" data-i18n="nav_how_it_works">How It Works</a></li>
                            <li><a href="#getting-started" data-i18n="nav_getting_started">Getting Started</a></li>
                            <li><a href="#config-tool" data-i18n="nav_config_tool">Config Tool</a></li>
                        </ul>
                    </div>
                    <div class="footer-links-column">
                        <h3 data-i18n="footer_links">Related Links</h3>
                        <ul>
                            <li><a href="https://developers.cloudflare.com/workers/" target="_blank" data-i18n="footer_cf_workers">Cloudflare Workers</a></li>
                            <li><a href="https://platform.openai.com/docs/api-reference" target="_blank" data-i18n="footer_openai_docs">OpenAI API Docs</a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="footer-bottom">
                <p>&copy; 2024 Apex AI Proxy. <span data-i18n="footer_copyright">Based on</span> <a href="https://github.com/loadchange/apex-ai-proxy/blob/main/LICENSE" target="_blank" data-i18n="footer_license">MIT License</a>.</p>
                <div class="social-links">
                    <a href="https://github.com/loadchange/apex-ai-proxy" target="_blank"><i class="fab fa-github"></i></a>
                </div>
            </div>
        </div>
    </footer>

    <div class="github-corner">
        <a href="https://github.com/loadchange/apex-ai-proxy" target="_blank" class="github-corner-link" aria-label="View on GitHub">
            <svg width="80" height="80" viewBox="0 0 250 250" style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true">
                <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
                <path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path>
                <path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path>
            </svg>
        </a>
    </div>

    <script src="website/js/translations.js"></script>
    <script src="website/js/main.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.8/clipboard.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
    <script>
        // 初始化代码高亮
        document.addEventListener('DOMContentLoaded', () => {
            hljs.highlightAll();

            // 初始化剪贴板功能
            new ClipboardJS('.copy-btn');

            // 获取 GitHub 统计数据
            fetch('https://api.github.com/repos/loadchange/apex-ai-proxy')
                .then(response => response.json())
                .then(data => {
                    document.getElementById('star-count').textContent = data.stargazers_count;
                    document.getElementById('fork-count').textContent = data.forks_count;
                })
                .catch(error => {
                    console.error('Error fetching GitHub stats:', error);
                    document.getElementById('star-count').textContent = t('loading_failed');
                    document.getElementById('fork-count').textContent = t('loading_failed');
                });
        });
    </script>
</body>
</html>