6
7```html
8<img src="https://image.val.run/USER_ID" />
9```
26 <h2 class="text-2xl">Usage:</h2>
27 <code class="block text-xl bg-gray-100 rounded-lg px-6 py-3">
28 https://image.val.run/:user
29 </code>
30 </div>
49 "/:user": async (_req: any, _, { user }: any) => {
50 const res = await (await fetch("https://api.val.town/v1/users/" + user)).json();
51 return Response.redirect(res.profileImageUrl);
52 },
53});
11 author: Author;
12 description: string;
13 imageUrl?: string;
14 links: {
15 self: string;
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,
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
47): Promise<string> {
48 const difyToken = Deno.env.get("DIFY_API_KEY") as string;
49 const blob = new Blob([photoData], { type: "image/jpeg" });
50 const formData = new FormData();
51 formData.append("user", userId);
78 if (fileUrl && typeof fileUrl === "string") {
79 files.push({
80 "type": "image",
81 "transfer_method": "remote_url",
82 "url": fileUrl,
85 const fileId = await uploadPhotoToDify(phone, fileUrl);
86 files.push({
87 "type": "image",
88 "transfer_method": "local_file",
89 "upload_file_id": fileId,
4import { Header } from "./components.tsx";
5import hemolog from "./frames/hemolog.tsx";
6import generateImageFromHtml from "./generateImageFromHtml.ts";
7
8export default async function(req: Request) {
9 const url = new URL(req.url);
10 const isImageRequest = url.searchParams.get("generate") === "image";
11 const isListRequest = url.searchParams.get("generate") === "list";
12 const frameId = url.searchParams.get("frame");
68 }
69
70 // get ?&generate=image&frame=S0mth1ingKrAzy
71 if (frameId && !frame_list.includes(frameId)) {
72 const html = renderToString(
84 const generateUrl = frames[frameId as keyof typeof frames];
85
86 // get ?&generate=image&frame=weather
87 if (isImageRequest) {
88 const width = 800;
89 const height = 480;
90
91 const imageResponse = await generateImageFromHtml(generateUrl, width, height);
92 return new Response(imageResponse.body, {
93 status: imageResponse.status,
94 headers: {
95 "Content-Type": "image/png",
96 },
97 });
2// API key required
3
4// TODO: Add caching of image
5export default async function generateImageFromHtml(
6 valUrl: string,
7 width: number = 800,
13 const apiKey = Deno.env.get("API_FLASH_KEY");
14 const generateUrl =
15 `https://api.apiflash.com/v1/urltoimage?access_key=${apiKey}&url=${valUrl}&width=${width}&height=${height}&format=png&fresh=true`;
16
17 try {
22 return response;
23 } catch (error) {
24 return new Response("Failed to generate image", { status: 500 });
25 }
26}
25 <script src="https://esm.town/v/std/catch"></script>
26 {/* Favicon */}
27 <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
28 </head>
29 <body className="min-h-screen bg-gray-50">
18 }
19
20 const { messages, project, branchId, anthropicApiKey, selectedFiles, images } = await c.req.json();
21 console.log("Original messages:", JSON.stringify(messages, null, 2));
22 console.log("Images received:", JSON.stringify(images, null, 2));
23
24 // Check if API key is available
46 let coreMessages = convertToCoreMessages(messages);
47
48 // If there are images, we need to add them to the last user message
49 if (images && Array.isArray(images) && images.length > 0) {
50 // Find the last user message
51 const lastUserMessageIndex = coreMessages.findIndex(
69 };
70
71 // Add each image to the content array using the correct ImagePart format
72 for (const image of images) {
73 if (image && image.url) {
74 // Extract mime type from data URL if available
75 let mimeType = undefined;
76 if (image.url.startsWith("data:")) {
77 const matches = image.url.match(/^data:([^;]+);/);
78 if (matches && matches.length > 1) {
79 mimeType = matches[1];
82
83 newUserMessage.content.push({
84 type: "image",
85 image: image.url,
86 mimeType,
87 });