Val Town Code SearchReturn to Val Town

API Access

You can access search results via JSON API by adding format=json to your query:

https://codesearch.val.run/?q=image&page=479&format=json

For typeahead suggestions, use the /typeahead endpoint:

https://codesearch.val.run/typeahead?q=image

Returns an array of strings in format "username" or "username/projectName"

Found 6344 results for "image"(4199ms)

authenticBlackWallabymain.tsx1 match

@imwm82•Updated 4 months ago
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

cerebras_codermain.tsx1 match

@fame144•Updated 4 months ago
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

STARTER_PROMPTSmain.tsx1 match

@cqbcg•Updated 4 months ago
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,

cerebras_codermain.tsx1 match

@kiowen•Updated 4 months ago
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

STARTER_PROMPTSmain.tsx1 match

@belliodigital•Updated 4 months ago
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,

scintillatingFuchsiaDeermain.tsx1 match

@krown500•Updated 4 months ago
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

STARTER_PROMPTSmain.tsx1 match

@krown500•Updated 4 months ago
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,

laudableCrimsonCoyotemain.tsx28 matches

@slinfo•Updated 4 months ago
24 parts: []
25 });
26 const [imagePreview, setImagePreview] = useState<string | null>(null);
27 const [isLoading, setIsLoading] = useState(false);
28 const [error, setError] = useState<string | null>(null);
29 const fileInputRef = useRef<HTMLInputElement>(null);
30
31 const handleImageUpload = async (event: React.ChangeEvent<HTMLInputElement>) => {
32 const file = event.target.files?.[0];
33 if (file) {
34 const reader = new FileReader();
35 reader.onloadend = () => {
36 setImagePreview(reader.result as string);
37 };
38 reader.readAsDataURL(file);
42 try {
43 const formData = new FormData();
44 formData.append('image', file);
45 formData.append('previousStory', JSON.stringify(storyParts.parts));
46
62 title: cleanText(result.chapterTitle),
63 content: cleanText(result.story),
64 imageBase64: result.imageBase64
65 }
66 ]
67 }));
68 setImagePreview(null);
69 }
70 } catch (error) {
89 type="file"
90 ref={fileInputRef}
91 onChange={handleImageUpload}
92 accept="image/*"
93 style={{display: 'none'}}
94 />
115 <div key={index} className="story-section">
116 <h3>Chapter {index + 1}: {part.title}</h3>
117 {part.imageBase64 && (
118 <div className="story-image">
119 <img
120 src={part.imageBase64}
121 alt={`Illustration for Chapter ${index + 1}`}
122 />
155 if (request.method === 'POST' && new URL(request.url).pathname === '/generate-story') {
156 const formData = await request.formData();
157 const imageFile = formData.get('image') as File;
158 const previousStoryStr = formData.get('previousStory') as string || '[]';
159 const previousStory = JSON.parse(previousStoryStr);
160
161 if (!imageFile) {
162 return new Response(JSON.stringify({ error: 'No image uploaded' }), { status: 400 });
163 }
164
165 const arrayBuffer = await imageFile.arrayBuffer();
166 const base64Image = btoa(
167 new Uint8Array(arrayBuffer).reduce((data, byte) => data + String.fromCharCode(byte), '')
168 );
172
173 try {
174 const imageAnalysis = await withTimeout(openai.chat.completions.create({
175 model: "gpt-4o",
176 messages: [
180 {
181 type: "text",
182 text: "Describe this image briefly, focusing on the main characters and key elements. Be concise."
183 },
184 {
185 type: "image_url",
186 image_url: { url: `data:image/jpeg;base64,${base64Image}` }
187 }
188 ]
192 }), 15000); // 15 seconds timeout
193
194 const imageDescription = imageAnalysis.choices[0].message.content || "A magical drawing";
195
196 // Optimize previous story context
204 {
205 role: "system",
206 content: "You are a children's storyteller. Continue the story or start a new one based on the image. Use 3 short, simple sentences. Be exciting and brief. Provide a chapter title."
207 },
208 {
209 role: "user",
210 content: `Image: ${imageDescription}\n${previousStoryContext}\n\nCreate a chapter title and a 3-sentence story continuation.`
211 }
212 ],
235 chapterTitle: chapterTitle,
236 story: storyContent,
237 imageBase64: `data:image/jpeg;base64,${base64Image}`
238 }), {
239 headers: { 'Content-Type': 'application/json' }
243 console.error('Story generation error:', error);
244 return new Response(JSON.stringify({
245 error: 'Story generation timed out. Please try again with a simpler image or shorter previous story.'
246 }), {
247 status: 500,
325}
326
327.story-image {
328 max-width: 100%;
329 margin-bottom: 15px;
332}
333
334.story-image img {
335 max-width: 100%;
336 max-height: 300px;
343}
344
345.image-preview {
346 display: none;
347}

Storyweavermain.tsx28 matches

@slinfo•Updated 4 months ago
24 parts: []
25 });
26 const [imagePreview, setImagePreview] = useState<string | null>(null);
27 const [isLoading, setIsLoading] = useState(false);
28 const [error, setError] = useState<string | null>(null);
29 const fileInputRef = useRef<HTMLInputElement>(null);
30
31 const handleImageUpload = async (event: React.ChangeEvent<HTMLInputElement>) => {
32 const file = event.target.files?.[0];
33 if (file) {
34 const reader = new FileReader();
35 reader.onloadend = () => {
36 setImagePreview(reader.result as string);
37 };
38 reader.readAsDataURL(file);
42 try {
43 const formData = new FormData();
44 formData.append('image', file);
45 formData.append('previousStory', JSON.stringify(storyParts.parts));
46
62 title: cleanText(result.chapterTitle),
63 content: cleanText(result.story),
64 imageBase64: result.imageBase64
65 }
66 ]
67 }));
68 setImagePreview(null);
69 }
70 } catch (error) {
89 type="file"
90 ref={fileInputRef}
91 onChange={handleImageUpload}
92 accept="image/*"
93 style={{display: 'none'}}
94 />
115 <div key={index} className="story-section">
116 <h3>Chapter {index + 1}: {part.title}</h3>
117 {part.imageBase64 && (
118 <div className="story-image">
119 <img
120 src={part.imageBase64}
121 alt={`Illustration for Chapter ${index + 1}`}
122 />
155 if (request.method === 'POST' && new URL(request.url).pathname === '/generate-story') {
156 const formData = await request.formData();
157 const imageFile = formData.get('image') as File;
158 const previousStoryStr = formData.get('previousStory') as string || '[]';
159 const previousStory = JSON.parse(previousStoryStr);
160
161 if (!imageFile) {
162 return new Response(JSON.stringify({ error: 'No image uploaded' }), { status: 400 });
163 }
164
165 const arrayBuffer = await imageFile.arrayBuffer();
166 const base64Image = btoa(
167 new Uint8Array(arrayBuffer).reduce((data, byte) => data + String.fromCharCode(byte), '')
168 );
172
173 try {
174 const imageAnalysis = await withTimeout(openai.chat.completions.create({
175 model: "gpt-4o",
176 messages: [
180 {
181 type: "text",
182 text: "Describe this image briefly, focusing on the main characters and key elements. Be concise."
183 },
184 {
185 type: "image_url",
186 image_url: { url: `data:image/jpeg;base64,${base64Image}` }
187 }
188 ]
192 }), 15000); // 15 seconds timeout
193
194 const imageDescription = imageAnalysis.choices[0].message.content || "A magical drawing";
195
196 // Optimize previous story context
204 {
205 role: "system",
206 content: "You are a children's storyteller. Continue the story or start a new one based on the image. Use 3 short, simple sentences. Be exciting and brief. Provide a chapter title."
207 },
208 {
209 role: "user",
210 content: `Image: ${imageDescription}\n${previousStoryContext}\n\nCreate a chapter title and a 3-sentence story continuation.`
211 }
212 ],
235 chapterTitle: chapterTitle,
236 story: storyContent,
237 imageBase64: `data:image/jpeg;base64,${base64Image}`
238 }), {
239 headers: { 'Content-Type': 'application/json' }
243 console.error('Story generation error:', error);
244 return new Response(JSON.stringify({
245 error: 'Story generation timed out. Please try again with a simpler image or shorter previous story.'
246 }), {
247 status: 500,
325}
326
327.story-image {
328 max-width: 100%;
329 margin-bottom: 15px;
332}
333
334.story-image img {
335 max-width: 100%;
336 max-height: 300px;
343}
344
345.image-preview {
346 display: none;
347}

readySilverMandrillmain.tsx1 match

@cqbcg•Updated 4 months ago
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

image-inpainting1 file match

@themichaellai•Updated 1 day ago

brainrot_image_gen1 file match

@dcm31•Updated 1 week ago
Generate images for Italian Brainrot characters using FAL AI
Chrimage
Atiq
"Focal Lens with Atig Wazir" "Welcome to my photography journey! I'm Atiq Wazir, a passionate photographer capturing life's beauty one frame at a time. Explore my gallery for stunning images, behind-the-scenes stories, and tips & tricks to enhance your own