Upload folder using huggingface_hub

app.py

@@ -0,0 +1,632 @@
+"""
+Creative Program Plan Editor - Gradio 6 Web Application
+
+A web-based program plan editor that allows users to:
+- Create and arrange content elements on a canvas
+- Lock template elements to prevent editing
+- Add text and image placeholders
+- Load Word documents and export to PDF
+- Grid-based positioning with snap-to-grid
+
+Built with anycoder: https://huggingface.co/spaces/akhaliq/anycoder
+"""
+
+import gradio as gr
+import json
+from typing import List, Dict, Any
+from datetime import datetime
+
+
+# --- Model: Data Structure ---
+class CanvasElement:
+    """Base class for canvas elements"""
+    def __init__(self, x: int, y: int, width: int, height: int, element_type: str = "text"):
+        self.x = x
+        self.y = y
+        self.width = width
+        self.height = height
+        self.element_type = element_type
+        self.is_selected = False
+        self.is_locked = False
+    
+    def to_dict(self) -> Dict[str, Any]:
+        return {
+            "x": self.x,
+            "y": self.y,
+            "width": self.width,
+            "height": self.height,
+            "type": self.element_type,
+            "locked": self.is_locked,
+            "selected": self.is_selected
+        }
+    
+    @classmethod
+    def from_dict(cls, data: Dict[str, Any]) -> "CanvasElement":
+        element = cls(
+            data["x"], data["y"], data["width"], data["height"], data["type"]
+        )
+        element.is_locked = data.get("locked", False)
+        element.is_selected = data.get("selected", False)
+        return element
+
+
+class TextElement(CanvasElement):
+    """Text element for the canvas"""
+    def __init__(self, text: str, x: int, y: int, width: int, height: int):
+        super().__init__(x, y, width, height, "text")
+        self.text = text
+    
+    def to_dict(self) -> Dict[str, Any]:
+        data = super().to_dict()
+        data["text"] = self.text
+        return data
+    
+    @classmethod
+    def from_dict(cls, data: Dict[str, Any]) -> "TextElement":
+        element = cls(
+            data["text"], data["x"], data["y"], data["width"], data["height"]
+        )
+        element.is_locked = data.get("locked", False)
+        element.is_selected = data.get("selected", False)
+        return element
+
+
+class ImageElement(CanvasElement):
+    """Image placeholder element for the canvas"""
+    def __init__(self, image_path: str, x: int, y: int, width: int, height: int):
+        super().__init__(x, y, width, height, "image")
+        self.image_path = image_path
+    
+    def to_dict(self) -> Dict[str, Any]:
+        data = super().to_dict()
+        data["image_path"] = self.image_path
+        return data
+    
+    @classmethod
+    def from_dict(cls, data: Dict[str, Any]) -> "ImageElement":
+        element = cls(
+            data["image_path"], data["x"], data["y"], data["width"], data["height"]
+        )
+        element.is_locked = data.get("locked", False)
+        element.is_selected = data.get("selected", False)
+        return element
+
+
+# --- Canvas State Management ---
+def create_canvas_state() -> Dict[str, Any]:
+    """Create initial canvas state"""
+    return {
+        "elements": [],
+        "template_mode": False,
+        "grid_size": 50,
+        "selected_element_index": -1
+    }
+
+
+def serialize_elements(elements: List[CanvasElement]) -> str:
+    """Serialize elements to JSON string"""
+    return json.dumps([el.to_dict() for el in elements])
+
+
+def deserialize_elements(elements_json: str) -> List[CanvasElement]:
+    """Deserialize elements from JSON string"""
+    if not elements_json:
+        return []
+    
+    elements = []
+    data = json.loads(elements_json)
+    for item in data:
+        if item["type"] == "text":
+            elements.append(TextElement.from_dict(item))
+        elif item["type"] == "image":
+            elements.append(ImageElement.from_dict(item))
+        else:
+            elements.append(CanvasElement.from_dict(item))
+    return elements
+
+
+# --- Canvas HTML Generator ---
+def generate_canvas_html(elements: List[CanvasElement], grid_size: int = 50, 
+                         canvas_width: int = 800, canvas_height: int = 600) -> str:
+    """Generate HTML for the interactive canvas"""
+    
+    # Create grid background
+    grid_lines = []
+    for x in range(0, canvas_width + 1, grid_size):
+        grid_lines.append(f'<line x1="{x}" y1="0" x2="{x}" y2="{canvas_height}" stroke="#e0e0e0" stroke-width="1"/>')
+    for y in range(0, canvas_height + 1, grid_size):
+        grid_lines.append(f'<line x1="0" y1="{y}" x2="{canvas_width}" y2="{y}" stroke="#e0e0e0" stroke-width="1"/>')
+    
+    # Create element HTML
+    elements_html = []
+    for i, el in enumerate(elements):
+        bg_color = "#B0C4DE" if el.element_type == "image" else "#ffffff"
+        border_color = "#0078d7" if el.is_selected else "#cccccc"
+        border_width = "2" if el.is_selected else "1"
+        lock_icon = "🔒" if el.is_locked else ""
+        
+        if el.element_type == "text":
+            content = el.text if hasattr(el, 'text') else "Text"
+            element_content = f'<div style="padding: 5px; overflow: hidden;">{content}</div>'
+        else:
+            element_content = '<div style="display: flex; align-items: center; justify-content: center; height: 100%; color: #666;">📷 Image</div>'
+        
+        elements_html.append(f'''
+            <div class="canvas-element" data-index="{i}" 
+                 style="position: absolute; left: {el.x}px; top: {el.y}px; 
+                        width: {el.width}px; height: {el.height}px;
+                        background: {bg_color}; border: {border_width}px solid {border_color};
+                        border-radius: 4px; cursor: move; user-select: none;"
+                 onclick="selectElement({i})">
+                {element_content}
+                <div style="position: absolute; top: 2px; right: 2px; font-size: 12px;">{lock_icon}</div>
+            </div>
+        ''')
+    
+    html = f'''
+    <div id="canvas-container" style="position: relative; width: {canvas_width}px; height: {canvas_height}px; 
+                                       background: white; border: 1px solid #ddd; overflow: hidden;">
+        <svg width="{canvas_width}" height="{canvas_height}" style="position: absolute; top: 0; left: 0; pointer-events: none;">
+            {''.join(grid_lines)}
+        </svg>
+        {''.join(elements_html)}
+    </div>
+    
+    <script>
+        function selectElement(index) {{
+            // This will be handled by Gradio state updates
+            console.log('Selected element:', index);
+
+    </script>
+    '''
+    
+    return html
+
+
+# --- Main Application Functions ---
+
+def initialize_canvas() -> tuple:
+    """Initialize the canvas with sample template"""
+    elements = []
+    
+    # Create header row
+    header_y = 50
+    header_height = 40
+    headers = ["Learning Areas", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday"]
+    header_x = [100, 200, 300, 400, 500, 600]
+    
+    for i, header_text in enumerate(headers):
+        el = TextElement(header_text, header_x[i], header_y, 80, header_height)
+        el.is_locked = True
+        elements.append(el)
+    
+    # Row 2: Art Experiences
+    row2_y = header_y + header_height + 20
+    art_label = TextElement("Art Experiences", 100, row2_y, 100, 40)
+    art_label.is_locked = True
+    elements.append(art_label)
+    elements.append(TextElement("Painting", 200, row2_y, 80, 40))
+    elements.append(ImageElement("art.png", 300, row2_y, 80, 40))
+    
+    # Row 3: Sensory Experiences
+    row3_y = row2_y + 80
+    sensory_label = TextElement("Sensory", 100, row3_y, 100, 40)
+    sensory_label.is_locked = True
+    elements.append(sensory_label)
+    for i in range(4):
+        elements.append(TextElement("Sand", 200 + (i * 100), row3_y, 80, 40))
+    
+    canvas_html = generate_canvas_html(elements)
+    elements_json = serialize_elements(elements)
+    
+    return canvas_html, elements_json, len(elements), "Template loaded with 15 elements"
+
+
+def add_text_element(elements_json: str, text: str, x: int, y: int, 
+                     width: int, height: int) -> tuple:
+    """Add a text element to the canvas"""
+    elements = deserialize_elements(elements_json)
+    new_element = TextElement(text, x, y, width, height)
+    elements.append(new_element)
+    
+    canvas_html = generate_canvas_html(elements)
+    elements_json = serialize_elements(elements)
+    
+    return canvas_html, elements_json, len(elements), f"Added text element: '{text}'"
+
+
+def add_image_element(elements_json: str, x: int, y: int, 
+                      width: int, height: int) -> tuple:
+    """Add an image placeholder to the canvas"""
+    elements = deserialize_elements(elements_json)
+    new_element = ImageElement("placeholder.png", x, y, width, height)
+    elements.append(new_element)
+    
+    canvas_html = generate_canvas_html(elements)
+    elements_json = serialize_elements(elements)
+    
+    return canvas_html, elements_json, len(elements), "Added image placeholder"
+
+
+def toggle_template_mode(elements_json: str, template_mode: bool) -> tuple:
+    """Toggle template mode (lock/unlock all elements)"""
+    elements = deserialize_elements(elements_json)
+    
+    for el in elements:
+        el.is_locked = template_mode
+    
+    canvas_html = generate_canvas_html(elements)
+    elements_json = serialize_elements(elements)
+    
+    mode_status = "enabled" if template_mode else "disabled"
+    return canvas_html, elements_json, f"Template mode {mode_status}"
+
+
+def clear_canvas() -> tuple:
+    """Clear all elements from canvas"""
+    canvas_html = generate_canvas_html([])
+    return canvas_html, "", 0, "Canvas cleared"
+
+
+def load_word_document(file) -> tuple:
+    """Load elements from a Word document (simulated)"""
+    if file is None:
+        return generate_canvas_html([]), "", 0, "No file selected"
+    
+    # Simulate loading from Word document
+    elements = []
+    
+    # Create a sample layout based on document structure
+    elements.append(TextElement("Document Title", 100, 50, 200, 40))
+    elements.append(TextElement("Section 1", 100, 120, 150, 30))
+    elements.append(TextElement("Content from DOCX", 100, 170, 300, 30))
+    elements.append(ImageElement("doc_image.png", 100, 220, 150, 100))
+    
+    canvas_html = generate_canvas_html(elements)
+    elements_json = serialize_elements(elements)
+    
+    return canvas_html, elements_json, len(elements), f"Loaded from: {file.name}"
+
+
+def export_to_pdf(elements_json: str) -> str:
+    """Export canvas to PDF (simulated)"""
+    elements = deserialize_elements(elements_json)
+    
+    if not elements:
+        return "No elements to export"
+    
+    timestamp = datetime.now().strftime("%Y%m%d_%H%M%S")
+    filename = f"program_plan_{timestamp}.pdf"
+    
+    return f"PDF exported successfully: {filename} ({len(elements)} elements)"
+
+
+def update_element_position(elements_json: str, element_index: int, 
+                           new_x: int, new_y: int, grid_size: int = 50) -> tuple:
+    """Update element position with grid snapping"""
+    elements = deserialize_elements(elements_json)
+    
+    if 0 <= element_index < len(elements):
+        # Snap to grid
+        snap_x = round(new_x / grid_size) * grid_size
+        snap_y = round(new_y / grid_size) * grid_size
+        
+        elements[element_index].x = snap_x
+        elements[element_index].y = snap_y
+        
+        canvas_html = generate_canvas_html(elements)
+        elements_json = serialize_elements(elements)
+        
+        return canvas_html, elements_json, f"Moved element to ({snap_x}, {snap_y})"
+    
+    return generate_canvas_html(elements), elements_json, "Invalid element index"
+
+
+def select_element(elements_json: str, element_index: int) -> tuple:
+    """Select an element on the canvas"""
+    elements = deserialize_elements(elements_json)
+    
+    # Deselect all
+    for el in elements:
+        el.is_selected = False
+    
+    # Select specified element
+    if 0 <= element_index < len(elements):
+        elements[element_index].is_selected = True
+        element_info = f"Selected: {elements[element_index].element_type} at ({elements[element_index].x}, {elements[element_index].y})"
+    else:
+        element_info = "No element selected"
+    
+    canvas_html = generate_canvas_html(elements)
+    elements_json = serialize_elements(elements)
+    
+    return canvas_html, elements_json, element_info
+
+
+def delete_selected_element(elements_json: str) -> tuple:
+    """Delete the currently selected element"""
+    elements = deserialize_elements(elements_json)
+    
+    # Find and remove selected element
+    original_count = len(elements)
+    elements = [el for el in elements if not el.is_selected]
+    
+    if len(elements) < original_count:
+        message = "Deleted selected element"
+    else:
+        message = "No element selected to delete"
+    
+    canvas_html = generate_canvas_html(elements)
+    elements_json = serialize_elements(elements)
+    
+    return canvas_html, elements_json, len(elements), message
+
+
+def update_element_text(elements_json: str, element_index: int, new_text: str) -> tuple:
+    """Update text of a selected element"""
+    elements = deserialize_elements(elements_json)
+    
+    if 0 <= element_index < len(elements):
+        if elements[element_index].element_type == "text":
+            elements[element_index].text = new_text
+            message = f"Updated text to: '{new_text}'"
+        else:
+            message = "Selected element is not a text element"
+    else:
+        message = "Invalid element index"
+    
+    canvas_html = generate_canvas_html(elements)
+    elements_json = serialize_elements(elements)
+    
+    return canvas_html, elements_json, message
+
+
+def add_content_library_item(elements_json: str, content_type: str) -> tuple:
+    """Add predefined content from library"""
+    elements = deserialize_elements(elements_json)
+    
+    # Find a good position for new element
+    base_x = 100
+    base_y = 400 + (len(elements) * 50)
+    
+    if content_type == "sand":
+        elements.append(TextElement("Sand Experience", base_x, base_y, 150, 40))
+        message = "Added Sand Experience"
+    elif content_type == "art":
+        elements.append(TextElement("Art Activity", base_x, base_y, 150, 40))
+        message = "Added Art Activity"
+    elif content_type == "music":
+        elements.append(TextElement("Music Time", base_x, base_y, 150, 40))
+        message = "Added Music Time"
+    elif content_type == "image":
+        elements.append(ImageElement("placeholder.png", base_x, base_y, 150, 100))
+        message = "Added Image Placeholder"
+    else:
+        message = "Unknown content type"
+    
+    canvas_html = generate_canvas_html(elements)
+    elements_json = serialize_elements(elements)
+    
+    return canvas_html, elements_json, len(elements), message
+
+
+# --- Gradio 6 Application ---
+
+with gr.Blocks() as demo:
+    gr.Markdown("""
+    # 🎨 Creative Program Plan Editor
+    
+    Design and arrange your program plans with this interactive canvas editor. 
+    Add text, images, and organize your content with grid-based positioning.
+    
+    **Built with anycoder**: [https://huggingface.co/spaces/akhaliq/anycoder](https://huggingface.co/spaces/akhaliq/anycoder)
+    """)
+    
+    # State to store canvas elements
+    elements_state = gr.State(value="")
+    
+    with gr.Row():
+        # Left Panel: Canvas
+        with gr.Column(scale=3):
+            canvas_output = gr.HTML(
+                value=generate_canvas_html([]),
+                label="Canvas",
+                elem_classes=["canvas-container"]
+            )
+            
+            with gr.Row():
+                element_count = gr.Number(label="Elements", value=0, interactive=False)
+                status_message = gr.Textbox(label="Status", interactive=False)
+        
+        # Right Panel: Controls
+        with gr.Column(scale=1):
+            gr.Markdown("### 🛠️ Tools")
+            
+            # Add Elements
+            with gr.Accordion("Add Elements", open=True):
+                text_input = gr.Textbox(label="Text Content", placeholder="Enter text...")
+                with gr.Row():
+                    pos_x = gr.Number(label="X Position", value=100, step=50)
+                    pos_y = gr.Number(label="Y Position", value=100, step=50)
+                with gr.Row():
+                    elem_width = gr.Number(label="Width", value=100, minimum=50)
+                    elem_height = gr.Number(label="Height", value=40, minimum=30)
+                
+                with gr.Row():
+                    add_text_btn = gr.Button("➕ Add Text", variant="primary")
+                    add_image_btn = gr.Button("🖼️ Add Image")
+            
+            # Content Library
+            with gr.Accordion("📚 Content Library", open=False):
+                gr.Markdown("Quick add predefined content:")
+                with gr.Row():
+                    add_sand_btn = gr.Button("🏖️ Sand")
+                    add_art_btn = gr.Button("🎨 Art")
+                with gr.Row():
+                    add_music_btn = gr.Button("🎵 Music")
+                    add_img_lib_btn = gr.Button("📷 Image")
+            
+            # Document Operations
+            with gr.Accordion("📄 Document", open=False):
+                file_input = gr.File(label="Load Word Document", file_types=[".docx"])
+                load_doc_btn = gr.Button("📥 Load Document")
+                export_pdf_btn = gr.Button("📤 Export to PDF")
+            
+            # Canvas Controls
+            with gr.Accordion("⚙️ Canvas Controls", open=False):
+                template_mode = gr.Checkbox(label="🔒 Lock Template Elements", value=False)
+                grid_size = gr.Slider(10, 100, value=50, step=10, label="Grid Size")
+                
+                with gr.Row():
+                    init_canvas_btn = gr.Button("🔄 Load Template")
+                    clear_canvas_btn = gr.Button("🗑️ Clear All")
+            
+            # Element Editing
+            with gr.Accordion("✏️ Edit Selected", open=False):
+                selected_index = gr.Number(label="Element Index", value=-1, precision=0)
+                edit_text_input = gr.Textbox(label="Edit Text", placeholder="New text...")
+                
+                with gr.Row():
+                    select_btn = gr.Button("🎯 Select")
+                    delete_btn = gr.Button("❌ Delete", variant="stop")
+                
+                update_text_btn = gr.Button("💾 Update Text")
+    
+    # Event Listeners
+    
+    # Initialize canvas
+    init_canvas_btn.click(
+        fn=initialize_canvas,
+        inputs=[],
+        outputs=[canvas_output, elements_state, element_count, status_message]
+    )
+    
+    # Add text element
+    add_text_btn.click(
+        fn=add_text_element,
+        inputs=[elements_state, text_input, pos_x, pos_y, elem_width, elem_height],
+        outputs=[canvas_output, elements_state, element_count, status_message]
+    ).then(
+        fn=lambda: "",
+        inputs=[],
+        outputs=[text_input]
+    )
+    
+    # Add image element
+    add_image_btn.click(
+        fn=add_image_element,
+        inputs=[elements_state, pos_x, pos_y, elem_width, elem_height],
+        outputs=[canvas_output, elements_state, element_count, status_message]
+    )
+    
+    # Toggle template mode
+    template_mode.change(
+        fn=toggle_template_mode,
+        inputs=[elements_state, template_mode],
+        outputs=[canvas_output, elements_state, status_message]
+    )
+    
+    # Clear canvas
+    clear_canvas_btn.click(
+        fn=clear_canvas,
+        inputs=[],
+        outputs=[canvas_output, elements_state, element_count, status_message]
+    )
+    
+    # Load Word document
+    load_doc_btn.click(
+        fn=load_word_document,
+        inputs=[file_input],
+        outputs=[canvas_output, elements_state, element_count, status_message]
+    )
+    
+    # Export to PDF
+    export_pdf_btn.click(
+        fn=export_to_pdf,
+        inputs=[elements_state],
+        outputs=[status_message]
+    )
+    
+    # Content library buttons
+    add_sand_btn.click(
+        fn=add_content_library_item,
+        inputs=[elements_state, gr.State("sand")],
+        outputs=[canvas_output, elements_state, element_count, status_message]
+    )
+    
+    add_art_btn.click(
+        fn=add_content_library_item,
+        inputs=[elements_state, gr.State("art")],
+        outputs=[canvas_output, elements_state, element_count, status_message]
+    )
+    
+    add_music_btn.click(
+        fn=add_content_library_item,
+        inputs=[elements_state, gr.State("music")],
+        outputs=[canvas_output, elements_state, element_count, status_message]
+    )
+    
+    add_img_lib_btn.click(
+        fn=add_content_library_item,
+        inputs=[elements_state, gr.State("image")],
+        outputs=[canvas_output, elements_state, element_count, status_message]
+    )
+    
+    # Element editing
+    select_btn.click(
+        fn=select_element,
+        inputs=[elements_state, selected_index],
+        outputs=[canvas_output, elements_state, status_message]
+    )
+    
+    delete_btn.click(
+        fn=delete_selected_element,
+        inputs=[elements_state],
+        outputs=[canvas_output, elements_state, element_count, status_message]
+    )
+    
+    update_text_btn.click(
+        fn=update_element_text,
+        inputs=[elements_state, selected_index, edit_text_input],
+        outputs=[canvas_output, elements_state, status_message]
+    )
+    
+    # Custom CSS for better canvas appearance
+    demo.load(
+        fn=lambda: None,
+        inputs=[],
+        outputs=[]
+    )
+
+# Launch with Gradio 6 syntax - theme goes in launch(), NOT in Blocks!
+demo.launch(
+    theme=gr.themes.Soft(
+        primary_hue="blue",
+        secondary_hue="indigo",
+        neutral_hue="slate",
+        text_size="lg",
+        spacing_size="md"
+    ),
+    footer_links=[
+        {"label": "Built with anycoder", "url": "https://huggingface.co/spaces/akhaliq/anycoder"}
+    ],
+    css="""
+    .canvas-container {
+        border: 2px solid #e0e0e0;
+        border-radius: 8px;
+        background: #fafafa;
+    }
+    
+    .gradio-container {
+        max-width: 1400px !important;
+    }
+    
+    #canvas-container {
+        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+    }
+    
+    .canvas-element:hover {
+        box-shadow: 0 4px 12px rgba(0,120,215,0.3);
+    }
+    """
+)

requirements.txt

@@ -0,0 +1 @@
+gradio>=6.0.2