Val Town Code SearchReturn to Val Town

55      city: "Mumbai",
56      profession: "Software Engineer",
57      profileImage:
58        "https://maxm-imggenurl.web.val.run/indian-male-professional-headshot-28-years-old-tech-professional",
59    },
65      city: "Delhi",
66      profession: "Marketing Manager",
67      profileImage:
68        "https://maxm-imggenurl.web.val.run/indian-female-professional-headshot-32-years-old-corporate-leader",
69    },
75      city: "Ahmedabad",
76      profession: "Entrepreneur",
77      profileImage: "https://maxm-imggenurl.web.val.run/indian-male-entrepreneur-headshot-25-years-old-startup-founder",
78    },
79    {
84      city: "Bangalore",
85      profession: "Data Scientist",
86      profileImage:
87        "https://maxm-imggenurl.web.val.run/indian-female-tech-professional-headshot-29-years-old-data-scientist",
88    },
98              <div className="winner-season">{winner.season}</div>
99              <img
100                src={winner.profileImage}
101                alt={winner.winner}
102                className="winner-profile-image"
103              />
104            </div>
255
256.game-show-platform.background-variant-0 {
257  background-image: 
258    radial-gradient(ellipse at top, rgba(255,23,68,0.1) 0%, transparent 50%),
259    radial-gradient(ellipse at bottom, rgba(124,77,255,0.1) 0%, transparent 50%);
261
262.game-show-platform.background-variant-1 {
263  background-image: 
264    radial-gradient(ellipse at top right, rgba(0,229,255,0.1) 0%, transparent 50%),
265    radial-gradient(ellipse at bottom left, rgba(124,77,255,0.1) 0%, transparent 50%);
267
268.game-show-platform.background-variant-2 {
269  background-image: 
270    radial-gradient(ellipse at top left, rgba(124,77,255,0.1) 0%, transparent 50%),
271    radial-gradient(ellipse at bottom right, rgba(255,23,68,0.1) 0%, transparent 50%);
280  align-items: center;
281  border-bottom: 2px solid transparent;
282  border-image: var(--cyber-gradient-2) 1;
283}
284
371}
372
373.winner-profile-image {
374  width: 100%;
375  height: 100%;
379}
380
381.winner-profile-card:hover .winner-profile-image {
382  transform: scale(1.1);
383}

23    try {
24      const safePrompt = encodeURIComponent(prompt || suggestedPrompts[0]);
25      const imageUrl = `https://maxm-imggenurl.web.val.run/${safePrompt}`;
26      
27      // Prefetch image to ensure it loads
28      const response = await fetch(imageUrl);
29      if (!response.ok) {
30        throw new Error('Failed to generate image');
31      }
32      
33      setWallpaper(imageUrl);
34    } catch (err) {
35      setError(err instanceof Error ? err.message : 'An unknown error occurred');

9  const generateWallpaper = async () => {
10    const safePrompt = encodeURIComponent(prompt || "beautiful landscape");
11    const imageUrl = `https://maxm-imggenurl.web.val.run/${safePrompt}`;
12    setWallpaper(imageUrl);
13  };
14

9  const generateWallpaper = async () => {
10    const safePrompt = encodeURIComponent(prompt || "beautiful landscape");
11    const imageUrl = `https://maxm-imggenurl.web.val.run/${safePrompt}`;
12    setWallpaper(imageUrl);
13  };
14

3View and interact with your Val Town SQLite data. It's based off Steve's excellent [SQLite Admin](https://www.val.town/v/stevekrouse/sqlite_admin?v=46) val, adding the ability to run SQLite queries directly in the interface. This new version has a revised UI and that's heavily inspired by [LibSQL Studio](https://github.com/invisal/libsql-studio) by [invisal](https://github.com/invisal). This is now more an SPA, with tables, queries and results showing up on the same page. 
4
5![image.webp](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/c8e102fd-39ca-4bfb-372a-8d36daf43900/public)
6
7## Install 

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

4import { jsPDF } from "https://esm.sh/jspdf@2.5.1";
5
6function ImageToPDFConverter() {
7  const [size, setSize] = useState('A4');
8  const [customWidth, setCustomWidth] = useState('');
16
17  const handleConvert = () => {
18    const image = fileInputRef.current?.files?.[0];
19    if (!image) {
20      setResult('Please select an image');
21      return;
22    }
41      });
42
43      const img = new Image();
44      img.onload = () => {
45        pdf.addImage(img, 'JPEG', 0, 0, width, height);
46        const pdfFile = pdf.output('blob');
47        const link = document.createElement('a');
53      img.src = e.target.result as string;
54    };
55    reader.readAsDataURL(image);
56  };
57
58  return (
59    <div className="container">
60      <h2>Image to PDF Converter</h2>
61      <p>Convert your images to PDF files with specific sizes.</p>
62      <div className="mb-3">
63        <label htmlFor="imageInput" className="form-label">Select Image:</label>
64        <input 
65          className="form-control" 
66          type="file" 
67          id="imageInput" 
68          accept="image/*" 
69          ref={fileInputRef}
70        />
121        <meta charSet="UTF-8" />
122        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
123        <title>Image to PDF Converter</title>
124        <link 
125          rel="stylesheet" 
130      <body>
131        <div id="root">
132          <ImageToPDFConverter />
133        </div>
134        <script 
152  if (root) {
153    import("https://esm.sh/react-dom@18.2.0/client").then(({ createRoot }) => {
154      createRoot(root).render(<ImageToPDFConverter />);
155    });
156  }

4import { jsPDF } from "https://esm.sh/jspdf@2.5.1";
5
6function ImageToPDFConverter() {
7  const [size, setSize] = useState('A4');
8  const [customWidth, setCustomWidth] = useState('');
16
17  const handleConvert = () => {
18    const image = fileInputRef.current?.files?.[0];
19    if (!image) {
20      setResult('Please select an image');
21      return;
22    }
41      });
42
43      const img = new Image();
44      img.onload = () => {
45        pdf.addImage(img, 'JPEG', 0, 0, width, height);
46        const pdfFile = pdf.output('blob');
47        const link = document.createElement('a');
53      img.src = e.target.result as string;
54    };
55    reader.readAsDataURL(image);
56  };
57
58  return (
59    <div className="container">
60      <h2>Image to PDF Converter</h2>
61      <p>Convert your images to PDF files with specific sizes.</p>
62      <div className="mb-3">
63        <label htmlFor="imageInput" className="form-label">Select Image:</label>
64        <input 
65          className="form-control" 
66          type="file" 
67          id="imageInput" 
68          accept="image/*" 
69          ref={fileInputRef}
70        />
121        <meta charSet="UTF-8" />
122        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
123        <title>Image to PDF Converter</title>
124        <link 
125          rel="stylesheet" 
130      <body>
131        <div id="root">
132          <ImageToPDFConverter />
133        </div>
134        <script 
152  if (root) {
153    import("https://esm.sh/react-dom@18.2.0/client").then(({ createRoot }) => {
154      createRoot(root).render(<ImageToPDFConverter />);
155    });
156  }

3This is a lightweight Blob Admin interface to view and debug your Blob data.
4
5![Screenshot 2024-11-22 at 15.43.43@2x.png](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/d075a4ee-93ec-4cdd-4823-7c8aee593f00/public)
6
7Versions 0-17 of this val were done with Hono and server-rendering. 

440          {profile && (
441            <div className="flex items-center space-x-4">
442              <img src={profile.profileImageUrl} alt="Profile" className="w-8 h-8 rounded-full" />
443              <span>{profile.username}</span>
444              <a href="/auth/logout" className="text-blue-400 hover:text-blue-300">Logout</a>
583                            alt="Blob content"
584                            className="max-w-full h-auto"
585                            onError={() => console.error("Error loading image")}
586                          />
587                        </div>
635                  <li>Create public shareable links for blobs</li>
636                  <li>View and manage public folder</li>
637                  <li>Preview images directly in the interface</li>
638                </ul>
639              </div>
694  const { ValTown } = await import("npm:@valtown/sdk");
695  const vt = new ValTown();
696  const { email: authorEmail, profileImageUrl, username } = await vt.me.profile.retrieve();
697  // const authorEmail = me.email;
698
762
763  c.set("email", email);
764  c.set("profile", { profileImageUrl, username });
765  await next();
766};