Val Town Code SearchReturn to Val Town

3Move circles around. State is synced with the server. Open a window in another tab and watch the circles update as you move them .
4
5![image.png](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/e2a6db10-906d-4398-6e13-32475a0b6500/public)
6

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            

18  * Response.redirect is broken. Use `return new Response(null, { status: 302, headers: { Location: "/place/to/redirect" }})`
19
20  * Avoid external images or base64 images, use emojis, unicode symtols, or icon fonts/libraries instead, unless that's  not practical for the user's request (e.g. if they ask for a particular animated gif).
21
22  * If you want an AI generated image, use https://maxm-imggenurl.web.val.run/the-description-of-your-image to dynamically generate one.
23
24  * DO NOT use the Deno KV module for storage.

7
8
9![image.png](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/87a7941b-977d-4d35-f3e9-c5f3bea51f00/public)
10

4
5function App() {
6  const [image, setImage] = useState<File | null>(null);
7  const [result, setResult] = useState<string | null>(null);
8  const [error, setError] = useState<string | null>(null);
9
10  const handleImageUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
11    const file = e.target.files?.[0];
12    if (file) {
13      setImage(file);
14      setResult(null);
15      setError(null);
18
19  const identifyMovie = async () => {
20    if (!image) return;
21
22    const formData = new FormData();
23    formData.append('image', image);
24
25    try {
51      <input 
52        type="file" 
53        accept="image/*" 
54        onChange={handleImageUpload}
55        style={{marginBottom: '15px'}}
56      />
57      {image && (
58        <div>
59          <img 
60            src={URL.createObjectURL(image)} 
61            alt="Uploaded" 
62            style={{maxWidth: '100%', maxHeight: '300px', marginBottom: '15px'}}
110      
111      const formData = await request.formData();
112      const imageFile = formData.get('image') as File;
113      
114      if (!imageFile) {
115        return new Response(JSON.stringify({ error: 'No image uploaded' }), {
116          status: 400,
117          headers: { 'Content-Type': 'application/json' }
119      }
120
121      const imageBytes = await imageFile.arrayBuffer();
122      const base64Image = btoa(
123        String.fromCharCode(...new Uint8Array(imageBytes))
124      );
125
135              },
136              { 
137                type: "image_url", 
138                image_url: { url: `data:image/jpeg;base64,${base64Image}` } 
139              }
140            ]
152    } catch (error) {
153      console.error(error);
154      return new Response(JSON.stringify({ error: 'Image processing failed' }), {
155        status: 500,
156        headers: { 'Content-Type': 'application/json' }

4
5function LandingPage() {
6  const [imageUrl] = useState(`https://maxm-imggenurl.web.val.run/young-girl-tech-entrepreneur-cartoon-style-holding-smartphone-and-gadgets`);
7
8  // Replace this with the actual URL of your voicemail val
35      }}>
36        <img 
37          src={imageUrl} 
38          alt="Girl with Tech Gadgets" 
39          style={{

10
11<div align="center">
12<img src="https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/67a1d35e-c37c-41a4-0e5a-03a9ba585d00/public" width="500px"/>
13</div>

52          "<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" version=\"1.1\" ",
53        ),
54        { headers: { "Content-Type": "image/svg+xml" } },
55      )
56      : new Response(

2
3
4![image.png](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/aa865299-573f-4359-497a-9e0f7af6dc00/public)
5
6Use an import map to make sure your Val frontend and backend are always using the exact same versions. 
22You can see that the `"https://esm.sh/react"` import imports the version directly without any redirects. Saving on network hops and also ensuring version stability!
23
24<p><img width=400 src="https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/38d61d0a-0dee-42de-dd44-b4ce9bd57000/public" /></p>
25
26

13
14let TIME_LIMIT = 10;
15let CHALLENGE_IMAGES: Challenge[] = [];
16
17const capitalize = (str: string) => {
23    switch (category) {
24      case "bicycle":
25        CHALLENGE_IMAGES.push({
26          src: `https://dapper-halva-6db681.netlify.app/Bicycle/Bicycle%20(${i + 1}).png`,
27          category,
30
31      case "palm":
32        CHALLENGE_IMAGES.push({
33          src: `https://dapper-halva-6db681.netlify.app/Palm/Palm%20(${i + 1}).png`,
34          category,
37
38      case "hydrant":
39        CHALLENGE_IMAGES.push({
40          src: `https://dapper-halva-6db681.netlify.app/Hydrant/Hydrant%20(${i + 1}).png`,
41          category,
44
45      case "crosswalk":
46        CHALLENGE_IMAGES.push({
47          src: `https://dapper-halva-6db681.netlify.app/Crosswalk/Cross%20(${i + 1}).png`,
48          category,
73function App() {
74  const [challenge, setChallenge] = useState(generateChallenge());
75  const [selectedImages, setSelectedImages] = useState<number[]>([]);
76  const [score, setScore] = useState(0);
77  const [timeLeft, setTimeLeft] = useState(TIME_LIMIT);
98    const targetCategory = randomCategory();
99    return {
100      prompt: `Select all images with ${targetCategory}s`,
101      category: targetCategory,
102    };
103  }
104
105  function handleImageClick(index: number) {
106    if (gameState !== "playing") return;
107
108    setSelectedImages(prev =>
109      prev.includes(index)
110        ? prev.filter(i => i !== index)
116    if (gameState !== "playing") return;
117
118    const correctSelections = CHALLENGE_IMAGES.slice(0, 9)
119      .map((img, index) => img.category === challenge.category ? index : -1)
120      .filter(i => i !== -1);
121
122    const isCorrect = correctSelections.every(ci => selectedImages.includes(ci))
123      && selectedImages.every(si => correctSelections.includes(si));
124
125    if (isCorrect) {
126      setScore(prev => prev + 10);
127      shuffle(CHALLENGE_IMAGES);
128      setChallenge(generateChallenge());
129      setSelectedImages([]);
130      setTimeLeft(Math.max(10, TIME_LIMIT - Math.floor(score / 50)));
131    } else {
160    setTimeLeft(TIME_LIMIT);
161    setGameState("playing");
162    shuffle(CHALLENGE_IMAGES);
163    setChallenge(generateChallenge());
164    setSelectedImages([]);
165    setSubmissionResult({});
166  }
299          </div>
300          <div className="grid grid-cols-3 gap-5 lg:pl-6">
301            {CHALLENGE_IMAGES.slice(0, 9).map((img, index) => (
302              <img
303                key={index}
304                onClick={() => handleImageClick(index)}
305                className={`
306              text-6xl 
312              duration-200 
313              ${
314                  selectedImages.includes(index)
315                    ? "border-green-500 bg-green-100"
316                    : "border-gray-300 bg-white hover:bg-gray-50"