Val Town Code SearchReturn to Val Town

4
5function App() {
6  const [image, setImage] = useState<File | null>(null);
7  const [analysis, setAnalysis] = useState<string | null>(null);
8  const [isLoading, setIsLoading] = useState(false);
11  const canvasRef = useRef<HTMLCanvasElement>(null);
12
13  const handleImageUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
14    const file = e.target.files?.[0];
15    if (file) {
16      setImage(file);
17    }
18  };
41      
42      // Draw current video frame to canvas
43      context?.drawImage(video, 0, 0, video.videoWidth, video.videoHeight);
44      
45      // Convert canvas to file
46      canvasRef.current.toBlob((blob) => {
47        if (blob) {
48          const file = new File([blob], 'captured-image.jpg', { type: 'image/jpeg' });
49          setImage(file);
50          setCameraActive(false);
51          
56          video.srcObject = null;
57        }
58      }, 'image/jpeg');
59    }
60  };
61
62  const processImage = async () => {
63    if (!image) return;
64
65    setIsLoading(true);
66    const formData = new FormData();
67    formData.append('image', image);
68
69    try {
76    } catch (error) {
77      console.error('Analysis failed', error);
78      setAnalysis('Failed to analyze the image. Please try again.');
79    } finally {
80      setIsLoading(false);
94      <input 
95        type="file" 
96        accept="image/*" 
97        onChange={handleImageUpload}
98        style={{ marginBottom: '10px', marginRight: '10px' }}
99      />
156      {/* Analyze Button */}
157      <button 
158        onClick={processImage} 
159        disabled={!image || isLoading}
160        style={{
161          backgroundColor: image ? '#4CAF50' : '#cccccc',
162          color: 'white',
163          padding: '10px 15px',
164          border: 'none',
165          borderRadius: '5px',
166          cursor: image ? 'pointer' : 'not-allowed',
167          display: 'block',
168          marginTop: '10px'
211    try {
212      const formData = await request.formData();
213      const imageFile = formData.get('image') as File;
214      
215      if (!imageFile) {
216        return new Response('No image uploaded', { status: 400 });
217      }
218
219      const imageBytes = await imageFile.arrayBuffer();
220      const base64Image = btoa(
221        String.fromCharCode(...new Uint8Array(imageBytes))
222      );
223
245              },
246              {
247                type: "image_url", 
248                image_url: { url: `data:image/jpeg;base64,${base64Image}` }
249              }
250            ]
255
256      const analysis = completion.choices[0].message.content || 
257        "Unable to generate analysis from the image.";
258
259      return new Response(analysis, {
263    } catch (error) {
264      console.error('Analysis error:', error);
265      return new Response('Error processing image', { status: 500 });
266    }
267  }

4
5function App() {
6  const [image, setImage] = useState<File | null>(null);
7  const [analysis, setAnalysis] = useState<string | null>(null);
8  const [isLoading, setIsLoading] = useState(false);
9
10  const handleImageUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
11    const file = e.target.files?.[0];
12    if (file) {
13      setImage(file);
14    }
15  };
16
17  const processImage = async () => {
18    if (!image) return;
19
20    setIsLoading(true);
21    const formData = new FormData();
22    formData.append('image', image);
23
24    try {
31    } catch (error) {
32      console.error('Analysis failed', error);
33      setAnalysis('Failed to analyze the image. Please try again.');
34    } finally {
35      setIsLoading(false);
47      <input 
48        type="file" 
49        accept="image/*" 
50        onChange={handleImageUpload}
51        style={{ marginBottom: '10px' }}
52      />
53      <button 
54        onClick={processImage} 
55        disabled={!image || isLoading}
56        style={{
57          backgroundColor: image ? '#4CAF50' : '#cccccc',
58          color: 'white',
59          padding: '10px 15px',
60          border: 'none',
61          borderRadius: '5px',
62          cursor: image ? 'pointer' : 'not-allowed'
63        }}
64      >
105    try {
106      const formData = await request.formData();
107      const imageFile = formData.get('image') as File;
108      
109      if (!imageFile) {
110        return new Response('No image uploaded', { status: 400 });
111      }
112
113      const imageBytes = await imageFile.arrayBuffer();
114      const base64Image = btoa(
115        String.fromCharCode(...new Uint8Array(imageBytes))
116      );
117
139              },
140              {
141                type: "image_url", 
142                image_url: { url: `data:image/jpeg;base64,${base64Image}` }
143              }
144            ]
149
150      const analysis = completion.choices[0].message.content || 
151        "Unable to generate analysis from the image.";
152
153      return new Response(analysis, {
157    } catch (error) {
158      console.error('Analysis error:', error);
159      return new Response('Error processing image', { status: 500 });
160    }
161  }

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            

104        role: "system",
105        content:
106          `Describe an image that depicts the ${adjective} children's story about a ${color} colored ${animal}: ${summary}.
107        The description should be descriptive, but three short sentences.
108        Just give me the instructions, don't make an image.`,
109      },
110    ],
123  // fast-lightning-sdxl
124  const options = {
125    "image_size": "square",
126    "num_images": 1,
127    "num_inference_steps": 6,
128    "enable_safety_checker": true,
129  }
130  // {"num_images": 1,
131  // "guidance_scale": 9.5,
132  // "num_inference_steps": 20,
133  // "expand_prompt": true }
134  const result: any = await fal.run(`fal-ai/${falModel}`, { input: { prompt }, options })
135  const url = result.images[0].url
136
137  return url
142    title: ogData?.title || "Bedtime Story Maker",
143    description: ogData?.description || "",
144    image: ogData?.image || "",
145    url: ogData?.url || `https://dthyresson-bedtimestorymaker.web.val.run/bedtime_stories}`,
146  }
461      title,
462      description: summary,
463      image: pictureUrl,
464      url: `https://dthyresson-bedtimestorymaker.web.val.run/bedtime_stories/read/${id}`,
465    }

2
3
4![image.png](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/8eaea732-a794-4811-3521-594b6915fa00/public)
5
6Inspired from a RedwoodJS demo I mde last year, this adds generative art powered by Fal to the bedtime story maker.
21for a "fantastical story about a green whale who rides the bus" or the "spooky story about the tomato fox who explores a cave".
22
23Then using the summary, OpenAI geenrates another prompt to describe the instructions to geneate a childrens story book image.
24
25That's sent to Fal to generate an image.
26
27Stories get saved to `bedtime_stories` in SQLite for viewing, searching and maybe sharing.

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            

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            

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            

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            

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