Val Town Code SearchReturn to Val Town

857  <meta charset="UTF-8">
858  <meta name="viewport" content="width=device-width, initial-scale=1.0">
859  <link rel="icon" type="image/png" href="https://labspace.ai/ls2-circle.png" />
860  <title>Scribe • Audio Recorder</title>
861  <meta property="og:title" content="Scribe • Audio Recorder" />
862  <meta property="og:description" content="A tool to record and process audio" />
863  <meta property="og:image" content="https://yawnxyz-og.web.val.run/img?link=https://scribe.labspace.ai&title=Scribe&subtitle=Audio%20Recorder" />
864  
865  <!-- Load dependencies first -->

4
5<div align="center">
6<img src="https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/67a1d35e-c37c-41a4-0e5a-03a9ba585d00/public" width="700px"/>
7</div>

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. 

440          {profile && (
441            <div className="flex items-center space-x-4">
442              <img src={profile.profileImageUrl} alt="Profile" className="w-8 h-8 rounded-full" />
443              <span>{profile.username}</span>
444              <a href="/auth/logout" className="text-blue-400 hover:text-blue-300">Logout</a>
583                            alt="Blob content"
584                            className="max-w-full h-auto"
585                            onError={() => console.error("Error loading image")}
586                          />
587                        </div>
635                  <li>Create public shareable links for blobs</li>
636                  <li>View and manage public folder</li>
637                  <li>Preview images directly in the interface</li>
638                </ul>
639              </div>
693  const { ValTown } = await import("npm:@valtown/sdk");
694  const vt = new ValTown();
695  const { email: authorEmail, profileImageUrl, username } = await vt.me.profile.retrieve();
696  // const authorEmail = me.email;
697
761
762  c.set("email", email);
763  c.set("profile", { profileImageUrl, username });
764  await next();
765};

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:

3import { createRoot } from "https://esm.sh/react-dom/client";
4
5function ImageGenerator() {
6  const [imageUrl, setImageUrl] = useState<string | null>(null);
7  const [prompt, setPrompt] = useState("");
8  const [isLoading, setIsLoading] = useState(false);
9  const [error, setError] = useState<string | null>(null);
10
11  const generateImage = async (e: React.FormEvent) => {
12    e.preventDefault();
13    setIsLoading(true);
17      // Validate prompt
18      if (!prompt.trim()) {
19        throw new Error('Please enter a description for the image');
20      }
21
22      // Use a more robust image generation endpoint
23      const response = await fetch(`https://maxm-imggenurl.web.val.run/${encodeURIComponent(prompt)}`, {
24        method: 'GET',
25        headers: {
26          'Accept': 'image/*'
27        }
28      });
30      if (!response.ok) {
31        const errorText = await response.text();
32        throw new Error(errorText || 'Image generation failed');
33      }
34
35      const blob = await response.blob();
36      const url = URL.createObjectURL(blob);
37      setImageUrl(url);
38    } catch (err) {
39      console.error('Image generation error:', err);
40      setError(err instanceof Error ? err.message : "An unknown error occurred");
41    } finally {
45
46  const resetGenerator = () => {
47    setImageUrl(null);
48    setPrompt("");
49    setError(null);
52  return (
53    <div style={styles.container}>
54      <h1 style={styles.title}>🎨 AI Image Generator</h1>
55      {!imageUrl ? (
56        <form onSubmit={generateImage} style={styles.form}>
57          <input 
58            type="text" 
59            value={prompt}
60            onChange={(e) => setPrompt(e.target.value)}
61            placeholder="Describe the image you want to generate (e.g., 'A sunset over mountains')"
62            style={styles.input}
63            required
68            style={styles.button}
69          >
70            {isLoading ? "Generating..." : "Generate Image"}
71          </button>
72        </form>
88      )}
89
90      {imageUrl && (
91        <div style={styles.imageContainer}>
92          <img 
93            src={imageUrl} 
94            alt="Generated" 
95            style={styles.image}
96          />
97          <a 
98            href={imageUrl} 
99            download="generated_image.png" 
100            style={styles.downloadButton}
101          >
102            Download Image
103          </a>
104        </div>
152    marginBottom: '20px',
153  },
154  imageContainer: {
155    display: 'flex',
156    flexDirection: 'column',
158    gap: '10px',
159  },
160  image: {
161    maxWidth: '100%',
162    borderRadius: '10px',
181      <head>
182        <meta charset="UTF-8">
183        <title>AI Image Generator</title>
184        <meta name="viewport" content="width=device-width, initial-scale=1">
185        <script src="https://esm.town/v/std/catch"></script>
206          import { createRoot } from "https://esm.sh/react-dom/client";
207
208          function ImageGenerator() {
209            ${ImageGenerator.toString()}
210          }
211
215            const rootElement = document.getElementById("root");
216            if (rootElement) {
217              createRoot(rootElement).render(React.createElement(ImageGenerator));
218            }
219          }

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 

55          text: "@stevekrouse.com can't tell what happened, but I was using Townie for a thing and it inverted the reasoning and code outputs for whatever reason."
56        },
57        embed: { "$type": "app.bsky.embed.images#view", images: [Array] },
58        replyCount: 1,
59        repostCount: 0,

13
14
15![CleanShot 2024-11-25 at 22.46.31.png](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/d0bce97c-37c7-4301-32a3-c9e6cb241c00/public)
16
17

13
14
15![CleanShot 2024-11-25 at 18.21.48.png](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/6277a3c8-a4a2-47dd-ee37-5ed322864300/public)
16
17![CleanShot 2024-11-25 at 07.42.21.png](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/6b88f1e3-a307-426b-83a1-9159df273800/public)
18