Skip to content

Commit ad97e21

Browse files
AavirashAavirash
committed
fix 21
1 parent 85e0667 commit ad97e21

File tree

1 file changed

+70
-68
lines changed

1 file changed

+70
-68
lines changed

‎js/mood-palette.js‎

Lines changed: 70 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -145,20 +145,22 @@ function startCamera() {
145145
}
146146

147147
// Function to test network connectivity
148-
function testNetworkConnectivity() {
148+
async function testNetworkConnectivity() {
149149
console.log('Testing network connectivity...');
150150
showStatus('TESTING NETWORK...', 'info');
151151

152-
// Try to fetch a simple URL to test connectivity
153-
fetch('https://httpbin.org/get', { mode: 'no-cors' })
154-
.then(() => {
155-
console.log('Network test successful');
156-
showStatus('NETWORK OK', 'info');
157-
})
158-
.catch(error => {
159-
console.error('Network test failed:', error);
160-
showStatus('NETWORK ISSUE: ' + error.message, 'error');
152+
try {
153+
// Try a simple fetch to test connectivity
154+
const response = await fetch('https://httpbin.org/get', {
155+
method: 'GET',
156+
mode: 'no-cors' // Use no-cors to avoid CORS issues
161157
});
158+
console.log('Network test response:', response.status);
159+
showStatus('NETWORK OK', 'info');
160+
} catch (error) {
161+
console.error('Network test failed:', error);
162+
showStatus('NETWORK ISSUE: ' + error.message, 'error');
163+
}
162164
}
163165

164166
function captureImageFromPTT() {
@@ -194,9 +196,13 @@ async function uploadToCatbox(imageData) {
194196
showStatus('UPLOADING IMAGE...', 'info');
195197
console.log('Starting image upload to catbox');
196198

199+
// Validate image data
200+
if (!imageData) {
201+
throw new Error('No image data provided');
202+
}
203+
197204
// Log the image data info for debugging
198-
console.log('Image data length:', imageData ? imageData.length : 'null');
199-
console.log('Image data preview:', imageData ? imageData.substring(0, 100) : 'null');
205+
console.log('Image data length:', imageData.length);
200206

201207
// Convert data URL to Blob
202208
const blob = dataURLToBlob(imageData);
@@ -207,46 +213,30 @@ async function uploadToCatbox(imageData) {
207213
formData.append('reqtype', 'fileupload');
208214
formData.append('fileToUpload', blob, 'image.jpg');
209215

210-
// Log FormData contents
211-
for (let pair of formData.entries()) {
212-
console.log('FormData entry:', pair[0], pair[1]);
213-
}
214-
215-
// Upload to catbox with timeout
216-
const controller = new AbortController();
217-
const timeoutId = setTimeout(() => controller.abort(), 10000); // 10 second timeout
218-
216+
// Try to upload to catbox with a simpler approach
219217
console.log('Sending request to catbox.moe');
220218
const response = await fetch('https://catbox.moe/user/api.php', {
221219
method: 'POST',
222220
body: formData,
223-
signal: controller.signal
221+
// Remove signal to avoid AbortError
224222
});
225223

226-
clearTimeout(timeoutId);
227-
228224
console.log('Catbox response status:', response.status);
229-
console.log('Catbox response headers:', [...response.headers.entries()]);
230225

231226
if (response.ok) {
232227
const url = await response.text();
233228
console.log('Image uploaded successfully to:', url);
234229
showStatus('IMAGE UPLOADED SUCCESSFULLY', 'info');
235-
return url;
230+
return url.trim(); // Trim any whitespace
236231
} else {
237232
const errorText = await response.text();
238233
console.error('Catbox upload failed with status:', response.status, 'Response:', errorText);
239-
throw new Error('Upload failed with status: ' + response.status + ', Response: ' + errorText);
234+
throw new Error('Upload failed with status: ' + response.status);
240235
}
241236
} catch (error) {
242237
console.error('Catbox upload error:', error);
243-
if (error.name === 'AbortError') {
244-
showStatus('UPLOAD FAILED: Timeout', 'error');
245-
throw new Error('Upload timed out');
246-
} else {
247-
showStatus('UPLOAD FAILED: ' + error.message, 'error');
248-
throw error;
249-
}
238+
showStatus('UPLOAD FAILED: ' + error.message, 'error');
239+
throw error;
250240
}
251241
}
252242

@@ -330,52 +320,62 @@ function displayPalette(colors) {
330320
const paletteDisplay = document.getElementById('paletteDisplay');
331321
paletteDisplay.innerHTML = '';
332322

333-
if (colors && colors.length > 0) {
323+
if (colors && Array.isArray(colors) && colors.length > 0) {
324+
console.log('Displaying palette with colors:', colors);
325+
334326
const paletteContainer = document.createElement('div');
335327
paletteContainer.className = 'palette-container';
328+
paletteContainer.style.display = 'flex';
329+
paletteContainer.style.gap = '10px';
330+
paletteContainer.style.justifyContent = 'center';
331+
paletteContainer.style.flexWrap = 'wrap';
332+
paletteContainer.style.alignItems = 'center';
333+
paletteContainer.style.marginTop = '10px';
336334

337335
colors.forEach((color, index) => {
338-
const swatchContainer = document.createElement('div');
339-
swatchContainer.className = 'swatch-container';
340-
swatchContainer.style.display = 'flex';
341-
swatchContainer.style.flexDirection = 'column';
342-
swatchContainer.style.alignItems = 'center';
343-
swatchContainer.style.margin = '5px';
344-
345-
// Create a rectangle shape for the color
346-
const colorSwatch = document.createElement('div');
347-
colorSwatch.className = 'color-swatch';
348-
colorSwatch.style.backgroundColor = color;
349-
colorSwatch.style.width = '40px';
350-
colorSwatch.style.height = '40px';
351-
colorSwatch.style.border = '2px solid #fff';
352-
colorSwatch.style.borderRadius = '4px';
353-
colorSwatch.title = color;
354-
355-
// Add a label with the hex code
356-
const colorLabel = document.createElement('div');
357-
colorLabel.className = 'color-label';
358-
colorLabel.textContent = color;
359-
colorLabel.style.color = '#fff';
360-
colorLabel.style.fontSize = '10px';
361-
colorLabel.style.marginTop = '4px';
362-
colorLabel.style.fontFamily = 'Courier New, monospace';
363-
colorLabel.style.textAlign = 'center';
364-
365-
swatchContainer.appendChild(colorSwatch);
366-
swatchContainer.appendChild(colorLabel);
367-
paletteContainer.appendChild(swatchContainer);
336+
// Validate that color is a valid hex code
337+
if (typeof color === 'string' && /^#[0-9A-F]{6}$/i.test(color)) {
338+
const swatchContainer = document.createElement('div');
339+
swatchContainer.style.display = 'flex';
340+
swatchContainer.style.flexDirection = 'column';
341+
swatchContainer.style.alignItems = 'center';
342+
swatchContainer.style.margin = '5px';
343+
344+
// Create a rectangle shape for the color
345+
const colorSwatch = document.createElement('div');
346+
colorSwatch.style.backgroundColor = color;
347+
colorSwatch.style.width = '40px';
348+
colorSwatch.style.height = '40px';
349+
colorSwatch.style.border = '2px solid #fff';
350+
colorSwatch.style.borderRadius = '4px';
351+
colorSwatch.style.boxSizing = 'border-box';
352+
colorSwatch.title = color;
353+
354+
// Add a label with the hex code
355+
const colorLabel = document.createElement('div');
356+
colorLabel.textContent = color;
357+
colorLabel.style.color = '#fff';
358+
colorLabel.style.fontSize = '10px';
359+
colorLabel.style.marginTop = '4px';
360+
colorLabel.style.fontFamily = 'Courier New, monospace';
361+
colorLabel.style.textAlign = 'center';
362+
363+
swatchContainer.appendChild(colorSwatch);
364+
swatchContainer.appendChild(colorLabel);
365+
paletteContainer.appendChild(swatchContainer);
366+
}
368367
});
369368

370369
paletteDisplay.appendChild(paletteContainer);
371370

372371
// Update currentPalette with the received colors
373372
currentPalette = colors;
374373

375-
console.log('Palette displayed with colors:', colors);
374+
console.log('Palette displayed successfully');
376375
} else {
377-
paletteDisplay.innerHTML = '<div class="placeholder-text">NO COLORS FOUND</div>';
376+
paletteDisplay.innerHTML = '<div class="placeholder-text">NO VALID COLORS FOUND</div>';
378377
currentPalette = [];
378+
console.log('No valid colors to display');
379379
}
380380
}
381381

@@ -449,6 +449,7 @@ window.onPluginMessage = function(data) {
449449

450450
// Handle color analysis response
451451
if (parsedData.colors && Array.isArray(parsedData.colors)) {
452+
console.log('Received colors from LLM:', parsedData.colors);
452453
currentPalette = parsedData.colors;
453454
displayPalette(currentPalette);
454455
showStatus('PALETTE READY! EMAIL TO SEND', 'success');
@@ -478,7 +479,8 @@ function handleLLMResponse(response) {
478479
(response.includes('upload') ||
479480
response.includes('image URL') ||
480481
response.includes('direct link') ||
481-
response.includes('access the image'))) {
482+
response.includes('access the image') ||
483+
response.includes('provide a link'))) {
482484
showStatus('LLM REQUESTED IMAGE URL, UPLOADING...', 'info');
483485
fallbackToCatboxAnalysis();
484486
} else {

0 commit comments

Comments
 (0)