Val Town Code SearchReturn to Val Town

vtProjectSearchimport.ts2 matches

@dcm31•Updated 1 day ago

35          username: user.username,
36          bio: user.bio,
37          profile_image_url: user.profileImageUrl,
38          url: user.url,
39          updated_at: new Date().toISOString(), // Using current time as the API doesn't provide updated_at
53      name: val.name,
54      description: val.description,
55      image_url: val.imageUrl,
56      username: val.author.username || "",
57      updated_at: mainBranch?.updatedAt || new Date().toISOString(),

vtProjectSearchcomponents.tsx15 matches

@dcm31•Updated 1 day ago

220      <div className="result-header">
221        <div className="result-header-content">
222          {result.image_url && (
223            <div className="val-image">
224              <img src={result.image_url} alt={result.val_name} />
225            </div>
226          )}
298      <div className="result-header">
299        <div className="result-header-content">
300          {result.image_url && (
301            <div className="val-image">
302              <img src={result.image_url} alt={result.name} />
303            </div>
304          )}
371      <div className="result-header">
372        <div className="user-header">
373          {result.profile_image_url && (
374            <div className="user-avatar">
375              <img src={result.profile_image_url} alt={result.username || "User"} />
376            </div>
377          )}
1243                          <a href="?q=api" className="example-link">api</a>
1244                          <a href="?q=database" className="example-link">database</a>
1245                          <a href="?q=image" className="example-link">image</a>
1246                          <a href="?q=function" className="example-link">function</a>
1247                          <a href="?q=discord" className="example-link">discord</a>
1308                                  <div className="contributor-header">
1309                                    <div className="contributor-avatar">
1310                                      {contributor.profile_image_url
1311                                        ? <img src={contributor.profile_image_url} alt={contributor.username} />
1312                                        : (
1313                                          <div
1357                                  rel="noopener noreferrer"
1358                                >
1359                                  <div className="val-image">
1360                                    {val.image_url
1361                                      ? <img src={val.image_url} alt={val.name} />
1362                                      : (
1363                                        <div
1398                        <a href="?q=api" className="example-link">api</a>
1399                        <a href="?q=database" className="example-link">database</a>
1400                        <a href="?q=image" className="example-link">image</a>
1401                        <a href="?q=function" className="example-link">function</a>
1402                        <a href="?q=discord" className="example-link">discord</a>

3    <source media="(prefers-color-scheme: dark)" srcset="https://mintlify.s3.us-west-1.amazonaws.com/autoblocks/logo/dark.png">
4    <source media="(prefers-color-scheme: light)" srcset="https://mintlify.s3.us-west-1.amazonaws.com/autoblocks/logo/light.png">
5    <img alt="Autoblocks Logo" width="300px" src="https://app.autoblocks.ai/images/logo-black.png">
6  </picture>
7</p>

19    status: 301,
20    headers: {
21      Location: user?.profileImageUrl || UnknownUserProfile,
22    },
23  });

72        cover: {
73          external: {
74            url: imageURL,
75          },
76        },
102
103          Poster: {
104            files: [{ name: "Poster", external: { url: imageURL } }],
105          },
106

3It's common to have code and types that are needed on both the frontend and the backend. It's important that you write this code in a particularly defensive way because it's limited by what both environments support:
4
5![shapes at 25-02-25 11.57.13.png](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/75db1d51-d9b3-45e0-d178-25d886c10700/public)
6
7For example, you *cannot* use the `Deno` keyword. For imports, you can't use `npm:` specifiers, so we reccomend `https://esm.sh` because it works on the server & client. You *can* use TypeScript because that is transpiled in `/backend/index.ts` for the frontend. Most code that works on the frontend tends to work in Deno, because Deno is designed to support "web-standards", but there are definitely edge cases to look out for.

21## `favicon.svg`
22
23As of this writing Val Town only supports text files, which is why the favicon is an SVG and not an .ico or any other binary image format. If you need binary file storage, check out [Blob Storage](https://docs.val.town/std/blob/).
24
25## `components/`

73});
74
75// --- Blob Image Serving Routes ---
76
77// GET /api/images/:filename - Serve images from blob storage
78app.get("/api/images/:filename", async (c) => {
79  const filename = c.req.param("filename");
80
81  try {
82    // Get image data from blob storage
83    const imageData = await blob.get(filename);
84
85    if (!imageData) {
86      return c.json({ error: "Image not found" }, 404);
87    }
88
90    let contentType = "application/octet-stream"; // Default
91    if (filename.endsWith(".jpg") || filename.endsWith(".jpeg")) {
92      contentType = "image/jpeg";
93    } else if (filename.endsWith(".png")) {
94      contentType = "image/png";
95    } else if (filename.endsWith(".gif")) {
96      contentType = "image/gif";
97    } else if (filename.endsWith(".svg")) {
98      contentType = "image/svg+xml";
99    }
100
101    // Return the image with appropriate headers
102    return new Response(imageData, {
103      headers: {
104        "Content-Type": contentType,
107    });
108  } catch (error) {
109    console.error(`Error serving image ${filename}:`, error);
110    return c.json(
111      { error: "Failed to load image", details: error.message },
112      500,
113    );

10      href="/public/favicon.svg"
11      sizes="any"
12      type="image/svg+xml"
13    />
14    <link rel="preconnect" href="https://fonts.googleapis.com" />
36        height: 100%;
37        font-family: "Pixelify Sans", sans-serif;
38        image-rendering: pixelated;
39      }
40      body::before {
50      /* For pixel art aesthetic */
51      * {
52        image-rendering: pixelated;
53      }
54    </style>

12}
13
14type ImageSummary = {
15  sender: string;
16  recipient: (typeof RECIPIENTS)[number] | "both" | "other";
22  anthropic: Anthropic,
23  htmlContent: string,
24  imageSummaries: ImageSummary[]
25) {
26  try {
36              text: `Analyze the following content from an email and provide a response as a JSON blob (only JSON, no other text) with two parts.
37
38                The email is from the USPS showing mail I'm receiving. Metadata about packages is stored directly in the email. Info about mail pieces is in images, so I've included summaries of those as well.
39
40                Your response should include:
66              And here is info about the mail pieces:
67
68              ${JSON.stringify(imageSummaries)}`,
69            },
70          ],
95  const anthropic = new Anthropic({ apiKey });
96
97  // Process each image attachment serially
98  const summaries = [];
99  for (const [index, attachment] of e.attachments.entries()) {
100    try {
101      const imageData = await attachment.arrayBuffer();
102      const base64Image = btoa(
103        String.fromCharCode(...new Uint8Array(imageData))
104      );
105
112            content: [
113              {
114                type: "image",
115                source: {
116                  type: "base64",
117                  media_type: attachment.type,
118                  data: base64Image,
119                },
120              },
148      summaries.push(parsedResponse);
149    } catch (error) {
150      console.error(`Image analysis error:`, error);
151      summaries.push({
152        sender: "Error",
153        recipient: "Error",
154        type: "error",
155        notes: `Image ${index + 1} Analysis Failed: ${error.message}`,
156      });
157    }