├── .gitignore
├── .yarnrc.yml
├── README.md
├── app.config.ts
├── app.vue
├── components
    ├── Clicker.vue
    ├── Demo.vue
    ├── Hero.vue
    └── Uploader.vue
├── nuxt.config.ts
├── package.json
├── pages
    └── index.vue
├── prettier.config.cjs
├── public
    ├── cover.jpg
    ├── cross-icon.png
    ├── demo
    │   ├── bees.mp4
    │   ├── dog.mp4
    │   ├── fountain.mp4
    │   └── jellyfish.mp4
    ├── favicon.png
    ├── logo.png
    └── star-icon.png
├── server
    ├── api
    │   ├── file.post.js
    │   ├── prediction.get.js
    │   └── prediction.post.js
    └── tsconfig.json
├── 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 | # Green Screen Creator
 2 | 
 3 | Track objects in videos and add a green screen to the background.
 4 | 
 5 | Powered by Meta's [Segment Anything Model (SAM)](https://replicate.com/meta/sam-2-video) on Replicate.
 6 | 
 7 | ## Setup
 8 | 
 9 | Make sure to install the dependencies:
10 | 
11 | ```bash
12 | # npm
13 | npm install
14 | 
15 | # pnpm
16 | pnpm install
17 | 
18 | # yarn
19 | yarn install
20 | 
21 | # bun
22 | bun install
23 | ```
24 | 
25 | ## Development Server
26 | 
27 | Start the development server on `http://localhost:3000`:
28 | 
29 | ```bash
30 | # npm
31 | npm run dev
32 | 
33 | # pnpm
34 | pnpm run dev
35 | 
36 | # yarn
37 | yarn dev
38 | 
39 | # bun
40 | bun run dev
41 | ```
42 | 


--------------------------------------------------------------------------------
/app.config.ts:
--------------------------------------------------------------------------------
1 | export default defineAppConfig({
2 |   ui: {
3 |     primary: 'green',
4 |     container: {
5 |       constrained: 'max-w-5xl'
6 |     }
7 |   }
8 | })
9 | 


--------------------------------------------------------------------------------
/app.vue:
--------------------------------------------------------------------------------
 1 | <template lang="pug">
 2 | #app
 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/Clicker.vue:
--------------------------------------------------------------------------------
  1 | <template lang="pug">
  2 | u-card(
  3 |   :ui="{ ring: '', divide: 'divide-y divide-gray-100 dark:divide-gray-800' }"
  4 | )
  5 |   template(#header)
  6 |     .flex.items-center.justify-between
  7 |       h3.text-base.font-semibold.leading-6.text-gray-900(
  8 |         class="dark:text-white"
  9 |       ) Click on objects to track
 10 |       u-button(
 11 |         @click="$emit('reset')"
 12 |         :disabled="loading"
 13 |         color="gray"
 14 |         variant="ghost"
 15 |         icon="i-heroicons-x-mark-20-solid"
 16 |         class="-my-1"
 17 |       )
 18 |   .relative
 19 |     div.w-full.aspect-1.bg-contain.bg-center.bg-no-repeat.bg-black.cursor-pointer(
 20 |       @mousemove="onMouseMove"
 21 |       @mousedown="onMouseDown"
 22 |       @contextmenu="(e) => e.preventDefault()"
 23 |       ref="container"
 24 |     )
 25 |       canvas.absolute.w-full.h-full.pointer-events-none.opacity-60(ref="maskCanvas")
 26 |     .hidden
 27 |       img.icon(
 28 |         ref="starIcon"
 29 |         src="/star-icon.png"
 30 |       )
 31 |       img.icon(
 32 |         ref="crossIcon"
 33 |         src="/cross-icon.png"
 34 |       )
 35 |   .pt-6.text-sm.grid.grid-cols-3
 36 |     .flex.items-center
 37 |       u-kbd(
 38 |         value="Left click = retain"
 39 |       )
 40 |     u-divider(orientation="vertical")
 41 |     .flex.items-center
 42 |       u-kbd(
 43 |         value="Right click = green screen"
 44 |       )
 45 |   template(#footer)
 46 |     .flex
 47 |       u-button(
 48 |         @click="reset"
 49 |         :disabled="loading"
 50 |         color="red"
 51 |         variant="link"
 52 |       ) Clear Points
 53 |       .grow
 54 |       u-button(
 55 |         @click="submit"
 56 |         :loading="loading"
 57 |         :disabled="false"
 58 |         color="black"
 59 |       ) Submit
 60 | </template>
 61 | 
 62 | <script>
 63 | import {
 64 |   SamModel,
 65 |   AutoProcessor,
 66 |   RawImage,
 67 |   Tensor
 68 | } from 'https://cdn.jsdelivr.net/npm/@huggingface/transformers@3.0.0-alpha.5'
 69 | 
 70 | const model_id = 'Xenova/slimsam-77-uniform'
 71 | 
 72 | // Clamp a value inside a range [min, max]
 73 | const clamp = (x, min = 0, max = 1) => {
 74 |   return Math.max(Math.min(x, max), min)
 75 | }
 76 | 
 77 | export default {
 78 |   name: 'Clicker',
 79 |   props: ['image', 'loading'],
 80 |   data: () => ({
 81 |     mask_ctx: null,
 82 | 
 83 |     model: null,
 84 |     processor: null,
 85 | 
 86 |     is_decoding: false,
 87 |     decode_pending: false,
 88 | 
 89 |     last_points: null,
 90 |     image_embeddings: null,
 91 |     is_multi_mask_mode: false,
 92 | 
 93 |     image_processed: null,
 94 |     image_embeddings: null
 95 |   }),
 96 |   methods: {
 97 |     async decode() {
 98 |       // Only proceed if we are not already decoding
 99 |       if (this.is_decoding) {
100 |         this.decode_pending = true
101 |         return
102 |       }
103 |       this.is_decoding = true
104 | 
105 |       // Prepare inputs for decoding
106 |       const reshaped = this.image_processed.reshaped_input_sizes[0]
107 |       const points = this.last_points
108 |         .map((x) => [x.position[0] * reshaped[1], x.position[1] * reshaped[0]])
109 |         .flat(Infinity)
110 |       const labels = this.last_points.map((x) => BigInt(x.label)).flat(Infinity)
111 | 
112 |       const num_points = this.last_points.length
113 |       const input_points = new Tensor('float32', points, [1, 1, num_points, 2])
114 |       const input_labels = new Tensor('int64', labels, [1, 1, num_points])
115 | 
116 |       // Generate the mask
117 |       const { pred_masks, iou_scores } = await this.model({
118 |         ...this.image_embeddings,
119 |         input_points,
120 |         input_labels
121 |       })
122 | 
123 |       // Post-process the mask
124 |       const masks = await this.processor.post_process_masks(
125 |         pred_masks,
126 |         this.image_processed.original_sizes,
127 |         this.image_processed.reshaped_input_sizes
128 |       )
129 | 
130 |       this.is_decoding = false
131 | 
132 |       this.updateMaskOverlay(RawImage.fromTensor(masks[0][0]), iou_scores.data)
133 | 
134 |       // Check if another decode is pending
135 |       if (this.decode_pending) {
136 |         this.decode_pending = false
137 |         this.decode()
138 |       }
139 |     },
140 |     updateMaskOverlay(mask, scores) {
141 |       // Update canvas dimensions (if different)
142 |       if (
143 |         this.$refs.maskCanvas.width !== mask.width ||
144 |         this.$refs.maskCanvas.height !== mask.height
145 |       ) {
146 |         this.$refs.maskCanvas.width = mask.width
147 |         this.$refs.maskCanvas.height = mask.height
148 |       }
149 | 
150 |       // Allocate buffer for pixel data
151 |       const imageData = this.mask_ctx.createImageData(
152 |         this.$refs.maskCanvas.width,
153 |         this.$refs.maskCanvas.height
154 |       )
155 | 
156 |       // Select best mask
157 |       const numMasks = scores.length // 3
158 |       let bestIndex = 0
159 |       for (let i = 1; i < numMasks; ++i) {
160 |         if (scores[i] > scores[bestIndex]) {
161 |           bestIndex = i
162 |         }
163 |       }
164 | 
165 |       // Fill mask with colour
166 |       const pixelData = imageData.data
167 |       for (let i = 0; i < pixelData.length; ++i) {
168 |         if (mask.data[numMasks * i + bestIndex] === 1) {
169 |           const offset = 4 * i
170 |           pixelData[offset] = 0 // red
171 |           pixelData[offset + 1] = 114 // green
172 |           pixelData[offset + 2] = 189 // blue
173 |           pixelData[offset + 3] = 255 // alpha
174 |         }
175 |       }
176 | 
177 |       // Draw image data to context
178 |       this.mask_ctx.putImageData(imageData, 0, 0)
179 |     },
180 |     async segment(url) {
181 |       const imageInput = await RawImage.fromURL(url)
182 | 
183 |       // Update UI
184 |       this.$refs.container.style.backgroundImage = `url(${url})`
185 | 
186 |       // Recompute image embeddings
187 |       this.image_processed = await this.processor(imageInput)
188 |       this.image_embeddings = await this.model.get_image_embeddings(
189 |         this.image_processed
190 |       )
191 |     },
192 |     getPoint(e) {
193 |       // Get bounding box
194 |       const bb = this.$refs.container.getBoundingClientRect()
195 | 
196 |       // Get the mouse coordinates relative to the container
197 |       const mouseX = clamp((e.clientX - bb.left) / bb.width)
198 |       const mouseY = clamp((e.clientY - bb.top) / bb.height)
199 | 
200 |       return {
201 |         position: [mouseX, mouseY],
202 |         label:
203 |           e.button === 2 // right click
204 |             ? 0 // negative prompt
205 |             : 1 // positive prompt
206 |       }
207 |     },
208 |     onMouseMove(e) {
209 |       // Ignore mousemove events if the image is not encoded yet,
210 |       // or we are in multi-mask mode
211 |       if (!this.image_embeddings || this.is_multi_mask_mode) {
212 |         return
213 |       }
214 |       this.last_points = [this.getPoint(e)]
215 | 
216 |       this.decode()
217 |     },
218 |     onMouseDown(e) {
219 |       if (this.loading) {
220 |         return
221 |       }
222 | 
223 |       // Ignore other buttons
224 |       if (e.button !== 0 && e.button !== 2) {
225 |         return
226 |       }
227 | 
228 |       // Ignore if not encoded yet
229 |       if (!this.image_embeddings) {
230 |         return
231 |       }
232 | 
233 |       if (!this.is_multi_mask_mode) {
234 |         this.last_points = []
235 |         this.is_multi_mask_mode = true
236 |       }
237 | 
238 |       const point = this.getPoint(e)
239 |       this.last_points.push(point)
240 | 
241 |       // add icon
242 |       const icon = (
243 |         point.label === 1 ? this.$refs.starIcon : this.$refs.crossIcon
244 |       ).cloneNode()
245 |       icon.style.left = `${point.position[0] * 100}%`
246 |       icon.style.top = `${point.position[1] * 100}%`
247 |       this.$refs.container.appendChild(icon)
248 | 
249 |       // Run decode
250 |       this.decode()
251 |     },
252 |     reset() {
253 |       // Reset state
254 |       this.is_multi_mask_mode = false
255 |       this.last_points = null
256 | 
257 |       // Remove points from previous mask (if any)
258 |       document.querySelectorAll('.icon').forEach((e) => e.remove())
259 | 
260 |       // Reset mask canvas
261 |       this.mask_ctx.clearRect(
262 |         0,
263 |         0,
264 |         this.$refs.maskCanvas.width,
265 |         this.$refs.maskCanvas.height
266 |       )
267 |     },
268 |     submit() {
269 |       // Convert points to coordinates
270 |       const original = this.image_processed.original_sizes[0]
271 |       const clicks = this.last_points.map((x) => ({
272 |         coordinates: [
273 |           parseInt(x.position[0] * original[1]),
274 |           parseInt(x.position[1] * original[0])
275 |         ],
276 |         label: x.label
277 |       }))
278 | 
279 |       this.$emit('submit', clicks)
280 |     }
281 |   },
282 |   async mounted() {
283 |     this.mask_ctx = this.$refs.maskCanvas.getContext('2d')
284 |     this.model = await SamModel.from_pretrained(model_id, {
285 |       dtype: 'fp16', // or "fp32"
286 |       device: 'webgpu'
287 |     })
288 |     this.processor = await AutoProcessor.from_pretrained(model_id)
289 |     this.segment(this.image)
290 |   }
291 | }
292 | </script>
293 | 
294 | <style lang="stylus" scoped>
295 | div
296 |   .icon
297 |     width 16px
298 |     height 16px
299 |     position absolute
300 |     transform translate(-50%, -50%)
301 | </style>
302 | 


--------------------------------------------------------------------------------
/components/Demo.vue:
--------------------------------------------------------------------------------
 1 | <template lang="pug">
 2 | .mx-auto.px-4.max-w-5xl(
 3 |   class="sm:pb-16 md:pb-24 sm:px-6 lg:px-8"
 4 | )
 5 |   .text-center(
 6 |     class="sm:pb-12 md:pb-20"
 7 |   )
 8 |     h1.text-4xl.font-bold.tracking-tight.text-gray-900(
 9 |       class="sm:text-6xl"
10 |     ) Demos
11 |   video.w-full.rounded-2xl.mt-12(
12 |     v-for="(demo, i) in demos"
13 |     :key="`demo-${i}`"
14 |     crossorigin="anonymous"
15 |     controls
16 |   )
17 |     source(:src="`/demo/${demo}.mp4`")
18 | </template>
19 | 
20 | <script>
21 | export default {
22 |   name: 'Demo',
23 |   data: () => ({
24 |     demos: ['dog', 'bees', 'jellyfish', 'fountain']
25 |   })
26 | }
27 | </script>
28 | 
29 | <style lang="stylus" scoped></style>
30 | 


--------------------------------------------------------------------------------
/components/Hero.vue:
--------------------------------------------------------------------------------
  1 | <template lang="pug">
  2 | .pt-8.pb-8.px-4.relative(
  3 |   class="sm:pb-16 md:pb-24 sm:px-6 lg:px-8"
  4 | )
  5 | 
  6 |   //- API token modal
  7 |   u-modal(v-model="modal")
  8 |     u-card(
  9 |       :ui="{ ring: '', divide: 'divide-y divide-gray-100 dark:divide-gray-800' }"
 10 |     )
 11 |       template(#header)
 12 |         .flex.items-center.justify-between
 13 |           h3.text-base.font-semibold.leading-6.text-gray-900(
 14 |             class="dark:text-white"
 15 |           ) Replicate API token
 16 |           u-button(
 17 |             color="gray"
 18 |             variant="ghost"
 19 |             icon="i-heroicons-x-mark-20-solid"
 20 |             class="-my-1"
 21 |             @click="modal = false"
 22 |           )
 23 |       p.text-sm.text-gray-500(
 24 |         class="dark:text-gray-400"
 25 |       )
 26 |         | Provide your personal Replicate API token. We will store the token in your browser's 
 27 |         a(
 28 |           href="https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage"
 29 |           target="_blank"
 30 |         ) localstorage
 31 |         | , and use it to run machine learning models in the cloud.
 32 |       template(#footer)
 33 |         u-button(
 34 |           to="https://replicate.com/account/api-tokens"
 35 |           target="_blank"
 36 |           color="black"
 37 |           icon="i-heroicons-arrow-top-right-on-square"
 38 |           trailing
 39 |         ) My Replicate API tokens
 40 | 
 41 |   .mb-8.mx-auto.gap-4.flex.flex-row.max-w-5xl.items-center(
 42 |     class="sm:mb-16 md:mb-24"
 43 |   )
 44 |     img.max-h-8(src="/logo.png")
 45 |     .text-base(
 46 |       class="md:text-2xl"
 47 |     )
 48 |       span.text-primary green 
 49 |       | screen 
 50 |       span.text-primary creator
 51 |     .grow
 52 |     u-button(
 53 |       to="https://github.com/replicate/green-screen-creator"
 54 |       target="_blank"
 55 |       size="lg"
 56 |       icon="i-heroicons-code-bracket"
 57 |       variant="ghost"
 58 |     ) Get the Code
 59 |   .mx-auto.gap-16.flex.flex-col.max-w-4xl(
 60 |     class="sm:gap-y-24"
 61 |   )
 62 |     .text-center.relative
 63 |       h1.text-5xl.font-bold.tracking-tight.text-gray-900(
 64 |         class="dark:text-white sm:text-7xl"
 65 |       )
 66 |         span.text-primary Green 
 67 |         | Screen 
 68 |         span.text-primary Creator
 69 |       p.mt-6.mb-10.text-lg.tracking-tight.text-gray-600(
 70 |         class="dark:text-gray-100"
 71 |       )
 72 |         | Track an object in a video and add a green screen to the background.
 73 |       .flex.justify-center.space-x-2
 74 |         u-input(
 75 |           v-model="api_token"
 76 |           @keydown.enter=""
 77 |           size="xl"
 78 |           placeholder="Replicate API token"
 79 |           icon="i-heroicons-key"
 80 |           type="password"
 81 |         )
 82 |         u-button(
 83 |           @click=""
 84 |           :disabled="!api_token"
 85 |           size="xl"
 86 |           color="black"
 87 |         ) Set token
 88 |         u-button(
 89 |           @click="modal = true"
 90 |           icon="i-heroicons-question-mark-circle"
 91 |           variant="link"
 92 |           size="xl"
 93 |         )
 94 | </template>
 95 | 
 96 | <script>
 97 | import { useLocalStorage } from '@vueuse/core'
 98 | 
 99 | export default {
100 |   name: 'Hero',
101 |   setup: () => ({
102 |     api_token: useLocalStorage('inpainter-video-api-token', null)
103 |   }),
104 |   data: () => ({
105 |     modal: false
106 |   })
107 | }
108 | </script>
109 | 
110 | <style lang="stylus" scoped></style>
111 | 


--------------------------------------------------------------------------------
/components/Uploader.vue:
--------------------------------------------------------------------------------
  1 | <template lang="pug">
  2 | #uploader.mx-auto.pb-8.px-4.max-w-5xl.grid.grid-cols-1.gap-8(
  3 |   v-if="api_token"
  4 |   class="sm:pb-16 md:pb-24 sm:px-6 lg:px-8 sm:gap-y-24 md:grid-cols-2"
  5 | )
  6 |   //- Hidden input
  7 |   input(
  8 |     @change="onFileSelected"
  9 |     type="file"
 10 |     ref="file"
 11 |     accept="video/*"
 12 |   )
 13 | 
 14 |   //- First-frame modal
 15 |   u-modal(
 16 |     v-model="modal"
 17 |     prevent-close
 18 |   )
 19 |     clicker(
 20 |       @submit="submit"
 21 |       @reset="modal = false; reset();"
 22 |       :image="input_video_first_frame"
 23 |       :loading="loading_upload"
 24 |     )
 25 | 
 26 |   div
 27 |     //- File upload
 28 |     template(v-if="input_method === 'file'")
 29 |       .upload-button.relative.overflow-hidden.w-full.flex.flex-col.gap-4.justify-center.items-center.text-center.cursor-pointer.rounded-2xl.aspect-1.text-2xl(
 30 |         @click="onClickSelect"
 31 |         class="bg-gray-100 hover:bg-[#dddddd]"
 32 |       )
 33 |         template(v-if="input_video_object_url")
 34 |           .preview
 35 |             video.w-full.h-full.bg-black(controls)
 36 |               source(:src="input_video_object_url")
 37 |         template(v-else)
 38 |           template(v-if="loading_file")
 39 |             u-progress(
 40 |               :ui="{ wrapper: 'w-9/12' }"
 41 |               animation="swing"
 42 |             )
 43 |           template(v-else)
 44 |             u-icon.icon(
 45 |               name="i-heroicons-arrow-up-tray"
 46 |             )
 47 |             span Upload a video
 48 |       .text-center.my-4(v-if="input_video_object_url")
 49 |         u-button(
 50 |           @click="reset"
 51 |           icon="i-heroicons-trash"
 52 |           variant="link"
 53 |           color="black"
 54 |         )
 55 |       .text-center.my-4(v-else)
 56 |         u-button(
 57 |           @click="input_method = 'url'"
 58 |           icon="i-heroicons-link"
 59 |           variant="link"
 60 |           color="black"
 61 |         ) or paste an URL of a video file
 62 | 
 63 |     //- URL upload
 64 |     template(v-if="input_method === 'url'")
 65 |       .upload-button.relative.overflow-hidden.w-full.flex.flex-col.gap-4.justify-center.items-center.text-center.rounded-2xl.aspect-1.text-2xl(
 66 |         class="bg-gray-100"
 67 |       )
 68 |         u-input(
 69 |           v-model="input_video_url"
 70 |           @keydown.enter="onClickSelectUrl"
 71 |           :disabled="loading_file"
 72 |           class="w-9/12"
 73 |           size="xl"
 74 |           placeholder="https://"
 75 |           autofocus
 76 |         )
 77 |         u-button(
 78 |           @click="onClickSelectUrl"
 79 |           :loading="loading_file"
 80 |           class="w-9/12"
 81 |           size="xl"
 82 |           color="black"
 83 |           block
 84 |         ) Upload
 85 |       .text-center.my-4
 86 |         u-button(
 87 |           @click="input_method = 'file'"
 88 |           icon="i-heroicons-arrow-up-tray"
 89 |           variant="link"
 90 |           color="black"
 91 |         ) or upload a file from your computer
 92 | 
 93 |   div.space-y-4
 94 |     template(v-if="loading_prediction")
 95 |       template(v-if="!output_video")
 96 |         u-divider.mb-4(
 97 |           v-if="status"
 98 |           :label="status"
 99 |           type="dashed"
100 |         )
101 |         u-alert.mb-4(
102 |           title="The selected object in the video is being tracked"
103 |           description="This is done by the SAM 2 model that is running on Replicate."
104 |           icon="i-heroicons-video-camera"
105 |           :actions="[{ variant: 'solid', color: 'primary', label: 'Run SAM 2 with an API', icon: 'i-heroicons-arrow-top-right-on-square', trailing: true, click: openUrl }]"
106 |           color="primary"
107 |           variant="soft"
108 |         )
109 |       video.w-full.bg-black.aspect-1.rounded-2xl(
110 |         v-else
111 |         controls
112 |         crossorigin="anonymous"
113 |       )
114 |         source(:src="output_video")
115 | </template>
116 | 
117 | <script>
118 | import { createFFmpeg, fetchFile } from '@ffmpeg/ffmpeg'
119 | import { useLocalStorage } from '@vueuse/core'
120 | 
121 | // Logs are used to capture frame rate
122 | let ffmpeg_logs = ''
123 | 
124 | const ffmpeg = createFFmpeg({
125 |   log: true,
126 |   logger: ({ message }) => {
127 |     ffmpeg_logs += message + '\n'
128 |   }
129 | })
130 | 
131 | const sleep = (ms) => new Promise((r) => setTimeout(r, ms))
132 | 
133 | const blobToBase64 = (blob) => {
134 |   return new Promise((resolve) => {
135 |     const reader = new FileReader()
136 |     reader.onload = () => resolve(reader.result)
137 |     reader.readAsDataURL(blob)
138 |   })
139 | }
140 | 
141 | const extractFirstFrame = (videoUrl) => {
142 |   return new Promise((resolve, reject) => {
143 |     const video = document.createElement('video')
144 |     video.crossOrigin = 'anonymous' // Enable CORS access
145 |     video.src = videoUrl
146 | 
147 |     // Load metadata first
148 |     video.addEventListener('loadedmetadata', () => {
149 |       // Set a small currentTime to grab the first frame
150 |       video.currentTime = 0.01
151 |     })
152 | 
153 |     video.addEventListener('seeked', () => {
154 |       // Video has seeked to the required time
155 |       const canvas = document.createElement('canvas')
156 |       canvas.width = video.videoWidth
157 |       canvas.height = video.videoHeight
158 | 
159 |       const ctx = canvas.getContext('2d')
160 |       ctx.drawImage(video, 0, 0, canvas.width, canvas.height)
161 | 
162 |       // Convert to data URL
163 |       const dataUrl = canvas.toDataURL('image/jpeg')
164 |       resolve(dataUrl)
165 | 
166 |       // Clean up
167 |       video.src = ''
168 |     })
169 | 
170 |     video.addEventListener('error', (e) => {
171 |       reject(new Error(`Video error: ${video.error.message}`))
172 |     })
173 | 
174 |     // Start loading the video
175 |     video.load()
176 |   })
177 | }
178 | 
179 | export default {
180 |   name: 'Uploader',
181 |   setup: () => ({
182 |     api_token: useLocalStorage('inpainter-video-api-token', null)
183 |   }),
184 |   data: () => ({
185 |     loading_file: false,
186 |     loading_upload: false,
187 |     loading_prediction: false,
188 | 
189 |     input_method: 'file',
190 | 
191 |     input_video_base64: null,
192 |     input_video_object_url: null,
193 |     input_video_first_frame: null,
194 |     input_video_framerate: null,
195 |     input_video_file_url: null,
196 |     input_video_url: null,
197 | 
198 |     output_video: null,
199 | 
200 |     clicks: null,
201 | 
202 |     modal: false,
203 |     status: null
204 |   }),
205 |   watch: {
206 |     modal(val) {
207 |       if (!val) return
208 | 
209 |       this.$nextTick(() => {
210 |         const img = this.$refs.firstFrameImage
211 |         if (img) {
212 |           this.frame_image_natural_size = {
213 |             width: img.naturalWidth,
214 |             height: img.naturalHeight
215 |           }
216 |         }
217 |       })
218 |     }
219 |   },
220 |   methods: {
221 |     reset() {
222 |       this.loading_file = false
223 |       this.loading_upload = false
224 |       this.loading_prediction = false
225 | 
226 |       this.input_video_base64 = null
227 |       this.input_video_object_url = null
228 |       this.input_video_first_frame = null
229 |       this.input_video_framerate = null
230 |       this.input_video_file_url = null
231 | 
232 |       this.output_video = null
233 |       this.clicks = null
234 | 
235 |       this.status = null
236 | 
237 |       this.$refs.file.value = null
238 |     },
239 |     onClickSelect() {
240 |       if (!this.api_token || this.loading_prediction) return
241 |       this.$refs.file.click()
242 |     },
243 |     onClickSelectUrl() {
244 |       if (!this.api_token || this.loading_prediction || !this.input_video_url)
245 |         return
246 |       this.onUrlSelected()
247 |     },
248 |     async onFileSelected(e) {
249 |       this.loading_file = true
250 | 
251 |       try {
252 |         const file = e.target.files[0]
253 | 
254 |         // Make sure ffmpeg is loaded
255 |         if (!ffmpeg.isLoaded()) {
256 |           await ffmpeg.load()
257 |         }
258 | 
259 |         // Write the file to FFmpeg's file system
260 |         ffmpeg.FS('writeFile', 'input_video', await fetchFile(file))
261 | 
262 |         // Convert the input video to MP4 with max 512x512 size
263 |         await ffmpeg.run(
264 |           '-i',
265 |           'input_video',
266 |           '-c:v',
267 |           'libx264', // Use H.264 codec for video
268 |           '-c:a',
269 |           'aac', // Use AAC codec for audio
270 |           '-strict',
271 |           'experimental', // Needed for some FFmpeg versions
272 |           '-b:a',
273 |           '192k', // Audio bitrate
274 |           '-vf',
275 |           'scale=w=512:h=512:force_original_aspect_ratio=decrease,pad=512:512:(ow-iw)/2:(oh-ih)/2,setsar=1:1', // Scale and pad to 512x512
276 |           '-pix_fmt',
277 |           'yuv420p', // Ensure video compatibility
278 |           '-color_range',
279 |           '1', // Force full color range (0-255)
280 |           '-colorspace',
281 |           'bt709', // Use BT.709 color space (standard for HD)
282 |           '-color_trc',
283 |           'bt709',
284 |           '-color_primaries',
285 |           'bt709',
286 |           'output.mp4'
287 |         )
288 | 
289 |         // Extract framerate
290 |         ffmpeg_logs = ''
291 |         await ffmpeg.run('-i', 'output.mp4', '-f', 'null', '-')
292 |         const fpsMatch = ffmpeg_logs.match(/(\d+(?:\.\d+)?) fps/)
293 |         this.input_video_framerate = fpsMatch ? parseFloat(fpsMatch[1]) : null
294 | 
295 |         // Extract only the first frame as JPEG
296 |         await ffmpeg.run(
297 |           '-i',
298 |           'output.mp4',
299 |           '-vf',
300 |           'select=eq(n\\,0)', // Note the double backslash
301 |           '-vframes',
302 |           '1',
303 |           '-q:v',
304 |           '2',
305 |           'first_frame.jpg'
306 |         )
307 | 
308 |         // Read the converted MP4 file
309 |         const mp4Data = ffmpeg.FS('readFile', 'output.mp4')
310 | 
311 |         // Create Blob from the MP4 data
312 |         const mp4Blob = new Blob([mp4Data.buffer], { type: 'video/mp4' })
313 | 
314 |         // Convert MP4 to base64
315 |         const videoBase64 = await blobToBase64(mp4Blob)
316 | 
317 |         this.input_video_base64 = videoBase64
318 |         this.input_video_object_url = URL.createObjectURL(mp4Blob)
319 | 
320 |         // Read first frame and convert to base64
321 |         const frameData = ffmpeg.FS('readFile', 'first_frame.jpg')
322 |         const frameBlob = new Blob([frameData.buffer], {
323 |           type: 'image/jpeg'
324 |         })
325 |         this.input_video_first_frame = await blobToBase64(frameBlob)
326 | 
327 |         this.modal = true
328 |         this.loading_file = false
329 |       } catch (e) {
330 |         console.log('--- error (onFileSelected):', e.message)
331 |       } finally {
332 |         // Clean up FFmpeg file system
333 |         try {
334 |           ffmpeg.FS('unlink', 'input_video')
335 |           ffmpeg.FS('unlink', 'output.mp4')
336 |           ffmpeg.FS('unlink', 'first_frame.jpg')
337 |         } catch (e) {
338 |           console.error('Error cleaning up FFmpeg file system:', e)
339 |         }
340 |       }
341 |     },
342 |     async onUrlSelected(e) {
343 |       this.reset()
344 |       this.loading_file = true
345 | 
346 |       try {
347 |         this.input_video_first_frame = await extractFirstFrame(
348 |           this.input_video_url
349 |         )
350 | 
351 |         this.modal = true
352 |         this.loading_file = false
353 |       } catch (e) {
354 |         console.log('--- error (onFileSelected):', e)
355 |       }
356 |     },
357 |     async createVideoFromFrames(frames = []) {
358 |       try {
359 |         if (!frames || frames.length <= 0) {
360 |           throw new Error('missing frames')
361 |         }
362 | 
363 |         // Make mask video
364 |         // Download and write each image to FFmpeg's virtual file system
365 |         for (let i = 0; i < frames.length; i++) {
366 |           const imageData = await fetchFile(frames[i])
367 |           ffmpeg.FS('writeFile', `frame_${i}.png`, imageData)
368 |         }
369 | 
370 |         // Run FFmpeg command to stitch images into a video
371 |         await ffmpeg.run(
372 |           '-framerate',
373 |           this.input_video_framerate.toString(),
374 |           '-i',
375 |           'frame_%d.png',
376 |           '-c:v',
377 |           'libx264',
378 |           '-r',
379 |           this.input_video_framerate.toString(),
380 |           '-pix_fmt',
381 |           'yuv420p',
382 |           'output.mp4'
383 |         )
384 | 
385 |         // Read the result
386 |         const data = ffmpeg.FS('readFile', 'output.mp4')
387 | 
388 |         return URL.createObjectURL(
389 |           new Blob([data.buffer], { type: 'video/mp4' })
390 |         )
391 |       } catch (e) {
392 |         console.log('--- error (createVideoFromFrames):', e.message)
393 |         return null
394 |       } finally {
395 |         // Clean up FFmpeg file system
396 |         try {
397 |           for (let i = 0; i < frames.length; i++) {
398 |             ffmpeg.FS('unlink', `frame_${i}.png`)
399 |           }
400 |           ffmpeg.FS('unlink', 'output.mp4')
401 |         } catch (e) {
402 |           console.error('Error cleaning up FFmpeg file system:', e)
403 |         }
404 |       }
405 |     },
406 |     async submit(clicks) {
407 |       this.loading_upload = true
408 |       this.clicks = clicks
409 | 
410 |       try {
411 |         // Wait for video upload to complete
412 |         if (!this.input_video_url) {
413 |           const [input_video_file_url] = await Promise.all([
414 |             this.createFile('input_video.mp4', this.input_video_base64)
415 |           ])
416 | 
417 |           this.input_video_file_url = input_video_file_url
418 | 
419 |           // Just use the provided URL
420 |         } else {
421 |           this.input_video_file_url = this.input_video_url
422 |         }
423 | 
424 |         // Close modal and end loading
425 |         this.modal = false
426 | 
427 |         // Start pipeline
428 |         this.pipeline()
429 |       } catch (e) {
430 |         console.log(e)
431 |       } finally {
432 |         this.loading_upload = false
433 |       }
434 |     },
435 |     async pipeline() {
436 |       this.loading_prediction = true
437 | 
438 |       try {
439 | 
440 |         this.status = 'Tracking: starting'
441 | 
442 |         const click_coordinates = this.clicks
443 |           .map(({ coordinates }) => `[${coordinates[0]},${coordinates[1]}]`)
444 |           .join(',')
445 |         const click_labels = this.clicks.map(({ label }) => label).join(',')
446 |           const click_frames = this.clicks.map((x) => '1').join(',')
447 |         const click_object_ids = this.clicks.map((x, i) => i + 1).join(',')
448 | 
449 |         // Model: SAM 2
450 |         // https://replicate.com/meta/sam-2-video
451 |         const prediction = await this.createPrediction(
452 |           '33432afdfc06a10da6b4018932893d39b0159f838b6d11dd1236dff85cc5ec1d',
453 |           {
454 |             input_video: this.input_video_file_url,
455 |             click_coordinates,
456 |             click_labels,
457 |             click_frames,
458 |             click_object_ids,
459 |             mask_type: 'greenscreen',
460 |             output_video: true,
461 |             video_fps: parseInt(this.input_video_framerate),
462 |             output_format: 'webp',
463 |             output_quality: 80,
464 |             output_frame_interval: 1
465 |           },
466 |           (prediction) => {
467 |             function getLastPercentage(logString) {
468 |               const percentageRegex = /\s(\d+)%\|/g
469 |               let lastMatch = null
470 |               let match
471 | 
472 |               while ((match = percentageRegex.exec(logString)) !== null) {
473 |                 lastMatch = match
474 |               }
475 | 
476 |               return lastMatch ? lastMatch[1] : 0
477 |             }
478 | 
479 |             const status =
480 |               prediction?.status === 'processing'
481 |                 ? `processing (${getLastPercentage(prediction?.logs)}%)`
482 |                 : prediction?.status
483 | 
484 |             this.status = `Tracking: ${status || 'starting'}`
485 |           }
486 |         )
487 | 
488 |         // Create mask video from frames
489 |         this.status = 'Downloading video'
490 |         this.output_video = prediction.output[0]
491 | 
492 |         console.log('prediction', prediction)
493 |       } catch (e) {
494 |         console.log('--- error (pipeline):', e.message)
495 |       } finally {
496 |         this.status = null
497 |       }
498 |     },
499 | 
500 |     async createFile(file_name, data) {
501 |       try {
502 |         const response = await $fetch('/api/file', {
503 |           method: 'POST',
504 |           body: {
505 |             api_token: this.api_token,
506 |             file_name,
507 |             data
508 |           }
509 |         })
510 | 
511 |         return response.data
512 |       } catch (e) {
513 |         console.log('--- error (createFile):', e.message)
514 |       }
515 |     },
516 |     async createPrediction(
517 |       version,
518 |       input,
519 |       callback = () => {},
520 |       poll_interval = 3000
521 |     ) {
522 |       try {
523 |         const { data } = await $fetch('/api/prediction', {
524 |           method: 'POST',
525 |           body: {
526 |             api_token: this.api_token,
527 |             version,
528 |             input
529 |           }
530 |         })
531 | 
532 |         let status = 'starting'
533 |         let response = null
534 | 
535 |         // Poll
536 |         while (status !== 'succeeded' && status !== 'failed') {
537 |           response = await $fetch(
538 |             `/api/prediction?api_token=${this.api_token}&id=${data?.id}`
539 |           )
540 |           callback(response.data)
541 | 
542 |           status = response.data.status
543 |           if (status !== 'succeeded' && status !== 'failed') {
544 |             await sleep(poll_interval)
545 |           }
546 |         }
547 | 
548 |         return response.data
549 |       } catch (e) {
550 |         console.log('--- error (createPrediction):', e.message)
551 |       }
552 |     },
553 |     openUrl() {
554 |       window.open('https://replicate.com/meta/sam-2-video', '_blank')
555 |     }
556 |   }
557 | }
558 | </script>
559 | 
560 | <style lang="stylus" scoped>
561 | #uploader
562 |   input[type="file"]
563 |     display none
564 | 
565 |   .upload-button
566 |     transition background 150ms ease-in-out
567 | 
568 |     .preview
569 |       background-size cover
570 |       background-position center
571 |       position absolute
572 |       bottom 0
573 |       right 0
574 |       left 0
575 |       top 0
576 | 
577 |     .icon
578 |       transition transform 150ms ease-in-out
579 | 
580 |     &:hover
581 |       .icon
582 |         transform translateY(-5px)
583 | </style>
584 | 


--------------------------------------------------------------------------------
/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 |     routeRules: {
 11 |       '/**': {
 12 |         headers: {
 13 |           'Cross-Origin-Embedder-Policy': 'require-corp',
 14 |           'Cross-Origin-Opener-Policy': 'same-origin'
 15 |         }
 16 |       }
 17 |     }
 18 |   },
 19 |   sourcemap: {
 20 |     server: false,
 21 |     client: false
 22 |   },
 23 |   app: {
 24 |     head: {
 25 |       htmlAttrs: {
 26 |         class: 'h-full'
 27 |       },
 28 |       title: 'Green Screen Creator',
 29 |       link: [
 30 |         { rel: 'canonical', href: 'https://green-screen-creator.vercel.app' },
 31 |         { rel: 'icon', type: 'image/x-icon', href: '/favicon.png' }
 32 |       ],
 33 |       meta: [
 34 |         { hid: 'charset', charset: 'utf-8' },
 35 |         { 'http-equiv': 'X-UA-Compatible', content: 'IE=edge' },
 36 |         {
 37 |           hid: 'viewport',
 38 |           name: 'viewport',
 39 |           content:
 40 |             'width=device-width,height=device-height,initial-scale=1.0,user-scalable=0,minimum-scale=1.0,maximum-scale=1.0,viewport-fit=cover'
 41 |         },
 42 |         {
 43 |           hid: 'format-detection',
 44 |           name: 'format-detection',
 45 |           content: 'telephone=no'
 46 |         },
 47 |         {
 48 |           hid: 'description',
 49 |           name: 'description',
 50 |           content:
 51 |             'Track an object in a video and add a green screen to the background.'
 52 |         },
 53 |         {
 54 |           hid: 'og:type',
 55 |           name: 'og:type',
 56 |           property: 'og:type',
 57 |           content: 'website'
 58 |         },
 59 |         {
 60 |           hid: 'og:url',
 61 |           name: 'og:url',
 62 |           property: 'og:url',
 63 |           content: 'https://green-screen-creator.vercel.app'
 64 |         },
 65 |         {
 66 |           hid: 'og:site_name',
 67 |           name: 'og:site_name',
 68 |           property: 'og:site_name',
 69 |           content: 'green-screen-creator.vercel.app'
 70 |         },
 71 |         {
 72 |           hid: 'og:title',
 73 |           name: 'og:title',
 74 |           property: 'og:title',
 75 |           content: 'Green Screen Creator'
 76 |         },
 77 |         {
 78 |           hid: 'og:description',
 79 |           name: 'og:description',
 80 |           property: 'og:description',
 81 |           content:
 82 |             'Track an object in a video and add a green screen to the background.'
 83 |         },
 84 |         {
 85 |           hid: 'og:image',
 86 |           name: 'og:image',
 87 |           property: 'og:image',
 88 |           content: 'https://green-screen-creator.vercel.app/cover.jpg'
 89 |         },
 90 |         {
 91 |           name: 'twitter:card',
 92 |           content: 'summary_large_image'
 93 |         },
 94 |         {
 95 |           name: 'twitter:title',
 96 |           content: 'Green Screen Creator'
 97 |         },
 98 |         {
 99 |           name: 'twitter:description',
100 |           content:
101 |             'Track an object in a video and add a green screen to the background.'
102 |         },
103 |         {
104 |           name: 'twitter:image',
105 |           content: 'https://green-screen-creator.vercel.app/cover.jpg'
106 |         },
107 |         {
108 |           hid: 'msapplication-TileColor',
109 |           name: 'msapplication-TileColor',
110 |           content: '#ffffff'
111 |         },
112 |         { hid: 'theme-color', name: 'theme-color', content: '#ffffff' },
113 |         {
114 |           hid: 'mobile-web-app-capable',
115 |           name: 'mobile-web-app-capable',
116 |           content: 'yes'
117 |         },
118 |         {
119 |           hid: 'apple-mobile-web-app-title',
120 |           name: 'apple-mobile-web-app-title',
121 |           content: 'green-screen-creator.vercel.app'
122 |         }
123 |       ],
124 |       script: [
125 |         {
126 |           async: true,
127 |           src: `https://www.googletagmanager.com/gtag/js?id=${process.env.GTAG_ID}`
128 |         },
129 |         {
130 |           children: `
131 |             window.dataLayer = window.dataLayer || [];
132 |             function gtag(){dataLayer.push(arguments);}
133 |             gtag('js', new Date());
134 |             gtag('config', '${process.env.GTAG_ID}');`
135 |         }
136 |       ],
137 |       bodyAttrs: {
138 |         class: 'antialiased h-full min-h-screen relative'
139 |       }
140 |     }
141 |   },
142 |   modules: ['@nuxt/ui', '@vueuse/nuxt'],
143 |   colorMode: {
144 |     preference: 'light'
145 |   },
146 |   ui: {
147 |     global: true
148 |   }
149 | })
150 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "green-screen-creator",
 3 |   "private": true,
 4 |   "type": "module",
 5 |   "scripts": {
 6 |     "build": "nuxt build",
 7 |     "dev": "nuxt dev",
 8 |     "generate": "nuxt generate",
 9 |     "preview": "nuxt preview",
10 |     "postinstall": "nuxt prepare"
11 |   },
12 |   "dependencies": {
13 |     "@ffmpeg/core": "0.10.0",
14 |     "@ffmpeg/ffmpeg": "0.9.8",
15 |     "@nuxt/ui": "^2.18.3",
16 |     "@vueuse/core": "^10.11.0",
17 |     "@vueuse/nuxt": "^10.11.0",
18 |     "nuxt": "^3.12.4",
19 |     "three": "^0.167.1",
20 |     "vue": "latest"
21 |   },
22 |   "devDependencies": {
23 |     "pug": "^3.0.3",
24 |     "pug-plain-loader": "^1.1.0",
25 |     "stylus": "^0.63.0",
26 |     "stylus-loader": "^8.1.0"
27 |   }
28 | }
29 | 


--------------------------------------------------------------------------------
/pages/index.vue:
--------------------------------------------------------------------------------
 1 | <template lang="pug">
 2 | div
 3 |   hero
 4 |   uploader
 5 |   demo
 6 | </template>
 7 | 
 8 | <script>
 9 | export default {
10 |   name: 'index'
11 | }
12 | </script>
13 | 
14 | <style lang="stylus" scoped></style>
15 | 


--------------------------------------------------------------------------------
/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/green-screen-creator/ebbb84cb8bafcd1dee4b2ad1432dde70fe1a4724/public/cover.jpg


--------------------------------------------------------------------------------
/public/cross-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/replicate/green-screen-creator/ebbb84cb8bafcd1dee4b2ad1432dde70fe1a4724/public/cross-icon.png


--------------------------------------------------------------------------------
/public/demo/bees.mp4:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/replicate/green-screen-creator/ebbb84cb8bafcd1dee4b2ad1432dde70fe1a4724/public/demo/bees.mp4


--------------------------------------------------------------------------------
/public/demo/dog.mp4:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/replicate/green-screen-creator/ebbb84cb8bafcd1dee4b2ad1432dde70fe1a4724/public/demo/dog.mp4


--------------------------------------------------------------------------------
/public/demo/fountain.mp4:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/replicate/green-screen-creator/ebbb84cb8bafcd1dee4b2ad1432dde70fe1a4724/public/demo/fountain.mp4


--------------------------------------------------------------------------------
/public/demo/jellyfish.mp4:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/replicate/green-screen-creator/ebbb84cb8bafcd1dee4b2ad1432dde70fe1a4724/public/demo/jellyfish.mp4


--------------------------------------------------------------------------------
/public/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/replicate/green-screen-creator/ebbb84cb8bafcd1dee4b2ad1432dde70fe1a4724/public/favicon.png


--------------------------------------------------------------------------------
/public/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/replicate/green-screen-creator/ebbb84cb8bafcd1dee4b2ad1432dde70fe1a4724/public/logo.png


--------------------------------------------------------------------------------
/public/star-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/replicate/green-screen-creator/ebbb84cb8bafcd1dee4b2ad1432dde70fe1a4724/public/star-icon.png


--------------------------------------------------------------------------------
/server/api/file.post.js:
--------------------------------------------------------------------------------
 1 | export default defineEventHandler(async (event) => {
 2 |   try {
 3 |     const { api_token, file_name, data } = await readBody(event)
 4 | 
 5 |     // Extract the base64 data from the data URI
 6 |     const base64Data = data.split(',')[1]
 7 | 
 8 |     // Decode base64 to a Uint8Array
 9 |     const uint8Array = Uint8Array.from(atob(base64Data), (c) => c.charCodeAt(0))
10 | 
11 |     // Create a Blob from the Uint8Array
12 |     const blob = new Blob([uint8Array], { type: 'application/octet-stream' })
13 | 
14 |     // Create form data
15 |     const form = new FormData()
16 |     form.append('content', blob, file_name)
17 | 
18 |     // Upload the file data to Replicate's file storage
19 |     const result = await fetch('https://api.replicate.com/v1/files', {
20 |       method: 'POST',
21 |       headers: {
22 |         Authorization: `Bearer ${api_token}`
23 |       },
24 |       body: form
25 |     })
26 | 
27 |     const json = await result.json()
28 | 
29 |     return { data: json.urls.get }
30 |   } catch (e) {
31 |     console.log('--- error (api/prediction): ', e)
32 | 
33 |     return {
34 |       error: e.message
35 |     }
36 |   }
37 | })
38 | 


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


--------------------------------------------------------------------------------
/server/api/prediction.post.js:
--------------------------------------------------------------------------------
 1 | export default defineEventHandler(async (event) => {
 2 |   try {
 3 |     const { 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 ${api_token}`
 9 |       },
10 |       body: JSON.stringify({
11 |         version,
12 |         input
13 |       })
14 |     })
15 | 
16 |     const json = await result.json()
17 | 
18 |     return { data: json }
19 |   } catch (e) {
20 |     console.log('--- error (api/prediction): ', e)
21 | 
22 |     return {
23 |       error: e.message
24 |     }
25 |   }
26 | })
27 | 


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


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


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