Val Town Code SearchReturn to Val Town

7function App() {
8  const [prompt, setPrompt] = useState("");
9  const [imageUrl, setImageUrl] = useState("");
10  const [generatedText, setGeneratedText] = useState("");
11  const [isLoading, setIsLoading] = useState(false);
12  const [error, setError] = useState("");
13  const [mode, setMode] = useState<"image" | "text">("image");
14
15  const generateContent = async () => {
21    setIsLoading(true);
22    setError("");
23    setImageUrl("");
24    setGeneratedText("");
25
38
39      const data = await response.json();
40      mode === "image" ? setImageUrl(data.imageUrl) : setGeneratedText(data.text);
41    } catch (err) {
42      setError(err.message);
48  return (
49    <div style={styles.container}>
50      <h1>{mode === "image" ? "🖼️ AI Image Generator" : "📝 AI Text Generator"}</h1>
51      <div style={styles.modeToggle}>
52        <button
53          onClick={() => setMode("image")}
54          style={{
55            ...styles.modeButton,
56            backgroundColor: mode === "image" ? "#4CAF50" : "#f0f0f0",
57            color: mode === "image" ? "white" : "black",
58          }}
59        >
60          Image
61        </button>
62        <button
76          value={prompt}
77          onChange={(e) => setPrompt(e.target.value)}
78          placeholder={mode === "image"
79            ? "Describe the image you want to create"
80            : "Enter a prompt for text generation"}
81          style={styles.input}
86          style={styles.button}
87        >
88          {isLoading ? "Generating..." : `Generate ${mode === "image" ? "Image" : "Text"}`}
89        </button>
90      </div>
96      )}
97
98      {imageUrl && mode === "image" && (
99        <div style={styles.imageContainer}>
100          <img
101            src={imageUrl}
102            alt={prompt}
103            style={styles.generatedImage}
104          />
105          <p style={styles.imageDescription}>{prompt}</p>
106        </div>
107      )}
171    marginBottom: "20px",
172  },
173  imageContainer: {
174    marginTop: "20px",
175  },
176  generatedImage: {
177    maxWidth: "100%",
178    borderRadius: "10px",
189    lineHeight: "1.6",
190  },
191  imageDescription: {
192    fontStyle: "italic",
193    color: "#666",
233      const openai = new OpenAI();
234
235      if (mode === "image") {
236        const response = await openai.images.generate({
237          model: "dall-e-3",
238          prompt: prompt,
241        });
242
243        const imageUrl = response.data[0].url;
244        return c.json({ imageUrl });
245      } else {
246        const response = await openai.chat.completions.create({

9  const [swipeProgress, setSwipeProgress] = useState(0);
10  const [gameStarted, setGameStarted] = useState(false);
11  const [imageUrl, setImageUrl] = useState("");
12  const swipeRef = useRef(null);
13
15    const urlParams = new URLSearchParams(window.location.search);
16    const initialMessage = urlParams.get("message");
17    const initialImageUrl = urlParams.get("imageUrl");
18    if (initialMessage) {
19      setMessage(decodeURIComponent(initialMessage));
20      setGameStarted(true);
21    }
22    if (initialImageUrl) {
23      setImageUrl(decodeURIComponent(initialImageUrl));
24    }
25  }, []);
38      const data = await response.json();
39      setMessage(data.message);
40      setImageUrl(data.imageUrl);
41      setGameStarted(true);
42
43      // Update URL with new conversation state and image URL
44      urlParams.set("message", encodeURIComponent(data.message));
45      urlParams.set("conversation", encodeURIComponent(JSON.stringify(data.conversation)));
46      urlParams.set("imageUrl", encodeURIComponent(data.imageUrl));
47      window.history.replaceState({}, "", `${window.location.pathname}?${urlParams}`);
48    } catch (error) {
116      >
117        <div className="h-[500px] bg-gray-300 flex items-center justify-center">
118          {imageUrl ? <img src={imageUrl} alt="Character hint" className="w-[1000px] h-full object-cover" /> : (
119            <svg
120              className="w-20 h-20 text-gray-400"
166            setGameStarted(false);
167            setMessage("Think of a new character, then swipe right to start!");
168            setImageUrl("");
169            window.history.replaceState({}, "", window.location.pathname);
170          }}
244          role: "system",
245          content:
246            "You are an AI that guesses the fictional or real character that the user is thinking of. Ask yes/no questions to gather information. The user will respond with 'yes' for yes and 'no' for no. Start by introducing the game and asking the first question. After each response, also provide a brief image description (without spaces) based on the current knowledge of the character.",
247        },
248        {
249          role: "assistant",
250          content:
251            "Welcome to the Character Guesser game! I'll try to guess the character you're thinking of by asking yes/no questions. Let's begin! Is your character a real person (as opposed to fictional)?\n\nImage description: mysterious_silhouette_with_question_mark",
252        },
253      ];
266
267      const aiMessage = completion.choices[0].message.content.trim();
268      const [message, imageDescription] = aiMessage.split("\n\nImage description: ");
269      const imageUrl = `https://maxm-imggenurl.web.val.run/${imageDescription}`;
270
271      conversation.push({ role: "assistant", content: aiMessage });
272
273      return new Response(JSON.stringify({ message, imageUrl, conversation }), {
274        headers: { "Content-Type": "application/json" },
275      });

1185        <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."">
1186        <meta property="og:type" content="website">
1187        <meta property="og:image" content="https://stevekrouse-blob_admin.web.val.run/api/public/CerebrasCoderOG.jpg">
1188        
1189            

3import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";
4
5interface CompressedImage {
6  file: File;
7  preview: string;
10}
11
12function ImageCompressor() {
13  const [images, setImages] = React.useState<CompressedImage[]>([]);
14  const [totalCompressed, setTotalCompressed] = React.useState(0);
15  const canvasRef = React.useRef<HTMLCanvasElement>(null);
18  React.useEffect(() => {
19    return () => {
20      images.forEach(image => {
21        if (image.preview) {
22          URL.revokeObjectURL(image.preview);
23        }
24      });
25    };
26  }, [images]);
27
28  const generatePreview = React.useCallback((file: File): Promise<string> => {
34        
35        // Verify the URL is valid
36        const img = new Image();
37        img.onload = () => {
38          resolve(objectUrl);
64  }, []);
65
66  const compressImage = React.useCallback(async (file: File): Promise<File> => {
67    return new Promise((resolve, reject) => {
68      const reader = new FileReader();
69      reader.onload = (event) => {
70        const img = new Image();
71        img.onload = () => {
72          const canvas = canvasRef.current || document.createElement('canvas');
102          canvas.height = height;
103
104          // Draw resized image
105          ctx.drawImage(img, 0, 0, width, height);
106
107          // Compress with reducing quality
123                compressRecursively(quality - 0.1);
124              } else {
125                reject(new Error(`Cannot compress image under 300 kB`));
126              }
127            }, file.type, quality);
131        };
132
133        img.onerror = () => reject(new Error('Image load failed'));
134        img.src = event.target?.result as string;
135      };
144    if (!files) return;
145
146    const newImages: CompressedImage[] = await Promise.all(
147      Array.from(files)
148        .filter(file => file.type.startsWith('image/'))
149        .map(async (file) => {
150          try {
170    );
171
172    setImages(prev => [...prev, ...newImages]);
173
174    // Compress images
175    newImages.forEach(async (image) => {
176      try {
177        const compressedFile = await compressImage(image.file);
178        
179        // Update total compressed count
182        setTotalCompressed(currentTotal + 1);
183
184        setImages(prev => prev.map(img => 
185          img.file === image.file 
186            ? { ...img, compressedFile } 
187            : img
188        ));
189      } catch (error) {
190        setImages(prev => prev.map(img => 
191          img.file === image.file 
192            ? { 
193                ...img, 
202  };
203
204  const handleDownload = (image: CompressedImage) => {
205    if (!image.compressedFile) return;
206
207    const url = URL.createObjectURL(image.compressedFile);
208    const link = document.createElement('a');
209    link.href = url;
210    link.download = `compressed_${image.file.name}`;
211    document.body.appendChild(link);
212    link.click();
230      />
231
232      <h1 style={{ color: '#4CAF50' }}>🖼️ Image Compressor</h1>
233      
234      <div style={{
246        type="file" 
247        multiple 
248        accept="image/*"
249        onChange={handleFileUpload}
250        style={{
263        gap: '10px'
264      }}>
265        {images.map((image, index) => (
266          <div 
267            key={index}
273            }}
274          >
275            {image.preview && (
276              <img 
277                src={image.preview} 
278                alt="Original" 
279                onError={(e) => {
280                  console.error('Image load error:', {
281                    src: image.preview,
282                    error: e
283                  });
292            )}
293
294            <p>Original: {image.file.name}</p>
295            <p>Size: {(image.file.size / 1024).toFixed(2)} kB</p>
296
297            {image.compressedFile && (
298              <>
299                <p>Compressed: {(image.compressedFile.size / 1024).toFixed(2)} kB</p>
300                <button 
301                  onClick={() => handleDownload(image)}
302                  style={{
303                    backgroundColor: '#4CAF50',
314            )}
315
316            {image.error && (
317              <p style={{ color: '#ff6b6b' }}>{image.error}</p>
318            )}
319          </div>
328    <html>
329      <head>
330        <title>Image Compressor</title>
331        <meta name="viewport" content="width=device-width, initial-scale=1">
332        <style>

5import React, { useEffect, useState } from "https://esm.sh/react@18.2.0";
6import { STARTER_PROMPTS } from "https://esm.town/v/stevekrouse/cerebras_coder_prompts";
7const [uploadedImage, setUploadedImage] = useState<string | null>(null);
8const fileInputRef = React.useRef<HTMLInputElement>(null);
9
1187        <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."">
1188        <meta property="og:type" content="website">
1189        <meta property="og:image" content="https://stevekrouse-blob_admin.web.val.run/api/public/CerebrasCoderOG.jpg">
1190        
1191            

1185        <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."">
1186        <meta property="og:type" content="website">
1187        <meta property="og:image" content="https://stevekrouse-blob_admin.web.val.run/api/public/CerebrasCoderOG.jpg">
1188        
1189            

1111        <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."">
1112        <meta property="og:type" content="website">
1113        <meta property="og:image" content="https://stevekrouse-blob_admin.web.val.run/api/public/CerebrasCoderOG.jpg">
1114        
1115            

45// });
46
47// New route to serve images from blob storage
48app.get("/image/:id.png", async (c) => {
49  console.log(c.req)
50  const id = c.req.param("id");
51  console.log({ id })
52  const imageBlob = await blob.get(id);
53  const known = await blob.get("notionDeleteTest")
54  console.log({ known })
55  
56  if (!imageBlob) {
57    return c.text("Image not found", 404);
58  }
59
60  return new Response(imageBlob.body, {
61    headers: {
62      "Content-Type": "image/png"
63    }
64  });
84  return c.body(known.body, {
85    headers: {
86      'Content-Type': 'image/png'
87    }
88  })
110  return c.body(known.body, {
111    headers: {
112      'Content-Type': 'image/png'
113    }
114  })
128  return c.body(known.body, {
129    headers: {
130      'Content-Type': 'image/png'
131    }
132  })

21  href: track.track.href,
22  url: track.track.external_urls.spotify,
23  img_url: track.track.album.images[0].url,
24}));
25
45});
46
47// Helper function to upload an image and get a blob reference
48async function uploadImage(agent: AtpAgent, imageUrl: string) {
49  try {
50    // Fetch the image
51    const response = await fetch(imageUrl);
52    if (!response.ok) {
53      console.error(`Failed to fetch image: ${imageUrl}`);
54      return null;
55    }
56
57    // Convert image to blob
58    const imageBlob = await response.blob();
59
60    // Upload blob to Bluesky
61    const uploadedBlob = await agent.uploadBlob(imageBlob, {
62      encoding: response.headers.get("content-type") || "image/jpeg",
63    });
64
65    return uploadedBlob.data.blob;
66  } catch (error) {
67    console.error("Error uploading image:", error);
68    return null;
69  }
94  for (const song of newSongs) {
95    try {
96      // Upload image and get blob reference
97      const thumbBlob = song.img_url ? await uploadImage(agent, song.img_url) : null;
98
99      const postText = `My new favorite song is "${song.track_name}" ${song.url}`;

152            </Col>
153            <Col md={6}>
154              <img src="https://maxm-imggenurl.web.val.run/futuristic-gaming-setup-with-rgb-lights" alt="Setup Gaming" className="img-fluid rounded shadow gaming-image" loading="lazy" />
155            </Col>
156          </Row>
515}
516
517.gaming-image {
518  border: 2px solid #00ffff;
519  box-shadow: 0 0 20px rgba(0, 255, 255, 0.5);