Update README.md

README.md

@@ -12,20 +12,83 @@ widget:
     url: images/fadfea894bb82a4b3385f13f782c39f5.jpg
 base_model: black-forest-labs/FLUX.1-dev
 instance_prompt: trasher
-
 ---
+
 # Trasher
 
 <Gallery />
 
-
 ## Trigger words
 
 You should use `trasher` to trigger the image generation.
 
+## Imagen generada
+
+<div id="image-container">
+    <img id="generated-image" 
+         src="https://huggingface.co/Emuixom/Trasher_Riddick/resolve/main/images/fadfea894bb82a4b3385f13f782c39f5.jpg" 
+         alt="Generated Image" 
+         oncontextmenu="showContextMenu(event)" />
+</div>
+
+<div id="context-menu" style="display: none; position: absolute; background-color: #fff; border: 1px solid #ccc; z-index: 1000;">
+    <ul style="list-style: none; margin: 0; padding: 0;">
+        <li onclick="copyImage()">Copiar Imagen</li>
+        <li onclick="downloadImage()">Descargar Imagen</li>
+    </ul>
+</div>
 
 ## Download model
 
 Weights for this model are available in Safetensors format.
 
 [Download](/Emuixom/Trasher_Riddick/tree/main) them in the Files & versions tab.
+
+<script>
+    // Mostrar menú contextual
+    function showContextMenu(event) {
+        event.preventDefault();
+        const menu = document.getElementById('context-menu');
+        menu.style.display = 'block';
+        menu.style.left = `${event.pageX}px`;
+        menu.style.top = `${event.pageY}px`;
+    }
+
+    // Ocultar menú al hacer clic fuera
+    document.addEventListener('click', () => {
+        const menu = document.getElementById('context-menu');
+        menu.style.display = 'none';
+    });
+
+    // Función para copiar imagen
+    async function copyImage() {
+        const imgElement = document.getElementById('generated-image');
+        try {
+            const blob = await fetch(imgElement.src).then(res => res.blob());
+            const clipboardItem = new ClipboardItem({ "image/png": blob });
+            await navigator.clipboard.write([clipboardItem]);
+            alert('Imagen copiada al portapapeles');
+        } catch (error) {
+            console.error('Error al copiar la imagen:', error);
+            alert('Error al copiar la imagen');
+        }
+    }
+
+    // Función para descargar imagen
+    function downloadImage() {
+        const imgElement = document.getElementById('generated-image');
+        fetch(imgElement.src)
+            .then(response => response.blob())
+            .then(blob => {
+                const url = URL.createObjectURL(blob);
+                const a = document.createElement('a');
+                a.style.display = 'none';
+                a.href = url;
+                a.download = 'generated_image.png';
+                document.body.appendChild(a);
+                a.click();
+                URL.revokeObjectURL(url);
+            })
+            .catch(error => console.error('Error al descargar la imagen:', error));
+    }
+</script>