Add multi-provider API support and refactor authentication

[cometben54-arch]

Summary

This PR introduces support for multiple AI providers (Google Gemini, OpenAI-compatible APIs, and custom endpoints) while refactoring the authentication system to support both API key and passcode modes with a cleaner separation of concerns.

Key Changes

API Provider Support

• Added ApiProviderConfig type to support multiple providers: Google Gemini, OpenAI-compatible, and custom endpoints
• Extended geminiService.ts to handle different provider implementations:
  • Direct Google Gemini API calls via callGemini()
  • OpenAI-compatible API calls via callOpenAICompatible() supporting both image generation and vision models
  • Unified image compression logic for proxy mode
• Updated processImageWithGemini() to route requests based on configured provider

Authentication Refactor

• Split ApiKeyModal into two tabs: "API Key" and "Passcode" modes
• Separated form submission logic into handleSaveApiKey() and handleSavePasscode()
• Added provider selection UI with model dropdown that updates based on selected provider
• Implemented localStorage persistence for api_provider_config with backward compatibility for legacy keys
• Updated useAuth hook to check for new config format while maintaining legacy support

Backend Infrastructure

• Added Cloudflare Pages Functions for serverless API routes:
  • functions/api/proxy.ts: Handles image processing with quota management via Cloudflare KV
  • functions/api/verify-code.ts: Validates access codes and returns quota info
  • functions/api/stats.ts: Tracks global usage statistics
• Added wrangler.toml configuration for Cloudflare deployment
• Simplified local dev proxy in vite.config.ts with mock access codes

UI/UX Improvements

• Updated modal header icon from Key to Settings
• Added provider selection buttons with visual feedback
• Added model selection dropdown that dynamically updates based on provider
• Added base URL input for OpenAI-compatible and custom providers
• Added success/error messaging with better visual feedback
• Increased modal max-width and added scrolling for longer forms

Type System

• Added ApiProvider type union for supported providers
• Added GEMINI_MODELS and OPENAI_MODELS constants for model selection
• Extended QuotaInfo interface usage across authentication flow

Translations

• Added new translation keys for provider labels, model selection, and configuration UI
• Updated existing keys to reflect new "Configure API" terminology

Notable Implementation Details

• Backward compatibility maintained: legacy gemini_api_key_local and gemini_access_code are still supported
• Image compression logic extracted to reusable compressImage() function
• OpenAI API supports both Images API (for DALL-E models) and Chat Completions API (for vision models like GPT-4o)
• Cloudflare KV used for atomic quota management in proxy mode
• R2 bucket support for large image responses to avoid Worker payload limits

https://claude.ai/code/session_01RGY4k7JQ6QT27E7KBYJ1KT