/** @jsxImportSource https://esm.sh/react */ import React, { useState, useEffect, useRef } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; const MODEL = "claude-3-sonnet-20240229"; function applyDiffs(html, diffs) { console.log("Applying diffs. Initial HTML:", html); console.log("Diffs to apply:", diffs); try { let replacements; try { ({ replacements } = JSON.parse(diffs)); console.log("Parsed replacements:", replacements); } catch (e) { console.error("Error parsing JSON:", e); return html; // Return original HTML if parsing fails } if (!Array.isArray(replacements)) { console.error("Replacements is not an array:", replacements); return html; } for (const replacement of replacements) { console.log("Processing replacement:", replacement); const startLine = replacement.full_start_line?.trim(); const endLine = replacement.full_end_line?.trim(); const newContent = replacement.new_content_without_line_nums; console.log("Start line:", startLine); console.log("End line:", endLine); console.log("New content:", newContent); if (startLine && endLine && newContent !== undefined) { const startIndex = html.indexOf(startLine); const endIndex = html.indexOf(endLine, startIndex) + endLine.length; console.log("Start index:", startIndex, "End index:", endIndex); if (startIndex !== -1 && endIndex !== -1) { html = html.substring(0, startIndex) + newContent + html.substring(endIndex); } else { console.log("Start or end line not found in HTML"); } console.log("HTML after replacement:", html); } } return html; } catch (error) { console.error("Error in applyDiffs:", error); return html; // Return original HTML if any error occurs } } function parseHTMLFromResponse(content) { const htmlMatch = content.match(/```html\s*([\s\S]*?)\s*```/); console.log("Parsed HTML from response:", htmlMatch && htmlMatch[1] ? htmlMatch[1].trim() : null); return htmlMatch && htmlMatch[1] ? htmlMatch[1].trim() : null; } function parseDiffsFromResponse(content) { try { const jsonMatch = content.match(/\{[\s\S]*\}/); console.log("Parsed diffs from response:", jsonMatch ? jsonMatch[0] : null); return jsonMatch ? jsonMatch[0] : null; } catch (e) { console.error("Error parsing JSON:", e); return null; } } function App() { const [messages, setMessages] = useState>([]); const [edits, setEdits] = useState>([]); const [input, setInput] = useState(""); const [isLoading, setIsLoading] = useState(false); const [htmlOutput, setHtmlOutput] = useState(""); const clearInput = () => setInput(""); const messagesEndRef = useRef(null); const iframeRef = useRef(null); useEffect(() => { if (iframeRef.current) { const iframeDoc = iframeRef.current.contentDocument; iframeDoc?.open(); iframeDoc?.write(htmlOutput); iframeDoc?.close(); } }, [htmlOutput]); const sendMessage = async (e?: React.FormEvent) => { e?.preventDefault(); if (input.trim() === "") return; const newMessages = [ ...messages, { role: "user", content: input } ]; setMessages(newMessages); setInput(""); setIsLoading(true); try { const response = await fetch("/api/chat", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ messages: newMessages }), }); const data = await response.json(); if (data.content) { const newHTML = parseHTMLFromResponse(data.content); console.log("Parsed new HTML:", newHTML); if (newHTML) { setHtmlOutput(newHTML); } else { console.log("AI response content:", data.content); const diffsResponse = parseDiffsFromResponse(data.content); if (diffsResponse) { const updatedHTML = applyDiffs(htmlOutput, diffsResponse); setHtmlOutput(updatedHTML); } else { console.error("Unable to parse HTML or diffs from response"); } } } setMessages([...newMessages, { role: "assistant", content: data.content }]); if (input.trim() !== "") { setEdits([...edits, { id: Date.now(), content: input }]); } } catch (error) { console.error("Error:", error); } finally { setIsLoading(false); } }; return (

HTML Editor with Claude 3.5

{edits.map((edit) => (

{edit.content}

))}

{isLoading && (

AI is thinking...

)}

View Source

HTML Output

); } function client() { createRoot(document.getElementById("root")).render(); } if (typeof document !== "undefined") { client(); } async function server(request: Request): Promise { if (request.method === "POST" && new URL(request.url).pathname === "/api/chat") { const { Anthropic } = await import("https://esm.sh/@anthropic-ai/sdk@0.17.1"); const { messages } = await request.json(); const SYSTEM_NEW = `You are a helpful assistant. Respond only with HTML code wrapped in \`\`\`html \`\`\` code fences. The HTML should be a complete, valid document including , , , and tags. ` const SYSTEM_DIFF = `Your task is to replace lines in the given content according to the User Query and provide an Output. The JSON output format is: { "response": "Response to the user with explanation", "replacements": [ { "full_start_line": "initial line of the text to be replaced", "full_end_line": "final line of the text to be replaced", "new_content_without_line_nums": "new content without line numbers" } ] } Remember the following: To delete or remove, simply set new_content_without_line_nums as an empty character "" after selecting the appropriate lines. When adding/replacing content, the new_content should be able to make a smooth transition 'without overwriting' the existing text. Do not escape newline characters.` const anthropic = new Anthropic(); try { const response = await anthropic.messages.create({ system: messages.length === 1 ? SYSTEM_NEW : SYSTEM_DIFF, messages, model: MODEL, max_tokens: 4096 }); return new Response(JSON.stringify({ content: response.content[0].text }), { headers: { "Content-Type": "application/json" }, }); } catch (error) { console.error("Error:", error); return new Response(JSON.stringify({ error: "Failed to get AI response" }), { status: 500, headers: { "Content-Type": "application/json" }, }); } } return new Response( ` Chat with Claude 3.5

`, { headers: { "content-type": "text/html", }, } ); } export default server;

honEmeraldSnail