H1 Heading

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

Red background

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

Yellow border

\" },\n];\n\nfunction DraggableElement({ id, content, type, left, top, onDrop, isNew }) {\n const [{ isDragging }, drag] = useDrag(() => ({\n type: \"element\",\n item: { id, content, type, left, top, isNew },\n collect: (monitor) => ({\n isDragging: !!monitor.isDragging(),\n }),\n }));\n\n const [, drop] = useDrop(() => ({\n accept: \"element\",\n drop: (item, monitor) => {\n const didDrop = monitor.didDrop();\n if (didDrop) {\n return;\n }\n onDrop(item, id);\n },\n }));\n\n return (\n drag(drop(node))}\n className={`relative p-1 cursor-move inline-block`}\n style={{\n opacity: isDragging ? 0.5 : 1,\n transform: `translate(${left}px, ${top}px)`,\n transition: \"transform 0.3s\",\n zIndex: isDragging ? 1000 : \"auto\",\n }}\n title={content}\n >\n

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

Drag elements here

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

Infinite UI

\n setSelectedModel(e.target.value)}\n className=\"mb-4 p-2 border border-gray-300 rounded-lg\"\n >\n {MODELS.map((model) => )}\n \n \n {isLoading &&

AI is thinking...

}\n

Elements

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

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

\n \n \n \n \n `,\n {\n headers: {\n \"content-type\": \"text/html\",\n },\n },\n );\n}\n\nexport default server;","deleted","label",[99],"permalink","https://www.val.town/x/stevekrouse/genuineGrayWren/code/main.tsx","extension","actionData","errors"]