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\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,
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\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,
53 tags: "",
54 sortDate: new Date().toISOString().slice(0, 16),
55 backgroundImage: "",
56 faviconURL: "",
57 });
197 tags: "",
198 sortDate: new Date().toISOString().slice(0, 16),
199 backgroundImage: "",
200 faviconURL: "",
201 });
213 tags: bookmark.tags || "",
214 sortDate: bookmark.sortDate,
215 backgroundImage: bookmark.backgroundImage || "",
216 faviconURL: bookmark.faviconURL || "",
217 });
242 tags: bookmarkFormData.tags,
243 dateAdded: bookmarkFormData.sortDate,
244 bookmarkImage: bookmarkFormData.backgroundImage,
245 faviconURL: bookmarkFormData.faviconURL,
246 }),
261 tags: bookmarkFormData.tags,
262 dateAdded: bookmarkFormData.sortDate,
263 bookmarkImage: bookmarkFormData.backgroundImage,
264 faviconURL: bookmarkFormData.faviconURL,
265 }),
502 const faviconUrl = getSiteIconURL(bookmark);
503
504 // Set background if user wants & bookmark has an image
505 const rowStyle = {
506 fontWeight: "bold", // always bold
507 color: listViewTitleColor,
508 ...(listViewOptions.showBackground
509 && bookmark.backgroundImage
510 ? {
511 backgroundImage: `url(${bookmark.backgroundImage})`,
512 backgroundSize: "cover",
513 backgroundPosition: "center",
577 className="link-item"
578 style={{
579 backgroundImage: bookmark.backgroundImage
580 ? `url(${bookmark.backgroundImage})`
581 : "none",
582 backgroundSize: "cover",
830 <div className="row mb-3">
831 <div className="col-sm-4">
832 <label htmlFor="input-bookmark-image" className="form-label">
833 Background Image URL
834 </label>
835 </div>
839 type="text"
840 className="form-control"
841 id="input-bookmark-image"
842 value={bookmarkFormData.backgroundImage}
843 onChange={(e) =>
844 setBookmarkFormData({
845 ...bookmarkFormData,
846 backgroundImage: e.target.value,
847 })}
848 />
849 <button
850 type="button"
851 id="button-paste-bgimage"
852 className="btn btn-outline-secondary"
853 title="Paste from clipboard"
854 onClick={() => handlePasteToField("backgroundImage")}
855 >
856 <i className="bi bi-clipboard-plus"></i>
1291 <meta charset="UTF-8" />
1292 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
1293 <link rel="icon" href="https://external-content.duckduckgo.com/ip3/www.meta.ai.ico" type="image/x-icon" />
1294 <title>My Bookmark Manager</title>
1295 <link
1353 tags TEXT,
1354 sortDate TEXT NOT NULL,
1355 backgroundImage TEXT,
1356 faviconURL TEXT
1357 )
1372 tags,
1373 dateAdded,
1374 bookmarkImage,
1375 faviconURL,
1376 } = await c.req.json();
1377 await sqlite.execute(
1378 `INSERT INTO ${TABLE_NAME}_bookmarks_${SCHEMA_VERSION}
1379 (category, title, url, description, tags, sortDate, backgroundImage, faviconURL)
1380 VALUES (?, ?, ?, ?, ?, ?, ?, ?)
1381 `,
1387 tags,
1388 dateAdded,
1389 bookmarkImage,
1390 faviconURL,
1391 ],
1406 tags,
1407 dateAdded,
1408 bookmarkImage,
1409 faviconURL,
1410 } = await c.req.json();
1439 await sqlite.execute(
1440 `UPDATE ${TABLE_NAME}_bookmarks_${SCHEMA_VERSION}
1441 SET category = ?, title = ?, url = ?, description = ?, tags = ?, sortDate = ?, backgroundImage = ?, faviconURL = ?
1442 WHERE id = ?`,
1443 [
1448 tags || null,
1449 dateAdded,
1450 bookmarkImage || null,
1451 faviconURL || null,
1452 id,
1494 await sqlite.execute(
1495 `INSERT INTO ${TABLE_NAME}_bookmarks_${SCHEMA_VERSION}
1496 (category, title, url, description, tags, sortDate, backgroundImage, faviconURL)
1497 VALUES (?, ?, ?, ?, ?, ?, ?, ?)
1498 `,
1504 b.tags,
1505 b.sortDate,
1506 b.backgroundImage,
1507 b.faviconURL,
1508 ],
21 tech: ["Python", "TensorFlow", "React"],
22 link: "https://ai-chatbot.example.com",
23 image: "https://maxm-imggenurl.web.val.run/ai-chatbot-interface",
24 },
25 {
28 tech: ["Solidity", "Web3.js", "React"],
29 link: "https://blockchain-explorer.example.com",
30 image: "https://maxm-imggenurl.web.val.run/blockchain-dashboard",
31 },
32 {
35 tech: ["Node.js", "MQTT", "React Native"],
36 link: "https://smart-home.example.com",
37 image: "https://maxm-imggenurl.web.val.run/smart-home-dashboard",
38 },
39 ];
211 >
212 <img
213 src={project.image}
214 alt={project.title}
215 className="w-full h-48 object-cover rounded-t-lg mb-4"
7function App() {
8 const [prompt, setPrompt] = useState("");
9 const [imageUrl, setImageUrl] = useState("");
10 const [loading, setLoading] = useState(false);
11
12 const generateImage = async (e?: React.FormEvent) => {
13 e?.preventDefault();
14 setLoading(true);
21 input: {
22 prompt,
23 image_size: "landscape_4_3",
24 num_inference_steps: 4,
25 num_images: 1,
26 enable_safety_checker: true,
27 sync_mode: true,
28 },
29 });
30 setImageUrl(result.data.images[0].url);
31 } catch (error) {
32 console.error("Error generating image:", error);
33 } finally {
34 setLoading(false);
39 <div className="min-h-screen bg-black text-white py-12 px-4 sm:px-6 lg:px-8">
40 <div className="max-w-3xl mx-auto">
41 <h1 className="text-4xl font-bold text-center mb-8">Fal AI Image Generator</h1>
42 <div className="bg-gray-900 rounded-lg p-6 mb-8 shadow-lg">
43 <form className="flex flex-col sm:flex-row gap-4" onSubmit={generateImage}>
44 <input
45 type="text"
46 value={prompt}
47 onChange={(e) => setPrompt(e.target.value)}
48 placeholder="Enter your image prompt"
49 className="flex-grow px-4 py-2 bg-gray-800 border border-gray-700 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-transparent"
50 />
51 <button
52 onClick={generateImage}
53 disabled={loading || !prompt}
54 className={`px-6 py-2 rounded-md text-white font-medium transition-colors duration-200 ${
80 )
81 : (
82 "Generate Image"
83 )}
84 </button>
85 </form>
86 </div>
87 {imageUrl && (
88 <div className="bg-gray-900 rounded-lg overflow-hidden shadow-lg">
89 <img src={imageUrl} alt="Generated image" className="w-full h-auto" />
90 </div>
91 )}
118 <meta charset="UTF-8">
119 <meta name="viewport" content="width=device-width, initial-scale=1.0">
120 <title>Fal AI Image Generator</title>
121 <script src="https://cdn.tailwindcss.com"></script>
122 <style>
