Integrate Cloudflare Workers AI text-to-image into SD extension (#5434) * feat: integrate Cloudflare Workers AI for text-to-image generation in SD extension Agent-Logs-Url: https://github.com/SillyTavern/SillyTavern/sessions/efc79e4d-2119-4cdb-8afb-f26e318a38ef Co-authored-by: Cohee1207 <18619528+Cohee1207@users.noreply.github.com> * fix: address review - use oai_settings for account ID, sort dropdown alphabetically, remove Account ID input, move debug log Agent-Logs-Url: https://github.com/SillyTavern/SillyTavern/sessions/bf0dda38-df40-44f4-8a63-0c952b48905d Co-authored-by: Cohee1207 <18619528+Cohee1207@users.noreply.github.com> * Clean-up diffs * feat: add refresh models button to Workers AI section Agent-Logs-Url: https://github.com/SillyTavern/SillyTavern/sessions/ab6b5e7a-84d2-44d1-9f6e-3d330de04ef1 Co-authored-by: Cohee1207 <18619528+Cohee1207@users.noreply.github.com> * fix: revert unrelated package-lock.json changes Agent-Logs-Url: https://github.com/SillyTavern/SillyTavern/sessions/ab6b5e7a-84d2-44d1-9f6e-3d330de04ef1 Co-authored-by: Cohee1207 <18619528+Cohee1207@users.noreply.github.com> * Fix models loading * refactor: update model refresh button ID and add class to select elements * Send formData to BFL models * fix: adjust use FormData condition * fix: validate Workers AI account ID before proceeding with image model loading --------- Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com> Co-authored-by: Cohee1207 <18619528+Cohee1207@users.noreply.github.com>

78628f7dbb7c2f0d1cb33cac655994ab87a91903

Copilot <198982749+Copilot@users.noreply.github.com>

Signed

Parents: 64c96e895c5c8d22241ce69972a331e6fe222a3a

public/scripts/extensions/stable-diffusion/index.js+76 -0 Viewed

     google: 'google',
     zai: 'zai',
     openrouter: 'openrouter',
 +    workersai: 'workersai',
 };
 const comfyTypes = {
     standard: 'standard',

         case sources.openrouter:
             samplers = ['N/A'];
             break;
 +        case sources.workersai:
 +            samplers = ['N/A'];
 +            break;
+    }
     for (const sampler of samplers) {

         case sources.openrouter:
             models = await loadOpenRouterModels();
             break;
 +        case sources.workersai:
 +            models = await loadWorkersAIImageModels();
 +            break;
+    }
     if (extension_settings.sd.source === sources.electronhub) {

     ];
+}
 +async function loadWorkersAIImageModels() {
 +    $('#sd_cf_workers_key').toggleClass('success', !!secret_state[SECRET_KEYS.WORKERS_AI]);
++
 +    if (!secret_state[SECRET_KEYS.WORKERS_AI]) {
 +        return [];
 +    }
++
 +    if (!oai_settings.workers_ai_account_id) {
 +        toastr.warning('Workers AI account ID is required. Save it in the "API Connections" panel.', 'Image Generation');
 +        return [];
 +    }
++
 +    const result = await fetch('/api/sd/workersai/models', {
 +        method: 'POST',
 +        headers: getRequestHeaders(),
 +        body: JSON.stringify({
 +            account_id: oai_settings.workers_ai_account_id,
 +        }),
 +    });
++
 +    if (result.ok) {
 +        return await result.json();
 +    }
++
 +    return [];
 +}
++
 async function loadPollinationsModels() {
     $('#sd_pollinations_key').toggleClass('success', !!secret_state[SECRET_KEYS.POLLINATIONS]);

         case sources.openrouter:
             schedulers = ['N/A'];
             break;
 +        case sources.workersai:
 +            schedulers = ['N/A'];
 +            break;
+    }
     for (const scheduler of schedulers) {

         case sources.openrouter:
             vaes = ['N/A'];
             break;
 +        case sources.workersai:
 +            vaes = ['N/A'];
 +            break;
+    }
     for (const vae of vaes) {

             case sources.openrouter:
                 result = await generateOpenRouterImage(prefixedPrompt, signal);
                 break;
 +            case sources.workersai:
 +                result = await generateWorkersAIImage(prefixedPrompt, negativePrompt, signal);
 +                break;
+        }
         if (!result.data) {

     throw new Error(text);
+}
 +async function generateWorkersAIImage(prompt, negativePrompt, signal) {
 +    const result = await fetch('/api/sd/workersai/generate', {
 +        method: 'POST',
 +        headers: getRequestHeaders(),
 +        signal: signal,
 +        body: JSON.stringify({
 +            prompt: prompt,
 +            negative_prompt: negativePrompt,
 +            model: extension_settings.sd.model,
 +            width: extension_settings.sd.width,
 +            height: extension_settings.sd.height,
 +            steps: extension_settings.sd.steps,
 +            scale: extension_settings.sd.scale,
 +            seed: extension_settings.sd.seed >= 0 ? extension_settings.sd.seed : undefined,
 +            account_id: oai_settings.workers_ai_account_id,
 +        }),
 +    });
++
 +    if (result.ok) {
 +        const data = await result.json();
 +        return { format: data?.format, data: data?.image };
 +    } else {
 +        const text = await result.text();
 +        throw new Error(text);
 +    }
 +}
++
 async function onComfyOpenWorkflowEditorClick() {
     let workflow = await (await fetch('/api/sd/comfy/workflow', {
         method: 'POST',

             return secret_state[SECRET_KEYS.ZAI];
         case sources.openrouter:
             return secret_state[SECRET_KEYS.OPENROUTER];
 +        case sources.workersai:
 +            return !!oai_settings.workers_ai_account_id && secret_state[SECRET_KEYS.WORKERS_AI];
         default:
             return false;
+    }

         extension_settings.sd.google_duration = Number($(this).val());
         saveSettingsDebounced();
     });
 +    $('#sd_models_refresh').on('click', async () => {
 +        await loadModels();
 +    });
     $('#sd_electronhub_quality').on('change', function () {
         extension_settings.sd.electronhub_quality = String($(this).val());
         saveSettingsDebounced();

                 [sources.aimlapi]: SECRET_KEYS.AIMLAPI,
                 [sources.comfy]: SECRET_KEYS.COMFY_RUNPOD,
                 [sources.pollinations]: SECRET_KEYS.POLLINATIONS,
 +                [sources.workersai]: SECRET_KEYS.WORKERS_AI,
             };
             const shouldReloadOptions = Object.entries(keySourceMap).some(([k, v]) => k === extension_settings.sd.source && v === key);
             if (!shouldReloadOptions) {

public/scripts/extensions/stable-diffusion/settings.html+36 -16 Viewed

                 <span data-i18n="sd_minimal_prompt_processing_txt">Minimal response prompt processing</span>
             </label>
             <label for="sd_source" data-i18n="Source">Source</label>
             <select id="sd_source" class="text_pole">
                 <option value="aimlapi">AI/ML API</option>
                 <option value="bfl">BFL (Black Forest Labs)</option>
                 <option value="chutes">Chutes</option>
 +                <option value="workersai">Cloudflare Workers AI</option>
                 <option value="comfy">ComfyUI</option>
                 <option value="drawthings">DrawThings HTTP API</option>
                 <option value="electronhub">Electron Hub</option>

                 <div class="flex-container" id="sd_electronhub_quality_row">
                     <div class="flex1">
                         <label for="sd_electronhub_quality" data-i18n="Image Quality">Image Quality</label>
                         <select id="sd_electronhub_quality" class="text_pole"></select>
                     </div>
                 </div>
             </div>

                 <div class="flex-container">
                     <div data-sd-model="dall-e-3" class="flex1">
                         <label for="sd_openai_style" data-i18n="Image Style">Image Style</label>
                         <select id="sd_openai_style" class="text_pole">
                             <option value="vivid">Vivid</option>
                             <option value="natural">Natural</option>
                         </select>
                     </div>
                     <div data-sd-model="gpt-image" class="flex1">
                         <label for="sd_openai_quality_gpt" data-i18n="Image Quality">Image Quality</label>
                         <select id="sd_openai_quality_gpt" class="text_pole">
                             <option value="auto" data-i18n="Auto">Auto</option>
                             <option value="low" data-i18n="Low">Low</option>
                             <option value="medium" data-i18n="Medium">Medium</option>

                     </div>
                     <div data-sd-model="dall-e-3,cogview-4,glm-image,cogvideox" class="flex1">
                         <label for="sd_openai_quality" data-i18n="Image Quality">Image Quality</label>
                         <select id="sd_openai_quality" class="text_pole">
                             <option value="standard" data-i18n="Standard">Standard</option>
                             <option value="hd" data-i18n="HD">HD</option>
                         </select>

                 <div data-sd-model="sora-2,sora-2-pro" class="flex-container">
                     <div class="flex1">
                         <label for="sd_openai_duration" data-i18n="Duration">Duration</label>
                         <select id="sd_openai_duration" class="text_pole">
                             <option value="4" data-i18n="Short (4 seconds)">Short (4 seconds)</option>
                             <option value="8" data-i18n="Medium (8 seconds)">Medium (8 seconds)</option>
                             <option value="12" data-i18n="Long (16 seconds)">Long (12 seconds)</option>

             </div>
             <div data-sd-source="comfy">
                 <label for="sd_comfy_type">Server Type</label>
                 <select id="sd_comfy_type" class="text_pole">
                     <option value="standard">Standard Server</option>
                     <option value="runpod_serverless">RunPod Serverless Endpoint</option>
                 </select>

                 <div class="flex-container">
                     <div class="flex1">
                         <label for="sd_stability_style_preset" data-i18n="Style Preset">Style Preset</label>
                         <select id="sd_stability_style_preset" class="text_pole">
                             <option value="anime">Anime</option>
                             <option value="3d-model">3D Model</option>
                             <option value="analog-film">Analog Film</option>

                 </div>
             </div>
 +            <div data-sd-source="workersai">
 +                <a href="https://dash.cloudflare.com" target="_blank" rel="noopener noreferrer">Cloudflare Workers AI</a>
 +                <div class="flex-container flexnowrap alignItemsBaseline marginBot5">
 +                    <strong class="flex1" data-i18n="API Key">API Key</strong>
 +                    <div id="sd_cf_workers_key" class="menu_button menu_button_icon manage-api-keys" data-key="api_key_workers_ai">
 +                        <i class="fa-fw fa-solid fa-key"></i>
 +                        <span data-i18n="Click to set">Click to set</span>
 +                    </div>
 +                </div>
 +                <div class="flex-container flexnowrap alignItemsBaseline">
 +                    <small class="flex1" data-i18n="Hint: Account ID and API key are pulled from API connections.">Hint: Account ID and API key are pulled from API connections.</small>
 +                </div>
 +            </div>
++
             <div data-sd-source="google">
                 <div class="flex-container">
                     <div class="flex1">

                     </label>
                     <div class="flex1">
                         <label for="sd_google_duration" data-i18n="Duration (Veo)">Duration (Veo)</label>
                         <select id="sd_google_duration" class="text_pole">
                             <option value="4">Short (4 seconds)</option>
                             <option value="6">Medium (6 seconds)</option>
                             <option value="8">Long (8 seconds)</option>

             <div class="flex-container">
                 <div class="flex1">
                     <label for="sd_model" data-i18nclass="Modelflex-container justifySpaceBetween">Model</label>
                                             <selectspan iddata-i18n="sd_modelModel">Model</selectspan>
 +                        <div id="sd_models_refresh" class="right_menu_button margin0 padding0" title="Refresh model list" data-i18n="[title]Refresh model list">
 +                            <i class="fa-solid fa-sync"></i>
 +                        </div>
 +                    </label>
 +                    <select id="sd_model" class="text_pole"></select>
                 </div>
                 <div class="flex1" data-sd-source="comfy,auto">
                     <label for="sd_vae">VAE</label>
                     <select id="sd_vae" class="text_pole"></select>
                 </div>
             </div>
             <div class="flex-container">
                 <div class="flex1" data-sd-source="extras,horde,auto,drawthings,novel,vlad,comfy,sdcpp">
                     <label for="sd_sampler" data-i18n="Sampling method">Sampling method</label>
                     <select id="sd_sampler" class="text_pole"></select>
                 </div>
                 <div class="flex1" data-sd-source="comfy,auto,novel,sdcpp">
                     <label for="sd_scheduler" data-i18n="Scheduler">Scheduler</label>
                     <select id="sd_scheduler" class="text_pole"></select>
                 </div>
             </div>
             <div class="flex-container">
                 <div class="flex1">
                     <label for="sd_resolution" data-i18n="Resolution">Resolution</label>
                     <select id="sd_resolution" class="text_pole"><!-- Populated in JS --></select>
                 </div>
                 <div class="flex1" data-sd-source="auto,vlad,drawthings">
                     <label for="sd_hr_upscaler" data-i18n="Upscaler">Upscaler</label>
                     <select id="sd_hr_upscaler" class="text_pole"></select>
                 </div>
             </div>

public/scripts/extensions/stable-diffusion/style.css+0 -4 Viewed

 -.sd_settings label:not(.checkbox_label) {
 -    display: block;
 -}
+-
 #sd_dropdown {
     z-index: 30000;
     backdrop-filter: blur(var(--SmartThemeBlurStrength));

src/endpoints/stable-diffusion.js+140 -1 Viewed

 import fetch from 'node-fetch';
 import sanitize from 'sanitize-filename';
 import { sync as writeFileAtomicSync } from 'write-file-atomic';
 -import FormData from 'form-data';
 import urlJoin from 'url-join';
 import _ from 'lodash';
 import mime from 'mime-types';

+    }
 });
 +const workersai = express.Router();
++
 +workersai.post('/models', async (request, response) => {
 +    try {
 +        const key = readSecret(request.user.directories, SECRET_KEYS.WORKERS_AI);
++
 +        if (!key) {
 +            console.warn('Cloudflare Workers AI API key not found.');
 +            return response.sendStatus(400);
 +        }
++
 +        const accountId = String(request.body.account_id || '').trim();
 +        if (!accountId) {
 +            console.warn('Cloudflare Workers AI Account ID not found.');
 +            return response.sendStatus(400);
 +        }
++
 +        const apiUrl = new URL(`https://api.cloudflare.com/client/v4/accounts/${encodeURIComponent(accountId)}/ai/models/search`);
 +        apiUrl.searchParams.set('task', 'Text-to-Image');
 +        apiUrl.searchParams.set('per_page', '1000');
 +        const result = await fetch(apiUrl, {
 +            method: 'GET',
 +            headers: {
 +                'Authorization': `Bearer ${key}`,
 +            },
 +        });
++
 +        if (!result.ok) {
 +            console.warn('Cloudflare Workers AI returned an error.', result.statusText);
 +            return response.sendStatus(500);
 +        }
++
 +        /** @type {any} */
 +        const data = await result.json();
++
 +        if (!data.success || !Array.isArray(data.result)) {
 +            console.warn('Cloudflare Workers AI returned invalid data.');
 +            return response.sendStatus(500);
 +        }
++
 +        const models = data.result.map(x => ({ value: x.name, text: x.name }));
 +        return response.send(models);
 +    } catch (error) {
 +        console.error(error);
 +        return response.sendStatus(500);
 +    }
 +});
++
 +workersai.post('/generate', async (request, response) => {
 +    try {
 +        const key = readSecret(request.user.directories, SECRET_KEYS.WORKERS_AI);
++
 +        if (!key) {
 +            console.warn('Cloudflare Workers AI API key not found.');
 +            return response.sendStatus(400);
 +        }
++
 +        const accountId = String(request.body.account_id || '').trim();
 +        if (!accountId) {
 +            console.warn('Cloudflare Workers AI Account ID not found.');
 +            return response.sendStatus(400);
 +        }
++
 +        const model = String(request.body.model || '').trim();
 +        if (!model) {
 +            console.warn('Cloudflare Workers AI model not specified.');
 +            return response.sendStatus(400);
 +        }
++
 +        const apiUrl = `https://api.cloudflare.com/client/v4/accounts/${encodeURIComponent(accountId)}/ai/run/${model}`;
++
 +        const body = {
 +            prompt: request.body.prompt,
 +            negative_prompt: request.body.negative_prompt || undefined,
 +            width: request.body.width ? Number(request.body.width) : undefined,
 +            height: request.body.height ? Number(request.body.height) : undefined,
 +            num_steps: request.body.steps ? Number(request.body.steps) : undefined,
 +            guidance: request.body.scale ? Number(request.body.scale) : undefined,
 +            seed: request.body.seed >= 0 ? Number(request.body.seed) : undefined,
 +        };
++
 +        // Remove undefined values
 +        for (const prop of Object.keys(body)) {
 +            if (body[prop] === undefined) {
 +                delete body[prop];
 +            }
 +        }
++
 +        console.debug('Cloudflare Workers AI request:', model, body);
++
 +        /** @type {import('node-fetch').RequestInit} */
 +        const apiRequest = {
 +            method: 'POST',
 +            headers: {
 +                'Authorization': `Bearer ${key}`,
 +            },
 +        };
++
 +        if (/flux-2/.test(model)) {
 +            const formData = new FormData();
 +            for (const [key, value] of Object.entries(body)) {
 +                formData.append(key, String(value));
 +            }
 +            apiRequest.body = formData;
 +        } else {
 +            apiRequest.headers = { ...apiRequest.headers, 'Content-Type': 'application/json' };
 +            apiRequest.body = JSON.stringify(body);
 +        }
++
 +        const result = await fetch(apiUrl, apiRequest);
 +        if (!result.ok) {
 +            const text = await result.text();
 +            console.warn('Cloudflare Workers AI returned an error.', result.status, result.statusText, text);
 +            return response.status(500).send(text);
 +        }
++
 +        const contentType = result.headers.get('content-type') || '';
++
 +        // Partner models return JSON with base64 image
 +        if (contentType.includes('application/json')) {
 +            /** @type {any} */
 +            const data = await result.json();
 +            const image = data?.result?.image || data?.image;
 +            if (!image) {
 +                console.warn('Cloudflare Workers AI returned JSON without image data.');
 +                return response.sendStatus(500);
 +            }
 +            return response.send({ format: 'png', image: image });
 +        }
++
 +        // Non-partner models return raw binary image data
 +        const buffer = await result.arrayBuffer();
 +        return response.send({ format: 'png', image: Buffer.from(buffer).toString('base64') });
 +    } catch (error) {
 +        console.error(error);
 +        return response.sendStatus(500);
 +    }
 +});
++
 router.use('/comfy', comfy);
 router.use('/comfyrunpod', comfyRunPod);
 router.use('/together', together);

 router.use('/xai', xai);
 router.use('/aimlapi', aimlapi);
 router.use('/zai', zai);
 +router.use('/workersai', workersai);