Val Town Code SearchReturn to Val Town

26    bloomSeason: 'Late spring to early summer',
27    height: '4-6 feet (1.2-1.8 meters)',
28    imageUrl: 'https://maxm-imggenurl.web.val.run/damask-rose-detailed'
29  },
30  'Monstera deliciosa': {
48    bloomSeason: 'Rarely blooms indoors',
49    height: '10-15 feet (3-4.5 meters) in natural habitat',
50    imageUrl: 'https://maxm-imggenurl.web.val.run/monstera-deliciosa'
51  }
52};
58      <div className="flex items-center mb-4">
59        <img 
60          src={plant.imageUrl} 
61          alt={plant.commonName} 
62          className="w-24 h-24 object-cover rounded-full mr-4 shadow-md"
119      reader.readAsDataURL(file);
120      reader.onloadend = async () => {
121        const base64Image = reader.result.split(',')[1];
122
123        const openai = new OpenAI({
135                  { 
136                    type: "text", 
137                    text: "Identify the plant species in this image with high accuracy. Provide the scientific name, common name, and a detailed description. Include key identifying characteristics. If you cannot confidently identify the plant, explain why." 
138                  },
139                  { 
140                    type: "image_url", 
141                    image_url: { 
142                      url: `data:image/jpeg;base64,${base64Image}` 
143                    } 
144                  }
185              bloomSeason: 'Bloom season varies',
186              height: 'Height varies by specific variety',
187              imageUrl: 'https://maxm-imggenurl.web.val.run/unknown-plant'
188            };
189
194            });
195          } else {
196            reject(new Error('Unable to extract plant details from the image'));
197          }
198        } catch (apiError) {
203
204      reader.onerror = (error) => {
205        reject(new Error(`Image reading error: ${error}`));
206      };
207    } catch (error) {
213// Main Plant Identifier Application Component
214function PlantIdentifierApp() {
215  const [selectedImage, setSelectedImage] = useState(null);
216  const [plantInfo, setPlantInfo] = useState(null);
217  const [identificationError, setIdentificationError] = useState(null);
223  const canvasRef = useRef(null);
224
225  const handleImageUpload = async (event) => {
226    const file = event.target.files[0];
227    processImage(file);
228  };
229
230  const processImage = async (file) => {
231    if (file) {
232      setSelectedImage(URL.createObjectURL(file));
233      setIsLoading(true);
234      setIdentificationError(null);
328      
329      context.scale(-1, 1);
330      context.drawImage(video, -canvas.width, 0, canvas.width, canvas.height);
331      
332      context.setTransform(1, 0, 0, 1, 0, 0);
334      canvas.toBlob((blob) => {
335        if (blob) {
336          processImage(new File([blob], 'captured-plant.jpg', { type: 'image/jpeg' }));
337        } else {
338          setCameraError("Failed to create photo blob.");
339        }
340      }, 'image/jpeg');
341    }
342  }, [processImage]);
343
344  const resetCapture = () => {
345    setSelectedImage(null);
346    setPlantInfo(null);
347    setIdentificationError(null);
381          )}
382
383          {!captureMode && !selectedImage && (
384            <div className="space-y-4">
385              <input 
386                type="file" 
387                accept="image/*" 
388                onChange={handleImageUpload}
389                className="hidden" 
390                id="file-upload"
394                className="w-full bg-green-500 text-white py-3 rounded-lg text-center cursor-pointer hover:bg-green-600 transition duration-300 flex items-center justify-center"
395              >
396                📤 Upload Image
397              </label>
398              <button 
442          )}
443
444          {selectedImage && (
445            <div className="mt-4 animate-fade-in">
446              <img 
447                src={selectedImage} 
448                alt="Selected plant" 
449                className="w-full rounded-lg shadow-md mb-4"

17      "settings": {
18        "url": url,
19        "optionStr": "content,metadata,screenshot,pageshot,citation,doi,images,links",
20        "crawlMode": "jina",
21        "outputMode": "json"
194        title: '',
195        description: '',
196        image: '',
197        pageshotUrl: '',
198        screenshotUrl: ''
329          const title = metadata.title || metadata['og:title'] || metadata['twitter:title'] || 'No title available';
330          const description = metadata.description || metadata['og:description'] || metadata['twitter:description'] || 'No description available';
331          const image = metadata['og:image'] || metadata['twitter:image'] || '';
332          const pageshotUrl = result.jina?.pageshot || '';
333          const screenshotUrl = result.jina?.screenshot || '';
339            title,
340            description,
341            image,
342            pageshotUrl: result.jina?.pageshot,
343            screenshotUrl: result.jina?.screenshot
398  <meta charset="UTF-8">
399  <meta name="viewport" content="width=device-width, initial-scale=1.0">
400  <link rel="icon" type="image/png" href="https://labspace.ai/ls2-circle.png" />
401  <title>PageShot — Get data about any web page</title>
402  <meta property="og:title" content="PageShot — Get data about any web page" />
403  <meta property="og:description" content="Get data about any web page" />
404  <meta property="og:image" content="https://yawnxyz-og.web.val.run/img?link=https://pageshot.labspace.ai&title=PageShot&subtitle=Get+data+about+any+web+page" />
405  <meta property="og:url" content="https://pageshot.labspace.ai" />
406  <meta property="og:type" content="website" />
407  <meta name="twitter:card" content="summary_large_image" />
408  <meta name="twitter:title" content="PageShot — Get data about any web page" />
409  <meta name="twitter:description" content="Get data about any web page" />
410  <meta name="twitter:image" content="https://yawnxyz-og.web.val.run/img?link=https://pageshot.labspace.ai&title=PageShot&subtitle=Get+data+about+any+web+page" />
411  <script src="https://cdn.tailwindcss.com"></script>
412  <script src="https://unpkg.com/dexie@3.2.2/dist/dexie.js"></script>
448          <div class="OutputHeader bg-app-bg-alt p-4 rounded-lg mb-4">
449            <div class="rounded-lg mb-4" x-show="metadata.title">
450              <template x-if="metadata.image">
451                <img :src="metadata.image.startsWith('http') ? metadata.image : new URL(metadata.image, input).href" 
452                     alt="Page preview" 
453                     class="max-w-48 h-auto rounded mt-2 mb-4">

25    bloomSeason: 'Late spring to early summer',
26    height: '4-6 feet (1.2-1.8 meters)',
27    imageUrl: 'https://maxm-imggenurl.web.val.run/damask-rose-detailed'
28  },
29  'Monstera deliciosa': {
47    bloomSeason: 'Rarely blooms indoors',
48    height: '10-15 feet (3-4.5 meters) in natural habitat',
49    imageUrl: 'https://maxm-imggenurl.web.val.run/monstera-deliciosa'
50  },
51  'Ficus lyrata': {
68    bloomSeason: 'Does not typically bloom indoors',
69    height: '6-10 feet (1.8-3 meters) indoors',
70    imageUrl: 'https://maxm-imggenurl.web.val.run/fiddle-leaf-fig'
71  }
72};
73
74// Plant Identification Service (Simulated with more sophisticated matching)
75async function identifyPlant(imageFile) {
76  return new Promise((resolve, reject) => {
77    // Simulate API call with image processing
78    const reader = new FileReader();
79    reader.onloadend = () => {
80      // Basic image analysis simulation
81      const imageData = reader.result;
82      
83      // Sophisticated matching logic
84      const matchConfidences = {
85        'Rosa damascena': calculateImageSimilarity(imageData, 'rose'),
86        'Monstera deliciosa': calculateImageSimilarity(imageData, 'monstera'),
87        'Ficus lyrata': calculateImageSimilarity(imageData, 'fiddle-leaf')
88      };
89
101      }
102    };
103    reader.readAsDataURL(imageFile);
104  });
105}
106
107// Simulated image similarity calculation
108function calculateImageSimilarity(imageData, plantType) {
109  // In a real scenario, this would use machine learning techniques
110  const randomFactor = Math.random() * 0.4 + 0.3;  // Base randomness
111  
112  const typeSpecificBoost = {
113    'rose': imageData.includes('flower') ? 0.3 : 0,
114    'monstera': imageData.includes('large-leaf') ? 0.3 : 0,
115    'fiddle-leaf': imageData.includes('violin-shape') ? 0.3 : 0
116  };
117
124      <div className="flex items-center mb-4">
125        <img 
126          src={plant.imageUrl} 
127          alt={plant.commonName} 
128          className="w-24 h-24 object-cover rounded-full mr-4 shadow-md"
160
161function PlantIdentifierApp() {
162  const [selectedImage, setSelectedImage] = useState(null);
163  const [plantInfo, setPlantInfo] = useState(null);
164  const [identificationError, setIdentificationError] = useState(null);
168  const canvasRef = useRef(null);
169
170  const handleImageUpload = async (event) => {
171    const file = event.target.files[0];
172    processImage(file);
173  };
174
175  const processImage = async (file) => {
176    if (file) {
177      setSelectedImage(URL.createObjectURL(file));
178      setIsLoading(true);
179      setIdentificationError(null);
209    if (videoRef.current && canvasRef.current) {
210      const context = canvasRef.current.getContext('2d');
211      context.drawImage(videoRef.current, 0, 0, 400, 300);
212      
213      canvasRef.current.toBlob((blob) => {
214        processImage(new File([blob], 'captured-plant.jpg', { type: 'image/jpeg' }));
215      }, 'image/jpeg');
216    }
217  }, [processImage]);
218
219  const resetCapture = () => {
220    setSelectedImage(null);
221    setPlantInfo(null);
222    setIdentificationError(null);
235        <main>
236          {/* Previous implementation remains the same */}
237          {!captureMode && !selectedImage && (
238            <div className="space-y-4">
239              <input 
240                type="file" 
241                accept="image/*" 
242                onChange={handleImageUpload}
243                className="hidden" 
244                id="file-upload"
248                className="w-full bg-green-500 text-white py-3 rounded-lg text-center cursor-pointer hover:bg-green-600 transition duration-300 flex items-center justify-center"
249              >
250                📤 Upload Image
251              </label>
252              <button 
305          )}
306
307          {selectedImage && (
308            <div className="mt-4 animate-fade-in">
309              <img 
310                src={selectedImage} 
311                alt="Selected plant" 
312                className="w-full rounded-lg shadow-md mb-4"

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 

1# LibSQLStudio
2
3![3fe0fa827f4c3b6e4efcce501182ffcaab898a6f8fb9e12ef44ee25e8e438ded.png](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/815d9eae-0333-45a2-1ca5-b7e08aec8300/public)
4
5I'll write down the instructions tomorrow. The short version is:

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 

357      title: location,
358      icon: {
359        url: 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24" fill="%23FF453A"><path d="M12 2c-5.33 4 0 10 0 10s5.33-6 0-10z"/></svg>',
360        scaledSize: new window.google.maps.Size(40, 40)
361      }
369        title: vet.name,
370        icon: {
371          url: 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 24 24" fill="%2300E461"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>',
372          scaledSize: new window.google.maps.Size(30, 30)
373        }
553        backgroundColor: theme.colors.background,
554        minHeight: '100vh',
555        backgroundImage: 'linear-gradient(to bottom, rgba(13,19,33,0.8), rgba(13,19,33,1))'
556      }}
557    >

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 

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.

124        role: "system",
125        content:
126          `Describe an image that depicts the ${adjective} children's story about a ${color} colored ${animal}: ${summary}.
127        The description should be descriptive, but three short sentences.
128        Just give me the instructions, don't make an image.`,
129      },
130    ],
143  // fast-lightning-sdxl
144  const options = {
145    "image_size": "square",
146    "num_images": 1,
147    "num_inference_steps": 6,
148    "enable_safety_checker": true,
149  };
150  // {"num_images": 1,
151  // "guidance_scale": 9.5,
152  // "num_inference_steps": 20,
153  // "expand_prompt": true }
154  const result: any = await fal.run(`fal-ai/${falModel}`, { input: { prompt }, options });
155  const url = result.images[0].url;
156
157  return url;
162    title: ogData?.title || "Bedtime Story Maker",
163    description: ogData?.description || "",
164    image: ogData?.image || "",
165    url: ogData?.url || `https://dthyresson-bedtimestorymaker.web.val.run/bedtime_stories}`,
166  };
480      title,
481      description: summary,
482      image: pictureUrl,
483      url: `https://dthyresson-bedtimestorymaker.web.val.run/bedtime_stories/read/${id}`,
484    };