Val Town Code SearchReturn to Val Town

3This is a lightweight Blob Admin interface to view and debug your Blob data.
4
5![b7321ca2cd80899250589b9aa08bc3cae9c7cea276282561194e7fc537259b46.png](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/311a81bb-18d8-4583-b7e3-64bac326f700/public)
6
7## Installation

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"