Val Town Code Search

guide main.tsx14 matches

@Get•Updated 1 week ago

16  name: string; // Name of the fantasy race
17  description: string; // Short description (1-2 sentences)
18  styleHint: string; // Keywords for image generation (e.g., "elven archer forest")
19  effectColor: string; // CSS hex color for UI effects (e.g., "#4A90E2")
20}
70    - 'name': The name of the race (string).
71    - 'description': A brief description (string, 1-2 sentences maximum).
72    - 'styleHint': 3-5 descriptive keywords for generating an image (string).
73    - 'effectColor': A valid CSS hexadecimal color code string (e.g., "#RRGGBB").
74
218    .race-card img {
219      width: 100%;
220      height: 60%; /* Image takes upper portion */
221      object-fit: cover;
222      display: block;
355      }
356      .race-card img {
357        height: 320px; /* Fixed image height on desktop */
358        border-radius: 16px 16px 0 0;
359      }
466      card.style.setProperty('--effect-color', safeEffectColor); // Set the CSS variable for this card
467
468      // --- Image Generation ---
469      // Construct URL for Val Town image generator (ensure this endpoint exists and works)
470      // Encode components to handle spaces and special characters in prompts
471      const prompt = encodeURIComponent(\`fantasy character portrait, \${safeStyleHint}, \${safeName}, detailed illustration, cinematic lighting\`);
472      const imageUrl = \`https://maxm-imggenurl.web.val.run/\${prompt}\`; // Replace with your actual image generation endpoint if different
473
474      // Fallback placeholder image using placehold.co (useful for debugging/offline)
475      const fallbackColor = safeEffectColor.substring(1); // Remove '#'
476      const fallbackUrl = \`https://placehold.co/380x320/\${fallbackColor}/1A1A1E?text=\${encodeURIComponent(safeName)}\`;
478      // --- Card HTML Structure ---
479      // Use template literal for clean HTML construction.
480      // Includes the image, effect container, and content area.
481      // The 'onerror' attribute on the img tag handles image loading failures gracefully.
482      card.innerHTML = \`
483        <img src="\${imageUrl}"
484             alt="Image of \${safeName}"
485             loading="lazy" onerror="this.onerror=null; this.src='\${fallbackUrl}'; console.warn('Image failed to load for \${safeName} (Prompt: \${decodeURIComponent(prompt)}). Using fallback.');">
486        <div class="\${EFFECT_CONTAINER_CLASS}">
487          <div class="energy-surge"></div>
660  function handleDragStart(e) {
661    if (isTransitioning) return; // Ignore drags during transitions
662    // Prevent dragging text/images on the page
663    if (e.target.tagName === 'IMG' || e.target.tagName === 'H3' || e.target.tagName === 'P') {
664        e.preventDefault();

reactHonoStarter index.html1 match

@bradnoble•Updated 1 week ago

6    <title>React Hono Val Town Starter</title>
7    <link rel="stylesheet" href="/public/style.css">
8    <link rel="icon" href="/public/favicon.svg" sizes="any" type="image/svg+xml">
9  </head>
10  <body>

polity main.tsx1 match

@salon•Updated 2 weeks ago

701      <meta name="viewport" content="width=device-width, initial-scale=1.0">
702      <title>🔗 Policy Analysis Tool</title>
703      <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🔗</text></svg>">
704      <style>${embeddedCss}</style>
705    </head>

faithfulTanEel main.tsx7 matches

@salon•Updated 2 weeks ago

9  name: string;
10  description: string;
11  styleHint: string; // Keywords for image generation prompt
12  effectColor: string; // CSS hex color for effects (e.g., "#4A90E2")
13}
55  const prompt = `
56    Generate a list of 4 distinct fantasy character races for an RPG character creator carousel.
57    For each race, provide: 'name', 'description' (2 short sentences), 'styleHint' (3-5 keywords for image generation), and 'effectColor' (a valid CSS hex color code string like "#RRGGBB").
58
59    Return the result STRICTLY as a single JSON object with one key "races", where the value is an array of objects, each representing a race.
244        const safeStyleHint = race.styleHint || safeName; // Fallback style hint to name
245
246        // Generate image URL using the Val Town image generator endpoint
247        const prompt = encodeURIComponent(\`fantasy character portrait \${safeStyleHint}, \${safeName}, high detail\`);
248        const imageUrl = \`https://maxm-imggenurl.web.val.run/\${prompt}\`;
249        // Fallback placeholder image URL
250        const fallbackUrl = \`https://placehold.co/380x320/\${effectColor.substring(1)}/ffffff?text=\${encodeURIComponent(safeName)}\`;
251
252        // Use template literal for card's inner HTML
253        card.innerHTML = \`
254           <img src="\${imageUrl}"
255               alt="\${safeName}"
256               onerror="this.onerror=null; this.src='\${fallbackUrl}'; console.warn('Image failed for \${safeName}, prompt: \${prompt}')">
257           <div class="\${EFFECT_CONTAINER_CLASS}">
258               <div class="energy-surge"></div>

Cluttle main.tsx25 matches

@ericomartin•Updated 2 weeks ago

21        </div>
22        <div className="item-detail-content">
23          {item.images && item.images.length > 0 && (
24            <div className="item-images-gallery">
25              {item.images.map((image, index) => (
26                <img 
27                  key={index} 
28                  src={image} 
29                  alt={`${item.title} image ${index + 1}`} 
30                  className="item-gallery-image"
31                />
32              ))}
49    description: '',
50    price: '',
51    images: []
52  });
53
54  const handleImageUpload = async (e) => {
55    const files = Array.from(e.target.files).slice(0, 5);
56    const base64Images = await Promise.all(
57      files.map(file => new Promise((resolve, reject) => {
58        const reader = new FileReader();
62      }))
63    );
64    setFormData(prev => ({ ...prev, images: base64Images }));
65  };
66
76      description: '',
77      price: '',
78      images: []
79    });
80  };
134              </div>
135              <div className="form-group">
136                <label htmlFor="images">Upload Images (Max 5)</label>
137                <input 
138                  id="images"
139                  type="file" 
140                  multiple 
141                  accept="image/*" 
142                  onChange={handleImageUpload}
143                  max={5}
144                />
145                {formData.images.length > 0 && (
146                  <div className="image-preview">
147                    {formData.images.map((image, index) => (
148                      <img 
149                        key={index} 
150                        src={image} 
151                        alt={`Preview ${index + 1}`} 
152                        className="preview-thumbnail"
197            <h3>{item.title}</h3>
198            <p>Price: ${item.price}</p>
199            {item.images && item.images.length > 0 && (
200              <img 
201                src={item.images[0]} 
202                alt={item.title} 
203                className="item-thumbnail"
411}
412
413.image-preview {
414  margin-top: 10px;
415  display: flex;
426}
427
428.image-count {
429  background-color: var(--secondary-color);
430  color: white;
463}
464
465.item-images-gallery {
466  display: flex;
467  flex-wrap: wrap;
470}
471
472.item-gallery-image {
473  max-width: 100%;
474  max-height: 400px;

stevensDemo README.md1 match

@yyl•Updated 2 weeks ago

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.

stevensDemo README.md1 match

@yyl•Updated 2 weeks ago

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/`

stevensDemo index.ts15 matches

@yyl•Updated 2 weeks ago

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    );

stevensDemo index.html3 matches

@yyl•Updated 2 weeks ago

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>

stevensDemo handleUSPSEmail.ts12 matches

@yyl•Updated 2 weeks ago

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    }

« Previous

1...81 82 83 84 85 86 87...665

Projects

View all 100 projects

thilenius-webcam1 file match

@stabbylambda•Updated 2 days ago

Image proxy for the latest from https://gliderport.thilenius.com

Users

View all 2 users

@Atiq1 project

Updated 1 week ago

"Focal Lens with Atig Wazir" "Welcome to my photography journey! I'm Atiq Wazir, a passionate photographer capturing life's beauty one frame at a time. Explore my gallery for stunning images, behind-the-scenes stories, and tips & tricks to enhance your own

Documentation

View all 7 documentation results

Val Town Code Search Return to Val Town

guide main.tsx14 matches

reactHonoStarter index.html1 match

polity main.tsx1 match

faithfulTanEel main.tsx7 matches

Cluttle main.tsx25 matches

stevensDemo README.md1 match

stevensDemo README.md1 match

stevensDemo index.ts15 matches

stevensDemo index.html3 matches

stevensDemo handleUSPSEmail.ts12 matches

Projects

thilenius-webcam1 file match

image-gen

Users

@Chrimage1 project

@Atiq1 project

Documentation

Val Town Code SearchReturn to Val Town

guidemain.tsx14 matches

reactHonoStarterindex.html1 match

politymain.tsx1 match

faithfulTanEelmain.tsx7 matches

Cluttlemain.tsx25 matches

stevensDemoREADME.md1 match

stevensDemoREADME.md1 match

stevensDemoindex.ts15 matches

stevensDemoindex.html3 matches

stevensDemohandleUSPSEmail.ts12 matches

Projects

thilenius-webcam1 file match

image-gen

Users

@Chrimage1 project

@Atiq1 project

Documentation

Val Town Code Search Return to Val Town

guide main.tsx14 matches

reactHonoStarter index.html1 match

polity main.tsx1 match

faithfulTanEel main.tsx7 matches

Cluttle main.tsx25 matches

stevensDemo README.md1 match

stevensDemo README.md1 match

stevensDemo index.ts15 matches

stevensDemo index.html3 matches

stevensDemo handleUSPSEmail.ts12 matches