Val Town Code Search

FarcasterSpaces index.tsx3 matches

@arseniy•Updated 3 days ago

6import { handleAnalyticsEndpoints } from './analytics.tsx'
7import { embedMetadata, handleFarcasterEndpoints, name } from './farcaster.ts'
8import { handleImageEndpoints } from './image.tsx'
9import { fetchNeynarGet } from './neynar.ts'
10
11const app = new Hono()
12
13handleImageEndpoints(app)
14handleFarcasterEndpoints(app)
15handleAgoraEndpoints(app)
54        <meta name="fc:frame" content={JSON.stringify(embedMetadata(baseUrl, path))} />
55        <link rel="icon" href={baseUrl + '/icon?rounded=1'} />
56        <meta property="og:image" content={baseUrl + '/image'} />
57      </head>
58      <body class="bg-white text-black dark:bg-black dark:text-white">

FarcasterSpaces image.tsx16 matches

@arseniy•Updated 3 days ago

8import { fetchUsersById } from './neynar.ts'
9
10export function handleImageEndpoints(app: Hono) {
11  const headers = {
12    'Content-Type': 'image/png',
13    'cache-control': 'public, max-age=3600', // 86400
14  }
15  app.get('/image', async (c) => {
16    const channel = c.req.query('channel')
17    if (channel) return c.body(await spaceImage(channel), 200, headers)
18    return c.body(await homeImage(), 200, headers)
19  })
20  app.get('/icon', async (c) => {
21    const rounded = !!c.req.query('rounded')
22    return c.body(await iconImage(rounded), 200, headers)
23  })
24}
25
26export async function homeImage() {
27  return await ogImage(
28    <div tw="w-full h-full flex justify-start items-end text-[100px] bg-black text-white p-[50px]">
29      <div tw="flex flex-col items-start">
37}
38
39export async function spaceImage(channel: string) {
40  const space = await fetchSpace(channel)
41  if (!space) return await homeImage()
42
43  const users = await fetchUsersById([space.created_by, ...space.hosts, ...space.speakers].join(','))
48  const speakers = users?.filter((u) => speakerFids.includes(u.fid))
49
50  return await ogImage(
51    <div tw="w-full h-full flex justify-start items-start text-[100px] bg-black text-white p-[50px]">
52      <div tw="flex flex-col items-start ">
84}
85
86export async function iconImage(rounded = false) {
87  const roundedClass = rounded ? 'rounded-[96px]' : ''
88  return await ogImage(
89    <div tw={`w-full h-full flex justify-center items-center text-[100px] bg-[#7c65c1] text-white p-[50px] ${roundedClass}`}>
90      <img tw="w-[350px] h-[350px]" src={base64Icon(Mic)} />
99//////////
100
101export async function ogImage(body, options = {}) {
102  const svg = await satori(body, {
103    width: 945,
109      if (code === 'emoji') {
110        const unicode = segment.codePointAt(0).toString(16).toUpperCase()
111        return `data:image/svg+xml;base64,` + btoa(await loadEmoji(unicode))
112      }
113      return ''
145  const base64 = Buffer.from(svg).toString('base64')
146  // console.log('getIconDataUrl', name, svg, base64)
147  return `data:image/svg+xml;base64,${base64}`
148}
149

FarcasterSpaces farcaster.ts4 matches

@arseniy•Updated 3 days ago

5export const name = 'Spaces'
6// export const iconUrl = "https://imgur.com/FgHOubn.png";
7// export const ogImageUrl = "https://imgur.com/oLCWKFI.png";
8
9export function embedMetadata(baseUrl: string, path: string = '/') {
11  return {
12    version: 'next',
13    imageUrl: baseUrl + '/image' + (channel ? '?channel=' + channel : ''),
14    button: {
15      title: name,
18        name: name,
19        url: baseUrl + path,
20        splashImageUrl: baseUrl + '/icon',
21        splashBackgroundColor: '#111111',
22      },
47        iconUrl: baseUrl + '/icon',
48        homeUrl: baseUrl,
49        splashImageUrl: baseUrl + '/icon?rounded=1',
50        splashBackgroundColor: '#111111',
51        subtitle: 'Live audio conversations',

testing-testing index.html1 match

@dannyman•Updated 3 days ago

11
12    <!-- reference the webpage's favicon. note: currently only svg is supported in val town files -->
13    <!-- <link rel="icon" href="/favicon.svg" sizes="any" type="image/svg+xml"> -->
14
15    <!-- import the webpage's javascript file -->

staging main.tsx38 matches

@join•Updated 3 days ago

8
9const VISUAL_ANALYSIS_PROMPT = `
10You are a master interior architect. Analyze the provided image of an empty room.
11Your analysis must be concise and structured. Identify the room's key architectural features, light sources, flooring, and overall dimensions.
12This information will be used by another AI to create a staging plan.
20const STAGING_STRATEGY_PROMPT = `
21You are an expert home staging strategist. You will receive an architectural analysis of a room, a desired design style, and the room's designated function.
22Your task is to generate a comprehensive staging plan that will be used to create a photorealistic, virtually staged image. You must produce two outputs:
231. A detailed, descriptive prompt for an image generation AI (DALL-E) to create the final image. This prompt must incorporate the original room's features to ensure architectural fidelity and describe the new furniture, layout, decor, and lighting in vivid detail to create a compelling, market-ready scene.
242. A "Design Rationale" explaining to the client *why* this staging is effective for attracting buyers.
25
119    font-family: 'Poppins', sans-serif;
120    appearance: none;
121    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
122    background-repeat: no-repeat;
123    background-position: right 0.75rem center;
156  #file-upload-label span { font-size: 1rem; color: var(--text-secondary); }
157  #file-upload-label strong { color: var(--accent-color); }
158  #image-preview-container {
159    width: 100%;
160    aspect-ratio: 4 / 3;
164    background-color: var(--bg-main);
165  }
166  #image-preview {
167    width: 100%;
168    height: 100%;
188  @keyframes spin { to { transform: rotate(360deg); } }
189  .staged-result { width: 100%; }
190  .image-comparison {
191    display: grid;
192    grid-template-columns: 1fr 1fr;
194    width: 100%;
195  }
196  .image-box { border-radius: 8px; overflow: hidden; border: 1px solid var(--border-color); }
197  .image-box img { width: 100%; display: block; }
198  .image-box h4 { text-align: center; padding: 0.75rem; background: var(--bg-main); }
199  .design-rationale {
200    width: 100%;
222          <div class="form-group">
223            <label for="file-upload" id="file-upload-label">
224              <span id="upload-text"><strong>Click to upload</strong> or drag & drop an image</span>
225              <div id="image-preview-container" style="display:none;">
226                <img id="image-preview" src="" alt="Room preview">
227              </div>
228            </label>
229            <input type="file" id="file-upload" accept="image/*" style="display:none;" required>
230          </div>
231          <div class="form-group">
280  const stagedResultContainer = $('#staged-result');
281  const fileInput = $('#file-upload');
282  const imagePreview = $('#image-preview');
283  const imagePreviewContainer = $('#image-preview-container');
284  const uploadText = $('#upload-text');
285
286  let originalImageBase64 = null;
287  let originalImageSrc = null;
288
289  async function handleApiRequest(payload) {
319  function renderResults(data) {
320    stagedResultContainer.innerHTML = \`
321      <div class="image-comparison">
322        <div class="image-box">
323          <h4>Before</h4>
324          <img src="\${originalImageSrc}" alt="Original empty room">
325        </div>
326        <div class="image-box">
327          <h4>After</h4>
328          <img src="\${data.staged_image_url}" alt="AI Staged Room">
329        </div>
330      </div>
344  form.addEventListener('submit', (e) => {
345    e.preventDefault();
346    if (!originalImageBase64) {
347      alert('Please upload an image of the room first.');
348      return;
349    }
350    const payload = {
351      image: originalImageBase64,
352      room_type: $('#room-type').value,
353      style: $('#style-type').value,
362    const reader = new FileReader();
363    reader.onload = (event) => {
364      originalImageSrc = event.target.result;
365      imagePreview.src = originalImageSrc;
366      imagePreviewContainer.style.display = 'block';
367      uploadText.style.display = 'none';
368      // Store just the base64 part for the API call
369      originalImageBase64 = originalImageSrc.split(',')[1];
370    };
371    reader.readAsDataURL(file);
399        throw new Error("Invalid action specified.");
400      }
401      if (!body.image) {
402        throw new Error("Image data is missing from the request.");
403      }
404
405      // STEP 1: Analyze the image with GPT-4o Vision to understand its architecture.
406      const analysisCompletion = await openai.chat.completions.create({
407        model: "gpt-4o",
412            content: [
413              { type: "text", text: "Analyze the architectural features of this empty room." },
414              { type: "image_url", image_url: { url: `data:image/jpeg;base64,${body.image}` } },
415            ],
416          },
437      const { dalle_prompt, design_rationale } = strategyResult;
438
439      // STEP 3 (CORRECTED): Generate the final, staged image using the openai.createImage method,
440      // which is appropriate for the older SDK version wrapped by std/openai?v=4.
441      const imageResponse = await openai.createImage({
442        prompt: dalle_prompt,
443        n: 1,
445      });
446
447      const stagedImageUrl = imageResponse.data[0].url;
448
449      // Return the complete package to the frontend.
450      return new Response(
451        JSON.stringify({
452          staged_image_url: stagedImageUrl,
453          design_rationale: design_rationale,
454        }),

stevensDemo README.md1 match

@eboy•Updated 3 days 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

@eboy•Updated 3 days 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

@eboy•Updated 3 days 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

@eboy•Updated 3 days 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

@eboy•Updated 3 days 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...7 8 9 10 11 12 13...1056

Projects

View all 112 vals

simple-images1 file match

@blazemcworld•Updated 11 hours ago

simple image generator using pollinations.ai

Users

View all 2 users

"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

FarcasterSpaces index.tsx3 matches

FarcasterSpaces image.tsx16 matches

FarcasterSpaces farcaster.ts4 matches

testing-testing index.html1 match

staging main.tsx38 matches

stevensDemo README.md1 match

stevensDemo README.md1 match

stevensDemo index.ts15 matches

stevensDemo index.html3 matches

stevensDemo handleUSPSEmail.ts12 matches

Projects

simple-images1 file match

image

Users

@Chrimage1 val

@Atiq1 val

Documentation

Val Town Code SearchReturn to Val Town

FarcasterSpacesindex.tsx3 matches

FarcasterSpacesimage.tsx16 matches

FarcasterSpacesfarcaster.ts4 matches

testing-testingindex.html1 match

stagingmain.tsx38 matches

stevensDemoREADME.md1 match

stevensDemoREADME.md1 match

stevensDemoindex.ts15 matches

stevensDemoindex.html3 matches

stevensDemohandleUSPSEmail.ts12 matches

Projects

simple-images1 file match

image

Users

@Chrimage1 val

@Atiq1 val

Documentation

Val Town Code Search Return to Val Town

FarcasterSpaces index.tsx3 matches

FarcasterSpaces image.tsx16 matches

FarcasterSpaces farcaster.ts4 matches

testing-testing index.html1 match

staging main.tsx38 matches

stevensDemo README.md1 match

stevensDemo README.md1 match

stevensDemo index.ts15 matches

stevensDemo index.html3 matches

stevensDemo handleUSPSEmail.ts12 matches