Val Town Code SearchReturn to Val Town

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            

26    title: "Markdown Editor",
27    code:
28      "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Markdown Editor</title>\n    <link href=\"https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css\" rel=\"stylesheet\">\n</head>\n<body class=\"bg-white\">\n    <div class=\"max-w-full mx-auto p-4 pt-6 md:p-6 lg:p-8\">\n        <h1 class=\"text-3xl text-center mb-4\">Markdown Editor</h1>\n        <div class=\"flex flex-row\">\n            <div class=\"editor p-4 rounded-lg border border-gray-200 w-full md:w-1/2\">\n                <textarea id=\"editor\" class=\"w-full h-screen p-2 border border-gray-200 rounded-lg\" placeholder=\"Type your Markdown here...\"></textarea>\n            </div>\n            <div class=\"preview p-4 rounded-lg border border-gray-200 w-full md:w-1/2 ml-2 md:ml-4 lg:ml-8\">\n                <div id=\"preview\"></div>\n            </div>\n        </div>\n        <p class=\"text-center mt-4\">Built on <a href=\"https://cerebrascoder.com\">Cerebras Coder</a></p>\n    </div>\n\n    <script>\n        const editor = document.getElementById('editor');\n        const preview = document.getElementById('preview');\n\n        // Initialize textarea with default markdown\n        const defaultMarkdown = `\n# Introduction to Markdown\nMarkdown is a lightweight markup language that is easy to read and write. It is often used for formatting text in plain text editors, chat applications, and even web pages.\n\n## Headers\nHeaders are denoted by the # symbol followed by a space. The number of # symbols determines the level of the header:\n# Heading 1\n## Heading 2\n### Heading 3\n\n## Emphasis\nYou can use emphasis to make your text **bold** or *italic*:\n*Italics*\n**Bold**\n\n## Lists\nYou can use lists to organize your text:\n* Item 1\n* Item 2\n* Item 3\nOr\n1. Item 1\n2. Item 2\n3. Item 3\n\n## Links\nYou can use links to reference external resources:\n[Google](https://www.google.com)\n\n## Images\nYou can use images to add visual content:\n![Markdown Logo](https://upload.wikimedia.org/wikipedia/commons/thumb/4/48/Markdown-mark.svg/208px-Markdown-mark.svg.png)\n`;\n        editor.value = defaultMarkdown;\n\n        // Update preview on input\n        editor.addEventListener('input', () => {\n            const markdown = editor.value;\n            const html = markdownToHtml(markdown);\n            preview.innerHTML = html;\n        });\n\n        // Initialize preview with default markdown\n        const defaultHtml = markdownToHtml(defaultMarkdown);\n        preview.innerHTML = defaultHtml;\n\n        // Function to convert Markdown to HTML\n        function markdownToHtml(markdown) {\n            // Bold\n            markdown = markdown.replace(/\\*\\*(.*?)\\*\\*/g, '<b>$1</b>');\n\n            // Italic\n            markdown = markdown.replace(/\\*(.*?)\\*/g, '<i>$1</i>');\n\n            // Links\n            markdown = markdown.replace(/\\[(.*?)\\]\\((.*?)\\)/g, '<a href=\"$2\">$1</a>');\n\n            // Images\n            markdown = markdown.replace(/!\\[(.*?)\\]\\((.*?)\\)/g, '<img src=\"$2\" alt=\"$1\">');\n\n            // Headings\n            markdown = markdown.replace(/(^#{1,6} )(.*)/gm, (match, level, text) => {\n                return `<h${level.length}>${text}</h${level.length}>`;\n            });\n\n            // Lists\n            markdown = markdown.replace(/^(\\*|\\d+\\.) (.*)/gm, (match, marker, text) => {\n                if (marker.startsWith('*')) {\n                    return `<li>${text}</li>`;\n                } else {\n                    return `<li>${text}</li>`;\n                }\n            });\n\n            // Line breaks\n            markdown = markdown.replace(/\\n/g, '<br>');\n\n            // Fix for nested lists\n            markdown = markdown.replace(/<li><li>/g, '<li>');\n            markdown = markdown.replace(/<\\/li><\\/li>/g, '</li>');\n\n            // Wrap lists in ul\n            markdown = markdown.replace(/(<li>.*<\\/li>)/g, '<ul>$1</ul>');\n\n            return markdown;\n        }\n    </script>\n</body>\n</html>",
29    performance: {
30      tokensPerSecond: 4092.96,

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