Cloudflare-Flux-WebUI-MCP

# Flux Schnell A Cloudflare Worker-based AI-powered image generation application with WebUI interface and Cursor editor integration. ## Quick Start 1. Double-click to run `start-flux-schnell.bat` 2. Choose one of the following options: - Option 1: Directly start WebUI (if you already have a Worker URL) - Option 2: Deploy Worker and obtain URL, then start WebUI - Option 3: Automatically extract Worker URL from recent deployment - Option 4: Start CF-FLUX-MCP for Cursor editor integration (completed) 3. If you choose to deploy Worker, a browser will open, please log in to your Cloudflare account and authorize 4. After deployment, please copy the displayed Worker URL 5. Continue according to your chosen usage: - WebUI: Enter Worker URL in the interface, click "Save and Continue" button to start using - Cursor: Configure MCP program according to prompts ## Directory Structure - `cf-flux-schnell/` - Cloudflare Worker source code - `weiui/` - Graphical user interface - `CF-FLUX-MCP/` - Cursor editor integration code (completed) - `*.bat` - Various helper scripts ## Features - High-quality image generation based on Cloudflare Workers AI - Dual usage modes: - Responsive modern WebUI interface - Direct integration with Cursor editor - Support for multiple languages (English, Simplified Chinese, Traditional Chinese, Russian, Arabic, French, German, Spanish) - Adjustable generation steps, balancing quality and speed - Generation history and quick reuse - Convenient image download function - Fully automatic deployment and configuration ## Deployment Instructions This application uses Cloudflare Worker to provide AI-powered image generation services, requiring a Cloudflare account (free). ### Deployment Methods 1. **Interactive browser authentication (recommended)**: - Run `start-flux-schnell.bat` and choose option 2 - The browser will open for you to log in to your Cloudflare account - The Worker URL will be automatically saved after deployment - No need to manually obtain API Token 2. **Manual deployment**: - Enter `cf-flux-schnell` directory - Run `npm install` - Run `npx wrangler deploy` - Run `save-worker-url.bat` to save the obtained URL ## Usage ### 1. WebUI Interface Directly use through graphical interface, supporting: - Visual prompt input - Image preview - History management - Multi-language switching ### 2. Cursor Editor Integration 1. Start MCP service: - Run `start-flux-schnell.bat` and choose option 4 - The MCP service will automatically start 2. Configure Cursor: - Open Cursor settings - Choose "Copilot settings" - Enter "MCP program" tab - Add new program: - Command: `node complete path\CF-FLUX-MCP\simple-server-final.js` - Name: CF-FLUX-MCP - Description: Flux image generation 3. Use in editor: ``` /generate-flux-image prompt="Image description you want to generate" model="@cf/black-forest-labs/flux-2-klein-4b" width=1024 height=1024 steps=4 ``` Parameter description: - `prompt`: Image description (required) - `model`: Model id (optional, default `@cf/black-forest-labs/flux-2-klein-4b`), available options: - `@cf/black-forest-labs/flux-2-klein-4b` (distilled lightweight version, 1-8 steps, default 4) - `@cf/black-forest-labs/flux-2-klein-9b` (distilled balanced version, 1-8 steps, default 4) - `@cf/black-forest-labs/flux-2-dev` (complete Dev version, 1-50 steps, default 25) - `width`: Image width (optional, default 1024, range 256-2048, recommended to be a multiple of 32) - `height`: Image height (optional, default 1024, range 256-2048, recommended to be a multiple of 32) - `steps`: Generation steps (optional). klein series supports 1-8, flux-2-dev supports 1-50; default is automatically supplemented by Worker according to the selected model ## API Description After Worker deployment, an image generation API will be provided, which can be called in the following way: ``` POST https://your-worker-url.workers.dev Headers: Content-Type: application/json Authorization: Bearer Hsue8p20snchw734ambncMD Body: { "prompt": "Image description you want to generate", "model": "@cf/black-forest-labs/flux-2-klein-4b", "width": 1024, "height": 1024, "steps": 4 } ``` Available FLUX.2 models and recommended step ranges: - `@cf/black-forest-labs/flux-2-klein-4b`: Distilled lightweight version, fastest, 1-8 steps (default 4) - `@cf/black-forest-labs/flux-2-klein-9b`: Distilled balanced version, quality and speed balanced, 1-8 steps (default 4) - `@cf/black-forest-labs/flux-2-dev`: Complete Dev version, highest quality, 1-50 steps (default 25) `model`, `width`, `height`, `steps` are all optional parameters; if omitted, Worker will use the above default values. All three FLUX.2 models run on Cloudflare Workers AI and share the same daily 10,000 Neurons free quota. ## Multi-language Support The WebUI interface of this application supports the following languages: - English - Simplified Chinese - Traditional Chinese - Russian (Русский) - Arabic (العربية) - French (Français) - German (Deutsch) - Spanish (Español) Language will be automatically detected based on browser settings, and can also be manually switched through the language selector in the top right corner of the interface. ## Troubleshooting ### WebUI-related - **Deployment failure**: Ensure you have logged in to the correct Cloudflare account and have deployment permissions for Workers - **Worker URL not displayed**: After successful deployment, URL will be displayed in the command line; you can also find the URL in the Workers page of the Cloudflare dashboard - **WebUI fails to start**: Check if Node.js is installed, and try reinstalling dependencies (`cd weiui && npm install`) - **URL not effective after saving**: Try resetting configuration and re-entering URL, ensure "Save and Continue" button is clicked ### Cursor integration-related - **Worker URL not found**: Ensure `worker_url.txt` file exists and contains the correct URL - **MCP connection failure**: Check if the command path in Cursor settings is correct, now using `simple-server-final.js` - **Image generation failure**: Ensure prompt does not contain special characters, steps are within the valid range for the selected model (klein series 1-8, flux-2-dev 1-50) - **Chinese prompt processing**: The system has built-in simple Chinese-English conversion capability, but complex Chinese may require manual input of English prompts ## Get Help For more help, please refer to the `Get Worker URL Guide.md` document or visit [Cloudflare Workers documentation](https://developers.cloudflare.com/workers/). ## Special Thanks Thanks to Cloudflare for providing AI services, allowing everyone to experience the charm of image generation.