Val Town Code SearchReturn to Val Town

1An API and basic interface for entity searching from DBPedia, enhanced with images

62      "User-Agent":
63        "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/121.0.0.0 Safari/537.36",
64      "Accept": "text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8",
65      "Accept-Language": "en-US,en;q=0.5",
66      "Sec-Fetch-Site": "cross-site",

6const subreddits = ["IdiotsInCars"];
7
8const fetchWithImage = async (subreddit: string) => {
9  const { data: { children } } = await fetchJSON(
10    `https://www.reddit.com/r/${subreddit}.json`,
13  const posts = children
14    .map((child: any) => child.data)
15    .filter((post: any) => post.post_hint === "image")
16    .map((post: any) => ({
17      title: post.title,
25
26const fetchAllReddits = async () => {
27  const posts = (await Promise.all(subreddits.map(fetchWithImage))).flat();
28  return posts;
29};
30
31function ImageGrid({ posts }) {
32  return (
33    <div className="image-grid">
34      {posts.map((post, index) => (
35        <div key={index} className="image-item">
36          <img src={post.url} alt={post.title} />
37        </div>
51  return (
52    <div>
53      <ImageGrid posts={posts} />
54    </div>
55  );
93body { font-family: Arial, sans-serif; margin: 0; padding: 20px; background-color: #f0f0f0; }
94h1 { text-align: center; color: #333; }
95.image-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; }
96.image-item { position: relative; border-radius: 8px; overflow: hidden; box-shadow: 0 4px 8px rgba(0,0,0,0.1); transition: transform 0.3s ease; }
97.image-item:hover { transform: scale(1.05); }
98.image-item img { width: 100%; height: 250px; object-fit: cover; display: block; }
99`;

1Migrated from folder: ExamplesAndForks/redditImageGrab

6const subreddits = ["Battletops", "AverageBattlestations", "desksetup"];
7
8const fetchWithImage = async (subreddit: string) => {
9  const { data: { children } } = await fetchJSON(
10    `https://www.reddit.com/r/${subreddit}.json`,
13  const posts = children
14    .map((child: any) => child.data)
15    .filter((post: any) => post.post_hint === "image")
16    .map((post: any) => ({
17      title: post.title,
25
26const fetchAllReddits = async () => {
27  const posts = (await Promise.all(subreddits.map(fetchWithImage))).flat();
28  return posts;
29};
30
31function ImageGrid({ posts }) {
32  return (
33    <div className="image-grid">
34      {posts.map((post, index) => (
35        <div key={index} className="image-item">
36          <img src={post.url} alt={post.title} />
37        </div>
51  return (
52    <div>
53      <ImageGrid posts={posts} />
54    </div>
55  );
93body { font-family: Arial, sans-serif; margin: 0; padding: 20px; background-color: #f0f0f0; }
94h1 { text-align: center; color: #333; }
95.image-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; }
96.image-item { position: relative; border-radius: 8px; overflow: hidden; box-shadow: 0 4px 8px rgba(0,0,0,0.1); transition: transform 0.3s ease; }
97.image-item:hover { transform: scale(1.05); }
98.image-item img { width: 100%; height: 250px; object-fit: cover; display: block; }
99`;

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 

3This Todo App is server rendered *and* client-hydrated React. This architecture is a lightweight alternative to NextJS, RemixJS, or other React metaframeworks with no compile or build step. The data is saved server-side in [Val Town SQLite](https://docs.val.town/std/sqlite/).
4
5![demo](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/3bbc3a39-9017-4a95-797b-2f205aa57f00/public)
6
7## SSR React Mini Framework

3This is a lightweight Blob Admin interface to view and debug your Blob data.
4
5![b7321ca2cd80899250589b9aa08bc3cae9c7cea276282561194e7fc537259b46.png](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/311a81bb-18d8-4583-b7e3-64bac326f700/public)
6
7Use this button to install the val:

6    const url = new URL(req.url)
7    // console.log("url:", url)
8    const isImage = url.pathname.endsWith("/image")
9
10    if (isImage) {
11      const imageUrl = "https://charlypoly-httpapiscreenshotpageexample.web.val.run/?url=" + url.origin
12      // return Response.redirect(imageUrl, 302)
13      const res = await fetch(imageUrl)
14      const blob = await res.blob()
15      return new Response(blob, { headers: { "Content-Type": "image/png" } })
16    }
17
20    const baseUrl = url.origin
21    const homeFrame = {
22      image: `/${randomPostfix}/image`,
23      aspectRatio: "1:1",
24      buttons: [
31        <head>
32          <title>${title}</title>
33          <meta property="og:image" content="${url.origin}/${randomPostfix}/image" />
34          <meta property="og:image:width" content="800" />
35          <meta property="og:image:height" content="800" />
36          <meta name="twitter:card" content="summary_large_image" />
37          ${frameHtml(homeFrame, baseUrl)}
38          <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.10.0/p5.min.js" integrity="sha512-lvddmeF7aHRJwdbJeYThWd5kWSjTrXBzCRF/jYROiHzmhMJ1dEXfGH5Q7ft0yhizXTopAETG03s5ajTflauijA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

1// This app uses the fal.ai API to generate images based on user prompts.
2// It features a clean UI with an input field for the prompt and a button to generate the image.
3// The generated image is displayed below the input field.
4// React is used for the UI and the fal.ai serverless client for image generation.
5// The app measures and displays the latency for each image generation.
6// The background features randomly placed pixelart lightning bolts in neon yellow.
7
17const BOLT_SIZE = 40; // Width and height of each bolt
18const DEFAULT_PROMPT = "green grass landscape with text \"val.town\" is engraved, a townhouse in the background";
19const PLACEHOLDER_IMAGE = "https://fal.media/files/penguin/PysYf1-_ddhM7JKiLrkcF.png";
20const RATE_LIMIT = 15; // requests per hour
21const RATE_LIMIT_WINDOW = 5 * 60 * 1000; // 5 minutes in milliseconds
72function App() {
73  const [prompt, setPrompt] = useState(DEFAULT_PROMPT);
74  const [imageUrl, setImageUrl] = useState(PLACEHOLDER_IMAGE);
75  const [latency, setLatency] = useState<number | null>(null);
76  const [loading, setLoading] = useState(false);
77  const [error, setError] = useState("");
78
79  const generateImage = async () => {
80    setLoading(true);
81    setError("");
87      });
88      const data = await response.json();
89      if (!response.ok) throw new Error(data.error || "Failed to generate image");
90      setLatency(data.latency);
91      setImageUrl(data.imageUrl);
92      setError(""); // Clear any previous errors
93    } catch (err) {
103      <Background />
104      <div className="container">
105        <h1 className="title">AI Image Generator</h1>
106        <div className="input-container">
107          <input
113          />
114        </div>
115        <button onClick={generateImage} disabled={loading || !prompt} className="generate-btn">
116          {loading ? "Generating..." : "Generate Image"}
117        </button>
118        {error && <p className="error">{error}</p>}
119        <div className="image-container">
120          {latency !== null && (
121            <p className="latency">Inference time (doesn't include network): {latency.toFixed(2)} ms</p>
123          {loading
124            ? <LoadingSpinner />
125            : <img src={imageUrl} alt="Generated image" className="generated-image" />}
126        </div>
127        <div className="footer">
193        input: {
194          prompt,
195          image_size: "landscape_4_3",
196          num_inference_steps: 4,
197          num_images: 1,
198          enable_safety_checker: true,
199          sync_mode: true,
201      });
202      return new Response(
203        JSON.stringify({ imageUrl: result.images[0].url, latency: result.timings.inference * 1000 }),
204        {
205          headers: { "Content-Type": "application/json" },
207      );
208    } catch (error) {
209      return new Response(JSON.stringify({ error: "Failed to generate image" }), {
210        status: 500,
211        headers: { "Content-Type": "application/json" },
221        <meta charset="UTF-8">
222        <meta name="viewport" content="width=device-width, initial-scale=1.0">
223        <title>AI Image Generator</title>
224        <style>${css}</style>
225      </head>
315    text-align: center;
316  }
317  .image-container {
318    margin-top: 20px;
319    text-align: center;
322    border-radius: 10px;
323  }
324  .generated-image {
325    max-width: 100%;
326    height: auto;