ugh its broke
Browse files- prototype_index.html +103 -11
prototype_index.html
CHANGED
@@ -267,7 +267,7 @@
|
|
267 |
);
|
268 |
|
269 |
const joyCaption = await Client.connect(
|
270 |
-
"fancyfeast/joy-caption-
|
271 |
opts
|
272 |
);
|
273 |
|
@@ -372,15 +372,91 @@
|
|
372 |
captionResultDiv.innerHTML = "Generating caption…";
|
373 |
|
374 |
try {
|
375 |
-
|
376 |
-
|
377 |
-
|
378 |
-
|
379 |
-
|
380 |
-
|
381 |
-
|
382 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
383 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
384 |
const [prompt, caption] = output.data;
|
385 |
captionResultDiv.innerHTML = `
|
386 |
<div style="background:#f8f9fa; padding:1rem; border-radius:6px; margin-top:1rem;">
|
@@ -392,8 +468,24 @@
|
|
392 |
</div>
|
393 |
`;
|
394 |
} catch (err) {
|
395 |
-
console.error(
|
396 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
397 |
} finally {
|
398 |
btn.disabled = false;
|
399 |
btn.textContent = "Generate Caption";
|
|
|
267 |
);
|
268 |
|
269 |
const joyCaption = await Client.connect(
|
270 |
+
"fancyfeast/joy-caption-beta-one",
|
271 |
opts
|
272 |
);
|
273 |
|
|
|
372 |
captionResultDiv.innerHTML = "Generating caption…";
|
373 |
|
374 |
try {
|
375 |
+
console.log("=== DETAILED DEBUG INFO ===");
|
376 |
+
console.log("imageToCaption:", {
|
377 |
+
name: imageToCaption.name,
|
378 |
+
size: imageToCaption.size,
|
379 |
+
type: imageToCaption.type,
|
380 |
+
constructor: imageToCaption.constructor.name,
|
381 |
+
isFile: imageToCaption instanceof File
|
382 |
+
});
|
383 |
+
console.log("captionType:", captionType);
|
384 |
+
console.log("captionLength:", captionLength);
|
385 |
+
|
386 |
+
// Check Space status first
|
387 |
+
console.log("Checking Space status...");
|
388 |
+
try {
|
389 |
+
const apiInfo = await joyCaption.view_api();
|
390 |
+
console.log("Space API info:", apiInfo);
|
391 |
+
} catch (apiErr) {
|
392 |
+
console.warn("Could not get API info:", apiErr);
|
393 |
+
}
|
394 |
+
|
395 |
+
console.log("Calling joyCaption.predict...");
|
396 |
|
397 |
+
// Try different approaches
|
398 |
+
let output;
|
399 |
+
let attempt = 1;
|
400 |
+
|
401 |
+
// Attempt 1: Direct File object (original approach)
|
402 |
+
try {
|
403 |
+
console.log(`Attempt ${attempt}: Direct File object`);
|
404 |
+
output = await joyCaption.predict("/stream_chat", [
|
405 |
+
imageToCaption,
|
406 |
+
captionType,
|
407 |
+
captionLength,
|
408 |
+
[], // extra_options
|
409 |
+
"", // name_input
|
410 |
+
"" // custom_prompt
|
411 |
+
]);
|
412 |
+
console.log("Success with direct File!");
|
413 |
+
} catch (err1) {
|
414 |
+
console.warn(`Attempt ${attempt} failed:`, err1);
|
415 |
+
attempt++;
|
416 |
+
|
417 |
+
// Attempt 2: Convert to blob URL
|
418 |
+
try {
|
419 |
+
console.log(`Attempt ${attempt}: Blob URL`);
|
420 |
+
const blobUrl = URL.createObjectURL(imageToCaption);
|
421 |
+
output = await joyCaption.predict("/stream_chat", [
|
422 |
+
blobUrl,
|
423 |
+
captionType,
|
424 |
+
captionLength,
|
425 |
+
[], // extra_options
|
426 |
+
"", // name_input
|
427 |
+
"" // custom_prompt
|
428 |
+
]);
|
429 |
+
console.log("Success with blob URL!");
|
430 |
+
URL.revokeObjectURL(blobUrl);
|
431 |
+
} catch (err2) {
|
432 |
+
console.warn(`Attempt ${attempt} failed:`, err2);
|
433 |
+
attempt++;
|
434 |
+
|
435 |
+
// Attempt 3: Convert to data URL
|
436 |
+
try {
|
437 |
+
console.log(`Attempt ${attempt}: Data URL`);
|
438 |
+
const dataUrl = await new Promise((resolve) => {
|
439 |
+
const reader = new FileReader();
|
440 |
+
reader.onload = () => resolve(reader.result);
|
441 |
+
reader.readAsDataURL(imageToCaption);
|
442 |
+
});
|
443 |
+
output = await joyCaption.predict("/stream_chat", [
|
444 |
+
dataUrl,
|
445 |
+
captionType,
|
446 |
+
captionLength,
|
447 |
+
[], // extra_options
|
448 |
+
"", // name_input
|
449 |
+
"" // custom_prompt
|
450 |
+
]);
|
451 |
+
console.log("Success with data URL!");
|
452 |
+
} catch (err3) {
|
453 |
+
console.error(`All ${attempt} attempts failed. Last error:`, err3);
|
454 |
+
throw err3;
|
455 |
+
}
|
456 |
+
}
|
457 |
+
}
|
458 |
+
|
459 |
+
console.log("Success! Output:", output);
|
460 |
const [prompt, caption] = output.data;
|
461 |
captionResultDiv.innerHTML = `
|
462 |
<div style="background:#f8f9fa; padding:1rem; border-radius:6px; margin-top:1rem;">
|
|
|
468 |
</div>
|
469 |
`;
|
470 |
} catch (err) {
|
471 |
+
console.error("=== DETAILED ERROR INFO ===");
|
472 |
+
console.error("Error type:", typeof err);
|
473 |
+
console.error("Error constructor:", err.constructor?.name);
|
474 |
+
console.error("Error message:", err.message);
|
475 |
+
console.error("Error stack:", err.stack);
|
476 |
+
console.error("Full error object:", err);
|
477 |
+
console.error("Error keys:", Object.keys(err));
|
478 |
+
console.error("Error JSON:", JSON.stringify(err, null, 2));
|
479 |
+
|
480 |
+
captionResultDiv.innerHTML = `
|
481 |
+
<div style="color:red; background:#fee; padding:1rem; border-radius:6px; margin-top:1rem;">
|
482 |
+
<h4>Caption Generation Failed</h4>
|
483 |
+
<p><strong>Error Type:</strong> ${err.constructor?.name || typeof err}</p>
|
484 |
+
<p><strong>Error Message:</strong> ${err.message || err.toString()}</p>
|
485 |
+
<p><strong>Full Error:</strong></p>
|
486 |
+
<pre style="font-size:12px; overflow:auto;">${JSON.stringify(err, null, 2)}</pre>
|
487 |
+
</div>
|
488 |
+
`;
|
489 |
} finally {
|
490 |
btn.disabled = false;
|
491 |
btn.textContent = "Generate Caption";
|