My AI Pen✒️

/** * This val creates a text editing tool using the Cerebras Llama 70B model. * It includes a command input field with speech-to-text functionality, a collapsible additional context area, * and a rich text editor. The user's command, additional context, and current text are sent to the Cerebras API, * which returns the modified text to be displayed in the editor. * We use React for the UI, the Web Speech API for speech recognition, and the Cerebras API for text processing. */ // Server-side code async function server(request: Request): Promise { if (request.method === "POST" && new URL(request.url).pathname === "/process") { const { command, text, additionalContext } = await request.json(); const Cerebras = (await import("https://esm.sh/@cerebras/cerebras_cloud_sdk")).default; const client = new Cerebras({ apiKey: Deno.env.get("CEREBRAS_API_KEY"), }); try { const completion = await client.chat.completions.create({ messages: [ { role: "system", content: `You are an AI assistant that modifies HTML content based on user instructions. Preserve all HTML formatting in your response. Return only the modified HTML content without any additional comments.`, }, { role: "user", content: `Current HTML content: ${text}\n\nInstruction: ${command}\n\nAdditional Context: ${additionalContext}\n\nModified HTML content:`, }, ], model: "llama3.1-70b", max_tokens: 5000, temperature: 0.2, }); let modifiedText = completion.choices[0].message.content.trim(); // Ensure the response is wrapped in a root element if it isn't already if (!modifiedText.startsWith('<') || !modifiedText.endsWith('>')) { modifiedText = `

${modifiedText}

`; } return new Response(JSON.stringify({ modifiedText }), { headers: { "Content-Type": "application/json" }, }); } catch (error) { console.error("Cerebras API Error:", error); return new Response(JSON.stringify({ error: "Failed to process text" }), { status: 500, headers: { "Content-Type": "application/json" }, }); } } return new Response( ` My AI Pen✒️

`, { headers: { "Content-Type": "text/html" }, }, ); } const css = ` body { font-family: Arial, sans-serif; line-height: 1.6; margin: 0; padding: 20px; background-color: #f4f4f4; } .container { max-width: 800px; margin: 0 auto; background-color: white; padding: 20px; border-radius: 8px; box-shadow: 0 0 10px rgba(0,0,0,0.1); } h1 { color: #333; font-size: 2.5em; } .command-label, .context-label { display: block; margin-bottom: 5px; font-weight: bold; } .input-row { display: flex; align-items: center; margin-bottom: 10px; } .command-form { margin-bottom: 20px; } .command-input { flex-grow: 1; padding: 10px; margin-right: 10px; border: 1px solid #ddd; border-radius: 4px; } .context-dropdown { margin-bottom: 10px; } .context-toggle { width: 100%; text-align: left; padding: 12px; background-color: #e9ecef; border: 1px solid #ced4da; color: #495057; font-weight: bold; border-radius: 4px; cursor: pointer; } .context-content { margin-top: 10px; } .additional-context { display: block; width: 100%; height: 80px; padding: 10px; border: 1px solid #ddd; border-radius: 4px; resize: vertical; } .mic-button { padding: 10px; background-color: #28a745; color: white; border: none; border-radius: 4px; cursor: pointer; margin-right: 10px; } .mic-button:disabled { background-color: #cccccc; } button { padding: 10px 20px; background-color: #007bff; color: white; border: none; border-radius: 4px; cursor: pointer; } button:disabled { background-color: #cccccc; } .editor { margin-top: 20px; border: 1px solid #ddd; border-radius: 4px; } .success-indicator { color: green; margin-top: 10px; } .source-link { margin-top: 20px; text-align: right; } .source-link a { color: #007bff; text-decoration: none; } `; export default server;

aiTextEditor