├── .gitignore
├── .yarnrc.yml
├── README.md
├── app.config.ts
├── app.vue
├── components
    ├── PredictionPoller.vue
    └── ui
    │   ├── Canvas.vue
    │   ├── LeftPanel.vue
    │   ├── TopPanel.vue
    │   └── form
    │       ├── Create.vue
    │       ├── Finetune.vue
    │       └── VersionPicker.vue
├── nuxt.config.ts
├── package.json
├── pages
    └── index.vue
├── prettier.config.cjs
├── public
    ├── cover.jpg
    ├── favicon.ico
    └── replicate-logo.svg
├── server
    ├── api
    │   ├── model.post.js
    │   ├── prediction.get.js
    │   ├── prediction.post.js
    │   ├── search.get.js
    │   └── training.post.js
    └── tsconfig.json
├── stores
    ├── prediction.js
    └── version.js
├── tsconfig.json
└── yarn.lock


/.gitignore:
--------------------------------------------------------------------------------
 1 | # Nuxt dev/build outputs
 2 | .output
 3 | .data
 4 | .nuxt
 5 | .nitro
 6 | .cache
 7 | dist
 8 | 
 9 | # Node dependencies
10 | node_modules
11 | 
12 | # Logs
13 | logs
14 | *.log
15 | 
16 | # Misc
17 | .DS_Store
18 | .fleet
19 | .idea
20 | .yarn
21 | 
22 | # Local env files
23 | .env
24 | .env.*
25 | !.env.example
26 | 


--------------------------------------------------------------------------------
/.yarnrc.yml:
--------------------------------------------------------------------------------
1 | nodeLinker: node-modules
2 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # ReFlux
 2 | 
 3 | Look at the [Nuxt 3 documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
 4 | 
 5 | ## Setup
 6 | 
 7 | Make sure to install the dependencies:
 8 | 
 9 | ```bash
10 | # npm
11 | npm install
12 | 
13 | # pnpm
14 | pnpm install
15 | 
16 | # yarn
17 | yarn install
18 | 
19 | # bun
20 | bun install
21 | ```
22 | 
23 | ## Development Server
24 | 
25 | Start the development server on `http://localhost:3000`:
26 | 
27 | ```bash
28 | # npm
29 | npm run dev
30 | 
31 | # pnpm
32 | pnpm run dev
33 | 
34 | # yarn
35 | yarn dev
36 | 
37 | # bun
38 | bun run dev
39 | ```
40 | 
41 | ## Production
42 | 
43 | Build the application for production:
44 | 
45 | ```bash
46 | # npm
47 | npm run build
48 | 
49 | # pnpm
50 | pnpm run build
51 | 
52 | # yarn
53 | yarn build
54 | 
55 | # bun
56 | bun run build
57 | ```
58 | 
59 | Locally preview production build:
60 | 
61 | ```bash
62 | # npm
63 | npm run preview
64 | 
65 | # pnpm
66 | pnpm run preview
67 | 
68 | # yarn
69 | yarn preview
70 | 
71 | # bun
72 | bun run preview
73 | ```
74 | 
75 | Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.
76 | 


--------------------------------------------------------------------------------
/app.config.ts:
--------------------------------------------------------------------------------
1 | export default defineAppConfig({
2 |   ui: {
3 |     primary: 'yellow',
4 |     gray: 'stone'
5 |   }
6 | })
7 | 


--------------------------------------------------------------------------------
/app.vue:
--------------------------------------------------------------------------------
 1 | <template lang="pug">
 2 | .relative.flex.flex-col.min-h-screen
 3 |   nuxt-page
 4 | </template>
 5 | 
 6 | <script>
 7 | export default {
 8 |   name: 'app'
 9 | }
10 | </script>
11 | 
12 | <style lang="stylus" scoped></style>
13 | 


--------------------------------------------------------------------------------
/components/PredictionPoller.vue:
--------------------------------------------------------------------------------
 1 | <template lang="pug"></template>
 2 | 
 3 | <script>
 4 | import { mapState, mapActions } from 'pinia'
 5 | import { usePredictionStore } from '~/stores/prediction'
 6 | 
 7 | const POLL_INTERVAL = 3000
 8 | 
 9 | export default {
10 |   name: 'PredictionPoller',
11 |   data: () => ({
12 |     interval: null
13 |   }),
14 |   computed: mapState(usePredictionStore, ['incompletePredictions']),
15 |   methods: {
16 |     ...mapActions(usePredictionStore, ['pollIncompletePredictions']),
17 |     clearInterval() {
18 |       if (this.interval) {
19 |         clearInterval(this.interval)
20 |         this.interval = null
21 |       }
22 |     }
23 |   },
24 |   watch: {
25 |     incompletePredictions: {
26 |       immediate: true,
27 |       handler(incompletePredictions) {
28 |         if (incompletePredictions.length <= 0) {
29 |           this.clearInterval()
30 |           return
31 |         }
32 | 
33 |         if (!this.interval) {
34 |           this.interval = setInterval(
35 |             this.pollIncompletePredictions,
36 |             POLL_INTERVAL
37 |           )
38 |         }
39 |       }
40 |     }
41 |   },
42 |   beforeDestroy() {
43 |     this.clearinterval()
44 |   }
45 | }
46 | </script>
47 | 


--------------------------------------------------------------------------------
/components/ui/Canvas.vue:
--------------------------------------------------------------------------------
   1 | <template lang="pug">
   2 | .w-full.height-full.overflow-hidden(@contextmenu.prevent="onContextMenu")
   3 |   #canvas(
   4 |     :style="containerStyles"
   5 |     ref="canvas"
   6 |   )
   7 |   u-context-menu(
   8 |     v-model="isContextMenuOpen"
   9 |     :virtual-element="virtualElement"
  10 |     :ui="{ transition: { enterActiveClass: 'transition-none', enterFromClass: 'transition-none', enterToClass: 'transition-none', leaveActiveClass: 'transition-none', leaveFromClass: 'transition-none', leaveToClass: 'transition-none' } }"
  11 |   )
  12 |     u-vertical-navigation(
  13 |       :links="contextMenuLinks"
  14 |       :ui="{ size: 'text-xs', font: 'font-normal' }"
  15 |     )
  16 | </template>
  17 | 
  18 | <script>
  19 | import Konva from 'konva'
  20 | import { useLocalStorage, useMouse, useWindowScroll } from '@vueuse/core'
  21 | import { mapState, mapActions } from 'pinia'
  22 | 
  23 | const BORDER_WIDTH = 1
  24 | 
  25 | export default {
  26 |   name: 'UiCanvas',
  27 |   setup() {
  28 |     const tool = useLocalStorage('reflux-tool', 'V')
  29 |     const canvasState = useLocalStorage('reflux-canvas-state-test', {
  30 |       stagePosition: { x: 0, y: 0 },
  31 |       stageScale: { x: 1, y: 1 }
  32 |     })
  33 | 
  34 |     const moveTransformerNodesRef = ref(() => {})
  35 |     const copyTransformerNodesRef = ref(() => {})
  36 |     const copyTransformerNodesUrlRef = ref(() => {})
  37 |     const pasteTransformerNodesRef = ref(() => {})
  38 |     const deleteTransformerNodesRef = ref(() => {})
  39 |     const downloadTransformerNodesRef = ref(() => {})
  40 | 
  41 |     // Add keypress handler
  42 |     onKeyStroke('Backspace', (e) => {
  43 |       if (!['INPUT', 'TEXTAREA'].includes(document.activeElement.tagName)) {
  44 |         e.preventDefault()
  45 |         deleteTransformerNodesRef.value()
  46 |       }
  47 |     })
  48 |     useEventListener(document, 'keydown', (e) => {
  49 |       if (!['INPUT', 'TEXTAREA'].includes(document.activeElement.tagName)) {
  50 |         if (e.key === ']' || e.key === '}') {
  51 |           e.preventDefault()
  52 |           moveTransformerNodesRef.value('up', e.shiftKey)
  53 |         } else if (e.key === '[' || e.key === '{') {
  54 |           e.preventDefault()
  55 |           moveTransformerNodesRef.value('down', e.shiftKey)
  56 |         } else if (e.key === 'c' && e.metaKey) {
  57 |           e.preventDefault()
  58 |           if (e.shiftKey) {
  59 |             copyTransformerNodesUrlRef.value()
  60 |           } else {
  61 |             copyTransformerNodesRef.value()
  62 |           }
  63 |         } else if (e.key === 'x' && e.metaKey) {
  64 |           e.preventDefault()
  65 |           copyTransformerNodesRef.value(true)
  66 |         } else if (e.key === 'v' && e.metaKey) {
  67 |           e.preventDefault()
  68 |           pasteTransformerNodesRef.value()
  69 |         } else if (e.key === 's' && e.metaKey && e.shiftKey) {
  70 |           e.preventDefault()
  71 |           downloadTransformerNodesRef.value()
  72 |         }
  73 |       }
  74 |     })
  75 | 
  76 |     // Setup context menu
  77 |     const { x, y } = useMouse()
  78 |     const { y: windowY } = useWindowScroll()
  79 | 
  80 |     const { metaSymbol } = useShortcuts()
  81 |     const isContextMenuOpen = ref(false)
  82 |     const virtualElement = ref({ getBoundingClientRect: () => ({}) })
  83 | 
  84 |     function onContextMenu(e) {
  85 |       const top = unref(y) - unref(windowY)
  86 |       const left = unref(x)
  87 | 
  88 |       virtualElement.value.getBoundingClientRect = () => ({
  89 |         width: 0,
  90 |         height: 0,
  91 |         top,
  92 |         left
  93 |       })
  94 | 
  95 |       isContextMenuOpen.value = true
  96 |     }
  97 | 
  98 |     return {
  99 |       tool,
 100 |       canvasState,
 101 | 
 102 |       moveTransformerNodesRef,
 103 |       copyTransformerNodesRef,
 104 |       copyTransformerNodesUrlRef,
 105 |       pasteTransformerNodesRef,
 106 |       deleteTransformerNodesRef,
 107 |       downloadTransformerNodesRef,
 108 | 
 109 |       metaSymbol,
 110 |       virtualElement,
 111 |       onContextMenu,
 112 |       isContextMenuOpen
 113 |     }
 114 |   },
 115 |   data: () => ({
 116 |     stage: null,
 117 |     layer: null,
 118 |     transformer: null,
 119 | 
 120 |     isDragging: false,
 121 |     selection: {
 122 |       layer: null,
 123 |       startPos: null,
 124 |       rect: null,
 125 |       nodes: []
 126 |     },
 127 |     clipboard: null
 128 |   }),
 129 |   computed: {
 130 |     ...mapState(usePredictionStore, ['outputs']),
 131 |     containerStyles() {
 132 |       return {
 133 |         cursor:
 134 |           this.tool === 'V' ? 'default' : this.isDragging ? 'grabbing' : 'grab'
 135 |       }
 136 |     },
 137 |     contextMenuLinks() {
 138 |       const manipulationLinks = [
 139 |         {
 140 |           label: 'Paste',
 141 |           badge: `${this.metaSymbol} V`,
 142 |           click: () => {
 143 |             this.pasteTransformerNodes()
 144 |             this.isContextMenuOpen = false
 145 |           }
 146 |         }
 147 |       ]
 148 |       const copyLinks = []
 149 |       const movementLinks = []
 150 |       const downloadLinks = []
 151 | 
 152 |       if (this.selection.nodes.length > 0) {
 153 |         manipulationLinks.push(
 154 |           {
 155 |             label: 'Cut',
 156 |             badge: `${this.metaSymbol} X`,
 157 |             click: () => {
 158 |               this.copyTransformerNodes(true)
 159 |               this.isContextMenuOpen = false
 160 |             }
 161 |           },
 162 |           {
 163 |             label: 'Copy',
 164 |             badge: `${this.metaSymbol} C`,
 165 |             click: () => {
 166 |               this.copyTransformerNodes()
 167 |               this.isContextMenuOpen = false
 168 |             }
 169 |           },
 170 |           {
 171 |             label: 'Delete',
 172 |             badge: '⌫',
 173 |             click: () => {
 174 |               this.deleteTransformerNodes()
 175 |               this.isContextMenuOpen = false
 176 |             }
 177 |           }
 178 |         )
 179 | 
 180 |         copyLinks.push({
 181 |           label: 'Copy Link',
 182 |           badge: `${this.metaSymbol} ⇧ C`,
 183 |           disabled: this.selection.nodes.length !== 1,
 184 |           click: () => {
 185 |             this.copyTransformerNodesUrl()
 186 |             this.isContextMenuOpen = false
 187 |           }
 188 |         })
 189 | 
 190 |         movementLinks.push(
 191 |           {
 192 |             label: 'Move Forward',
 193 |             badge: ']',
 194 |             click: () => {
 195 |               this.moveTransformerNodes('up', false)
 196 |               this.isContextMenuOpen = false
 197 |             }
 198 |           },
 199 |           {
 200 |             label: 'Send Backward',
 201 |             badge: ']',
 202 |             click: () => {
 203 |               this.moveTransformerNodes('down', false)
 204 |               this.isContextMenuOpen = false
 205 |             }
 206 |           },
 207 |           {
 208 |             label: 'Bring to Front',
 209 |             badge: '⇧ ]',
 210 |             click: () => {
 211 |               this.moveTransformerNodes('up', true)
 212 |               this.isContextMenuOpen = false
 213 |             }
 214 |           },
 215 |           {
 216 |             label: 'Send to Back',
 217 |             badge: '⇧ [',
 218 |             click: () => {
 219 |               this.moveTransformerNodes('down', true)
 220 |               this.isContextMenuOpen = false
 221 |             }
 222 |           }
 223 |         )
 224 | 
 225 |         downloadLinks.push({
 226 |           label: 'Download',
 227 |           badge: `${this.metaSymbol} ⇧ S`,
 228 |           click: () => {
 229 |             this.downloadTransformerNodes()
 230 |             this.isContextMenuOpen = false
 231 |           }
 232 |         })
 233 |       }
 234 | 
 235 |       const links = []
 236 |       if (manipulationLinks.length > 0) {
 237 |         links.push(manipulationLinks)
 238 |       }
 239 |       if (copyLinks.length > 0) {
 240 |         links.push(copyLinks)
 241 |       }
 242 |       if (movementLinks.length > 0) {
 243 |         links.push(movementLinks)
 244 |       }
 245 |       if (downloadLinks.length > 0) {
 246 |         links.push(downloadLinks)
 247 |       }
 248 | 
 249 |       return links
 250 |     }
 251 |   },
 252 |   watch: {
 253 |     tool: {
 254 |       immediated: true,
 255 |       handler(tool) {
 256 |         if (this.stage) {
 257 |           const isDraggable = tool === 'H'
 258 |           this.stage.draggable(isDraggable)
 259 | 
 260 |           // Update draggability of all .outputs on the stage
 261 |           this.stage.find('.output').forEach((group) => {
 262 |             group.draggable(!isDraggable)
 263 |           })
 264 | 
 265 |           // Enable/disable transformer based on the tool
 266 |           this.transformer.resizeEnabled(!isDraggable)
 267 |           this.transformer.rotateEnabled(!isDraggable)
 268 |         }
 269 |       }
 270 |     },
 271 |     outputs: {
 272 |       deep: true,
 273 |       handler() {
 274 |         this.updateCanvas()
 275 |       }
 276 |     }
 277 |   },
 278 |   methods: {
 279 |     ...mapActions(usePredictionStore, [
 280 |       'updateOutputPosition',
 281 |       'addOutput',
 282 |       'removeOutput'
 283 |     ]),
 284 |     handleMouseDown(e) {
 285 |       this.isDragging = true
 286 | 
 287 |       if (this.tool === 'V') {
 288 |         // Check if the target is a transformer handle
 289 |         if (
 290 |           e.target.getParent() &&
 291 |           e.target.getParent().className === 'Transformer'
 292 |         ) {
 293 |           return // Exit early if it's a transformer handle
 294 |         }
 295 | 
 296 |         const metaPressed = e.evt.shiftKey || e.evt.ctrlKey || e.evt.metaKey
 297 | 
 298 |         if (e.target instanceof Konva.Stage) {
 299 |           if (!metaPressed) {
 300 |             this.setTransformerNodes([])
 301 |           }
 302 |           this.selection.startPos = this.getRelativePointerPosition()
 303 | 
 304 |           this.selection.rect = new Konva.Rect({
 305 |             fill: 'rgba(235, 179, 5, 0.1)',
 306 |             stroke: '#ebb305',
 307 |             strokeWidth: 1 / this.stage.scaleX(), // Adjust line width based on zoom
 308 |             visible: false
 309 |           })
 310 |           this.selection.layer.add(this.selection.rect)
 311 |         } else {
 312 |           // Find the top-level Group
 313 |           let topGroup = e.target
 314 |           while (topGroup.getAttr('name') !== 'output') {
 315 |             topGroup = topGroup.getParent()
 316 |           }
 317 | 
 318 |           this.hideBorder(topGroup) // Remove stroke when deselected
 319 | 
 320 |           const isSelected = this.transformer.nodes().indexOf(topGroup) >= 0
 321 |           if (!isSelected) {
 322 |             if (metaPressed) {
 323 |               const nodes = this.transformer.nodes().concat([topGroup])
 324 |               this.setTransformerNodes(nodes)
 325 |             } else {
 326 |               this.setTransformerNodes([topGroup])
 327 |             }
 328 |           } else if (metaPressed) {
 329 |             const nodes = this.transformer
 330 |               .nodes()
 331 |               .filter((node) => node !== topGroup)
 332 |             this.setTransformerNodes(nodes)
 333 |           }
 334 |         }
 335 |       }
 336 |     },
 337 |     handleMouseMove(e) {
 338 |       if (this.tool === 'V' && this.selection.startPos && this.isDragging) {
 339 |         const pos = this.getRelativePointerPosition()
 340 |         this.selection.rect.setAttrs({
 341 |           visible: true,
 342 |           x: Math.min(pos.x, this.selection.startPos.x),
 343 |           y: Math.min(pos.y, this.selection.startPos.y),
 344 |           width: Math.abs(pos.x - this.selection.startPos.x),
 345 |           height: Math.abs(pos.y - this.selection.startPos.y)
 346 |         })
 347 | 
 348 |         // Update transformer with intersecting .outputs
 349 |         const groups = this.stage.find('.output').filter((group) => {
 350 |           // Exclude selection rectangle, transformer, and its handlers
 351 |           return (
 352 |             !(group instanceof Konva.Transformer) &&
 353 |             group.getParent().className !== 'Transformer'
 354 |           )
 355 |         })
 356 |         const box = this.selection.rect.getClientRect()
 357 |         const selected = groups.filter((group) =>
 358 |           Konva.Util.haveIntersection(box, group.getClientRect())
 359 |         )
 360 | 
 361 |         const metaPressed = e.evt.shiftKey || e.evt.ctrlKey || e.evt.metaKey
 362 |         if (metaPressed) {
 363 |           const currentNodes = this.transformer.nodes()
 364 |           const newNodes = selected.filter(
 365 |             (group) => !currentNodes.includes(group)
 366 |           )
 367 |           this.setTransformerNodes(currentNodes.concat(newNodes))
 368 |         } else {
 369 |           this.setTransformerNodes(selected)
 370 |         }
 371 | 
 372 |         this.selection.layer.batchDraw()
 373 |         this.layer.batchDraw()
 374 |       }
 375 |     },
 376 |     handleMouseUp(e) {
 377 |       this.isDragging = false
 378 | 
 379 |       if (this.tool === 'V') {
 380 |         if (this.selection.rect) {
 381 |           this.selection.rect.destroy()
 382 |         }
 383 | 
 384 |         this.selection.rect = null
 385 |         this.selection.startPos = null
 386 |         this.selection.layer.batchDraw()
 387 |         this.layer.batchDraw()
 388 |       }
 389 |     },
 390 |     handleWheel(e) {
 391 |       this.zoom(e)
 392 |       this.saveCanvasState()
 393 |     },
 394 |     zoom(e) {
 395 |       e.evt.preventDefault()
 396 | 
 397 |       const stage = e.target.getStage()
 398 |       const position = { x: stage.x(), y: stage.y() }
 399 | 
 400 |       // Zooming
 401 |       if (e.evt.ctrlKey) {
 402 |         const scaleBy = 1.02
 403 |         const minZoom = 0.2
 404 |         const maxZoom = 20
 405 |         const oldScale = stage.scaleX()
 406 | 
 407 |         const mousePointTo = {
 408 |           x: stage.getPointerPosition().x / oldScale - stage.x() / oldScale,
 409 |           y: stage.getPointerPosition().y / oldScale - stage.y() / oldScale
 410 |         }
 411 | 
 412 |         let newScale =
 413 |           e.evt.deltaY < 0 ? oldScale * scaleBy : oldScale / scaleBy
 414 | 
 415 |         // Clamp the scale between minZoom and maxZoom
 416 |         newScale = Math.max(minZoom, Math.min(newScale, maxZoom))
 417 | 
 418 |         stage.scale({ x: newScale, y: newScale })
 419 | 
 420 |         // Update stroke width only for .outputs with non-zero strokeWidth
 421 |         this.stage.find('.output').forEach((group) => {
 422 |           const border = group.findOne('.border')
 423 |           if (border) {
 424 |             this.updateBorder(group)
 425 |           }
 426 |         })
 427 | 
 428 |         position.x =
 429 |           -(mousePointTo.x - stage.getPointerPosition().x / newScale) * newScale
 430 |         position.y =
 431 |           -(mousePointTo.y - stage.getPointerPosition().y / newScale) * newScale
 432 | 
 433 |         // Panning
 434 |       } else {
 435 |         const deltaX = e.evt.deltaX
 436 |         const deltaY = e.evt.deltaY
 437 | 
 438 |         position.x = stage.x() - deltaX
 439 |         position.y = stage.y() - deltaY
 440 |       }
 441 | 
 442 |       stage.position(position)
 443 |       stage.batchDraw()
 444 |     },
 445 |     getRelativePointerPosition() {
 446 |       const transform = this.stage.getAbsoluteTransform().copy()
 447 |       transform.invert()
 448 |       const pos = this.stage.getPointerPosition()
 449 |       return transform.point(pos)
 450 |     },
 451 |     loadCanvasState() {
 452 |       this.stage.position(this.canvasState.stagePosition)
 453 |       this.stage.scale(this.canvasState.stageScale)
 454 |       this.layer.batchDraw()
 455 |     },
 456 |     saveCanvasState() {
 457 |       this.canvasState = {
 458 |         stagePosition: this.stage.position(),
 459 |         stageScale: this.stage.scale()
 460 |       }
 461 |     },
 462 |     hasOutputGroupChanged(group, output) {
 463 |       return (
 464 |         group.width() !== output.metadata.width ||
 465 |         group.height() !== output.metadata.height ||
 466 |         group.getAttr('status') !== output.status
 467 |       )
 468 |     },
 469 |     updateCanvas() {
 470 |       // Remove .outputs that are not in the outputs array
 471 |       this.layer.find('.output').forEach((group) => {
 472 |         if (!this.outputs.some((output) => output.id === group.id())) {
 473 |           group.destroy()
 474 |         }
 475 |       })
 476 | 
 477 |       // Update or add .outputs for each output
 478 |       this.outputs.forEach((output) => {
 479 |         let group = this.stage.findOne(`#${output.id}`)
 480 |         if (!group) {
 481 |           group = this.createOutput(output)
 482 |           this.layer.add(group)
 483 |           this.updateOutputGroup(group, output)
 484 |         } else {
 485 |           // Only update if the shape's properties have changed
 486 |           if (this.hasOutputGroupChanged(group, output)) {
 487 |             this.updateOutputGroup(group, output)
 488 |           }
 489 |         }
 490 |       })
 491 | 
 492 |       // Always move transformer to to after a new shape has been added
 493 |       this.transformer.moveToTop()
 494 | 
 495 |       this.layer.batchDraw()
 496 |     },
 497 |     createOutput(output) {
 498 |       const group = new Konva.Group({
 499 |         name: 'output',
 500 |         id: output.id,
 501 |         x: output.metadata.x,
 502 |         y: output.metadata.y,
 503 |         rotation: output.metadata.rotation,
 504 |         width: output.metadata.width,
 505 |         height: output.metadata.height,
 506 |         draggable: this.tool !== 'H'
 507 |       })
 508 | 
 509 |       const content = new Konva.Rect({
 510 |         name: 'content',
 511 |         width: output.metadata.width,
 512 |         height: output.metadata.height,
 513 |         fill: '#f0f0f0'
 514 |       })
 515 | 
 516 |       const border = new Konva.Rect({
 517 |         name: 'border',
 518 |         width: output.metadata.width,
 519 |         height: output.metadata.height,
 520 |         stroke: '#ebb305',
 521 |         strokeWidth: BORDER_WIDTH,
 522 |         visible: false
 523 |       })
 524 | 
 525 |       group.add(content, border)
 526 | 
 527 |       group.on('mouseenter', () => {
 528 |         if (this.tool === 'V' && !this.transformer.nodes().includes(group)) {
 529 |           this.showBorder(group)
 530 |         }
 531 |       })
 532 | 
 533 |       group.on('mouseleave', () => {
 534 |         if (this.tool === 'V' && !this.transformer.nodes().includes(group)) {
 535 |           this.hideBorder(group)
 536 |         }
 537 |       })
 538 | 
 539 |       group.on('dragend', () => {
 540 |         this.updateOutputPosition({
 541 |           id: output.id,
 542 |           x: group.x(),
 543 |           y: group.y(),
 544 |           rotation: group.rotation(),
 545 |           width: group.width(),
 546 |           height: group.height()
 547 |         })
 548 |       })
 549 | 
 550 |       group.on('transformend', () => {
 551 |         this.updateOutputPosition({
 552 |           id: output.id,
 553 |           x: group.x(),
 554 |           y: group.y(),
 555 |           rotation: group.rotation(),
 556 |           width: group.width() * group.scaleX(),
 557 |           height: group.height() * group.scaleY()
 558 |         })
 559 | 
 560 |         // Reset scale after updating width and height
 561 |         group.scaleX(1)
 562 |         group.scaleY(1)
 563 |       })
 564 | 
 565 |       return group
 566 |     },
 567 |     showBorder(group) {
 568 |       const border = group.findOne('.border')
 569 |       border.moveToTop()
 570 |       border.visible(true)
 571 |       this.updateBorder(group)
 572 |       this.layer.batchDraw()
 573 |     },
 574 |     hideBorder(group) {
 575 |       const border = group.findOne('.border')
 576 |       border.visible(false)
 577 |       this.layer.batchDraw()
 578 |     },
 579 |     updateBorder(group) {
 580 |       const border = group.findOne('.border')
 581 |       const content = group.findOne('.content')
 582 |       border.setAttrs({
 583 |         width: content.width() * content.scaleX(),
 584 |         height: content.height() * content.scaleY(),
 585 |         strokeWidth: BORDER_WIDTH / this.stage.scaleX()
 586 |       })
 587 |     },
 588 |     updateOutputGroup(group, output) {
 589 |       group.setAttrs({
 590 |         x: output.metadata.x,
 591 |         y: output.metadata.y,
 592 |         rotation: output.metadata.rotation,
 593 |         width: output.metadata.width,
 594 |         height: output.metadata.height,
 595 |         status: output.status
 596 |       })
 597 | 
 598 |       const content = group.findOne('.content')
 599 |       content.setAttrs({
 600 |         width: output.metadata.width,
 601 |         height: output.metadata.height
 602 |       })
 603 | 
 604 |       this.updateBorder(group)
 605 | 
 606 |       // Remove existing placeholder text if it exists
 607 |       const existingText = group.findOne('.text')
 608 |       if (existingText) {
 609 |         existingText.destroy()
 610 |       }
 611 | 
 612 |       if (output.status === 'succeeded' && output.output && output.output[0]) {
 613 |         const img = new Image()
 614 |         img.onload = () => {
 615 |           const imageShape = new Konva.Image({
 616 |             image: img,
 617 |             width: output.metadata.width,
 618 |             height: output.metadata.height
 619 |           })
 620 |           content.destroy()
 621 |           group.add(imageShape)
 622 |           imageShape.setAttr('name', 'content')
 623 |           this.updateBorder(group)
 624 |           this.layer.batchDraw()
 625 |         }
 626 |         img.onerror = () => {
 627 |           this.createPlaceholder(group, 'Error loading image')
 628 |         }
 629 |         img.src = output.output[0]
 630 |       } else {
 631 |         this.createPlaceholder(group, output.status)
 632 |       }
 633 | 
 634 |       // Update the transformer if this group is selected
 635 |       if (this.transformer.nodes().includes(group)) {
 636 |         this.transformer.forceUpdate()
 637 |       }
 638 |     },
 639 |     createPlaceholder(group, status) {
 640 |       const content = group.findOne('.content')
 641 |       content.fill('#f0f0f0')
 642 | 
 643 |       // Remove existing placeholder text if it exists
 644 |       const existingText = group.findOne('.text')
 645 |       if (existingText) {
 646 |         existingText.destroy()
 647 |       }
 648 | 
 649 |       const text = new Konva.Text({
 650 |         name: 'text',
 651 |         text: status,
 652 |         fontSize: 14,
 653 |         fill: '#333',
 654 |         width: content.width(),
 655 |         align: 'center',
 656 |         verticalAlign: 'middle'
 657 |       })
 658 |       text.position({
 659 |         x: group.width() / 2 - text.width() / 2,
 660 |         y: group.height() / 2 - text.height() / 2
 661 |       })
 662 |       group.add(text)
 663 |       this.layer.batchDraw()
 664 |     },
 665 | 
 666 |     // Transformer utils
 667 |     setTransformerNodes(nodes = []) {
 668 |       this.transformer.nodes(nodes)
 669 |       this.selection.nodes = nodes
 670 |     },
 671 |     copyTransformerNodes(cut = false) {
 672 |       const selectedNodes = this.selection.nodes
 673 |       if (selectedNodes.length === 0) {
 674 |         return
 675 |       }
 676 | 
 677 |       const clipboardData = selectedNodes.map((node) => {
 678 |         const output = this.outputs.find((o) => o.id === node.id())
 679 |         return {
 680 |           ...output,
 681 |           metadata: {
 682 |             ...output.metadata,
 683 |             x: node.x(),
 684 |             y: node.y(),
 685 |             rotation: node.rotation(),
 686 |             width: node.width(),
 687 |             height: node.height()
 688 |           }
 689 |         }
 690 |       })
 691 | 
 692 |       this.clipboard = clipboardData
 693 | 
 694 |       if (cut) {
 695 |         this.deleteTransformerNodes()
 696 |       }
 697 |     },
 698 |     copyTransformerNodesUrl() {
 699 |       const selectedNodes = this.selection.nodes
 700 |       if (selectedNodes.length !== 1) {
 701 |         return
 702 |       }
 703 |       const selectedNode = selectedNodes[0]
 704 |       const output = this.outputs.find((o) => o.id === selectedNode.id())
 705 |       if (output) {
 706 |         const prediction_id = output?.metadata?.prediction_id
 707 |         if (prediction_id) {
 708 |           navigator.clipboard.writeText(
 709 |             `https://replicate.com/p/${prediction_id}`
 710 |           )
 711 |         }
 712 |       }
 713 |     },
 714 |     pasteTransformerNodes() {
 715 |       if (!this.clipboard || this.clipboard.length === 0) {
 716 |         return
 717 |       }
 718 | 
 719 |       const mousePos = this.stage.getPointerPosition()
 720 |       const transform = this.stage.getAbsoluteTransform().copy()
 721 |       transform.invert()
 722 |       const relativeMousePos = transform.point(mousePos)
 723 | 
 724 |       // Calculate the bounding box of the clipboard items
 725 |       const boundingBox = this.clipboard.reduce((box, item) => {
 726 |         if (!box.minX) {
 727 |           return {
 728 |             minX: item.metadata.x,
 729 |             minY: item.metadata.y,
 730 |             maxX: item.metadata.x + item.metadata.width,
 731 |             maxY: item.metadata.y + item.metadata.height
 732 |           }
 733 |         }
 734 |         return {
 735 |           minX: Math.min(box.minX, item.metadata.x),
 736 |           minY: Math.min(box.minY, item.metadata.y),
 737 |           maxX: Math.max(box.maxX, item.metadata.x + item.metadata.width),
 738 |           maxY: Math.max(box.maxY, item.metadata.y + item.metadata.height)
 739 |         }
 740 |       }, {})
 741 | 
 742 |       const offsetX =
 743 |         relativeMousePos.x - (boundingBox.minX + boundingBox.maxX) / 2
 744 |       const offsetY =
 745 |         relativeMousePos.y - (boundingBox.minY + boundingBox.maxY) / 2
 746 | 
 747 |       const newOutputs = this.clipboard.map((item) => {
 748 |         const newId = `output-${item.id}-${Date.now()}-${Math.random()
 749 |           .toString(36)
 750 |           .substring(2, 9)}`
 751 |         return {
 752 |           ...item,
 753 |           id: newId,
 754 |           metadata: {
 755 |             ...item.metadata,
 756 |             x: item.metadata.x + offsetX,
 757 |             y: item.metadata.y + offsetY
 758 |           }
 759 |         }
 760 |       })
 761 | 
 762 |       // Add new outputs to the canvas
 763 |       this.addOutput(newOutputs)
 764 | 
 765 |       // Clear selection and select new outputs
 766 |       this.setTransformerNodes([])
 767 |       this.$nextTick(() => {
 768 |         const newNodes = newOutputs.map((output) =>
 769 |           this.stage.findOne(`#${output.id}`)
 770 |         )
 771 |         this.setTransformerNodes(newNodes)
 772 |       })
 773 |     },
 774 |     moveTransformerNodes(direction = 'up', full = false) {
 775 |       const selectedNodes = this.transformer.nodes()
 776 |       if (selectedNodes.length === 0) {
 777 |         return
 778 |       }
 779 | 
 780 |       selectedNodes.forEach((node) => {
 781 |         if (direction === 'up') {
 782 |           if (full) {
 783 |             node.moveToTop()
 784 |           } else {
 785 |             node.moveUp()
 786 |           }
 787 |         } else {
 788 |           if (full) {
 789 |             node.moveToBottom()
 790 |           } else {
 791 |             node.moveDown()
 792 |           }
 793 |         }
 794 |       })
 795 | 
 796 |       // Move the transformer to the top to keep it above the moved nodes
 797 |       this.transformer.moveToTop()
 798 | 
 799 |       // Redraw the layer
 800 |       this.layer.batchDraw()
 801 |     },
 802 |     deleteTransformerNodes() {
 803 |       const selectedNodes = this.transformer.nodes()
 804 |       selectedNodes.forEach((node) => {
 805 |         this.removeOutput(node.id())
 806 |       })
 807 |       this.setTransformerNodes([])
 808 |       this.layer.batchDraw()
 809 |     },
 810 |     downloadTransformerNodes() {
 811 |       const selectedNodes = this.transformer.nodes()
 812 |       if (selectedNodes.length === 0) {
 813 |         return
 814 |       }
 815 | 
 816 |       selectedNodes.forEach((node) => {
 817 |         const output = this.outputs.find((o) => o.id === node.id())
 818 |         if (output && output.output && output.output[0]) {
 819 |           const dataUri = output.output[0]
 820 | 
 821 |           // Extract file type from data URI
 822 |           const fileType = dataUri.split(';')[0].split('/')[1]
 823 |           const fileName = `${output.id}.${fileType}`
 824 | 
 825 |           // Convert data URI to Blob
 826 |           const byteString = atob(dataUri.split(',')[1])
 827 |           const mimeString = dataUri.split(',')[0].split(':')[1].split(';')[0]
 828 |           const ab = new ArrayBuffer(byteString.length)
 829 |           const ia = new Uint8Array(ab)
 830 |           for (let i = 0; i < byteString.length; i++) {
 831 |             ia[i] = byteString.charCodeAt(i)
 832 |           }
 833 |           const blob = new Blob([ab], { type: mimeString })
 834 | 
 835 |           // Create download link and trigger download
 836 |           const url = URL.createObjectURL(blob)
 837 |           const a = document.createElement('a')
 838 |           a.style.display = 'none'
 839 |           a.href = url
 840 |           a.download = fileName
 841 |           document.body.appendChild(a)
 842 |           a.click()
 843 |           URL.revokeObjectURL(url)
 844 |           document.body.removeChild(a)
 845 |         }
 846 |       })
 847 |     },
 848 | 
 849 |     // Snapping
 850 |     getSnapLines(skipShapes) {
 851 |       const vertical = []
 852 |       const horizontal = []
 853 | 
 854 |       const skipIds = skipShapes.map((shape) => shape.id())
 855 | 
 856 |       // and we snap over edges and center of each object on the canvas
 857 |       this.stage.find('.output').forEach((guideItem) => {
 858 |         if (skipIds.includes(guideItem.id())) {
 859 |           return
 860 |         }
 861 |         const box = guideItem.getClientRect()
 862 | 
 863 |         vertical.push([box.x, box.x + box.width, box.x + box.width / 2])
 864 |         horizontal.push([box.y, box.y + box.height, box.y + box.height / 2])
 865 |       })
 866 | 
 867 |       return {
 868 |         vertical: vertical.flat(),
 869 |         horizontal: horizontal.flat()
 870 |       }
 871 |     },
 872 |     getShapeSnappingEdges() {
 873 |       const box = this.transformer.findOne('.back').getClientRect()
 874 |       const absPos = this.transformer.findOne('.back').absolutePosition()
 875 | 
 876 |       return {
 877 |         vertical: [
 878 |           // Left vertical edge
 879 |           {
 880 |             guide: box.x,
 881 |             offset: absPos.x - box.x,
 882 |             snap: 'start'
 883 |           },
 884 |           // Center vertical edge
 885 |           {
 886 |             guide: box.x + box.width / 2,
 887 |             offset: absPos.x - box.x - box.width / 2,
 888 |             snap: 'center'
 889 |           },
 890 |           // Right vertical edge
 891 |           {
 892 |             guide: box.x + box.width,
 893 |             offset: absPos.x - box.x - box.width,
 894 |             snap: 'end'
 895 |           }
 896 |         ],
 897 |         horizontal: [
 898 |           // Top horizontal edge
 899 |           {
 900 |             guide: box.y,
 901 |             offset: absPos.y - box.y,
 902 |             snap: 'start'
 903 |           },
 904 |           // Center horizontal edge
 905 |           {
 906 |             guide: box.y + box.height / 2,
 907 |             offset: absPos.y - box.y - box.height / 2,
 908 |             snap: 'center'
 909 |           },
 910 |           // Bottom horizontal edge
 911 |           {
 912 |             guide: box.y + box.height,
 913 |             offset: absPos.y - box.y - box.height,
 914 |             snap: 'end'
 915 |           }
 916 |         ]
 917 |       }
 918 |     },
 919 |     getClosestSnapLines(possibleSnapLines, shapeSnappingEdges) {
 920 |       const SNAP_THRESHOLD = 3
 921 | 
 922 |       const getAllSnapLines = (direction) => {
 923 |         const result = []
 924 |         possibleSnapLines[direction].forEach((snapLine) => {
 925 |           shapeSnappingEdges[direction].forEach((snappingEdge) => {
 926 |             const diff = Math.abs(snapLine - snappingEdge.guide)
 927 |             // If the distance between the line and the shape is less than the threshold, we will consider it a snapping point.
 928 |             if (diff > SNAP_THRESHOLD) {
 929 |               return
 930 |             }
 931 | 
 932 |             const { snap, offset } = snappingEdge
 933 |             result.push({ snapLine, diff, snap, offset })
 934 |           })
 935 |         })
 936 |         return result
 937 |       }
 938 | 
 939 |       const resultV = getAllSnapLines('vertical')
 940 |       const resultH = getAllSnapLines('horizontal')
 941 | 
 942 |       const closestSnapLines = []
 943 | 
 944 |       const getSnapLine = ({ snapLine, offset, snap }, orientation) => {
 945 |         return { snapLine, offset, orientation, snap }
 946 |       }
 947 | 
 948 |       // Get up to 3 closest vertical and horizontal snapping lines
 949 |       const sortedV = resultV.sort((a, b) => a.diff - b.diff).slice(0, 10)
 950 |       const sortedH = resultH.sort((a, b) => a.diff - b.diff).slice(0, 10)
 951 | 
 952 |       sortedV.forEach((v) => closestSnapLines.push(getSnapLine(v, 'V')))
 953 |       sortedH.forEach((h) => closestSnapLines.push(getSnapLine(h, 'H')))
 954 | 
 955 |       return closestSnapLines
 956 |     },
 957 |     drawLines(lines = []) {
 958 |       const stageScale = this.stage.scaleX()
 959 | 
 960 |       lines.forEach((l) => {
 961 |         const { start, end } = this.calculateLineEndpoints(l)
 962 | 
 963 |         if (l.orientation === 'H') {
 964 |           const line = new Konva.Line({
 965 |             points: [start.x, start.y, end.x, end.y],
 966 |             stroke: '#ebb305',
 967 |             strokeWidth: 1 / stageScale,
 968 |             name: 'guid-line'
 969 |           })
 970 |           this.layer.add(line)
 971 |         } else if (l.orientation === 'V') {
 972 |           const line = new Konva.Line({
 973 |             points: [start.x, start.y, end.x, end.y],
 974 |             stroke: '#ebb305',
 975 |             strokeWidth: 1 / stageScale,
 976 |             name: 'guid-line'
 977 |           })
 978 |           this.layer.add(line)
 979 |         }
 980 |       })
 981 | 
 982 |       this.layer.batchDraw()
 983 |     },
 984 |     calculateLineEndpoints(line) {
 985 |       const selectedNodes = this.transformer.nodes()
 986 |       const selectedBox = this.transformer.findOne('.back').getClientRect()
 987 |       let start, end
 988 | 
 989 |       // Get stage transform
 990 |       const stageTransform = this.stage.getAbsoluteTransform().copy()
 991 |       stageTransform.invert()
 992 | 
 993 |       const transformPoint = (point) => {
 994 |         return stageTransform.point(point)
 995 |       }
 996 | 
 997 |       if (line.orientation === 'V') {
 998 |         start = transformPoint({ x: line.snapLine, y: selectedBox.y })
 999 |         end = transformPoint({
1000 |           x: line.snapLine,
1001 |           y: selectedBox.y + selectedBox.height
1002 |         })
1003 | 
1004 |         this.stage.find('.output').forEach((shape) => {
1005 |           if (!selectedNodes.includes(shape)) {
1006 |             const box = shape.getClientRect()
1007 |             if (
1008 |               Math.abs(box.x - line.snapLine) < 1 ||
1009 |               Math.abs(box.x + box.width - line.snapLine) < 1 ||
1010 |               Math.abs(box.x + box.width / 2 - line.snapLine) < 1
1011 |             ) {
1012 |               start.y = Math.min(start.y, transformPoint({ x: 0, y: box.y }).y)
1013 |               end.y = Math.max(
1014 |                 end.y,
1015 |                 transformPoint({ x: 0, y: box.y + box.height }).y
1016 |               )
1017 |             }
1018 |           }
1019 |         })
1020 |       } else {
1021 |         start = transformPoint({ x: selectedBox.x, y: line.snapLine })
1022 |         end = transformPoint({
1023 |           x: selectedBox.x + selectedBox.width,
1024 |           y: line.snapLine
1025 |         })
1026 | 
1027 |         this.stage.find('.output').forEach((shape) => {
1028 |           if (!selectedNodes.includes(shape)) {
1029 |             const box = shape.getClientRect()
1030 |             if (
1031 |               Math.abs(box.y - line.snapLine) < 1 ||
1032 |               Math.abs(box.y + box.height - line.snapLine) < 1 ||
1033 |               Math.abs(box.y + box.height / 2 - line.snapLine) < 1
1034 |             ) {
1035 |               start.x = Math.min(start.x, transformPoint({ x: box.x, y: 0 }).x)
1036 |               end.x = Math.max(
1037 |                 end.x,
1038 |                 transformPoint({ x: box.x + box.width, y: 0 }).x
1039 |               )
1040 |             }
1041 |           }
1042 |         })
1043 |       }
1044 | 
1045 |       return { start, end }
1046 |     },
1047 |     handleDragMove(e) {
1048 |       // clear all previous lines on the screen
1049 |       this.layer.find('.guid-line').forEach((l) => l.destroy())
1050 | 
1051 |       const selectedNodes = e.target.getNodes()
1052 | 
1053 |       if (!selectedNodes || selectedNodes.length <= 0) {
1054 |         return
1055 |       }
1056 | 
1057 |       const possibleSnappingLines = this.getSnapLines(selectedNodes)
1058 |       const selectedShapeSnappingEdges = this.getShapeSnappingEdges()
1059 |       const closestSnapLines = this.getClosestSnapLines(
1060 |         possibleSnappingLines,
1061 |         selectedShapeSnappingEdges
1062 |       )
1063 |       // Do nothing if no snapping lines
1064 |       if (closestSnapLines.length === 0) {
1065 |         return
1066 |       }
1067 | 
1068 |       this.drawLines(closestSnapLines)
1069 | 
1070 |       const orgAbsPos = this.transformer.absolutePosition()
1071 |       const absPos = this.transformer.absolutePosition()
1072 | 
1073 |       // Find new position
1074 |       closestSnapLines.forEach((l) => {
1075 |         let position = l.snapLine + l.offset
1076 |         if (l.snap === 'start') {
1077 |           position -= BORDER_WIDTH / 2 // Account for border
1078 |         } else if (l.snap === 'end') {
1079 |           position += BORDER_WIDTH / 2 // Account for border
1080 |         }
1081 |         position = Math.round(position * 100) / 100
1082 | 
1083 |         if (l.orientation === 'V') {
1084 |           absPos.x = position
1085 |         } else if (l.orientation === 'H') {
1086 |           absPos.y = position
1087 |         }
1088 |       })
1089 | 
1090 |       // calculate the difference between original and new position
1091 |       const vecDiff = {
1092 |         x: orgAbsPos.x - absPos.x,
1093 |         y: orgAbsPos.y - absPos.y
1094 |       }
1095 | 
1096 |       // apply the difference to the selected shape.
1097 |       selectedNodes.forEach((node) => {
1098 |         const nodeAbsPos = node.getAbsolutePosition()
1099 |         const newPos = {
1100 |           x: nodeAbsPos.x - vecDiff.x,
1101 |           y: nodeAbsPos.y - vecDiff.y
1102 |         }
1103 | 
1104 |         node.setAbsolutePosition(newPos)
1105 |       })
1106 |     },
1107 |     handleDragEnd() {
1108 |       this.layer.find('.guid-line').forEach((l) => l.destroy())
1109 |     }
1110 |   },
1111 |   mounted() {
1112 |     // Create objects
1113 |     this.stage = new Konva.Stage({
1114 |       container: this.$refs.canvas,
1115 |       width: window.innerWidth,
1116 |       height: window.innerHeight,
1117 |       draggable: this.tool === 'H'
1118 |     })
1119 |     this.layer = new Konva.Layer()
1120 |     this.selection.layer = new Konva.Layer()
1121 |     this.transformer = new Konva.Transformer({
1122 |       borderStroke: '#ebb305',
1123 |       anchorStroke: '#ebb305',
1124 |       anchorFill: '#ffffff',
1125 |       enabledAnchors: ['top-left', 'top-right', 'bottom-left', 'bottom-right'],
1126 |       shouldOverdrawWholeArea: true,
1127 |       rotationSnaps: [0, 45, 90, 135, 180, 225, 270, 315]
1128 |     })
1129 | 
1130 |     // Init
1131 |     this.stage.getContainer().style.backgroundColor = '#f8f8f8'
1132 |     this.layer.add(this.transformer)
1133 |     this.stage.add(this.layer)
1134 |     this.stage.add(this.selection.layer)
1135 | 
1136 |     this.loadCanvasState()
1137 |     this.updateCanvas()
1138 | 
1139 |     // Add event listener for stage changes
1140 |     this.stage.on('wheel', this.handleWheel)
1141 |     this.stage.on('mousedown', this.handleMouseDown)
1142 |     this.stage.on('mousemove', this.handleMouseMove)
1143 |     this.stage.on('mouseup', this.handleMouseUp)
1144 |     this.stage.on('dragend', this.saveCanvasState)
1145 | 
1146 |     // Add event listeners for transformer
1147 |     this.transformer.on('dragmove', this.handleDragMove)
1148 |     this.transformer.on('dragend', this.handleDragEnd)
1149 | 
1150 |     // Update the transformer refs with the actual methods
1151 |     this.moveTransformerNodesRef = this.moveTransformerNodes.bind(this)
1152 |     this.copyTransformerNodesRef = this.copyTransformerNodes.bind(this)
1153 |     this.copyTransformerNodesUrlRef = this.copyTransformerNodesUrl.bind(this)
1154 |     this.pasteTransformerNodesRef = this.pasteTransformerNodes.bind(this)
1155 |     this.deleteTransformerNodesRef = this.deleteTransformerNodes.bind(this)
1156 |     this.downloadTransformerNodesRef = this.downloadTransformerNodes.bind(this)
1157 |   }
1158 | }
1159 | </script>
1160 | 
1161 | <style lang="stylus" scoped></style>
1162 | 


--------------------------------------------------------------------------------
/components/ui/LeftPanel.vue:
--------------------------------------------------------------------------------
 1 | <template lang="pug">
 2 | .flex-shrink-0.overflow-y-auto.w-80.border-r
 3 |   .p-2
 4 |     //- Hide for now
 5 |     u-tabs(
 6 |       :items="tab_items"
 7 |     )
 8 |       template(#create="{ item }")
 9 |         ui-form-create
10 |       template(#finetune="{ item }")
11 |         ui-form-finetune
12 | </template>
13 | 
14 | <script>
15 | export default {
16 |   name: 'UiLeftPanel',
17 |   data: () => ({
18 |     tab_items: [
19 |       {
20 |         label: 'Create',
21 |         icon: 'i-heroicons-paint-brush',
22 |         slot: 'create'
23 |       },
24 |       {
25 |         label: 'Finetune',
26 |         icon: 'i-heroicons-cog-6-tooth',
27 |         slot: 'finetune'
28 |       }
29 |     ]
30 |   })
31 | }
32 | </script>
33 | 
34 | <style lang="stylus" scoped></style>
35 | 


--------------------------------------------------------------------------------
/components/ui/TopPanel.vue:
--------------------------------------------------------------------------------
  1 | <template lang="pug">
  2 | .flex.flex-row.items-center.w-full.h-14.border-b
  3 |   .flex.items-center.w-80.px-2.font-thin.text-3xl
  4 |     a(
  5 |       href="https://replicate.com/?utm_source=project&utm_campaign=reflux"
  6 |       target="_new"
  7 |     )
  8 |       img.h-8.pl-1.py-1.pr-3.mr-3.border-r(
  9 |         src="/replicate-logo.svg"
 10 |       )
 11 |     span.animate-text
 12 |       | Re
 13 |       span.plicate plicate
 14 |       span.font-medium.inline-block
 15 |         | Flux
 16 |         u-badge.mx-1.mt-1.float-right(
 17 |           class="-rotate-6"
 18 |           color="red"
 19 |           variant="solid"
 20 |         ) Beta
 21 | 
 22 |   //- Control buttons
 23 |   .flex-grow.flex.gap-2
 24 |     u-button(
 25 |       @click="tool = 'V'"
 26 |       :color="tool === 'V' ? 'black' : 'white'"
 27 |       icon="i-heroicons-cursor-arrow-rays"
 28 |       size="xs"
 29 |     )
 30 |       | Pointer
 31 |       u-kbd.ml-1 V
 32 |     u-button(
 33 |       @click="tool = 'H'"
 34 |       :color="tool === 'H' ? 'black' : 'white'"
 35 |       icon="i-heroicons-hand-raised"
 36 |       size="xs"
 37 |     )
 38 |       | Drag
 39 |       u-kbd.ml-1 H
 40 |     u-button(
 41 |       v-if="false"
 42 |       @click=""
 43 |       color="white"
 44 |       icon="i-heroicons-pencil"
 45 |       size="xs"
 46 |     )
 47 |       | Sketch
 48 |       u-kbd.ml-1 S
 49 |     u-button(
 50 |       v-if="false"
 51 |       @click=""
 52 |       color="white"
 53 |       icon="i-heroicons-chat-bubble-bottom-center-text"
 54 |       size="xs"
 55 |     )
 56 |       | Text
 57 |       u-kbd.ml-1 T
 58 | 
 59 |   //- Right hand stuff
 60 |   .flex.gap-2.px-2
 61 |     .text-sm.font-light.content-center
 62 |       | Replicate 
 63 |       a.underline.underline-offset-4(
 64 |         class="decoration-[0.5px] hover:decoration-2"
 65 |         href="https://replicate.com/account/api-tokens"
 66 |         target="_new"
 67 |       ) API token
 68 |       | :
 69 |     u-input.w-64(
 70 |       v-model="replicate_api_token"
 71 |       type="password"
 72 |       icon="i-heroicons-key"
 73 |       placeholder="Replicate API token..."
 74 |       trailing
 75 |     )
 76 |     u-button(
 77 |       @click="openCode"
 78 |       color="white"
 79 |       icon="i-heroicons-code-bracket"
 80 |       size="xs"
 81 |     ) Code
 82 | </template>
 83 | 
 84 | <script>
 85 | import { useLocalStorage, onKeyStroke } from '@vueuse/core'
 86 | 
 87 | export default {
 88 |   name: 'UiTopPanel',
 89 |   setup: () => {
 90 |     const tool = useLocalStorage('reflux-tool', 'V')
 91 |     const replicate_api_token = useLocalStorage(
 92 |       'reflux-replicate-api-token',
 93 |       null
 94 |     )
 95 | 
 96 |     onKeyStroke(['v', 'V'], (e) => {
 97 |       if (!['INPUT', 'TEXTAREA'].includes(document.activeElement.tagName)) {
 98 |         e.preventDefault()
 99 |         tool.value = 'V'
100 |       }
101 |     })
102 | 
103 |     onKeyStroke(['h', 'H'], (e) => {
104 |       if (!['INPUT', 'TEXTAREA'].includes(document.activeElement.tagName)) {
105 |         e.preventDefault()
106 |         tool.value = 'H'
107 |       }
108 |     })
109 | 
110 |     return {
111 |       tool,
112 |       replicate_api_token
113 |     }
114 |   },
115 |   methods: {
116 |     openCode() {
117 |       window.open('https://github.com/replicate/reflux', '_blank').focus()
118 |     }
119 |   }
120 | }
121 | </script>
122 | 
123 | <style lang="stylus" scoped>
124 | .animate-text
125 |   display inline-block
126 |   overflow hidden
127 | 
128 |   .plicate
129 |     display inline-block
130 |     animation collapse-fade 2s ease-in-out forwards
131 | 
132 | @keyframes collapse-fade
133 |   0%, 50%
134 |     max-width 100%
135 |     opacity 1
136 |   100%
137 |     max-width 0
138 |     opacity 0
139 | </style>
140 | 


--------------------------------------------------------------------------------
/components/ui/form/Create.vue:
--------------------------------------------------------------------------------
  1 | <template lang="pug">
  2 | .flex.flex-col.gap-y-4
  3 | 
  4 |   //- Models
  5 |   u-form-group(
  6 |     label="Flux fine-tunes"
  7 |   )
  8 |     ui-form-version-picker
  9 |     u-button.mr-2.mt-2(
 10 |       v-for="(trigger, i) in trigger_words"
 11 |       :key="`trigger-word-${i}`"
 12 |       @click="prompt += ' ' + trigger.word"
 13 |       color="white"
 14 |       size="2xs"
 15 |       block
 16 |     )
 17 |       .flex-grow.text-left.font-light.break-all {{ trigger.name }}
 18 |       u-divider.mx-1.h-4(orientation="vertical")
 19 |       | {{ trigger.word }}
 20 |       u-divider.mx-1.h-4(orientation="vertical")
 21 |       u-icon.w-4(
 22 |         @click.stop="versions = versions.filter((version) => version !== trigger.version)"
 23 |         name="i-heroicons-trash"
 24 |       )
 25 |     u-button.mr-2.mt-2(
 26 |       v-for="(version, i) in hf_versions"
 27 |       :key="`hf_version-${i}`"
 28 |       color="white"
 29 |       size="2xs"
 30 |       block
 31 |     )
 32 |       .flex-grow.text-left.font-light.break-all 🤗 {{ version }}
 33 |       u-divider.mx-1.h-4(orientation="vertical")
 34 |       u-icon.w-4(
 35 |         @click.stop="hf_versions = hf_versions.filter((v) => v !== version)"
 36 |         name="i-heroicons-trash"
 37 |       )
 38 |   //- Merge
 39 |   u-form-group(
 40 |     :ui="{ container: '', hint: 'text-gray-500 dark:text-gray-400 flex align-center' }"
 41 |     :help="[...versions, ...hf_versions].length !== 2 ? 'You can only merge two fine-tunes.' : ''"
 42 |     label="Merge into same image"
 43 |     name="merge"
 44 |   )
 45 |     template(#hint)
 46 |       u-toggle(
 47 |         v-model="merge"
 48 |         :disabled="[...versions, ...hf_versions].length !== 2"
 49 |         size="lg"
 50 |       )
 51 |   //- Prompt
 52 |   u-form-group(
 53 |     label="Prompt"
 54 |     name="prompt"
 55 |   )
 56 |     u-textarea(
 57 |       v-model="prompt"
 58 |       placeholder="Write a prompt..."
 59 |       autoresize
 60 |     )
 61 |   //- Aspect ratio
 62 |   u-form-group(
 63 |     label="Aspect ratio"
 64 |     name="aspect_ratio"
 65 |   )
 66 |     u-select-menu(
 67 |       v-model="aspect_ratio"
 68 |       :options="aspect_ratio_options"
 69 |     )
 70 |   //- LoRA scale
 71 |   u-form-group(
 72 |     label="LoRA scale"
 73 |     name="lora_scale"
 74 |   )
 75 |     .flex.items-center.gap-x-4
 76 |       u-range.flex-grow(
 77 |         v-model="lora_scale"
 78 |         :min="-1"
 79 |         :max="1"
 80 |         :step="0.01"
 81 |       )
 82 |       u-input.w-24(
 83 |         v-model="lora_scale"
 84 |         type="number"
 85 |         min="-1"
 86 |         max="1"
 87 |         step="0.01"
 88 |       )
 89 |   //- Inference steps
 90 |   u-form-group(
 91 |     label="Steps"
 92 |     name="num_inference_steps"
 93 |   )
 94 |     .flex.items-center.gap-x-4
 95 |       u-range.flex-grow(
 96 |         v-model="num_inference_steps"
 97 |         :min="1"
 98 |         :max="50"
 99 |         :step="1"
100 |       )
101 |       u-input.w-24(
102 |         v-model="num_inference_steps"
103 |         type="number"
104 |         min="1"
105 |         max="50"
106 |         step="1"
107 |       )
108 |   //- Guidance scale
109 |   u-form-group(
110 |     label="Gudance"
111 |     name="guidance_scale"
112 |   )
113 |     .flex.items-center.gap-x-4
114 |       u-range.flex-grow(
115 |         v-model="guidance_scale"
116 |         :min="0"
117 |         :max="10"
118 |         :step="0.01"
119 |       )
120 |       u-input.w-24(
121 |         v-model="guidance_scale"
122 |         type="number"
123 |         min="0"
124 |         max="10"
125 |         step="0.01"
126 |       )
127 |   //- Seed
128 |   u-form-group(
129 |     label="Seed"
130 |     name="seed"
131 |   )
132 |     u-input(
133 |       v-model="seed"
134 |       placeholder="Seed..."
135 |       type="number"
136 |     )
137 |   //- Output format
138 |   u-form-group(
139 |     label="Output format"
140 |     name="output_format"
141 |   )
142 |     u-select-menu(
143 |       v-model="output_format"
144 |       :options="output_format_options"
145 |     )
146 |   //- Output quality
147 |   u-form-group(
148 |     label="Output quality"
149 |     name="output_quality"
150 |   )
151 |     .flex.items-center.gap-x-4
152 |       u-range.flex-grow(
153 |         v-model="output_quality"
154 |         :min="0"
155 |         :max="100"
156 |         :step="1"
157 |       )
158 |       u-input.w-24(
159 |         v-model="output_quality"
160 |         type="number"
161 |         min="0"
162 |         max="100"
163 |         step="1"
164 |       )
165 |   //- Number of outputs (conditional)
166 |   u-form-group(
167 |     v-if="[...versions, ...hf_versions].length <= 1 || merge"
168 |     label="Number of outputs"
169 |     name="num_outputs"
170 |   )
171 |     .flex.items-center.gap-x-4
172 |       u-range.flex-grow(
173 |         v-model="num_outputs"
174 |         :min="1"
175 |         :max="4"
176 |         :step="1"
177 |       )
178 |       u-input.w-24(
179 |         v-model="num_outputs"
180 |         type="number"
181 |         min="1"
182 |         max="4"
183 |         step="1"
184 |       )
185 |   //- Submit
186 |   u-button(
187 |     v-if="replicate_api_token"
188 |     @click="submit"
189 |     :disabled="loading || !replicate_api_token || [...versions, ...hf_versions].length <= 0"
190 |     :loading="loading"
191 |     size="xl"
192 |     block
193 |   ) Create
194 | 
195 |   u-alert.dark(
196 |     v-if="!replicate_api_token"
197 |     color="primary"
198 |     variant="solid"
199 |     description="Please add your Replicate API token in the top right."
200 |   )
201 | </template>
202 | 
203 | <script>
204 | import { useLocalStorage } from '@vueuse/core'
205 | import { mapState, mapActions } from 'pinia'
206 | 
207 | export default {
208 |   name: 'UiFormCreate',
209 |   setup: () => ({
210 |     replicate_api_token: useLocalStorage('reflux-replicate-api-token', null),
211 |     versions: useLocalStorage('reflux-versions', []),
212 |     hf_versions: useLocalStorage('reflux-hf_versions', []),
213 |     prompt: useLocalStorage('reflux-prompt', ''),
214 |     aspect_ratio: useLocalStorage('reflux-aspect_ratio', '1:1'),
215 |     num_outputs: useLocalStorage('reflux-num_outputs', 1),
216 |     lora_scale: useLocalStorage('reflux-lora_scale', 1),
217 |     num_inference_steps: useLocalStorage('reflux-num_inference_steps', 28),
218 |     model: useLocalStorage('reflux-model', 'dev'),
219 |     guidance_scale: useLocalStorage('reflux-guidance_scale', 3.5),
220 |     seed: useLocalStorage('reflux-seed', null),
221 |     output_format: useLocalStorage('reflux-output_format', 'webp'),
222 |     output_quality: useLocalStorage('reflux-output_quality', 80),
223 |     merge: useLocalStorage('reflux-merge', false)
224 |   }),
225 |   data: () => ({
226 |     loading: false,
227 |     aspect_ratio_options: [
228 |       '1:1',
229 |       '16:9',
230 |       '21:9',
231 |       '3:2',
232 |       '2:3',
233 |       '4:5',
234 |       '5:4',
235 |       '3:4',
236 |       '4:3',
237 |       '9:16',
238 |       '9:21'
239 |     ],
240 |     output_format_options: ['webp', 'jpg', 'png']
241 |   }),
242 |   computed: {
243 |     ...mapState(useVersionStore, [
244 |       'getOwnerNameByVersion',
245 |       'getTriggerByVersion'
246 |     ]),
247 |     trigger_words() {
248 |       return this.versions.map((version) => ({
249 |         version,
250 |         name: this.getOwnerNameByVersion(version),
251 |         word: this.getTriggerByVersion(version)
252 |       }))
253 |     }
254 |   },
255 |   methods: {
256 |     ...mapActions(usePredictionStore, ['createBatch']),
257 |     async submit() {
258 |       this.loading = true
259 |       try {
260 |         await this.createBatch({
261 |           versions: this.versions,
262 |           hf_versions: this.hf_versions,
263 |           num_outputs: this.num_outputs,
264 |           merge: this.merge,
265 |           input: {
266 |             prompt: this.prompt,
267 |             aspect_ratio: this.aspect_ratio,
268 |             lora_scale: this.lora_scale,
269 |             num_inference_steps: this.num_inference_steps,
270 |             model: this.model,
271 |             guidance_scale: this.guidance_scale,
272 |             seed: this.seed || Math.floor(Math.random() * 1000),
273 |             output_format: this.output_format,
274 |             output_quality: this.output_quality
275 |           }
276 |         })
277 |       } catch (e) {
278 |         console.log('--- (create): error', e.message)
279 |       } finally {
280 |         this.loading = false
281 |       }
282 |     }
283 |   }
284 | }
285 | </script>
286 | 
287 | <style lang="stylus" scoped></style>
288 | 


--------------------------------------------------------------------------------
/components/ui/form/Finetune.vue:
--------------------------------------------------------------------------------
  1 | <template lang="pug">
  2 | .flex.flex-col.gap-y-4
  3 | 
  4 |   //- Hidden input
  5 |   input(
  6 |     @change="onFileSelected"
  7 |     type="file"
  8 |     ref="file"
  9 |     accept="image/*"
 10 |     multiple="false"
 11 |   )
 12 | 
 13 |   //- Subject
 14 |   u-form-group(
 15 |     label="Subject"
 16 |     name="subject"
 17 |     hint="Just 1 image!"
 18 |   )
 19 |     img.rounded.mb-3(
 20 |       v-if="subject"
 21 |       :src="subject"
 22 |     )
 23 |     u-button(
 24 |       v-if="subject"
 25 |       @click="subject = null"
 26 |       icon="i-heroicons-trash"
 27 |       color="white"
 28 |       block
 29 |     )
 30 |     u-button(
 31 |       v-else
 32 |       @click="onClickUpload"
 33 |       icon="i-heroicons-arrow-up-tray"
 34 |       color="white"
 35 |       block
 36 |       trailing
 37 |     ) Click to Upload
 38 |   //- Prompt
 39 |   u-form-group(
 40 |     label="Describe the subject"
 41 |     name="prompt"
 42 |   )
 43 |     u-textarea(
 44 |       v-model="prompt"
 45 |       placeholder="Describe the subject. Include e.g. clothes and hairstyle."
 46 |       autoresize
 47 |     )
 48 |   //- Destination
 49 |   u-form-group(
 50 |     label="Fine-tune name"
 51 |     name="name"
 52 |   )
 53 |     u-input(
 54 |       v-model="name"
 55 |       placeholder="Fine-tune model name"
 56 |     )
 57 |   //- Trigger word
 58 |   u-form-group(
 59 |     label="Trigger word"
 60 |     name="trigger_word"
 61 |   )
 62 |     u-input(
 63 |       v-model="trigger_word"
 64 |       placeholder="Fine-tune trigger word"
 65 |     )
 66 |   //- Visibility
 67 |   u-form-group(
 68 |     :ui="{ container: '', hint: 'text-gray-500 dark:text-gray-400 flex align-center' }"
 69 |     help="Will this fine-tune be visible on Replicate?"
 70 |     label="Public"
 71 |     name="visibility"
 72 |   )
 73 |     template(#hint)
 74 |       u-toggle(
 75 |         v-model="visibility"
 76 |         size="lg"
 77 |       )
 78 |   //- Submit
 79 |   u-button(
 80 |     v-if="replicate_api_token"
 81 |     @click="submit"
 82 |     :disabled="loading || !replicate_api_token || !subject || !prompt || !name || !trigger_word"
 83 |     :loading="loading"
 84 |     size="xl"
 85 |     block
 86 |   ) Create
 87 | 
 88 |   u-alert.dark(
 89 |     v-if="!replicate_api_token"
 90 |     color="primary"
 91 |     variant="solid"
 92 |     description="Please add your Replicate API token in the top right."
 93 |   )
 94 | 
 95 |   //- Trainings
 96 |   template(v-if="trainings")
 97 |     u-divider(label="Your fine-tunes")
 98 |     u-accordion(
 99 |       :items="training_items"
100 |       color="white"
101 |       variant="solid"
102 |       size="lg"
103 |     )
104 |       template(#item="{ item }")
105 |         u-alert(
106 |           :title="item.status"
107 |           :description="item.description"
108 |           :actions="item.actions"
109 |         )
110 | </template>
111 | 
112 | <script>
113 | import { useLocalStorage } from '@vueuse/core'
114 | import { mapState, mapActions } from 'pinia'
115 | 
116 | const getFileDimensions = (file) => {
117 |   return new Promise((resolve) => {
118 |     const url = URL.createObjectURL(file)
119 |     const img = new Image()
120 |     img.onload = () => {
121 |       const { width, height } = img
122 |       URL.revokeObjectURL(img.src)
123 |       resolve({ width, height })
124 |     }
125 |     img.src = url
126 |   })
127 | }
128 | 
129 | const calculateAspectRatioFit = (srcWidth, srcHeight, maxWidth, maxHeight) => {
130 |   const ratio = Math.min(maxWidth / srcWidth, maxHeight / srcHeight)
131 |   return { width: srcWidth * ratio, height: srcHeight * ratio }
132 | }
133 | 
134 | const bmpToBlob = async (bmp) => {
135 |   const canvas = document.createElement('canvas')
136 |   canvas.width = bmp.width
137 |   canvas.height = bmp.height
138 |   const ctx = canvas.getContext('bitmaprenderer')
139 |   if (!ctx) return null
140 |   ctx.transferFromImageBitmap(bmp)
141 |   const blob = await new Promise((res) => canvas.toBlob(res))
142 |   return blob
143 | }
144 | 
145 | export default {
146 |   name: 'UiFormFinetune',
147 |   setup: () => ({
148 |     replicate_api_token: useLocalStorage('reflux-replicate-api-token', null),
149 |     subject: useLocalStorage('reflux-finetune-subject', null),
150 |     prompt: useLocalStorage('reflux-finetune-prompt', ''),
151 |     name: useLocalStorage('reflux-finetune-name', 'flux-fine-tune'),
152 |     trigger_word: useLocalStorage('reflux-finetune-trigger_word', 'TOK'),
153 |     visibility: useLocalStorage('reflux-finetune-visibility', true)
154 |   }),
155 |   data: () => ({
156 |     loading: false
157 |   }),
158 |   computed: {
159 |     ...mapState(usePredictionStore, ['trainings']),
160 |     training_items() {
161 |       return this.trainings.map((training) => ({
162 |         label: `${training?.metadata?.destination?.owner}/${training?.metadata?.destination?.name}`,
163 |         icon:
164 |           training?.status === 'succeeded'
165 |             ? 'i-heroicons-check'
166 |             : training?.status !== 'failed'
167 |             ? 'i-heroicons-arrow-path'
168 |             : 'i-heroicons-exclamation-triangle',
169 |         status: training?.status,
170 |         description:
171 |           training?.status === 'succeeded'
172 |             ? 'The fine-tune is ready to be used!'
173 |             : training?.status !== 'failed'
174 |             ? training?.metadata?.pipeline_stage === 'preprocessing'
175 |               ? 'Synthetic images are generating.'
176 |               : 'The fine-tune is processing.'
177 |             : 'Something unexpected happened.',
178 |         actions: [
179 |           {
180 |             label: 'Prediction',
181 |             icon: 'i-heroicons-arrow-top-right-on-square',
182 |             variant: 'solid',
183 |             color: 'white',
184 |             to: `https://replicate.com/p/${training?.id}`,
185 |             target: '_new'
186 |           }
187 |         ]
188 |       }))
189 |     }
190 |   },
191 |   watch: {
192 |     trainings: {
193 |       immediate: true,
194 |       deep: true,
195 |       handler(trainings) {
196 |         // Find trainings that are done preprocessing
197 |         const done_preprocessing = trainings.filter(
198 |           (training) =>
199 |             training?.status === 'succeeded' &&
200 |             training?.metadata?.pipeline_stage === 'preprocessing'
201 |         )
202 | 
203 |         // Move them to processing stage
204 |         done_preprocessing.forEach((training) => this.createTraining(training))
205 |       }
206 |     }
207 |   },
208 |   methods: {
209 |     ...mapActions(usePredictionStore, [
210 |       'createTrainingPrestep',
211 |       'createTraining'
212 |     ]),
213 |     onClickUpload() {
214 |       if (this.loading) {
215 |         return
216 |       }
217 |       this.$refs.file.click()
218 |     },
219 |     async onFileSelected(e) {
220 |       this.subject = null
221 | 
222 |       try {
223 |         const file = e.target.files[0]
224 | 
225 |         // Get uploaded file dimensions
226 |         const { width, height } = await getFileDimensions(file)
227 | 
228 |         // Resize image (max width/height 1024/1024)
229 |         const { width: resizeWidth, height: resizeHeight } =
230 |           calculateAspectRatioFit(width, height, 1024, 1024)
231 |         const bmp = await createImageBitmap(file, {
232 |           resizeWidth,
233 |           resizeHeight
234 |         })
235 |         const blob = await bmpToBlob(bmp)
236 |         if (!blob) throw new Error('Failed to create blob.')
237 | 
238 |         const reader = new FileReader()
239 |         reader.onload = () => {
240 |           this.subject = String(reader.result)
241 |         }
242 |         reader.readAsDataURL(blob)
243 |       } catch (e) {
244 |         console.log('--- (finetune) error:', e.message)
245 |       }
246 |     },
247 |     async submit() {
248 |       this.loading = true
249 |       try {
250 |         await this.createTrainingPrestep({
251 |           name: this.name,
252 |           trigger_word: this.trigger_word || 'TOK',
253 |           visibility: this.visibility ? 'public' : 'private',
254 |           input: {
255 |             subject: this.subject,
256 |             prompt: this.prompt
257 |           }
258 |         })
259 | 
260 |         // Reset form
261 |         this.subject = null
262 |         this.prompt = ''
263 |         this.name = 'flux-fine-tune'
264 |         this.trigger_word = 'TOK'
265 |         this.public = true
266 |       } catch (e) {
267 |         console.log('--- (create): error', e.message)
268 |       } finally {
269 |         this.loading = false
270 |       }
271 |     }
272 |   }
273 | }
274 | </script>
275 | 
276 | <style lang="stylus" scoped>
277 | div
278 |   input[type="file"]
279 |     display none
280 | </style>
281 | 


--------------------------------------------------------------------------------
/components/ui/form/VersionPicker.vue:
--------------------------------------------------------------------------------
  1 | <template lang="pug">
  2 | div
  3 | 
  4 |   u-button(
  5 |     @click="is_open = true"
  6 |     color="white"
  7 |     block
  8 |   )
  9 |     | Add
 10 |     u-kbd {{ metaSymbol }} F
 11 | 
 12 |   u-modal(
 13 |     v-model="is_open"
 14 |     :ui="{ width: 'w-full sm:max-w-4xl', height: 'h-dvh sm:h-[48rem]' }"
 15 |   )
 16 |     u-card.flex.flex-col.h-full(
 17 |       :ui="{ header: { padding: 'px-0 py-0 sm:px-0' }, body: { base: 'flex-grow overflow-y-auto' } }"
 18 |     )
 19 |       template(#header)
 20 |         u-input.py-1(
 21 |           v-model="query"
 22 |           placeholder="Search..."
 23 |           icon="i-heroicons-magnifying-glass"
 24 |           variant="none"
 25 |           size="xl"
 26 |         )
 27 |         u-divider
 28 |         .px-6.py-3
 29 |           u-button(
 30 |             @click="search_filter = 'replicate'"
 31 |             :color="search_filter === 'replicate' ? 'primary' : 'white'"
 32 |             label="On Replicate"
 33 |             size="md"
 34 |           )
 35 |           u-button.mx-3(
 36 |             @click="search_filter = 'huggingface'"
 37 |             :color="search_filter === 'huggingface' ? 'primary' : 'white'"
 38 |             label="On Hugging Face"
 39 |             size="md"
 40 |           )
 41 |           u-button(
 42 |             @click="search_filter = 'owner'"
 43 |             :color="search_filter === 'owner' ? 'primary' : 'white'"
 44 |             label="Your own"
 45 |             size="md"
 46 |           )
 47 | 
 48 |       .grid.grid-cols-1.gap-3(
 49 |         v-if="search_filter === 'huggingface'"
 50 |       )
 51 |         u-form-group(
 52 |           label="Huggingface path, or URL to the LoRA weights."
 53 |           help="Ex: alvdansen/frosting_lane_flux"
 54 |           name="hf_versions"
 55 |         )
 56 |           .flex.gap-3
 57 |             u-input.flex-grow(
 58 |               v-model="hf_version"
 59 |               @keydown.enter="addVersion"
 60 |             )
 61 |             u-button(
 62 |               @click="addVersion"
 63 |               icon="i-heroicons-plus"
 64 |               color="white"
 65 |               trailing
 66 |             ) Add
 67 |         u-button.mr-2.mt-2(
 68 |           v-for="(version, i) in hf_versions"
 69 |           :key="`hf_version-${i}`"
 70 |           color="white"
 71 |           block
 72 |         )
 73 |           .flex-grow.text-left.font-light.break-all {{ version }}
 74 |           u-divider.mx-1.h-4(orientation="vertical")
 75 |           u-icon.w-4(
 76 |             @click.stop="hf_versions = hf_versions.filter((v) => v !== version)"
 77 |             name="i-heroicons-trash"
 78 |           )
 79 |       .grid.grid-cols-4.gap-3(v-else)
 80 |         .cursor-pointer.break-all.p-3(
 81 |           v-for="(version, i) in results"
 82 |           :key="`version-${i}`"
 83 |           :class="versions.includes(version.version) ? 'bg-[#ebb305]' : 'hover:bg-[#f8f8f8]'"
 84 |           @click="onClick(version.version)"
 85 |         )
 86 |           img.aspect-1.object-cover.mb-2(:src="version?.cover_image_url || '/replicate-logo.svg'")
 87 |           .text-sm.font-bold {{ version.name }}
 88 |           .text-xs {{ version.owner }}
 89 | </template>
 90 | 
 91 | <script>
 92 | import { useLocalStorage, onKeyStroke } from '@vueuse/core'
 93 | import { mapState, mapActions } from 'pinia'
 94 | 
 95 | export default {
 96 |   name: 'UiFormVersionPicker',
 97 |   setup: () => {
 98 |     const { metaSymbol } = useShortcuts()
 99 |     const is_open = ref(false)
100 | 
101 |     onKeyStroke(['f', 'F'], (e) => {
102 |       if (e.metaKey || e.ctrlKey) {
103 |         e.preventDefault()
104 |         is_open.value = true
105 |       }
106 |     })
107 | 
108 |     return {
109 |       replicate_api_token: useLocalStorage('reflux-replicate-api-token', null),
110 |       versions: useLocalStorage('reflux-versions', []),
111 |       hf_versions: useLocalStorage('reflux-hf_versions', []),
112 |       search_filter: useLocalStorage('reflux-search_filter', 'replicate'),
113 | 
114 |       metaSymbol,
115 |       is_open
116 |     }
117 |   },
118 |   data: () => ({
119 |     query: '',
120 |     hf_version: ''
121 |   }),
122 |   computed: {
123 |     ...mapState(useVersionStore, ['version_options', 'getTriggerByVersion']),
124 |     results() {
125 |       const subset = this.version_options.filter(
126 |         (version) => version.is_owner === (this.search_filter === 'owner')
127 |       )
128 | 
129 |       if (!this.query.trim()) {
130 |         return subset
131 |       }
132 | 
133 |       const lowercaseQuery = this.query.toLowerCase().trim()
134 |       return subset.filter((version) =>
135 |         version.name.toLowerCase().includes(lowercaseQuery)
136 |       )
137 |     }
138 |   },
139 |   watch: {
140 |     replicate_api_token: {
141 |       immediate: true,
142 |       async handler(token) {
143 |         if (!token) {
144 |           return
145 |         }
146 | 
147 |         try {
148 |           const versions = await $fetch(`/api/search?token=${token}`)
149 |           // Dedupe by version key and sort alphabetically by name
150 |           const versionMap = new Map(versions.map((v) => [v.version, v]))
151 |           const version_options = Array.from(versionMap.values()).sort((a, b) =>
152 |             a.name.localeCompare(b.name)
153 |           )
154 | 
155 |           // Persist
156 |           this.setVersionOptions(version_options)
157 |         } catch (e) {
158 |           console.log('--- (create) error:', e.message)
159 |         }
160 |       }
161 |     }
162 |   },
163 |   methods: {
164 |     ...mapActions(useVersionStore, ['setVersionOptions']),
165 |     onClick(version) {
166 |       if (this.versions.includes(version)) {
167 |         this.versions = this.versions.filter((v) => v !== version)
168 |       } else {
169 |         this.versions.push(version)
170 |       }
171 |     },
172 |     addVersion() {
173 |       if (!this.hf_version) {
174 |         return
175 |       }
176 | 
177 |       this.hf_versions.push(this.hf_version)
178 |       this.hf_version = null
179 |     }
180 |   }
181 | }
182 | </script>
183 | 
184 | <style lang="stylus" scoped></style>
185 | 


--------------------------------------------------------------------------------
/nuxt.config.ts:
--------------------------------------------------------------------------------
  1 | export default defineNuxtConfig({
  2 |   compatibilityDate: '2024-04-03',
  3 |   runtimeConfig: {
  4 |     public: {}
  5 |   },
  6 |   devtools: { enabled: false },
  7 |   ssr: false,
  8 |   nitro: {
  9 |     preset: 'vercel'
 10 |   },
 11 |   sourcemap: {
 12 |     server: false,
 13 |     client: false
 14 |   },
 15 |   app: {
 16 |     head: {
 17 |       htmlAttrs: {
 18 |         class: 'h-full'
 19 |       },
 20 |       title: 'ReFlux',
 21 |       link: [
 22 |         { rel: 'canonical', href: 'https://reflux.replicate.dev/' },
 23 |         { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
 24 |       ],
 25 |       meta: [
 26 |         { hid: 'charset', charset: 'utf-8' },
 27 |         { 'http-equiv': 'X-UA-Compatible', content: 'IE=edge' },
 28 |         {
 29 |           hid: 'viewport',
 30 |           name: 'viewport',
 31 |           content:
 32 |             'width=device-width,height=device-height,initial-scale=1.0,user-scalable=0,minimum-scale=1.0,maximum-scale=1.0,viewport-fit=cover'
 33 |         },
 34 |         {
 35 |           hid: 'format-detection',
 36 |           name: 'format-detection',
 37 |           content: 'telephone=no'
 38 |         },
 39 |         {
 40 |           hid: 'description',
 41 |           name: 'description',
 42 |           content: 'Replicate Flux.1 and fine-tune editor.'
 43 |         },
 44 |         {
 45 |           hid: 'og:type',
 46 |           name: 'og:type',
 47 |           property: 'og:type',
 48 |           content: 'website'
 49 |         },
 50 |         {
 51 |           hid: 'og:url',
 52 |           name: 'og:url',
 53 |           property: 'og:url',
 54 |           content: 'https://reflux.replicate.dev'
 55 |         },
 56 |         {
 57 |           hid: 'og:site_name',
 58 |           name: 'og:site_name',
 59 |           property: 'og:site_name',
 60 |           content: 'reflux.replicate.dev'
 61 |         },
 62 |         {
 63 |           hid: 'og:title',
 64 |           name: 'og:title',
 65 |           property: 'og:title',
 66 |           content: 'ReFlux'
 67 |         },
 68 |         {
 69 |           hid: 'og:description',
 70 |           name: 'og:description',
 71 |           property: 'og:description',
 72 |           content: 'Replicate Flux.1 and fine-tune editor.'
 73 |         },
 74 |         {
 75 |           hid: 'og:image',
 76 |           name: 'og:image',
 77 |           property: 'og:image',
 78 |           content: 'https://reflux.replicate.dev/cover.jpg'
 79 |         },
 80 |         {
 81 |           hid: 'msapplication-TileColor',
 82 |           name: 'msapplication-TileColor',
 83 |           content: '#ffffff'
 84 |         },
 85 |         { hid: 'theme-color', name: 'theme-color', content: '#ffffff' },
 86 |         {
 87 |           hid: 'mobile-web-app-capable',
 88 |           name: 'mobile-web-app-capable',
 89 |           content: 'yes'
 90 |         },
 91 |         {
 92 |           hid: 'apple-mobile-web-app-title',
 93 |           name: 'apple-mobile-web-app-title',
 94 |           content: 'reflux.replicate.dev'
 95 |         }
 96 |       ],
 97 |       script: [
 98 |         /*
 99 |         {
100 |           async: true,
101 |           src: `https://www.googletagmanager.com/gtag/js?id=${process.env.GTAG_ID}`
102 |         },
103 |         {
104 |           children: `
105 |             window.dataLayer = window.dataLayer || [];
106 |             function gtag(){dataLayer.push(arguments);}
107 |             gtag('js', new Date());
108 |             gtag('config', '${process.env.GTAG_ID}');`
109 |         }
110 |         */
111 |       ],
112 |       bodyAttrs: {
113 |         class: 'antialiased overscroll-x-none'
114 |       }
115 |     }
116 |   },
117 |   modules: ['@nuxt/ui', '@pinia/nuxt', '@vueuse/nuxt'],
118 |   colorMode: {
119 |     preference: 'light'
120 |   },
121 |   ui: {
122 |     global: true
123 |   }
124 | })
125 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "reflux",
 3 |   "author": "Pontus Aurdal",
 4 |   "private": true,
 5 |   "type": "module",
 6 |   "scripts": {
 7 |     "build": "nuxt build",
 8 |     "dev": "nuxt dev",
 9 |     "generate": "nuxt generate",
10 |     "preview": "nuxt preview",
11 |     "postinstall": "nuxt prepare"
12 |   },
13 |   "dependencies": {
14 |     "@nuxt/ui": "^2.18.3",
15 |     "@pinia/nuxt": "^0.5.2",
16 |     "@vueuse/core": "^10.11.0",
17 |     "@vueuse/nuxt": "^10.11.0",
18 |     "all-the-public-replicate-models": "^1.310.0",
19 |     "jszip": "^3.10.1",
20 |     "konva": "^9.3.14",
21 |     "lodash-es": "^4.17.21",
22 |     "nuxt": "^3.12.4",
23 |     "uuid": "^10.0.0",
24 |     "vue": "latest"
25 |   },
26 |   "devDependencies": {
27 |     "pug": "^3.0.3",
28 |     "pug-plain-loader": "^1.1.0",
29 |     "stylus": "^0.63.0",
30 |     "stylus-loader": "^8.1.0"
31 |   }
32 | }
33 | 


--------------------------------------------------------------------------------
/pages/index.vue:
--------------------------------------------------------------------------------
 1 | <template lang="pug">
 2 | .flex.flex-col.h-screen
 3 |   ui-top-panel
 4 |   .flex.flex-1.overflow-hidden
 5 |     ui-left-panel
 6 |     ui-canvas
 7 |     prediction-poller
 8 | </template>
 9 | 
10 | <script>
11 | export default {
12 |   name: 'index'
13 | }
14 | </script>
15 | 
16 | <style lang="stylus" scoped></style>
17 | 


--------------------------------------------------------------------------------
/prettier.config.cjs:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   trailingComma: 'none',
3 |   tabWidth: 2,
4 |   semi: false,
5 |   singleQuote: true,
6 |   bracketSpacing: true
7 | }
8 | 


--------------------------------------------------------------------------------
/public/cover.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/replicate/reflux/01b0ea9811abfc38677d1d590f78f0a227be3210/public/cover.jpg


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/replicate/reflux/01b0ea9811abfc38677d1d590f78f0a227be3210/public/favicon.ico


--------------------------------------------------------------------------------
/public/replicate-logo.svg:
--------------------------------------------------------------------------------
1 | <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1000 1000" class="logo" fill="currentColor" xml:space="preserve">
2 |   <g>
3 |     <polygon points="1000,427.6 1000,540.6 603.4,540.6 603.4,1000 477,1000 477,427.6"></polygon>
4 |     <polygon points="1000,213.8 1000,327 364.8,327 364.8,1000 238.4,1000 238.4,213.8"></polygon>
5 |     <polygon points="1000,0 1000,113.2 126.4,113.2 126.4,1000 0,1000 0,0"></polygon>
6 |   </g>
7 | </svg>


--------------------------------------------------------------------------------
/server/api/model.post.js:
--------------------------------------------------------------------------------
 1 | export default defineEventHandler(async (event) => {
 2 |   try {
 3 |     const {
 4 |       replicate_api_token,
 5 |       name,
 6 |       trigger_word,
 7 |       visibility = 'public'
 8 |     } = await readBody(event)
 9 | 
10 |     // Get username
11 |     let result = await fetch('https://api.replicate.com/v1/account', {
12 |       method: 'GET',
13 |       headers: {
14 |         Authorization: `Bearer ${replicate_api_token}`,
15 |         'User-Agent': 'ReFlux/1.0'
16 |       }
17 |     })
18 |     const { username } = await result.json()
19 | 
20 |     // Check if model already exists
21 |     result = await fetch(
22 |       `https://api.replicate.com/v1/models/${username}/${name}`,
23 |       {
24 |         method: 'GET',
25 |         headers: {
26 |           Authorization: `Bearer ${replicate_api_token}`,
27 |           'Content-Type': 'application/json',
28 |           'User-Agent': 'ReFlux/1.0'
29 |         }
30 |       }
31 |     )
32 |     let model = await result.json()
33 | 
34 |     // Create model
35 |     if (!model?.name) {
36 |       result = await fetch('https://api.replicate.com/v1/models', {
37 |         method: 'POST',
38 |         headers: {
39 |           Authorization: `Bearer ${replicate_api_token}`,
40 |           'Content-Type': 'application/json',
41 |           'User-Agent': 'ReFlux/1.0'
42 |         },
43 |         body: JSON.stringify({
44 |           owner: username,
45 |           name,
46 |           description: `A fine-tuned FLUX.1 model. Use trigger word "${
47 |             trigger_word || 'TOK'
48 |           }". Created with ReFlux (https://reflux.replicate.dev).`,
49 |           hardware: 'gpu-t4',
50 |           visibility
51 |         })
52 |       })
53 | 
54 |       model = await result.json()
55 |     }
56 | 
57 |     return model
58 |   } catch (e) {
59 |     console.log('--- error (api/model): ', e)
60 | 
61 |     return {
62 |       error: e.message
63 |     }
64 |   }
65 | })
66 | 


--------------------------------------------------------------------------------
/server/api/prediction.get.js:
--------------------------------------------------------------------------------
 1 | export default defineEventHandler(async (event) => {
 2 |   try {
 3 |     const { token, ids } = getQuery(event)
 4 |     const id_array = ids.split(',')
 5 | 
 6 |     const results = await Promise.all(
 7 |       id_array.map((id) =>
 8 |         fetch(`https://api.replicate.com/v1/predictions/${id}`, {
 9 |           method: 'GET',
10 |           headers: {
11 |             Authorization: `Bearer ${token}`,
12 |             'User-Agent': 'ReFlux/1.0'
13 |           }
14 |         })
15 |       )
16 |     )
17 | 
18 |     const predictions = await Promise.all(
19 |       results.map((result) => result.json())
20 |     )
21 | 
22 |     // Remove potentially long data
23 |     // delete json.logs
24 | 
25 |     return predictions
26 |   } catch (e) {
27 |     console.log('--- error (api/prediction): ', e)
28 | 
29 |     return {
30 |       error: e.message
31 |     }
32 |   }
33 | })
34 | 


--------------------------------------------------------------------------------
/server/api/prediction.post.js:
--------------------------------------------------------------------------------
 1 | export default defineEventHandler(async (event) => {
 2 |   try {
 3 |     const { replicate_api_token, version, input } = await readBody(event)
 4 | 
 5 |     const result = await fetch('https://api.replicate.com/v1/predictions', {
 6 |       method: 'POST',
 7 |       headers: {
 8 |         Authorization: `Bearer ${replicate_api_token}`,
 9 |         'User-Agent': 'ReFlux/1.0'
10 |       },
11 |       body: JSON.stringify({
12 |         version,
13 |         input
14 |       })
15 |     })
16 | 
17 |     const prediction = await result.json()
18 | 
19 |     return prediction
20 |   } catch (e) {
21 |     console.log('--- error (api/prediction): ', e)
22 | 
23 |     return {
24 |       error: e.message
25 |     }
26 |   }
27 | })
28 | 


--------------------------------------------------------------------------------
/server/api/search.get.js:
--------------------------------------------------------------------------------
  1 | import models from 'all-the-public-replicate-models'
  2 | 
  3 | const getTriggerWord = (model) => {
  4 |   const description = model?.description || ''
  5 |   const default_example_prompt = model?.default_example?.input.prompt || ''
  6 |   const prompt_description =
  7 |     model?.latest_version?.openapi_schema?.components?.schemas?.Input
  8 |       ?.properties?.prompt?.description || ''
  9 | 
 10 |   const checkPatterns = (str) => {
 11 |     // Regular expressions for different trigger word patterns
 12 |     const quotedPattern = /"([^"]+)"|'([^']+)'/
 13 |     const allCapsPattern = /\b[A-Z]{2,}\b/
 14 |     const stylePattern = /(\S+(?:\s+\S+)*)\s+style/i
 15 | 
 16 |     // Check for quoted words
 17 |     const quotedMatch = str.match(quotedPattern)
 18 |     if (quotedMatch) return quotedMatch[1] || quotedMatch[2]
 19 | 
 20 |     // Check for all-caps words
 21 |     const allCapsMatch = str.match(allCapsPattern)
 22 |     if (allCapsMatch) return allCapsMatch[0]
 23 | 
 24 |     // Check for words followed by 'style'
 25 |     // const styleMatch = str.match(stylePattern)
 26 |     // if (styleMatch) return styleMatch[1]
 27 | 
 28 |     return null
 29 |   }
 30 | 
 31 |   let word = null
 32 |   word = checkPatterns(description)
 33 |   if (word) return word
 34 |   word = checkPatterns(prompt_description)
 35 |   if (word) return word
 36 |   word = checkPatterns(default_example_prompt)
 37 |   if (word) return word
 38 | 
 39 |   // Default return if no trigger word is found
 40 |   return 'TOK'
 41 | }
 42 | 
 43 | export default defineEventHandler(async (event) => {
 44 |   try {
 45 |     const { token } = getQuery(event)
 46 | 
 47 |     // Get trainings
 48 |     // TODO: pagination
 49 |     const result = await fetch(`https://api.replicate.com/v1/trainings`, {
 50 |       method: 'GET',
 51 |       headers: {
 52 |         Authorization: `Bearer ${token}`,
 53 |         'User-Agent': 'ReFlux/1.0'
 54 |       }
 55 |     })
 56 |     const { results } = await result.json()
 57 | 
 58 |     const owner = (
 59 |       await Promise.all(
 60 |         (results || []).map(async (training) => {
 61 |           try {
 62 |             // Not a flux training
 63 |             if (
 64 |               training?.model !== 'ostris/flux-dev-lora-trainer' ||
 65 |               training?.status === 'failed'
 66 |             ) {
 67 |               return null
 68 |             }
 69 | 
 70 |             const [full_name, version] = training?.output?.version.split(':')
 71 |             const [username, name] = full_name.split('/')
 72 |             const model_result = await fetch(
 73 |               `https://api.replicate.com/v1/models/${username}/${name}`,
 74 |               {
 75 |                 method: 'GET',
 76 |                 headers: {
 77 |                   Authorization: `Bearer ${token}`,
 78 |                   'Content-Type': 'application/json',
 79 |                   'User-Agent': 'ReFlux/1.0'
 80 |                 }
 81 |               }
 82 |             )
 83 |             const model = await model_result.json()
 84 | 
 85 |             return (
 86 |               (model?.name || '') +
 87 |               ' ' +
 88 |               (model?.description || '')
 89 |             ).includes('flux')
 90 |               ? {
 91 |                   is_owner: true,
 92 |                   owner: model.owner,
 93 |                   name: model.name,
 94 |                   description: model?.description || '',
 95 |                   version: model?.latest_version?.id,
 96 |                   cover_image_url: model?.cover_image_url || null,
 97 |                   trigger: getTriggerWord(model)
 98 |                 }
 99 |               : null
100 |           } catch (e) {
101 |             console.log(e)
102 |             return null
103 |           }
104 |         })
105 |       )
106 |     ).filter((v) => !!v)
107 | 
108 |     // Use all-the-public-replicate-models package instead
109 |     const _public = models
110 |       .filter(
111 |         (i) =>
112 |           ((i?.name || '') + ' ' + (i?.description || '')).includes('flux') &&
113 |           i?.latest_version?.openapi_schema?.components?.schemas?.TrainingInput
114 |       )
115 |       .map((i) => ({
116 |         is_owner: false,
117 |         owner: i.owner,
118 |         name: i.name,
119 |         description: i?.description || '',
120 |         version: i?.latest_version?.id,
121 |         cover_image_url: i?.cover_image_url || null,
122 |         trigger: getTriggerWord(i)
123 |       }))
124 | 
125 |     return [...owner, ..._public]
126 |   } catch (e) {
127 |     console.log('--- error (api/search): ', e)
128 | 
129 |     return {
130 |       error: e.message
131 |     }
132 |   }
133 | })
134 | 


--------------------------------------------------------------------------------
/server/api/training.post.js:
--------------------------------------------------------------------------------
 1 | import JSZip from 'jszip'
 2 | 
 3 | const downloadAndZipImages = async (urls) => {
 4 |   const zip = new JSZip()
 5 |   const promises = urls.map(async (url) => {
 6 |     const response = await fetch(url)
 7 |     const arrayBuffer = await response.arrayBuffer()
 8 |     const fileName = url.split('/').pop()
 9 |     zip.file(fileName, arrayBuffer)
10 |   })
11 |   await Promise.all(promises)
12 |   const zipBlob = await zip.generateAsync({ type: 'blob' })
13 |   const arrayBuffer = await zipBlob.arrayBuffer()
14 |   const base64data = Buffer.from(arrayBuffer).toString('base64')
15 |   return `data:application/zip;base64,${base64data}`
16 | }
17 | 
18 | export default defineEventHandler(async (event) => {
19 |   try {
20 |     const { replicate_api_token, destination, input } = await readBody(event)
21 | 
22 |     // Download and ZIP files
23 |     const input_images_base64 = await downloadAndZipImages(input?.input_images)
24 | 
25 |     const result = await fetch(
26 |       'https://api.replicate.com/v1/models/ostris/flux-dev-lora-trainer/versions/7f53f82066bcdfb1c549245a624019c26ca6e3c8034235cd4826425b61e77bec/trainings',
27 |       {
28 |         method: 'POST',
29 |         headers: {
30 |           Authorization: `Bearer ${replicate_api_token}`,
31 |           'User-Agent': 'ReFlux/1.0'
32 |         },
33 |         body: JSON.stringify({
34 |           destination,
35 |           input: {
36 |             ...input,
37 |             input_images: input_images_base64
38 |           }
39 |         })
40 |       }
41 |     )
42 | 
43 |     const prediction = await result.json()
44 | 
45 |     return prediction
46 |   } catch (e) {
47 |     console.log('--- error (api/prediction): ', e)
48 | 
49 |     return {
50 |       error: e.message
51 |     }
52 |   }
53 | })
54 | 


--------------------------------------------------------------------------------
/server/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "../.nuxt/tsconfig.server.json"
3 | }
4 | 


--------------------------------------------------------------------------------
/stores/prediction.js:
--------------------------------------------------------------------------------
  1 | import { useLocalStorage } from '@vueuse/core'
  2 | 
  3 | import { useVersionStore } from './version'
  4 | 
  5 | const parseAspectRatio = (aspectRatio) => {
  6 |   const [width, height] = aspectRatio.split(':').map(Number)
  7 |   return { width, height }
  8 | }
  9 | 
 10 | const urlToBase64 = async (urlOrArray) => {
 11 |   const convertSingle = async (url) => {
 12 |     if (typeof url !== 'string' || !url.startsWith('https')) {
 13 |       return url
 14 |     }
 15 | 
 16 |     try {
 17 |       // Try to extract file extension from URL
 18 |       const urlParts = url.split('/')
 19 |       const fileName = urlParts[urlParts.length - 1]
 20 |       const fileExtension = fileName.split('.').pop().toLowerCase()
 21 | 
 22 |       const response = await fetch(url)
 23 |       const blob = await response.blob()
 24 | 
 25 |       // Determine file type
 26 |       let fileType
 27 |       if (['jpg', 'jpeg', 'png', 'gif', 'webp'].includes(fileExtension)) {
 28 |         fileType = `image/${fileExtension === 'jpg' ? 'jpeg' : fileExtension}`
 29 |       } else {
 30 |         fileType = blob.type || 'application/octet-stream'
 31 |       }
 32 | 
 33 |       return new Promise((resolve, reject) => {
 34 |         const reader = new FileReader()
 35 |         reader.onloadend = () => {
 36 |           const base64data = reader.result
 37 |           const dataUri = `data:${fileType};base64,${base64data.split(',')[1]}`
 38 |           resolve(dataUri)
 39 |         }
 40 |         reader.onerror = reject
 41 |         reader.readAsDataURL(blob)
 42 |       })
 43 |     } catch (error) {
 44 |       console.error('Error converting URL to base64:', error)
 45 |       return url
 46 |     }
 47 |   }
 48 | 
 49 |   if (Array.isArray(urlOrArray)) {
 50 |     return Promise.all(urlOrArray.map(convertSingle))
 51 |   } else {
 52 |     return convertSingle(urlOrArray)
 53 |   }
 54 | }
 55 | 
 56 | export const usePredictionStore = defineStore('predictionStore', {
 57 |   state: () => ({
 58 |     replicate_api_token: useLocalStorage('reflux-replicate-api-token', null),
 59 |     outputs: useLocalStorage('reflux-outputs', []),
 60 |     trainings: useLocalStorage('reflux-trainings', [])
 61 |   }),
 62 |   actions: {
 63 |     async createBatch({ versions, hf_versions, num_outputs, merge, input }) {
 64 |       try {
 65 |         const versionStore = useVersionStore()
 66 |         const combined_versions = [...versions, ...hf_versions]
 67 | 
 68 |         let promises = []
 69 | 
 70 |         // Merging, use num_outputs
 71 |         if (combined_versions.length === 2 && merge) {
 72 |           // Use the Replicate model + side car
 73 |           if (versions.length > 0) {
 74 |             const extra_lora =
 75 |               hf_versions.length > 0
 76 |                 ? `huggingface.co/${hf_versions[0]}`
 77 |                 : versionStore.getOwnerNameByVersion(versions[1])
 78 | 
 79 |             promises = Array.from(Array(num_outputs).keys()).map(() =>
 80 |               $fetch('/api/prediction', {
 81 |                 method: 'POST',
 82 |                 body: {
 83 |                   replicate_api_token: this.replicate_api_token,
 84 |                   version: versions[0],
 85 |                   input: {
 86 |                     ...input,
 87 |                     extra_lora,
 88 |                     extra_lora_scale: input.lora_scale, // For now
 89 |                     seed: Math.floor(Math.random() * 1000)
 90 |                   }
 91 |                 }
 92 |               })
 93 |             )
 94 |             // Use lucataco/flux-dev-multi-lora
 95 |           } else {
 96 |             promises = Array.from(Array(num_outputs).keys()).map(() =>
 97 |               $fetch('/api/prediction', {
 98 |                 method: 'POST',
 99 |                 body: {
100 |                   replicate_api_token: this.replicate_api_token,
101 |                   // https://replicate.com/lucataco/flux-dev-multi-lora
102 |                   version:
103 |                     'a738942df15c8c788b076ddd052256ba7923aade687b12109ccc64b2c3483aa1',
104 |                   input: {
105 |                     ...input,
106 |                     hf_loras: hf_versions,
107 |                     lora_scales: Array.from(
108 |                       Array(hf_versions.length).keys()
109 |                     ).map(() => input.lora_scale),
110 |                     seed: Math.floor(Math.random() * 1000)
111 |                   }
112 |                 }
113 |               })
114 |             )
115 |           }
116 |           // Not merging, use num_outputs
117 |         } else if (combined_versions.length < 2) {
118 |           if (versions.length > 0) {
119 |             promises = Array.from(Array(num_outputs).keys()).map(() =>
120 |               $fetch('/api/prediction', {
121 |                 method: 'POST',
122 |                 body: {
123 |                   replicate_api_token: this.replicate_api_token,
124 |                   version: versions[0],
125 |                   input: {
126 |                     ...input,
127 |                     seed: Math.floor(Math.random() * 1000)
128 |                   }
129 |                 }
130 |               })
131 |             )
132 |           } else if (hf_versions.length > 0) {
133 |             promises = Array.from(Array(num_outputs).keys()).map(() =>
134 |               $fetch('/api/prediction', {
135 |                 method: 'POST',
136 |                 body: {
137 |                   replicate_api_token: this.replicate_api_token,
138 |                   // https://replicate.com/lucataco/flux-dev-multi-lora
139 |                   version:
140 |                     'a738942df15c8c788b076ddd052256ba7923aade687b12109ccc64b2c3483aa1',
141 |                   input: {
142 |                     ...input,
143 |                     hf_loras: [hf_versions[0]],
144 |                     lora_scales: [input.lora_scale],
145 |                     seed: Math.floor(Math.random() * 1000)
146 |                   }
147 |                 }
148 |               })
149 |             )
150 |           }
151 | 
152 |           // Not merging, create one of each
153 |         } else {
154 |           promises.push(
155 |             ...versions.map((version) =>
156 |               $fetch('/api/prediction', {
157 |                 method: 'POST',
158 |                 body: {
159 |                   replicate_api_token: this.replicate_api_token,
160 |                   version,
161 |                   input
162 |                 }
163 |               })
164 |             ),
165 |             ...hf_versions.map((hf_version) =>
166 |               $fetch('/api/prediction', {
167 |                 method: 'POST',
168 |                 body: {
169 |                   replicate_api_token: this.replicate_api_token,
170 |                   // https://replicate.com/lucataco/flux-dev-multi-lora
171 |                   version:
172 |                     'a738942df15c8c788b076ddd052256ba7923aade687b12109ccc64b2c3483aa1',
173 |                   input: {
174 |                     ...input,
175 |                     hf_loras: [hf_version],
176 |                     lora_scales: [input.lora_scale]
177 |                   }
178 |                 }
179 |               })
180 |             )
181 |           )
182 |         }
183 | 
184 |         const predictions = await Promise.all(promises)
185 | 
186 |         const baseSize = 300
187 |         const aspectRatio = parseAspectRatio(input.aspect_ratio)
188 |         const width = baseSize
189 |         const height = (aspectRatio.width / aspectRatio.height) * baseSize
190 | 
191 |         predictions.forEach((prediction, index) => {
192 |           this.outputs.push({
193 |             id: prediction.id,
194 |             status: prediction.status,
195 |             input,
196 |             output: null,
197 |             metadata: {
198 |               prediction_id: prediction.id,
199 |               name: versionStore.getOwnerNameByVersion(prediction.version),
200 |               x: 0,
201 |               y: 0,
202 |               rotation: 0,
203 |               width,
204 |               height
205 |             }
206 |           })
207 |         })
208 | 
209 |         return predictions
210 |       } catch (e) {
211 |         console.log('--- (stores/prediction) error:', e.message)
212 |       }
213 |     },
214 |     async createTrainingPrestep({ name, trigger_word, visibility, input }) {
215 |       try {
216 |         const model = await $fetch('/api/model', {
217 |           method: 'POST',
218 |           body: {
219 |             replicate_api_token: this.replicate_api_token,
220 |             name,
221 |             trigger_word,
222 |             visibility
223 |           }
224 |         })
225 | 
226 |         if (!model?.owner) {
227 |           throw new Error('failed to create model')
228 |         }
229 | 
230 |         const prediction = await $fetch('/api/prediction', {
231 |           method: 'POST',
232 |           body: {
233 |             replicate_api_token: this.replicate_api_token,
234 |             // https://replicate.com/fofr/consistent-character
235 |             version:
236 |               '9c77a3c2f884193fcee4d89645f02a0b9def9434f9e03cb98460456b831c8772',
237 |             input: {
238 |               ...input,
239 |               number_of_outputs: 15,
240 |               number_of_images_per_pose: 1,
241 |               randomise_poses: true,
242 |               output_format: 'webp',
243 |               output_quality: 80
244 |             }
245 |           }
246 |         })
247 | 
248 |         this.trainings.push({
249 |           id: prediction.id,
250 |           status: prediction.status,
251 |           input,
252 |           output: null,
253 |           metadata: {
254 |             prediction_id: prediction.id,
255 |             pipeline_stage: 'preprocessing',
256 |             trigger_word,
257 |             destination: model
258 |           }
259 |         })
260 | 
261 |         return prediction
262 |       } catch (e) {
263 |         console.log('--- (stores/prediction) error:', e.message)
264 |       }
265 |     },
266 |     async createTraining(training) {
267 |       try {
268 |         const { trigger_word, destination } = training?.metadata
269 |         const output = training?.output || []
270 | 
271 |         // Fail early
272 |         if (output.length <= 0) {
273 |           const index = this.trainings.findIndex((i) => i.id === training.id)
274 |           if (index !== -1) {
275 |             this.trainings[index].status = 'failed'
276 |           }
277 |           return null
278 |         }
279 | 
280 |         const input = {
281 |           input_images: output,
282 |           trigger_word
283 |         }
284 | 
285 |         const prediction = await $fetch('/api/training', {
286 |           method: 'POST',
287 |           body: {
288 |             replicate_api_token: this.replicate_api_token,
289 |             destination: `${destination?.owner}/${destination?.name}`,
290 |             input
291 |           }
292 |         })
293 | 
294 |         // Update training
295 |         const index = this.trainings.findIndex((i) => i.id === training.id)
296 |         if (index !== -1) {
297 |           this.trainings[index].id = prediction.id
298 |           this.trainings[index].status = prediction.status
299 |           this.trainings[index].input = input
300 |           this.trainings[index].output = null
301 |           this.trainings[index].metadata.prediction_id = prediction.id
302 |           this.trainings[index].metadata.pipeline_stage = 'processing'
303 |         }
304 | 
305 |         return prediction
306 |       } catch (e) {
307 |         console.log('--- (stores/prediction) error:', e.message)
308 |       }
309 |     },
310 |     async pollIncompletePredictions() {
311 |       try {
312 |         const prediction_ids = [
313 |           ...new Set(
314 |             this.incompletePredictions
315 |               .map((output) => output?.metadata?.prediction_id || null)
316 |               .filter((id) => id)
317 |           )
318 |         ]
319 |         const predictions = await $fetch(
320 |           `/api/prediction?ids=${prediction_ids.join(',')}&token=${
321 |             this.replicate_api_token
322 |           }`
323 |         )
324 | 
325 |         for (const prediction of predictions) {
326 |           // Update outputs with the same prediction_id in the state
327 |           let targets = this.outputs.filter(
328 |             (i) => i?.metadata?.prediction_id === prediction.id
329 |           )
330 | 
331 |           for (const target of targets) {
332 |             // Update the corresponding output in the state
333 |             const index = this.outputs.findIndex((i) => i.id === target.id)
334 |             if (index !== -1) {
335 |               this.outputs[index] = {
336 |                 ...this.outputs[index],
337 |                 input: prediction.input,
338 |                 status: prediction.status,
339 |                 output: await urlToBase64(prediction.output)
340 |               }
341 |             }
342 |           }
343 | 
344 |           // Update trainings with the same prediction_id in the state
345 |           targets = this.trainings.filter(
346 |             (i) => i?.metadata?.prediction_id === prediction.id
347 |           )
348 | 
349 |           for (const target of targets) {
350 |             // Update the corresponding output in the state
351 |             const index = this.trainings.findIndex((i) => i.id === target.id)
352 |             if (index !== -1) {
353 |               this.trainings[index] = {
354 |                 ...this.trainings[index],
355 |                 input: prediction.input,
356 |                 status: prediction.status,
357 |                 output: prediction.output
358 |               }
359 |             }
360 |           }
361 |         }
362 |       } catch (e) {
363 |         console.log(
364 |           '--- (stores/prediction) error polling incomplete predictions:',
365 |           e.message
366 |         )
367 |       }
368 |     },
369 |     updateOutputPosition({ id, x, y, rotation, width, height }) {
370 |       const index = this.outputs.findIndex((output) => output.id === id)
371 |       if (index !== -1) {
372 |         this.outputs[index].metadata.x = x
373 |         this.outputs[index].metadata.y = y
374 |         this.outputs[index].metadata.rotation = rotation
375 |         if (width !== undefined) this.outputs[index].metadata.width = width
376 |         if (height !== undefined) this.outputs[index].metadata.height = height
377 |       }
378 |     },
379 |     addOutput(output) {
380 |       if (Array.isArray(output)) {
381 |         this.outputs.push(...output)
382 |       } else {
383 |         this.outputs.push(output)
384 |       }
385 |     },
386 |     removeOutput(id) {
387 |       if (Array.isArray(id)) {
388 |         this.outputs = this.outputs.filter((output) => !id.includes(output.id))
389 |       } else {
390 |         this.outputs = this.outputs.filter((output) => output.id !== id)
391 |       }
392 |     }
393 |   },
394 |   getters: {
395 |     incompletePredictions: (state) =>
396 |       [...state.outputs, ...state.trainings].filter(
397 |         (output) => output.status !== 'succeeded' && output.status !== 'failed'
398 |       )
399 |   }
400 | })
401 | 


--------------------------------------------------------------------------------
/stores/version.js:
--------------------------------------------------------------------------------
 1 | export const useVersionStore = defineStore('versionStore', {
 2 |   state: () => ({
 3 |     version_options: []
 4 |   }),
 5 |   actions: {
 6 |     setVersionOptions(val) {
 7 |       this.version_options = val
 8 |     }
 9 |   },
10 |   getters: {
11 |     getOwnerNameByVersion: (state) => (version) => {
12 |       const item = state.version_options.find((i) => i.version === version)
13 |       return item ? `${item.owner}/${item.name}` : null
14 |     },
15 |     getVersionByName: (state) => (name) => {
16 |       const item = state.version_options.find((i) => i.name === name)
17 |       return item ? item.version : null
18 |     },
19 |     getTriggerByVersion: (state) => (version) => {
20 |       const item = state.version_options.find((i) => i.version === version)
21 |       return item ? item.trigger : null
22 |     }
23 |   }
24 | })
25 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 |   // https://nuxt.com/docs/guide/concepts/typescript
3 |   "extends": "./.nuxt/tsconfig.json"
4 | }
5 | 


--------------------------------------------------------------------------------