Val Town Code SearchReturn to Val Town

3View and interact with your Val Town SQLite data. It's based off Steve's excellent [SQLite Admin](https://www.val.town/v/stevekrouse/sqlite_admin?v=46) val, adding the ability to run SQLite queries directly in the interface. This new version has a revised UI and that's heavily inspired by [LibSQL Studio](https://github.com/invisal/libsql-studio) by [invisal](https://github.com/invisal). This is now more an SPA, with tables, queries and results showing up on the same page. 
4
5![image.webp](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/c8e102fd-39ca-4bfb-372a-8d36daf43900/public)
6
7## Install 

55          text: "@stevekrouse.com can't tell what happened, but I was using Townie for a thing and it inverted the reasoning and code outputs for whatever reason."
56        },
57        embed: { "$type": "app.bsky.embed.images#view", images: [Array] },
58        replyCount: 1,
59        repostCount: 0,

13
14
15![CleanShot 2024-11-25 at 22.46.31.png](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/d0bce97c-37c7-4301-32a3-c9e6cb241c00/public)
16
17

13
14
15![CleanShot 2024-11-25 at 18.21.48.png](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/6277a3c8-a4a2-47dd-ee37-5ed322864300/public)
16
17![CleanShot 2024-11-25 at 07.42.21.png](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/6b88f1e3-a307-426b-83a1-9159df273800/public)
18

581  right: 0;
582  bottom: 0;
583  background-image: url("data:image/png;base64,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");
584  opacity: 0.1;
585  z-index: 0;

227          headers: {
228            "User-Agent": userAgent,
229            "Accept": "text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8",
230            "Accept-Language": "en-US,en;q=0.5",
231            "Referer": "https://www.google.com/",

46            transform: scaleX(1);
47            transform-origin: center;
48            background-image: linear-gradient(45deg, #ff6b6b, #feca57, #48dbfb, #ff9ff3);
49            background-clip: text;
50            background-size: 300% 300%;

5function App() {
6  const [prompt, setPrompt] = useState("");
7  const [imageData, setImageData] = useState("");
8  const [loading, setLoading] = useState(false);
9  const [error, setError] = useState("");
14    setLoading(true);
15    setError("");
16    setImageData("");
17    try {
18      const response = await fetch("/generate", {
29      }
30      
31      // Ensure we have a valid base64 image with data URI prefix
32      const fullBase64Image = data.image.startsWith('data:image') 
33        ? data.image 
34        : `data:image/png;base64,${data.image}`;
35      
36      setImageData(fullBase64Image);
37      console.log("Image data received:", fullBase64Image.slice(0, 100) + "...");
38    } catch (error) {
39      console.error("Error generating image:", error);
40      setError(error.message || "Failed to generate image");
41    } finally {
42      setLoading(false);
50  return (
51    <div className="container">
52      <h1>Image Generation</h1>
53      <form onSubmit={handleSubmit}>
54        <input
56          value={prompt}
57          onChange={handleInputChange}
58          placeholder="Describe the image you want to generate..."
59          className="input"
60        />
61        <button type="submit" className="submit-btn" disabled={loading}>
62          {loading ? "Generating..." : "Generate Image"}
63        </button>
64      </form>
65      {loading && <p className="loading">Generating image, please wait...</p>}
66      {error && <p className="error">Error: {error}</p>}
67      {imageData && (
68        <div className="image-container">
69          <h2>Generated Image:</h2>
70          <img
71            src={imageData}
72            alt="Generated image"
73            className="generated-image"
74            onError={(e) => {
75              console.error("Image failed to load", e);
76              setError("Failed to render image");
77            }}
78          />
91}
92
93// Utility function to validate and adjust image dimensions
94function validateImageDimensions(width: number, height: number): { 
95  width: number, 
96  height: number, 
137export default async function server(request: Request): Promise<Response> {
138  const url = new URL(request.url);
139  const imagePrompt = url.searchParams.get('image');
140  
141  // Parse width and height with advanced validation
148    height: safeHeight, 
149    warnings 
150  } = validateImageDimensions(rawWidth, rawHeight);
151
152  if (url.pathname === "/generate" && request.method === "POST") {
164      console.log("Received prompt:", prompt);
165
166      const togetherApiUrl = "https://api.together.xyz/v1/images/generations";
167      console.log("Sending request to Together AI API:", togetherApiUrl);
168
194      console.log("Together AI API full response:", JSON.stringify(result, null, 2));
195
196      // Robust extraction of base64 image data
197      let imageBase64;
198      if (result.data && Array.isArray(result.data) && result.data.length > 0) {
199        imageBase64 = result.data[0].b64_json || result.data[0];
200      } else if (result.b64_json) {
201        imageBase64 = result.b64_json;
202      } else if (result.data && result.data.b64_json) {
203        imageBase64 = result.data.b64_json;
204      } else {
205        console.error("Unexpected response structure:", result);
206        throw new Error("No image found in API response");
207      }
208
209      // Ensure imageBase64 is a string and trim any whitespace
210      imageBase64 = (typeof imageBase64 === 'string' ? imageBase64 : JSON.stringify(imageBase64)).trim();
211
212      console.log("Extracted image base64 (first 100 chars):", imageBase64.slice(0, 100));
213
214      // Include warnings in the response if any
215      return new Response(JSON.stringify({ 
216        image: imageBase64,
217        warnings: warnings.length > 0 ? warnings : undefined 
218      }), {
220      });
221    } catch (error) {
222      console.error("Error generating image:", error.message);
223      console.error("Full error details:", error);
224      return new Response(JSON.stringify({ error: error.message || "Failed to generate image" }), {
225        status: 500,
226        headers: { "Content-Type": "application/json" },
229  }
230
231  // Handle direct image generation from URL query
232  if (imagePrompt) {
233    const apiKey = Deno.env.get("TOGETHER_API_KEY");
234    if (!apiKey) {
237
238    try {
239      const togetherApiUrl = "https://api.together.xyz/v1/images/generations";
240      const response = await fetch(togetherApiUrl, {
241        method: "POST",
246        body: JSON.stringify({
247          model: "black-forest-labs/FLUX.1-schnell",
248          prompt: imagePrompt,
249          width: safeWidth,
250          height: safeHeight,
260
261      const result = await response.json();
262      let imageBase64;
263      if (result.data && Array.isArray(result.data) && result.data.length > 0) {
264        imageBase64 = result.data[0].b64_json || result.data[0];
265      } else if (result.b64_json) {
266        imageBase64 = result.b64_json;
267      } else if (result.data && result.data.b64_json) {
268        imageBase64 = result.data.b64_json;
269      } else {
270        throw new Error("No image found in API response");
271      }
272
273      // Ensure imageBase64 is a string and trim any whitespace
274      imageBase64 = (typeof imageBase64 === 'string' ? imageBase64 : JSON.stringify(imageBase64)).trim();
275
276      // If the request accepts HTML, return a full HTML page with the image
277      if (request.headers.get('Accept')?.includes('text/html')) {
278        return new Response(`
280          <html>
281            <head>
282              <title>Generated Image</title>
283              <style>
284                body { 
291                  font-family: Arial, sans-serif;
292                }
293                .image-container {
294                  text-align: center;
295                }
306            </head>
307            <body>
308              <div class="image-container">
309                <img src="data:image/png;base64,${imageBase64}" alt="Generated image for: ${imagePrompt}" width="${safeWidth}" height="${safeHeight}">
310                ${warnings.length > 0 ? `
311                  <div class="warning">
312                    <p>⚠️ Image dimensions adjusted:</p>
313                    <ul>
314                      ${warnings.map(warning => `<li>${warning}</li>`).join('')}
324      }
325
326      // Otherwise, return the base64 image directly
327      return new Response(imageBase64, {
328        headers: { 
329          'Content-Type': 'image/png',
330          'X-Image-Warnings': warnings.length > 0 ? JSON.stringify(warnings) : ''
331        }
332      });
345        <meta charset="UTF-8">
346        <meta name="viewport" content="width=device-width, initial-scale=1.0">
347        <title>Image Generation</title>
348        <style>${css}</style>
349      </head>
408    cursor: not-allowed;
409  }
410  .image-container {
411    margin-top: 20px;
412  }
413  .generated-image {
414    max-width: 100%;
415    height: auto;

1Example usage:
2
3    https://your-val.val.run?image=a%20beautiful%20sunset (uses default 1024x768)
4    https://your-val.val.run?image=a%20beautiful%20sunset&width=512&height=512 (uses 512x512)
5    https://your-val.val.run?image=a%20beautiful%20sunset&width=4096&height=4096 (will cap at 2048x2048)
6
7This uses together.ai api and generates the image using the black-forest-labs/FLUX.1-schnell model which is very fast.
8
9You will need to set the environment var TOGETHER_API_KEY to your key.

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}