Update app.py

app.py

@@ -44,51 +44,29 @@ def combine_images(dress_image, design_image, position, size):
 
 def interface():
     with gr.Blocks() as demo:
-        gr.Markdown("## Image Editor with Drag-and-Drop")
+        gr.Markdown("## Image Editor with Basic Interaction")
         dress_image = gr.Image(type="pil", label="Upload Dress Image")
-        design_image = gr.Image(type="pil", label="Upload Design Image", tool="editor")  # Editor tool for resizing
-
+        design_image = gr.Image(type="pil", label="Upload Design Image")
+        
         position = gr.Textbox(placeholder="Enter position as x,y", value="100,100", label="Position")
         size = gr.Textbox(placeholder="Enter size as width,height", value="200,200", label="Size")
-
+        
         btn = gr.Button("Fit Design")
         output = gr.Image(type="pil", label="Final Output")
 
-        # Gradio button click function
+        # Button click function
         btn.click(
             combine_images, 
             inputs=[dress_image, design_image, position, size],
             outputs=output
         )
 
-        # Inject JavaScript for drag-and-drop functionality
+        # Add JavaScript for additional interactivity (basic example)
         gr.HTML("""
         <script>
-            function initDragAndDrop() {
-                const designImg = document.querySelector('img[data-name="design_image"]');
-                let startX, startY, initialX, initialY;
-                
-                designImg.addEventListener('mousedown', (e) => {
-                    startX = e.clientX;
-                    startY = e.clientY;
-                    initialX = designImg.offsetLeft;
-                    initialY = designImg.offsetTop;
-                    
-                    document.onmousemove = (e) => {
-                        const dx = e.clientX - startX;
-                        const dy = e.clientY - startY;
-                        designImg.style.position = 'absolute';
-                        designImg.style.left = (initialX + dx) + 'px';
-                        designImg.style.top = (initialY + dy) + 'px';
-                    }
-                });
-                
-                document.onmouseup = () => {
-                    document.onmousemove = document.onmouseup = null;
-                }
-            }
-            
-            window.onload = initDragAndDrop;
+            // JavaScript code for drag-and-drop functionality
+            // This code needs to be customized based on how images are rendered
+            // and will likely require additional adjustments.
         </script>
         """)