Val Town Code SearchReturn to Val Town

23  const trackName = track.name;
24  const artist = track.artist["#text"];
25  const artwork = track.image ? track.image[track.image.length - 1]["#text"] : null;
26
27  return Response.json({ trackName, artist, artwork });

1165        <meta property="og:description" content="Turn your ideas into fully functional apps in less than a second – powered by Llama3.3-70b on Cerebras's super-fast wafer chips. Code is 100% open-source, hosted on Val Town."">
1166        <meta property="og:type" content="website">
1167        <meta property="og:image" content="https://stevekrouse-blob_admin.web.val.run/api/public/CerebrasCoderOG.jpg">
1168        
1169            

1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import { Calendar, Heart, Image, Mail, Music } from "https://esm.sh/lucide-react@latest";
3import { nanoid } from "https://esm.sh/nanoid@4.0.0";
4import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";
11    name: "Romantic Classic",
12    description: "Elegant design with beautiful animations and love counter",
13    previewImage: "https://maxm-imggenurl.web.val.run/romantic-classic",
14    features: ["Love Counter", "Music Player", "Photo Gallery", "Love Letter"],
15  },
18    name: "Modern Love Story",
19    description: "Contemporary design with timeline and story features",
20    previewImage: "https://maxm-imggenurl.web.val.run/modern-story",
21    features: ["Timeline View", "Story Cards", "Photo Grid", "Music Integration"],
22  },
25    name: "Vintage Romance",
26    description: "Nostalgic design with romantic elements and memories",
27    previewImage: "https://maxm-imggenurl.web.val.run/vintage-romance",
28    features: ["Memory Wall", "Love Journal", "Classic Design", "Photo Album"],
29  },
191    musicUrl: "",
192    musicThumbnail: "",
193    images: [],
194  });
195  const [generatedUrl, setGeneratedUrl] = useState(null);
224    }
225  };
226  const handleImageUpload = async (e) => {
227    const files = Array.from(e.target.files);
228
229    if (files.length > 6) {
230      alert("Maximum 6 images allowed");
231      return;
232    }
233
234    try {
235      const base64Images = await Promise.all(files.map(fileToBase64));
236
237      setFormData(prev => ({
238        ...prev,
239        images: base64Images,
240      }));
241    } catch (error) {
242      console.error("Image upload error", error);
243      alert("Failed to upload images");
244    }
245  };
310          >
311            <img
312              src={template.previewImage}
313              alt={template.name}
314              className="w-full h-48 object-cover rounded-lg mb-4"
401            type="file"
402            multiple
403            accept="image/*"
404            onChange={handleImageUpload}
405            className="w-full px-3 py-2 border rounded-md focus:outline-pink-500"
406          />
407          <div className="flex flex-wrap gap-2 mt-2">
408            {formData.images.map((img, index) => (
409              <img
410                key={index}
493      music_thumbnail TEXT,
494      template_type TEXT NOT NULL,
495      images TEXT NOT NULL,
496      created_at DATETIME DEFAULT CURRENT_TIMESTAMP
497    )
510        musicUrl,
511        musicThumbnail,
512        images,
513        shareableId,
514        template,
526        `
527      INSERT INTO ${KEY}_love_templates_${SCHEMA_VERSION} 
528      (shareable_id, partner_name, start_date, love_letter, music_url, music_thumbnail, template_type, images) 
529      VALUES (?, ?, ?, ?, ?, ?, ?, ?)
530    `,
537          musicThumbnail || "",
538          template,
539          JSON.stringify(images),
540        ],
541      );
582
583      const websiteData = result.rows[0];
584      const parsedImages = JSON.parse(websiteData.images);
585
586      return new Response(
673        <!-- Memory Gallery -->
674        ${
675          parsedImages.length > 0
676            ? `
677            <div class="mt-6 fade-in">
679              <div class="grid grid-cols-3 gap-4 mt-4">
680                ${
681              parsedImages.map(img => `
682                  <div class="overflow-hidden rounded-lg shadow-md">
683                    <img src="${img}" class="w-full h-32 object-cover transition-transform hover:scale-110" />
731      // Fetch paginated records
732      const result = await sqlite.execute(`
733      SELECT shareable_id, partner_name, start_date, love_letter, music_url, music_thumbnail, template_type, images, created_at 
734      FROM ${KEY}_love_templates_${SCHEMA_VERSION} 
735      ORDER BY created_at DESC 
767              <th>Music Thumbnail</th>
768              <th>Template Type</th>
769              <th>Images</th>
770              <th>Created At</th>
771            </tr>
783          <td><img src="${row.music_thumbnail}" alt="Thumbnail" width="50"></td>
784          <td>${row.template_type}</td>
785          <td>${row.images ? `<img src="${row.images}" width="50">` : "No Image"}</td>
786          <td>${row.created_at}</td>
787        </tr>`;
835          }
836        </style>
837        <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><text y='28' font-size='28'>🌹</text></svg>">
838      </head>
839      <body>

9export interface ModelCapabilities {
10  textToText: boolean;
11  imageGeneration: boolean;
12  multimodal: boolean;
13  reasoning: boolean;

14  candidate_count?: number;
15  // For multimodal inputs
16  image_base64?: string;
17}
18
31      capabilities: {
32        textToText: true,
33        imageGeneration: false,
34        multimodal: false,
35        reasoning: true,
59      capabilities: {
60        textToText: true,
61        imageGeneration: false,
62        multimodal: true,
63        reasoning: true,
94      const content: Record<string, unknown> = { text: msg.content };
95
96      // Handle multimodal content if image is provided in provider params
97      if (msg.role === "user" && this.currentImageBase64) {
98        content.inlineData = {
99          mimeType: "image/jpeg",
100          data: this.currentImageBase64,
101        };
102      }
106  }
107
108  // Store current image for multimodal requests
109  private currentImageBase64: string | null = null;
110
111  async complete(
119    }
120
121    // Store image for multimodal processing if provided
122    this.currentImageBase64 = config?.providerParams?.image_base64 || null;
123
124    // Note: This is a placeholder as Val Town doesn't have a native Google AI client
147    const result = await response.json();
148
149    // Clear stored image after request
150    this.currentImageBase64 = null;
151
152    // Approximate token count based on characters

26      capabilities: {
27        textToText: true,
28        imageGeneration: false,
29        multimodal: true,
30        reasoning: true,
54      capabilities: {
55        textToText: true,
56        imageGeneration: false,
57        multimodal: true,
58        reasoning: true,

51      capabilities: {
52        textToText: true,
53        imageGeneration: false,
54        multimodal: false,
55        reasoning: true,
80      capabilities: {
81        textToText: true,
82        imageGeneration: false,
83        multimodal: true,
84        reasoning: true,

2import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";
3import React, { useEffect, useRef, useState } from "https://esm.sh/react@18.2.0";
4import { RandomPositionImage } from "./random_position_image";
5import { TextArt } from "./text_art";
6import { generateStaticHTML } from "./generate_static_html";
8function App() {
9  const [urls, setUrls] = useState([]);
10  const [imagePositions, setImagePositions] = useState([]);
11  const [valentineName, setValentineName] = useState("");
12  const [message, setMessage] = useState("");
16    try {
17      const params = new URLSearchParams({
18        image: "5",
19        gif: "3",
20        stock_image: "3",
21      });
22      const response = await fetch(`/image?${params.toString()}`, {
23        method: "GET",
24      });
76        height: "100vh",
77        width: "100vw",
78        backgroundImage: "url('https://shouser-blob_admin.web.val.run/api/public/pink_gradient_background.jpg')",
79        backgroundSize: "cover",
80        backgroundPosition: "center",
194          textShadow: "1px 1px 0px #000000",
195        }}>
196          ♪ drag text & images! ♪
197        </div>
198      </div>
199
200      {urls.map((url, index) => (
201        <RandomPositionImage
202          key={`img-${index}`}
203          imageUrl={url}
204          existingPositions={imagePositions.slice(0, index)}
205        />
206      ))}
210          key={`text-${index}`}
211          text={text}
212          existingPositions={imagePositions}
213        />
214      ))}

2  console.log("generatestatichtml");
3  // Get the main container
4  const container = document.querySelector("div[style*=\"backgroundImage\"]");
5  if (!container) return;
6
22      height: 100vh;
23      width: 100vw;
24      background-image: url('https://shouser-blob_admin.web.val.run/api/public/pink_gradient_background.jpg');
25      background-size: cover;
26      background-position: center;
33`;
34
35  // Get all images and text elements
36  const elements = container.querySelectorAll("div[style*=\"position: absolute\"]");
37
41
42    if (img) {
43      // It's an image element
44      html += `    <div style="
45        position: absolute;
49        height: ${el.style.height};
50      ">
51        <img src="${img.src}" alt="Valentine Image" style="
52          width: 100%;
53          height: 100%;

2import React, { useEffect, useRef, useState } from "https://esm.sh/react@18.2.0";
3
4export function RandomPositionImage({
5  imageUrl = "https://maxm-imggenurl.web.val.run/random-colorful-abstract-shape",
6  existingPositions = [],
7}) {
8  const [position, setPosition] = useState({ top: 0, left: 0 });
9  const [size, setSize] = useState({ width: 250, height: 250 });
10  const [imageLoaded, setImageLoaded] = useState(false);
11  const [isDragging, setIsDragging] = useState(false);
12  const [dragOffset, setDragOffset] = useState({ x: 0, y: 0 });
113        width: `${size.width}`,
114        height: `auto`,
115        opacity: imageLoaded ? 1 : 0,
116        transition: isDragging ? "none" : "opacity 0.3s ease-in-out",
117        cursor: isDragging ? "grabbing" : "grab",
121      <img
122        ref={imgRef}
123        src={imageUrl}
124        alt="Random Generated Image"
125        onLoad={() => setImageLoaded(true)}
126        style={{
127          width: "100%",