I’m experiencing HTTP 500 (Internal Server Error) when trying to pass data back to my frontend to display. The n8n interface loads and shows my workflow canvas which looks fine, but I’m getting server errors that prevent proper execution on the frontend console. The frontend is meant to send a prompt through webhook, n8n is receiving the prompt fine and processing it correctly and sending it back through respond to the webhook node but the http 500 error appears in my browser console and my frontend
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Prompt Submission App</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.container {
background: white;
border-radius: 20px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
padding: 40px;
width: 100%;
max-width: 500px;
text-align: center;
}
.page {
display: none;
}
.page.active {
display: block;
}
h1 {
color: #333;
margin-bottom: 30px;
font-size: 2.5em;
font-weight: 300;
}
.form-group {
margin-bottom: 30px;
text-align: left;
}
label {
display: block;
margin-bottom: 10px;
color: #555;
font-weight: 500;
}
input[type="text"] {
width: 100%;
padding: 15px;
border: 2px solid #e0e0e0;
border-radius: 10px;
font-size: 16px;
transition: border-color 0.3s ease;
}
input[type="text"]:focus {
outline: none;
border-color: #667eea;
}
.submit-btn {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 15px 30px;
border: none;
border-radius: 10px;
font-size: 18px;
cursor: pointer;
transition: transform 0.3s ease, box-shadow 0.3s ease;
width: 100%;
}
.submit-btn:hover {
transform: translateY(-2px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}
.submit-btn:disabled {
opacity: 0.6;
cursor: not-allowed;
transform: none;
}
.back-btn {
background: #6c757d;
color: white;
padding: 10px 20px;
border: none;
border-radius: 8px;
font-size: 14px;
cursor: pointer;
margin-bottom: 20px;
transition: background-color 0.3s ease;
}
.back-btn:hover {
background: #5a6268;
}
.card {
background: #f8f9fa;
border-radius: 15px;
padding: 30px;
margin-top: 20px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
.card img {
max-width: 100%;
height: auto;
border-radius: 10px;
margin-bottom: 20px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
.revised-prompt {
background: white;
padding: 20px;
border-radius: 10px;
border-left: 4px solid #667eea;
text-align: left;
margin-top: 20px;
}
.revised-prompt h3 {
color: #333;
margin-bottom: 10px;
font-size: 1.2em;
}
.revised-prompt p {
color: #666;
line-height: 1.6;
}
.loading {
display: none;
text-align: center;
padding: 20px;
}
.loading.active {
display: block;
}
.spinner {
border: 4px solid #f3f3f3;
border-top: 4px solid #667eea;
border-radius: 50%;
width: 40px;
height: 40px;
animation: spin 1s linear infinite;
margin: 0 auto 20px;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.error {
color: #dc3545;
background: #f8d7da;
padding: 15px;
border-radius: 10px;
margin-top: 20px;
border: 1px solid #f5c6cb;
}
</style>
</head>
<body>
<div class="container">
<!-- Page 1: Form Submission -->
<div id="page1" class="page active">
<h1>Submit Your Prompt</h1>
<form id="promptForm">
<div class="form-group">
<label for="prompt">Enter your prompt:</label>
<input type="text" id="prompt" name="prompt" required placeholder="Type your prompt here...">
</div>
<button type="submit" class="submit-btn" id="submitBtn">Submit</button>
</form>
<div id="loading" class="loading">
<div class="spinner"></div>
<p>Processing your request...</p>
</div>
<div id="error" class="error" style="display: none;"></div>
</div>
<!-- Page 2: Result Display -->
<div id="page2" class="page">
<button class="back-btn" onclick="goBack()">← Back to Form</button>
<h1>Generated Result</h1>
<div class="card" id="resultCard">
<img id="resultImage" src="" alt="Generated Image">
<div class="revised-prompt">
<h3>Revised Prompt</h3>
<p id="revisedPromptText"></p>
</div>
</div>
</div>
</div>
<script>
const form = document.getElementById('promptForm');
const submitBtn = document.getElementById('submitBtn');
const loading = document.getElementById('loading');
const errorDiv = document.getElementById('error');
const page1 = document.getElementById('page1');
const page2 = document.getElementById('page2');
const resultImage = document.getElementById('resultImage');
const revisedPromptText = document.getElementById('revisedPromptText');
// Replace with your actual webhook URL
const WEBHOOK_URL = 'my webhook link (hidden)';
form.addEventListener('submit', async (e) => {
e.preventDefault();
const promptValue = document.getElementById('prompt').value.trim();
if (!promptValue) {
showError('Please enter a prompt');
return;
}
try {
// Show loading state
submitBtn.disabled = true;
loading.classList.add('active');
errorDiv.style.display = 'none';
const response = await fetch(WEBHOOK_URL, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
prompt: promptValue
})
});
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const data = await response.json();
// Validate response structure
if (!data.image_url || !data.revised_prompt) {
throw new Error('Invalid response format from server');
}
// Display results
displayResults(data);
} catch (error) {
console.error('Error:', error);
showError('Failed to process your request. Please try again.');
} finally {
// Hide loading state
submitBtn.disabled = false;
loading.classList.remove('active');
}
});
function displayResults(data) {
resultImage.src = data.image_url;
revisedPromptText.textContent = data.revised_prompt;
// Switch to page 2
page1.classList.remove('active');
page2.classList.add('active');
}
function showError(message) {
errorDiv.textContent = message;
errorDiv.style.display = 'block';
}
function goBack() {
page2.classList.remove('active');
page1.classList.add('active');
// Reset form
document.getElementById('prompt').value = '';
errorDiv.style.display = 'none';
}
// Handle image loading errors
resultImage.addEventListener('error', () => {
resultImage.alt = 'Failed to load image';
resultImage.style.display = 'none';
});
</script>
</body>
</html>