1/**
2 * This application creates a client-side interface for uploading multiple image files
3 * and generating a PDF containing those images. It uses the following approach:
4 *
5 * 1. Create a simple HTML form for file input
6 * 2. Use JavaScript to handle file selection and PDF generation
7 * 3. Utilize the jsPDF library for PDF creation
8 * 4. Use the FileReader API to read image files
9 *
10 * The application will not modify or convert the images, and each PDF page
11 * will be sized according to the corresponding image dimensions.
12 */
13
22 <meta charset="UTF-8">
23 <meta name="viewport" content="width=device-width, initial-scale=1.0">
24 <title>Image to PDF Converter</title>
25 <link rel="stylesheet" href="/styles.css">
26 <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
29<body>
30 <div class="container">
31 <h1>Image to PDF Converter</h1>
32 <input type="file" id="imageInput" accept="image/*" multiple>
33 <button id="convertBtn">Convert to PDF</button>
34 </div>
86const { jsPDF } = window.jspdf;
87
88const imageInput = document.getElementById('imageInput');
89const convertBtn = document.getElementById('convertBtn');
90
92
93async function convertToPDF() {
94 const files = imageInput.files;
95 if (files.length === 0) {
96 alert('Please select at least one image file.');
97 return;
98 }
99
100 const [file0] = files;
101 const img0 = await loadImage(file0);
102
103 const pdf = new jsPDF({
112 for (let i = 0; i < files.length; i++) {
113 const file = files[i];
114 const img = await loadImage(file);
115
116 if (i) pdf.addPage([img.width, img.height]);
117 pdf.addImage(img, 'AVIF', 0, 0, img.width, img.height);
118 }
119
120 pdf.save('images.pdf');
121}
122
130}
131
132function loadImage(blob) {
133 return new Promise((resolve, reject) => {
134 const src = URL.createObjectURL(blob);
135 const img = new Image();
136 img.onload = () => resolve(img);
137 img.onerror = (e) => reject(e);
124 role: "system",
125 content:
126 `Describe an image that depicts the ${adjective} children's story about a ${color} colored ${animal}: ${summary}.
127 The description should be descriptive, but three short sentences.
128 Just give me the instructions, don't make an image.`,
129 },
130 ],
143 // fast-lightning-sdxl
144 const options = {
145 "image_size": "square",
146 "num_images": 1,
147 "num_inference_steps": 6,
148 "enable_safety_checker": true,
149 };
150 // {"num_images": 1,
151 // "guidance_scale": 9.5,
152 // "num_inference_steps": 20,
153 // "expand_prompt": true }
154 const result: any = await fal.run(`fal-ai/${falModel}`, { input: { prompt }, options });
155 const url = result.images[0].url;
156
157 return url;
162 title: ogData?.title || "Bedtime Story Maker",
163 description: ogData?.description || "",
164 image: ogData?.image || "",
165 url: ogData?.url || `https://dthyresson-bedtimestorymaker.web.val.run/bedtime_stories}`,
166 };
480 title,
481 description: summary,
482 image: pictureUrl,
483 url: `https://dthyresson-bedtimestorymaker.web.val.run/bedtime_stories/read/${id}`,
484 };
10 const lastMsg = req.query.at(-1);
11 if (lastMsg && lastMsg.attachments.length !== 2) {
12 yield events.replace("No image recieved");
13 yield html;
14 yield events.done();
15 return;
16 }
17 yield events.replace("Generating image");
18 let success = null;
19 let error = null;
20 const input = {
21 image: lastMsg.attachments.at(0).url,
22 mask: lastMsg.attachments.at(1).url,
23 prompt: lastMsg.content.trim() || "cute kitty",
36 let i = 0;
37 while (!success && !error) {
38 yield events.replace("Generating image (" + (i++) + ")");
39 await sleep(1000);
40 }
43 if (success && Array.isArray(success)) {
44 for (const url of success) {
45 // yield markdown image
46 yield `\n`;
47 }
48 }
12 const [year, setYear] = useState(bike?.year || "");
13 const [lastMaintenance, setLastMaintenance] = useState(bike?.lastMaintenance || "");
14 const [imageUrl, setImageUrl] = useState(bike?.imageUrl || "");
15
16 const handleSubmit = (e) => {
23 year: parseInt(year),
24 lastMaintenance,
25 imageUrl
26 });
27 };
94 </div>
95 <div className="field-row-stacked" style={{width: '200px'}}>
96 <label htmlFor="edit-image">Image URL</label>
97 <input
98 id="edit-image"
99 type="url"
100 value={imageUrl}
101 onChange={(e) => setImageUrl(e.target.value)}
102 />
103 </div>
198 if (db && bikes.length === 0) {
199 const initialBikes = [
200 { brand: "Trek", model: "Domane", type: "Road", year: 2022, imageUrl: "https://maxm-imggenurl.web.val.run/trek-domane-road-bike" },
201 { brand: "Specialized", model: "Stumpjumper", type: "Mountain", year: 2021, imageUrl: "https://maxm-imggenurl.web.val.run/specialized-stumpjumper-mountain-bike" },
202 { brand: "Cannondale", model: "CAAD13", type: "Road", year: 2023, imageUrl: "https://maxm-imggenurl.web.val.run/cannondale-caad13-road-bike" },
203 { brand: "Giant", model: "Trance", type: "Mountain", year: 2022, imageUrl: "https://maxm-imggenurl.web.val.run/giant-trance-mountain-bike" },
204 { brand: "Bianchi", model: "Oltre", type: "Road", year: 2023, imageUrl: "https://maxm-imggenurl.web.val.run/bianchi-oltre-road-bike" },
205 { brand: "Santa Cruz", model: "Hightower", type: "Mountain", year: 2021, imageUrl: "https://maxm-imggenurl.web.val.run/santa-cruz-hightower-mountain-bike" },
206 { brand: "Cervélo", model: "S5", type: "Road", year: 2022, imageUrl: "https://maxm-imggenurl.web.val.run/cervelo-s5-road-bike" },
207 { brand: "Yeti", model: "SB150", type: "Mountain", year: 2023, imageUrl: "https://maxm-imggenurl.web.val.run/yeti-sb150-mountain-bike" },
208 { brand: "Pinarello", model: "Dogma F", type: "Road", year: 2023, imageUrl: "https://maxm-imggenurl.web.val.run/pinarello-dogma-f-road-bike" },
209 { brand: "BMC", model: "Fourstroke", type: "Mountain", year: 2022, imageUrl: "https://maxm-imggenurl.web.val.run/bmc-fourstroke-mountain-bike" }
210 ];
211
262 <thead>
263 <tr>
264 <th>Image</th>
265 <th>Brand</th>
266 <th>Model</th>
275 <tr key={bike.id}>
276 <td>
277 {bike.imageUrl && (
278 <img src={bike.imageUrl} alt={`${bike.brand} ${bike.model}`} style={{ width: '50px', height: '50px', objectFit: 'cover' }} />
279 )}
280 </td>
