Skip to content

Commit 89159a6

Browse files
AavirashAavirash
committed
fix 26
1 parent 432b179 commit 89159a6

File tree

2 files changed

+432
-71
lines changed

2 files changed

+432
-71
lines changed

‎js/mood-palette.js‎

Lines changed: 84 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -255,7 +255,7 @@ async function uploadToCatbox(imageData) {
255255
formData.append('reqtype', 'fileupload');
256256
formData.append('fileToUpload', blob, 'image.jpg');
257257

258-
// Try to upload to catbox with timeout
258+
// Try to upload to catbox with timeout and error handling
259259
console.log('Sending request to catbox.moe');
260260
const controller = new AbortController();
261261
const timeoutId = setTimeout(() => controller.abort(), 15000); // 15 second timeout
@@ -276,19 +276,22 @@ async function uploadToCatbox(imageData) {
276276
console.log('Image uploaded successfully to:', url);
277277

278278
// Validate that we got a URL
279-
if (url && url.length > 0 && url.startsWith('http')) {
279+
if (url && url.length > 0 && (url.startsWith('http://') || url.startsWith('https://'))) {
280280
showStatus('IMAGE UPLOADED SUCCESSFULLY', 'success');
281281
return url;
282282
} else {
283283
throw new Error('Invalid URL received from catbox: ' + responseText);
284284
}
285285
} else {
286-
throw new Error('Upload failed with status: ' + response.status + ' ' + response.statusText);
286+
const errorText = await response.text();
287+
throw new Error('Upload failed with status: ' + response.status + ' ' + response.statusText + ' - ' + errorText);
287288
}
288289
} catch (error) {
289290
console.error('Catbox upload error:', error);
290291
if (error.name === 'AbortError') {
291292
showStatus('UPLOAD TIMED OUT - CHECK NETWORK', 'error');
293+
} else if (error.message.includes('fetch')) {
294+
showStatus('NETWORK ERROR - CATBOX UNAVAILABLE', 'error');
292295
} else {
293296
showStatus('UPLOAD FAILED: ' + error.message, 'error');
294297
}
@@ -333,15 +336,14 @@ function analyzeColorsFromImage() {
333336
return;
334337
}
335338

336-
showStatus('PREPARING IMAGE FOR ANALYSIS...', 'info');
339+
showStatus('ANALYZING COLORS...', 'info');
337340

338341
// In a real R1 implementation, we would send this to the LLM
339342
if (typeof PluginMessageHandler !== 'undefined') {
340-
// Immediately use catbox to upload the image and get a URL
341-
fallbackToCatboxAnalysis();
343+
// Send image data directly to LLM for analysis
344+
sendImageToLLM();
342345
} else {
343346
// Simulate analysis for browser testing with more realistic colors
344-
showStatus('ANALYZING COLORS...', 'info');
345347
setTimeout(() => {
346348
// Generate colors based on actual image analysis simulation
347349
currentPalette = generateRealisticPalette();
@@ -527,6 +529,12 @@ window.onPluginMessage = function(data) {
527529
setTimeout(() => {
528530
resetApp();
529531
}, 2000);
532+
}
533+
// Handle case where LLM requests image URL (fallback)
534+
else if (data.message.includes('image') && data.message.includes('url')) {
535+
showStatus('LLM REQUESTS IMAGE URL - UPLOADING...', 'info');
536+
// Use catbox as fallback only when LLM explicitly requests it
537+
fallbackToCatboxAnalysis();
530538
} else if (data.message.includes('timeout') || data.message.includes('failed') || data.message.includes('error')) {
531539
showStatus('LLM ERROR: ' + data.message, 'error');
532540
} else {
@@ -550,70 +558,6 @@ function isValidEmail(email) {
550558
return re.test(email);
551559
}
552560

553-
// Fallback function to use catbox for image hosting and analysis
554-
async function fallbackToCatboxAnalysis() {
555-
showStatus('UPLOADING IMAGE TO CATBOX...', 'info');
556-
557-
try {
558-
// Check if we have image data
559-
if (!capturedImageData) {
560-
throw new Error('No captured image data available');
561-
}
562-
563-
console.log('Captured image data length:', capturedImageData.length);
564-
565-
// Validate image data
566-
if (capturedImageData.length < 100) {
567-
throw new Error('Captured image data is too small');
568-
}
569-
570-
// Upload image to catbox
571-
const imageUrl = await uploadToCatbox(capturedImageData);
572-
573-
if (imageUrl && imageUrl.length > 0) {
574-
showStatus('IMAGE UPLOADED! REQUESTING ANALYSIS...', 'info');
575-
console.log('Image uploaded to:', imageUrl);
576-
577-
// Validate URL before sending to LLM
578-
if (!imageUrl.startsWith('http')) {
579-
throw new Error('Invalid image URL received');
580-
}
581-
582-
// Send image URL to LLM for analysis
583-
const payload = {
584-
message: `Please analyze the colors in this image and provide exactly 5 dominant colors in hex format. Response format: {"colors": ["#hex1", "#hex2", "#hex3", "#hex4", "#hex5"]}. Image URL: ${imageUrl}`,
585-
useLLM: true,
586-
wantsR1Response: false // Set to false to get JSON response
587-
};
588-
589-
console.log('Sending to LLM:', payload.message);
590-
showStatus('REQUESTING COLOR ANALYSIS...', 'info');
591-
592-
// Add a timeout for LLM response
593-
const responseTimeout = setTimeout(() => {
594-
showStatus('LLM RESPONSE TIMEOUT - TRYING AGAIN', 'error');
595-
}, 30000); // 30 second timeout
596-
597-
// Listen for the response
598-
const originalOnPluginMessage = window.onPluginMessage;
599-
window.onPluginMessage = function(data) {
600-
clearTimeout(responseTimeout);
601-
// Call the original handler
602-
if (originalOnPluginMessage) {
603-
originalOnPluginMessage(data);
604-
}
605-
};
606-
607-
PluginMessageHandler.postMessage(JSON.stringify(payload));
608-
} else {
609-
throw new Error('Failed to get image URL from catbox');
610-
}
611-
} catch (error) {
612-
console.error('Catbox analysis error:', error);
613-
showStatus('ANALYSIS FAILED: ' + error.message, 'error');
614-
}
615-
}
616-
617561
// Function to generate a PNG image of the color palette
618562
function generatePaletteImage() {
619563
return new Promise((resolve, reject) => {
@@ -696,3 +640,72 @@ function createColorShapes(colors) {
696640

697641
return shapesContainer;
698642
}
643+
644+
// Function to send image directly to LLM for analysis
645+
function sendImageToLLM() {
646+
showStatus('SENDING IMAGE TO LLM...', 'info');
647+
648+
try {
649+
// Send image data directly to LLM for analysis
650+
const payload = {
651+
message: `Please analyze the colors in this image and provide exactly 5 dominant colors in hex format. Response format: {"colors": ["#hex1", "#hex2", "#hex3", "#hex4", "#hex5"]}.`,
652+
useLLM: true,
653+
wantsR1Response: false, // Set to false to get JSON response
654+
imageData: capturedImageData // Send image data directly
655+
};
656+
657+
console.log('Sending image to LLM');
658+
PluginMessageHandler.postMessage(JSON.stringify(payload));
659+
} catch (error) {
660+
console.error('Error sending image to LLM:', error);
661+
showStatus('LLM COMMUNICATION FAILED', 'error');
662+
}
663+
}
664+
665+
// Fallback function to use catbox for image hosting and analysis (only when LLM requests it)
666+
async function fallbackToCatboxAnalysis() {
667+
showStatus('UPLOADING IMAGE TO CATBOX...', 'info');
668+
669+
try {
670+
// Check if we have image data
671+
if (!capturedImageData) {
672+
throw new Error('No captured image data available');
673+
}
674+
675+
console.log('Captured image data length:', capturedImageData.length);
676+
677+
// Validate image data
678+
if (capturedImageData.length < 100) {
679+
throw new Error('Captured image data is too small');
680+
}
681+
682+
// Upload image to catbox
683+
const imageUrl = await uploadToCatbox(capturedImageData);
684+
685+
if (imageUrl && imageUrl.length > 0) {
686+
showStatus('IMAGE UPLOADED! REQUESTING ANALYSIS...', 'info');
687+
console.log('Image uploaded to:', imageUrl);
688+
689+
// Validate URL before sending to LLM
690+
if (!imageUrl.startsWith('http')) {
691+
throw new Error('Invalid image URL received');
692+
}
693+
694+
// Send image URL to LLM for analysis
695+
const payload = {
696+
message: `Please analyze the colors in this image and provide exactly 5 dominant colors in hex format. Response format: {"colors": ["#hex1", "#hex2", "#hex3", "#hex4", "#hex5"]}. Image URL: ${imageUrl}`,
697+
useLLM: true,
698+
wantsR1Response: false // Set to false to get JSON response
699+
};
700+
701+
console.log('Sending to LLM:', payload.message);
702+
showStatus('REQUESTING COLOR ANALYSIS...', 'info');
703+
PluginMessageHandler.postMessage(JSON.stringify(payload));
704+
} else {
705+
throw new Error('Failed to get image URL from catbox');
706+
}
707+
} catch (error) {
708+
console.error('Catbox analysis error:', error);
709+
showStatus('ANALYSIS FAILED: ' + error.message, 'error');
710+
}
711+
}

0 commit comments

Comments
 (0)