Val Town Code SearchReturn to Val Town

11  let html = `<h1>${valTownInspo.title}</h1>
12  <p>${valTownInspo.description}</p>
13  <a href="https://val.town/${valTownInspo.val}"><img src="${valTownInspo.image}" style="max-width:576px"/></a>
14  <p><a href="https://www.val.town/settings/intervals">Unsubscribe here</a></p>`;
15

3This is a lightweight SQLite Admin interface to view and debug your SQLite data.
4
5![Screenshot 2023-12-08 at 13.35.04.gif](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/ee9a9237-96a0-4276-60b5-aa8c56e49800/public)
6
7It's currently super limited (no pagination, editing data, data-type specific viewers), and is just a couple dozens lines of code over a couple different vals. Forks encouraged! Just comment on the val if you add any features that you want to share.

8
9<div align="center">
10<img src="https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/67a1d35e-c37c-41a4-0e5a-03a9ba585d00/public" width="500px"/>
11</div>

3Monitor any news form your inbox.
4
5![image.png](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/9d312ee9-68f6-4e55-ab4f-57aec4e0c000/public)
6
7Fork this val then configure:

3Monitor any news from your inbox.
4
5![image.png](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/9d312ee9-68f6-4e55-ab4f-57aec4e0c000/public)
6
7Fork this val then configure:

8
9<div align="center">
10<img src="https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/67a1d35e-c37c-41a4-0e5a-03a9ba585d00/public" width="500px"/>
11</div>

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"