radames commited on
Commit
ad4628d
1 Parent(s): dd24c08

parametrize frame size

Browse files
frontend/src/lib/App.svelte CHANGED
@@ -15,7 +15,7 @@
15
  import { base64ToBlob, uploadImage } from '$lib/utils';
16
  import { nanoid } from 'nanoid';
17
  import LiveBlocks from '$lib/Icons/LiveBlocks.svelte';
18
- import { CANVAS_SIZE } from '$lib/constants';
19
 
20
  /**
21
  * The main Liveblocks code for the example.
@@ -29,8 +29,8 @@
29
  const initialPresence: Presence = {
30
  cursor: null,
31
  frame: {
32
- x: CANVAS_SIZE.width / 2 - 512 / 2,
33
- y: CANVAS_SIZE.height / 2 - 512 / 2
34
  },
35
  status: Status.dragging,
36
  currentPrompt: ''
 
15
  import { base64ToBlob, uploadImage } from '$lib/utils';
16
  import { nanoid } from 'nanoid';
17
  import LiveBlocks from '$lib/Icons/LiveBlocks.svelte';
18
+ import { CANVAS_SIZE, FRAME_SIZE} from '$lib/constants';
19
 
20
  /**
21
  * The main Liveblocks code for the example.
 
29
  const initialPresence: Presence = {
30
  cursor: null,
31
  frame: {
32
+ x: CANVAS_SIZE.width / 2 - FRAME_SIZE / 2,
33
+ y: CANVAS_SIZE.height / 2 - FRAME_SIZE / 2
34
  },
35
  status: Status.dragging,
36
  currentPrompt: ''
frontend/src/lib/Frame.svelte CHANGED
@@ -1,6 +1,6 @@
1
  <script lang="ts">
2
  import LoadingIcon from '$lib/Icons/LoadingIcon.svelte';
3
-
4
  import type { ZoomTransform } from 'd3-zoom';
5
 
6
  export let transform: ZoomTransform;
@@ -14,8 +14,10 @@
14
  </script>
15
 
16
  <div
17
- class="frame @apply absolute top-0 left-0 ring-8 ring-[#EC8E65] w-[512px] h-[512px]"
18
- style={`transform: translateX(${coord.x}px) translateY(${coord.y}px) scale(${transform.k}); transform-origin: 0 0;`}
 
 
19
  >
20
  <div class="pointer-events-none touch-none">
21
  <div class="font-bold text-xl text-[#EC8E65] text-center px-2 line-clamp-4">{prompt}</div>
 
1
  <script lang="ts">
2
  import LoadingIcon from '$lib/Icons/LoadingIcon.svelte';
3
+ import { FRAME_SIZE } from '$lib/constants';
4
  import type { ZoomTransform } from 'd3-zoom';
5
 
6
  export let transform: ZoomTransform;
 
14
  </script>
15
 
16
  <div
17
+ class="frame @apply absolute top-0 left-0 ring-8 ring-[#EC8E65]"
18
+ style={`width: ${FRAME_SIZE}px;
19
+ height: ${FRAME_SIZE}px;transform:
20
+ translateX(${coord.x}px) translateY(${coord.y}px) scale(${transform.k}); transform-origin: 0 0;`}
21
  >
22
  <div class="pointer-events-none touch-none">
23
  <div class="font-bold text-xl text-[#EC8E65] text-center px-2 line-clamp-4">{prompt}</div>
frontend/src/lib/PaintFrame.svelte CHANGED
@@ -4,7 +4,7 @@
4
  import MaskButton from '$lib/Buttons/MaskButton.svelte';
5
  import UndoButton from '$lib/Buttons/UndoButton.svelte';
6
  import LoadingIcon from '$lib/Icons/LoadingIcon.svelte';
7
- import { CANVAS_SIZE } from '$lib/constants';
8
 
9
  import { drag } from 'd3-drag';
10
  import { select } from 'd3-selection';
@@ -26,8 +26,8 @@
26
  let maskCtx: CanvasRenderingContext2D;
27
 
28
  let position = {
29
- x: CANVAS_SIZE.width / 2 - 512 / 2,
30
- y: CANVAS_SIZE.height / 2 - 512 / 2
31
  };
32
 
33
  let frameElement: HTMLDivElement;
@@ -52,9 +52,19 @@
52
 
53
  function cropCanvas(cursor: { x: number; y: number }) {
54
  maskCtx.save();
55
- maskCtx.clearRect(0, 0, 512, 512);
56
  maskCtx.globalCompositeOperation = 'source-over';
57
- maskCtx.drawImage($canvasEl, cursor.x, cursor.y, 512, 512, 0, 0, 512, 512);
 
 
 
 
 
 
 
 
 
 
58
  maskCtx.restore();
59
  }
60
  function drawLine(points: { x: number; y: number; lastx: number; lasty: number }) {
@@ -195,8 +205,13 @@
195
  class="absolute top-0 left-0 pen"
196
  style={`transform: translateX(${coord.x}px) translateY(${coord.y}px) scale(${transform.k}); transform-origin: 0 0;`}
197
  >
198
- <div class="frame">
199
- <canvas class={dragEnabled ? '' : 'bg-white'} bind:this={$maskEl} width="512" height="512" />
 
 
 
 
 
200
  <div class="pointer-events-none touch-none">
201
  {#if prompt}
202
  <div class="pointer-events-none touch-none">
@@ -261,15 +276,15 @@
261
  </div>
262
  <div
263
  bind:this={frameElement}
264
- class="absolute top-0 left-0 w-[512px] h-[512px] ring-8 hand
265
  {dragEnabled ? 'block' : 'hidden'}"
266
- style={`transform: translateX(${coord.x}px) translateY(${coord.y}px) scale(${transform.k}); transform-origin: 0 0;`}
267
  />
268
  </div>
269
 
270
  <style lang="postcss" scoped>
271
  .frame {
272
- @apply relative grid grid-cols-3 grid-rows-3 ring-8 ring-[#387CFF] w-[512px] h-[512px];
273
  }
274
  .hand {
275
  cursor: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAAUCAYAAABvVQZ0AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAHSSURBVHgBzVQ9LENRFD4VozZWP4ku/jqJAYNoEQaWNpEwIYJFBINY6UCn6mKTKhYNSTuwVFBiaEgai9bP4CWKUftqv845vU+k7evr2C/5cu6799zvnHvOvQ+gUmEqNimEsKLZQ3YgA0j6TiNXeJPJlIZygEK1yFAmo4rj0Kkg0Jj4DyHyMxKyIt/I+zH5LJrau8V76lPMLa6KjU2vyKhZsbHl1YTX8/dX5X071eyPdX5xDRrr68BiNsNJ+AxsrS1sCf6DIEQub2hoNxJjxO7ivHnMNZqzzlHAIJBIvkBPV6cm7JC11RULWMw1LELRhwf6IPXxxSSRyMU1ztk5mKpmyX9aV0x2KUoitMHW1sxHjd3HWYQyGh7sY1+Z3ZTRMfcpCxLxHwZhZnIc63TEC3TU3iEXj2XdqGGOomKyBhxNq1fi6ZVF3J5tyK+rPGqHXmZX6OAgR61eVCc9UBDE332rzlu3uj0+WRs7GKGxoY5MWi8zZWZygp1KZUSg6yIR1RNzYQeV2/MQLC/MQqmM5HoYb8CDNl/w0GUTlpFLVDPfzi5myZ0DW3szX5Ex5whYLGYFp/pRTAEjyHcaFoX4RvqKPXRTOaJoHJDrmoKMlv0Lqhj8AlEeE/77ZUZMAAAAAElFTkSuQmCC')
 
4
  import MaskButton from '$lib/Buttons/MaskButton.svelte';
5
  import UndoButton from '$lib/Buttons/UndoButton.svelte';
6
  import LoadingIcon from '$lib/Icons/LoadingIcon.svelte';
7
+ import { CANVAS_SIZE, FRAME_SIZE } from '$lib/constants';
8
 
9
  import { drag } from 'd3-drag';
10
  import { select } from 'd3-selection';
 
26
  let maskCtx: CanvasRenderingContext2D;
27
 
28
  let position = {
29
+ x: CANVAS_SIZE.width / 2 - FRAME_SIZE / 2,
30
+ y: CANVAS_SIZE.height / 2 - FRAME_SIZE / 2
31
  };
32
 
33
  let frameElement: HTMLDivElement;
 
52
 
53
  function cropCanvas(cursor: { x: number; y: number }) {
54
  maskCtx.save();
55
+ maskCtx.clearRect(0, 0, FRAME_SIZE, FRAME_SIZE);
56
  maskCtx.globalCompositeOperation = 'source-over';
57
+ maskCtx.drawImage(
58
+ $canvasEl,
59
+ cursor.x,
60
+ cursor.y,
61
+ FRAME_SIZE,
62
+ FRAME_SIZE,
63
+ 0,
64
+ 0,
65
+ FRAME_SIZE,
66
+ FRAME_SIZE
67
+ );
68
  maskCtx.restore();
69
  }
70
  function drawLine(points: { x: number; y: number; lastx: number; lasty: number }) {
 
205
  class="absolute top-0 left-0 pen"
206
  style={`transform: translateX(${coord.x}px) translateY(${coord.y}px) scale(${transform.k}); transform-origin: 0 0;`}
207
  >
208
+ <div class="frame" style={`width: ${FRAME_SIZE}px;height: ${FRAME_SIZE}px;`}>
209
+ <canvas
210
+ class={dragEnabled ? '' : 'bg-white'}
211
+ bind:this={$maskEl}
212
+ width="FRAME_SIZE"
213
+ height="FRAME_SIZE"
214
+ />
215
  <div class="pointer-events-none touch-none">
216
  {#if prompt}
217
  <div class="pointer-events-none touch-none">
 
276
  </div>
277
  <div
278
  bind:this={frameElement}
279
+ class="absolute top-0 left-0 ring-8 hand
280
  {dragEnabled ? 'block' : 'hidden'}"
281
+ style={`width: ${FRAME_SIZE}px;height: ${FRAME_SIZE}px;transform: translateX(${coord.x}px) translateY(${coord.y}px) scale(${transform.k}); transform-origin: 0 0;`}
282
  />
283
  </div>
284
 
285
  <style lang="postcss" scoped>
286
  .frame {
287
+ @apply relative grid grid-cols-3 grid-rows-3 ring-8 ring-[#387CFF];
288
  }
289
  .hand {
290
  cursor: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAAUCAYAAABvVQZ0AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAHSSURBVHgBzVQ9LENRFD4VozZWP4ku/jqJAYNoEQaWNpEwIYJFBINY6UCn6mKTKhYNSTuwVFBiaEgai9bP4CWKUftqv845vU+k7evr2C/5cu6799zvnHvOvQ+gUmEqNimEsKLZQ3YgA0j6TiNXeJPJlIZygEK1yFAmo4rj0Kkg0Jj4DyHyMxKyIt/I+zH5LJrau8V76lPMLa6KjU2vyKhZsbHl1YTX8/dX5X071eyPdX5xDRrr68BiNsNJ+AxsrS1sCf6DIEQub2hoNxJjxO7ivHnMNZqzzlHAIJBIvkBPV6cm7JC11RULWMw1LELRhwf6IPXxxSSRyMU1ztk5mKpmyX9aV0x2KUoitMHW1sxHjd3HWYQyGh7sY1+Z3ZTRMfcpCxLxHwZhZnIc63TEC3TU3iEXj2XdqGGOomKyBhxNq1fi6ZVF3J5tyK+rPGqHXmZX6OAgR61eVCc9UBDE332rzlu3uj0+WRs7GKGxoY5MWi8zZWZygp1KZUSg6yIR1RNzYQeV2/MQLC/MQqmM5HoYb8CDNl/w0GUTlpFLVDPfzi5myZ0DW3szX5Ex5whYLGYFp/pRTAEjyHcaFoX4RvqKPXRTOaJoHJDrmoKMlv0Lqhj8AlEeE/77ZUZMAAAAAElFTkSuQmCC')
frontend/src/lib/constants.ts CHANGED
@@ -13,4 +13,7 @@ export const MAX_CAPACITY = 20;
13
  export const CANVAS_SIZE = {
14
  width: 512 * 6,
15
  height: 512 * 6,
16
- }
 
 
 
 
13
  export const CANVAS_SIZE = {
14
  width: 512 * 6,
15
  height: 512 * 6,
16
+ }
17
+ export const GRID_SIZE = 32
18
+
19
+ export const FRAME_SIZE = 512
frontend/src/lib/utils.ts CHANGED
@@ -1,5 +1,5 @@
1
  import { PUBLIC_API_BASE } from '$env/static/public';
2
- import { CANVAS_SIZE } from '$lib/constants';
3
 
4
  export function base64ToBlob(base64image: string): Promise<Blob> {
5
  return new Promise((resolve) => {
@@ -44,10 +44,9 @@ export async function uploadImage(imagBlob: Blob, prompt: string, key: string):
44
 
45
  return res;
46
  }
47
- const MAX = CANVAS_SIZE.width - 512
48
-
49
- export function round(pos: number, size = 32) {
50
- const value = pos % size < size / 2 ? pos - (pos % size) : pos + size - (pos % size);
51
  return Math.max(0, Math.min(Math.round(value), MAX))
52
  }
53
 
 
1
  import { PUBLIC_API_BASE } from '$env/static/public';
2
+ import { CANVAS_SIZE, GRID_SIZE, FRAME_SIZE } from '$lib/constants';
3
 
4
  export function base64ToBlob(base64image: string): Promise<Blob> {
5
  return new Promise((resolve) => {
 
44
 
45
  return res;
46
  }
47
+ const MAX = CANVAS_SIZE.width - FRAME_SIZE
48
+ export function round(pos: number) {
49
+ const value = pos % GRID_SIZE < GRID_SIZE / 2 ? pos - (pos % GRID_SIZE) : pos + GRID_SIZE - (pos % GRID_SIZE);
 
50
  return Math.max(0, Math.min(Math.round(value), MAX))
51
  }
52
 
stablediffusion-infinity/rooms.db CHANGED
Binary files a/stablediffusion-infinity/rooms.db and b/stablediffusion-infinity/rooms.db differ