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);
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            

6  const [url, setUrl] = useState("");
7  const [resultCaption, setResultText] = useState("");
8  const [resultImage, setResultImage] = useState("");
9  const [copyStatus, setCopyStatus] = useState("");
10  const imageRef = useRef(null);
11  const textRef = useRef(null);
12
18          console.log(data);
19          setResultText(`Reposted from @${data.username}\n\n${data.caption}`);
20          setResultImage(data.imageUrl);
21        })
22        .catch((error) => {
23          console.error("Error fetching data:", error);
24          setResultText("Error fetching data");
25          setResultImage("");
26        });
27    }
45    <div style={{ maxWidth: "600px", margin: "0 auto", padding: "20px" }}>
46      <h1>Instagram Extracter</h1>
47      <h2>Extract images from single-image instagram posts</h2>
48
49      <div>
50        <label>
51          {(resultImage && resultCaption)
52            ? "Post URL"
53            : "Enter the URL to the Post"}
60        />
61
62        {!(resultImage && resultCaption) && (
63          <p style={{ marginBottom: "10px" }}>
64            Click the share button at the bottom left of post (the paper
68      </div>
69
70      {resultImage && resultCaption && (
71        <>
72          {copyStatus && (
96              <div style={{ marginTop: "20px" }}>
97                <img
98                  ref={imageRef}
99                  src={resultImage}
100                  alt="Result"
101                  style={{ maxWidth: "100%", border: "1px solid #ccc" }}
102                />
103                Click and hold, then click save image.
104              </div>
105            </div>
134
135    try {
136      const { caption, username, imageUrl } = await instagramPostExtract(
137        instagramUrl,
138      );
139      console.log(imageUrl);
140
141      // If the 'image' parameter is present, proxy the image
142      if (url.searchParams.get("image") === "true") {
143        const imageResponse = await fetch(imageUrl);
144        return new Response(imageResponse.body, {
145          headers: {
146            "Content-Type": imageResponse.headers.get("Content-Type") ||
147              "image/jpeg",
148            "Cache-Control": "public, max-age=3600", // Cache for 1 hour
149          },
151      }
152
153      // Otherwise, return JSON with caption and proxied image URL
154      const proxiedImageUrl = `${url.origin}/extract?url=${
155        encodeURIComponent(instagramUrl)
156      }&image=true`;
157      return new Response(
158        JSON.stringify({ caption, imageUrl: proxiedImageUrl, username }),
159        {
160          headers: { "Content-Type": "application/json" },