Val Town Code SearchReturn to Val Town

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}

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/",