Val Town Code SearchReturn to Val Town

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          

3Feel free to mess around with this val and make it your own :). Just click on "Fork" in the top right.
4
5You can change the phrases that show up as you click no, you can change the firstImg and secondImg, maybe even add more images. And you can also change the colors and any of the text on the screen!
6
7Have fun with it and hopefully your crush says yes hehe.

3Feel free to mess around with this val and make it your own :). Just click on "Fork" in the top right.
4
5You can change the phrases that show up as you click no, you can change the firstImg and secondImg, maybe even add more images. And you can also change the colors and any of the text on the screen!
6
7Have fun with it and hopefully your crush says yes hehe.

15    category: '',
16    description: '',
17    image: ''
18  });
19
31            category TEXT NOT NULL,
32            description TEXT,
33            image TEXT,
34            seller_id TEXT NOT NULL,
35            rating REAL DEFAULT 4.0
96
97      const sellerId = user?.id || 'anonymous';
98      const imageUrl = newProduct.image || `https://maxm-imggenurl.web.val.run/${newProduct.name.toLowerCase().replace(/\s+/g, '-')}`;
99
100      await sqlite.execute(`
101        INSERT INTO ${KEY}_products 
102        (name, price, category, description, image, seller_id) 
103        VALUES (?, ?, ?, ?, ?, ?)
104      `, [
107        newProduct.category, 
108        newProduct.description, 
109        imageUrl,
110        sellerId
111      ]);
121        category: '',
122        description: '',
123        image: ''
124      });
125
179        type="text"
180        placeholder="छवि URL (वैकल्पिक)"
181        value={newProduct.image}
182        onChange={(e) => setNewProduct({...newProduct, image: e.target.value})}
183        style={inputStyle}
184      />
222            >
223              <img 
224                src={product.image} 
225                alt={product.name} 
226                style={{ width: '200px', height: '200px', objectFit: 'cover' }}

8    title: "प्रियांश का रोमांचक दिन",
9    description: "एक मजेदार कार्टून कहानी",
10    thumbnailUrl: "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='120'><rect width='100%' height='100%' fill='%23f0f0f0'/><text x='50%' y='50%' text-anchor='middle' alignment-baseline='middle' font-size='20' fill='%23333'>🎬 वीडियो 1</text></svg>",
11    videoUrl: "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
12  },
15    title: "प्रियांश और उसके दोस्त",
16    description: "दोस्ती की एक मीठी कहानी",
17    thumbnailUrl: "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='120'><rect width='100%' height='100%' fill='%23e0e0e0'/><text x='50%' y='50%' text-anchor='middle' alignment-baseline='middle' font-size='20' fill='%23333'>🎥 वीडियो 2</text></svg>",
18    videoUrl: "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4"
19  },
22    title: "कृत्रिम बुद्धिमत्ता का जादुई संसार",
23    description: "AI की रचना का रोमांचक सफर",
24    thumbnailUrl: "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='120'><rect width='100%' height='100%' fill='%23e0f0ff'/><text x='50%' y='50%' text-anchor='middle' alignment-baseline='middle' font-size='20' fill='%23333'>🤖 AI वीडियो</text></svg>",
25    videoUrl: "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4"
26  },
29    title: "जादुई जंगल की सैर",
30    description: "प्रियांश की रहस्यमय जंगल यात्रा",
31    thumbnailUrl: "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='120'><rect width='100%' height='100%' fill='%23e0ffb0'/><text x='50%' y='50%' text-anchor='middle' alignment-baseline='middle' font-size='20' fill='%23333'>🌳 जंगल वीडियो</text></svg>",
32    videoUrl: "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/SubaruImpreza.mp4"
33  },
36    title: "अंतरिक्ष की सैर",
37    description: "प्रियांश का रोबोट दोस्त और अंतरिक्ष यात्रा",
38    thumbnailUrl: "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='120'><rect width='100%' height='100%' fill='%23b0e0ff'/><text x='50%' y='50%' text-anchor='middle' alignment-baseline='middle' font-size='20' fill='%23333'>🚀 अंतरिक्ष वीडियो</text></svg>",
39    videoUrl: "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/WeAreGoingOnBullrun.mp4"
40  },
43    title: "समुद्र के गहराइयों में",
44    description: "प्रियांश की अद्भुत समुद्री यात्रा",
45    thumbnailUrl: "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='120'><rect width='100%' height='100%' fill='%23b0ffdc'/><text x='50%' y='50%' text-anchor='middle' alignment-baseline='middle' font-size='20' fill='%23333'>🌊 समुद्र वीडियो</text></svg>",
46    videoUrl: "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerEscapes.mp4"
47  },
50    title: "त्योहारों का जादू",
51    description: "प्रियांश के परिवार के साथ त्योहार की खुशियां",
52    thumbnailUrl: "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='120'><rect width='100%' height='100%' fill='%23ffd0b0'/><text x='50%' y='50%' text-anchor='middle' alignment-baseline='middle' font-size='20' fill='%23333'>🎉 त्योहार वीडियो</text></svg>",
53    videoUrl: "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerFun.mp4"
54  },
130              alt={video.title} 
131              onError={(e) => {
132                e.target.src = `data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='120'><rect width='100%' height='100%' fill='%23ff0000'/><text x='50%' y='50%' text-anchor='middle' alignment-baseline='middle' font-size='20' fill='white'>Error 🚫</text></svg>`;
133              }}
134              style={{ width: '200px', height: '120px', objectFit: 'cover' }}

3Feel free to mess around with this val and make it your own :). Just click on "Fork" in the top right.
4
5You can change the phrases that show up as you click no, you can change the firstImg and secondImg, maybe even add more images. And you can also change the colors and any of the text on the screen!
6
7Have fun with it and hopefully your crush says yes hehe.

309      const [title, description] = videoContent.split('|').map(s => s.trim());
310
311      // Generate a placeholder image/thumbnail
312      const thumbnailResponse = await fetch(`https://maxm-imggenurl.web.val.run/${encodeURIComponent(title)}`);
313      const thumbnailUrl = thumbnailResponse.url;

15  content: string;
16  mediaUrl: string;
17  mediaType: 'image' | 'video';
18  likes: number;
19  comments: number;
41  const [aiPrompt, setAiPrompt] = useState('');
42  const [aiGeneratedContent, setAiGeneratedContent] = useState('');
43  const [aiGeneratedImage, setAiGeneratedImage] = useState('');
44  const [isAiLoading, setIsAiLoading] = useState(false);
45  
95    try {
96      const formData = new FormData();
97      formData.append('image', selectedFile);
98
99      const response = await fetch('/analyze-vision', {
128      const result = await response.json();
129      setAiGeneratedContent(result.text);
130      setAiGeneratedImage(result.imageUrl);
131      setSelectedTemplate(template);
132    } catch (error) {
161      {/* Vision Analysis Section */}
162      <div className="vision-analysis-container">
163        <h2>🔍 Image Vision Analysis</h2>
164        <input 
165          type="file" 
166          accept="image/*"
167          onChange={handleFileSelect}
168        />
171          disabled={!selectedFile || isAiLoading}
172        >
173          {isAiLoading ? 'Analyzing...' : 'Analyze Image'}
174        </button>
175        
176        {visionAnalysis && (
177          <div className="vision-result">
178            <h3>Image Description</h3>
179            <p>{visionAnalysis}</p>
180            <button 
213  if (url.pathname === '/analyze-vision' && request.method === 'POST') {
214    const formData = await request.formData();
215    const imageFile = formData.get('image') as File;
216
217    try {
218      // Convert file to base64
219      const arrayBuffer = await imageFile.arrayBuffer();
220      const base64Image = btoa(
221        new Uint8Array(arrayBuffer).reduce((data, byte) => data + String.fromCharCode(byte), '')
222      );
231              { 
232                type: "text", 
233                text: "Describe this image in detail. What do you see?" 
234              },
235              {
236                type: "image_url",
237                image_url: {
238                  url: `data:image/jpeg;base64,${base64Image}`
239                }
240              }
282      const generatedText = textCompletion.choices[0].message.content || '';
283
284      // Generate complementary image
285      const imageResponse = await fetch(`https://maxm-imggenurl.web.val.run/${encodeURIComponent(template.name)}`);
286      const imageUrl = imageResponse.url;
287
288      return new Response(JSON.stringify({
289        text: generatedText,
290        imageUrl: imageUrl
291      }), {
292        headers: { 'Content-Type': 'application/json' }

3Feel free to mess around with this val and make it your own :). Just click on "Fork" in the top right.
4
5You can change the phrases that show up as you click no, you can change the firstImg and secondImg, maybe even add more images. And you can also change the colors and any of the text on the screen!
6
7Have fun with it and hopefully your crush says yes hehe.

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,