Merge pull request #2866 from ceruleandeep/feature/hordeModelInfo Display model metadata in Horde model picker

38d24f4b5903b288a1a885f5f6867106250b4bb9

Cohee <18619528+Cohee1207@users.noreply.github.com>

Signed

Parents: dcbaa0787d895b4cbe158c8ae22675cc22b8235c a73b8077f6b6a1d9027d3c798c5936b1c3a347f4

public/scripts/horde.js+79 -19 Viewed

 import {
     saveSettingsDebouncedamount_gen,
     callPopup,
 -    setGenerationProgress,
     getRequestHeaders,
     max_context,
     amount_gensaveSettingsDebounced,
 +    setGenerationProgress,
 } from '../script.js';
 import { SECRET_KEYS, writeSecret } from './secrets.js';
 import { delay } from './utils.js';

         headers: getRequestHeaders(),
         body: JSON.stringify({ force }),
     });
     const data =return await response.json();
 -    return data;
+}
 /**

         body: JSON.stringify({ force }),
     });
     const data = await response.json();
 +    console.log('getModels', data);
     return data;
+}
++
 /**
  * Gets the status of a Horde task.
  * @param {string} taskId Task ID
  * @returns {Promise<Object>} Task status
  */
 async function getTaskStatus(taskId) {
     const response =   await fetch('/api/horde/task-status', {
         method: 'POST',
         headers: getRequestHeaders(),
         body: JSON.stringify({ taskId }),

@@ -80,8 +81,7 @@ async function getTaskStatus(taskId) {
80	81	throw new Error(`Failed to get task status: ${response.statusText}`);
81	82	}
82	83
83	84	const data =return await response.json();
84		- return data;
85	85	}
86	86
87	87	/**

     for (const model of selectedModels) {
         for (const worker of workers) {
             if (model.cluster === worker.cluster && worker.models.includes(model.name)) {
                 // Skip workers that are not trusted if the option is enabled
                 if (horde_settings.trusted_workers_only && !worker.trusted) {
                     continue;

             console.log(generatedText);
             console.log(`Generated by Horde Worker: ${WorkerName} [${WorkerModel}]`);
             return { text: generatedText, workerName: `Generated by Horde worker: ${WorkerName} [${WorkerModel}]` };
 -        }
 +        } else if (!queue_position_first) {
 -        else if (!queue_position_first) {
             queue_position_first = statusCheckJson.queue_position;
             reportProgress && setGenerationProgress(0);
 -        }
 +        } else if (statusCheckJson.queue_position >= 0) {
 -        else if (statusCheckJson.queue_position >= 0) {
             let queue_position = statusCheckJson.queue_position;
             const progress = Math.round(100 - (queue_position / queue_position_first * 100));
             reportProgress && setGenerationProgress(progress);

     throw new Error('Horde timeout');
+}
++
 /**
  * Displays the available models in the Horde model selection dropdown.
  * @param {boolean} force Force refresh of the models
  */
 async function getHordeModels(force) {
 +    const sortByPerformance = (a, b) => b.performance - a.performance;
 +    const sortByWhitelisted = (a, b) => b.is_whitelisted - a.is_whitelisted;
 +    const sortByPopular = (a, b) => b.tags?.includes('popular') - a.tags?.includes('popular');
++
     $('#horde_model').empty();
     models = (await getModels(force)).sort((a, b) => b.performance - a.performance);{
 +        return sortByWhitelisted(a, b) || sortByPopular(a, b) || sortByPerformance(a, b);
 +    });
     for (const model of models) {
         const option = document.createElement('option');
         option.value = model.name;
 -        option.innerText = `${model.name} (ETA: ${model.eta}s, Speed: ${model.performance}, Queue: ${model.queued}, Workers: ${model.count})`;
 +        option.innerText = hordeModelTextString(model);
         option.selected = horde_settings.models.includes(model.name);
         $('#horde_model').append(option);
+    }

     toastr.info(`Kudos: ${data.kudos}`, data.username);
+}
 +function hordeModelTextString(model) {
 +    const q = hordeModelQueueStateString(model);
 +    return `${model.name} (${q})`;
 +}
++
 +function hordeModelQueueStateString(model) {
 +    return `ETA: ${model.eta}s, Speed: ${model.performance}, Queue: ${model.queued}, Workers: ${model.count}`;
 +}
++
 +function getHordeModelTemplate(option) {
 +    const model = models.find(x => x.name === option?.element?.value);
++
 +    if (!option.id || !model) {
 +        console.debug('No model found for option', option, option?.element?.value);
 +        console.debug('Models', models);
 +        return option.text;
 +    }
++
 +    const strip = html => {
 +        const tmp = document.createElement('DIV');
 +        tmp.innerHTML = html || '';
 +        return tmp.textContent || tmp.innerText || '';
 +    };
++
 +    // how much do we trust the metadata from the models repo? about this much
 +    const displayName = strip(model.display_name || model.name).replace(/.*\//g, '');
 +    const description = strip(model.description);
 +    const tags = model.tags ? model.tags.map(strip) : [];
 +    const url = strip(model.url);
 +    const style = strip(model.style);
++
 +    const workerInfo = hordeModelQueueStateString(model);
 +    const isPopular = model.tags?.includes('popular');
 +    const descriptionDiv = description ? `<div class="horde-model-description">${description}</div>` : '';
 +    const tagSpans = tags.length > 0 &&
 +        `${tags.map(tag => `<span class="tag tag_name">${tag}</span>`).join('')}</span>` || '';
++
 +    const modelDetailsLink = url && `<a href="${url}" target="_blank" rel="noopener noreferrer" class="model-details-link fa-solid fa-circle-question"> </a>`;
 +    const capitalize = s => s ? s[0].toUpperCase() + s.slice(1) : '';
 +    const innerContent = [
 +        `<strong>${displayName}</strong> ${modelDetailsLink}`,
 +        style ? `${capitalize(style)}` : '',
 +        tagSpans ? `<span class="tags tags_inline inline-flex margin-r2">${tagSpans}</span>` : '',
 +    ].filter(Boolean).join(' | ');
++
 +    return $((`
 +        <div class="flex-container flexFlowColumn">
 +            <div>
 +                ${isPopular ? '<span class="fa-fw fa-solid fa-star" title="Popular"></span>' : ''}
 +                ${innerContent}
 +            </div>
 +            ${descriptionDiv}
 +            <div><small>${workerInfo}</small></div>
 +        </div>
 +    `));
 +}
++
 jQuery(function () {
     $('#horde_model').on('mousedown change', async function (e) {
 +        console.log('Horde model change', e);
         horde_settings.models = $('#horde_model').val();
         console.log('Updated Horde models', horde_settings.models);

                 // Customize the pillbox text by shortening the full text
                 return data.id;
             },
 -            templateResult: function (data) {
 +            templateResult: getHordeModelTemplate,
 -                // Return the full text for the dropdown
 -                return data.text;
 -            },
         });
+    }
 });

public/style.css+8 -0 Viewed

     column-gap: 20px;
+}
 +.horde-model-description {
 +    -webkit-line-clamp: 3;
 +    line-clamp: 3;
 +    font-size: 0.9em;
 +    overflow: hidden;
 +    text-overflow: ellipsis;
 +}
++
 .drag-handle {
     cursor: grab;
     /* Make the drag handle not selectable in most browsers */

src/endpoints/horde.js+29 -4 Viewed

 const { jsonParser } = require('../express-common');
 const ANONYMOUS_KEY = '0000000000';
 +const HORDE_TEXT_MODEL_METADATA_URL = 'https://raw.githubusercontent.com/db0/AI-Horde-text-model-reference/main/db.json';
 const cache = new Cache(60 * 1000);
 const router = express.Router();

  * @returns {Promise<AIHorde>} AIHorde client
  */
 async function getHordeClient() {
     const ai_horde =return new AIHorde({
         client_agent: await getClientAgent(),
     });
 -    return ai_horde;
+}
 /**

+    }
 });
 +async function getHordeTextModelMetadata() {
 +    const response = await fetch(HORDE_TEXT_MODEL_METADATA_URL);
 +    return await response.json();
 +}
++
 +async function mergeModelsAndMetadata(models, metadata) {
 +    return models.map(model => {
 +        const metadataModel = metadata[model.name];
 +        if (!metadataModel) {
 +            return  { ...model, is_whitelisted: false };
 +        }
 +        return { ...model, ...metadataModel, is_whitelisted: true };
 +    });
 +}
++
 router.post('/text-models', jsonParser, async (request, response) => {
     try {
         const cachedModels = cache.get('models');
+-
         if (cachedModels && !request.body.force) {
             return response.send(cachedModels);
+        }

             },
         });
         constlet data = await fetchResult.json();
++
 +        // attempt to fetch and merge models metadata
 +        try {
 +            const metadata = await getHordeTextModelMetadata();
 +            data = await mergeModelsAndMetadata(data, metadata);
 +        }
 +        catch (error) {
 +            console.error('Failed to fetch metadata:', error);
 +        }
++
         cache.set('models', data);
         return response.send(data);
     } catch (error) {

         console.log('Stable Horde request:', request.body);
         const ai_horde = await getHordeClient();
 +        // noinspection JSCheckFunctionSignatures -- see @ts-ignore - use_gfpgan
         const generation = await ai_horde.postAsyncImageGenerate(
+            {
                 prompt: `${request.body.prompt} ### ${request.body.negative_prompt}`,