Proyectos de Subversion Moodle

// This file is part of Moodle - http://moodle.org/

//

// Moodle is free software: you can redistribute it and/or modify

// it under the terms of the GNU General Public License as published by

// the Free Software Foundation, either version 3 of the License, or

// (at your option) any later version.

//

// Moodle is distributed in the hope that it will be useful,

// but WITHOUT ANY WARRANTY; without even the implied warranty of

// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the

// GNU General Public License for more details.

//

// You should have received a copy of the GNU General Public License

// along with Moodle.  If not, see <http://www.gnu.org/licenses/>.

/**

 * Tiny AI generate images.

 *

 * @module      tiny_aiplacement/generateimage

 * @copyright   2024 Matt Porritt <matt.porritt@moodle.com>

 * @license     http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later

 */

import ImageModal from 'tiny_aiplacement/imagemodal';

import Ajax from 'core/ajax';

import {getString} from 'core/str';

import Templates from 'core/templates';

import AiMediaImage from './mediaimage';

import {getContextId} from 'tiny_aiplacement/options';

import GenerateBase from 'tiny_aiplacement/generatebase';

export default class GenerateImage extends GenerateBase {

    SELECTORS = {

        GENERATEBUTTON: () => `[id="${this.editor.id}_tiny_aiplacement_generatebutton"]`,

        PROMPTAREA: () => `[id="${this.editor.id}_tiny_aiplacement_imageprompt"]`,

        IMAGECONTAINER: () => `[id="${this.editor.id}_tiny_aiplacement_generate_image"]`,

        GENERATEBTN: '[data-action="generate"]',

        INSERTBTN: '[data-action="inserter"]',

        BACKTBTN: '[data-action="back"]',

        GENERATEDIMAGE: () => `[id="${this.editor.id}_tiny_generated_image"]`,

    };

    imageURL = null;

    getModalClass() {

        return ImageModal;

    }

    /**

     * Handle click events within the image modal.

     *

     * @param {Event} e - The click event object.

     * @param {HTMLElement} root - The root element of the modal.

     */

    handleContentModalClick(e, root) {

        const actions = {

            generate: () => this.handleSubmit(root, e.target),

            inserter: () => this.handleInsert(),

            cancel: () => this.modalObject.destroy(),

            back: () => {

                this.modalObject.destroy();

                this.displayContentModal();

            },

        };

        const actionKey = Object.keys(actions).find(key => e.target.closest(`[data-action="${key}"]`));

        if (actionKey) {

            e.preventDefault();

            actions[actionKey]();

        }

    }

    /**

     * Set up the prompt area in the modal, adding necessary event listeners.

     *

     * @param {HTMLElement} root - The root element of the modal.

     */

    setupPromptArea(root) {

        const generateBtn = root.querySelector(this.SELECTORS.GENERATEBUTTON());

        const promptArea = root.querySelector(this.SELECTORS.PROMPTAREA());

        promptArea.addEventListener('input', () => {

            generateBtn.disabled = promptArea.value.trim() === '';

        });

    }

    /**

     * Handle the submit action.

     *

     * @param {Object} root The root element of the modal.

     * @param {Object} submitBtn The submit button element.

     */

    async handleSubmit(root, submitBtn) {

        await this.displayLoading(root, submitBtn);

        const displayArgs = this.getDisplayArgs(root);

        const request = {

            methodname: 'aiplacement_editor_generate_image',

            args: displayArgs

        };

        try {

            this.responseObj = await Ajax.call([request])[0];

            if (this.responseObj.error) {

                this.handleGenerationError(root, submitBtn, '');

            } else {

                await this.displayGeneratedImage(root);

                await this.hideLoading(root, submitBtn);

                // Focus the container for accessibility.

                const imageDisplayContainer = root.querySelector(this.SELECTORS.IMAGECONTAINER());

                imageDisplayContainer.focus();

            }

        } catch (error) {

            this.handleGenerationError(root, submitBtn, '');

        }

    }

    /**

     * Handle the insert action.

     *

     */

    async handleInsert() {

        // Use the revised prompt for the image alt text if it is available in the response.

        const revisedPrompt = this.responseObj.revisedprompt;

        const altTextToUse = revisedPrompt ? revisedPrompt : this.promptText;

        const mediaImage = new AiMediaImage(this.editor, this.imageURL, altTextToUse);

        await mediaImage.displayDialogue();

        this.modalObject.destroy();

    }

    /**

     * Handle a generation error.

     *

     * @param {Object} root The root element of the modal.

     * @param {Object} submitBtn The submit button element.

     * @param {String} errorMessage The error message to display.

     */

    async handleGenerationError(root, submitBtn, errorMessage = '') {

        if (!errorMessage) {

            // Get the default error message.

            errorMessage = await getString('errorgeneral', 'tiny_aiplacement');

        }

        this.modalObject.setBody(await Templates.render('tiny_aiplacement/modalbodyerror', {'errorMessage': errorMessage}));

        const backBtn = root.querySelector(this.SELECTORS.BACKTBTN);

        const generateBtn = root.querySelector(this.SELECTORS.GENERATEBUTTON());

        backBtn.classList.remove('hidden');

        generateBtn.classList.add('hidden');

        await this.hideLoading(root, submitBtn);

        // Focus the back button for accessibility.

        backBtn.focus();

    }

    /**

     * Display the generated image in the modal.

     *

     * @param {HTMLElement} root - The root element of the modal.

     */

    async displayGeneratedImage(root) {

        const imageDisplayContainer = root.querySelector(this.SELECTORS.IMAGECONTAINER());

        const insertBtn = root.querySelector(this.SELECTORS.INSERTBTN);

        // Set the draft URL as it's used elsewhere.

        this.imageURL = this.responseObj.drafturl;

        // Render the image template and insert it into the modal.

        imageDisplayContainer.innerHTML = await Templates.render('tiny_aiplacement/image', {

            url: this.responseObj.drafturl,

            elementid: this.editor.id,

            alt: this.promptText,

        });

        const imagElement = root.querySelector(this.SELECTORS.GENERATEDIMAGE());

        return new Promise((resolve, reject) => {

            imagElement.onload = () => {

                insertBtn.classList.remove('hidden');

                imagElement.focus();

                resolve(); // Resolve the promise when the image is loaded.

            };

            imagElement.onerror = (error) => {

                reject(error); // Reject the promise if there is an error loading the image.

            };

        });

    }

    /**

     * Get the display args for the image.

     *

     * @param {Object} root The root element of the modal.

     */

    getDisplayArgs(root) {

        const contextId = getContextId(this.editor);

        const promptText = root.querySelector(this.SELECTORS.PROMPTAREA()).value;

        this.promptText = promptText;

        const aspectRatio = this.getSelectedRadioValue('aspect-ratio', 'square');

        const imageQuality = this.getSelectedRadioValue('quality', 'standard');

        return {

            contextid: contextId,

            prompttext: promptText,

            aspectratio: aspectRatio,

            quality: imageQuality,

            numimages: 1

        };

    }

    /**

     * Get the value of the selected radio button.

     *

     * @param {String} radioName The name of the radio button group.

     * @param {String} defaultValue The default value of the radio button.

     */

    getSelectedRadioValue(radioName, defaultValue = null) {

        const radios = document.getElementsByName(radioName);

        for (const radio of radios) {

            if (radio.checked) {

                return radio.value;

            }

        }

        return defaultValue;

    }

}