Val Town Code SearchReturn to Val Town

6const TMDB_API_KEY = "3fd2be6f0c70a2a598f084ddfb75487c"; // Public read-only key
7const TMDB_BASE_URL = "https://api.themoviedb.org/3";
8const TMDB_IMAGE_BASE_URL = "https://image.tmdb.org/t/p/w500";
9
10// Expanded list of Indian languages and alternative search terms
248          >
249            <img 
250              src={`${TMDB_IMAGE_BASE_URL}${actor.profile_path}`} 
251              alt={actor.name}
252              style={{
284              >
285                <img 
286                  src={`${TMDB_IMAGE_BASE_URL}${movie.poster_path}`} 
287                  alt={movie.title}
288                  style={{

4
5<div align="center">
6<img src="https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/67a1d35e-c37c-41a4-0e5a-03a9ba585d00/public" width="700px"/>
7</div>

8
9<div align="center">
10<img src="https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/67a1d35e-c37c-41a4-0e5a-03a9ba585d00/public" width="500px"/>
11</div>

18  * Response.redirect is broken. Use `return new Response(null, { status: 302, headers: { Location: "/place/to/redirect" }})`
19
20  * Avoid external images or base64 images, use emojis, unicode symtols, or icon fonts/libraries instead, unless that's  not practical for the user's request (e.g. if they ask for a particular animated gif).
21
22  * If you want an AI generated image, use https://maxm-imggenurl.web.val.run/the-description-of-your-image to dynamically generate one.
23
24  * DO NOT use the Deno KV module for storage.

1/**
2 * This application creates a thumbnail maker using Hono for server-side routing and client-side JavaScript for image processing.
3 * It allows users to upload images, specify output options, and generate a composite thumbnail image.
4 * The app uses the HTML5 Canvas API for image manipulation and supports drag-and-drop functionality.
5 * 
6 * The process is divided into two steps:
7 * 1. Generating thumbnails: Users choose thumbnail size options and create individual thumbnails.
8 * 2. Rendering: Users can create and export the final composite image with options for format and quality.
9 * This two-step process allows changing format or quality without re-rendering the entire canvas.
10 * 
33    <h1>Thumbnail Maker</h1>
34    <div id="dropZone">
35      <p>📷 Drag & drop images here or click to select</p>
36      <input type="file" id="fileInput" multiple accept="image/*">
37    </div>
38    <div id="thumbnailOptions">
57        Output Format:
58        <select id="outputFormat">
59          <option value="image/png">PNG</option>
60          <option value="image/jpeg">JPEG</option>
61          <option value="image/webp">WebP</option>
62        </select>
63      </label><br>
74      <button id="downloadMetadataBtn">Download Metadata</button>
75    </div>
76    <div id="imagePreview"></div>
77  </div>
78</body>
138select {
139  appearance: none;
140  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M10.293 3.293L6 7.586 1.707 3.293A1 1 0 00.293 4.707l5 5a1 1 0 001.414 0l5-5a1 1 0 10-1.414-1.414z' fill='%23333'/%3E%3C/svg%3E");
141  background-repeat: no-repeat;
142  background-position: right 10px center;
204}
205
206#imagePreview {
207  margin-top: 20px;
208  text-align: center;
209}
210
211#imagePreview img {
212  max-width: 100%;
213  height: auto;
231const keepAspectRatio = document.getElementById('keepAspectRatio');
232const thumbWidth = document.getElementById('thumbWidth');
233const imagePreview = document.getElementById('imagePreview');
234const thumbnailOptions = document.getElementById('thumbnailOptions');
235const renderOptions = document.getElementById('renderOptions');
249  renderOptions.style.display = 'none';
250  downloadSection.style.display = 'none';
251  imagePreview.innerHTML = '';
252  thumbnailCanvas = null;
253  thumbnailMetadata = null;
274  event.preventDefault();
275  dropZone.classList.remove('drag-over');
276  files = Array.from(event.dataTransfer.files).filter(file => file.type.startsWith('image/'));
277  resetToStep1();
278});
289  progressBar.value = 0;
290
291  const image0 = await getImage(files[0]);
292  const cols = Math.ceil(Math.sqrt(files.length));
293  const rows = Math.ceil(files.length / cols);
294  const tHeight = parseInt(thumbHeight.value);
295  let tWidth = keepAspectRatio.checked
296    ? Math.floor(tHeight / image0.height * image0.width)
297    : parseInt(thumbWidth.value);
298
300  const canvasHeight = rows * tHeight;
301
302  image0.revoke();
303
304  thumbnailCanvas = new OffscreenCanvas(canvasWidth, canvasHeight);
310    const row = Math.floor(i / cols);
311
312    const img = await getImage(file);
313    ctx.drawImage(img, col * tWidth, row * tHeight, tWidth, tHeight);
314    img.revoke();
315
343  const blob = await thumbnailCanvas.convertToBlob({
344    type: outputFormat.value,
345    quality: outputFormat.value !== 'image/png' ? parseFloat(outputQuality.value) : undefined
346  });
347
351  downloadSection.style.display = 'flex';
352
353  // Display the generated image
354  const img = document.createElement('img');
355  img.src = url;
356  imagePreview.innerHTML = '';
357  imagePreview.appendChild(img);
358
359  progressBar.style.display = 'none';
375});
376
377function getImage(file) {
378  return new Promise((resolve) => {
379    const url = URL.createObjectURL(file);
380    const img = new Image();
381    img.revoke = () => URL.revokeObjectURL(url);
382    img.onload = () => resolve(img);

24    Category?: string;
25    Tags?: string | string[];
26    "Card Image"?: AirtableAttachment[];
27    "Intro Image"?: AirtableAttachment[];
28    "Body Image 1"?: AirtableAttachment[];
29    "Body Image 2"?: AirtableAttachment[];
30    "Body Image 3"?: AirtableAttachment[];
31    "Quote or Emphasized Text 1"?: string;
32    "Quote or Emphasized Text 2"?: string;
166                <p className="mb-2">{item.fields.ShortCardText}</p>
167                <p className="text-sm text-gray-600 mb-4">Read time: {item.fields.ReadTime}</p>
168                {item.fields["Card Image"] && item.fields["Card Image"][0] && (
169                  <img
170                    src={item.fields["Card Image"][0].url}
171                    alt={item.fields.Title}
172                    className="w-full h-48 object-cover rounded-md mb-4"

16  <meta charset="UTF-8">
17  <meta name="viewport" content="width=device-width, initial-scale=1.0">
18  <link rel="icon" type="image/png" href="https://labspace.ai/ls2-circle.png" />
19  <title>GitHub Repository Parser</title>
20  <meta property="og:title" content="GitHub Repository Parser" />
21  <meta property="og:description" content="Parse and analyze GitHub repositories with ease." />
22  <meta property="og:image" content="https://yawnxyz-og.web.val.run/img2?link=https://gh.labspace.ai/&title=GitHub+Parser&subtitle=Parse+and+analyze+GitHub+repos&attachment=https://f2.phage.directory/blogalog/gh-parser.jpg" />
23  <meta property="og:url" content="https://gh.labspace.ai" />
24  <meta property="og:type" content="website" />
25  <meta name="twitter:card" content="summary_large_image" />
26  <meta name="twitter:title" content="GitHub Repository Parser" />
27  <meta name="twitter:description" content="Parse and analyze GitHub repositories with ease." />
28  <meta name="twitter:image" content="https://yawnxyz-og.web.val.run/img2?link=https://gh.labspace.ai/&title=GitHub+Parser&subtitle=Parse+and+analyze+GitHub+repos&attachment=https://f2.phage.directory/blogalog/gh-parser.jpg" />
29  <script src="https://cdn.tailwindcss.com"></script>
30  <script src="https://unpkg.com/dexie@3.2.2/dist/dexie.js"></script>

1165        <meta property="og:description" content="Turn your ideas into fully functional apps in less than a second – powered by Llama3.3-70b on Cerebras's super-fast wafer chips. Code is 100% open-source, hosted on Val Town."">
1166        <meta property="og:type" content="website">
1167        <meta property="og:image" content="https://stevekrouse-blob_admin.web.val.run/api/public/CerebrasCoderOG.jpg">
1168        
1169            

3import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";
4
5// Main React component for the image upload application
6function App() {
7  // State variables to manage images, error messages, upload restrictions, and comments
8  const [images, setImages] = useState([]); // Stores uploaded images
9  const [error, setError] = useState(null); // Stores error messages
10  const [canUpload, setCanUpload] = useState(true); // Controls upload ability
11  const [showComments, setShowComments] = useState(false); // Controls comment visibility
12  const [comments, setComments] = useState([]); // Stores comments for images
13  const [newComment, setNewComment] = useState(''); // Stores new comment input
14  const [username, setUsername] = useState(''); // Stores username
19  const [uploadProgress, setUploadProgress] = useState(0); // Upload progress
20  const [isUploading, setIsUploading] = useState(false); // Upload in progress flag
21  const [currentPage, setCurrentPage] = useState(1); // Current page of images
22  const [totalPages, setTotalPages] = useState(0); // Total pages of images
23
24  // Load username from localStorage on component mount
25  useEffect(() => {
26    const storedUsername = localStorage.getItem('imageAppUsername');
27    if (storedUsername) {
28      setUsername(storedUsername);
31  }, []);
32
33  // Fetch images and comments when the component first loads or page changes
34  useEffect(() => {
35    fetchImages();
36    fetchComments();
37  }, [currentPage]);
38
39  // Function to retrieve images from the server with pagination
40  const fetchImages = async () => {
41    try {
42      const response = await fetch(`/images?page=${currentPage}`);
43      const data = await response.json();
44      setImages(data.images);
45      setTotalPages(data.totalPages);
46    } catch (err) {
47      setError("Could not fetch images");
48      console.error("Image fetch error:", err);
49    }
50  };
74    // Validate file types and sizes
75    const validFiles = files.filter(file => 
76      file.type.startsWith('image/') && 
77      file.size <= 5 * 1024 * 1024 // 5MB max file size
78    );
108        const uploadPromises = batch.map(async (file) => {
109          const formData = new FormData();
110          formData.append('image', file);
111          formData.append('username', username);
112
127      }
128
129      // Refresh images after upload
130      await fetchImages();
131      
132      // Reset upload states
160  return (
161    <div style={{ maxWidth: '800px', margin: 'auto', padding: '20px' }}>
162      <h1>🖼️ Bulk Image Uploader 📸</h1>
163      
164      {/* Username setup (existing code) */}
177          type="file" 
178          multiple 
179          accept="image/*"
180          onChange={handleFileSelect}
181          disabled={!isUsernameSet || isUploading}
269async function handleUpload(request, sqlite, KEY, TABLE_VERSION) {
270  const formData = await request.formData();
271  const image = formData.get('image') as File;
272  const username = formData.get('username') as string;
273
274  if (!image || !(image instanceof File)) {
275    return new Response(JSON.stringify({ message: "No image uploaded" }), { 
276      status: 400,
277      headers: { 'Content-Type': 'application/json' }
279  }
280
281  const arrayBuffer = await image.arrayBuffer();
282  const base64Image = btoa(String.fromCharCode.apply(null, new Uint8Array(arrayBuffer)));
283  const dataUrl = `data:${image.type};base64,${base64Image}`;
284
285  await sqlite.execute(`
286    INSERT INTO ${KEY}_images_${TABLE_VERSION} (image_url, username) VALUES (?, ?)
287  `, [dataUrl, username]);
288
292}
293
294async function handleGetImages(sqlite, KEY, TABLE_VERSION, page = 1, pageSize = 100) {
295  const offset = (page - 1) * pageSize;
296
297  // Get total number of images
298  const totalCountResult = await sqlite.execute(`
299    SELECT COUNT(*) as total 
300    FROM ${KEY}_images_${TABLE_VERSION}
301  `);
302  const totalImages = totalCountResult.rows[0].total;
303  const totalPages = Math.ceil(totalImages / pageSize);
304
305  // Get paginated images
306  const images = await sqlite.execute(`
307    SELECT id, image_url, username 
308    FROM ${KEY}_images_${TABLE_VERSION} 
309    ORDER BY uploaded_at DESC 
310    LIMIT ? OFFSET ?
312
313  return new Response(JSON.stringify({ 
314    images: images.rows,
315    totalPages: totalPages,
316    currentPage: page
321
322// Modify the server switch statement to pass page parameter
323case '/images':
324  if (request.method !== 'GET') break;
325  const url = new URL(request.url);
326  const page = parseInt(url.searchParams.get('page') || '1', 10);
327  return await handleGetImages(sqlite, KEY, TABLE_VERSION, page);

14
15<img 
16  src="https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/d2a422fe-8dc3-4f04-aaa3-3c35a2e99100/public" 
17  width="500px"
18/>
50where they can pick which way to login: email, Google, Github, etc.
51
52![Screenshot 2024-08-08 at 08.48.41.gif](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/36674739-cd88-472c-df16-cd0b3a62bc00/public)
53
54[Live Demo](https://www.val.town/v/stevekrouse/lastlogin_demo)