Val Town Code SearchReturn to Val Town

5function App() {
6  const [messages, setMessages] = useState([
7    { role: 'assistant', content: "Hi! I'm Yukti, your friendly female AI assistant. I can help you chat or generate images! How can I assist you today? 👩‍💻" }
8  ]);
9  const [inputText, setInputText] = useState('');
10  const [isLoading, setIsLoading] = useState(false);
11  const [mode, setMode] = useState<'chat' | 'image'>('chat');
12  const [generatedImages, setGeneratedImages] = useState<string[]>([]);
13  const [imageStyle, setImageStyle] = useState<string>('photorealistic');
14  const [imageCount, setImageCount] = useState<number>(2);
15  const messagesEndRef = useRef(null);
16
43    setInputText('');
44    setIsLoading(true);
45    setGeneratedImages([]);
46
47    try {
48      const response = await fetch(mode === 'chat' ? '/chat' : '/generate-image', {
49        method: 'POST',
50        body: JSON.stringify({ 
51          messages: [...messages, newUserMessage],
52          prompt: inputText,
53          style: imageStyle,
54          count: imageCount
55        })
56      });
69        synthesizeSpeech(assistantResponse);
70      } else {
71        // Ensure imageUrls is always an array, even if undefined
72        const imageUrls = Array.isArray(data.imageUrls) ? data.imageUrls : [];
73        setGeneratedImages(imageUrls);
74        const imageMessage = { 
75          role: 'assistant', 
76          content: imageUrls.length > 0 
77            ? `I've generated ${imageUrls.length} ${imageStyle} images for "${inputText}"` 
78            : "Sorry, I couldn't generate any images." 
79        };
80        setMessages(prev => [...prev, imageMessage]);
81      }
82    } catch (error) {
95
96  const toggleMode = () => {
97    setMode(prev => prev === 'chat' ? 'image' : 'chat');
98    setGeneratedImages([]);
99  };
100
101  const imageStyles = [
102    'photorealistic', 
103    'digital art', 
109  ];
110
111  const imageCountOptions = [1, 2, 3, 4];
112
113  return (
115      <div className="chat-header">
116        <h1>Yukti 👩‍💻</h1>
117        <p>{mode === 'chat' ? 'Chat Mode' : 'Image Generation Mode'}</p>
118      </div>
119      
120      {mode === 'image' && (
121        <div className="image-controls">
122          <div className="style-selector">
123            <label>Image Style:</label>
124            <select 
125              value={imageStyle} 
126              onChange={(e) => setImageStyle(e.target.value)}
127            >
128              {imageStyles.map(style => (
129                <option key={style} value={style}>{style}</option>
130              ))}
132          </div>
133          <div className="count-selector">
134            <label>Number of Images:</label>
135            <select 
136              value={imageCount} 
137              onChange={(e) => setImageCount(Number(e.target.value))}
138            >
139              {imageCountOptions.map(count => (
140                <option key={count} value={count}>{count}</option>
141              ))}
154          </div>
155        ))}
156        {generatedImages.length > 0 && (
157          <div className="message assistant image-result">
158            <div className="image-gallery">
159              {generatedImages.map((imageUrl, index) => (
160                <img 
161                  key={index}
162                  src={imageUrl} 
163                  alt={`Generated image ${index + 1}`} 
164                  className="generated-image"
165                />
166              ))}
180          onClick={toggleMode} 
181          className="mode-toggle-inline"
182          title={mode === 'chat' ? 'Switch to Image Generation' : 'Switch to Chat'}
183        >
184          {mode === 'chat' ? '🖼️' : '💬'}
188          value={inputText}
189          onChange={(e) => setInputText(e.target.value)}
190          placeholder={mode === 'chat' ? "Talk to Yukti..." : "Describe the image you want..."}
191          disabled={isLoading}
192        />
257      }
258
259      if (url.pathname === '/generate-image') {
260        // Verify images method exists
261        if (!openai.images || !openai.images.generate) {
262          throw new Error("OpenAI object does not have the expected image generation method");
263        }
264
266        const { prompt, style, count } = body;
267
268        const imageResponse = await openai.images.generate({
269          model: "dall-e-3",
270          prompt: `A ${style} image of: ${prompt}. 
271          High-quality, detailed, and visually appealing composition.`,
272          n: count,
274        });
275
276        const imageUrls = imageResponse.data?.map(img => img.url) || [];
277
278        return new Response(JSON.stringify({ imageUrls }), {
279          headers: { 'Content-Type': 'application/json' }
280        });
303    <html>
304      <head>
305        <title>Yukti - AI Assistant with Image Generation</title>
306        <style>${css}</style>
307      </head>
395}
396
397.image-gallery {
398  display: flex;
399  flex-wrap: wrap;
402}
403
404.generated-image {
405  max-width: 200px;
406  max-height: 200px;
409}
410
411.image-controls {
412  display: flex;
413  justify-content: space-around;

68  const [message, setMessage] = useState("Welcome to Hunt the Wumpus! Kill the Wumpus to reveal the treasure!");
69  const [gameState, setGameState] = useState('playing');
70  const [wumpusImageUrl, setWumpusImageUrl] = useState(null);
71  const [pitImageUrl, setPitImageUrl] = useState(null);
72  const [winImageUrl, setWinImageUrl] = useState(null);
73  const [lossReason, setLossReason] = useState(null);
74
75  // Generate a dancing Wumpus image when game is lost to Wumpus
76  useEffect(() => {
77    if (gameState === 'lost' && lossReason === 'wumpus') {
78      const imageDescription = "a mischievous wumpus monster dancing victoriously, cartoon style, transparent background";
79      const encodedDesc = encodeURIComponent(imageDescription);
80      const imageUrl = `https://maxm-imggenurl.web.val.run/${encodedDesc}`;
81      setWumpusImageUrl(imageUrl);
82    }
83  }, [gameState, lossReason]);
84
85  // Generate a pit fall image when falling into a pit
86  useEffect(() => {
87    if (gameState === 'lost' && lossReason === 'pit') {
88      const imageDescription = "a cartoon character falling down a deep dark pit, comical falling pose, transparent background";
89      const encodedDesc = encodeURIComponent(imageDescription);
90      const imageUrl = `https://maxm-imggenurl.web.val.run/${encodedDesc}`;
91      setPitImageUrl(imageUrl);
92    }
93  }, [gameState, lossReason]);
94
95  // Generate a winning celebration image
96  useEffect(() => {
97    if (gameState === 'won') {
98      const imageDescription = "heroic adventurer celebrating victory with treasure, cartoon style, epic pose, confetti in background";
99      const encodedDesc = encodeURIComponent(imageDescription);
100      const imageUrl = `https://maxm-imggenurl.web.val.run/${encodedDesc}`;
101      setWinImageUrl(imageUrl);
102    }
103  }, [gameState]);
206    setMessage("New game started! Kill the Wumpus to reveal the treasure!");
207    setGameState('playing');
208    setWumpusImageUrl(null);
209    setPitImageUrl(null);
210    setWinImageUrl(null);
211    setLossReason(null);
212  };
230      }}>
231        <img 
232          src={pitImageUrl} 
233          alt="Falling into Pit" 
234          style={{
273      }}>
274        <img 
275          src={wumpusImageUrl} 
276          alt="Dancing Wumpus" 
277          style={{
379        ))}
380        <img 
381          src={winImageUrl} 
382          alt="Victory Celebration" 
383          style={{

42function getMoviePosterUrl(movie) {
43  return movie.poster_path
44    ? `https://image.tmdb.org/t/p/w300${movie.poster_path}`
45    : movie.poster_path_season
46    ? `https://image.tmdb.org/t/p/w300${movie.poster_path_season}`
47    : `https://cdn.zoechip.to/${movie.img ? "/data" + movie.img?.split("data")?.pop() : "images/no_poster.jpg"}`;
48}
49
237          src="${
238    movie.backdrop_path
239      ? `https://image.tmdb.org/t/p/w1280${movie.backdrop_path}`
240      : `https://cdn.zoechip.to/${movie.img ? "/data" + movie.img?.split("data")?.pop() : "images/no_poster.jpg"}`
241  }" 
242          class="w-full h-64 object-cover rounded-lg mb-4" 

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    >