Spaces:

Jeffgold
/

2gif-maker

Running

App Files Files Community

Jeffgold commited on Jul 12

Commit

c171f35

•

1 Parent(s): 94e4b50

Update templates/index.js

Browse files

Files changed (1) hide show

templates/index.js +260 -0

templates/index.js CHANGED Viewed

	@@ -0,0 +1,260 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Image Slider Animation with Server-Side GIF Generation</title>
+    <link href="https://unpkg.com/cropperjs/dist/cropper.css" rel="stylesheet">
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            padding: 20px;
+            background-color: #f0f0f0;
+        }
+        .input-group {
+            margin-bottom: 10px;
+            display: flex;
+            align-items: center;
+        }
+        input[type="file"] {
+            margin-left: 10px;
+        }
+        img.thumbnail {
+            margin-left: 10px;
+            width: 100px;
+            height: 100px;
+            object-fit: cover;
+            border: 1px solid #ccc;
+        }
+        button {
+            margin-top: 10px;
+            padding: 10px 20px;
+        }
+        #imageEditorModal {
+            display: none;
+            position: fixed;
+            left: 50%;
+            transform: translateX(-50%);
+            bottom: 3rem;
+            width: 70%;
+            background: #fff;
+            box-shadow: 0 0 10px rgba(0,0,0,0.5);
+            padding: 20px;
+            z-index: 1000;
+            text-align: center;
+        }
+        #cropImage {
+            max-width: 100%;
+            height: auto;
+        }
+        #generatedGif {
+            margin-top: 20px;
+        }
+    </style>
+</head>
+<body>
+    <div class="input-group">
+        <label>Image 1:</label>
+        <input type="file" id="image1Input" accept="image/*">
+        <img id="image1Thumbnail" class="thumbnail" alt="Image 1 Thumbnail">
+    </div>
+    <div class="input-group">
+        <label>Image 2:</label>
+        <input type="file" id="image2Input" accept="image/*">
+        <img id="image2Thumbnail" class="thumbnail" alt="Image 2 Thumbnail">
+    </div>
+    <div class="input-group">
+        <label>Transition Type:</label>
+        <select id="transitionType">
+            <option value="default">Sliding</option>
+            <option value="rotate">Rotating</option>
+        </select>
+    </div>
+    <canvas id="canvas" width="256" height="256" style="display: none;"></canvas>
+    <img id="generatedGif" alt="Generated GIF" style="display: none;">
+    <button id="downloadGif" style="display: none;">Download GIF</button>
+    <div id="status"></div>
+    <!-- Image editor modal -->
+    <div id="imageEditorModal">
+        <img id="cropImage" src="" alt="Image to crop">
+        <br>
+        <button id="cropButton">Crop</button>
+    </div>
+    <script src="https://unpkg.com/cropperjs"></script>
+    <script>
+        const canvas = document.getElementById('canvas');
+        const ctx = canvas.getContext('2d');
+        const statusDiv = document.getElementById('status');
+        const imageEditorModal = document.getElementById('imageEditorModal');
+        const cropImage = document.getElementById('cropImage');
+        const cropButton = document.getElementById('cropButton');
+        const image1Thumbnail = document.getElementById('image1Thumbnail');
+        const image2Thumbnail = document.getElementById('image2Thumbnail');
+        const generatedGif = document.getElementById('generatedGif');
+        const downloadGifButton = document.getElementById('downloadGif');
+        const transitionTypeSelect = document.getElementById('transitionType');
+        let cropper;
+        let currentImageInput;
+        let currentThumbnail;
+        let croppedImages = {
+            'image1': null,
+            'image2': null
+        };
+        const defaultImages = {
+            'image1': 'https://th.bing.com/th/id/OIG1.jQk9obHLZDzKMIQQi_p3?pid=ImgGn',
+            'image2': 'https://th.bing.com/th/id/OIG4.Pyn6Qnls3A8X.VgxaLIn?pid=ImgGn'
+        };
+        function showImageEditor(imageSrc) {
+            cropImage.src = imageSrc;
+            imageEditorModal.style.display = 'block';
+            cropper = new Cropper(cropImage, {
+                aspectRatio: 1,
+                viewMode: 1
+            });
+        }
+        function hideImageEditor() {
+            if (cropper) {
+                cropper.destroy();
+            }
+            imageEditorModal.style.display = 'none';
+        }
+        function dataURLtoFile(dataurl, filename) {
+            const arr = dataurl.split(',');
+            const mime = arr[0].match(/:(.*?);/)[1];
+            const bstr = atob(arr[1]);
+            let n = bstr.length;
+            const u8arr = new Uint8Array(n);
+            while (n--) {
+                u8arr[n] = bstr.charCodeAt(n);
+            }
+            return new File([u8arr], filename, { type: mime });
+        }
+        function loadImage(input, callback) {
+            if (input.files && input.files[0]) {
+                const reader = new FileReader();
+                reader.onload = function (e) {
+                    callback(e.target.result);
+                }
+                reader.readAsDataURL(input.files[0]);
+            }
+        }
+        function handleImageUpload(input, thumbnail, key) {
+            loadImage(input, (imageSrc) => {
+                currentImageInput = input;
+                currentThumbnail = thumbnail;
+                showImageEditor(imageSrc);
+                currentThumbnail.dataset.key = key;
+            });
+        }
+        image1Input.addEventListener('change', function () {
+            handleImageUpload(image1Input, image1Thumbnail, 'image1');
+        });
+        image2Input.addEventListener('change', function () {
+            handleImageUpload(image2Input, image2Thumbnail, 'image2');
+        });
+        cropButton.addEventListener('click', function () {
+            const croppedCanvas = cropper.getCroppedCanvas();
+            const croppedImage = croppedCanvas.toDataURL('image/png');
+            const originalFileName = currentImageInput.files[0].name;
+            const croppedFileName = originalFileName.replace(/\.[^/.]+$/, "") + "_crop.png";
+            const file = dataURLtoFile(croppedImage, croppedFileName);
+            const key = currentThumbnail.dataset.key;
+            croppedImages[key] = file;
+            currentThumbnail.src = croppedImage;
+            hideImageEditor();
+            // Replace the current image input file with the cropped file
+            const dataTransfer = new DataTransfer();
+            dataTransfer.items.add(file);
+            currentImageInput.files = dataTransfer.files;
+            generateGif();
+        });
+        transitionTypeSelect.addEventListener('change', function () {
+            generateGif();
+        });
+        function generateGif() {
+            statusDiv.textContent = 'Generating GIF...';
+            const formData = new FormData();
+            formData.append('images', croppedImages['image1'] || dataURLtoFile(defaultImages['image1'], 'image1_default.png'));
+            formData.append('images', croppedImages['image2'] || dataURLtoFile(defaultImages['image2'], 'image2_default.png'));
+            formData.append('transition_type', transitionTypeSelect.value);
+            fetch('/generate_gif', {
+                method: 'POST',
+                body: formData
+            })
+            .then(response => {
+                if (response.ok) {
+                    return response.blob();
+                } else {
+                    return response.json().then(errorData => { throw new Error(errorData.error); });
+                }
+            })
+            .then(blob => {
+                const url = URL.createObjectURL(blob);
+                generatedGif.src = url;
+                generatedGif.style.display = 'block';
+                downloadGifButton.style.display = 'block';
+                downloadGifButton.onclick = () => {
+                    const a = document.createElement('a');
+                    a.href = url;
+                    a.download = 'animation.gif';
+                    document.body.appendChild(a);
+                    a.click();
+                    document.body.removeChild(a);
+                };
+                statusDiv.textContent = '';
+            })
+            .catch(error => {
+                statusDiv.textContent = 'Error generating GIF: ' + error.message;
+                console.error('Error generating GIF:', error);
+            });
+        }
+        // Load default images
+        function loadDefaultImages() {
+            image1Thumbnail.src = defaultImages['image1'];
+            image2Thumbnail.src = defaultImages['image2'];
+            fetch(defaultImages['image1'])
+                .then(response => response.blob())
+                .then(blob => {
+                    const file = new File([blob], 'image1_default.png', { type: 'image/png' });
+                    croppedImages['image1'] = file;
+                });
+            fetch(defaultImages['image2'])
+                .then(response => response.blob())
+                .then(blob => {
+                    const file = new File([blob], 'image2_default.png', { type: 'image/png' });
+                    croppedImages['image2'] = file;
+                })
+                .then(() => {
+                    generateGif();
+                });
+        }
+        window.onload = loadDefaultImages;
+    </script>
+</body>
+</html>