Val Town Code SearchReturn to Val Town

515  <meta charset="UTF-8">
516  <meta name="viewport" content="width=device-width, initial-scale=1.0">
517  <link rel="icon" type="image/png" href="https://labspace.ai/ls2-circle.png" />
518  <title>Breakdown</title>
519  <meta property="og:title" content="Breakdown" />
520  <meta property="og:description" content="Break down topics into different perspectives and arguments with AI-powered balanced analysis" />
521  <meta property="og:image" content="https://yawnxyz-og.web.val.run/img2?link=https://breakdown.labspace.ai&title=Breakdown&subtitle=Balanced+perspective+analysis&panelWidth=700&attachment=https://f2.phage.directory/capsid/20bEQGy3/breakdown-scr2_public.png" />
522  <meta property="og:url" content="https://breakdown.labspace.ai/" />
523  <meta property="og:type" content="website" />
524  <meta name="twitter:card" content="summary_large_image" />
525  <meta name="twitter:title" content="Breakdown" />
526  <meta name="twitter:description" content="Break down topics into different perspectives and arguments with AI-powered balanced analysis" />
527  <meta name="twitter:image" content="https://yawnxyz-og.web.val.run/img2?link=https://breakdown.labspace.ai&title=Breakdown&subtitle=Balanced+perspective+analysis&panelWidth=700&attachment=https://f2.phage.directory/capsid/20bEQGy3/breakdown-scr2_public.png" />
528
529  <script src="https://cdn.tailwindcss.com"></script>

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. 

187            <div key={index} className="bg-white shadow-md rounded px-4 sm:px-8 pt-6 pb-8 mb-8">
188              <h3 className="text-2xl font-bold mb-4 text-indigo-500">{recipe.name}</h3>
189              {recipe.image && (
190                <div className="mb-6">
191                  <img src={recipe.image} alt={recipe.name} className="w-full h-64 object-cover rounded-lg" />
192                </div>
193              )}
270      const recipes = JSON.parse(jsonContent);
271
272      // Generate images for each recipe
273      const recipesWithImages = await Promise.all(
274        recipes.map(async (recipe) => {
275          try {
276            const imageUrl = await generateImage(recipe.name);
277            return { ...recipe, image: imageUrl };
278          } catch (error) {
279            console.error(`Failed to generate image for ${recipe.name}:`, error);
280            return { ...recipe, image: null };
281          }
282        })
283      );
284
285      return new Response(JSON.stringify({ recipes: recipesWithImages }), {
286        headers: { "Content-Type": "application/json" },
287      });
308        <meta property="og:title" content="Lazy Cook">
309        <meta property="og:description" content="If you don't feel like going through your recipe books, Lazy Cook to the rescue!">
310        <meta property="og:image" content="https://opengraph.b-cdn.net/production/images/90b45fbc-3605-4722-97d5-c707f94488ca.jpg?token=QsSAtAFq7L3G7tMgFKZa1vzT5hYhPOAsXtgLfWUE5zk&height=800&width=1200&expires=33269333680">
311
312        <!-- Twitter Meta Tags -->
313        <meta name="twitter:card" content="summary_large_image">
314        <meta property="twitter:domain" content="karkowg-lazycook.web.val.run">
315        <meta property="twitter:url" content="https://karkowg-lazycook.web.val.run/">
316        <meta name="twitter:title" content="Lazy Cook">
317        <meta name="twitter:description" content="If you don't feel like going through your recipe books, Lazy Cook to the rescue!">
318        <meta name="twitter:image" content="https://opengraph.b-cdn.net/production/images/90b45fbc-3605-4722-97d5-c707f94488ca.jpg?token=QsSAtAFq7L3G7tMgFKZa1vzT5hYhPOAsXtgLfWUE5zk&height=800&width=1200&expires=33269333680">
319
320        <!-- Meta Tags Generated via https://www.opengraph.xyz -->
338}
339
340async function generateImage(recipeName: string): Promise<string> {
341  const response = await fetch(`https://maxm-imggenurl.web.val.run/${encodeURIComponent(recipeName)}`);
342  if (!response.ok) {
343    throw new Error(`Failed to generate image for ${recipeName}`);
344  }
345  return response.url;

57  created_at: string;
58  profile_banner_url: string;
59  profile_image_url_https: string;
60  can_dm: boolean;
61}

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 

3import { createRoot } from "https://esm.sh/react-dom/client";
4import debounce from "https://esm.sh/lodash.debounce";
5import imageCompression from "https://esm.sh/browser-image-compression";
6
7function App() {
11  const [editPrompt, setEditPrompt] = useState('');
12  const [isRefining, setIsRefining] = useState(false);
13  const [lastUploadedImage, setLastUploadedImage] = useState(null);
14  const [showCopiedMessage, setShowCopiedMessage] = useState(false);
15  const [theme, setTheme] = useState(() => {
42  }, []);
43
44  const generateLandingPage = async (isInitial = true, imageBase64 = null, existingCode = '', editPrompt = '') => {
45    setIsLoading(true);
46    setIsRefining(isInitial ? false : true);
53        body: JSON.stringify({
54          isInitial,
55          imageBase64,
56          existingCode,
57          editPrompt
78  };
79
80  const compressImage = async (file) => {
81    const options = {
82      maxSizeMB: 1,
85    };
86    try {
87      const compressedFile = await imageCompression(file, options);
88      return compressedFile;
89    } catch (error) {
90      console.error("Error compressing image:", error);
91      return file;
92    }
93  };
94
95  const handleImageUpload = async (event) => {
96    const file = event.target.files[0];
97    if (file) {
98      const compressedFile = await compressImage(file);
99      const reader = new FileReader();
100      reader.onloadend = () => {
101        const base64 = reader.result.split(',')[1];
102        setLastUploadedImage(base64);
103        generateLandingPage(true, base64);
104      };
108
109  const handleRegenerate = () => {
110    if (lastUploadedImage) {
111      generateLandingPage(true, lastUploadedImage);
112    } else {
113      alert("Please upload an image first before regenerating.");
114    }
115  };
211        <input 
212          type="file" 
213          accept="image/*" 
214          ref={fileInputRef}
215          onChange={handleImageUpload}
216          className="hidden"
217        />
221          disabled={isLoading}
222        >
223          {isLoading ? 'Generating...' : 'Upload Design Image'}
224        </button>
225        <button 
226          onClick={handleRegenerate}
227          className="bg-green-500 text-white px-4 py-2 rounded dark:bg-green-600 hover:bg-green-600 dark:hover:bg-green-700 transition-colors"
228          disabled={isLoading || !lastUploadedImage}
229        >
230          Regenerate
325      const openai = new OpenAI();
326
327      const { isInitial, imageBase64, existingCode, editPrompt } = await request.json();
328
329      console.log('Refinement Request Details:', {
330        isInitial,
331        imageBase64: imageBase64 ? `${imageBase64.slice(0, 50)}...` : null,
332        existingCodeLength: existingCode ? existingCode.length : 0,
333        editPrompt
336      let designDescription = '';
337
338      if (isInitial && imageBase64) {
339        const visionResponse = await openai.chat.completions.create({
340          model: "gpt-4-vision-preview",
345                { 
346                  type: "text", 
347                  text: "Analyze this landing page design image in detail. Focus on the following aspects:\n\n1. Overall layout structure (header, main sections, footer)\n2. Color scheme (primary, secondary, accent colors)\n3. Typography (font styles, sizes, hierarchy)\n4. Key visual elements (images, icons, illustrations)\n5. Call-to-action buttons and their placement\n6. Navigation menu structure\n7. Content sections and their arrangement\n8. Mobile responsiveness considerations\n9. Any unique or standout design features\n\nProvide a comprehensive description that a web developer could use to accurately recreate this design using HTML and Tailwind CSS." 
348                },
349                { 
350                  type: "image_url", 
351                  image_url: { url: `data:image/jpeg;base64,${imageBase64}` }
352                }
353              ]

113. **Reflection Stage**: After 5 "No" responses, users enter a reflection stage to contemplate their journey.
124. **Motivational Quotes**: Dynamic quotes change based on the user's progress to provide encouragement.
135. **Journey Visualization**: Users can upload a symbolic image representing their journey.
146. **PDF Generation**: At the end of the challenge, users can generate a PDF summary of their journey.
157. **Data Privacy**: All data is stored locally on the user's device, ensuring privacy and security.
252. **Reflection Stage**:
26   - Triggered after receiving 5 "No" responses.
27   - Users can upload a symbolic image and write a comprehensive reflection.
28
293. **Completion Stage**:

220        <title>Markdown Links Resolver</title>
221        <meta name="viewport" content="width=device-width, initial-scale=1">
222        <link rel="icon" type="image/svg+xml" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'><text font-size='200' x='50%' y='50%' text-anchor='middle' dominant-baseline='central'>🔗</text></svg>">
223        <style>
224          body, html { 

6function App() {
7  const [youtubeUrl, setYoutubeUrl] = useState("https://www.youtube.com/embed/QskiaNqaqlc?si=MvD_ydotKgovS9pC");
8  const [postVideoImages, setPostVideoImages] = useState<string[]>([]);
9  const [newImageUrl, setNewImageUrl] = useState("");
10  const [imageErrors, setImageErrors] = useState<{[key: number]: boolean}>({});
11  const [imageProxyUrls, setImageProxyUrls] = useState<{[key: number]: string}>({});
12
13  useEffect(() => {
17
18  useEffect(() => {
19    // Proxy images that might have CORS issues
20    postVideoImages.forEach((imageUrl, index) => {
21      proxyImage(imageUrl, index);
22    });
23  }, [postVideoImages]);
24
25  const proxyImage = async (imageUrl: string, index: number) => {
26    try {
27      const response = await fetch(`/proxy-image?url=${encodeURIComponent(imageUrl)}`);
28      if (response.ok) {
29        const proxyUrl = await response.text();
30        setImageProxyUrls(prev => ({...prev, [index]: proxyUrl}));
31      } else {
32        handleImageError(index);
33      }
34    } catch (error) {
35      console.error("Image proxy error:", error);
36      handleImageError(index);
37    }
38  };
42      const { blob } = await import("https://esm.town/v/std/blob");
43      const savedYoutubeUrl = await blob.get(`${getLegacyImportUrl(import.meta.url)}_youtubeUrl`);
44      const savedImages = await blob.get(`${getLegacyImportUrl(import.meta.url)}_postVideoImages`);
45      
46      if (savedYoutubeUrl) setYoutubeUrl(savedYoutubeUrl);
47      if (savedImages) {
48        const parsedImages = JSON.parse(savedImages);
49        setPostVideoImages(parsedImages);
50      }
51    } catch (error) {
54  };
55
56  const saveData = async (type: 'url' | 'images') => {
57    try {
58      const { blob } = await import("https://esm.town/v/std/blob");
60        await blob.set(`${getLegacyImportUrl(import.meta.url)}_youtubeUrl`, youtubeUrl);
61      } else {
62        await blob.set(`${getLegacyImportUrl(import.meta.url)}_postVideoImages`, JSON.stringify(postVideoImages));
63      }
64    } catch (error) {
67  };
68
69  const isValidImageUrl = (url: string) => {
70    try {
71      const parsedUrl = new URL(url);
74        (parsedUrl.protocol === 'http:' || parsedUrl.protocol === 'https:') && 
75        (
76          // General image extensions
77          /\.(jpg|jpeg|png|gif|webp|bmp)$/i.test(parsedUrl.pathname) ||
78          // AWS S3 URL patterns
87  };
88
89  const handleAddImage = () => {
90    if (newImageUrl.trim() && isValidImageUrl(newImageUrl.trim())) {
91      const updatedImages = [...postVideoImages, newImageUrl.trim()];
92      setPostVideoImages(updatedImages);
93      setNewImageUrl("");
94      saveData('images');
95    } else {
96      alert("Please enter a valid image URL (supports JPG, PNG, GIF, WebP, BMP, and AWS S3 URLs)");
97    }
98  };
99
100  const handleRemoveImage = (indexToRemove: number) => {
101    const updatedImages = postVideoImages.filter((_, index) => index !== indexToRemove);
102    setPostVideoImages(updatedImages);
103    
104    // Remove any associated error and proxy states
105    const newImageErrors = {...imageErrors};
106    const newImageProxyUrls = {...imageProxyUrls};
107    delete newImageErrors[indexToRemove];
108    delete newImageProxyUrls[indexToRemove];
109    
110    setImageErrors(newImageErrors);
111    setImageProxyUrls(newImageProxyUrls);
112    
113    saveData('images');
114  };
115
116  const handleImageError = (index: number) => {
117    setImageErrors(prev => ({...prev, [index]: true}));
118  };
119
122      <h1 style={styles.title}>Interactive Video Presentation</h1>
123      <p style={styles.description}>
124        Welcome to our dynamic video presentation. You can customize the video and add post-video images.
125      </p>
126      
153        </div>
154
155        {/* Post Video Images Section */}
156        <div style={styles.postVideoSection}>
157          <h3>Post Video Images</h3>
158          <div style={styles.imageInputContainer}>
159            <input 
160              type="text" 
161              value={newImageUrl} 
162              onChange={(e) => setNewImageUrl(e.target.value)}
163              style={styles.urlInput}
164              placeholder="Enter Image URL (supports AWS S3)"
165            />
166            <button onClick={handleAddImage} style={styles.saveButton}>Add Image</button>
167          </div>
168          
169          {/* Image Gallery */}
170          <div style={styles.imageGallery}>
171            {postVideoImages.map((imageUrl, index) => (
172              <div key={index} style={styles.imageItem}>
173                {imageErrors[index] ? (
174                  <div style={styles.errorImage}>
175                    <span>❌ Image Failed to Load</span>
176                    <p>{imageUrl}</p>
177                  </div>
178                ) : (
179                  <img 
180                    src={imageProxyUrls[index] || imageUrl} 
181                    alt={`Post video image ${index + 1}`} 
182                    style={styles.galleryImage}
183                    onError={() => handleImageError(index)}
184                  />
185                )}
186                <button 
187                  onClick={() => handleRemoveImage(index)} 
188                  style={styles.removeButton}
189                >
213
214export default async function server(request: Request): Promise<Response> {
215  // Image proxy endpoint
216  const url = new URL(request.url);
217  if (url.pathname === '/proxy-image') {
218    const imageUrl = url.searchParams.get('url');
219    if (!imageUrl) {
220      return new Response('No URL provided', { status: 400 });
221    }
222
223    try {
224      const imageResponse = await fetch(imageUrl, {
225        headers: {
226          'User-Agent': 'Mozilla/5.0',
227          'Referer': new URL(imageUrl).origin
228        }
229      });
230
231      if (!imageResponse.ok) {
232        return new Response('Image fetch failed', { status: imageResponse.status });
233      }
234
235      const imageBlob = await imageResponse.blob();
236      return new Response(imageBlob, {
237        headers: {
238          'Content-Type': imageResponse.headers.get('Content-Type') || 'image/jpeg',
239          'Cache-Control': 'public, max-age=86400' // Cache for 24 hours
240        }
241      });
242    } catch (error) {
243      return new Response('Image proxy error', { status: 500 });
244    }
245  }
315    marginTop: '20px',
316  },
317  imageInputContainer: {
318    display: 'flex',
319    marginBottom: '20px',
320    gap: '10px',
321  },
322  imageGallery: {
323    display: 'flex',
324    flexWrap: 'wrap',
326    justifyContent: 'center',
327  },
328  imageItem: {
329    position: 'relative',
330    display: 'flex',
332    alignItems: 'center',
333  },
334  galleryImage: {
335    maxWidth: '200px',
336    maxHeight: '200px',
338    borderRadius: '8px',
339  },
340  errorImage: {
341    width: '200px',
342    height: '200px',

6function App() {
7  const [youtubeUrl, setYoutubeUrl] = useState("https://www.youtube.com/embed/QskiaNqaqlc?si=MvD_ydotKgovS9pC");
8  const [postVideoImages, setPostVideoImages] = useState<string[]>([]);
9  const [newImageUrl, setNewImageUrl] = useState("");
10  const [imageErrors, setImageErrors] = useState<{[key: number]: boolean}>({});
11  const [imageProxyUrls, setImageProxyUrls] = useState<{[key: number]: string}>({});
12
13  useEffect(() => {
16
17  useEffect(() => {
18    // Proxy images that might have CORS issues
19    postVideoImages.forEach((imageUrl, index) => {
20      if (!imageErrors[index]) {
21        proxyImage(imageUrl, index);
22      }
23    });
24  }, [postVideoImages]);
25
26  const proxyImage = async (imageUrl: string, index: number) => {
27    try {
28      const response = await fetch(`/proxy-image?url=${encodeURIComponent(imageUrl)}`, {
29        headers: {
30          'Cache-Control': 'no-cache' // Ensure fresh fetch
33      if (response.ok) {
34        const proxyUrl = await response.text();
35        setImageProxyUrls(prev => ({...prev, [index]: proxyUrl}));
36        // Reset any previous error for this image
37        setImageErrors(prev => {
38          const newErrors = {...prev};
39          delete newErrors[index];
41        });
42      } else {
43        handleImageError(index);
44      }
45    } catch (error) {
46      console.error("Image proxy error:", error);
47      handleImageError(index);
48    }
49  };
53      const { blob } = await import("https://esm.town/v/std/blob");
54      const savedYoutubeUrl = await blob.get(`${getLegacyImportUrl(import.meta.url)}_youtubeUrl`);
55      const savedImages = await blob.get(`${getLegacyImportUrl(import.meta.url)}_postVideoImages`);
56      
57      if (savedYoutubeUrl) setYoutubeUrl(savedYoutubeUrl);
58      if (savedImages) {
59        const parsedImages = JSON.parse(savedImages);
60        setPostVideoImages(parsedImages);
61      }
62    } catch (error) {
65  };
66
67  const saveData = async (type: 'url' | 'images') => {
68    try {
69      const { blob } = await import("https://esm.town/v/std/blob");
71        await blob.set(`${getLegacyImportUrl(import.meta.url)}_youtubeUrl`, youtubeUrl);
72      } else {
73        await blob.set(`${getLegacyImportUrl(import.meta.url)}_postVideoImages`, JSON.stringify(postVideoImages));
74      }
75    } catch (error) {
78  };
79
80  const isValidImageUrl = (url: string) => {
81    try {
82      new URL(url);
87  };
88
89  const handleAddImage = () => {
90    if (newImageUrl.trim() && isValidImageUrl(newImageUrl.trim())) {
91      const updatedImages = [...postVideoImages, newImageUrl.trim()];
92      setPostVideoImages(updatedImages);
93      setNewImageUrl("");
94      saveData('images');
95    } else {
96      alert("Please enter a valid image URL with a supported extension");
97    }
98  };
99
100  const handleRemoveImage = (indexToRemove: number) => {
101    const updatedImages = postVideoImages.filter((_, index) => index !== indexToRemove);
102    setPostVideoImages(updatedImages);
103    
104    // Remove any associated error and proxy states
105    const newImageErrors = {...imageErrors};
106    const newImageProxyUrls = {...imageProxyUrls};
107    delete newImageErrors[indexToRemove];
108    delete newImageProxyUrls[indexToRemove];
109    
110    setImageErrors(newImageErrors);
111    setImageProxyUrls(newImageProxyUrls);
112    
113    saveData('images');
114  };
115
116  const handleImageError = (index: number) => {
117    setImageErrors(prev => ({...prev, [index]: true}));
118  };
119
120  const retryImageLoad = (index: number) => {
121    const imageUrl = postVideoImages[index];
122    proxyImage(imageUrl, index);
123  };
124
127      <h1 style={styles.title}>Interactive Video Presentation</h1>
128      <p style={styles.description}>
129        Welcome to our dynamic video presentation. You can customize the video and add post-video images.
130      </p>
131      
158        </div>
159
160        {/* Post Video Images Section */}
161        <div style={styles.postVideoSection}>
162          <h3>Post Video Images</h3>
163          <div style={styles.imageInputContainer}>
164            <input 
165              type="text" 
166              value={newImageUrl} 
167              onChange={(e) => setNewImageUrl(e.target.value)}
168              style={styles.urlInput}
169              placeholder="Enter Image URL"
170            />
171            <button onClick={handleAddImage} style={styles.saveButton}>Add Image</button>
172          </div>
173          
174          {/* Image Gallery */}
175          <div style={styles.imageGallery}>
176            {postVideoImages.map((imageUrl, index) => (
177              <div key={index} style={styles.imageItem}>
178                {imageErrors[index] ? (
179                  <div style={styles.errorImage}>
180                    <span>❌ Image Failed to Load</span>
181                    <p>{imageUrl}</p>
182                    <button 
183                      onClick={() => retryImageLoad(index)} 
184                      style={{...styles.saveButton, marginTop: '10px'}}
185                    >
189                ) : (
190                  <img 
191                    src={imageProxyUrls[index] || imageUrl} 
192                    alt={`Post video image ${index + 1}`} 
193                    style={styles.galleryImage}
194                    onError={() => handleImageError(index)}
195                  />
196                )}
197                <button 
198                  onClick={() => handleRemoveImage(index)} 
199                  style={styles.removeButton}
200                >
224
225export default async function server(request: Request): Promise<Response> {
226  // Image proxy endpoint
227  const url = new URL(request.url);
228  if (url.pathname === '/proxy-image') {
229    const imageUrl = url.searchParams.get('url');
230    if (!imageUrl) {
231      return new Response('No URL provided', { status: 400 });
232    }
233
234    try {
235      const imageResponse = await fetch(imageUrl, {
236        headers: {
237          'User-Agent': 'Mozilla/5.0',
238          'Referer': new URL(imageUrl).origin,
239          'Accept': 'image/*'
240        }
241      });
242
243      if (!imageResponse.ok) {
244        return new Response('Image fetch failed', { status: imageResponse.status });
245      }
246
247      const imageBlob = await imageResponse.blob();
248      return new Response(imageBlob, {
249        headers: {
250          'Content-Type': imageResponse.headers.get('Content-Type') || 'image/jpeg',
251          'Cache-Control': 'public, max-age=86400', // Cache for 24 hours
252          'Access-Control-Allow-Origin': '*'
254      });
255    } catch (error) {
256      return new Response('Image proxy error', { status: 500 });
257    }
258  }