jbilcke-hf HF staff commited on
Commit
7967a54
β€’
1 Parent(s): 1e641f1

fixed the redraw button

Browse files
src/app/engine/render.ts CHANGED
@@ -63,7 +63,6 @@ export async function newRender({
63
  }
64
  const replicate = new Replicate({ auth: replicateToken })
65
 
66
- // console.log("Calling replicate..")
67
  const seed = generateSeed()
68
  const prediction = await replicate.predictions.create({
69
  version: replicateModelVersion,
@@ -80,9 +79,7 @@ export async function newRender({
80
  seed
81
  }
82
  })
83
-
84
- // console.log("prediction:", prediction)
85
-
86
  // no need to reply straight away as images take time to generate, this isn't instantaneous
87
  // also our friends at Replicate won't like it if we spam them with requests
88
  await sleep(4000)
@@ -114,14 +111,6 @@ export async function newRender({
114
  ? huggingFaceInferenceEndpointUrl
115
  : `https://api-inference.huggingface.co/models/${huggingFaceInferenceApiBaseModel}`
116
 
117
- /*
118
- console.log(`calling ${url} with params: `, {
119
- num_inference_steps: 25,
120
- guidance_scale: 8,
121
- width,
122
- height,
123
- })
124
- */
125
 
126
  const positivePrompt = [
127
  "beautiful",
@@ -230,7 +219,7 @@ export async function newRender({
230
  segments: []
231
  } as RenderedScene
232
  } else {
233
- const res = await fetch(`${videochainApiUrl}/render`, {
234
  method: "POST",
235
  headers: {
236
  Accept: "application/json",
@@ -268,6 +257,7 @@ export async function newRender({
268
  }
269
 
270
  const response = (await res.json()) as RenderedScene
 
271
  return response
272
  }
273
  } catch (err) {
@@ -330,7 +320,6 @@ export async function getRender(renderId: string) {
330
  segments: []
331
  } as RenderedScene
332
  } else {
333
- // console.log(`calling GET ${apiUrl}/render with renderId: ${renderId}`)
334
  const res = await fetch(`${videochainApiUrl}/render/${renderId}`, {
335
  method: "GET",
336
  headers: {
@@ -374,7 +363,6 @@ export async function upscaleImage(image: string): Promise<{
374
  }
375
 
376
  try {
377
- // console.log(`calling GET ${apiUrl}/render with renderId: ${renderId}`)
378
  const res = await fetch(`${videochainApiUrl}/upscale`, {
379
  method: "POST",
380
  headers: {
 
63
  }
64
  const replicate = new Replicate({ auth: replicateToken })
65
 
 
66
  const seed = generateSeed()
67
  const prediction = await replicate.predictions.create({
68
  version: replicateModelVersion,
 
79
  seed
80
  }
81
  })
82
+
 
 
83
  // no need to reply straight away as images take time to generate, this isn't instantaneous
84
  // also our friends at Replicate won't like it if we spam them with requests
85
  await sleep(4000)
 
111
  ? huggingFaceInferenceEndpointUrl
112
  : `https://api-inference.huggingface.co/models/${huggingFaceInferenceApiBaseModel}`
113
 
 
 
 
 
 
 
 
 
114
 
115
  const positivePrompt = [
116
  "beautiful",
 
219
  segments: []
220
  } as RenderedScene
221
  } else {
222
+ const res = await fetch(`${videochainApiUrl}${videochainApiUrl.endsWith("/") ? "" : "/"}render`, {
223
  method: "POST",
224
  headers: {
225
  Accept: "application/json",
 
257
  }
258
 
259
  const response = (await res.json()) as RenderedScene
260
+
261
  return response
262
  }
263
  } catch (err) {
 
320
  segments: []
321
  } as RenderedScene
322
  } else {
 
323
  const res = await fetch(`${videochainApiUrl}/render/${renderId}`, {
324
  method: "GET",
325
  headers: {
 
363
  }
364
 
365
  try {
 
366
  const res = await fetch(`${videochainApiUrl}/upscale`, {
367
  method: "POST",
368
  headers: {
src/app/interface/panel/index.tsx CHANGED
@@ -49,6 +49,8 @@ export function Panel({
49
 
50
  const rendered = renderedScenes[panel] || getInitialRenderedScene()
51
 
 
 
52
  // keep a ref in sync
53
  const renderedRef = useRef<RenderedScene>()
54
  const renderedKey = JSON.stringify(rendered)
@@ -62,7 +64,6 @@ export function Panel({
62
 
63
 
64
  const startImageGeneration = ({ prompt, width, height }: { prompt: string, width: number, height: number}) => {
65
- // console.log("Panel prompt: "+ prompt)
66
  if (!prompt?.length) { return }
67
 
68
  // important: update the status, and clear the scene
@@ -74,8 +75,6 @@ export function Panel({
74
  setTimeout(() => {
75
  startTransition(async () => {
76
 
77
- // console.log(`Loading panel ${panel}..`)
78
-
79
  let newRendered: RenderedScene
80
  try {
81
  newRendered = await newRender({ prompt, width, height })
@@ -85,7 +84,6 @@ export function Panel({
85
  }
86
 
87
  if (newRendered) {
88
- // console.log("newRendered:", newRendered)
89
  setRendered(panelId, newRendered)
90
 
91
  if (newRendered.status === "completed") {
@@ -108,15 +106,9 @@ export function Panel({
108
  return
109
  }
110
  })
111
- }, enableRateLimiter ? 2000 * panel : 0)
112
  }
113
 
114
- // since this run in its own loop, we need to use references everywhere
115
- // but perhaps this could be refactored
116
- useEffect(() => {
117
- startImageGeneration({ prompt, width, height })
118
- }, [prompt, width, height])
119
-
120
 
121
  const checkStatus = () => {
122
  startTransition(async () => {
@@ -126,25 +118,20 @@ export function Panel({
126
  timeoutRef.current = setTimeout(checkStatus, delay)
127
  return
128
  }
 
129
  try {
130
  setGeneratingImages(panelId, true)
131
- // console.log(`Checking job status API for job ${renderedRef.current?.renderId}`)
132
  const newRendered = await getRender(renderedRef.current.renderId)
133
- // console.log("got a response!", newRendered)
134
 
135
  if (JSON.stringify(renderedRef.current) !== JSON.stringify(newRendered)) {
136
- // console.log("updated panel:", newRendered)
137
  setRendered(panelId, renderedRef.current = newRendered)
138
  setGeneratingImages(panelId, true)
139
  }
140
- // console.log("status:", newRendered.status)
141
 
142
  if (newRendered.status === "pending") {
143
- // console.log("job not finished")
144
  timeoutRef.current = setTimeout(checkStatus, delay)
145
  } else if (newRendered.status === "error" ||
146
  (newRendered.status === "completed" && !newRendered.assetUrl?.length)) {
147
- // console.log(`panel got an error and/or an empty asset url :/ "${newRendered.error}", but let's try to recover..`)
148
  try {
149
  const newAttempt = await newRender({ prompt, width, height })
150
  setRendered(panelId, newAttempt)
@@ -163,9 +150,12 @@ export function Panel({
163
  }
164
  })
165
  }
166
-
167
  useEffect(() => {
168
- // console.log("starting timeout")
 
 
 
169
  clearTimeout(timeoutRef.current)
170
 
171
  // normally it should reply in < 1sec, but we could also use an interval
@@ -174,7 +164,7 @@ export function Panel({
174
  return () => {
175
  clearTimeout(timeoutRef.current)
176
  }
177
- }, [prompt, width, height])
178
 
179
  /*
180
  doing the captionning from the browser is expensive
@@ -219,7 +209,7 @@ export function Panel({
219
 
220
  const handleReload = () => {
221
  console.log(`Asked to reload panel ${panelId}`)
222
- startImageGeneration({ prompt, width, height })
223
  }
224
 
225
  if (prompt && !rendered.assetUrl) {
 
49
 
50
  const rendered = renderedScenes[panel] || getInitialRenderedScene()
51
 
52
+ const [revision, setRevision] = useState(0)
53
+
54
  // keep a ref in sync
55
  const renderedRef = useRef<RenderedScene>()
56
  const renderedKey = JSON.stringify(rendered)
 
64
 
65
 
66
  const startImageGeneration = ({ prompt, width, height }: { prompt: string, width: number, height: number}) => {
 
67
  if (!prompt?.length) { return }
68
 
69
  // important: update the status, and clear the scene
 
75
  setTimeout(() => {
76
  startTransition(async () => {
77
 
 
 
78
  let newRendered: RenderedScene
79
  try {
80
  newRendered = await newRender({ prompt, width, height })
 
84
  }
85
 
86
  if (newRendered) {
 
87
  setRendered(panelId, newRendered)
88
 
89
  if (newRendered.status === "completed") {
 
106
  return
107
  }
108
  })
109
+ }, enableRateLimiter ? 1000 * panel : 0)
110
  }
111
 
 
 
 
 
 
 
112
 
113
  const checkStatus = () => {
114
  startTransition(async () => {
 
118
  timeoutRef.current = setTimeout(checkStatus, delay)
119
  return
120
  }
121
+
122
  try {
123
  setGeneratingImages(panelId, true)
 
124
  const newRendered = await getRender(renderedRef.current.renderId)
 
125
 
126
  if (JSON.stringify(renderedRef.current) !== JSON.stringify(newRendered)) {
 
127
  setRendered(panelId, renderedRef.current = newRendered)
128
  setGeneratingImages(panelId, true)
129
  }
 
130
 
131
  if (newRendered.status === "pending") {
 
132
  timeoutRef.current = setTimeout(checkStatus, delay)
133
  } else if (newRendered.status === "error" ||
134
  (newRendered.status === "completed" && !newRendered.assetUrl?.length)) {
 
135
  try {
136
  const newAttempt = await newRender({ prompt, width, height })
137
  setRendered(panelId, newAttempt)
 
150
  }
151
  })
152
  }
153
+
154
  useEffect(() => {
155
+ if (!prompt.length) { return }
156
+
157
+ startImageGeneration({ prompt, width, height })
158
+
159
  clearTimeout(timeoutRef.current)
160
 
161
  // normally it should reply in < 1sec, but we could also use an interval
 
164
  return () => {
165
  clearTimeout(timeoutRef.current)
166
  }
167
+ }, [prompt, width, height, revision])
168
 
169
  /*
170
  doing the captionning from the browser is expensive
 
209
 
210
  const handleReload = () => {
211
  console.log(`Asked to reload panel ${panelId}`)
212
+ setRevision(revision + 1)
213
  }
214
 
215
  if (prompt && !rendered.assetUrl) {