Val Town Code SearchReturn to Val Town

24    parts: []
25  });
26  const [imagePreview, setImagePreview] = useState<string | null>(null);
27  const [isLoading, setIsLoading] = useState(false);
28  const [error, setError] = useState<string | null>(null);
29  const fileInputRef = useRef<HTMLInputElement>(null);
30
31  const handleImageUpload = async (event: React.ChangeEvent<HTMLInputElement>) => {
32    const file = event.target.files?.[0];
33    if (file) {
34      const reader = new FileReader();
35      reader.onloadend = () => {
36        setImagePreview(reader.result as string);
37      };
38      reader.readAsDataURL(file);
42      try {
43        const formData = new FormData();
44        formData.append('image', file);
45        formData.append('previousStory', JSON.stringify(storyParts.parts));
46        
62                title: cleanText(result.chapterTitle),
63                content: cleanText(result.story),
64                imageBase64: result.imageBase64
65              }
66            ]
67          }));
68          setImagePreview(null);
69        }
70      } catch (error) {
89            type="file" 
90            ref={fileInputRef}
91            onChange={handleImageUpload}
92            accept="image/*" 
93            style={{display: 'none'}}
94          />
115              <div key={index} className="story-section">
116                <h3>Chapter {index + 1}: {part.title}</h3>
117                {part.imageBase64 && (
118                  <div className="story-image">
119                    <img 
120                      src={part.imageBase64} 
121                      alt={`Illustration for Chapter ${index + 1}`} 
122                    />
155  if (request.method === 'POST' && new URL(request.url).pathname === '/generate-story') {
156    const formData = await request.formData();
157    const imageFile = formData.get('image') as File;
158    const previousStoryStr = formData.get('previousStory') as string || '[]';
159    const previousStory = JSON.parse(previousStoryStr);
160
161    if (!imageFile) {
162      return new Response(JSON.stringify({ error: 'No image uploaded' }), { status: 400 });
163    }
164
165    const arrayBuffer = await imageFile.arrayBuffer();
166    const base64Image = btoa(
167      new Uint8Array(arrayBuffer).reduce((data, byte) => data + String.fromCharCode(byte), '')
168    );
172
173    try {
174      const imageAnalysis = await withTimeout(openai.chat.completions.create({
175        model: "gpt-4o",
176        messages: [
180              { 
181                type: "text", 
182                text: "Describe this image briefly, focusing on the main characters and key elements. Be concise." 
183              },
184              { 
185                type: "image_url", 
186                image_url: { url: `data:image/jpeg;base64,${base64Image}` }
187              }
188            ]
192      }), 15000); // 15 seconds timeout
193
194      const imageDescription = imageAnalysis.choices[0].message.content || "A magical drawing";
195      
196      // Optimize previous story context
204          { 
205            role: "system", 
206            content: "You are a children's storyteller. Continue the story or start a new one based on the image. Use 3 short, simple sentences. Be exciting and brief. Provide a chapter title." 
207          },
208          { 
209            role: "user", 
210            content: `Image: ${imageDescription}\n${previousStoryContext}\n\nCreate a chapter title and a 3-sentence story continuation.`
211          }
212        ],
235        chapterTitle: chapterTitle,
236        story: storyContent,
237        imageBase64: `data:image/jpeg;base64,${base64Image}`
238      }), {
239        headers: { 'Content-Type': 'application/json' }
243      console.error('Story generation error:', error);
244      return new Response(JSON.stringify({ 
245        error: 'Story generation timed out. Please try again with a simpler image or shorter previous story.' 
246      }), { 
247        status: 500,
325}
326
327.story-image {
328  max-width: 100%;
329  margin-bottom: 15px;
332}
333
334.story-image img {
335  max-width: 100%;
336  max-height: 300px;
343}
344
345.image-preview {
346  display: none;
347}

3This is a lightweight Blob Admin interface to view and debug your Blob data.
4
5![Screenshot 2024-11-22 at 15.43.43@2x.png](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/d075a4ee-93ec-4cdd-4823-7c8aee593f00/public)
6
7Versions 0-17 of this val were done with Hono and server-rendering. 

440          {profile && (
441            <div className="flex items-center space-x-4">
442              <img src={profile.profileImageUrl} alt="Profile" className="w-8 h-8 rounded-full" />
443              <span>{profile.username}</span>
444              <a href="/auth/logout" className="text-blue-400 hover:text-blue-300">Logout</a>
583                            alt="Blob content"
584                            className="max-w-full h-auto"
585                            onError={() => console.error("Error loading image")}
586                          />
587                        </div>
635                  <li>Create public shareable links for blobs</li>
636                  <li>View and manage public folder</li>
637                  <li>Preview images directly in the interface</li>
638                </ul>
639              </div>

3This is a lightweight Blob Admin interface to view and debug your Blob data.
4
5![Screenshot 2024-11-22 at 15.43.43@2x.png](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/d075a4ee-93ec-4cdd-4823-7c8aee593f00/public)
6
7Versions 0-17 of this val were done with Hono and server-rendering. 

439          {profile && (
440            <div className="flex items-center space-x-4">
441              <img src={profile.profileImageUrl} alt="Profile" className="w-8 h-8 rounded-full" />
442              <span>{profile.username}</span>
443              <a href="/auth/logout" className="text-blue-400 hover:text-blue-300">Logout</a>
582                            alt="Blob content"
583                            className="max-w-full h-auto"
584                            onError={() => console.error("Error loading image")}
585                          />
586                        </div>
634                  <li>Create public shareable links for blobs</li>
635                  <li>View and manage public folder</li>
636                  <li>Preview images directly in the interface</li>
637                </ul>
638              </div>

78    "headers": {
79      "accept":
80        "text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.7",
81      "accept-encoding": "gzip, deflate, br, zstd",
82      "referer": "https://workers.cloudflare.com/",

3This is a lightweight Blob Admin interface to view and debug your Blob data.
4
5![b7321ca2cd80899250589b9aa08bc3cae9c7cea276282561194e7fc537259b46.png](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/311a81bb-18d8-4583-b7e3-64bac326f700/public)
6
7## Installation

11  let html = `<h1>${valTownInspo.title}</h1>
12  <p>${valTownInspo.description}</p>
13  <a href="https://val.town/${valTownInspo.val}"><img src="${valTownInspo.image}" style="max-width:576px"/></a>
14  <p><a href="https://www.val.town/settings/intervals">Unsubscribe here</a></p>`;
15

3This is a lightweight SQLite Admin interface to view and debug your SQLite data.
4
5![Screenshot 2023-12-08 at 13.35.04.gif](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/ee9a9237-96a0-4276-60b5-aa8c56e49800/public)
6
7It's currently super limited (no pagination, editing data, data-type specific viewers), and is just a couple dozens lines of code over a couple different vals. Forks encouraged! Just comment on the val if you add any features that you want to share.

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