import { n as noop, a as safe_not_equal, c as create_ssr_component, b as subscribe, d as each, e as escape, f as add_attribute, g as set_store_value, v as validate_component } from "../../chunks/index-445fd704.js";
import { b as base } from "../../chunks/paths-396f020f.js";
import "nanoid";
import "px-brush";
const COLOR_LIST = [
  { color: [219, 14, 154], label: "building" },
  { color: [147, 142, 123], label: "pervious surface" },
  { color: [248, 12, 0], label: "impervious surface" },
  { color: [169, 113, 1], label: "bare soil" },
  { color: [21, 83, 174], label: "water" },
  { color: [25, 74, 38], label: "coniferous" },
  { color: [70, 228, 131], label: "deciduous" },
  { color: [243, 166, 13], label: "brushwood" },
  { color: [102, 0, 130], label: "vineyard" },
  { color: [85, 255, 0], label: "herbaceous vegetation" },
  { color: [255, 243, 13], label: "agricultural land" },
  { color: [228, 223, 124], label: "plowed land" },
  { color: [61, 230, 235], label: "swimming pool" },
  { color: [255, 255, 255], label: "snow" },
  { color: [138, 179, 160], label: "clear cut" },
  { color: [107, 113, 79], label: "mixed" }
];
const IMAGES_LIST = [
  "/samples/default.jpg",
  "/samples/example0.png",
  "/samples/example1.png",
  "/samples/example2.png",
  "/samples/example3.png",
  "/samples/example4.png",
  "/samples/example5.png",
  "/samples/example6.jpg"
];
const PRESETS = [
  ["", "None"],
  ["Watercolors", "Watercolors"],
  ["Colorful lego bricks", "Lego brick"],
  ["Black and white paper pencil drawing", "Pencil"],
  ["Oil on canvas painting", "Painting"]
];
const subscriber_queue = [];
function writable(value, start = noop) {
  let stop;
  const subscribers = /* @__PURE__ */ new Set();
  function set(new_value) {
    if (safe_not_equal(value, new_value)) {
      value = new_value;
      if (stop) {
        const run_queue = !subscriber_queue.length;
        for (const subscriber of subscribers) {
          subscriber[1]();
          subscriber_queue.push(subscriber, value);
        }
        if (run_queue) {
          for (let i = 0; i < subscriber_queue.length; i += 2) {
            subscriber_queue[i][0](subscriber_queue[i + 1]);
          }
          subscriber_queue.length = 0;
        }
      }
    }
  }
  function update(fn) {
    set(fn(value));
  }
  function subscribe2(run, invalidate = noop) {
    const subscriber = [run, invalidate];
    subscribers.add(subscriber);
    if (subscribers.size === 1) {
      stop = start(set) || noop;
    }
    run(value);
    return () => {
      subscribers.delete(subscriber);
      if (subscribers.size === 0) {
        stop();
        stop = null;
      }
    };
  }
  return { set, update, subscribe: subscribe2 };
}
function randomSeed() {
  return BigInt(13248873089935215e3 & ((1 << 63) - 1) * Math.random());
}
const drawingLayers = writable(/* @__PURE__ */ new Map());
const resultImage = writable();
const currentCanvas = writable();
const selectedImage = writable();
const selectedBrush = writable();
const selectedParams = writable({
  prompt: "Aerial view of rue des Lilas, Toulouse, Haute-Garonne, France",
  modifier: PRESETS[0][0],
  seed: randomSeed(),
  steps: 20
});
const generateMap = writable(false);
const saveResult = writable(false);
var TemplateGallery_svelte_svelte_type_style_lang = /* @__PURE__ */ (() => "form.svelte-1gwcbp.svelte-1gwcbp{width:100%;overflow:hidden\n}.samples.svelte-1gwcbp.svelte-1gwcbp{display:flex;scroll-snap-type:x var(--tw-scroll-snap-strictness);--tw-scroll-snap-strictness:mandatory;flex-wrap:nowrap;gap:0.25rem;overflow-x:scroll;-ms-overflow-style:none;scrollbar-width:none\n}.samples.svelte-1gwcbp.svelte-1gwcbp::-webkit-scrollbar{display:none\n}input[type='radio'].svelte-1gwcbp.svelte-1gwcbp{position:absolute;display:none;height:0px;width:0px;opacity:0\n}input[type='radio'].svelte-1gwcbp.svelte-1gwcbp:disabled{opacity:0.5\n}input[type='radio'].svelte-1gwcbp:checked~label.svelte-1gwcbp{outline-style:solid;outline-width:2px;outline-color:#eab308\n}input[type='radio'].svelte-1gwcbp:disabled+label.svelte-1gwcbp{opacity:0.5\n}label.svelte-1gwcbp.svelte-1gwcbp{display:flex;cursor:pointer;outline-width:2px;outline-offset:-2px;outline-color:#eab308;transition-property:all;transition-duration:200ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1)\n}label.svelte-1gwcbp.svelte-1gwcbp:hover{outline-style:solid\n}img.svelte-1gwcbp.svelte-1gwcbp{max-height:6rem;max-width:none\n}")();
const css$5 = {
  code: "form.svelte-1gwcbp.svelte-1gwcbp{width:100%;overflow:hidden\n}.samples.svelte-1gwcbp.svelte-1gwcbp{display:flex;scroll-snap-type:x var(--tw-scroll-snap-strictness);--tw-scroll-snap-strictness:mandatory;flex-wrap:nowrap;gap:0.25rem;overflow-x:scroll;-ms-overflow-style:none;scrollbar-width:none\n}.samples.svelte-1gwcbp.svelte-1gwcbp::-webkit-scrollbar{display:none\n}input[type='radio'].svelte-1gwcbp.svelte-1gwcbp{position:absolute;display:none;height:0px;width:0px;opacity:0\n}input[type='radio'].svelte-1gwcbp.svelte-1gwcbp:disabled{opacity:0.5\n}input[type='radio'].svelte-1gwcbp:checked~label.svelte-1gwcbp{outline-style:solid;outline-width:2px;outline-color:#eab308\n}input[type='radio'].svelte-1gwcbp:disabled+label.svelte-1gwcbp{opacity:0.5\n}label.svelte-1gwcbp.svelte-1gwcbp{display:flex;cursor:pointer;outline-width:2px;outline-offset:-2px;outline-color:#eab308;transition-property:all;transition-duration:200ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1)\n}label.svelte-1gwcbp.svelte-1gwcbp:hover{outline-style:solid\n}img.svelte-1gwcbp.svelte-1gwcbp{max-height:6rem;max-width:none\n}",
  map: null
};
const TemplateGallery = create_ssr_component(($$result, $$props, $$bindings, slots) => {
  let $$unsubscribe_selectedImage;
  let $generateMap, $$unsubscribe_generateMap;
  $$unsubscribe_selectedImage = subscribe(selectedImage, (value) => value);
  $$unsubscribe_generateMap = subscribe(generateMap, (value) => $generateMap = value);
  $$result.css.add(css$5);
  $$unsubscribe_selectedImage();
  $$unsubscribe_generateMap();
  return `<div><h4 class="${"font-bold mt-6 mb-2 my-6 leading-6"}">Select a Template</h4>
	<form class="${"svelte-1gwcbp"}"><div class="${"samples  svelte-1gwcbp"}">${each(IMAGES_LIST, (file_name, id) => {
    return `<div class="${"snap-always snap-start"}"><input type="${"radio"}" name="${"samples"}" id="${"sample-" + escape(id)}"${add_attribute("value", id, 0)} ${$generateMap === true ? "disabled" : ""} class="${"svelte-1gwcbp"}">
					<label for="${"sample-" + escape(id)}" class="${"svelte-1gwcbp"}"><img${add_attribute("src", base + file_name, 0)}${add_attribute("alt", file_name, 0)} class="${"svelte-1gwcbp"}"></label>
				</div>`;
  })}</div></form>
</div>`;
});
var BrushSelector_svelte_svelte_type_style_lang = /* @__PURE__ */ (() => ".colors.svelte-1oy4poo.svelte-1oy4poo{display:grid;max-height:9rem;scroll-snap-type:y var(--tw-scroll-snap-strictness);--tw-scroll-snap-strictness:mandatory;grid-template-columns:repeat(2, minmax(0, 1fr));gap:0.5rem;overflow:scroll\n}@media(min-width: 530px){.colors.svelte-1oy4poo.svelte-1oy4poo{max-height:none;grid-template-columns:repeat(3, minmax(0, 1fr))\n    }}.colors.svelte-1oy4poo span.svelte-1oy4poo{margin-left:0.5rem\n}.colors.svelte-1oy4poo svg.svelte-1oy4poo{display:block\n}input[type='radio'].svelte-1oy4poo.svelte-1oy4poo{position:absolute;display:none;height:0px;width:0px;opacity:0\n}input[type='radio'].svelte-1oy4poo:checked~label.svelte-1oy4poo{outline-style:solid;outline-width:2px;outline-color:#eab308\n}label.svelte-1oy4poo.svelte-1oy4poo{display:flex;cursor:pointer;white-space:nowrap;outline-width:2px;outline-offset:-2px;outline-color:#eab308;transition-property:all;transition-duration:200ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1)\n}label.svelte-1oy4poo.svelte-1oy4poo:hover{outline-style:solid\n}.brush.svelte-1oy4poo.svelte-1oy4poo{display:flex\n}")();
const css$4 = {
  code: ".colors.svelte-1oy4poo.svelte-1oy4poo{display:grid;max-height:9rem;scroll-snap-type:y var(--tw-scroll-snap-strictness);--tw-scroll-snap-strictness:mandatory;grid-template-columns:repeat(2, minmax(0, 1fr));gap:0.5rem;overflow:scroll\n}@media(min-width: 530px){.colors.svelte-1oy4poo.svelte-1oy4poo{max-height:none;grid-template-columns:repeat(3, minmax(0, 1fr))\n    }}.colors.svelte-1oy4poo span.svelte-1oy4poo{margin-left:0.5rem\n}.colors.svelte-1oy4poo svg.svelte-1oy4poo{display:block\n}input[type='radio'].svelte-1oy4poo.svelte-1oy4poo{position:absolute;display:none;height:0px;width:0px;opacity:0\n}input[type='radio'].svelte-1oy4poo:checked~label.svelte-1oy4poo{outline-style:solid;outline-width:2px;outline-color:#eab308\n}label.svelte-1oy4poo.svelte-1oy4poo{display:flex;cursor:pointer;white-space:nowrap;outline-width:2px;outline-offset:-2px;outline-color:#eab308;transition-property:all;transition-duration:200ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1)\n}label.svelte-1oy4poo.svelte-1oy4poo:hover{outline-style:solid\n}.brush.svelte-1oy4poo.svelte-1oy4poo{display:flex\n}",
  map: null
};
const STARTCOLORID = 6;
const BrushSelector = create_ssr_component(($$result, $$props, $$bindings, slots) => {
  let $selectedBrush, $$unsubscribe_selectedBrush;
  $$unsubscribe_selectedBrush = subscribe(selectedBrush, (value) => $selectedBrush = value);
  const { color, label } = COLOR_LIST[STARTCOLORID];
  let brushColor = `rgb(${color.join(",")})`;
  let brushSize = 40;
  set_store_value(selectedBrush, $selectedBrush = {
    color: brushColor,
    size: brushSize,
    label
  }, $selectedBrush);
  $$result.css.add(css$4);
  $$unsubscribe_selectedBrush();
  return `<form><h4 class="${"font-bold mt-6 mb-2 leading-6 my-3"}">Brush Type</h4>
	<div class="${"colors svelte-1oy4poo"}" name="${"colors"}">${each(COLOR_LIST, (color2, id) => {
    return `<div class="${"snap-always snap-start"}"><input name="${"color"}" ${id == STARTCOLORID ? "checked" : ""} type="${"radio"}" id="${"color-" + escape(id)}"${add_attribute("value", id, 0)} class="${"svelte-1oy4poo"}">
				<label for="${"color-" + escape(id)}" class="${"svelte-1oy4poo"}"><svg width="${"20"}" height="${"20"}" viewBox="${"0 0 20 20"}" class="${"svelte-1oy4poo"}"><rect x="${"0"}" y="${"0"}" width="${"20"}" height="${"20"}" fill="${"rgb(" + escape(color2.color.join(",")) + ")"}"></rect></svg>
					<span class="${"svelte-1oy4poo"}">${escape(color2.label)}</span></label>
			</div>`;
  })}</div>
	<h4 class="${"font-bold mt-6 mb-2 my-6 leading-6"}">Brush Size</h4>
	<div class="${"brush svelte-1oy4poo"}"><input value="${"10"}" min="${"1"}" max="${"150"}" step="${"1"}" name="${"brush"}" type="${"range"}">
		<label class="${"pl-2 svelte-1oy4poo"}" for="${"brush"}">${escape($selectedBrush.size)}</label></div>
</form>`;
});
var ParamsSelector_svelte_svelte_type_style_lang = /* @__PURE__ */ (() => "@media(min-width: 530px){}select.svelte-7to72y.svelte-7to72y,button.svelte-7to72y.svelte-7to72y,input.svelte-7to72y.svelte-7to72y{border-radius:0.5rem;border-width:1px;--tw-border-opacity:1;border-color:rgb(209 213 219 / var(--tw-border-opacity));--tw-bg-opacity:1;background-color:rgb(249 250 251 / var(--tw-bg-opacity));padding:0.25rem;font-size:0.875rem;line-height:1.25rem;--tw-text-opacity:1;color:rgb(17 24 39 / var(--tw-text-opacity))\n}select.svelte-7to72y.svelte-7to72y:focus,button.svelte-7to72y.svelte-7to72y:focus,input.svelte-7to72y.svelte-7to72y:focus{--tw-border-opacity:1;border-color:rgb(59 130 246 / var(--tw-border-opacity));--tw-ring-opacity:1;--tw-ring-color:rgb(59 130 246 / var(--tw-ring-opacity))\n}select.svelte-7to72y.svelte-7to72y:disabled,button.svelte-7to72y.svelte-7to72y:disabled,input.svelte-7to72y.svelte-7to72y:disabled{opacity:0.5\n}@media(prefers-color-scheme: dark){select.svelte-7to72y.svelte-7to72y,button.svelte-7to72y.svelte-7to72y,input.svelte-7to72y.svelte-7to72y{--tw-border-opacity:1;border-color:rgb(209 213 219 / var(--tw-border-opacity));--tw-bg-opacity:1;background-color:rgb(249 250 251 / var(--tw-bg-opacity))\n    }select.svelte-7to72y.svelte-7to72y:focus,button.svelte-7to72y.svelte-7to72y:focus,input.svelte-7to72y.svelte-7to72y:focus{--tw-border-opacity:1;border-color:rgb(59 130 246 / var(--tw-border-opacity));--tw-ring-opacity:1;--tw-ring-color:rgb(59 130 246 / var(--tw-ring-opacity))\n    }}input.svelte-7to72y:disabled+label.svelte-7to72y{opacity:0.5\n}input.svelte-7to72y.svelte-7to72y{padding-left:0.75rem\n}")();
const css$3 = {
  code: "@media(min-width: 530px){}select.svelte-7to72y.svelte-7to72y,button.svelte-7to72y.svelte-7to72y,input.svelte-7to72y.svelte-7to72y{border-radius:0.5rem;border-width:1px;--tw-border-opacity:1;border-color:rgb(209 213 219 / var(--tw-border-opacity));--tw-bg-opacity:1;background-color:rgb(249 250 251 / var(--tw-bg-opacity));padding:0.25rem;font-size:0.875rem;line-height:1.25rem;--tw-text-opacity:1;color:rgb(17 24 39 / var(--tw-text-opacity))\n}select.svelte-7to72y.svelte-7to72y:focus,button.svelte-7to72y.svelte-7to72y:focus,input.svelte-7to72y.svelte-7to72y:focus{--tw-border-opacity:1;border-color:rgb(59 130 246 / var(--tw-border-opacity));--tw-ring-opacity:1;--tw-ring-color:rgb(59 130 246 / var(--tw-ring-opacity))\n}select.svelte-7to72y.svelte-7to72y:disabled,button.svelte-7to72y.svelte-7to72y:disabled,input.svelte-7to72y.svelte-7to72y:disabled{opacity:0.5\n}@media(prefers-color-scheme: dark){select.svelte-7to72y.svelte-7to72y,button.svelte-7to72y.svelte-7to72y,input.svelte-7to72y.svelte-7to72y{--tw-border-opacity:1;border-color:rgb(209 213 219 / var(--tw-border-opacity));--tw-bg-opacity:1;background-color:rgb(249 250 251 / var(--tw-bg-opacity))\n    }select.svelte-7to72y.svelte-7to72y:focus,button.svelte-7to72y.svelte-7to72y:focus,input.svelte-7to72y.svelte-7to72y:focus{--tw-border-opacity:1;border-color:rgb(59 130 246 / var(--tw-border-opacity));--tw-ring-opacity:1;--tw-ring-color:rgb(59 130 246 / var(--tw-ring-opacity))\n    }}input.svelte-7to72y:disabled+label.svelte-7to72y{opacity:0.5\n}input.svelte-7to72y.svelte-7to72y{padding-left:0.75rem\n}",
  map: null
};
const ParamsSelector = create_ssr_component(($$result, $$props, $$bindings, slots) => {
  let $selectedParams, $$unsubscribe_selectedParams;
  let $generateMap, $$unsubscribe_generateMap;
  $$unsubscribe_selectedParams = subscribe(selectedParams, (value) => $selectedParams = value);
  $$unsubscribe_generateMap = subscribe(generateMap, (value) => $generateMap = value);
  let form;
  let seed = $selectedParams.seed;
  let sampleSteps = $selectedParams.steps;
  let prompt = $selectedParams.prompt;
  let modifier = $selectedParams.modifier;
  $$result.css.add(css$3);
  $$unsubscribe_selectedParams();
  $$unsubscribe_generateMap();
  return `<form${add_attribute("this", form, 0)}><h4 class="${"font-bold mt-6 mb-2 my-6 leading-6"}">Prompt</h4>
	<input name="${"prompt"}" placeholder="${"Aerial view of ..., France."}" ${$generateMap === true ? "disabled" : ""} style="${"width: 500px;"}" class="${"svelte-7to72y"}"${add_attribute("value", prompt, 0)}>

	<h4 class="${"font-bold mt-6 mb-2 my-6 leading-6"}">Modifier</h4>
	<input name="${"modifier"}" placeholder="${"High resolution satellite image"}" ${$generateMap === true ? "disabled" : ""} style="${"width: 500px;"}" class="${"svelte-7to72y"}"${add_attribute("value", modifier, 0)}>
	<select name="${"presets"}" ${$generateMap === true ? "disabled" : ""} class="${"svelte-7to72y"}"><option disabled selected value="${"preset"}">preset</option>${each(PRESETS, (preset) => {
    return `<option${add_attribute("value", preset[0], 0)}>${escape(preset[1])}</option>\``;
  })}</select>

	<h4 class="${"font-bold mt-6 mb-2 my-6 leading-6"}">Random Seed</h4>
	<input type="${"Number"}" name="${"seed"}" placeholder="${"Integer Seed"}" ${$generateMap === true ? "disabled" : ""} class="${"svelte-7to72y"}"${add_attribute("value", seed, 0)}>
	<button ${$generateMap === true ? "disabled" : ""} class="${"svelte-7to72y"}">Random
	</button>
	<h4 class="${"font-bold mt-6 mb-2 my-6 leading-6"}">Sample Steps</h4>
	<div class="${"flex"}"><input type="${"range"}" name="${"steps"}" min="${"10"}" max="${"30"}" step="${"1"}" ${$generateMap === true ? "disabled" : ""} class="${"svelte-7to72y"}"${add_attribute("value", sampleSteps, 0)}>
		<label class="${"pl-2 svelte-7to72y"}" for="${"steps"}">${escape(sampleSteps)}</label></div>
</form>`;
});
const Undo = create_ssr_component(($$result, $$props, $$bindings, slots) => {
  let { classNames = "" } = $$props;
  if ($$props.classNames === void 0 && $$bindings.classNames && classNames !== void 0)
    $$bindings.classNames(classNames);
  return `<svg xmlns="${"http://www.w3.org/2000/svg"}" width="${"20"}" viewBox="${"0 0 512 512"}"${add_attribute("class", classNames, 0)}><path fill="${"white"}" stroke="${"black"}" stroke-width="${"30"}" d="${"M480 256c0 123.4-100.5 223.9-223.9 223.9c-48.84 0-95.17-15.58-134.2-44.86c-14.12-10.59-16.97-30.66-6.375-44.81c10.59-14.12 30.62-16.94 44.81-6.375c27.84 20.91 61 31.94 95.88 31.94C344.3 415.8 416 344.1 416 256s-71.69-159.8-159.8-159.8c-37.46 0-73.09 13.49-101.3 36.64l45.12 45.14c17.01 17.02 4.955 46.1-19.1 46.1H35.17C24.58 224.1 16 215.5 16 204.9V59.04c0-24.04 29.07-36.08 46.07-19.07l47.6 47.63C149.9 52.71 201.5 32.11 256.1 32.11C379.5 32.11 480 132.6 480 256z"}"></path></svg>`;
});
var DrawingCanvas_svelte_svelte_type_style_lang = /* @__PURE__ */ (() => ".canvas.svelte-vhujxn{z-index:0;aspect-ratio:512/512;width:100%;max-width:100%;border-width:1px;--tw-border-opacity:1;border-color:rgb(107 114 128 / var(--tw-border-opacity))\n}.brush.svelte-vhujxn{pointer-events:none;position:absolute;z-index:10;--tw-translate-x:-50%;--tw-translate-y:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))\n}.label.svelte-vhujxn{pointer-events:none;position:absolute;top:0px;left:0px;z-index:20;-webkit-user-select:none;-moz-user-select:none;user-select:none;padding-left:0.5rem;padding-right:0.5rem;font-size:1rem;line-height:1.5rem;--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity));color:white;font-weight:bolder;-webkit-text-stroke:1px black;-webkit-text-fill-color:white\n}")();
const css$2 = {
  code: ".canvas.svelte-vhujxn{z-index:0;aspect-ratio:512/512;width:100%;max-width:100%;border-width:1px;--tw-border-opacity:1;border-color:rgb(107 114 128 / var(--tw-border-opacity))\n}.brush.svelte-vhujxn{pointer-events:none;position:absolute;z-index:10;--tw-translate-x:-50%;--tw-translate-y:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))\n}.label.svelte-vhujxn{pointer-events:none;position:absolute;top:0px;left:0px;z-index:20;-webkit-user-select:none;-moz-user-select:none;user-select:none;padding-left:0.5rem;padding-right:0.5rem;font-size:1rem;line-height:1.5rem;--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity));color:white;font-weight:bolder;-webkit-text-stroke:1px black;-webkit-text-fill-color:white\n}",
  map: null
};
function drawImage(ctx, img) {
  ctx.drawImage(img, 0, 0, ctx.canvas.width, ctx.canvas.height);
}
const DrawingCanvas = create_ssr_component(($$result, $$props, $$bindings, slots) => {
  let $drawingLayers, $$unsubscribe_drawingLayers;
  let $selectedImage, $$unsubscribe_selectedImage;
  let $selectedBrush, $$unsubscribe_selectedBrush;
  let $$unsubscribe_currentCanvas;
  $$unsubscribe_drawingLayers = subscribe(drawingLayers, (value) => $drawingLayers = value);
  $$unsubscribe_selectedImage = subscribe(selectedImage, (value) => $selectedImage = value);
  $$unsubscribe_selectedBrush = subscribe(selectedBrush, (value) => $selectedBrush = value);
  $$unsubscribe_currentCanvas = subscribe(currentCanvas, (value) => value);
  let canvas;
  let brush;
  let ctx;
  $$result.css.add(css$2);
  {
    {
      if ($selectedImage) {
        drawImage(ctx, $selectedImage);
        set_store_value(drawingLayers, $drawingLayers = /* @__PURE__ */ new Map(), $drawingLayers);
      }
    }
  }
  $$unsubscribe_drawingLayers();
  $$unsubscribe_selectedImage();
  $$unsubscribe_selectedBrush();
  $$unsubscribe_currentCanvas();
  return `<div><div class="${"relative overflow-clip"}"><canvas class="${"canvas svelte-vhujxn"}" width="${"512"}" height="${"512"}"${add_attribute("this", canvas, 0)}></canvas>
		<canvas class="${"brush svelte-vhujxn"}" width="${"10"}" height="${"10"}"${add_attribute("this", brush, 0)}></canvas>
		<span class="${"label svelte-vhujxn"}">${escape($selectedBrush == null ? void 0 : $selectedBrush.label)}</span>
		<button class="${"absolute bottom-0 left-0 p-3"}" ${$drawingLayers.size <= 0 ? "disabled" : ""}>${validate_component(Undo, "UndoIcon").$$render($$result, {}, {}, {})}</button></div>
</div>`;
});
var ResultCanvas_svelte_svelte_type_style_lang = /* @__PURE__ */ (() => ".image.svelte-1t0h0rs{z-index:0;box-sizing:border-box;aspect-ratio:512/512;border-width:1px;--tw-border-opacity:1;border-color:rgb(107 114 128 / var(--tw-border-opacity))\n}@media(prefers-color-scheme: dark){.image.svelte-1t0h0rs{--tw-border-opacity:1;border-color:rgb(209 213 219 / var(--tw-border-opacity))\n    }}.loading.svelte-1t0h0rs{position:absolute;top:0px;left:0px;right:0px;bottom:0px;display:flex;flex-direction:column;align-items:center;justify-content:center\n}")();
const css$1 = {
  code: ".image.svelte-1t0h0rs{z-index:0;box-sizing:border-box;aspect-ratio:512/512;border-width:1px;--tw-border-opacity:1;border-color:rgb(107 114 128 / var(--tw-border-opacity))\n}@media(prefers-color-scheme: dark){.image.svelte-1t0h0rs{--tw-border-opacity:1;border-color:rgb(209 213 219 / var(--tw-border-opacity))\n    }}.loading.svelte-1t0h0rs{position:absolute;top:0px;left:0px;right:0px;bottom:0px;display:flex;flex-direction:column;align-items:center;justify-content:center\n}",
  map: null
};
let predictStatus = "";
async function saveImage(base64Image) {
  return new Promise((resolve, reject) => {
    try {
      const a = document.createElement("a");
      a.download = `sucess-${Date.now()}.png`;
      a.target = "_self";
      a.onclick = async (e) => {
        if (a.href) {
          URL.revokeObjectURL(a.href);
        }
        a.href = base64Image;
      };
      requestAnimationFrame(() => {
        console.log("Downloading image.");
        a.click();
        resolve(null);
      });
    } catch (err) {
      reject();
    }
  });
}
async function predict(base64Image, { prompt, modifier, steps, seed }) {
  const response = await fetch("/predict", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({
      data: [base64Image, prompt + ". " + modifier, steps, seed.toString()]
    })
  });
  if (!response.ok) {
    throw new Error("Prediction request failed.");
  }
  const result = await response.text();
  return result;
}
const ResultCanvas = create_ssr_component(($$result, $$props, $$bindings, slots) => {
  let $saveResult, $$unsubscribe_saveResult;
  let $resultImage, $$unsubscribe_resultImage;
  let $generateMap, $$unsubscribe_generateMap;
  let $selectedParams, $$unsubscribe_selectedParams;
  let $currentCanvas, $$unsubscribe_currentCanvas;
  $$unsubscribe_saveResult = subscribe(saveResult, (value) => $saveResult = value);
  $$unsubscribe_resultImage = subscribe(resultImage, (value) => $resultImage = value);
  $$unsubscribe_generateMap = subscribe(generateMap, (value) => $generateMap = value);
  $$unsubscribe_selectedParams = subscribe(selectedParams, (value) => $selectedParams = value);
  $$unsubscribe_currentCanvas = subscribe(currentCanvas, (value) => $currentCanvas = value);
  $$result.css.add(css$1);
  {
    (async () => {
      if ($generateMap) {
        const results = await predict($currentCanvas.toDataURL(), $selectedParams);
        set_store_value(resultImage, $resultImage = results, $resultImage);
        set_store_value(generateMap, $generateMap = false, $generateMap);
      }
    })();
  }
  {
    (async () => {
      if ($saveResult) {
        await saveImage($resultImage);
        set_store_value(saveResult, $saveResult = false, $saveResult);
      }
    })();
  }
  $$unsubscribe_saveResult();
  $$unsubscribe_resultImage();
  $$unsubscribe_generateMap();
  $$unsubscribe_selectedParams();
  $$unsubscribe_currentCanvas();
  return `<div class="${"relative overflow-clip flex flex-col justify-center items-center w-full h-full"}">${$resultImage ? `<img class="${"image " + escape($generateMap ? "opacity-30" : "") + " svelte-1t0h0rs"}" alt="${"Generative Map Result"}"${add_attribute("src", $resultImage, 0)} width="${"512"}" height="${"512"}">` : ``}
	${$generateMap ? `<div class="${"loading svelte-1t0h0rs"}"><svg xmlns="${"http://www.w3.org/2000/svg"}" fill="${"none"}" viewBox="${"0 0 24 24"}" class="${"animate-spin max-w-[3rem]"}"><path fill="${"currentColor"}" d="${"M20 12a8 8 0 0 1-8 8v4a12 12 0 0 0 12-12h-4Zm-2-5.3a8 8 0 0 1 2 5.3h4c0-3-1.1-5.8-3-8l-3 2.7Z"}"></path></svg>
			<span class="${"text-xs"}">${escape(predictStatus)}</span></div>` : ``}</div>

`;
});
var index_svelte_svelte_type_style_lang = /* @__PURE__ */ (() => ".drawings.svelte-1sy339h{display:grid;grid-template-columns:2fr 1.5fr;place-items:center}@media(min-width: 530px){.drawings.svelte-1sy339h{grid-template-columns:repeat(2, minmax(0, 1fr))}}button.svelte-1sy339h{border-radius:0.5rem;border-width:1px;--tw-border-opacity:1;border-color:rgb(209 213 219 / var(--tw-border-opacity));--tw-bg-opacity:1;background-color:rgb(249 250 251 / var(--tw-bg-opacity));padding:0.25rem;font-size:0.875rem;line-height:1.25rem;--tw-text-opacity:1;color:rgb(17 24 39 / var(--tw-text-opacity))}button.svelte-1sy339h:focus{--tw-border-opacity:1;border-color:rgb(59 130 246 / var(--tw-border-opacity));--tw-ring-opacity:1;--tw-ring-color:rgb(59 130 246 / var(--tw-ring-opacity))}button.svelte-1sy339h:disabled{opacity:0.5}@media(prefers-color-scheme: dark){button.svelte-1sy339h{--tw-border-opacity:1;border-color:rgb(209 213 219 / var(--tw-border-opacity));--tw-bg-opacity:1;background-color:rgb(249 250 251 / var(--tw-bg-opacity))}button.svelte-1sy339h:focus{--tw-border-opacity:1;border-color:rgb(59 130 246 / var(--tw-border-opacity));--tw-ring-opacity:1;--tw-ring-color:rgb(59 130 246 / var(--tw-ring-opacity))}}.green.svelte-1sy339h{background-color:lightgreen;font-weight:bold;font-size:1.2em}")();
const css = {
  code: ".drawings.svelte-1sy339h{display:grid;grid-template-columns:2fr 1.5fr;place-items:center}@media(min-width: 530px){.drawings.svelte-1sy339h{grid-template-columns:repeat(2, minmax(0, 1fr))}}button.svelte-1sy339h{border-radius:0.5rem;border-width:1px;--tw-border-opacity:1;border-color:rgb(209 213 219 / var(--tw-border-opacity));--tw-bg-opacity:1;background-color:rgb(249 250 251 / var(--tw-bg-opacity));padding:0.25rem;font-size:0.875rem;line-height:1.25rem;--tw-text-opacity:1;color:rgb(17 24 39 / var(--tw-text-opacity))}button.svelte-1sy339h:focus{--tw-border-opacity:1;border-color:rgb(59 130 246 / var(--tw-border-opacity));--tw-ring-opacity:1;--tw-ring-color:rgb(59 130 246 / var(--tw-ring-opacity))}button.svelte-1sy339h:disabled{opacity:0.5}@media(prefers-color-scheme: dark){button.svelte-1sy339h{--tw-border-opacity:1;border-color:rgb(209 213 219 / var(--tw-border-opacity));--tw-bg-opacity:1;background-color:rgb(249 250 251 / var(--tw-bg-opacity))}button.svelte-1sy339h:focus{--tw-border-opacity:1;border-color:rgb(59 130 246 / var(--tw-border-opacity));--tw-ring-opacity:1;--tw-ring-color:rgb(59 130 246 / var(--tw-ring-opacity))}}.green.svelte-1sy339h{background-color:lightgreen;font-weight:bold;font-size:1.2em}",
  map: null
};
const Routes = create_ssr_component(($$result, $$props, $$bindings, slots) => {
  let $generateMap, $$unsubscribe_generateMap;
  let $saveResult, $$unsubscribe_saveResult;
  let $resultImage, $$unsubscribe_resultImage;
  $$unsubscribe_generateMap = subscribe(generateMap, (value) => $generateMap = value);
  $$unsubscribe_saveResult = subscribe(saveResult, (value) => $saveResult = value);
  $$unsubscribe_resultImage = subscribe(resultImage, (value) => $resultImage = value);
  $$result.css.add(css);
  $$unsubscribe_generateMap();
  $$unsubscribe_saveResult();
  $$unsubscribe_resultImage();
  return `<div class="${"max-w-screen-md mx-auto px-3 py-5 relative z-0"}"><article class="${"prose"}"><h1>Drawing to Map</h1>
		<p>This space is for the ControlNet model <a href="${"https://github.com/RubenGres/Drawing2Map"}" target="${"_blank"}"><span>Drawing2Map</span></a></p></article>


	${validate_component(BrushSelector, "BrushSelector").$$render($$result, {}, {}, {})}
	<div class="${"drawings py-3 -mx-3 svelte-1sy339h"}">${validate_component(DrawingCanvas, "DrawingCanvas").$$render($$result, {}, {}, {})}
		${validate_component(ResultCanvas, "ResultCanvas").$$render($$result, {}, {}, {})}</div>

	<button ${$generateMap === true ? "disabled" : ""} class="${"green svelte-1sy339h"}">Generate Map
	</button>

	<button ${$saveResult === true || !$resultImage ? "disabled" : ""} class="${"svelte-1sy339h"}">Save Result
	</button>

	${validate_component(TemplateGallery, "TemplateGallery").$$render($$result, {}, {}, {})}

	${validate_component(ParamsSelector, "ParamSelector").$$render($$result, {}, {}, {})}
</div>`;
});
export { Routes as default };