Spaces:

jasvir-singh1021
/

canvas-studio

Running

App Files Files Community

jasvir-singh1021 commited on Aug 17, 2025

Commit

af233d1

verified ·

1 Parent(s): 3c43538

make a React web app that lets users drag-and-drop both images and text, arrange them freely on a canvas, and design beautiful compositions — like posters, mood boards, memos, or social media graphics. 🌟 Suggested React App: Canvas Studio Goal: A simple, intuitive editor where users can upload images and add text blocks, then drag, resize, rotate, and style them freely. ✅ Core Features Drag-and-drop elements (images & text) on a freeform canvas Resizable elements (grab corners to scale) Draggable anywhere on canvas Editable text content, with basic fonts, colors, size sliders Upload images from locally or unsplash Download/export as PNG or JPG Optional templates or grid snapping - Initial Deployment

Browse files

Files changed (2) hide show

README.md +7 -5
index.html +670 -19

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Canvas Studio
-emoji: 🔥
-colorFrom: gray
-colorTo: yellow
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: canvas-studio
+emoji: 🐳
+colorFrom: green
+colorTo: pink
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,670 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Canvas Studio - Design Beautiful Compositions</title>
+  <script src="https://cdn.tailwindcss.com"></script>
+  <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
+  <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
+  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
+  <script src="https://unpkg.com/react-draggable@4.4.4/build/web/react-draggable.min.js"></script>
+  <script src="https://unpkg.com/html-to-image@1.11.11/dist/html-to-image.min.js"></script>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+  <style>
+    .canvas-container {
+      background-image: linear-gradient(45deg, #f5f5f5 25%, transparent 25%),
+                        linear-gradient(-45deg, #f5f5f5 25%, transparent 25%),
+                        linear-gradient(45deg, transparent 75%, #f5f5f5 75%),
+                        linear-gradient(-45deg, transparent 75%, #f5f5f5 75%);
+      background-size: 20px 20px;
+      background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
+    }
+    .element-resize-handle {
+      position: absolute;
+      width: 10px;
+      height: 10px;
+      background: #3b82f6;
+      border-radius: 50%;
+      bottom: -5px;
+      right: -5px;
+      cursor: nwse-resize;
+    }
+    .element-rotate-handle {
+      position: absolute;
+      width: 16px;
+      height: 16px;
+      top: -20px;
+      left: 50%;
+      transform: translateX(-50%);
+      cursor: grab;
+      color: #3b82f6;
+    }
+    .element.selected {
+      box-shadow: 0 0 0 2px #3b82f6;
+    }
+    .font-selector {
+      scrollbar-width: thin;
+      scrollbar-color: #3b82f6 #e5e7eb;
+    }
+    .font-selector::-webkit-scrollbar {
+      width: 6px;
+    }
+    .font-selector::-webkit-scrollbar-track {
+      background: #e5e7eb;
+    }
+    .font-selector::-webkit-scrollbar-thumb {
+      background-color: #3b82f6;
+      border-radius: 3px;
+    }
+    .unsplash-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+      gap: 8px;
+    }
+    @media (max-width: 768px) {
+      .toolbar {
+        flex-direction: column;
+        align-items: flex-start;
+      }
+      .toolbar-section {
+        margin-bottom: 8px;
+      }
+      .unsplash-grid {
+        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
+      }
+    }
+  </style>
+</head>
+<body class="bg-gray-50">
+  <div id="root"></div>
+  <script type="text/babel">
+    const { useState, useRef, useEffect, useCallback } = React;
+    const Draggable = ReactDraggable;
+    const CanvasStudio = () => {
+      const [elements, setElements] = useState([]);
+      const [selectedElementId, setSelectedElementId] = useState(null);
+      const [activeTool, setActiveTool] = useState(null);
+      const [showImageUpload, setShowImageUpload] = useState(false);
+      const [showUnsplash, setShowUnsplash] = useState(false);
+      const [unsplashImages, setUnsplashImages] = useState([]);
+      const [unsplashQuery, setUnsplashQuery] = useState('nature');
+      const [canvasSize, setCanvasSize] = useState({ width: 800, height: 600 });
+      const [showTemplates, setShowTemplates] = useState(false);
+      const [enableGrid, setEnableGrid] = useState(false);
+      const [gridSize, setGridSize] = useState(20);
+      const canvasRef = useRef(null);
+      const fileInputRef = useRef(null);
+      const templates = [
+        {
+          name: 'Social Media Post',
+          elements: [
+            { type: 'text', content: 'Your Title Here', x: 100, y: 100, width: 200, fontSize: 32, color: '#000000', fontFamily: 'Arial' },
+            { type: 'text', content: 'Add your message', x: 100, y: 150, width: 300, fontSize: 16, color: '#555555', fontFamily: 'Arial' },
+            { type: 'image', src: 'https://images.unsplash.com/photo-1506744038136-46273834b3fb', x: 400, y: 100, width: 300, height: 300 }
+          ]
+        },
+        {
+          name: 'Mood Board',
+          elements: [
+            { type: 'image', src: 'https://images.unsplash.com/photo-1470071459604-3b5ec3a7fe05', x: 50, y: 50, width: 200, height: 200 },
+            { type: 'image', src: 'https://images.unsplash.com/photo-1447752875215-b2761acb3c5d', x: 300, y: 50, width: 200, height: 200 },
+            { type: 'image', src: 'https://images.unsplash.com/photo-1475924156734-496f6cac6ec1', x: 550, y: 50, width: 200, height: 200 },
+            { type: 'text', content: 'Inspiration', x: 300, y: 300, width: 200, fontSize: 24, color: '#000000', fontFamily: 'Helvetica' }
+          ]
+        }
+      ];
+      const fonts = [
+        'Arial', 'Helvetica', 'Times New Roman', 'Courier New',
+        'Georgia', 'Verdana', 'Impact', 'Comic Sans MS',
+        'Trebuchet MS', 'Palatino', 'Garamond', 'Bookman'
+      ];
+      const selectedElement = elements.find(el => el.id === selectedElementId);
+      const addTextElement = () => {
+        const newElement = {
+          id: Date.now(),
+          type: 'text',
+          content: 'Double click to edit',
+          x: 100,
+          y: 100,
+          width: 200,
+          fontSize: 24,
+          color: '#000000',
+          fontFamily: 'Arial',
+          rotation: 0
+        };
+        setElements([...elements, newElement]);
+        setSelectedElementId(newElement.id);
+      };
+      const addImageElement = (src) => {
+        const newElement = {
+          id: Date.now(),
+          type: 'image',
+          src: src,
+          x: 200,
+          y: 200,
+          width: 200,
+          height: 200,
+          rotation: 0
+        };
+        setElements([...elements, newElement]);
+        setSelectedElementId(newElement.id);
+        setShowImageUpload(false);
+        setShowUnsplash(false);
+      };
+      const handleFileUpload = (e) => {
+        const file = e.target.files[0];
+        if (file) {
+          const reader = new FileReader();
+          reader.onload = (event) => {
+            addImageElement(event.target.result);
+          };
+          reader.readAsDataURL(file);
+        }
+      };
+      const handleElementClick = (id, e) => {
+        e.stopPropagation();
+        setSelectedElementId(id);
+      };
+      const handleCanvasClick = () => {
+        setSelectedElementId(null);
+      };
+      const handleDragStop = (id, e, data) => {
+        setElements(elements.map(el =>
+          el.id === id ? { ...el, x: enableGrid ? Math.round(data.x / gridSize) * gridSize : data.x,
+                            y: enableGrid ? Math.round(data.y / gridSize) * gridSize : data.y } : el
+        ));
+      };
+      const handleResize = (id, e, direction, ref, delta, position) => {
+        setElements(elements.map(el =>
+          el.id === id ? {
+            ...el,
+            width: enableGrid ? Math.round(ref.style.width.replace('px', '') / gridSize) * gridSize : ref.style.width.replace('px', ''),
+            height: el.type === 'image' ? (enableGrid ? Math.round(ref.style.height.replace('px', '') / gridSize) * gridSize : ref.style.height.replace('px', '')) : null
+          } : el
+        ));
+      };
+      const handleTextChange = (id, newContent) => {
+        setElements(elements.map(el =>
+          el.id === id ? { ...el, content: newContent } : el
+        ));
+      };
+      const handleStyleChange = (property, value) => {
+        if (!selectedElementId) return;
+        setElements(elements.map(el =>
+          el.id === selectedElementId ? { ...el, [property]: value } : el
+        ));
+      };
+      const deleteSelectedElement = () => {
+        if (!selectedElementId) return;
+        setElements(elements.filter(el => el.id !== selectedElementId));
+        setSelectedElementId(null);
+      };
+      const fetchUnsplashImages = useCallback(async () => {
+        try {
+          const response = await fetch(`https://api.unsplash.com/search/photos?query=${unsplashQuery}&per_page=12&client_id=YOUR_UNSPLASH_ACCESS_KEY`);
+          const data = await response.json();
+          setUnsplashImages(data.results);
+        } catch (error) {
+          console.error('Error fetching Unsplash images:', error);
+          // Fallback to sample images if API fails
+          setUnsplashImages([
+            { urls: { regular: 'https://images.unsplash.com/photo-1506744038136-46273834b3fb' } },
+            { urls: { regular: 'https://images.unsplash.com/photo-1447752875215-b2761acb3c5d' } },
+            { urls: { regular: 'https://images.unsplash.com/photo-1470071459604-3b5ec3a7fe05' } },
+            { urls: { regular: 'https://images.unsplash.com/photo-1475924156734-496f6cac6ec1' } },
+            { urls: { regular: 'https://images.unsplash.com/photo-1501785888041-af3e2856c31f' } },
+            { urls: { regular: 'https://images.unsplash.com/photo-1441974231531-c6227db76b6e' } }
+          ]);
+        }
+      }, [unsplashQuery]);
+      useEffect(() => {
+        if (showUnsplash) {
+          fetchUnsplashImages();
+        }
+      }, [showUnsplash, unsplashQuery, fetchUnsplashImages]);
+      const downloadCanvas = async () => {
+        if (!canvasRef.current) return;
+        try {
+          const dataUrl = await htmlToImage.toPng(canvasRef.current);
+          const link = document.createElement('a');
+          link.download = 'canvas-studio-design.png';
+          link.href = dataUrl;
+          link.click();
+        } catch (error) {
+          console.error('Error downloading canvas:', error);
+        }
+      };
+      const applyTemplate = (template) => {
+        const newElements = template.elements.map(el => ({
+          ...el,
+          id: Date.now() + Math.random()
+        }));
+        setElements(newElements);
+        setShowTemplates(false);
+      };
+      const handleRotate = (id, e) => {
+        const rotation = parseInt(e.target.value);
+        setElements(elements.map(el =>
+          el.id === id ? { ...el, rotation } : el
+        ));
+      };
+      return (
+        <div className="min-h-screen flex flex-col">
+          {/* Header */}
+          <header className="bg-white shadow-sm py-4 px-6">
+            <div className="flex justify-between items-center">
+              <h1 className="text-2xl font-bold text-blue-600 flex items-center">
+                <i className="fas fa-palette mr-2"></i> Canvas Studio
+              </h1>
+              <div className="flex space-x-4">
+                <button
+                  onClick={() => setShowTemplates(!showTemplates)}
+                  className="px-4 py-2 bg-gray-100 hover:bg-gray-200 rounded-md flex items-center"
+                >
+                  <i className="fas fa-clone mr-2"></i> Templates
+                </button>
+                <button
+                  onClick={downloadCanvas}
+                  className="px-4 py-2 bg-blue-600 text-white hover:bg-blue-700 rounded-md flex items-center"
+                >
+                  <i className="fas fa-download mr-2"></i> Download
+                </button>
+              </div>
+            </div>
+          </header>
+          <div className="flex flex-1 overflow-hidden">
+            {/* Sidebar */}
+            <div className="w-64 bg-white border-r p-4 overflow-y-auto">
+              <h2 className="font-semibold text-lg mb-4">Elements</h2>
+              <div className="space-y-3">
+                <button
+                  onClick={addTextElement}
+                  className="w-full flex items-center justify-between px-4 py-2 bg-gray-100 hover:bg-gray-200 rounded-md"
+                >
+                  <span>Add Text</span>
+                  <i className="fas fa-font"></i>
+                </button>
+                <button
+                  onClick={() => {
+                    setShowImageUpload(true);
+                    setShowUnsplash(false);
+                  }}
+                  className="w-full flex items-center justify-between px-4 py-2 bg-gray-100 hover:bg-gray-200 rounded-md"
+                >
+                  <span>Upload Image</span>
+                  <i className="fas fa-upload"></i>
+                </button>
+                <button
+                  onClick={() => {
+                    setShowUnsplash(true);
+                    setShowImageUpload(false);
+                  }}
+                  className="w-full flex items-center justify-between px-4 py-2 bg-gray-100 hover:bg-gray-200 rounded-md"
+                >
+                  <span>Unsplash Images</span>
+                  <i className="fas fa-camera"></i>
+                </button>
+              </div>
+              {showImageUpload && (
+                <div className="mt-4 p-4 bg-gray-50 rounded-md">
+                  <input
+                    type="file"
+                    ref={fileInputRef}
+                    onChange={handleFileUpload}
+                    accept="image/*"
+                    className="hidden"
+                  />
+                  <button
+                    onClick={() => fileInputRef.current.click()}
+                    className="w-full px-4 py-2 bg-blue-600 text-white hover:bg-blue-700 rounded-md"
+                  >
+                    Select Image
+                  </button>
+                </div>
+              )}
+              {showUnsplash && (
+                <div className="mt-4">
+                  <div className="flex mb-2">
+                    <input
+                      type="text"
+                      value={unsplashQuery}
+                      onChange={(e) => setUnsplashQuery(e.target.value)}
+                      placeholder="Search Unsplash"
+                      className="flex-1 px-3 py-2 border rounded-l-md"
+                    />
+                    <button
+                      onClick={fetchUnsplashImages}
+                      className="px-3 py-2 bg-blue-600 text-white rounded-r-md"
+                    >
+                      <i className="fas fa-search"></i>
+                    </button>
+                  </div>
+                  <div className="unsplash-grid max-h-64 overflow-y-auto">
+                    {unsplashImages.map((img, index) => (
+                      <img
+                        key={index}
+                        src={img.urls?.regular}
+                        alt="Unsplash"
+                        className="w-full h-24 object-cover rounded cursor-pointer hover:opacity-80"
+                        onClick={() => addImageElement(img.urls?.regular)}
+                      />
+                    ))}
+                  </div>
+                </div>
+              )}
+              {showTemplates && (
+                <div className="mt-4">
+                  <h3 className="font-medium mb-2">Templates</h3>
+                  <div className="space-y-2">
+                    {templates.map((template, index) => (
+                      <div
+                        key={index}
+                        className="p-3 border rounded-md cursor-pointer hover:bg-gray-50"
+                        onClick={() => applyTemplate(template)}
+                      >
+                        <div className="font-medium">{template.name}</div>
+                        <div className="text-sm text-gray-500">{template.elements.length} elements</div>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              )}
+              <div className="mt-6">
+                <h2 className="font-semibold text-lg mb-2">Canvas Settings</h2>
+                <div className="space-y-3">
+                  <div>
+                    <label className="block text-sm font-medium mb-1">Width</label>
+                    <input
+                      type="number"
+                      value={canvasSize.width}
+                      onChange={(e) => setCanvasSize({...canvasSize, width: parseInt(e.target.value)})}
+                      className="w-full px-3 py-2 border rounded-md"
+                    />
+                  </div>
+                  <div>
+                    <label className="block text-sm font-medium mb-1">Height</label>
+                    <input
+                      type="number"
+                      value={canvasSize.height}
+                      onChange={(e) => setCanvasSize({...canvasSize, height: parseInt(e.target.value)})}
+                      className="w-full px-3 py-2 border rounded-md"
+                    />
+                  </div>
+                  <div className="flex items-center">
+                    <input
+                      type="checkbox"
+                      id="enableGrid"
+                      checked={enableGrid}
+                      onChange={(e) => setEnableGrid(e.target.checked)}
+                      className="mr-2"
+                    />
+                    <label htmlFor="enableGrid" className="text-sm">Enable Grid</label>
+                  </div>
+                  {enableGrid && (
+                    <div>
+                      <label className="block text-sm font-medium mb-1">Grid Size</label>
+                      <input
+                        type="range"
+                        min="10"
+                        max="50"
+                        value={gridSize}
+                        onChange={(e) => setGridSize(parseInt(e.target.value))}
+                        className="w-full"
+                      />
+                      <div className="text-xs text-gray-500">{gridSize}px</div>
+                    </div>
+                  )}
+                </div>
+              </div>
+            </div>
+            {/* Main Content */}
+            <div className="flex-1 flex flex-col overflow-hidden">
+              {/* Toolbar */}
+              {selectedElement && (
+                <div className="bg-white border-b p-3">
+                  <div className="flex items-center justify-between">
+                    <div className="flex items-center space-x-4">
+                      {selectedElement.type === 'text' && (
+                        <>
+                          <div className="relative">
+                            <select
+                              value={selectedElement.fontFamily}
+                              onChange={(e) => handleStyleChange('fontFamily', e.target.value)}
+                              className="appearance-none bg-gray-100 border border-gray-300 rounded-md px-3 py-1 pr-8 text-sm focus:outline-none"
+                            >
+                              {fonts.map(font => (
+                                <option key={font} value={font} style={{ fontFamily: font }}>
+                                  {font}
+                                </option>
+                              ))}
+                            </select>
+                            <div className="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
+                              <i className="fas fa-chevron-down text-xs"></i>
+                            </div>
+                          </div>
+                          <input
+                            type="color"
+                            value={selectedElement.color}
+                            onChange={(e) => handleStyleChange('color', e.target.value)}
+                            className="w-8 h-8 cursor-pointer"
+                          />
+                          <div className="flex items-center space-x-2">
+                            <button
+                              onClick={() => handleStyleChange('fontWeight', selectedElement.fontWeight === 'bold' ? 'normal' : 'bold')}
+                              className={`p-1 rounded ${selectedElement.fontWeight === 'bold' ? 'bg-blue-100 text-blue-600' : 'text-gray-600'}`}
+                            >
+                              <i className="fas fa-bold"></i>
+                            </button>
+                            <button
+                              onClick={() => handleStyleChange('fontStyle', selectedElement.fontStyle === 'italic' ? 'normal' : 'italic')}
+                              className={`p-1 rounded ${selectedElement.fontStyle === 'italic' ? 'bg-blue-100 text-blue-600' : 'text-gray-600'}`}
+                            >
+                              <i className="fas fa-italic"></i>
+                            </button>
+                            <button
+                              onClick={() => handleStyleChange('textDecoration', selectedElement.textDecoration === 'underline' ? 'none' : 'underline')}
+                              className={`p-1 rounded ${selectedElement.textDecoration === 'underline' ? 'bg-blue-100 text-blue-600' : 'text-gray-600'}`}
+                            >
+                              <i className="fas fa-underline"></i>
+                            </button>
+                          </div>
+                        </>
+                      )}
+                      <div className="flex items-center space-x-2">
+                        <label className="text-sm">Size:</label>
+                        <input
+                          type="range"
+                          min="8"
+                          max="72"
+                          value={selectedElement.type === 'text' ? selectedElement.fontSize : selectedElement.width}
+                          onChange={(e) => handleStyleChange(
+                            selectedElement.type === 'text' ? 'fontSize' : 'width',
+                            parseInt(e.target.value)
+                          )}
+                          className="w-24"
+                        />
+                      </div>
+                      <div className="flex items-center space-x-2">
+                        <label className="text-sm">Rotate:</label>
+                        <input
+                          type="range"
+                          min="0"
+                          max="360"
+                          value={selectedElement.rotation || 0}
+                          onChange={(e) => handleRotate(selectedElement.id, e)}
+                          className="w-24"
+                        />
+                      </div>
+                    </div>
+                    <button
+                      onClick={deleteSelectedElement}
+                      className="p-2 text-red-500 hover:text-red-700"
+                    >
+                      <i className="fas fa-trash"></i>
+                    </button>
+                  </div>
+                </div>
+              )}
+              {/* Canvas */}
+              <div className="flex-1 overflow-auto p-8 flex items-center justify-center">
+                <div
+                  ref={canvasRef}
+                  className="canvas-container bg-white shadow-lg relative"
+                  style={{
+                    width: `${canvasSize.width}px`,
+                    height: `${canvasSize.height}px`,
+                    position: 'relative'
+                  }}
+                  onClick={handleCanvasClick}
+                >
+                  {elements.map(element => (
+                    <Draggable
+                      key={element.id}
+                      position={{ x: element.x, y: element.y }}
+                      onStop={(e, data) => handleDragStop(element.id, e, data)}
+                      bounds="parent"
+                    >
+                      <div
+                        className={`absolute ${element.id === selectedElementId ? 'selected' : ''}`}
+                        style={{
+                          transform: `rotate(${element.rotation || 0}deg)`,
+                          cursor: 'move',
+                          width: `${element.width}px`,
+                          minWidth: '20px',
+                          minHeight: '20px'
+                        }}
+                        onClick={(e) => handleElementClick(element.id, e)}
+                      >
+                        {element.type === 'text' ? (
+                          <div
+                            contentEditable
+                            suppressContentEditableWarning
+                            onBlur={(e) => handleTextChange(element.id, e.target.textContent)}
+                            onDoubleClick={(e) => e.stopPropagation()}
+                            style={{
+                              fontFamily: element.fontFamily,
+                              fontSize: `${element.fontSize}px`,
+                              color: element.color,
+                              fontWeight: element.fontWeight,
+                              fontStyle: element.fontStyle,
+                              textDecoration: element.textDecoration,
+                              width: '100%',
+                              outline: 'none'
+                            }}
+                          >
+                            {element.content}
+                          </div>
+                        ) : (
+                          <img
+                            src={element.src}
+                            alt=""
+                            style={{
+                              width: '100%',
+                              height: element.height ? `${element.height}px` : 'auto',
+                              objectFit: 'contain'
+                            }}
+                          />
+                        )}
+                        {element.id === selectedElementId && (
+                          <>
+                            <div className="element-rotate-handle">
+                              <i className="fas fa-sync-alt"></i>
+                            </div>
+                            <div
+                              className="element-resize-handle"
+                              onMouseDown={(e) => {
+                                e.stopPropagation();
+                                const startX = e.clientX;
+                                const startY = e.clientY;
+                                const startWidth = element.width;
+                                const startHeight = element.height || element.width;
+                                const doResize = (moveEvent) => {
+                                  const newWidth = startWidth + (moveEvent.clientX - startX);
+                                  const newHeight = element.type === 'image' ?
+                                    (startHeight + (moveEvent.clientY - startY)) : null;
+                                  setElements(elements.map(el =>
+                                    el.id === element.id ? {
+                                      ...el,
+                                      width: newWidth,
+                                      height: newHeight
+                                    } : el
+                                  ));
+                                };
+                                const stopResize = () => {
+                                  document.removeEventListener('mousemove', doResize);
+                                  document.removeEventListener('mouseup', stopResize);
+                                };
+                                document.addEventListener('mousemove', doResize);
+                                document.addEventListener('mouseup', stopResize);
+                              }}
+                            ></div>
+                          </>
+                        )}
+                      </div>
+                    </Draggable>
+                  ))}
+                  {enableGrid && (
+                    <div className="absolute inset-0 pointer-events-none" style={{
+                      backgroundImage: `linear-gradient(to right, rgba(0,0,0,0.1) 1px, transparent 1px),
+                                      linear-gradient(to bottom, rgba(0,0,0,0.1) 1px, transparent 1px)`,
+                      backgroundSize: `${gridSize}px ${gridSize}px`
+                    }}></div>
+                  )}
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      );
+    };
+    const root = ReactDOM.createRoot(document.getElementById('root'));
+    root.render(<CanvasStudio />);
+  </script>
+<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=jasvir-singh1021/canvas-studio" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>