priyanshSocialMediaAppmain.tsx19 matches
15content: string;16mediaUrl: string;17mediaType: 'image' | 'video';18likes: number;19comments: number;41const [aiPrompt, setAiPrompt] = useState('');42const [aiGeneratedContent, setAiGeneratedContent] = useState('');43const [aiGeneratedImage, setAiGeneratedImage] = useState('');44const [isAiLoading, setIsAiLoading] = useState(false);45try {96const formData = new FormData();97formData.append('image', selectedFile);9899const response = await fetch('/analyze-vision', {128const result = await response.json();129setAiGeneratedContent(result.text);130setAiGeneratedImage(result.imageUrl);131setSelectedTemplate(template);132} catch (error) {161{/* Vision Analysis Section */}162<div className="vision-analysis-container">163<h2>🔍 Image Vision Analysis</h2>164<input165type="file"166accept="image/*"167onChange={handleFileSelect}168/>171disabled={!selectedFile || isAiLoading}172>173{isAiLoading ? 'Analyzing...' : 'Analyze Image'}174</button>175{visionAnalysis && (177<div className="vision-result">178<h3>Image Description</h3>179<p>{visionAnalysis}</p>180<button213if (url.pathname === '/analyze-vision' && request.method === 'POST') {214const formData = await request.formData();215const imageFile = formData.get('image') as File;216217try {218// Convert file to base64219const arrayBuffer = await imageFile.arrayBuffer();220const base64Image = btoa(221new Uint8Array(arrayBuffer).reduce((data, byte) => data + String.fromCharCode(byte), '')222);231{232type: "text",233text: "Describe this image in detail. What do you see?"234},235{236type: "image_url",237image_url: {238url: `data:image/jpeg;base64,${base64Image}`239}240}282const generatedText = textCompletion.choices[0].message.content || '';283284// Generate complementary image285const imageResponse = await fetch(`https://maxm-imggenurl.web.val.run/${encodeURIComponent(template.name)}`);286const imageUrl = imageResponse.url;287288return new Response(JSON.stringify({289text: generatedText,290imageUrl: imageUrl291}), {292headers: { 'Content-Type': 'application/json' }
halilgokceyeREADME.md1 match
3Feel free to mess around with this val and make it your own :). Just click on "Fork" in the top right.45You 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!67Have 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\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,
cerebras_coderindex.html1 match
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
10* Create a [Val Town API token](https://www.val.town/settings/api), open the browser preview of this val, and use the API token as the password to log in.1112<img width=500 src="https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/7077d1b5-1fa7-4a9b-4b93-f8d01d3e4f00/public"/>
kidStoryAppmain.tsx1 match
283<title>Kids' Story Adventure</title>284<meta name="viewport" content="width=device-width, initial-scale=1">285<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>📖</text></svg>">286</head>287<body style="margin: 0; background-color: #f4f4f4;">
STARTER_PROMPTSmain.tsx1 match
26title: "Markdown Editor",27code: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\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>",29performance: {30tokensPerSecond: 4092.96,
3Feel free to mess around with this val and make it your own :). Just click on "Fork" in the top right.45You 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!67Have fun with it and hopefully your crush says yes hehe.
pickRightImageGamemain.tsx32 matches
3import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";45// Image sets for different categories6const IMAGE_SETS = {7animals: [8{ src: "https://maxm-imggenurl.web.val.run/cute-dog", name: "Dog" },25};2627function ImageMatchGame() {28const [category, setCategory] = useState(null);29const [level, setLevel] = useState(1);30const [images, setImages] = useState([]);31const [selectedImage, setSelectedImage] = useState(null);32const [targetImage, setTargetImage] = useState(null);33const [score, setScore] = useState(0);34const [gameOver, setGameOver] = useState(false);36const startGame = (selectedCategory) => {37setCategory(selectedCategory);38const categoryImages = IMAGE_SETS[selectedCategory];39const shuffledImages = categoryImages.sort(() => 0.5 - Math.random());40setImages(shuffledImages);41setTargetImage(shuffledImages[0]);42setLevel(1);43setScore(0);45};4647const handleImageSelect = (image) => {48if (image.name === targetImage.name) {49setScore(prevScore => prevScore + 1);50const nextLevel = level + 1;51setLevel(nextLevel);5253if (nextLevel > images.length) {54setGameOver(true);55} else {56setTargetImage(images[nextLevel - 1]);57}58}59setSelectedImage(image);60};6170<div className="category-selection">71<h1>Choose a Category</h1>72{Object.keys(IMAGE_SETS).map(cat => (73<button key={cat} onClick={() => startGame(cat)}>74{cat.charAt(0).toUpperCase() + cat.slice(1)}86<div className="game-board">87<h2>Level {level}</h2>88<h3>Find the {targetImage.name}</h3>89<div className="image-grid">90{images.map((image) => (91<div92key={image.name}93className={`image-card ${selectedImage?.name === image.name ? 'selected' : ''}`}94onClick={() => handleImageSelect(image)}95>96<img src={image.src} alt={image.name} />97<p>{image.name}</p>98</div>99))}108return (109<div>110<h1>Image Match Game 🎮</h1>111<ImageMatchGame />112</div>113);123<html>124<head>125<title>Image Match Game</title>126<style>${css}</style>127</head>160}161162.image-grid {163display: grid;164grid-template-columns: repeat(2, 1fr);166}167168.image-card {169border: 2px solid #ddd;170padding: 10px;173}174175.image-card:hover {176transform: scale(1.05);177}178179.image-card.selected {180border-color: green;181background-color: #e6ffe6;182}183184.image-card img {185max-width: 200px;186max-height: 200px;
uprightSalmonApeREADME.md1 match
3Feel free to mess around with this val and make it your own :). Just click on "Fork" in the top right.45You 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!67Have fun with it and hopefully your crush says yes hehe.
