Add-Video-Watermark

Running

App Files Files Community

Open-Source-Lab commited on about 1 month ago

Commit

aec7315

verified ·

1 Parent(s): 83861ae

Create index.html

Browse files

Files changed (1) hide show

index.html +970 -0

index.html ADDED Viewed

	@@ -0,0 +1,970 @@

+<html>
+<style>
+body {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 100vh;
+    margin: 0;
+    background-color: #f0f0f0;
+    font-family: Arial, sans-serif;
+}
+.container {
+    display: flex;
+    flex-direction: column;
+    gap: 15px;
+    max-width: 800px;
+    width: 100%;
+}
+.canvas-container {
+    position: relative;
+    width: 100%;
+}
+canvas {
+    border: 1px solid #000;
+    cursor: crosshair;
+    background-color: white;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+    width: 100%;
+    height: auto;
+}
+.toolbar {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px;
+    background-color: #ffffff;
+    padding: 12px;
+    border-radius: 5px;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+}
+.tool-group {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 6px;
+    border-radius: 4px;
+    background-color: #f7f7f7;
+    flex-wrap: wrap;
+}
+button {
+    padding: 8px 12px;
+    font-size: 14px;
+    border: none;
+    border-radius: 4px;
+    background-color: #4a90e2;
+    color: white;
+    cursor: pointer;
+    transition: all 0.2s;
+}
+button:hover {
+    background-color: #357abd;
+    transform: translateY(-1px);
+}
+button:active {
+    transform: translateY(0);
+}
+button.active {
+    background-color: #2c5990;
+}
+button.danger {
+    background-color: #e74c3c;
+}
+button.danger:hover {
+    background-color: #c0392b;
+}
+button.secondary {
+    background-color: #95a5a6;
+}
+button.secondary:hover {
+    background-color: #7f8c8d;
+}
+input[type="color"] {
+    width: 40px;
+    height: 40px;
+    padding: 0;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+}
+input[type="range"] {
+    width: 100px;
+}
+.color-preview {
+    width: 24px;
+    height: 24px;
+    border-radius: 50%;
+    border: 2px solid #ddd;
+}
+.tool-option {
+    display: flex;
+    align-items: center;
+    gap: 5px;
+}
+label {
+    font-size: 14px;
+}
+.size-display {
+    min-width: 30px;
+    text-align: center;
+}
+.layer-panel {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    padding: 12px;
+    background-color: #ffffff;
+    border-radius: 5px;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+}
+.layer-list {
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+}
+.layer-item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 6px;
+    background-color: #f7f7f7;
+    border-radius: 4px;
+}
+.layer-item.active {
+    background-color: #d3e8ff;
+}
+.layer-buttons {
+    display: flex;
+    gap: 5px;
+}
+.status-bar {
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+    padding: 6px 12px;
+    background-color: #ffffff;
+    border-radius: 5px;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+    font-size: 12px;
+    color: #555;
+}
+#colorPalette {
+    display: flex;
+    gap: 5px;
+    flex-wrap: wrap;
+}
+.palette-color {
+    width: 24px;
+    height: 24px;
+    border-radius: 4px;
+    cursor: pointer;
+    border: 1px solid #ddd;
+}
+.palette-color:hover {
+    transform: scale(1.1);
+}
+.brush-preview {
+    width: 40px;
+    height: 40px;
+    border-radius: 4px;
+    background-color: #f7f7f7;
+    position: relative;
+}
+.brush-preview-dot {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    border-radius: 50%;
+    background-color: #000;
+}
+.modal {
+    display: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.5);
+    z-index: 1000;
+    justify-content: center;
+    align-items: center;
+}
+.modal-content {
+    background-color: white;
+    padding: 20px;
+    border-radius: 5px;
+    max-width: 400px;
+    width: 100%;
+}
+.modal-title {
+    margin-top: 0;
+}
+.modal-footer {
+    display: flex;
+    justify-content: flex-end;
+    gap: 10px;
+    margin-top: 20px;
+}
+.image-preview {
+    max-width: 100%;
+    margin-top: 10px;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+}
+.loading {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 20px;
+}
+.loading:after {
+    content: " ";
+    display: block;
+    width: 24px;
+    height: 24px;
+    border-radius: 50%;
+    border: 6px solid #5D5CDE;
+    border-color: #5D5CDE transparent #5D5CDE transparent;
+    animation: loading 1.2s linear infinite;
+}
+@keyframes loading {
+    0% {
+        transform: rotate(0deg);
+    }
+    100% {
+        transform: rotate(360deg);
+    }
+}
+.transform-modal {
+    max-width: 90%;
+    max-height: 90vh;
+    overflow-y: auto;
+}
+.transform-preview {
+    text-align: center;
+    margin-top: 15px;
+}
+.transform-preview img {
+    max-width: 100%;
+    max-height: 60vh;
+    border-radius: 4px;
+    border: 1px solid #ddd;
+}
+@media (prefers-color-scheme: dark) {
+    body {
+        background-color: #181818;
+        color: #e0e0e0;
+    }
+    .toolbar, .status-bar, .modal-content, .layer-panel {
+        background-color: #292929;
+        color: #e0e0e0;
+    }
+    .tool-group, .layer-item {
+        background-color: #383838;
+    }
+    .layer-item.active {
+        background-color: #3a4d64;
+    }
+    canvas {
+        border-color: #444;
+    }
+    .palette-color {
+        border-color: #444;
+    }
+}
+</style>
+</head>
+<body>
+<div class="container">
+    <div class="toolbar">
+        <div class="tool-group">
+            <button id="pencilTool" class="active" title="Pencil (P)">Pencil</button>
+            <button id="brushTool" title="Brush (B)">Brush</button>
+            <button id="eraserTool" title="Eraser (E)">Eraser</button>
+            <button id="fillTool" title="Fill (F)">Fill</button>
+            <button id="lineTool" title="Line (L)">Line</button>
+            <button id="rectangleTool" title="Rectangle (R)">Rectangle</button>
+            <button id="circleTool" title="Circle (C)">Circle</button>
+        </div>
+        <div class="tool-group">
+            <div class="tool-option">
+                <input type="color" id="colorPicker" value="#000000">
+                <div id="currentColor" class="color-preview" style="background-color: #000000;"></div>
+            </div>
+            <div class="tool-option">
+                <label for="brushSize">Size:</label>
+                <input type="range" id="brushSize" min="1" max="50" value="5">
+                <span id="sizeDisplay" class="size-display">5px</span>
+            </div>
+            <div class="tool-option">
+                <label for="opacityRange">Opacity:</label>
+                <input type="range" id="opacityRange" min="1" max="100" value="100">
+                <span id="opacityDisplay" class="size-display">100%</span>
+            </div>
+        </div>
+    </div>
+    <div class="canvas-container">
+        <canvas id="paintCanvas" width="800" height="600"></canvas>
+    </div>
+    <div class="toolbar">
+        <div class="tool-group">
+            <button id="undoButton" title="Undo (Ctrl+Z)">Undo</button>
+            <button id="redoButton" title="Redo (Ctrl+Y)">Redo</button>
+            <button id="clearButton" class="danger" title="Clear">Clear</button>
+        </div>
+        <div class="tool-group">
+            <button id="saveButton" title="Save (Ctrl+S)">Save</button>
+            <button id="loadButton" title="Load">Load</button>
+            <button id="exportButton" title="Export as PNG">Export</button>
+            <button id="downloadButton" title="Download Image">Download Image</button>
+            <button id="transformButton" title="Transform with Image-Photo">Transform Image</button>
+        </div>
+        <div class="tool-group">
+            <div id="colorPalette">
+                <div class="palette-color" style="background-color: #000000;"></div>
+                <div class="palette-color" style="background-color: #ffffff;"></div>
+                <div class="palette-color" style="background-color: #ff0000;"></div>
+                <div class="palette-color" style="background-color: #00ff00;"></div>
+                <div class="palette-color" style="background-color: #0000ff;"></div>
+                <div class="palette-color" style="background-color: #ffff00;"></div>
+            </div>
+        </div>
+    </div>
+    <div class="status-bar">
+        <span id="positionDisplay">Position: 0, 0</span>
+        <span id="toolInfo">Pencil Tool | Size: 5px | Color: #000000</span>
+    </div>
+</div>
+<div id="saveModal" class="modal">
+    <div class="modal-content">
+        <h3 class="modal-title">Save Drawing</h3>
+        <div>
+            <label for="saveFilename">Filename:</label>
+            <input type="text" id="saveFilename" value="my-drawing" style="width: 100%; margin-top: 5px; padding: 5px;">
+        </div>
+        <div class="modal-footer">
+            <button id="cancelSave" class="secondary">Cancel</button>
+            <button id="confirmSave">Save</button>
+        </div>
+    </div>
+</div>
+<div id="transformModal" class="modal">
+    <div class="modal-content transform-modal">
+        <h3 class="modal-title">Transform Image</h3>
+        <div>
+            <label for="transformPrompt">Enter a prompt for @Image-Photo:</label>
+            <input type="text" id="transformPrompt" placeholder="Describe how to transform the image..." style="width: 100%; margin-top: 5px; padding: 5px; font-size: 16px;">
+        </div>
+        <div id="transformLoading" class="loading" style="display: none;"></div>
+        <div id="transformPreview" class="transform-preview"></div>
+        <div class="modal-footer">
+            <button id="cancelTransform" class="secondary">Cancel</button>
+            <button id="confirmTransform">Send to Image-Photo</button>
+            <button id="downloadTransformed" style="display: none;">Download Transformed</button>
+        </div>
+    </div>
+</div>
+<script>
+// Check if dark mode is preferred
+if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+    document.documentElement.classList.add('dark');
+}
+window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => {
+    if (event.matches) {
+        document.documentElement.classList.add('dark');
+    } else {
+        document.documentElement.classList.remove('dark');
+    }
+});
+const canvas = document.getElementById('paintCanvas');
+const ctx = canvas.getContext('2d');
+const colorPicker = document.getElementById('colorPicker');
+const currentColor = document.getElementById('currentColor');
+const brushSize = document.getElementById('brushSize');
+const sizeDisplay = document.getElementById('sizeDisplay');
+const opacityRange = document.getElementById('opacityRange');
+const opacityDisplay = document.getElementById('opacityDisplay');
+const positionDisplay = document.getElementById('positionDisplay');
+const toolInfo = document.getElementById('toolInfo');
+const pencilTool = document.getElementById('pencilTool');
+const brushTool = document.getElementById('brushTool');
+const eraserTool = document.getElementById('eraserTool');
+const fillTool = document.getElementById('fillTool');
+const lineTool = document.getElementById('lineTool');
+const rectangleTool = document.getElementById('rectangleTool');
+const circleTool = document.getElementById('circleTool');
+const undoButton = document.getElementById('undoButton');
+const redoButton = document.getElementById('redoButton');
+const clearButton = document.getElementById('clearButton');
+const saveButton = document.getElementById('saveButton');
+const loadButton = document.getElementById('loadButton');
+const exportButton = document.getElementById('exportButton');
+const downloadButton = document.getElementById('downloadButton');
+const transformButton = document.getElementById('transformButton');
+const saveModal = document.getElementById('saveModal');
+const saveFilename = document.getElementById('saveFilename');
+const cancelSave = document.getElementById('cancelSave');
+const confirmSave = document.getElementById('confirmSave');
+const transformModal = document.getElementById('transformModal');
+const transformPrompt = document.getElementById('transformPrompt');
+const transformLoading = document.getElementById('transformLoading');
+const transformPreview = document.getElementById('transformPreview');
+const cancelTransform = document.getElementById('cancelTransform');
+const confirmTransform = document.getElementById('confirmTransform');
+const downloadTransformed = document.getElementById('downloadTransformed');
+let isDrawing = false;
+let lastX = 0;
+let lastY = 0;
+let currentTool = 'pencil';
+let undoStack = [];
+let redoStack = [];
+let startX = 0;
+let startY = 0;
+let transformedImageUrl = null;
+function initCanvas() {
+    ctx.fillStyle = 'white';
+    ctx.fillRect(0, 0, canvas.width, canvas.height);
+    saveState();
+}
+function saveState() {
+    redoStack = [];
+    undoStack.push(canvas.toDataURL());
+    updateButtons();
+}
+function updateButtons() {
+    undoButton.disabled = undoStack.length <= 1;
+    redoButton.disabled = redoStack.length === 0;
+}
+function undo() {
+    if (undoStack.length <= 1) return;
+    redoStack.push(undoStack.pop());
+    const img = new Image();
+    img.src = undoStack[undoStack.length - 1];
+    img.onload = () => {
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+        ctx.drawImage(img, 0, 0);
+        updateButtons();
+    };
+}
+function redo() {
+    if (redoStack.length === 0) return;
+    const img = new Image();
+    img.src = redoStack.pop();
+    img.onload = () => {
+        undoStack.push(img.src);
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+        ctx.drawImage(img, 0, 0);
+        updateButtons();
+    };
+}
+function clearCanvas() {
+    saveState();
+    ctx.fillStyle = 'white';
+    ctx.fillRect(0, 0, canvas.width, canvas.height);
+}
+function startDrawing(e) {
+    isDrawing = true;
+    const rect = canvas.getBoundingClientRect();
+    lastX = e.clientX - rect.left;
+    lastY = e.clientY - rect.top;
+    startX = lastX;
+    startY = lastY;
+    if (['line', 'rectangle', 'circle'].includes(currentTool)) {
+        saveState();
+        return;
+    }
+    ctx.beginPath();
+    if (currentTool === 'fill') {
+        floodFill(Math.floor(lastX), Math.floor(lastY), hexToRgb(colorPicker.value));
+        isDrawing = false;
+        saveState();
+        return;
+    }
+    setupContext();
+    if (['pencil', 'brush'].includes(currentTool)) {
+        ctx.arc(lastX, lastY, 0.5, 0, Math.PI * 2);
+        ctx.fillStyle = ctx.strokeStyle;
+        ctx.fill();
+    }
+    saveState();
+}
+function draw(e) {
+    if (!isDrawing) return;
+    const rect = canvas.getBoundingClientRect();
+    const currentX = e.clientX - rect.left;
+    const currentY = e.clientY - rect.top;
+    positionDisplay.textContent = `Position: ${Math.floor(currentX)}, ${Math.floor(currentY)}`;
+    if (currentTool === 'pencil' || currentTool === 'brush' || currentTool === 'eraser') {
+        ctx.beginPath();
+        ctx.moveTo(lastX, lastY);
+        ctx.lineTo(currentX, currentY);
+        ctx.stroke();
+        lastX = currentX;
+        lastY = currentY;
+    } else if (['line', 'rectangle', 'circle'].includes(currentTool)) {
+        const img = new Image();
+        img.src = undoStack[undoStack.length - 1];
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+        ctx.drawImage(img, 0, 0);
+        setupContext();
+        if (currentTool === 'line') {
+            ctx.beginPath();
+            ctx.moveTo(startX, startY);
+            ctx.lineTo(currentX, currentY);
+            ctx.stroke();
+        } else if (currentTool === 'rectangle') {
+            const width = currentX - startX;
+            const height = currentY - startY;
+            ctx.strokeRect(startX, startY, width, height);
+        } else if (currentTool === 'circle') {
+            const radius = Math.sqrt(Math.pow(currentX - startX, 2) + Math.pow(currentY - startY, 2));
+            ctx.beginPath();
+            ctx.arc(startX, startY, radius, 0, Math.PI * 2);
+            ctx.stroke();
+        }
+    }
+}
+function endDrawing() {
+    if (!isDrawing) return;
+    isDrawing = false;
+    if (['line', 'rectangle', 'circle'].includes(currentTool)) {
+        saveState();
+    }
+}
+function setupContext() {
+    const size = parseInt(brushSize.value);
+    const opacity = parseInt(opacityRange.value) / 100;
+    ctx.lineWidth = size;
+    ctx.lineCap = 'round';
+    ctx.lineJoin = 'round';
+    if (currentTool === 'eraser') {
+        ctx.globalCompositeOperation = 'destination-out';
+        ctx.strokeStyle = `rgba(255, 255, 255, ${opacity})`;
+    } else {
+        ctx.globalCompositeOperation = 'source-over';
+        const color = colorPicker.value;
+        ctx.strokeStyle = `${color}${Math.round(opacity * 255).toString(16).padStart(2, '0')}`;
+    }
+}
+function floodFill(x, y, targetColor) {
+    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+    const data = imageData.data;
+    const width = canvas.width;
+    const height = canvas.height;
+    const index = (y * width + x) * 4;
+    const clickedColor = { r: data[index], g: data[index + 1], b: data[index + 2], a: data[index + 3] };
+    if (colorMatch(clickedColor, targetColor)) return;
+    const stack = [{x, y}];
+    while (stack.length > 0) {
+        const pixel = stack.pop();
+        const px = pixel.x;
+        const py = pixel.y;
+        if (px < 0 || px >= width || py < 0 || py >= height) continue;
+        const currentIndex = (py * width + px) * 4;
+        const currentColor = {
+            r: data[currentIndex],
+            g: data[currentIndex + 1],
+            b: data[currentIndex + 2],
+            a: data[currentIndex + 3]
+        };
+        if (colorMatch(currentColor, clickedColor)) {
+            data[currentIndex] = targetColor.r;
+            data[currentIndex + 1] = targetColor.g;
+            data[currentIndex + 2] = targetColor.b;
+            data[currentIndex + 3] = 255;
+            stack.push({x: px + 1, y: py});
+            stack.push({x: px - 1, y: py});
+            stack.push({x: px, y: py + 1});
+            stack.push({x: px, y: py - 1});
+        }
+    }
+    ctx.putImageData(imageData, 0, 0);
+}
+function colorMatch(color1, color2, tolerance = 10) {
+    return Math.abs(color1.r - color2.r) <= tolerance &&
+           Math.abs(color1.g - color2.g) <= tolerance &&
+           Math.abs(color1.b - color2.b) <= tolerance;
+}
+function hexToRgb(hex) {
+    const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+    return result ? {
+        r: parseInt(result[1], 16),
+        g: parseInt(result[2], 16),
+        b: parseInt(result[3], 16)
+    } : {r: 0, g: 0, b: 0};
+}
+function saveDrawing() {
+    const filename = saveFilename.value.trim() || 'my-drawing';
+    const dataURL = canvas.toDataURL();
+    try {
+        localStorage.setItem(`painting-${filename}`, dataURL);
+        alert(`Drawing saved as "${filename}"`);
+    } catch (e) {
+        alert('Error saving drawing. Local storage might be full or disabled.');
+    }
+    saveModal.style.display = 'none';
+}
+function loadDrawing() {
+    const savedDrawings = [];
+    for (let i = 0; i < localStorage.length; i++) {
+        const key = localStorage.key(i);
+        if (key.startsWith('painting-')) {
+            savedDrawings.push(key.replace('painting-', ''));
+        }
+    }
+    if (savedDrawings.length === 0) {
+        alert('No saved drawings found.');
+        return;
+    }
+    const drawing = prompt(`Enter filename to load (available: ${savedDrawings.join(', ')})`);
+    if (!drawing) return;
+    const dataURL = localStorage.getItem(`painting-${drawing}`);
+    if (!dataURL) {
+        alert(`Drawing "${drawing}" not found.`);
+        return;
+    }
+    const img = new Image();
+    img.src = dataURL;
+    img.onload = () => {
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+        ctx.drawImage(img, 0, 0);
+        saveState();
+    };
+}
+function exportDrawing() {
+    const link = document.createElement('a');
+    link.download = 'drawing.png';
+    link.href = canvas.toDataURL('image/png');
+    link.click();
+}
+// New function for downloading image
+function downloadImage() {
+    const timestamp = new Date().toISOString().replace(/:/g, '-').replace(/\..+/, '');
+    const link = document.createElement('a');
+    link.download = `drawing-${timestamp}.png`;
+    link.href = canvas.toDataURL('image/png');
+    link.click();
+}
+// New function to open transform modal
+function openTransformModal() {
+    transformPrompt.value = '';
+    transformPreview.innerHTML = '';
+    downloadTransformed.style.display = 'none';
+    transformModal.style.display = 'flex';
+}
+// New function to transform image with Image-Photo
+async function transformImage() {
+    const prompt = transformPrompt.value.trim();
+    if (!prompt) {
+        alert('Please enter a prompt for the transformation');
+        return;
+    }
+    // Show loading state
+    transformLoading.style.display = 'block';
+    confirmTransform.disabled = true;
+    transformPreview.innerHTML = '';
+    downloadTransformed.style.display = 'none';
+    transformedImageUrl = null;
+    try {
+        // Convert canvas to File
+        const dataUrl = canvas.toDataURL('image/png');
+        const res = await fetch(dataUrl);
+        const blob = await res.blob();
+        const file = new File([blob], 'drawing.png', { type: 'image/png' });
+        // Register handler for Image-Photo response
+        const handlerId = `image-transform-${Date.now()}`;
+        window.Poe.registerHandler(handlerId, (result) => {
+            const response = result.responses[0];
+            if (response.status === "error") {
+                transformLoading.style.display = 'none';
+                transformPreview.innerHTML = `<p style="color: red;">Error: ${response.statusText || 'Failed to transform image'}</p>`;
+                confirmTransform.disabled = false;
+            }
+            else if (response.status === "complete") {
+                transformLoading.style.display = 'none';
+                confirmTransform.disabled = false;
+                if (response.attachments?.length > 0) {
+                    const imageAttachment = response.attachments[0];
+                    transformedImageUrl = imageAttachment.url;
+                    transformPreview.innerHTML = `
+                        <img src="${imageAttachment.url}" alt="Transformed image">
+                        <p>${response.content}</p>
+                    `;
+                    downloadTransformed.style.display = 'inline-block';
+                } else {
+                    transformPreview.innerHTML = `<p>${response.content}</p>
+                        <p style="color: #f59e0b;">No image was returned. Try a different prompt.</p>`;
+                }
+            }
+        });
+        // Send message to Image-Photo
+        await window.Poe.sendUserMessage(
+            "@Image-Photo " + prompt,
+            {
+                handler: handlerId,
+                stream: false,
+                openChat: false,
+                attachments: [file]
+            }
+        );
+        await window.Poe.sendUserMessage(
+            "@Free-Thinking-Server " + prompt,
+            {
+                handler: handlerId,
+                stream: false,
+                openChat: false,
+                attachments: [file]
+            }
+        );
+    } catch (err) {
+        transformLoading.style.display = 'none';
+        confirmTransform.disabled = false;
+        transformPreview.innerHTML = `<p style="color: red;">Error: ${err.message || 'Failed to send image'}</p>`;
+        console.error("Error:", err);
+    }
+}
+// Function to download transformed image
+function downloadTransformedImage() {
+    if (!transformedImageUrl) return;
+    const link = document.createElement('a');
+    link.href = transformedImageUrl;
+    link.download = `transformed-${Date.now()}.png`;
+    link.click();
+}
+function setCurrentTool(tool) {
+    currentTool = tool;
+    document.querySelectorAll('.tool-group button').forEach(btn => {
+        btn.classList.remove('active');
+    });
+    document.getElementById(`${tool}Tool`).classList.add('active');
+    updateToolInfo();
+}
+function updateToolInfo() {
+    const size = brushSize.value;
+    const color = colorPicker.value;
+    const opacity = opacityRange.value;
+    let toolName;
+    switch (currentTool) {
+        case 'pencil': toolName = 'Pencil'; break;
+        case 'brush': toolName = 'Brush'; break;
+        case 'eraser': toolName = 'Eraser'; break;
+        case 'fill': toolName = 'Fill'; break;
+        case 'line': toolName = 'Line'; break;
+        case 'rectangle': toolName = 'Rectangle'; break;
+        case 'circle': toolName = 'Circle'; break;
+        default: toolName = 'Unknown';
+    }
+    toolInfo.textContent = `${toolName} Tool | Size: ${size}px | Color: ${color} | Opacity: ${opacity}%`;
+}
+function handleKeyDown(e) {
+    if (document.activeElement.tagName === 'INPUT') return;
+    if (e.key === 'z' && (e.ctrlKey || e.metaKey)) {
+        e.preventDefault();
+        undo();
+    } else if (e.key === 'y' && (e.ctrlKey || e.metaKey)) {
+        e.preventDefault();
+        redo();
+    } else if (e.key === 's' && (e.ctrlKey || e.metaKey)) {
+        e.preventDefault();
+        saveModal.style.display = 'flex';
+    } else if (e.key === 'p' || e.key === 'b' || e.key === 'e' || e.key === 'f' || e.key === 'l' || e.key === 'r' || e.key === 'c') {
+        switch (e.key) {
+            case 'p': setCurrentTool('pencil'); break;
+            case 'b': setCurrentTool('brush'); break;
+            case 'e': setCurrentTool('eraser'); break;
+            case 'f': setCurrentTool('fill'); break;
+            case 'l': setCurrentTool('line'); break;
+            case 'r': setCurrentTool('rectangle'); break;
+            case 'c': setCurrentTool('circle'); break;
+        }
+    }
+}
+function trackMousePosition(e) {
+    const rect = canvas.getBoundingClientRect();
+    const x = e.clientX - rect.left;
+    const y = e.clientY - rect.top;
+    positionDisplay.textContent = `Position: ${Math.floor(x)}, ${Math.floor(y)}`;
+}
+function rgbToHex(rgb) {
+    const match = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
+    if (match) {
+        return "#" + ((1 << 24) + (parseInt(match[1]) << 16) + (parseInt(match[2]) << 8) + parseInt(match[3])).toString(16).slice(1);
+    }
+    return rgb;
+}
+// Event listeners
+canvas.addEventListener('mousedown', startDrawing);
+canvas.addEventListener('mousemove', draw);
+canvas.addEventListener('mouseup', endDrawing);
+canvas.addEventListener('mouseout', endDrawing);
+canvas.addEventListener('mousemove', trackMousePosition);
+pencilTool.addEventListener('click', () => setCurrentTool('pencil'));
+brushTool.addEventListener('click', () => setCurrentTool('brush'));
+eraserTool.addEventListener('click', () => setCurrentTool('eraser'));
+fillTool.addEventListener('click', () => setCurrentTool('fill'));
+lineTool.addEventListener('click', () => setCurrentTool('line'));
+rectangleTool.addEventListener('click', () => setCurrentTool('rectangle'));
+circleTool.addEventListener('click', () => setCurrentTool('circle'));
+colorPicker.addEventListener('input', () => {
+    currentColor.style.backgroundColor = colorPicker.value;
+    updateToolInfo();
+});
+brushSize.addEventListener('input', () => {
+    sizeDisplay.textContent = `${brushSize.value}px`;
+    updateToolInfo();
+});
+opacityRange.addEventListener('input', () => {
+    opacityDisplay.textContent = `${opacityRange.value}%`;
+    updateToolInfo();
+});
+undoButton.addEventListener('click', undo);
+redoButton.addEventListener('click', redo);
+clearButton.addEventListener('click', clearCanvas);
+saveButton.addEventListener('click', () => saveModal.style.display = 'flex');
+loadButton.addEventListener('click', loadDrawing);
+exportButton.addEventListener('click', exportDrawing);
+// New button event listeners
+downloadButton.addEventListener('click', downloadImage);
+transformButton.addEventListener('click', openTransformModal);
+cancelTransform.addEventListener('click', () => transformModal.style.display = 'none');
+confirmTransform.addEventListener('click', transformImage);
+downloadTransformed.addEventListener('click', downloadTransformedImage);
+cancelSave.addEventListener('click', () => saveModal.style.display = 'none');
+confirmSave.addEventListener('click', saveDrawing);
+document.querySelectorAll('.palette-color').forEach(colorEl => {
+    colorEl.addEventListener('click', () => {
+        const color = colorEl.style.backgroundColor;
+        const hex = rgbToHex(color);
+        colorPicker.value = hex;
+        currentColor.style.backgroundColor = color;
+        updateToolInfo();
+    });
+});
+document.addEventListener('keydown', handleKeyDown);
+initCanvas();
+updateButtons();
+</html>