Update app.py
Browse files
app.py
CHANGED
|
@@ -1,8 +1,9 @@
|
|
| 1 |
import os
|
| 2 |
-
from flask import Flask, request,
|
| 3 |
from io import BytesIO
|
| 4 |
from PIL import Image
|
| 5 |
from imageio import mimwrite
|
|
|
|
| 6 |
|
| 7 |
app = Flask(__name__)
|
| 8 |
|
|
@@ -25,19 +26,51 @@ HTML_CONTENT = """
|
|
| 25 |
<body>
|
| 26 |
<div class="container">
|
| 27 |
<h1>GIF Generator</h1>
|
| 28 |
-
<form
|
| 29 |
<input type="file" name="images" accept="image/*" multiple>
|
| 30 |
<input type="number" name="fps" placeholder="Frames per second" value="10" min="1" max="60">
|
| 31 |
-
<button type="
|
| 32 |
</form>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 33 |
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 34 |
</body>
|
| 35 |
</html>
|
| 36 |
"""
|
| 37 |
|
| 38 |
@app.route('/', methods=['GET'])
|
| 39 |
def index():
|
| 40 |
-
|
| 41 |
|
| 42 |
@app.route('/upload', methods=['POST'])
|
| 43 |
def upload():
|
|
@@ -74,12 +107,10 @@ def upload():
|
|
| 74 |
gif_bytes = BytesIO()
|
| 75 |
mimwrite(gif_bytes, [img for img in resized_images], format='GIF', fps=fps)
|
| 76 |
gif_bytes.seek(0)
|
|
|
|
|
|
|
| 77 |
|
| 78 |
-
return
|
| 79 |
-
gif_bytes,
|
| 80 |
-
mimetype='image/gif',
|
| 81 |
-
download_name='animated.gif'
|
| 82 |
-
)
|
| 83 |
|
| 84 |
except Exception as e:
|
| 85 |
print(f"Error during upload: {e}")
|
|
|
|
| 1 |
import os
|
| 2 |
+
from flask import Flask, request, jsonify, render_template
|
| 3 |
from io import BytesIO
|
| 4 |
from PIL import Image
|
| 5 |
from imageio import mimwrite
|
| 6 |
+
import base64
|
| 7 |
|
| 8 |
app = Flask(__name__)
|
| 9 |
|
|
|
|
| 26 |
<body>
|
| 27 |
<div class="container">
|
| 28 |
<h1>GIF Generator</h1>
|
| 29 |
+
<form id="upload-form" enctype="multipart/form-data">
|
| 30 |
<input type="file" name="images" accept="image/*" multiple>
|
| 31 |
<input type="number" name="fps" placeholder="Frames per second" value="10" min="1" max="60">
|
| 32 |
+
<button type="button" id="generate-button">Generate GIF</button>
|
| 33 |
</form>
|
| 34 |
+
<div id="gif-container" style="display:none;">
|
| 35 |
+
<a id="download-link" href="#" download="animated.gif">
|
| 36 |
+
<button>Download GIF</button>
|
| 37 |
+
</a>
|
| 38 |
+
</div>
|
| 39 |
</div>
|
| 40 |
+
<script>
|
| 41 |
+
document.getElementById('generate-button').addEventListener('click', async () => {
|
| 42 |
+
const form = document.getElementById('upload-form');
|
| 43 |
+
const formData = new FormData(form);
|
| 44 |
+
|
| 45 |
+
try {
|
| 46 |
+
const response = await fetch('/upload', {
|
| 47 |
+
method: 'POST',
|
| 48 |
+
body: formData
|
| 49 |
+
});
|
| 50 |
+
|
| 51 |
+
if (response.ok) {
|
| 52 |
+
const data = await response.json();
|
| 53 |
+
const gifContainer = document.getElementById('gif-container');
|
| 54 |
+
const downloadLink = document.getElementById('download-link');
|
| 55 |
+
downloadLink.href = data.gif_url;
|
| 56 |
+
gifContainer.style.display = 'block';
|
| 57 |
+
} else {
|
| 58 |
+
const errorText = await response.text();
|
| 59 |
+
alert('Error generating GIF: ' + errorText);
|
| 60 |
+
}
|
| 61 |
+
} catch (error) {
|
| 62 |
+
console.error('Fetch error:', error);
|
| 63 |
+
alert('An error occurred during the request.');
|
| 64 |
+
}
|
| 65 |
+
});
|
| 66 |
+
</script>
|
| 67 |
</body>
|
| 68 |
</html>
|
| 69 |
"""
|
| 70 |
|
| 71 |
@app.route('/', methods=['GET'])
|
| 72 |
def index():
|
| 73 |
+
return HTML_CONTENT
|
| 74 |
|
| 75 |
@app.route('/upload', methods=['POST'])
|
| 76 |
def upload():
|
|
|
|
| 107 |
gif_bytes = BytesIO()
|
| 108 |
mimwrite(gif_bytes, [img for img in resized_images], format='GIF', fps=fps)
|
| 109 |
gif_bytes.seek(0)
|
| 110 |
+
gif_base64 = base64.b64encode(gif_bytes.read()).decode('utf-8')
|
| 111 |
+
gif_url = f'data:image/gif;base64,{gif_base64}'
|
| 112 |
|
| 113 |
+
return jsonify({'gif_url': gif_url})
|
|
|
|
|
|
|
|
|
|
|
|
|
| 114 |
|
| 115 |
except Exception as e:
|
| 116 |
print(f"Error during upload: {e}")
|