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">
+            <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"></select>
+                        <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">
+                        <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">
+                        <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">
+                        <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">
+                        <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">
+                <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">
+                        <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">
+                        <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-i18n="Model">Model</label>
+                    <label for="sd_model" class="flex-container justifySpaceBetween">
-                    <select id="sd_model"></select>
+                        <span data-i18n="Model">Model</span>
+                        <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"></select>
+                    <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"></select>
+                    <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"></select>
+                    <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"><!-- Populated in JS --></select>
+                    <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"></select>
+                    <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);