Val Town Code Search

cerebras_coder index.html1 match

@notapro•Updated 1 month ago

21      <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."">
22      <meta property="og:type" content="website">
23      <meta property="og:image" content="https://stevekrouse-blob_admin.web.val.run/api/public/CerebrasCoderOG.jpg">
24      
25

reactHonoStarter index.html1 match

@jxnblk•Updated 1 month ago

6    <title>React Hono Val Town Starter</title>
7    <link rel="stylesheet" href="/public/style.css">
8    <link rel="icon" href="/public/favicon.svg" sizes="any" type="image/svg+xml">
9  </head>
10  <body>

replicate_starter README.md3 matches

@stevekrouse•Updated 1 month ago

3Ported from https://github.com/replicate/getting-started-cloudflare-workers
4
5This is a template for a simple web app using [Hono](https://honojs.dev/), and [Replicate](https://replicate.com/) to generate images using [Flux Schnell](https://replicate.com/black-forest-labs/flux-schnell), a fast and high-quality open-source image generation model.
6
7![Screenshot 2025-03-04 at 10.51.39@2x.png](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/63806b79-4a28-4ca3-7bf5-e5a631986800/public)
8
9## Stack
11- [Hono](https://honojs.dev/) is a minimalist web framework for building serverless applications. It's built and maintained by Cloudflare.
12- [Replicate](https://replicate.com/) is a platform for building and running machine learning models.
13- [Flux Schnell](https://replicate.com/black-forest-labs/flux-schnell) is a fast and high-quality open-source image generation model, made by the original creators of Stable Diffusion.

replicate_starter index.ts7 matches

@stevekrouse•Updated 1 month ago

11app.get("/frontend/**/*", c => serveFile(c.req.path, import.meta.url));
12
13// Generate image
14app.post("/generate-image", async (c) => {
15  try {
16    const { prompt } = await c.req.json();
21      input: {
22        prompt,
23        image_format: "webp",
24      },
25    }) as { url: string }[] | { url: string };
26
27    // Some image models return an array of output files, others just a single file.
28    const imageUrl = Array.isArray(output) ? output[0].url() : output.url();
29
30    console.log({ imageUrl });
31
32    return c.json({ imageUrl });
33  } catch (error) {
34    console.error(error);

replicate_starter index.html1 match

@stevekrouse•Updated 1 month ago

4	<meta charset="UTF-8">
5	<meta name="viewport" content="width=device-width, initial-scale=1.0">
6	<title>Flux Image Generator</title>
7	<script src="https://cdn.tailwindcss.com"></script>
8</head>

replicate_starter App.tsx20 matches

@stevekrouse•Updated 1 month ago

3import React from "https://esm.sh/react@18.2.0";
4
5function ImageGenerator() {
6  const [prompt, setPrompt] = React.useState("");
7  const [images, setImages] = React.useState<any>([]);
8  const [loading, setLoading] = React.useState(false);
9
36  }, []);
37
38  const generateImage = async () => {
39    try {
40      setLoading(true);
41      const response = await fetch("/generate-image", {
42        method: "POST",
43        headers: {
52      }
53
54      setImages(prevImages => [{
55        url: data.imageUrl,
56        prompt,
57        timestamp: new Date().toLocaleTimeString(),
58      }, ...prevImages]);
59    } catch (error) {
60      alert("An error occurred while generating the image: " + error.message);
61      console.error("Error generating image:", error);
62    } finally {
63      setLoading(false);
68    e.preventDefault();
69    if (!loading && prompt) {
70      generateImage();
71
72      // Set a new random prompt after submission, unless user has entered a custom prompt
80    <div className="max-w-3xl mx-auto px-4 py-8">
81      <h1 className="text-3xl font-bold text-center text-gray-800 mb-8">
82        Flux Image Generator
83      </h1>
84
85      <p className="text-center text-gray-600 mb-8">
86        Generate images with{" "}
87        <a
88          href="https://replicate.com/black-forest-labs/flux-schnell"
112          value={prompt}
113          onChange={(e) => setPrompt(e.target.value)}
114          placeholder="Enter your image prompt"
115          className="flex-1 max-w-lg px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-orange-500 focus:border-transparent"
116        />
120          className="px-6 py-2 bg-orange-600 text-white rounded-md hover:bg-orange-700 disabled:bg-gray-400 disabled:cursor-not-allowed transition-colors"
121        >
122          {loading ? "Generating..." : "Generate Image"}
123        </button>
124      </form>
125      <div className="space-y-8">
126        {images.map((image, index) => (
127          <div key={image.timestamp} className="bg-white p-4 rounded-md shadow-lg">
128            <img
129              src={image.url}
130              alt={image.prompt}
131              className="rounded-md w-full mb-2"
132            />
133            <div>
134              <p className="text-gray-700 font-medium text-center">"{image.prompt}"</p>
135            </div>
136          </div>
142
143const root = createRoot(document.getElementById("root"));
144root.render(<ImageGenerator />);

spag index.html30 matches

@stevekrouse•Updated 1 month ago

15    <code>https://spag.cc/name</code><br />
16
17    Replace <code>name</code> with the name you gave the image. Names can
18    contain spaces, emojis, anything!
19  </p>
100      <audio controls style="display: none" id="preview-audio"></audio>
101    </div>
102    <input type="file" id="file" accept="audio/*, image/*" required />
103  </label>
104  <label for="singing">
138  const nameInput = document.getElementById("name");
139  const fileInput = document.getElementById("file");
140  const previewImage = document.getElementById("preview");
141  const previewAudio = document.getElementById("preview-audio");
142  const uploadButton = document.getElementById("upload-button");
153  reader.onload = () => {
154    const dataUrl = reader.result;
155    previewImage.src = dataUrl; // the form just grabs whatever is here and uploads this, which may even be audio
156    previewAudio.src = dataUrl;
157  };
166  });
167
168  previewImage.addEventListener("load", () => {
169    previewImage.style.display = "block";
170  });
171
174  });
175
176  previewImage.addEventListener("error", () => {
177    previewImage.style.display = "none";
178  });
179
222      event.preventDefault();
223      const name = encodeURIComponent(nameInput.value);
224      const dataUrl = previewImage.src;
225      const body = JSON.stringify({ name, dataUrl });
226      uploadButton.disabled = true;
234        nameInput.value = "";
235        fileInput.value = "";
236        previewImage.src = "";
237        previewAudio.src = "";
238      } else {
316
317            const contentType = response.headers.get("content-type");
318            if (contentType.startsWith("image")) {
319              const imageElement = document.createElement("img");
320              imageElement.loading = "lazy";
321              imageElement.style.width = "100%";
322              imageElement.style.objectFit = "contain";
323              imageElement.style.height = "300px";
324              // src the response
325              const blob = await response.blob();
326              imageElement.src = URL.createObjectURL(blob);
327              imageElement.onerror = () => {
328                imageElement.remove();
329              };
330              previewContainer.appendChild(imageElement);
331            } else if (contentType.startsWith("audio")) {
332              const audioElement = document.createElement("audio");
364      });
365
366      // const imageElement = document.createElement("img");
367      // imageElement.loading = "lazy";
368      // imageElement.src = `https://tode.party?${upload.name}`;
369      // imageElement.style.width = "100%";
370      // imageElement.style.objectFit = "contain";
371      // imageElement.style.border = "1px solid rgb(159, 174, 238)";
372      // imageElement.style.backgroundColor = "rgb(55, 67, 98)";
373      // imageElement.style.height = "300px";
374      // imageElement.onerror = () => {
375      //   imageElement.remove();
376      // };
377

PrimeCoder index.html1 match

@primedark•Updated 1 month ago

21      <meta property="og:description" content="Turn your ideas into fully functional apps in less than a second – powered by PrimeDark69 super-fast wafer chips. Code is 100% open-source, hosted on Val Town."">
22      <meta property="og:type" content="website">
23      <meta property="og:image" content="https://stevekrouse-blob_admin.web.val.run/api/public/CerebrasCoderOG.jpg">
24      
25

PrimeCoder starter-prompts.js1 match

@primedark•Updated 1 month ago

23    "prompt": "two column interactive markdown editor with live preview and default text to explain markdown features",
24    "title": "Markdown Editor",
25    "code": "<!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>",
26    "performance": {
27      "tokensPerSecond": 4092.96,

RecipeCollector RC-Parse-Recipe2 matches

@hunterparks•Updated 1 month ago

34              type: 'string',
35            },
36            imageLink: {
37              description: 'A link to an image of the recipe',
38              type: 'string',
39            },