{"version":3,"file":"index.17c5f499.js","sources":["../../src/drawing/svelte-infinite-viewer/InfiniteViewer.svelte","../../vite/modulepreload-polyfill","../../src/drawing/svelte-infinite-viewer/index.js","../../src/utils.ts","../../src/components/Droppable.svelte","../../src/drawing/drawUtils.ts","../../src/drawing/DrawCanvas.svelte","../../src/utils/events.ts","../../src/types.ts","../../src/stores/storeUtils.ts","../../src/stores/ui.ts","../../src/constants.ts","../../src/assets/startImage1.jpeg","../../src/assets/startImage2.jpeg","../../src/assets/startImage3.jpeg","../../src/assets/startImage6.jpeg","../../src/assets/startImage4.jpeg","../../src/assets/startImage5.jpeg","../../src/stores/drawHistory.ts","../../src/stores/canvases.ts","../../src/imageContour.ts","../../src/maskDrawMethods.ts","../../src/components/Canvases.svelte","../../src/stores/viewer.ts","../../src/config.ts","../../src/lib/socket.ts","../../src/optimizeEvents.ts","../../src/components/Slider.svelte","../../src/components/Button.svelte","../../src/components/bottomControls/OptimizeOptions.svelte","../../src/components/bottomControls/BrushPreview.svelte","../../src/components/PillRadioButton.svelte","../../src/components/SearchInput.svelte","../../src/components/Toggle.svelte","../../src/components/bottomControls/MaskDrawControls.svelte","../../src/assets/x.svg","../../src/components/Modal.svelte","../../src/components/InfoModal.svelte","../../src/components/CreateModal.svelte","../../src/utils/network.ts","../../src/components/DownloadModal.svelte","../../src/assets/zoom-out.svg","../../src/assets/zoom-in.svg","../../src/assets/minimize.svg","../../src/assets/icon-undo.svg","../../src/assets/icon-redo.svg","../../src/components/ProseButton.svelte","../../src/assets/arrow-left.svg","../../src/assets/info.svg","../../src/assets/plus.svg","../../src/assets/download.svg","../../src/components/ControlBar.svelte","../../src/components/ControlBarMobile.svelte","../../src/components/MobileHeader.svelte","../../src/routes/Paint.svelte","../../src/components/gallery/Artwork.svelte","../../src/routes/Gallery.svelte","../../src/routes/Review.svelte","../../src/App.svelte","../../src/main.ts"],"sourcesContent":["<script>\n  import VanillaInfiniteViewer, {\n    OPTIONS,\n    PROPERTIES,\n    EVENTS,\n    CLASS_NAME\n  } from \"infinite-viewer\";\n\n  import {\n    onMount,\n    onDestroy,\n    createEventDispatcher,\n    beforeUpdate\n  } from \"svelte\";\n\n  const dispatch = createEventDispatcher();\n\n  export let className = \"\";\n  let infiniteViewer;\n\n  let wrapperElement;\n  let containerElement;\n  let scrollAreaElement;\n  let horizontalScrollElement;\n  let verticalScrollElement;\n\n  export function getInstance() {\n    return infiniteViewer;\n  }\n\n  beforeUpdate(() => {\n    if (!infiniteViewer) {\n      return;\n    }\n\n    PROPERTIES.forEach(name => {\n      if (name in $$props) {\n        infiniteViewer[name] = $$props[name];\n      }\n    });\n  });\n  onMount(() => {\n    const options = {};\n\n    PROPERTIES.forEach(name => {\n      if (name in $$props && typeof $$props[name] !== \"undefined\") {\n        options[name] = $$props[name];\n      }\n    });\n    console.log('options', options);\n    infiniteViewer = new VanillaInfiniteViewer(\n      containerElement,\n      scrollAreaElement.nextElementSibling,\n      {\n        ...options,\n        wrapperElement,\n        scrollAreaElement,\n        horizontalScrollElement,\n        verticalScrollElement,\n      },\n    );\n\n    EVENTS.forEach((name, i) => {\n      infiniteViewer.on(name, e => {\n        const result = dispatch(name, e);\n\n        if (result === false) {\n          e.stop();\n        }\n      });\n    });\n  });\n  onDestroy(() => {\n    infiniteViewer.destroy();\n  });\n</script>\n<div class={`${className || ''} ${CLASS_NAME}`} bind:this={containerElement}>\n    <div class=\"infinite-viewer-wrapper\" bind:this={wrapperElement}>\n        <div class=\"infinite-viewer-scroll-area\" bind:this={scrollAreaElement}></div>\n        <slot />\n    </div>\n    <div class=\"infinite-viewer-scroll-bar infinite-viewer-horizontal-scroll-bar\" bind:this={horizontalScrollElement}>\n        <div class=\"infinite-viewer-scroll-thumb\"></div>\n    </div>\n    <div class=\"infinite-viewer-scroll-bar infinite-viewer-vertical-scroll-bar\" bind:this={verticalScrollElement}>\n        <div class=\"infinite-viewer-scroll-thumb\"></div>\n    </div>\n</div>\n","const p = function polyfill() {\n    const relList = document.createElement('link').relList;\n    if (relList && relList.supports && relList.supports('modulepreload')) {\n        return;\n    }\n    for (const link of document.querySelectorAll('link[rel=\"modulepreload\"]')) {\n        processPreload(link);\n    }\n    new MutationObserver((mutations) => {\n        for (const mutation of mutations) {\n            if (mutation.type !== 'childList') {\n                continue;\n            }\n            for (const node of mutation.addedNodes) {\n                if (node.tagName === 'LINK' && node.rel === 'modulepreload')\n                    processPreload(node);\n            }\n        }\n    }).observe(document, { childList: true, subtree: true });\n    function getFetchOpts(script) {\n        const fetchOpts = {};\n        if (script.integrity)\n            fetchOpts.integrity = script.integrity;\n        if (script.referrerpolicy)\n            fetchOpts.referrerPolicy = script.referrerpolicy;\n        if (script.crossorigin === 'use-credentials')\n            fetchOpts.credentials = 'include';\n        else if (script.crossorigin === 'anonymous')\n            fetchOpts.credentials = 'omit';\n        else\n            fetchOpts.credentials = 'same-origin';\n        return fetchOpts;\n    }\n    function processPreload(link) {\n        if (link.ep)\n            // ep marker = processed\n            return;\n        link.ep = true;\n        // prepopulate the load record\n        const fetchOpts = getFetchOpts(link);\n        fetch(link.href, fetchOpts);\n    }\n};__VITE_IS_MODERN__&&p();","import InfiniteViewer from \"./InfiniteViewer.svelte\";\nimport { METHODS } from \"infinite-viewer\";\n\nexport default /*#__PURE__*/ (() => {\n    const prototype = InfiniteViewer.prototype;\n\n    METHODS.forEach(name => {\n        prototype[name] = function (...args) {\n            const self = this.getInstance();\n            const result = self[name](...args);\n\n            if (result === self) {\n                return this;\n            } else {\n                return result;\n            }\n        };\n    });\n    return InfiniteViewer;\n})();\n","export async function loadImage(src: string): Promise<HTMLImageElement> {\n    return await new Promise((resolve, reject) => {\n        const image = new Image()\n        image.crossOrigin=\"anonymous\"\n        image.src = src\n        image.onload = () => resolve(image)\n        image.onerror = () => reject(new Error('could not load image'))\n    })\n}\n\nexport async function loadJson<T>(path: string): Promise<T> {\n    return await fetch(path).then(async(response) => await response.json())\n}\n\nexport function imageToCanvas(img: HTMLImageElement): HTMLCanvasElement {\n    const canvas = document.createElement('canvas')\n    const ctx = canvas.getContext('2d') as CanvasRenderingContext2D\n    canvas.height = img.naturalHeight\n    canvas.width = img.naturalWidth\n    ctx.drawImage(img, 0, 0)\n    return canvas\n}\n\nexport function canvasToImage(canvas: HTMLCanvasElement): HTMLImageElement {\n    const image = new Image()\n    image.src = canvas.toDataURL()\n    return image\n}\n\nexport function imgTob64(img: HTMLImageElement): string {\n    const canvas = imageToCanvas(img)\n    return canvas.toDataURL()\n}\n\nexport function downloadCanvas(\n    canvas: HTMLCanvasElement,\n    filename: string = 'download.png',\n    format: string = 'image/png',\n    quality:number = 1\n) {\n    const url = canvas.toDataURL(format, quality)\n    const aDownloadLink = document.createElement('a')\n    aDownloadLink.download = filename\n    aDownloadLink.href = url\n    aDownloadLink.click()\n}\n\n\nexport function mergeCanvas(\n    canvas1: HTMLCanvasElement,\n    canvas2: HTMLCanvasElement\n): HTMLCanvasElement {\n    const newCanvas = document.createElement('canvas')\n    const newCtx = newCanvas.getContext('2d')\n    newCanvas.width = canvas1.width\n    newCanvas.height = canvas1.height\n    newCtx.drawImage(canvas1, 0, 0)\n    newCtx.drawImage(canvas2, 0, 0)\n    return newCanvas\n}\n\nexport function thumbnailCanvas(\n    canvas: HTMLCanvasElement,\n    maxSize: number\n): HTMLCanvasElement {\n    const scale = Math.min(1, maxSize / Math.max(canvas.height, canvas.width))\n    const thumbnail = document.createElement('canvas')\n    const thumbnailCtx = thumbnail.getContext('2d')\n    thumbnail.width = Math.round(scale * canvas.width)\n    thumbnail.height = Math.round(scale * canvas.height)\n    thumbnailCtx.drawImage(\n        canvas,\n        0, 0,\n        canvas.width, canvas.height,\n        0, 0,\n        thumbnail.width,\n        thumbnail.height\n    )\n    return thumbnail\n}\n\nexport function clamp(a: number, b: number, c: number): number {\n    return Math.max(b, Math.min(c, a))\n}\n\nexport function stopEvent(event) {\n    event.stopPropagation()\n    event.preventDefault()\n}\n\nexport function localStorageSpace(){\n    let data = '';\n    console.log('Current local storage: ');\n    for(let key in window.localStorage){\n        if(window.localStorage.hasOwnProperty(key)){\n            data += window.localStorage[key];\n            console.log( key + \" = \" + ((window.localStorage[key].length * 16)/(8 * 1024)).toFixed(2) + ' KB' );\n        }\n    }\n    console.log(data ? '\\n' + 'Total space used: ' + ((data.length * 16)/(8 * 1024)).toFixed(2) + ' KB' : 'Empty (0 KB)');\n    console.log(data ? 'Approx. space remaining: ' + (5120 - ((data.length * 16)/(8 * 1024)).toFixed(2)) + ' KB' : '5 MB');\n};\n\nexport function downloadJSON(exportObj:any, exportName:string) {\n    if (!exportName.endsWith('.json')) {\n        exportName += '.json'\n    }\n    const dataStr = \"data:text/json;charset=utf-8,\" + encodeURIComponent(JSON.stringify(exportObj))\n    const downloadAnchorNode = document.createElement('a')\n    downloadAnchorNode.setAttribute(\"href\", dataStr)\n    downloadAnchorNode.setAttribute(\"download\", exportName)\n    document.body.appendChild(downloadAnchorNode); // required for firefox\n    downloadAnchorNode.click();\n    downloadAnchorNode.remove();\n}\n","<script lang=\"typescript\">\n    export let onDrop;\n    import { stopEvent } from \"../utils\";\n</script>\n\n<div\n    on:dragstart={stopEvent}\n    on:dragover={stopEvent}\n    on:dragleave={stopEvent}\n    on:drop|preventDefault={onDrop}\n>\n    <slot />\n</div>\n","\nexport function drawCircle(\n    ctx,\n    x,\n    y,\n    r,\n    fill = true,\n    stroke = false,\n    clip = false\n) {\n    ctx.beginPath();\n    ctx.arc(x, y, r, 0, 2 * Math.PI, false);\n    if (clip) {\n        ctx.clip();\n    }\n    if (stroke) {\n        ctx.stroke();\n    }\n    if (fill) {\n        ctx.fill();\n    }\n    ctx.closePath();\n}\n\nexport function drawLine(\n    ctx: CanvasRenderingContext2D,\n    x1: number,\n    y1: number,\n    x2: number,\n    y2: number,\n    radius: number\n) {\n    ctx.lineWidth = radius\n    ctx.beginPath();\n    ctx.moveTo(x1, y1)\n    ctx.lineTo(x2, y2)\n    ctx.stroke()\n}\n\nexport function drawLines(\n    ctx: CanvasRenderingContext2D,\n    points: number[][]\n) {\n    if (points.length < 2) {\n        return\n    }\n    ctx.beginPath()\n    ctx.moveTo(points[0][0], points[0][1])\n    for (let idx = 1; idx < points.length; idx++) {\n        ctx.lineTo(points[idx][0], points[idx][1])\n    }\n    ctx.stroke()\n}\n\nexport function drawSmoothLines(\n    ctx: CanvasRenderingContext2D,\n    points: number[][]\n) {\n    if (points.length < 3) {\n        return\n    }\n    ctx.beginPath()\n    ctx.moveTo(points[0][0], points[0][1])\n    let i\n    for (i = 1; i < points.length - 2; i++) {\n        let xc = (points[i][0] + points[i + 1][0]) / 2;\n        let yc = (points[i][1] + points[i + 1][1]) / 2;\n        ctx.quadraticCurveTo(points[i][0], points[i][1], xc, yc);\n    }\n    // curve through the last two points\n    ctx.quadraticCurveTo(points[i][0], points[i][1], points[i + 1][0], points[i + 1][1]);\n    ctx.stroke()\n}\n\n\nexport function createBrushImage(\n    hardness: number,\n    radius: number,\n    opacity: number = 0.0,\n    color1: string='rgba(0, 0, 0, 1.0)',\n    color2: string='rgba(255, 255, 255, 1.0)',\n): HTMLCanvasElement {\n    const size = (radius * 2 + 1)\n    const canvas = document.createElement('canvas') as HTMLCanvasElement\n    canvas.width = size\n    canvas.height = size\n    const context = canvas.getContext('2d')\n\n    context.globalAlpha = 1 - opacity\n    const gradient = context.createRadialGradient(\n        radius+1,\n        radius+1,\n        Math.min(radius-1, Math.round(radius * hardness)),\n        radius+1,\n        radius+1,\n        radius\n    );\n    gradient.addColorStop(0, color1)\n    gradient.addColorStop(1, color2)\n    context.fillStyle = gradient\n    context.fillRect(0, 0, size, size)\n    return canvas\n}\n\n\nexport function drawBrushLine(\n    context:CanvasRenderingContext2D,\n    brushImage: HTMLImageElement|HTMLCanvasElement,\n    x1:number,\n    y1: number,\n    x2: number,\n    y2: number\n) {\n    const bw = brushImage.width\n    const bh = brushImage.height\n    const diffX = Math.abs(x2 - x1)\n    const diffY = Math.abs(y2 - y1)\n    const dist = Math.sqrt(diffX * diffX + diffY * diffY)\n    // const step = .25 * bw / (dist ? (Math.min(24, dist)) : 1)\n    const step = .05 * bw\n    let i = 0\n    let t = 0, b, x, y;\n    // console.log(dist, step, dist / step);\n    \n    context.globalCompositeOperation = 'darken'\n    while (i <= dist) {\n        t = Math.max(0, Math.min(1, i / dist));\n        x = x1 + (x2 - x1) * t;\n        y = y1 + (y2 - y1) * t;\n        b = (Math.random() * 3) | 0;\n        context.drawImage(brushImage, x - bw * 0.5, y - bh * 0.5);\n        i += step\n    }\n    context.globalCompositeOperation = 'source-over'\n}","<svelte:options accessors />\n\n<script lang=\"ts\">\n    import type { Writable } from 'svelte/store'\n    import { writable } from 'svelte/store'\n    import { onMount, createEventDispatcher } from \"svelte\";\n    import { drawBrushLine, createBrushImage } from \"@/drawing/drawUtils\";\n    import { canvasToImage, clamp, loadImage, thumbnailCanvas } from \"@/utils\";\n    \n    export let style = ''\n    export let id: string;\n    export let radius = 30;\n    export let opacity = 0;\n    export let hardness = .8;\n    export let erasing = false;\n    export let showCursor = true;\n    export let canvasBase64: string | null = null;\n    export let strokeColor = \"#000000\";\n    export let defaultImageUrl: string | null = null;\n    export let maskFilter: HTMLCanvasElement | null = null; // Temporary hack.\n    export let canvasSize: Writable<number[]> = writable([512, 512])\n    export let brushImageSrc = \"\"\n    import { mouseOrTouchOffsets } from '@/utils/events'\n    // const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent)\n    \n    const dispatch = createEventDispatcher()\n    const strokeCanvasScale = 1.0\n\n    $: width = $canvasSize[0]\n    $: height = $canvasSize[1]\n    \n    $: strokeWidth = Math.round(width * strokeCanvasScale)\n    $: strokeHeight = Math.round(height * strokeCanvasScale)\n    \n    let canvas: HTMLCanvasElement;\n    let ctx: CanvasRenderingContext2D;\n\n    let strokeCanvas: HTMLCanvasElement;\n    let strokeCtx: CanvasRenderingContext2D;\n    let grayStrokeCanvas: HTMLCanvasElement = document.createElement(\"canvas\");;\n    let grayStrokeCtx: CanvasRenderingContext2D = grayStrokeCanvas.getContext(\"2d\");;\n\n    let previewCanvas: HTMLCanvasElement = document.createElement(\"canvas\");\n    let previewCtx: CanvasRenderingContext2D = previewCanvas.getContext(\"2d\");\n\n    let undoStack: string[] = [];\n    let undoStackMax = 30;\n    let redoStack: string[] = [];\n    let mouseDown = false;\n    let currentStroke: number[][] = [];\n    \n    const brushImage = writable(new Image())\n    $: canvasBase64 = undoStack[undoStack.length - 1] ?? null;\n    $: brushCanvas = createBrushImage(hardness, radius, opacity)\n    // $: brushCanvasPreview = createBrushImage(hardness, 64, opacity, 'rgba(255, 255, 255, 1.0)', 'rgba(255, 255, 255, 0.0)')\n    $: brushCanvasPreview = createBrushImage(hardness, 64, opacity, 'rgba(0, 0, 0, 1.0)', 'rgba(255, 255, 255, 0.0)')\n    $: $brushImage = canvasToImage(brushCanvasPreview)\n    $: brushImageSrc = $brushImage.src\n    $: strokeColorRGB = hexToRgb(strokeColor)\n    \n    function hexToRgb(hex) {\n        var result = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i.exec(hex);\n        return result ? {\n            r: parseInt(result[1], 16),\n            g: parseInt(result[2], 16),\n            b: parseInt(result[3], 16)\n        } : null;\n    }\n\n    function canvasChanged() {\n        if (undoStack.length === undoStackMax) {\n            undoStack.shift();\n        }\n        redoStack = [];\n        const dataURl = canvas.toDataURL();\n        \n        // console.log(\n        //     thumbnailCanvas(canvas, 256).toDataURL('image/png').length,\n        //     thumbnailCanvas(canvas, 256).toDataURL('image/jpeg').length,\n        //     thumbnailCanvas(canvas, 256).toDataURL('image/webp').length,\n        // );\n        // var a = document.createElement(\"a\"); //Create <a>\n        // a.href = thumbnailCanvas(canvas, 256).toDataURL('image/webp'); //Image Base64 Goes here\n        // a.download = \"Image.webp\"; //File name Here\n        // a.click(); //Downloaded file\n        \n        undoStack = [...undoStack, dataURl];\n        dispatch(\"change\", { ctx, canvas, canvasBase64 });\n        window.localStorage.setItem(`${id}-canvasBase64`, dataURl);\n    }\n\n    export function clear() {\n        ctx.clearRect(0, 0, width, height);\n        canvasChanged();\n    }\n\n    export function fill(fillStyle: string = strokeColor) {\n        ctx.fillStyle = fillStyle\n        // The -1 is a hack so the contours will work with mask.\n        ctx.fillRect(1, 1, width-1, height-1)\n        canvasChanged();\n    }\n\n    export function getStores() {\n        return { brushImage }\n    }\n\n    $: if (canvas && width && strokeWidth) {\n        // canvas.width = width;\n        canvas.height = height;\n        strokeCanvas.width = strokeWidth\n        strokeCanvas.height = strokeHeight\n        previewCanvas.width = width\n        previewCanvas.height = height\n        grayStrokeCanvas.width = strokeWidth\n        grayStrokeCanvas.height = strokeHeight\n        strokeCtx.lineCap = 'round'\n        strokeCtx.lineJoin = 'round'\n    }\n\n    export function setImage(src: HTMLCanvasElement | HTMLImageElement) {\n        console.log(\"set image\")\n        ctx.clearRect(0, 0, width, height)\n        ctx.drawImage(src, 0, 0);\n        canvasChanged();\n    }\n\n    export function getCanvas(): HTMLCanvasElement {\n        return canvas;\n    }\n\n    export function getContext(): CanvasRenderingContext2D {\n        return ctx;\n    }\n\n    async function setFromUndoRedo() {\n        ctx.clearRect(0, 0, width, height);\n        if (undoStack.length) {\n            const image = await loadImage(undoStack[undoStack.length - 1]);\n            ctx.drawImage(image, 0, 0);\n        }\n        dispatch(\"change\", { ctx, canvas, canvasBase64 });\n    }\n\n    export async function undo() {\n        const lastbase64 = undoStack.pop();\n        await setFromUndoRedo();\n        if (lastbase64) {\n            redoStack.push(lastbase64);\n        }\n    }\n    export async function redo() {\n        const lastbase64 = redoStack.pop();\n        if (lastbase64) {\n            undoStack.push(lastbase64);\n        }\n        await setFromUndoRedo();\n    }\n\n    export function hasAnyVisiblePixels() {\n        const { data } = ctx.getImageData(0, 0, width, height)\n        // const u32 =  new Uint32Array(data.data.buffer) // reads 1x uint32 instead of 4x bytes\n        for (let index = 0; index < data.length; index+=4) {\n            const alpha = data[index +3]\n            if (alpha > 0) {\n                return true\n            }\n        }\n        return false\n    }\n\n    onMount(async () => {\n        ctx = canvas.getContext(\"2d\");\n        // Draw the start image that was saved\n        strokeCtx = strokeCanvas.getContext(\"2d\", { willReadFrequently: true })\n\n        const savedUrl = window.localStorage.getItem(`${id}-canvasBase64`);\n        const startUrl = savedUrl || defaultImageUrl;\n        if (startUrl != null && startUrl != \"null\") {\n            setImage(await loadImage(startUrl))\n        }\n    });\n\n    function strokeDone() {\n        if (!mouseDown) {\n            return;\n        }\n        mouseDown = false;\n        if (currentStroke.length == 0) {\n            return\n        }\n        currentStroke = [];\n        console.log('strokeDone');\n        ctx.clearRect(0, 0, width, height)\n        ctx.drawImage(previewCanvas, 0, 0, width, height)\n        // ctx.globalCompositeOperation = erasing\n        //     ? \"destination-out\"\n        //     : \"source-over\";\n        // ctx.drawImage(strokeCanvas, 0, 0, width, height);\n        \n        strokeCtx.clearRect(0, 0, strokeWidth, strokeHeight);\n        grayStrokeCtx.clearRect(0, 0, strokeWidth, strokeHeight);\n        previewCtx.clearRect(0, 0, width, height)\n        canvasChanged();\n        // ctx.globalCompositeOperation = 'source-over'\n    }\n\n    function onMouseDown() {\n        grayStrokeCtx.fillStyle = 'white'\n        grayStrokeCtx.fillRect(0, 0, strokeWidth, strokeHeight)\n        mouseDown = true\n    }\n\n    function onMouseMove(event) {\n        if (!mouseDown) {\n            return\n        }\n        const offsets = mouseOrTouchOffsets(event)\n        \n        if (offsets.length != 1) {\n            // If using two fingers do no not draw\n            return\n        }\n        const [x, y] = offsets[0]\n        \n        currentStroke.push([ x * strokeCanvasScale, y * strokeCanvasScale ])\n        \n        if (currentStroke.length > 2) {\n            const last = currentStroke[currentStroke.length -2]\n            // console.time('drawBrushLine')\n            drawBrushLine(grayStrokeCtx, brushCanvas, last[0], last[1], x, y)\n            // console.timeEnd('drawBrushLine')\n            \n            let startX = Math.min(last[0], x) - brushCanvas.width / 2\n            let startY = Math.min(last[1], y) - brushCanvas.height / 2\n            let dwidth = Math.abs(last[0] - x) + brushCanvas.width\n            let dheight = Math.abs(last[1] - y) + brushCanvas.height\n\n            // console.time('imageData')\n            const imageData = grayStrokeCtx.getImageData(startX, startY, dwidth, dheight)\n            for (let i = 0; i < imageData.data.length; i+=4) {\n                imageData.data[i+3] = clamp((1 - opacity) * (255 - imageData.data[i]), 0, 255)\n                imageData.data[i] = strokeColorRGB.r\n                imageData.data[i+1] = strokeColorRGB.g\n                imageData.data[i+2] = strokeColorRGB.b\n            }\n            strokeCtx.putImageData(imageData, startX, startY)\n            // console.timeEnd('imageData')\n        }\n\n        previewCtx.clearRect(0, 0, canvas.width, canvas.height);\n        previewCtx.drawImage(canvas, 0, 0);\n        previewCtx.globalCompositeOperation = erasing\n            ? \"destination-out\"\n            : \"source-over\";\n        previewCtx.drawImage(strokeCanvas, 0, 0, width, height);\n        dispatch(\"stroke\", {\n            ctx: previewCtx,\n            canvas: previewCanvas,\n        });\n        previewCtx.globalCompositeOperation = \"source-over\"; // reset.\n    }\n</script>\n\n<div\n    {id}\n    class=\"canvasesContainer\"\n    style=\"cursor:{showCursor ? 'initial' : 'none'};{style}\"\n    on:mousedown={onMouseDown}\n    on:touchstart|preventDefault={onMouseDown}\n    on:mouseup={() => strokeDone()}\n    on:touchend={() => strokeDone()}\n\n    on:mouseleave={() => strokeDone()}\n    on:touchcancel={() => strokeDone()}\n\n    on:mousemove={onMouseMove}\n    on:touchmove={onMouseMove}\n    \n>\n    <canvas id=\"drawCanvas\" bind:this={canvas} {width} {height} />\n    <canvas\n        style=\"width:{width}px;height:{height}px;\"\n        id=\"strokeCanvas\"\n        bind:this={strokeCanvas}\n        width={strokeWidth}\n        height={strokeHeight}\n    />\n</div>\n\n<style>\n    .canvasesContainer {\n        position: relative;\n    }\n    #strokeCanvas {\n        position: absolute;\n        top: 0px;\n        left: 0px;\n    }\n</style>\n","export function mouseOrTouchOffsets(event): [number, number][] {\n    if (event.touches?.length) {\n        return Array.from(event.touches).map(({ clientX, clientY , target }) => {            \n            const r = target.getBoundingClientRect();\n            const scale = target.clientWidth / r.width            \n            const offsetX = clientX - r.left\n            const offsetY = clientY - r.top\n            return [ offsetX * scale,  offsetY * scale ]\n        })\n    } else {\n        return [[ event.offsetX, event.offsetY ]]\n    }\n}","\nexport enum Mode {\n    MobileHomeScreen,\n    DirectDraw,\n    MaskDraw,\n    Optimizing,\n    PausedOptimizing,\n}\n\nexport interface OptimizationResults {\n    // step: number,\n    num_iterations: number, // The total possible.\n    images: HTMLImageElement[]\n}\n\n// export interface GalleryExport {\n//     creationDate: number,\n//     artistName: string,\n//     artworkName: string,\n//     masks: Array<{ imageBase64: string, prompt: string }>\n// }\nexport interface ArtworkData {\n    accepted: null | boolean\n    artist_name: string\n    created_at: string\n    key: string\n}\nexport type Masks = Array<{ imageBase64: string, prompt: string }>\n\nexport type ColorPalette = \n    'blue-10' |\n    'blue-20' |\n    'blue-30' |\n    'blue-40' |\n    'blue-50' |\n    'cyan-10' |\n    'cyan-20' |\n    'cyan-30' |\n    'cyan-40' |\n    'cyan-50' |\n    'chartreuse-10' |\n    'chartreuse-20' |\n    'chartreuse-30' |\n    'chartreuse-40' |\n    'chartreuse-50' |\n    'green-10' |\n    'green-20' |\n    'green-30' |\n    'green-40' |\n    'green-50' |\n    'gray-0' |\n    'gray-10' |\n    'gray-20' |\n    'gray-30' |\n    'gray-40' |\n    'gray-50' |\n    'gray-60' |\n    'gray-70' |\n    'gray-80' |\n    'gray-90' |\n    'gray-100' |\n    'magenta-10' |\n    'magenta-20' |\n    'magenta-30' |\n    'magenta-40' |\n    'magenta-50' |\n    'orange-10' |\n    'orange-20' |\n    'orange-30' |\n    'orange-40' |\n    'orange-50' |\n    'purple-10' |\n    'purple-20' |\n    'purple-30' |\n    'purple-40' |\n    'purple-50' |\n    'red-10' |\n    'red-20' |\n    'red-30' |\n    'red-40' |\n    'red-50' |\n    'yellow-10' |\n    'yellow-20' |\n    'yellow-30' |\n    'yellow-40' |\n    'yellow-50'\n","import type { Writable } from 'svelte/store'\nimport { writable } from 'svelte/store'\nimport { clamp } from '@/utils'\n\nexport function localStorageWritable<T>(name:string, defaultValue:T):Writable<T>{\n    // Svelte store that persists to localStorage.\n    // Data must be JSON-able.\n    let value = null\n    try {\n        value = JSON.parse(localStorage.getItem(name))\n    } catch (error) {}\n    const store = writable(value ?? defaultValue)\n    store.subscribe($value => {\n        localStorage.setItem(name, JSON.stringify($value))\n    })\n    return store\n}\n\nexport function clampedNumberStore(value:number, min:number, max:number) {\n    const store = writable(value)\n    return {\n        subscribe: store.subscribe,\n        set: (v:number) => store.set(clamp(v, min, max))\n    }\n}","\nimport { writable, derived, get } from 'svelte/store'\nimport type { OptimizationResults } from '@/types'\nimport { Mode } from '@/types'\nimport { localStorageWritable, clampedNumberStore } from '@/stores/storeUtils'\nimport { onMount } from 'svelte'\n\n\nexport const prompt = localStorageWritable('prompt', 'radiant fireworks of diamonds')\nexport const stylePrompt = localStorageWritable('stylePrompt', '')\nexport const learningRate = localStorageWritable('learningRate', 250)\nexport const numRecSteps = localStorageWritable('numRecSteps', 0)\nexport const zoom = clampedNumberStore(1, .25, 5.0)\nexport const innerWidth = writable(window.innerWidth)\nexport const innerHeight = writable(window.innerHeight)\nexport const isMobile = derived(innerWidth, $w => $w <= 900)\nexport const mode = writable(\n    get(isMobile) ? Mode.MobileHomeScreen : Mode.MaskDraw\n)\n\n// UserPool\nexport const userQueuePosition = writable(-1)\nexport const optimizationResults = writable(null as null | OptimizationResults)\nexport const selectedOptIdx = writable(0)\nexport const selectedOptImage = derived([selectedOptIdx, optimizationResults], ([$idx, $results]) => {\n    return $results == null ? null : $results.images[$idx]\n})\n\n","export const MAX_IMAGE_SIZE = 1024\n\n// import image0Url from './assets/startImage0.jpeg'\nimport image1Url from './assets/startImage1.jpeg'\nimport image2Url from './assets/startImage2.jpeg'\nimport image3Url from './assets/startImage3.jpeg'\nimport image4Url from './assets/startImage4.jpeg'\nimport image5Url from './assets/startImage5.jpeg'\nimport image6Url from './assets/startImage6.jpeg'\n\nexport const DEFAULT_IMAGES = [\n    image1Url,\n    image2Url,\n    image3Url,\n    image6Url,\n    image4Url,\n    image5Url\n]\n\nexport const DEFAULT_IMAGE = DEFAULT_IMAGES[1]","export default \"__VITE_ASSET__badf2d78__\"","export default \"__VITE_ASSET__aeeffbb2__\"","export default \"__VITE_ASSET__31a691d9__\"","export default \"__VITE_ASSET__09905a97__\"","export default \"__VITE_ASSET__444abc04__\"","export default \"__VITE_ASSET__df20ae51__\"","// A file to store the history of the edits to a canvas.\nimport { get } from 'svelte/store'\nimport { DEFAULT_IMAGE } from '../constants'\nimport { canvasToImage, loadImage, thumbnailCanvas } from '@/utils'\nimport { mainCanvas, maskCanvas } from '@/stores/canvases'\nimport { prompt } from '@/stores/ui'\nimport { localStorageWritable } from '@/stores/storeUtils'\n\ninterface DrawHistory {\n    startImage: string\n    masks: Array<{ imageBase64: string, prompt: string }>\n}\n\nexport const drawHistoryStore = localStorageWritable<DrawHistory>('drawHistory', {\n    startImage: '',\n    masks: []\n})\n\nexport function recordOptimizationHistory() {\n    console.log('Accepted.')\n    const smallCanvas = thumbnailCanvas(get(maskCanvas).getCanvas(), 256)\n    const imageBase64 = smallCanvas.toDataURL('image/webp');\n    drawHistoryStore.update(($drawHistoryStore) => {\n        $drawHistoryStore.masks = $drawHistoryStore.masks || []\n        $drawHistoryStore.masks.push({ imageBase64, prompt: get(prompt) })\n        // Limit the total, taking the previous 12.\n        $drawHistoryStore.masks = $drawHistoryStore.masks.slice(-12)\n        console.log('Draw history length:', $drawHistoryStore.masks.length);\n        return $drawHistoryStore\n    })\n}\n\n// export function setHasOptimized() {\n//     console.log('Accepted.')\n//     drawHistoryStore.update((_drawHistoryStore) => ({\n//         ..._drawHistoryStore,\n//         hasOptimized: true,\n//     }))\n// }\n\nexport function reset() {\n    // Called when draw canvas is set to a new image.\n    console.log('draw history reset')\n    drawHistoryStore.update((_drawHistoryStore) => ({\n        startImage: get(mainCanvas).getCanvas().toDataURL('image/jpeg', 90),\n        masks: []\n    }))\n}\n\nexport async function exportBeforeAfter(): Promise<HTMLCanvasElement> {\n    const finalCanvas = get(mainCanvas).getCanvas()\n    const canvas = document.createElement('canvas')\n    const ctx = canvas.getContext('2d')\n    canvas.width = (finalCanvas.width * 2)\n    canvas.height = finalCanvas.height\n    // The start image will be an empty string on the first load.\n    const startImageUrl = get(drawHistoryStore).startImage || DEFAULT_IMAGE\n    const startImage = await loadImage(startImageUrl)\n    ctx.drawImage(startImage, 0, 0)\n    ctx.drawImage(finalCanvas, finalCanvas.width, 0)\n    return canvas\n}","import { writable, get, derived } from 'svelte/store'\nimport { tick } from \"svelte\";\nimport { localStorageWritable } from '@/stores/storeUtils'\nimport { mode } from '@/stores/ui'\nimport type DrawCanvas from \"@/drawing/DrawCanvas.svelte\";\nimport * as drawHistory from '@/stores/drawHistory'\nimport { loadImage, imageToCanvas, thumbnailCanvas } from \"@/utils\";\nimport { MAX_IMAGE_SIZE } from \"@/constants\";\nimport { Mode } from '@/types';\n\nexport const canvasSize = localStorageWritable('canvasSize', [512, 512])\nexport const mainCanvas = writable(null as null | DrawCanvas)\nexport const maskCanvas = writable(null as null | DrawCanvas)\nexport const canvasEvents: EventTarget = new EventTarget()\n\nexport const activeCanvas = derived(\n    [mode, maskCanvas, mainCanvas],\n    ([$mode, $maskCanvas, $mainCanvas]) => {\n        if (!$mainCanvas || !$maskCanvas) {\n            return null\n        }\n        return ($mode == Mode.DirectDraw) ? $mainCanvas : $maskCanvas\n})\n\nexport async function setEmpty(width, height) {\n    console.log('set empty', width, height);\n    \n    canvasSize.set([width, height]);\n    await tick(); // DrawCanvases get recreated.\n    const whiteCanvas = document.createElement('canvas')\n    whiteCanvas.width = width\n    whiteCanvas.height = height\n    const ctx = whiteCanvas.getContext('2d')\n    ctx.fillStyle = 'white'\n    ctx.fillRect(0, 0, width, height)\n\n    get(mainCanvas).setImage(whiteCanvas)\n    drawHistory.reset()\n    canvasEvents.dispatchEvent(new CustomEvent('setImage', {}))\n}\n\nexport async function setImageByURL(imageUrl: string) {\n    try {\n        const image = await loadImage(imageUrl);\n        const canvas = thumbnailCanvas(imageToCanvas(image), MAX_IMAGE_SIZE);\n        canvasSize.set([canvas.width, canvas.height]);\n        await tick(); // DrawCanvases get recreated.\n    \n        get(mainCanvas).setImage(canvas);\n        drawHistory.reset()\n        canvasEvents.dispatchEvent(new CustomEvent('setImage', {}))\n    } catch (error) {\n        console.log(error);\n        return\n    }\n}\n\nexport async function setImageByFile(file: File) {\n    const url = URL.createObjectURL(file)\n    await setImageByURL(url)\n}","import { contours } from 'd3-contour'\n\n\nfunction _imageContour(\n    canvas: HTMLCanvasElement,\n    ctx: CanvasRenderingContext2D\n): number[][][] {\n    const width = canvas.width\n    const height = canvas.height\n    const data4 = ctx.getImageData(0, 0, width, height).data\n    // Check if the image uses transparency by the alpha of top-left pixel.\n    if (data4[3] === 255) {\n        // If no transparency return the square.\n        return [[\n            [0, 0],\n            [width, 0],\n            [width, height],\n            [0, height],\n        ]]\n    } else {\n        // Collect the alpha pixels to use for marching squares.\n        const alpha: number[] = []\n        for (let i = 3; i < data4.length; i += 4) {\n            alpha.push(data4[i])\n        }\n        // console.time('contours')\n        return contours()\n            .size([width, height])\n            .thresholds([5])(alpha)[0]\n            .coordinates.flat()\n    }\n}\n\nconst contourCanvas = document.createElement('canvas')\ncontourCanvas.width = 300\ncontourCanvas.height = 300\nconst contourCtx = contourCanvas.getContext('2d')\n\nexport function imageContour(maskCanvas: HTMLCanvasElement) {\n    // A wrapper for the contours that places it in a smaller canvas first for optimization.\n    contourCtx.clearRect(0, 0, contourCanvas.width, contourCanvas.height)\n    contourCtx.drawImage(\n        maskCanvas,\n        0, 0,\n        maskCanvas.width,\n        maskCanvas.height,\n        0, 0,\n        contourCanvas.width,\n        contourCanvas.height,\n    )\n    const scaleX = maskCanvas.width / contourCanvas.width\n    const scaleY = maskCanvas.height / contourCanvas.height\n    return _imageContour(contourCanvas, contourCtx).map(poly => (\n        poly.map(p => [p[0] * scaleX, p[1] * scaleY])\n    ))\n}","import { drawLines } from \"./drawing/drawUtils\";\nimport { imageContour } from \"./imageContour\";\n\nexport function drawGrid(\n    canvasSize: number[],\n    gridSize: number,\n    colorA: string = 'blue',\n    colorB: string = 'yellow'\n    // colorA: string = 'white',\n    // colorB: string = 'black'\n): [HTMLCanvasElement, CanvasRenderingContext2D] {\n    const canvas: HTMLCanvasElement = document.createElement('canvas')\n    canvas.width = canvasSize[0]\n    canvas.height = canvasSize[1]\n    const ctx = canvas.getContext('2d')\n    const numCols = Math.round(canvasSize[0] / gridSize)\n    const numRows = Math.round(canvasSize[1] / gridSize)\n    for (let row = 0; row < numRows; row += 1) {\n        for (let col = 0; col < numCols; col += 1) {\n            ctx.beginPath()\n            ctx.fillStyle = row % 2 == col % 2 ? colorA : colorB\n            const x = col * gridSize\n            const y = row * gridSize\n            ctx.rect(x, y, gridSize, gridSize)\n            ctx.fill()\n        }\n    }\n    return [canvas, ctx]\n}\n\nfunction drawContours(\n    maskCanvas: HTMLCanvasElement,\n    dstCtx: CanvasRenderingContext2D,\n    lineWidth: number,\n    // colorA: string = 'white',\n    // colorB: string = 'black',\n    colorA: string = 'blue',\n    colorB: string = 'yellow',\n    dash:number = 3\n) {\n    // console.time('contours')\n    const contours = imageContour(maskCanvas)\n    // console.timeEnd('contours')\n    // dstCtx.globalAlpha = .5\n    dstCtx.lineWidth = lineWidth;\n    dstCtx.lineDashOffset = 0;\n    dstCtx.strokeStyle = colorA\n    dstCtx.setLineDash([dash, dash]);\n    for (const poly of contours) {\n        drawLines(dstCtx, poly);\n    }\n    dstCtx.lineDashOffset = dash;\n    dstCtx.strokeStyle = colorB\n    dstCtx.setLineDash([dash, dash]);\n    for (const poly of contours) {\n        drawLines(dstCtx, poly);\n    }\n    dstCtx.globalAlpha = 0\n}\n\nexport function drawMaskGridAlpha(\n    dstCtx: CanvasRenderingContext2D,\n    canvasSize: number[],\n    maskCanvas: HTMLCanvasElement,\n    gridCanvas: HTMLCanvasElement,\n    lineWidth:number=2\n) {\n    dstCtx.clearRect(0, 0, canvasSize[0], canvasSize[1]);\n    dstCtx.globalAlpha = 0.6\n    dstCtx.drawImage(gridCanvas, 0, 0)\n    dstCtx.globalAlpha = 1.0\n    dstCtx.globalCompositeOperation = \"destination-in\";\n    dstCtx.drawImage(maskCanvas, 0, 0)\n    dstCtx.globalCompositeOperation = \"source-over\"; // reset to default.\n    // Draw contours\n    drawContours(maskCanvas, dstCtx, lineWidth)\n}\n\n\n// export function drawGridColor(\n//     canvas:HTMLCanvasElement,\n//     ctx: CanvasRenderingContext2D,\n//     gridSize: number,\n//     color:string,\n//     offset: boolean\n// ): [HTMLCanvasElement, CanvasRenderingContext2D] {\n//     const numCols = Math.round(canvas.width / gridSize)\n//     const numRows = Math.round(canvas.height / gridSize)\n//     ctx.beginPath()\n//     ctx.fillStyle = color\n//     for (let row = 0; row < numRows; row += 1) {\n//         for (let col = 0; col < numCols; col += 1) {\n//             if ((row % 2 == col % 2) == offset) {\n//                 const x = col * gridSize\n//                 const y = row * gridSize\n//                 ctx.rect(x, y, gridSize, gridSize)\n//             }\n//         }\n//     }\n//     ctx.fill()\n//     return [canvas, ctx]\n// }\n\n\n// function drawGrid(gridSize:number): [HTMLCanvasElement, CanvasRenderingContext2D] {\n//     const canvas:HTMLCanvasElement = document.createElement('canvas')\n//     canvas.width = $canvasSize[0]\n//     canvas.height = $canvasSize[1]\n//     const ctx = canvas.getContext('2d')\n//     ctx.fillStyle = \"white\";\n//     ctx.beginPath();\n//     for (let x = 0; x < $canvasSize[0]; x += 2 * gridSize) {\n//         for (let row = 0; row < $canvasSize[0] / gridSize; row += 1) {\n//             const y = row * gridSize;\n//             const xOffset = row % 2 == 0 ? 0 : gridSize;\n//             ctx.rect(x + xOffset, y, gridSize, gridSize);\n//         }\n//     }\n//     ctx.fill();\n//     return [canvas, ctx]\n// }\n\n\n// function drawMaskGridInverted(maskCanvas: HTMLCanvasElement, gridSize: number =3) {\n//     outlineCtx.clearRect(0, 0, $canvasSize[0], $canvasSize[1]);\n//     // First union the grid and mask\n//     if ($mainCanvas) {\n//         var imageData = $mainCanvas.getContext().getImageData(0, 0, $canvasSize[0], $canvasSize[1]);\n//         var data = imageData.data;\n//         for (let i = 0; i < data.length; i+=4) {\n//             data[i] = Math.min(255, 255 - data[i] + 40)\n//             data[i+1] = 255 - data[i+1]\n//             data[i+2] = 255 - data[i+2]\n//         }            \n//         outlineCtx.putImageData(imageData, 0, 0)\n//     }\n//     outlineCtx.globalCompositeOperation = \"destination-in\";\n//     outlineCtx.drawImage(maskCanvas, 0, 0);        \n//     const gridCanvas = drawGrid(gridSize)[0]\n//     outlineCtx.drawImage(gridCanvas, 0, 0);\n// }\n\n// function drawMaskGridBinary(maskCanvas: HTMLCanvasElement, gridSize: number =3) {\n//     outlineCtx.clearRect(0, 0, $canvasSize[0], $canvasSize[1]);\n//     // First union the grid and mask\n//     if ($mainCanvas) {\n//         const smallCanvas:HTMLCanvasElement = document.createElement('canvas')\n//         const smallCtx = smallCanvas.getContext('2d')\n//         smallCanvas.width = Math.round($canvasSize[0] / gridSize)\n//         smallCanvas.height = Math.round($canvasSize[1] / gridSize)\n//         smallCtx.drawImage(\n//             $mainCanvas.getCanvas(),\n//             0, 0,\n//             $canvasSize[0],\n//             $canvasSize[1],\n//             0, 0,\n//             smallCanvas.width, \n//             smallCanvas.height, \n//         )\n//         const imageData = smallCtx.getImageData(0, 0, smallCanvas.width, smallCanvas.height)\n//         const data = imageData.data\n//         console.log(data.length);\n\n//         // ctx.fillStyle = \"white\";\n//         const numCols:number = Math.round($canvasSize[0] / gridSize)\n//         const numRows:number = Math.round($canvasSize[1] / gridSize)\n\n//         // for (let x = 0; x < $canvasSize[0]; x += 2 * gridSize) {\n//         console.time('draw grid')\n//         for (let row = 0; row < numRows; row += 1) {\n//             for (let col = 0; col < numCols; col += 1) {\n//                 if (row %2 != col%2) {\n//                     continue\n//                 }\n//                 outlineCtx.beginPath()\n//                 const x:number = col * gridSize\n//                 const y:number = row * gridSize\n//                 const i = 4 * ((row*numRows)+col)\n//                 const [r, g, b] = [data[i], data[i+1], data[i+2]]                    \n//                 const lumin = r*0.299 + g*0.587 + b*0.114\n//                 // outlineCtx.fillStyle = `rgb(${r}, ${g}, ${b})`\n//                 // outlineCtx.fillStyle = `rgb(${r}, ${g}, ${b})`\n//                 // outlineCtx.fillStyle = lumin > 186 ? 'black' : 'white'\n//                 // outlineCtx.fillStyle = lumin > 210 ? 'black' : 'white'\n//                 // outlineCtx.fillStyle = lumin > 210 ? 'lightgray' : 'darkgray'\n//                 outlineCtx.rect(x, y, gridSize, gridSize);\n//                 outlineCtx.fill();\n//             }\n//         }\n//         console.timeEnd('draw grid')\n//     }\n//     outlineCtx.globalCompositeOperation = \"destination-in\";\n//     outlineCtx.drawImage(maskCanvas, 0, 0);        \n//     // const gridCanvas = drawGrid(gridSize)[0]\n//     // outlineCtx.drawImage(gridCanvas, 0, 0);\n// }","<script lang=\"ts\">\n    import { onMount } from \"svelte\";\n    import { get } from \"svelte/store\";\n    import DrawCanvas from \"@/drawing/DrawCanvas.svelte\";\n    import { Mode } from \"@/types\";\n    import { isMobile, mode, selectedOptImage, zoom } from \"@/stores/ui\";\n    import {\n        mainCanvas,\n        maskCanvas,\n        canvasSize,\n    } from \"@/stores/canvases\";\n    import { drawCircle } from \"@/drawing/drawUtils\";\n    import { drawMaskGridAlpha, drawGrid } from \"@/maskDrawMethods\";\n    import { DEFAULT_IMAGE } from \"@/constants\";\n\n    let mouseover = false;\n    let cursorCanvas: HTMLCanvasElement;\n    let cursorCtx: CanvasRenderingContext2D;\n\n    let outlineCanvas: HTMLCanvasElement;\n    let outlineCtx: CanvasRenderingContext2D;\n    $: magicMaskFilter = drawGrid($canvasSize, 3);\n    $: outineLineWidth = $isMobile ? 2 : 1\n    $: if (!mouseover && cursorCtx) {\n        cursorCtx.clearRect(0, 0, $canvasSize[0], $canvasSize[1]);\n    }\n\n    function activeDrawCanvas(): DrawCanvas {\n        if ($mode == Mode.DirectDraw) {\n            return get(mainCanvas);\n        } else if ($mode == Mode.MaskDraw) {\n            return get(maskCanvas);\n        }\n    }\n\n    function onCanvasMouseMove(event) {\n        const [x, y] = [event.offsetX, event.offsetY];\n        cursorCtx.clearRect(0, 0, $canvasSize[0], $canvasSize[1]);\n        const canvas = activeDrawCanvas();\n        cursorCtx.lineWidth = 1;\n        cursorCtx.strokeStyle = \"white\";\n        if (canvas) {\n            // cursorCtx.fillStyle = canvas.strokeColor;\n            // drawCircle(cursorCtx, x, y, canvas.radius, true, true);\n            cursorCtx.strokeStyle = 'white';\n            cursorCtx.lineWidth = .5;\n            drawCircle(cursorCtx, x, y, canvas.radius+1, false, true);\n            cursorCtx.strokeStyle = 'black';\n            cursorCtx.lineWidth = .5;\n            drawCircle(cursorCtx, x, y, canvas.radius, false, true);\n        } else {\n            cursorCtx.fillStyle = \"black\";\n            drawCircle(cursorCtx, x, y, 2, true, true);\n        }\n    }\n\n    \n    function onMaskCanvasStroke(data) {\n        const { ctx, canvas } = data.detail;\n        drawMaskGridAlpha(\n            outlineCtx,\n            $canvasSize as [number, number],\n            canvas,\n            magicMaskFilter[0],\n            outineLineWidth\n        );\n    }\n\n    function onMaskCanvasChange(data) {\n        const { canvas, ctx } = data.detail;\n        drawMaskGridAlpha(\n            outlineCtx,\n            $canvasSize as [number, number],\n            canvas,\n            magicMaskFilter[0],\n            outineLineWidth\n        );\n    }\n    onMount(async () => {\n        $mainCanvas.strokeColor = \"#e66465\";\n        cursorCtx = cursorCanvas.getContext(\"2d\");\n        outlineCtx = outlineCanvas.getContext(\"2d\");\n\n        \n    });\n</script>\n<div\n    id=\"content\"\n    style=\"width:{$canvasSize[0]}px;height:{$canvasSize[1]}px\"\n    on:mousemove={onCanvasMouseMove}\n    on:mouseover={() => (mouseover = true)}\n    on:mouseout={() => (mouseover = false)}\n    on:focus={() => (mouseover = true)}\n    on:blur={() => (mouseover = false)}\n>\n    <div style=\"opacity:1;\">\n        <DrawCanvas\n            {canvasSize}\n            radius={20}\n            hardness={0.5}\n            style=\"image-rendering:{$zoom > 3 ? 'pixelated' : ''};\"\n            id=\"mainCanvas\"\n            defaultImageUrl={DEFAULT_IMAGE}\n            showCursor={false}\n            bind:this={$mainCanvas}\n        />\n    </div>\n    <div class:hidden={$mode == Mode.DirectDraw}>\n        <div style=\"opacity:0;\">\n            <DrawCanvas\n                radius={50}\n                hardness={0.2}\n                {canvasSize}\n                id=\"maskCanvas\"\n                maskFilter={magicMaskFilter[0]}\n                showCursor={false}\n                on:change={onMaskCanvasChange}\n                on:stroke={onMaskCanvasStroke}\n                bind:this={$maskCanvas}\n            />\n        </div>\n    </div>\n    <div class:hidden={$mode != Mode.MaskDraw}>\n        <canvas\n            id=\"outlineCanvas\"\n            class=\"hiddenOverlay\"\n            width={$canvasSize[0]}\n            height={$canvasSize[1]}\n            bind:this={outlineCanvas}\n        />\n    </div>\n    {#if $selectedOptImage}\n        <img\n            id=\"optPreview\"\n            class=\"hiddenOverlay\"\n            src={$selectedOptImage.src}\n            alt=\"\"\n        />\n    {/if}\n    <canvas\n        id=\"cursorCanvas\"\n        class=\"hiddenOverlay\"\n        width={$canvasSize[0]}\n        height={$canvasSize[1]}\n        bind:this={cursorCanvas}\n    />\n</div>\n\n\n<style>\n    #content {\n        display: flex;\n    }\n    .hiddenOverlay {\n        pointer-events: none;\n    }\n</style>","import { writable, derived, get } from 'svelte/store'\nimport { canvasSize } from '@/stores/canvases'\nimport { innerWidth, innerHeight, zoom } from '@/stores/ui'\nexport const viewer = writable(null as null | any)\n\nexport function fitImage() {\n    const $zoom = Math.min(1, Math.min(\n        get(innerWidth) / get(canvasSize)[0],\n        get(innerHeight) / get(canvasSize)[1]\n    ) * .85)        \n    zoom.set($zoom)\n    get(viewer).scrollCenter()\n}","// Live environments serve the client and server on different domains, so we need\n// a mapping.\nconst serverHostnameMappings = {\n  'prosepainter-client.test.morphogen.io': 'prosepainter-server.test.morphogen.io',\n  'prosepainter-client.staging.morphogen.io': 'prosepainter-server.staging.morphogen.io',\n  'prosepainter-client.grid.morphogen.io': 'prosepainter-server.grid.morphogen.io',\n  'prosepainter-client.grid-b.morphogen.io': 'prosepainter-server.grid-b.morphogen.io',\n  'www.prosepainter.com': 'prosepainter-server.grid.morphogen.io'\n}\n\nconst serverHostname = serverHostnameMappings[window.location.host] || window.location.host.replace(':8003', ':8004');\nconst proto = window.location.protocol === \"https:\" ? \"wss:\" : \"ws:\";\n\nconst apiURL = window.location.host.startsWith('localhost') ? 'http://localhost:8888' : 'https://www.artbreeder.com' \n\nexport default {\n  serverUrl: `${proto}//${serverHostname}/ws`,\n  apiURL: `${apiURL}/prosepainter`,\n  assetsUrl: 'https://prosepainter-public.b-cdn.net'\n};\n","import { writable, readable, get } from 'svelte/store'\nimport config from '../config'\n\nlet socket\nconst events = []\nexport const socketOpen = writable(false)\n\nlet userID = localStorage.getItem('userId')\nif (userID == null) {\n    userID = (Math.random() + 1).toString(36).slice(2)\n    localStorage.setItem('userId', userID)\n}\nconsole.log({ userID });\n\nfunction attemptConnect() {\n    if (get(socketOpen)) {\n        return\n    }\n    console.log('Attempting socket connection...');    \n    socket = new WebSocket(config.serverUrl)\n    socket.onerror = function(error) {\n        console.log('Socket error:', error)\n    };\n    socket.onopen = () => { \n        console.log('Websocket connected!');\n        socketOpen.set(true)\n        messageServer('set-id', userID)\n        for (const [name, callback] of events) {\n            console.log('registering event', name);\n            socket.addEventListener(name, callback) \n        }\n    }\n    socket.onclose = (closeEvent) => {\n        const reason = closeEvent.reason\n        console.log('Socket closed:', reason)\n        socketOpen.set(false)\n        setTimeout(attemptConnect, 3000)\n    }\n} \n\n\nexport function messageServer(topic:string, data:any) {\n    if (get(socketOpen)) {\n        socket.send(JSON.stringify({ topic, data }))\n    }\n}\nexport function addEventListener(name, callback) {\n    if (get(socketOpen)) {\n        socket.addEventListener(name, callback) \n    }\n    events.push([name, callback])\n}\n\nattemptConnect()\n\n\n  // // preserve the socket across HMR updates\n// if (import.meta.hot) {\n//     if (import.meta.hot.data.stores) {\n//         socket = import.meta.hot.data.socket\n//     }\n//     import.meta.hot.accept()\n//     import.meta.hot.dispose(() => {\n//         import.meta.hot.data.socket = socket\n//     })\n// }\n","import { Mode } from './types';\nimport { writable, get } from 'svelte/store'\nimport { addEventListener, messageServer } from \"@/lib/socket\";\nimport { prompt, mode, learningRate, optimizationResults, stylePrompt, numRecSteps, selectedOptIdx, selectedOptImage, userQueuePosition } from '@/stores/ui'\nimport { mainCanvas, maskCanvas } from '@/stores/canvases'\nimport { imgTob64 } from './utils';\nimport { recordOptimizationHistory } from '@/stores/drawHistory'\ninterface StartGenerationData {\n    prompt: string\n    stylePrompt: string,\n    imageBase64: string,\n    learningRate: number,\n    backgroundImg: string,\n    numRecSteps: number | null,\n    num_iterations?: number\n}\n\nfunction getGenerationData(): StartGenerationData {\n    return {\n        num_iterations: 30,\n        prompt: get(prompt),\n        stylePrompt: get(stylePrompt) ?? '',\n        learningRate: get(learningRate) / 1000,\n        imageBase64: get(maskCanvas).canvasBase64,\n        backgroundImg: get(mainCanvas).canvasBase64,\n        numRecSteps: get(numRecSteps),\n    }\n}\n\nfunction validateGenerationData(data: StartGenerationData) {\n    for (const [key, value] of Object.entries(data)) {\n        if (key == 'stylePrompt') {\n            continue\n        }\n        if (key == 'numRecSteps') {\n            continue\n        }\n        if (!value || value.length == 0) {\n            throw new Error(`Empty value for: ${key}.`)\n        }\n    }\n}\n\nfunction lastOptimizationResult(): HTMLImageElement {\n    const images = get(optimizationResults).images\n    return images[images.length]\n}\n\nexport const events: EventTarget = new EventTarget()\n\nexport function start() {\n    if (!get(maskCanvas).hasAnyVisiblePixels()) {\n        return alert('You must apply the prose-paint to the painting first!')\n    }    \n    const data = getGenerationData()\n    if (data.prompt.length == 0) {\n        return alert('You must enter a description!')\n    }\n    validateGenerationData(data)\n    messageServer('start-generation', data)\n    mode.set(Mode.Optimizing)\n}\n\nexport function discard() {\n    messageServer(\"stop-generation\", {})\n    optimizationResults.set(null)\n    mode.set(Mode.MaskDraw)\n}\n\nexport function accept() {\n    messageServer(\"stop-generation\", {})\n    get(mainCanvas).setImage(get(selectedOptImage))\n    optimizationResults.set(null)\n    mode.set(Mode.MaskDraw)\n    // setHasOptimized()\n    recordOptimizationHistory()\n    events.dispatchEvent(new CustomEvent('accepted', {}))\n}\n\n// export function upscale() {\n//     const data = getGenerationData()\n//     data.backgroundImg = imgTob64(get(lastOptimizationResult).image)\n//     validateGenerationData(data)\n//     messageServer('upscale-generation', data)\n//     mode.set(Mode.Optimizing)\n// }\n\nexport function pause() {\n    // TODO\n    // messageServer(\"pause-generation\", {})\n    messageServer(\"stop-generation\", {})\n    mode.set(Mode.PausedOptimizing)\n}\n\nexport function resume() {\n    // TODO\n    // messageServer(\"resume-generation\", {})\n    // like start() but use lastOptimizationResult instead of main canvas\n    const data = getGenerationData()\n    data.backgroundImg = imgTob64(lastOptimizationResult())\n    validateGenerationData(data)\n    messageServer('resume-generation', data)\n    mode.set(Mode.Optimizing)\n}\n\naddEventListener(\"message\", (e) => {\n    const message = JSON.parse(e.data) as { topic: string, data: any }\n    console.log(\"MESSAGE RECEIVED!\", message)\n    if (message.topic == \"queuePosition\") {\n        userQueuePosition.set(message.data.queuePosition as number)\n    } else if (message.topic == \"error\") {\n        alert(message.data)\n        mode.set(Mode.PausedOptimizing)\n    } else if (message.topic == 'jobProgress') {\n        if (get(mode) !== Mode.Optimizing) {\n            // If we get a message from the server after the user paused.\n            return\n        }\n        const { image, step, num_iterations } = message.data\n        if (image) {\n            console.log(\"IMAGE RECEIVED!\")\n            const newImage = new Image()\n            newImage.src = \"data:text/plain;base64,\" + image\n            optimizationResults.update(_optResults => ({\n                images: (_optResults ? _optResults.images : []).concat([newImage]),\n                num_iterations: num_iterations as number,\n            }))\n            if (step == num_iterations - 1) {\n                mode.set(Mode.PausedOptimizing)\n            }\n            selectedOptIdx.set(step)\n        } else {\n            console.log(\"NO IMAGE RECEIVED!\")\n        }\n    }\n});\n","<script lang=\"ts\">\n    export let name: string;\n    export let val: number;\n    export let min: number = 0;\n    export let max: number = 1;\n    export let step: number | string = \"any\";\n</script>\n\n<div class=\"slider-container\">\n    <!-- <p>{name}: {val}</p> -->\n    <div class=\"textbox\">\n        <p style=\"float:left\">{name}:</p>\n        <p style=\"float:right\">{val}</p>\n        <div style=\"clear: both;\"></div>\n    </div>\n    <input type=\"range\"  class=\"slider\" bind:value={val} {min} {max} {step} />\n</div>\n\n<style>\n    .slider-container {\n        width: 100%;\n    }\n    .textbox p {\n        margin-bottom: 0px !important;\n        font-size: 12px;\n        color: var(--gray-30);\n    }\n    .slider {\n        -webkit-appearance: none;\n        width: 100%;\n        height: 12px;\n        border-radius: 12px;\n        background: var(--gray-30);\n        outline: none;\n        cursor: pointer;\n    }\n\n    .slider::-webkit-slider-thumb {\n        -webkit-appearance: none;\n        appearance: none;\n        width: 24px;\n        height: 24px;\n        border-radius: 50%;\n        background-color: var(--green-30);\n        cursor: ew-resize;\n    }\n\n    .slider::-moz-range-thumb {\n        width: 24px;\n        height: 24px;\n        border-radius: 50%;\n        background-color: var(--green-30);\n        cursor: ew-resize;\n    }\n    .textbox {\n        user-select: none;\n    }\n    input[type='range'] {\n        margin:0px\n    }\n    /* p {\n        text\n    } */\n</style>\n","<script lang=\"ts\">\n    import type { ColorPalette } from '@/types'\n    export let classes: string = \"\";\n    export let disabled: boolean = false;\n    export let color: ColorPalette = \"gray-10\";\n    export let backgroundColor: ColorPalette = \"gray-50\";\n    export let style: string = \"\";\n    // export let width = \"32px\";\n    // export let height = width;\n</script>\n\n<button\n    on:mouseenter\n    on:mouseleave\n    on:click\n    class=\"round round-button {classes}\"\n    {disabled}\n    style=\"background-color: var(--{backgroundColor}); color: var(--{color}); {style}\"\n>\n    <slot />\n</button>\n\n<style>\n    button.green-button {\n        background-color: var(--green-40);\n        color: var(--gray-80);\n    }\n\n    button[disabled] {\n        cursor: initial;\n        color: var(--disabled-sort-button-color);\n    }\n\n    button.open {\n        background-color: var(--yellow-30);\n    }\n    button {\n        height: 32px;\n        position: relative;\n        display: flex;\n        align-items: center;\n        border-radius: 24px;\n        border: none;\n        padding-left: 8px;\n        padding-right: 8px;\n        /* text-align: center; */\n        justify-content: center;\n        /* margin-left: 4px; */\n        /* margin-right: 0; */\n        font-size: 16px;\n        /* color: var(--gray-10);\n        background-color: var(--gray-50); */\n\n        -webkit-user-select: none;  /* Chrome all / Safari all */\n        -moz-user-select: none;     /* Firefox all */\n        -ms-user-select: none;      /* IE 10+ */\n        user-select: none;  \n    }\n    @media only screen and (max-width: 900px) {\n        button {\n            height: 36px;\n            font-size: 18px;\n            font-weight: 200;\n            padding: 12px;\n        }\n    }\n</style>\n","<script lang=\"ts\">\n    import { mode, optimizationResults, selectedOptIdx } from \"@/stores/ui\";\n    import { Mode } from \"@/types\";\n    import * as optEvents from \"@/optimizeEvents\";\n    import Slider from \"@/components/Slider.svelte\";\n    import Button from \"@/components/Button.svelte\";\n    $: results = $optimizationResults;\n</script>\n\n{#if $mode == Mode.Optimizing}\n    <div class=\"outer\" style=\"color:var(--gray-20);\">\n        <div class=\"row\">\n            <Button on:click={() => optEvents.pause()}>\n                <p>Stop</p>\n            </Button>\n        </div>\n        <div class=\"row\">\n            {#if results}\n                <p>{results.images.length} / {results.num_iterations}</p>\n            {:else}\n                <p>Waiting to start...</p>\n            {/if}\n        </div>\n    </div>\n{:else if $mode == Mode.PausedOptimizing}\n    <div class=\"outer\">\n        <div class=\"row\">\n            <Button\n                style=\"flex-grow:1;margin-left:4px;\"\n                on:click={() => optEvents.discard()}\n            >\n                <p>Discard</p>\n            </Button>\n            <Button\n                style=\"flex-grow:1;margin-right:4px;\"\n                on:click={() => optEvents.accept()}\n            >\n                <p>Accept</p>\n            </Button>\n        </div>\n        <div class=\"row\">\n            {#if results}\n                <Slider\n                    name=\"step\"\n                    min={0}\n                    max={results.images.length - 1}\n                    step={1}\n                    bind:val={$selectedOptIdx}\n                />\n            {/if}\n        </div>\n    </div>\n{/if}\n\n<style>\n    .outer {\n        display: flex;\n        flex-direction: column;\n        flex-grow: 1;\n        justify-content: center;\n    }\n    .row {\n        flex-direction: row;\n        justify-content: center;\n        display: flex;\n        flex-grow: 1;\n    }\n</style>\n","<script lang=\"ts\">\n    import { Mode } from \"@/types\";\n    import { mode } from \"@/stores/ui\";\n    import { mainCanvas, maskCanvas } from \"@/stores/canvases\";\n    import Slider from \"@/components/Slider.svelte\";\n    import Button from \"../Button.svelte\";\n    export let upwards = false\n    $: activeCanvas = $mode == Mode.DirectDraw ? $mainCanvas : $maskCanvas;\n    let showBrushControls = false;    \n</script>\n<!-- <svelte:body on:click={() => (showBrushControls = false)} /> -->\n<div class=\"brush-preview-container\">\n    {#if showBrushControls}\n        <div class=\"controls\" class:upwards>\n            <img\n                class=\"brush-preview\"\n                src={activeCanvas.brushImageSrc}\n                alt=\"brush-preview\"\n            />\n            <Slider\n                name=\"Radius\"\n                bind:val={activeCanvas.radius}\n                min={1}\n                max={96}\n                step={1}\n            />\n            <Slider\n                name=\"Opacity\"\n                bind:val={activeCanvas.opacity}\n                min={0.0}\n                max={0.9}\n                step={0.05}\n            />\n            <Slider\n                name=\"Hardness\"\n                bind:val={activeCanvas.hardness}\n                max={1}\n                step={0.05}\n            />\n        </div>\n    {/if}\n    <Button style='' on:click={() => (showBrushControls = !showBrushControls)}>\n        \n        <p style='white-space: nowrap'> Brush Options </p>\n\n    </Button>\n</div>\n\n<style>\n    .brush-preview-container {\n        display: flex;\n        /* margin-right: 4px; */\n    }\n    .controls {\n        /* bottom: 96px; */\n        position:absolute;\n        /* width: 156px; */\n        background-color: var(--gray-90);\n        padding: 8px;\n        border-radius: 8px;\n        transform: translateY(38px);\n    }\n    .controls.upwards {\n        transform: translateY(-100%);\n    }\n    .brush-preview-container {\n        border-radius: 50%;\n    }\n    .brush-preview {\n        width: 48px;\n        height: 48px;\n        padding: 1px;\n        background-color: white;\n        /* padding: 4px; */\n    }\n    .brush-preview-container img {\n        border-radius: 50%;\n        cursor: pointer;\n        /* margin-right: 2px; */\n    }\n</style>\n","<script lang=\"ts\">\n    export let label: string\n    export let group: any\n    export let value: any\n    export let name: string\n    export let style = ''\n    export let justifyContent: 'center' | 'left' = 'center'\n\n    $: justifyContentClass = 'justify-content-' + justifyContent\n</script>\n\n<label class:selected={group === value} class={justifyContentClass} {style}>\n    <input type=radio bind:group {name} {value}>\n    {label}\n</label>\n\n<style>\nlabel {\n    height: 32px;\n    display: flex;\n    padding-left: 8px;\n    padding-right: 8px;\n    border-radius: 24px;\n    cursor: pointer;\n    align-items: center;\n    user-select: none;\n    white-space: nowrap;\n    color: var(--gray-80);\n}\n\ninput[type=\"radio\"] {\n  /* Add if not using autoprefixer */\n  -webkit-appearance: none;\n  appearance: none;\n  display: none;\n  /* For iOS < 15 to remove gradient background */\n  background-color: #fff;\n  /* Not removed via appearance */\n  margin: 0;\n}\n\nlabel:not(.selected) {\n    color: var(--gray-10);\n}\n\nlabel.selected {\n    background-color: var(--gray-10);\n}\n\n.justify-content-left {\n    justify-content: left;\n}\n\n.justify-content-center {\n    justify-content: center;\n}\n</style>","<script lang=\"ts\">\nimport { onMount } from 'svelte'\n// import autoresize from 'node_modules/autosize/dist/autosize'\nexport let style = ''\nexport let placeholder = 'search'\nexport let focusOnMount = false\nexport let value = ''\nlet input: HTMLTextAreaElement\n$: value = value.replace(/(\\r\\n|\\n|\\r)/gm, \"\").replace(/[^a-zA-Z .-]/g, \"\")\n\nonMount(() => {\n    // @ts-expect-error\n    autosize(input)\n})\n// onMount(maybeFocusOnMount)\n\n// function maybeFocusOnMount() {\n//     if (focusOnMount) {\n//         input.focus()\n//     }\n// }\n</script>\n<!-- \n<input\n    type=\"search\"\n    {placeholder}\n    {style}\n    bind:this={input}\n    bind:value\n/> -->\n\n<textarea rows=\"2\" bind:this={input} {style} {placeholder} bind:value />\n\n<style>\ntextarea {\n    border-radius: 16px;\n    border: none;\n    height: 32px;\n    line-height: 28px;\n    text-indent: 8px;\n    font-size: 16px;\n    resize: none;\n}\n\ntextarea::placeholder {\n    /* Chrome, Firefox, Opera, Safari 10.1+ */\n    color: var(--gray-50);\n    opacity: 1; /* Firefox */\n    text-transform: lowercase;\n    font-size: 16px;\n}\n\ntextarea::-ms-input-placeholder {\n    /* Microsoft Edge */\n    color: var(--gray-50);\n}\n\n/* clears the 'X' from Internet Explorer */\ntextarea::-ms-clear {\n    display: none;\n    width: 0;\n    height: 0;\n}\ntextarea::-ms-reveal {\n    display: none;\n    width: 0;\n    height: 0;\n}\n\n/* clears the 'X' from Chrome */\ntextarea::-webkit-search-decoration,\ntextarea::-webkit-search-cancel-button,\ntextarea::-webkit-search-results-button,\ntextarea::-webkit-search-results-decoration {\n    display: none;\n}\n</style>\n","<script lang=\"ts\">\n    import PillRadioButton from \"@/components/PillRadioButton.svelte\";\n    export let options:{value:any, label:string}[]\n    export let value:any\n    export let style:string =''\n</script>\n\n<div class=\"select-mode\" {style}>\n    {#each options as opt}\n        <PillRadioButton\n            label={opt.label}\n            style=\"flex-grow: 1;\"\n            value={opt.value}\n            bind:group={value}\n            name=\"mode\"\n        />\n    {/each}\n</div>\n\n<style>\n    .select-mode {\n        background-color: var(--gray-50);\n        border-radius: 24px;\n        height: 32px;\n        display: flex;\n        align-items: center;\n        flex-direction: row;\n    }\n</style>","<script lang=\"ts\">\n    import PillRadioButton from \"@/components/PillRadioButton.svelte\";\n    import SearchInput from \"@/components/SearchInput.svelte\";\n    import { Mode } from \"@/types\";\n    import { isMobile, mode, prompt } from \"@/stores/ui\";\n    import { mainCanvas, maskCanvas } from \"@/stores/canvases\";\n    // import Slider from \"@/components/Slider.svelte\";\n    import * as optEvents from \"@/optimizeEvents\";\n    // import OptimizeOptions from \"./bottomControls/OptimizeOptions.svelte\";\n    import Button from \"@/components/Button.svelte\";\n    import BrushPreview from \"@/components/bottomControls/BrushPreview.svelte\";\n    import Toggle from \"@/components/Toggle.svelte\";\n</script>\n\n<div id=\"draw-mask-content\" class:isMobile={$isMobile}>\n    <div class=\"row\">\n        <SearchInput\n            bind:value={$prompt}\n            placeholder=\"What would you like to paint?\"\n            style=\"display: flex;flex-grow: 1;width:100%';max-width:400px\"\n            focusOnMount={false}\n        />\n    </div>\n    <div class=\"row buttons\">\n        <BrushPreview upwards={$isMobile} />\n        <Button style=\"\" on:click={() => $maskCanvas?.clear()}>Clear</Button>\n        <Button style=\"\" on:click={() => $maskCanvas?.fill()}>All</Button>\n        {#if $isMobile}\n            <Button\n                backgroundColor={$maskCanvas.erasing ? \"green-40\" : \"gray-50\"}\n                on:click={() => ($maskCanvas.erasing = !$maskCanvas.erasing)}\n            >\n                <img style=\"width:18px\" src=\"/images/eraser.png\" alt=\"erase-mask\" />\n            </Button>\n        {:else}\n            <Toggle\n                style=\"\"\n                options={[\n                    { label: \"Paint\", value: false },\n                    { label: \"Erase\", value: true },\n                ]}\n                bind:value={$maskCanvas.erasing}\n            />\n        {/if}\n\n        {#if !$isMobile}\n            <Button\n                backgroundColor={\"green-40\"}\n                color={\"gray-90\"}\n                on:click={() => optEvents.start()}>Start</Button\n            >\n        {/if}\n    </div>\n</div>\n\n<style>\n    #draw-mask-content {\n        display: flex;\n        width: 100%;\n    }\n    #draw-mask-content.isMobile {\n        flex-direction: column-reverse;\n        width: 100%;\n    }\n    #draw-mask-content.isMobile .row {\n        justify-content: center;\n    }\n    .row {\n        display: contents;\n    }\n    .isMobile .row {\n        display: flex;\n        /* margin: 4px; */\n    }\n    .isMobile .row.buttons {\n        overflow-x: scroll;\n    }\n    :global(.row > *) {\n        margin: 4px;\n    }\n</style>\n","export default \"__VITE_ASSET__891da901__\"","<script lang=\"ts\">\n    export let show = false;\n    import { isMobile } from \"@/stores/ui\";\n    import closeURL from \"@/assets/x.svg\";\n\n    function closeModalIfEscape(event: KeyboardEvent) {\n        if (event.key === \"Escape\") {\n            show = false;\n        }\n    }\n    function open() {\n        console.log('opening modal');\n        show = true\n    }\n    \n</script>\n\n<slot name=\"trigger\" {open} />\n<svelte:body on:keydown={closeModalIfEscape} />\n\n{#if show}\n    <div class=\"modal-background\" on:click|self={() => (show = false)}>\n        <div class=\"modal-content\" class:isMobile={$isMobile}>\n            <div class=\"header-container\">\n                <img class=\"close-button\" style='visibility:hidden' src={closeURL} alt=''/>\n                <div class=\"header-container-inner\">\n                    <slot name=\"header\" />\n                </div>\n                <img\n                    class=\"close-button\"\n                    src={closeURL}\n                    alt=\"close\"\n                    on:click={() => (show = false)}\n                />\n            </div>\n            <slot name=\"body\"  style=\"width:100%\" />\n        </div>\n    </div>\n{/if}\n\n<style>\n    .modal-background {\n        position: fixed;\n        z-index: 99;\n        top: 0px;\n        left: 0px;\n        width: 100vw;\n        height: 100vh;\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        background-color: rgba(169, 169, 169, 0.336);\n        backdrop-filter: blur(2px);\n        cursor: pointer;\n    }\n    .modal-content {\n        width: 512px;\n        min-height: 256px;\n        max-width: 80%;\n        background-color: var(--gray-0);\n        cursor: default;\n        border: 1px solid #ccc;\n        padding-left: 30px;\n        padding-right: 30px;\n        padding-bottom: 30px;\n        z-index: 9;\n    }\n    .modal-content.isMobile {\n        width: 100vh;\n        max-width: 100vh;\n        height: 100vh;\n    }\n    .header-container {\n        display: flex;\n        /* justify-content: center; */\n    }\n    .header-container-inner {\n        display: flex;\n        flex-grow: 1;\n        text-align: center;\n        width: 100%;\n        justify-content: center;\n    }\n    .close-button {\n        cursor: pointer;\n        margin: 8px\n    }\n</style>\n","<script lang=\"ts\">\n    import { onMount } from \"svelte\";\n    import Button from \"./Button.svelte\";\n    import Modal from \"./Modal.svelte\";\n    import { createEventDispatcher } from 'svelte'\n    export let show = false;\n\n    const dispatch = createEventDispatcher();\n\n    // export let toggle\n    export function toggle() {\n        show = !show;\n    }\n    onMount(() => {\n        const hasOpened = localStorage.getItem(\"hasOpened\");\n        if (hasOpened == null) {\n            show = true;\n            localStorage.setItem(\"hasOpened\", \"1\");\n        }\n    });\n</script>\n\n<Modal bind:show>\n    <div slot=\"header\">\n        <h1>ProsePainter<span class='beta'> BETA</span></h1>\n    </div>\n    <div slot=\"body\">\n        <p> An interactive tool to \"paint with words.\" It incorporates guidable text-to-image generation into a traditional digital painting interface.</p>\n        <!-- <p>\n            ProsePainter is a new way to digitally paint! You create 'magic-ink'\n            from any word or sentence and apply it to an image.\n        </p>\n        <hr />\n        <p>\n            The magic-ink transforms images where it is applied, use it to\n            modify an image or to create one from sketches.\n        </p>\n        <p style=\"margin-bottom:0px;\">\n            Example: applying the ink <i>\"colorful flowers\"</i>.\n        </p> -->\n        \n        <div class=\"image-container\">\n            <div>\n                <p>Start Image</p>\n                <img src=\"/images/modal/before.jpg\" alt=''/>\n            </div>\n            <div>\n                <p>Ink Mask</p>\n                <img src=\"/images/modal/mask.jpg\" alt=''/>\n            </div>\n            <div>\n                <p>Result</p>\n                <img src=\"/images/modal/after.jpg\" alt=''/>\n            </div>\n        </div>\n        <!-- <p>1. First, select a staring image or upload your own.</p>\n            <p>2. Try creating </p> -->\n        <!-- <video url=''></video> -->\n        <!-- <p /> -->\n        <br />\n        <!-- <hr /> -->\n        <div style='display:flex;align-items:center;flex-direction:column;'>\n        <Button style='width:60%' on:click={() => {\n            dispatch('tryit')\n            show = false\n        }}>\n            Try it out\n        </Button>\n        <br>\n        <Button style='width:60%' on:click={() => window.location.href = '/gallery'}>\n            Browse Gallery\n            <!-- <a href='/gallery'> </a> -->\n            \n        </Button>\n    </div>\n        <p>\n            ProsePainter is made by\n            <a href=\"https://www.morphogen.io/\">Morphogen</a>, the creators of\n            <a href=\"https://artbreeder.com/\">Artbreeder</a>\n        </p>\n        <!-- <p>\n            ProsePainter is made by\n            <a href=\"https://www.morphogen.io/\">Morphogen</a>, the creators of\n            <a href=\"https://artbreeder.com/\">Artbreeder</a>. It is powered by\n            machine-learning and is\n            <a href=\"https://github.com/Morphogens/prosepainter\">open sourced</a\n            >.\n        </p> -->\n    </div>\n</Modal>\n\n<style>\n    h1 {\n        font-weight: 400;\n    }\n    h1,\n    p {\n        text-align: center;\n    }\n    a {\n        color: black;\n    }\n    /* button > a {\n        color: white;\n        text-decoration: none;\n    } */\n    span.beta {\n        font-size: 12px;\n        color: var(--red-40);\n        transform: translateY(-75%);\n        display: inline-block;\n    }\n    .image-container {\n        display: flex;\n        justify-content: center;\n    }\n    .image-container > * {\n        display: flex;\n        flex-direction: column;\n        width: 33%;\n    }\n    .image-container img {\n        width: 100%;\n    }\n    .image-container p {\n        font-weight: bold;\n    }\n</style>\n","<script lang=\"ts\">\n    import Modal from \"./Modal.svelte\";\n    import { MAX_IMAGE_SIZE, DEFAULT_IMAGES } from \"@/constants\";\n    import { setImageByFile, setImageByURL, setEmpty } from \"@/stores/canvases\";\n    import Button from \"./Button.svelte\";\n    import { isMobile } from \"@/stores/ui\";\n\n    export let show = false;\n    export function toggle() {\n        show = !show;\n    }\n    let width: number = 512;\n    let height: number = 512;\n    $: width = Math.min(width, MAX_IMAGE_SIZE);\n    $: height = Math.min(height, MAX_IMAGE_SIZE);\n    async function onFiles(event) {\n        const { files } = event.target;\n        if (files.length && files[0].type.startsWith(\"image\")) {\n            setImageByFile(files[0]);\n        }\n        show = false;\n    }\n</script>\n\n<Modal bind:show>\n    <div slot=\"header\">\n        <h2>New Painting</h2>\n    </div>\n    <div slot=\"body\" class=\"create-content\">\n        \n        <p>Start with your own image...</p>\n        <label class=\"custom-file-upload\">\n            <input type=\"file\" accept=\".jpg, .jpeg, .png\" on:change={onFiles} />\n            Upload Image\n        </label>\n        <p>...a sample image...</p>\n\n        <div class=\"template-images\">\n            {#each DEFAULT_IMAGES as imageUrl}\n                <img\n                    src={imageUrl}\n                    draggable=\"false\"\n                    on:click={() => {\n                        setImageByURL(imageUrl);\n                        show = false;\n                    }}\n                    alt=\"\"\n                />\n            {/each}\n        </div>\n        <p>...or a blank canvas...</p>\n        {#if $isMobile}\n            <div class=\"template-images\">\n                <div\n                    class=\"square empty-image\"\n                    on:click={() => {\n                        setEmpty(512, 512);\n                        show = false;\n                    }}\n                />\n                <div\n                    class=\"landscape empty-image\"\n                    on:click={() => {\n                        setEmpty(768, 512);\n                        show = false;\n                    }}\n                />\n                <div\n                    class=\"portrait empty-image\"\n                    on:click={() => {\n                        setEmpty(512, 768);\n                        show = false;\n                    }}\n                />\n            </div>\n        {:else}\n            <div id=\"number-container\">\n                <input type=\"number\" min=\"128\" max=\"1024\" bind:value={width} />\n                <p>x</p>\n                <input type=\"number\" min=\"128\" max=\"1024\" bind:value={height} />\n            </div>\n            <Button\n                style=\"width:150px;max-width:100%;\"\n                on:click={() => {\n                    setEmpty(width, height);\n                    show = false;\n                }}\n            >\n                Create</Button\n            >\n        {/if}\n    </div>\n</Modal>\n\n<style>\n    h2 {\n        font-weight: 300;\n    }\n    .create-content {\n        display: flex;\n        justify-content: center;\n        flex-direction: column;\n        align-items: center;\n    }\n    p,\n    label {\n        text-align: center;\n    }\n    #number-container {\n        display: flex;\n        justify-content: center;\n    }\n    input[type=\"number\"] {\n        width: 50px;\n        display: inline-block;\n        margin: 4px;\n    }\n    .template-images {\n        display: flex;\n        flex-wrap: wrap;\n        align-items: center;\n    }\n    .template-images img {\n        width: 25%;\n        cursor: pointer;\n    }\n    @media screen and (max-width: 720px) {\n        .template-images img {\n            width: 33%;\n        }\n    }\n\n    input[type=\"file\"] {\n        display: none;\n    }\n    .custom-file-upload {\n        cursor: pointer;\n        width: 150px;\n        max-width: 100%;\n        height: 32px;\n        position: relative;\n        display: flex;\n        align-items: center;\n        border-radius: 24px;\n        border: none;\n        padding-left: 8px;\n        padding-right: 8px;\n        justify-content: center;\n        margin-right: 0;\n        font-size: 16px;\n        color: var(--gray-10);\n        background-color: var(--gray-50);\n    }\n    .empty-image {\n        background-color: white;\n        border: 1px solid black;\n        width: 64px;\n        height: 64px;\n        margin: 8px;\n        cursor: pointer;\n    }\n    .empty-image.landscape {\n        height: 50px;\n        width: 75px;\n    }\n    .empty-image.portrait {\n        width: 50px;\n        height: 75px;\n    }\n    /* .square */\n</style>\n","import axios from 'axios'\n\nexport async function postJSON(url: string, data: any): Promise<any> {\n    return await axios.post(url, data).then((r) => r.data)\n}\n\nexport async function post(url: string, data:any = {}): Promise<any> {\n    return await axios.post(url, data)\n}","<script lang=\"ts\">\n    // import type { GalleryExport } from \"@/types\";\n    import { onMount } from \"svelte\";\n    import Modal from \"./Modal.svelte\";\n    import { downloadCanvas, downloadJSON } from \"@/utils\";\n    import { exportBeforeAfter, drawHistoryStore } from \"@/stores/drawHistory\";\n    import { mainCanvas, activeCanvas } from \"@/stores/canvases\";\n    import { postJSON } from \"@/utils/network\";\n    import config from \"@/config\";\n    import { get } from \"svelte/store\";\n    export let show = false;\n    export function toggle() {\n        show = !show;\n    }\n    // let artworkName = ''\n    // let artistName = ''\n\n    // Return masks accounting for stale localStorage which may have a null value\n    function getMasks() {\n        return $drawHistoryStore.masks || [];\n    }\n\n    let beforeAfter: HTMLCanvasElement | null = null;\n    $: if (show == true && getMasks().length > 0) {\n        exportBeforeAfter().then((_beforeAfter) => {\n            beforeAfter = _beforeAfter;\n        });\n    }\n    $: if (getMasks().length == 0) {\n        beforeAfter = null;\n    }\n\n    function dec2hex(dec: number): string {\n        return dec.toString(16).padStart(2, \"0\");\n    }\n    export function randomId(len: number = 20): string {\n        const arr = new Uint8Array(len / 2);\n        window.crypto.getRandomValues(arr);\n        return Array.from(arr, dec2hex).join(\"\");\n    }\n\n    async function exportForGallery() {\n        const artistName = prompt(\"Enter your name for submission\");\n        const imageBase64 = $mainCanvas\n            .getCanvas()\n            .toDataURL(\"image/jpeg\", 0.9);\n        await postJSON(`${config.apiURL}/submit_artwork`, {\n            artistName,\n            imageBase64,\n            masks: getMasks(),\n        });\n        alert(\"Submitted!\");\n        // show = false;\n    }\n</script>\n\n<Modal bind:show>\n    <div class=\"select-image-modal-trigger\" slot=\"trigger\" let:open>\n        <slot name=\"trigger\" {open} />\n    </div>\n    <div class=\"content\" slot=\"body\">\n        <button\n            on:click={() =>\n                downloadCanvas(\n                    get(mainCanvas).getCanvas(),\n                    \"prosepainter-image.png\"\n                )}\n        >\n            <p>Download Image</p>\n        </button>\n\n        {#if getMasks().length}\n            <button on:click={exportForGallery}>\n                <p>Share to Gallery</p>\n            </button>\n            <!-- <form on:submit|preventDefault={exportForGallery}>\n                <p>Share to Gallery</p>\n                <input\n                    on:keypress={(e) => /[A-Za-z0-9 _-]/i.test(e.key)}\n                    bind:value={artworkName}\n                    placeholder=\"artwork name\"\n                    type=\"text\"\n                    minlength={4}\n                    required={true}\n                />\n                <input\n                    on:keypress={(e) => /[A-Za-z0-9 _-]/i.test(e.key)}\n                    bind:value={artistName}\n                    minlength={4}\n                    placeholder=\"artist name\"\n                    required={true}\n                    type=\"text\"\n                />\n                <input type=\"submit\" value=\"Submit\">\n            </form> -->\n        {/if}\n\n        {#if beforeAfter}\n            <button\n                id=\"downloadBeforeAfterButton\"\n                on:click={async (e) =>\n                    downloadCanvas(beforeAfter, \"before-after-prose.jpg\")}\n            >\n                <p>Download Before & After</p>\n                <img\n                    id=\"beforeafterimg\"\n                    src={beforeAfter.toDataURL()}\n                    alt=\"before&after\"\n                />\n            </button>\n        {/if}\n    </div>\n</Modal>\n\n<style>\n    button {\n        margin: 8px;\n    }\n    form {\n        margin: 8px;\n        text-align: center;\n    }\n    .content {\n        display: flex;\n        flex-direction: column;\n    }\n    #beforeafterimg {\n        max-width: 80%;\n    }\n</style>\n","export default \"__VITE_ASSET__223082ee__\"","export default \"__VITE_ASSET__ff02eb2d__\"","export default \"__VITE_ASSET__45df3860__\"","export default \"__VITE_ASSET__6b535c54__\"","export default \"__VITE_ASSET__ac0323ab__\"","<script lang=\"ts\">\n    import InfoModal from \"@/components/InfoModal.svelte\";\n    import CreateModal from \"@/components/CreateModal.svelte\";\n\n    import downloadUrl from \"@/assets/download.svg\";\n    import zoomInURL from \"@/assets/zoom-in.svg\";\n    import zoomOutURL from \"@/assets/zoom-out.svg\";\n    import fitImageURL from \"@/assets/minimize.svg\";\n    import undoURL from \"@/assets/icon-undo.svg\";\n    import redoURL from \"@/assets/icon-redo.svg\";\n    import createURL from \"@/assets/plus.svg\";\n    import backURL from \"@/assets/arrow-left.svg\";\n    import infoURL from \"@/assets/info.svg\";\n    // import beforeAfterUrl from \"@/assets/before-after.svg\";\n    // import { downloadCanvas } from \"@/utils\";\n    // import { exportImage, drawHistoryStore } from \"@/stores/drawHistory\";\n    import { mainCanvas, activeCanvas } from \"@/stores/canvases\";\n    import { zoom } from \"@/stores/ui\";\n    import { Mode } from \"@/types\";\n    import { mode, isMobile } from \"@/stores/ui\";\n    import { fitImage } from \"@/stores/viewer\";\n    import Button from \"./Button.svelte\";\n    import * as optEvents from \"@/optimizeEvents\";\n    import DownloadModal from \"./DownloadModal.svelte\";\n\n    // import Toggle from \"./Toggle.svelte\";\n    export let type:\n        | \"info\"\n        | \"create\"\n        | \"download\"\n        | \"zoom\"\n        | \"undo\"\n        | \"home\"\n        | \"start\";\n    export let style = \"\";\n    let infoModal: InfoModal;\n    let createModal: CreateModal;\n    let showCreate = false\n</script>\n\n<svelte:body class:isMobile={$isMobile} />\n<InfoModal bind:this={infoModal} on:tryit={() => showCreate=true}/>\n<CreateModal bind:this={createModal} bind:show={showCreate}/>\n{#if type == \"create\"}\n    <button {style} on:click={() => createModal.toggle()}>\n        <img src={createURL} alt=\"add\" />\n    </button>\n{:else if type == \"info\"}\n    <button on:click={() => infoModal.toggle()} style=\"padding:4px;\">\n        <img src={infoURL} alt=\"info\" />\n    </button>\n{:else if type == \"home\"}\n    <button {style} on:click={() => ($mode = Mode.MobileHomeScreen)}>\n        <img src={backURL} alt=\"back\" />\n    </button>\n{:else if type == \"start\"}\n    <Button\n        style=\"margin:4px;font-size:20px;\"\n        backgroundColor={\"green-40\"}\n        color={\"gray-90\"}\n        on:click={() => optEvents.start()}>Start</Button\n    >\n{:else if type == \"download\"}\n    <DownloadModal let:open >\n        <div slot=\"trigger\">\n            <button {style} on:click={open}>\n                <img src={downloadUrl} alt=\"download\" />\n            </button>\n        </div>\n    </DownloadModal>\n{:else if type == \"undo\"}\n    <button\n        {style}\n        on:click={(e) => $activeCanvas.undo()}\n        class=\"left-group-button\"\n    >\n        <img src={undoURL} alt=\"undo\" />\n    </button>\n    <button\n        {style}\n        on:click={(e) => $activeCanvas.redo()}\n        class=\"right-group-button\"\n    >\n        <img src={redoURL} alt=\"redo\" />\n    </button>\n{:else if type == \"zoom\"}\n    <button {style} on:click={(e) => ($zoom *= 0.8)} class='left-group-button'>\n        <img src={zoomOutURL} alt=\"zoom-out\" />\n    </button>\n    <button {style} on:click={(e) => ($zoom *= 1.2)} class='center-group-button'>\n        <img src={zoomInURL} alt=\"zoom-in\" />\n    </button>\n    <button {style} on:click={(e) => fitImage()} class='right-group-button'>\n        <img src={fitImageURL} alt=\"fit\" />\n    </button>\n{/if}\n\n<!--         \n            <button\n                id=\"downloadBeforeAfterButton\"\n                on:click={async (e) =>\n                    downloadCanvas(\n                        await exportImage(),\n                        \"before-after-prose.jpg\"\n                    )}\n            >\n                <img src={beforeAfterUrl} alt=\"download\" />\n            </button>\n        \n       \n        \n    </div>\n</div> -->\n<style>\n    button img {\n        width: 100%;\n        height: 100%;\n    }\n    /* #zoom-buttons {\n        display: flex;\n        flex-direction: column;\n    } */\n    button {\n        background-color: var(--gray-20);\n        border-radius: 50%;\n        width: 36px;\n        height: 36px;\n        margin: 4px;\n        padding: 8px;\n        border: none;\n    }\n    .left-group-button {\n        margin-right: 0px;\n        border-top-right-radius: 0px;\n        border-bottom-right-radius: 0px;\n    }\n    .right-group-button {\n        margin-left: 0px;\n        border-top-left-radius: 0px;\n        border-bottom-left-radius: 0px;\n    }\n    .center-group-button {\n        margin-left: 0px;\n        margin-right: 0px;\n        border-radius: 0px;\n    }\n    @media only screen and (max-width: 900px) {\n        button {\n            width: 36px;\n            height: 36px;\n        }\n    }\n</style>\n","export default \"__VITE_ASSET__0f365f85__\"","export default \"__VITE_ASSET__8fb17d58__\"","export default \"__VITE_ASSET__bbdd3b2a__\"","export default \"__VITE_ASSET__236b3aeb__\"","<script lang=\"ts\">\n    import { Mode } from \"@/types\";\n    import { isMobile, mode } from \"@/stores/ui\";\n    import { mainCanvas, maskCanvas } from \"@/stores/canvases\";\n    import OptimizeOptions from \"./bottomControls/OptimizeOptions.svelte\";\n    import Button from \"./Button.svelte\";\n    import BrushPreview from \"./bottomControls/BrushPreview.svelte\";\n    // import Toggle from \"@/components/Toggle.svelte\";\n    import MaskDrawControls from \"@/components/bottomControls/MaskDrawControls.svelte\";\n    import ProseButton from \"./ProseButton.svelte\";\n</script>\n\n{#if $mainCanvas && $maskCanvas}\n    <div class=\"outer-container\" class:isMobile={$isMobile}>\n        <div class=\"left\">\n            <ProseButton type=\"create\" />\n        </div>\n        <div class=\"center\">\n            <div\n                class=\"content-bar\"\n                class:maskDraw={$mode == Mode.MaskDraw}\n                style=\"flex-grow:{$mode == Mode.MaskDraw ? '1' : '0'}\"\n            >\n                {#if $mode == Mode.MaskDraw}\n                    <MaskDrawControls />\n                {:else if $mode == Mode.Optimizing || $mode == Mode.PausedOptimizing}\n                    <OptimizeOptions />\n                {:else if $mode == Mode.DirectDraw}\n                    <div style=\"margin:4px\">\n                        <input\n                            type=\"color\"\n                            bind:value={$mainCanvas.strokeColor}\n                        />\n                    </div>\n                    <div style=\"margin:4px\">\n                        <BrushPreview />\n                    </div>\n                {:else if $mode == Mode.MobileHomeScreen}\n                    <div class=\"row\">\n                        <Button on:click={() => ($mode = Mode.DirectDraw)}\n                            >Sketch</Button\n                        >\n                        <Button on:click={() => ($mode = Mode.MaskDraw)}\n                            >ProsePaint</Button\n                        >\n                    </div>\n                {/if}\n            </div>\n            {#if $mode == Mode.MaskDraw}\n                <Button\n                    style=\"margin-left:4px\"\n                    on:click={() => ($mode = Mode.DirectDraw)}>Sketch</Button\n                >\n            {:else if $mode == Mode.DirectDraw}\n                <Button\n                    style=\"margin-left:4px\"\n                    on:click={() => ($mode = Mode.MaskDraw)}>ProsePaint</Button\n                >\n            {/if}\n        </div>\n        <div class=\"right\">\n            <ProseButton type=\"info\" />\n        </div>\n    </div>\n{/if}\n\n<style>\n    .outer-container {\n        position: fixed;\n        width: 100vw;\n        z-index: 1;\n        display: flex;\n        /* align-items: center; */\n        /* justify-content: center; */\n        pointer-events: none;\n        top: 8px;\n    }\n    .outer-container .left {\n        display: flex;\n        flex-grow: 0;\n        flex-shrink: 1;\n        justify-content: flex-start;\n    }\n    .outer-container .center {\n        display: flex;\n        flex-grow: 1;\n        flex-shrink: 0;\n        align-items: center;\n        justify-content: center;\n    }\n    .outer-container .right {\n        display: flex;\n        flex-grow: 0;\n        flex-shrink: 1;\n        justify-content: end;\n    }\n    .outer-container.isMobile {\n        bottom: 8px;\n        top: auto;\n    }\n    :global(.outer-container > *) {\n        pointer-events: all;\n        margin-left: 4px;\n        margin-right: 4px;\n    }\n    .content-bar {\n        background-color: var(--gray-90);\n        border-radius: 24px;\n        padding: 4px;\n        display: flex;\n        position: relative;\n        max-width: 800px;\n    }\n    .outer-container.isMobile .content-bar {\n        /* width: 100%;\n        max-width: 100%; */\n        background-color: inherit;\n        justify-content: center;\n    }\n    /* :global(.content-bar > *) {\n        margin: 4px;\n    } */\n    .row {\n        flex-direction: row;\n        display: flex;\n        flex-grow: 1;\n        justify-content: center;\n    }\n\n    /* .select-mode {\n        background-color: var(--gray-50);\n        border-radius: 24px;\n        height: 32px;\n        display: flex;\n        align-items: center;\n        flex-direction: row;\n    } */\n\n    input[type=\"color\"] {\n        cursor: pointer;\n        display: flex;\n        /* visibility: hidden; */\n        /* position: absolute; */\n        height: 32px;\n        /* width: 80%; */\n        width: 150px;\n        flex-shrink: 0;\n    }\n\n    /* .drop-up {\n        position: absolute;\n        bottom: 48px;\n        border-radius: 24px;\n        padding: 8px;\n        left: 50%;\n        transform: translateX(-50%);\n    } */\n</style>\n","<script lang=\"ts\">\n    import { Mode } from \"@/types\";\n    import { isMobile, mode } from \"@/stores/ui\";\n    import { mainCanvas, maskCanvas } from \"@/stores/canvases\";\n    import OptimizeOptions from \"./bottomControls/OptimizeOptions.svelte\";\n    import Button from \"./Button.svelte\";\n    import BrushPreview from \"./bottomControls/BrushPreview.svelte\";\n    import MaskDrawControls from \"@/components/bottomControls/MaskDrawControls.svelte\";\n</script>\n\n{#if $mainCanvas && $maskCanvas}\n    <div class=\"outer-container\" class:isMobile={$isMobile}>\n        <div class=\"content-bar\" class:maskDraw={$mode == Mode.MaskDraw}>\n            {#if $mode == Mode.MaskDraw}\n                <MaskDrawControls />\n            {:else if $mode == Mode.Optimizing || $mode == Mode.PausedOptimizing}\n                <OptimizeOptions />\n            {:else if $mode == Mode.DirectDraw}\n                <div style=\"margin:4px\">\n                    <input type=\"color\" bind:value={$mainCanvas.strokeColor} />\n                </div>\n                <div style=\"margin:4px\">\n                    <BrushPreview />\n                </div>\n            {:else if $mode == Mode.MobileHomeScreen}\n                <div class=\"row\">\n                    <Button on:click={() => ($mode = Mode.DirectDraw)}\n                        >Sketch</Button\n                    >\n                    <Button on:click={() => ($mode = Mode.MaskDraw)}\n                        >ProsePaint</Button\n                    >\n                </div>\n            {/if}\n        </div>\n    </div>\n{/if}\n\n<style>\n    .outer-container {\n        position: fixed;\n        width: 100vw;\n        z-index: 1;\n        display: flex;\n        pointer-events: none;\n        top: 8px;\n        justify-content: center;\n    }\n    .outer-container.isMobile {\n        bottom: 8px;\n        top: auto;\n    }\n    :global(.outer-container > *) {\n        pointer-events: all;\n        margin-left: 4px;\n        margin-right: 4px;\n    }\n    .content-bar {\n        background-color: var(--gray-90);\n        border-radius: 24px;\n        padding: 4px;\n        display: flex;\n        position: relative;\n        width: 100%;\n    }\n    .outer-container.isMobile .content-bar {\n        background-color: inherit;\n        justify-content: center;\n    }\n    .row {\n        flex-direction: row;\n        display: flex;\n        flex-grow: 1;\n        justify-content: center;\n    }\n\n    input[type=\"color\"] {\n        cursor: pointer;\n        display: flex;\n        height: 32px;\n        width: 150px;\n        flex-shrink: 0;\n    }\n</style>\n","<script lang=\"ts\">\n    import { Mode } from \"@/types\";\n    import { mode, isMobile } from \"@/stores/ui\";\n    import ProseButton from \"@/components/ProseButton.svelte\";\n</script>\n\n<div id=\"mobile-header-container\">\n    {#if $mode == Mode.MobileHomeScreen}\n        <div class='left'>\n            <ProseButton type=\"create\" />\n        </div>\n        <div class='center button-group'>\n        </div>\n        <div class='right'>\n            <ProseButton type=\"info\" />\n            <ProseButton type=\"download\" />\n        </div>\n    {:else if $mode == Mode.MaskDraw}\n        <div class='left'>\n            <ProseButton type=\"home\" />\n        </div>\n        <div class='center button-group'>\n            <ProseButton type=\"undo\" />\n        </div>\n        <div class='right'>\n            <ProseButton type=\"start\" />\n        </div>\n    {:else if $mode == Mode.DirectDraw}\n        <div class='left'>\n            <ProseButton type=\"home\" />\n        </div>\n        <div class='center button-group'>\n            <ProseButton type=\"undo\" />\n        </div>\n        <div class='right'></div>\n    {/if}\n</div>\n\n\n<style>\n    #mobile-header-container {\n        width: 100%;\n        position: fixed;\n        top: 0px;\n        display: flex;\n        z-index: 1;\n        pointer-events: none;\n        /* justify-content: space-between; */\n        padding: 4px;\n        align-items: center;\n    }\n    #mobile-header-container  > * {\n        display: flex;\n        flex-grow: 1;\n        width: 33%;\n    }\n    #mobile-header-container .left {\n        \n    }\n    #mobile-header-container .center {\n        justify-content: center;\n\n    }\n    #mobile-header-container .right {\n        justify-content: flex-end;\n    }\n    :global(#mobile-header-container > *) {\n        pointer-events: all;\n    }\n    .button-group {\n        display: flex;\n        flex-direction: row;\n        /* height: 100%; */\n    }\n</style>","<script lang=\"ts\">\n  import { onMount } from \"svelte\";\n  import InfiniteViewer from \"@/drawing/svelte-infinite-viewer\";\n  import Droppable from \"@/components/Droppable.svelte\";\n  import Canvases from \"@/components/Canvases.svelte\";\n  import {\n    isMobile,\n    userQueuePosition,\n    zoom,\n    innerWidth,\n    innerHeight,\n  } from \"@/stores/ui\";\n  import { viewer, fitImage } from \"@/stores/viewer\";\n  import {\n    canvasSize,\n    setImageByURL,\n    setImageByFile,\n    canvasEvents,\n    activeCanvas,\n  } from \"@/stores/canvases\";\n  import ControlBarDesktop from \"@/components/ControlBar.svelte\";\n  import ControlBarMobile from \"@/components/ControlBarMobile.svelte\";\n  import \"event-target-polyfill\";\n  import MobileHeader from \"@/components/MobileHeader.svelte\";\n  import DesktopCanvasButtons from \"@/components/DesktopCanvasButtons.svelte\";\n\n  let getInstance;\n  let cursorX = 0;\n  let cursorY = 0;\n  let zoomOffsetX: number | string = \"50%\";\n  let zoomOffsetY: number | string = \"50%\";\n  const urlSearchParams = new URLSearchParams(window.location.search);\n\n  $: if ($viewer && $zoom) {\n    $viewer.setZoom($zoom);\n  }\n\n  function onKeyDown(e: KeyboardEvent) {\n    if (e.code === \"KeyZ\" && (e.metaKey === true || e.ctrlKey === true)) {\n      if ($activeCanvas && e.shiftKey) {\n        $activeCanvas.redo();\n      } else {\n        $activeCanvas.undo();\n      }\n    }\n  }\n\n  function onDrop(e) {\n    const files: File[] = Array.from(e.dataTransfer.files);\n    const imageFiles: File[] = files.filter((f) => f.type.startsWith(\"image\"));\n    if (imageFiles.length) {\n      setImageByFile(imageFiles[0]);\n    }\n  }\n\n  function onBodyMouseMove(event) {\n    cursorX = event.clientX;\n    cursorY = event.clientY;\n    zoomOffsetX = \"50%\";\n    zoomOffsetY = \"50%\";\n  }\n\n  onMount(async () => {\n    $viewer = getInstance();\n    $viewer.on(\"pinch\", (e) => {\n      // On mobile there is no cursor.\n      if (cursorX && cursorY) {\n        zoomOffsetX = cursorX;\n        zoomOffsetY = cursorY;\n      }\n      $zoom = e.zoom;\n    });\n    requestAnimationFrame(() => {\n      fitImage();\n    });\n    canvasEvents.addEventListener(\"setImage\", () => {\n      fitImage();\n    });\n    if (urlSearchParams.has(\"image\")) {\n      await setImageByURL(decodeURIComponent(urlSearchParams.get(\"image\")));\n      window.history.replaceState({}, document.title, \"/\");\n    }\n    alert(\n      \"ProsePainter is no longer running. Please view our open source repo https://github.com/Morphogens/prosepainter and try our other tools at Artbreeder.com\"\n    );\n    // localStorageSpace()\n  });\n</script>\n\n<svelte:window\n  on:keydown={onKeyDown}\n  bind:innerWidth={$innerWidth}\n  bind:innerHeight={$innerHeight}\n/>\n\n{#if $isMobile}\n  <ControlBarMobile />\n  <MobileHeader />\n{:else}\n  <ControlBarDesktop />\n  <DesktopCanvasButtons />\n{/if}\n{#if $userQueuePosition > 0}\n  <div id=\"userPoolInfo\">\n    <p>\n      ProsePainer is currently experiencing heavy usage. You may explore the app\n      but must wait to have access to the 'prose-paint.'\n    </p>\n    <p>You are currently in position {$userQueuePosition}.</p>\n  </div>\n{/if}\n\n<div id=\"viewer-container\" on:mousemove={onBodyMouseMove}>\n  <Droppable {onDrop}>\n    <InfiniteViewer\n      bind:getInstance\n      className=\"viewer\"\n      usePinch={true}\n      maxPinchWheel={10}\n      {zoomOffsetX}\n      {zoomOffsetY}\n    >\n      <div class=\"viewport\" style=\"width:{$canvasSize[0]}px\">\n        <Canvases />\n      </div>\n    </InfiniteViewer>\n  </Droppable>\n</div>\n\n<style>\n  :global(#maskCanvas, #optPreview, #cursorCanvas, #outlineCanvas) {\n    top: 0px;\n    left: 0px;\n    position: absolute;\n  }\n\n  #viewer-container {\n    width: 100vw;\n    height: 100vh;\n    background: var(--gray-80);\n  }\n  :global(.viewer) {\n    width: 100vw;\n    height: 100vh;\n  }\n  .viewport {\n    position: relative;\n  }\n  :global(.hidden) {\n    display: none;\n  }\n  #userPoolInfo {\n    position: fixed;\n    bottom: 75px;\n    z-index: 9;\n    width: 512px;\n    left: calc(50vw - 256px);\n    text-align: center;\n    background-color: white;\n    padding-left: 8px;\n    padding-right: 8px;\n    user-select: none;\n  }\n</style>\n","<script lang=\"ts\">\n    import { loadJson, loadImage, imageToCanvas } from \"@/utils\";\n    import { onMount } from \"svelte\";\n    import config from \"@/config\";\n\n    export let key: string;\n    export let artistName: string;\n    export let creationDate: Date;\n\n    let maskData: Array<{ imageBase64: string; prompt: string }>;\n    let maskImages: HTMLCanvasElement[];\n    let hoveredIndex: null | number = null;\n\n    $: dateString = creationDate.toDateString().split(\" \").slice(1).join(\" \");\n    $: dataUrl = `${config.assetsUrl}/artwork/${key}.json`;\n    $: imgUrl = `${config.assetsUrl}/artwork/${key}.jpg`;\n\n    async function updateImages() {\n        maskData = await loadJson(dataUrl);\n        console.time(\"masks\");\n        maskImages = await Promise.all(\n            maskData.map((m) => convertMask(m.imageBase64))\n        );\n        console.timeEnd(\"masks\");\n        console.log(\"maskImages.length\", maskImages.length);\n    }\n\n    async function convertMask(imageBase64) {\n        const img = await loadImage(imageBase64);\n        const canvas = imageToCanvas(img);\n        const ctx = canvas.getContext(\"2d\") as CanvasRenderingContext2D;\n        let imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);\n        let i;\n        for (i = 0; i < imgData.data.length; i += 4) {\n            imgData.data[i + 3] = 255 - imgData.data[i + 3];\n            // imgData.data[i + 3] = imgData.data[i + 3] < 64 ? 0 : 256\n            imgData.data[i + 3] = Math.round(0.85 * imgData.data[i + 3]);\n        }\n        ctx.putImageData(imgData, 0, 0);\n        return canvas;\n    }\n    $: if (dataUrl) {\n        updateImages()\n    }\n</script>\n\n<div class=\"artwork\">\n    <img src={imgUrl} alt=\"prosepainter artwork\" />\n    {#if maskData != null && maskImages != null}\n        <p class=\"title\">{artistName} - {dateString}</p>\n        <div class=\"prompts\">\n            {#each maskData as m, index}\n                <p\n                    on:mouseover={() => (hoveredIndex = index)}\n                    on:mouseout={() => (hoveredIndex = null)}\n                    on:focus={() => (hoveredIndex = index)}\n                    on:blur={() => (hoveredIndex = null)}\n                    on:click={() => (hoveredIndex = index)}\n                    class=\"prompt\"\n                >\n                    {m.prompt}{index == maskData.length - 1 ? \"\" : \",\"}\n                </p>\n            {/each}\n        </div>\n        {#if hoveredIndex !== null}\n            <img\n                class=\"mask\"\n                src={maskImages[hoveredIndex].toDataURL()}\n                alt=\"mask\"\n            />\n        {/if}\n    {/if}\n</div>\n\n<style>\n    .artwork {\n        position: relative;\n        display: flex;\n        flex-direction: column;\n        width: 512px;\n        margin-bottom: 16px;\n    }\n    p {\n        text-align: center;\n    }\n    p.title {\n        margin-bottom: 4px;\n        text-transform: capitalize;\n    }\n    .prompts {\n        display: flex;\n        flex-wrap: wrap;\n        justify-content: center;\n    }\n    p.prompt {\n        font-style: italic;\n        cursor: pointer;\n        margin: 4px;\n    }\n    p.prompt:hover {\n        text-decoration: underline;\n    }\n    img.mask {\n        position: absolute;\n        width: 100%;\n    }\n</style>\n","<script lang=\"ts\">\n    import Artwork from \"@/components/gallery/Artwork.svelte\";\n    import { postJSON } from \"@/utils/network\";\n    import { onMount } from \"svelte\";\n    import config from \"@/config\";\n    import type { ArtworkData } from \"@/types\";\n\n    let arworkData: ArtworkData[] = [];\n    onMount(async () => {\n        arworkData = await postJSON(`${config.apiURL}/gallery`, {});\n    });\n</script>\n\n<h1>Gallery</h1>\n<div class=\"gallery\">\n    {#each arworkData as data}\n        <Artwork\n            key={data.key}\n            artistName={data.artist_name}\n            creationDate={new Date(data.created_at)}\n        />\n    {/each}\n</div>\n\n<div id='paint'>\n    <a href='/'>Start Painting </a>\n    \n</div>\n\n<style>\n    h1 {\n        font-weight: 300;\n        text-align: center;\n    }\n    .gallery {\n        width: 100%;\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n    }\n    #paint {\n        position: fixed;\n        right: 8px;\n        top: 8px;\n        padding: 8px;\n        padding-left: 16px;\n        padding-right: 16px;\n        border-radius: 24px;\n        background-color: var(--green-40);\n        \n    }\n    #paint a {\n        color:  black;\n        text-decoration: none;\n    }\n</style>\n","<script lang=\"ts\">\n    import Artwork from \"@/components/gallery/Artwork.svelte\";\n    import { post, postJSON } from \"@/utils/network\";\n    import { onMount } from \"svelte\";\n    import config from \"@/config\";\n    import type { ArtworkData } from \"@/types\";\n    let password:null | string = localStorage.getItem('password')\n    let arworkData: ArtworkData[] = [];\n    onMount(async () => {        \n        if (password == null) {\n            password = prompt('please enter the password') \n        }\n        arworkData = await postJSON(`${config.apiURL}/get_artworks_for_review`, { password })\n        if (arworkData.length) {\n            // If results the password was correct and we can save it.\n            localStorage.setItem('password', password)\n        }\n    });\n    async function setAccepted(key: string, accepted: boolean) {\n        await post(`${config.apiURL}/set_review_status`, { key, accepted, password })\n        arworkData = arworkData.filter(a => a.key != key)\n    }\n</script>\n\n<h1>Gallery</h1>\n<div class=\"gallery\">\n    {#if arworkData.length == 0}\n        <h2>Nothing to review.</h2>\n    {/if}\n    {#each arworkData as data}\n        <Artwork\n            key={data.key}\n            artistName={data.artist_name}\n            creationDate={new Date(data.created_at)}\n        />\n        <div class='buttons'>\n            <button on:click={() => setAccepted(data.key, true)}>Accept</button>\n            <button on:click={() => setAccepted(data.key, false)}>Reject</button>\n        </div>\n        <hr style='width:100%'>\n    {/each}\n</div>\n\n<style>\n    h1 {\n        font-weight: 300;\n        text-align: center;\n    }\n    .gallery {\n        width: 100%;\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n    }\n</style>\n","<script lang=\"ts\">\n    import router from \"page\";\n    import Paint from \"@/routes/Paint.svelte\";\n    import Gallery from \"@/routes/Gallery.svelte\";\n    import Review from \"@/routes/Review.svelte\";\n    let page;\n    let params;\n    router(\"/\", () => (page = Paint));\n    router(\"/paint\", () => (page = Paint));\n    router(\"/gallery\", () => (page = Gallery));\n    router(\"/review\", () => (page = Review));\n    router.start();\n</script>\n\n<svelte:component this={page} {params} />\n\n\n<style>\n     :global(*) {\n        /* font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"; */\n        font-family: \"Open Sans\", sans-serif;\n        box-sizing: border-box;\n    }\n    :global(body) {\n        margin: 0px;\n    }\n    :global(button) {\n        border: 1px solid #ccc;\n        display: inline-block;\n        padding: 6px 12px;\n        margin: 0px;\n        /* background-color: white; */\n        background-color: #f8f9fa;\n        opacity: 1;\n\n        cursor: pointer;\n        text-align: center;\n        text-decoration: none;\n        display: inline-block;\n        font-size: 16px;\n    }\n    :global(button:hover) {\n        background-color: #f8f9fa79;\n    }\n</style>","import App from './App.svelte'\n\n// Redirect if being accessed over http and no port (so not debugging)\nif (window.location.port == '' && window.location.protocol === 'http:') {\n  window.location.protocol = 'https:'\n}\n\n// Initialize app\nconst app = new App({\n  target: document.getElementById('app')\n})\n\nexport default app\n"],"names":["ctx","CLASS_NAME","ctx2","dispatch","createEventDispatcher","infiniteViewer","wrapperElement","containerElement","scrollAreaElement","horizontalScrollElement","verticalScrollElement","className","forEach","name","$$props","options","log","VanillaInfiniteViewer","nextElementSibling","i","on","e","stop","destroy","relList","document","createElement","supports","link","querySelectorAll","MutationObserver","mutations","mutation","type","node","addedNodes","tagName","rel","observe","childList","subtree","ep","fetchOpts","script","integrity","referrerpolicy","referrerPolicy","crossorigin","credentials","getFetchOpts","href","p","prototype","InfiniteViewer","args","self2","this","getInstance","result","src","Promise","resolve","reject","image","Image","crossOrigin","onload","onerror","Error","img","canvas","getContext","height","naturalHeight","width","naturalWidth","drawImage","filename","format","quality","url","toDataURL","aDownloadLink","download","click","maxSize","scale","Math","min","max","thumbnail","thumbnailCtx","round","a","b","c","event","stopPropagation","preventDefault","stopEvent","onDrop","x","y","r","fill","stroke","clip","beginPath","arc","PI","closePath","points","length","moveTo","idx","lineTo","hardness","radius","opacity","color1","color2","size","context","globalAlpha","gradient","createRadialGradient","addColorStop","fillStyle","fillRect","__awaiter","thisArg","_arguments","P","generator","style","id","erasing","showCursor","canvasBase64","strokeColor","defaultImageUrl","maskFilter","canvasSize","writable","brushImageSrc","strokeCanvas","strokeCtx","grayStrokeCanvas","grayStrokeCtx","previewCanvas","previewCtx","undoStack","redoStack","mouseDown","currentStroke","brushImage","shift","dataURl","localStorage","setItem","clearRect","loadImage","strokeWidth","strokeHeight","willReadFrequently","startUrl","window","getItem","$canvasSize","_a","createBrushImage","brushCanvasPreview","$brushImage","canvasToImage","exec","parseInt","g","lineCap","lineJoin","offsets","touches","Array","from","map","clientX","clientY","target","getBoundingClientRect","clientWidth","left","top","offsetX","offsetY","mouseOrTouchOffsets","push","last","x1","y1","x2","y2","bw","bh","diffX","abs","diffY","dist","sqrt","step","t","globalCompositeOperation","brushCanvas","startX","startY","dwidth","dheight","imageData","getImageData","data","clamp","strokeColorRGB","putImageData","lastbase64","pop","setFromUndoRedo","index","strokeDone","Mode","Mode2","defaultValue","value","JSON","parse","error","store","subscribe","stringify","$value","prompt","localStorageWritable","stylePrompt","learningRate","numRecSteps","zoom","set","v","clampedNumberStore","innerWidth","innerHeight","isMobile","derived","$w","mode","get","MobileHomeScreen","MaskDraw","userQueuePosition","optimizationResults","selectedOptIdx","selectedOptImage","$idx","$results","images","DEFAULT_IMAGES","DEFAULT_IMAGE","drawHistoryStore","startImage","masks","update","_drawHistoryStore","mainCanvas","getCanvas","maskCanvas","canvasEvents","EventTarget","activeCanvas","$mode","$maskCanvas","$mainCanvas","DirectDraw","tick","whiteCanvas","setImage","dispatchEvent","CustomEvent","imageUrl","thumbnailCanvas","imageToCanvas","file","URL","createObjectURL","setImageByURL","contourCanvas","contourCtx","maskCanvas2","scaleX","scaleY","data4","alpha","contours","thresholds","coordinates","flat","_imageContour","poly","p2","dstCtx","canvasSize2","gridCanvas","lineWidth","colorA","colorB","dash","contours2","imageContour","lineDashOffset","strokeStyle","setLineDash","cursorCanvas","cursorCtx","outlineCanvas","outlineCtx","mouseover","magicMaskFilter","gridSize","numCols","numRows","row","col","rect","drawGrid","$isMobile","detail","outineLineWidth","viewer","$zoom","scrollCenter","serverHostname","location","host","replace","serverUrl","protocol","apiURL","startsWith","assetsUrl","socket","events","socketOpen","userID","topic","send","random","toString","slice","console","WebSocket","config","onopen","callback","addEventListener","onclose","closeEvent","reason","attemptConnect","hasAnyVisiblePixels","alert","num_iterations","imageBase64","backgroundImg","key","Object","entries","Optimizing","$drawHistoryStore","message","queuePosition","PausedOptimizing","newImage","_optResults","concat","val","classes","disabled","color","backgroundColor","results","$optimizationResults","optEvents.accept","upwards","showBrushControls","activeCanvas2","label","group","justifyContent","justifyContentClass","input","placeholder","focusOnMount","clear","optEvents.start","show","files","axios","post","then","dec","padStart","len","arr","Uint8Array","crypto","getRandomValues","dec2hex","join","beforeAfter","getMasks","finalCanvas","startImageUrl","_beforeAfter","artistName","postJSON","downloadCanvas","infoModal","createModal","showCreate","toggle","$activeCanvas","undo","redo","fitImage","cursorX","cursorY","zoomOffsetX","zoomOffsetY","urlSearchParams","URLSearchParams","search","$viewer","has","decodeURIComponent","history","replaceState","title","setZoom","code","metaKey","ctrlKey","shiftKey","imageFiles","dataTransfer","filter","f","maskData","maskImages","creationDate","hoveredIndex","path","fetch","async","response","json","loadJson","dataUrl","time","all","imgData","convertMask","m","timeEnd","dateString","toDateString","split","imgUrl","artist_name","Date","created_at","arworkData","password","accepted","setAccepted","page","Paint","Gallery","Review","start","params","port","getElementById"],"mappings":"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"}