annotate mrjunejune/src/tools/file_converter/index.js @ 216:e82b80b24012 default tip

[MrJuneJune] Make webp translate background job.
author June Park <parkjune1995@gmail.com>
date Sat, 28 Feb 2026 21:04:43 -0800
parents be91a73d801a
children
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
rev   line source
93
be91a73d801a [MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
1 async function convertImageToWebP()
be91a73d801a [MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
2 {
be91a73d801a [MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
3 const input = document.getElementById('imageInput');
be91a73d801a [MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
4 const btn = document.getElementById('convertImageBtn');
be91a73d801a [MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
5 const loading = document.getElementById('imageLoading');
be91a73d801a [MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
6 const result = document.getElementById('imageResult');
be91a73d801a [MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
7 const message = document.getElementById('imageMessage');
be91a73d801a [MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
8 const download = document.getElementById('imageDownload');
be91a73d801a [MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
9
be91a73d801a [MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
10 if (!input.files || !input.files[0])
be91a73d801a [MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
11 {
be91a73d801a [MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
12 alert('Please select an image file first');
be91a73d801a [MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
13 return;
be91a73d801a [MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
14 }
be91a73d801a [MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
15
be91a73d801a [MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
16 const file = input.files[0];
be91a73d801a [MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
17
be91a73d801a [MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
18 // Show loading state
be91a73d801a [MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
19 btn.disabled = true;
be91a73d801a [MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
20 loading.classList.add('show');
be91a73d801a [MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
21 result.classList.remove('show', 'success', 'error');
be91a73d801a [MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
22 download.style.display = 'none';
be91a73d801a [MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
23
be91a73d801a [MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
24 try {
be91a73d801a [MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
25 const response = await fetch('/api/convert/image-to-webp', {
be91a73d801a [MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
26 method: 'POST',
be91a73d801a [MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
27 body: file,
be91a73d801a [MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
28 headers: {
be91a73d801a [MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
29 'Content-Type': file.type
be91a73d801a [MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
30 }
be91a73d801a [MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
31 });
be91a73d801a [MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
32
be91a73d801a [MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
33 loading.classList.remove('show');
be91a73d801a [MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
34 result.classList.add('show');
be91a73d801a [MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
35
be91a73d801a [MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
36 if (response.ok) {
be91a73d801a [MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
37 const data = await response.json();
be91a73d801a [MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
38
be91a73d801a [MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
39 download.href = data.download_url;
be91a73d801a [MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
40 download.download = file.name.replace(/\.[^/.]+$/, '') + '.webp';
be91a73d801a [MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
41 download.style.display = 'inline-block';
be91a73d801a [MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
42
be91a73d801a [MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
43 message.textContent = 'Conversion successful! Link expires in ' + data.expires + '.';
be91a73d801a [MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
44 result.classList.add('success');
be91a73d801a [MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
45 } else {
be91a73d801a [MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
46 const text = await response.text();
be91a73d801a [MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
47 message.textContent = 'Conversion failed: ' + text;
be91a73d801a [MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
48 result.classList.add('error');
be91a73d801a [MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
49 }
be91a73d801a [MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
50 } catch (error) {
be91a73d801a [MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
51 loading.classList.remove('show');
be91a73d801a [MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
52 result.classList.add('show', 'error');
be91a73d801a [MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
53 message.textContent = 'Error: ' + error.message;
be91a73d801a [MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
54 } finally {
be91a73d801a [MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
55 btn.disabled = false;
be91a73d801a [MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
56 }
be91a73d801a [MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
57 }
be91a73d801a [MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
58
be91a73d801a [MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
59 async function convertVideoToMP4() {
be91a73d801a [MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
60 const input = document.getElementById('videoInput');
be91a73d801a [MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
61 const btn = document.getElementById('convertVideoBtn');
be91a73d801a [MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
62 const loading = document.getElementById('videoLoading');
be91a73d801a [MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
63 const result = document.getElementById('videoResult');
be91a73d801a [MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
64 const message = document.getElementById('videoMessage');
be91a73d801a [MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
65 const download = document.getElementById('videoDownload');
be91a73d801a [MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
66
be91a73d801a [MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
67 if (!input.files || !input.files[0]) {
be91a73d801a [MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
68 alert('Please select a video file first');
be91a73d801a [MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
69 return;
be91a73d801a [MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
70 }
be91a73d801a [MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
71
be91a73d801a [MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
72 const file = input.files[0];
be91a73d801a [MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
73
be91a73d801a [MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
74 // Show loading state
be91a73d801a [MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
75 btn.disabled = true;
be91a73d801a [MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
76 loading.classList.add('show');
be91a73d801a [MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
77 result.classList.remove('show', 'success', 'error');
be91a73d801a [MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
78 download.style.display = 'none';
be91a73d801a [MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
79
be91a73d801a [MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
80 try {
be91a73d801a [MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
81 const response = await fetch('/api/convert/video-to-mp4', {
be91a73d801a [MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
82 method: 'POST',
be91a73d801a [MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
83 body: file,
be91a73d801a [MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
84 headers: {
be91a73d801a [MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
85 'Content-Type': file.type
be91a73d801a [MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
86 }
be91a73d801a [MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
87 });
be91a73d801a [MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
88
be91a73d801a [MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
89 loading.classList.remove('show');
be91a73d801a [MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
90 result.classList.add('show');
be91a73d801a [MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
91
be91a73d801a [MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
92 if (response.ok) {
be91a73d801a [MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
93 const data = await response.json();
be91a73d801a [MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
94
be91a73d801a [MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
95 download.href = data.download_url;
be91a73d801a [MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
96 download.download = file.name.replace(/\.[^/.]+$/, '') + '.mp4';
be91a73d801a [MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
97 download.style.display = 'inline-block';
be91a73d801a [MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
98
be91a73d801a [MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
99 message.textContent = 'Conversion successful! Link expires in ' + data.expires + '.';
be91a73d801a [MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
100 result.classList.add('success');
be91a73d801a [MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
101 } else {
be91a73d801a [MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
102 const text = await response.text();
be91a73d801a [MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
103 message.textContent = 'Conversion failed: ' + text;
be91a73d801a [MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
104 result.classList.add('error');
be91a73d801a [MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
105 }
be91a73d801a [MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
106 } catch (error) {
be91a73d801a [MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
107 loading.classList.remove('show');
be91a73d801a [MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
108 result.classList.add('show', 'error');
be91a73d801a [MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
109 message.textContent = 'Error: ' + error.message;
be91a73d801a [MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
110 } finally {
be91a73d801a [MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
111 btn.disabled = false;
be91a73d801a [MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
112 }
be91a73d801a [MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
113 }
be91a73d801a [MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
114