Val Town Code SearchReturn to Val Town

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 

1165        <meta property="og:description" content="Turn your ideas into fully functional apps in less than a second – powered by Llama3.3-70b on Cerebras's super-fast wafer chips. Code is 100% open-source, hosted on Val Town."">
1166        <meta property="og:type" content="website">
1167        <meta property="og:image" content="https://stevekrouse-blob_admin.web.val.run/api/public/CerebrasCoderOG.jpg">
1168        
1169            

1165        <meta property="og:description" content="Turn your ideas into fully functional apps in less than a second – powered by Llama3.3-70b on Cerebras's super-fast wafer chips. Code is 100% open-source, hosted on Val Town."">
1166        <meta property="og:type" content="website">
1167        <meta property="og:image" content="https://stevekrouse-blob_admin.web.val.run/api/public/CerebrasCoderOG.jpg">
1168        
1169            

3Protect your vals behind a password. Use session cookies to persist authentication.
4
5![6ed0648ae8813e958dbe79468572cb52f578239c0fae55857a13660beebdc5fd.png](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/36c1dc4f-4e19-457b-ad89-0bf139754e00/public)
6
7## Usage

8  const [tackleBox, setTackleBox] = useState([]);
9  const [recommendation, setRecommendation] = useState("");
10  const [lureImageUrl, setLureImageUrl] = useState("");
11
12  useEffect(() => {
159    const lureName = event.target.elements["lure-name"].value;
160    const lureDescription = event.target.elements["lure-description"].value;
161    const lureImage = event.target.elements["lure-image"].files[0];
162    const lureImageUrlInput = event.target.elements["lure-image-url"].value;
163
164    let imageUrl = "";
165    if (lureImage) {
166      const formData = new FormData();
167      formData.append("image", lureImage);
168      try {
169        const response = await fetch("/api/uploadImage", {
170          method: "POST",
171          body: formData,
173        if (response.ok) {
174          const data = await response.json();
175          imageUrl = data.url;
176        }
177      } catch (error) {
178        console.error("Error uploading image:", error);
179      }
180    } else if (lureImageUrlInput) {
181      imageUrl = lureImageUrlInput;
182    }
183
184    const newLure = { name: lureName, description: lureDescription, image: imageUrl };
185    
186    try {
195        setTackleBox([...tackleBox, newLure]);
196        event.target.reset();
197        setLureImageUrl("");
198      }
199    } catch (error) {
302            </div>
303            <div className="mb-4">
304              <label className="block text-gray-700" htmlFor="lure-image">Upload Lure/Fly Image (Optional)</label>
305              <input className="w-full p-2 border border-gray-300 rounded" id="lure-image" name="lure-image" type="file" accept="image/*" />
306            </div>
307            <div className="mb-4">
308              <label className="block text-gray-700" htmlFor="lure-image-url">Or Enter Image URL</label>
309              <input
310                className="w-full p-2 border border-gray-300 rounded"
311                id="lure-image-url"
312                name="lure-image-url"
313                type="url"
314                placeholder="https://example.com/image.jpg"
315                value={lureImageUrl}
316                onChange={(e) => setLureImageUrl(e.target.value)}
317              />
318            </div>
319            {lureImageUrl && (
320              <div className="mb-4">
321                <img src={lureImageUrl} alt="Lure preview" className="max-w-full h-auto" />
322              </div>
323            )}
330            {tackleBox.map((lure, index) => (
331              <div key={index} className="border p-4 rounded">
332                {lure.image && <img src={lure.image} alt={lure.name} className="w-full h-40 object-cover mb-2 rounded" />}
333                <h3 className="text-lg font-bold">{lure.name}</h3>
334                <p className="text-gray-700">{lure.description}</p>
377      });
378    }
379  } else if (url.pathname === "/api/uploadImage") {
380    if (req.method === "POST") {
381      const formData = await req.formData();
382      const image = formData.get("image") as File;
383      if (image) {
384        const imageBuffer = await image.arrayBuffer();
385        const imageKey = `${key}_image_${Date.now()}_${image.name}`;
386        await blob.set(imageKey, imageBuffer);
387        const imageUrl = `https://val.town/v1/blob/${imageKey}`;
388        return new Response(JSON.stringify({ url: imageUrl }), {
389          headers: { "Content-Type": "application/json" },
390        });

1165        <meta property="og:description" content="Turn your ideas into fully functional apps in less than a second – powered by Llama3.3-70b on Cerebras's super-fast wafer chips. Code is 100% open-source, hosted on Val Town."">
1166        <meta property="og:type" content="website">
1167        <meta property="og:image" content="https://stevekrouse-blob_admin.web.val.run/api/public/CerebrasCoderOG.jpg">
1168        
1169            

1165        <meta property="og:description" content="Turn your ideas into fully functional apps in less than a second – powered by Llama3.3-70b on Cerebras's super-fast wafer chips. Code is 100% open-source, hosted on Val Town."">
1166        <meta property="og:type" content="website">
1167        <meta property="og:image" content="https://stevekrouse-blob_admin.web.val.run/api/public/CerebrasCoderOG.jpg">
1168        
1169            

1165        <meta property="og:description" content="Turn your ideas into fully functional apps in less than a second – powered by Llama3.3-70b on Cerebras's super-fast wafer chips. Code is 100% open-source, hosted on Val Town."">
1166        <meta property="og:type" content="website">
1167        <meta property="og:image" content="https://stevekrouse-blob_admin.web.val.run/api/public/CerebrasCoderOG.jpg">
1168        
1169            

1165        <meta property="og:description" content="Turn your ideas into fully functional apps in less than a second – powered by Llama3.3-70b on Cerebras's super-fast wafer chips. Code is 100% open-source, hosted on Val Town."">
1166        <meta property="og:type" content="website">
1167        <meta property="og:image" content="https://stevekrouse-blob_admin.web.val.run/api/public/CerebrasCoderOG.jpg">
1168        
1169            

1165        <meta property="og:description" content="Turn your ideas into fully functional apps in less than a second – powered by Llama3.3-70b on Cerebras's super-fast wafer chips. Code is 100% open-source, hosted on Val Town."">
1166        <meta property="og:type" content="website">
1167        <meta property="og:image" content="https://stevekrouse-blob_admin.web.val.run/api/public/CerebrasCoderOG.jpg">
1168        
1169