/** @jsxImportSource https://esm.sh/react@18.2.0 */ import { HTML5Backend } from "https://esm.sh/react-dnd-html5-backend@16.0.1"; import { DndProvider, useDrag, useDrop } from "https://esm.sh/react-dnd@16.0.1"; import { createRoot } from "https://esm.sh/react-dom@18.2.0/client"; import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState, } from "https://esm.sh/react@18.2.0"; const MODELS = ["llama3.1-8b", "llama3.1-70b"]; const starterElements = [ { id: "button", content: "" }, { id: "h1", content: "

H1 Heading

" }, { id: "input", content: "" }, { id: "blueText", content: "Blue text" }, { id: "redBg", content: "

Red background

" }, { id: "yellowBorder", content: "

Yellow border

" }, ]; function DraggableElement({ id, content, type, left, top, onDrop, isNew }) { const [{ isDragging }, drag] = useDrag(() => ({ type: "element", item: { id, content, type, left, top, isNew }, collect: (monitor) => ({ isDragging: !!monitor.isDragging(), }), })); const [, drop] = useDrop(() => ({ accept: "element", drop: (item, monitor) => { const didDrop = monitor.didDrop(); if (didDrop) { return; } onDrop(item, id); }, })); return (

drag(drop(node))} className={`relative p-1 cursor-move inline-block`} style={{ opacity: isDragging ? 0.5 : 1, transform: `translate(${left}px, ${top}px)`, transition: "transform 0.3s", zIndex: isDragging ? 1000 : "auto", }} title={content} >

); } function cssStringToObject(cssString) { return cssString.split(";").reduce((acc, rule) => { const [key, value] = rule.split(":").map(str => str.trim()); if (key && value) { acc[key.replace(/-./g, x => x[1].toUpperCase())] = value; } return acc; }, {}); } const DropZone = forwardRef(({ onCombine, onAddElement }, ref) => { const [elements, setElements] = useState([]); const dropRef = useRef(null); const [, drop] = useDrop(() => ({ accept: "element", drop: (item, monitor) => { const didDrop = monitor.didDrop(); if (didDrop) { return; } const dropRect = dropRef.current.getBoundingClientRect(); const clientOffset = monitor.getClientOffset(); if (!clientOffset) return; const left = Math.round(clientOffset.x - dropRect.left); const top = Math.round(clientOffset.y - dropRect.top); if (item.isNew) { handleAddElement({ ...item, left, top }); } else { moveElement(item.id, left, top); } }, collect: (monitor) => ({ isOver: !!monitor.isOver(), }), })); const moveElement = useCallback((id, left, top) => { setElements(prevElements => prevElements.map(el => el.id === id ? { ...el, left, top } : el)); }, []); const handleDrop = (draggedItem, targetId) => { console.log("Client: Attempting to combine", draggedItem, "with target ID:", targetId); const targetItem = elements.find(el => el.id === targetId); if (draggedItem.id !== targetId) { const avgLeft = (draggedItem.left + targetItem.left) / 2; const avgTop = (draggedItem.top + targetItem.top) / 2; onCombine(draggedItem, targetItem, avgLeft, avgTop); } }; const handleAddElement = (item) => { const newElement = { ...item, id: `${item.id}_${Date.now()}`, isNew: false, }; setElements(prev => [...prev, newElement]); onAddElement(newElement); }; const addCombinedElement = (newElement) => { setElements(prev => [...prev, newElement]); }; const removeElements = (ids) => { setElements(prev => prev.filter(el => !ids.includes(el.id))); }; useImperativeHandle(ref, () => ({ addCombinedElement, removeElements, })); return (

{ drop(node); dropRef.current = node; }} className="border-2 border-dashed p-4 m-2 relative overflow-hidden" style={{ height: "600px", minWidth: "400px" }} > {elements.map((elem) => ( ))} {elements.length === 0 &&

Drag elements here

}

); }); function App() { const [elements, setElements] = useState([]); const [selectedModel, setSelectedModel] = useState(MODELS[0]); const [isLoading, setIsLoading] = useState(false); const dropZoneRef = useRef(null); useEffect(() => { // Load elements from localStorage const loadElements = () => { const storedElements = localStorage.getItem("infiniteUIElements"); if (storedElements) { setElements(JSON.parse(storedElements)); } else { setElements(starterElements); } }; loadElements(); }, []); const saveElementsToLocalStorage = (newElements) => { localStorage.setItem("infiniteUIElements", JSON.stringify(newElements)); }; const handleCombine = async (item1, item2, left, top) => { setIsLoading(true); console.log("Client: Combining elements", item1, item2); try { const response = await fetch("/api/combine", { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ item1, item2, model: selectedModel, }), }); const newCombination = await response.json(); console.log("Client: Received new combination", newCombination); const newElement = { ...newCombination, left, top, isNew: false, }; if (dropZoneRef.current) { // Add the new element to the DropZone dropZoneRef.current.addCombinedElement(newElement); } // Remove the original elements from the DropZone dropZoneRef.current.removeElements([item1.id, item2.id]); // Add the new element to the elements list and save to localStorage setElements(prev => { const updatedElements = [...prev, newElement]; saveElementsToLocalStorage(updatedElements); return updatedElements; }); } catch (error) { console.error("Error:", error); } finally { setIsLoading(false); } }; const handleAddElement = (newElement) => { setElements(prev => { const updatedElements = [...prev, newElement]; saveElementsToLocalStorage(updatedElements); return updatedElements; }); }; return (

Infinite UI

{isLoading &&

AI is thinking...

}

Elements

{elements.map((elem) => ( ))}

); } function client() { createRoot(document.getElementById("root")).render(); } if (typeof document !== "undefined") { client(); } async function server(request: Request): Promise { const url = new URL(request.url); const key = "infiniteUICombinations_3"; if (url.pathname === "/api/combinations") { const { blob } = await import("https://esm.town/v/std/blob"); const storedCombinations = await blob.getJSON(key) || []; return new Response(JSON.stringify(storedCombinations), { headers: { "Content-Type": "application/json" }, }); } if (url.pathname === "/api/combine" && request.method === "POST") { const { item1, item2, model } = await request.json(); console.log("Server: Combining elements", item1, item2); const Cerebras = await import("https://esm.sh/@cerebras/cerebras_cloud_sdk"); const client = new Cerebras.default(); try { const response = await client.chat.completions.create({ messages: [ { role: "system", content: "You are a helpful assistant that combines HTML and CSS elements. Respond only with the combined result, either as HTML or CSS.", }, { role: "user", content: `Combine these two elements: 1) ${item1.content} 2) ${item2.content}` }, ], model: model, }); const result = response.choices[0].message.content.trim(); console.log("Server: Cerebras response", result); const newCombination = { id: Date.now(), content: result, }; const { blob } = await import("https://esm.town/v/std/blob"); const storedCombinations = await blob.getJSON(key) || []; await blob.setJSON(key, [...storedCombinations, newCombination]); console.log("Server: New combination stored", newCombination); return new Response(JSON.stringify(newCombination), { headers: { "Content-Type": "application/json" }, }); } catch (error) { console.error("Server Error:", error); return new Response(JSON.stringify({ error: "An error occurred" }), { status: 500, headers: { "Content-Type": "application/json" }, }); } } return new Response( ` Infinite UI

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

genuineGrayWren