simple-test.html•7.67 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dad Joke Image Test</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
background: #f0f0f0;
text-align: center;
}
.test-box {
background: white;
padding: 20px;
margin: 20px auto;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
max-width: 600px;
border: 2px solid #ddd;
}
img {
max-width: 100%;
height: auto;
border: 2px solid #007cba;
border-radius: 10px;
margin: 20px 0;
}
button {
background: #007cba;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
margin: 10px;
}
button:hover {
background: #005a8b;
}
#status {
margin: 20px 0;
padding: 10px;
border-radius: 5px;
}
.success { background: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
.error { background: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }
.info { background: #d1ecf1; color: #0c5460; border: 1px solid #bee5eb; }
</style>
</head>
<body>
<h1>🎭 Dad Joke Image Display Test</h1>
<div class="test-box">
<h3>Test 1: Simple SVG</h3>
<img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAwIiBoZWlnaHQ9IjIwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8cmVjdCB3aWR0aD0iMzAwIiBoZWlnaHQ9IjIwMCIgZmlsbD0iIzZmNzNhMSIvPgogIDx0ZXh0IHg9IjE1MCIgeT0iMTAwIiBmb250LXNpemU9IjI0IiBmaWxsPSJ3aGl0ZSIgdGV4dC1hbmNob3I9Im1pZGRsZSI+6J2j5Liq5aWz5LqU8J+YhDwvdGV4dD4KPC9zdmc+" alt="Simple SVG Test">
<p>Simple gray box with "你好" - if you see this color box, basic SVG is working</p>
</div>
<div class="test-box">
<h3>Test 2: Live Dad Joke API</h3>
<button onclick="getLiveJokeImage()">Get Live Dad Joke with Image</button>
<div id="status"></div>
<div id="result"></div>
</div>
<div class="test-box">
<h3>Test 3: Direct Image Test</h3>
<button onclick="testDirectImage()">Test Direct Image URL</button>
<div id="direct-result"></div>
</div>
<script>
async function getLiveJokeImage() {
const statusDiv = document.getElementById('status');
const resultDiv = document.getElementById('result');
statusDiv.innerHTML = '<div class="info">🚀 Generating dad joke...</div>';
resultDiv.innerHTML = '';
try {
const response = await fetch('/api/generate-joke', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ topic: 'test', rating: 'PG-13' }),
});
const data = await response.json();
if (data.success) {
statusDiv.innerHTML = '<div class="success">✅ Joke generated successfully!</div>';
resultDiv.innerHTML = `
<p><strong>Joke:</strong> "${data.joke}"</p>
<h4>Image Display Test:</h4>
<div style="margin: 20px 0;">
<h5>Method 1: <img> tag:</h5>
<img src="${data.imageUrl}" alt="Dad Joke Visualization" style="max-width: 400px; display: block; margin: 10px auto;">
<h5>Method 2: <object> tag:</h5>
<object data="${data.imageUrl}" type="image/svg+xml" style="margin: 10px auto; display: block; max-width: 400px; height: 300px;"></object>
<h5>Method 3: <embed> tag:</h5>
<embed src="${data.imageUrl}" type="image/svg+xml" style="margin: 10px auto; display: block; max-width: 400px; height: 300px;">
<h5>Direct link test:</h5>
<a href="${data.imageUrl}" target="_blank" style="background: #666; color: white; padding: 8px 15px; text-decoration: none; border-radius: 4px; display: inline-block;">Open Image in New Tab</a>
</div>
<p><strong>Page URL:</strong> <a href="${data.pageUrl}" target="_blank">${data.pageUrl}</a></p>
`;
} else {
statusDiv.innerHTML = '<div class="error">❌ API Error: ' + data.error + '</div>';
}
} catch (error) {
statusDiv.innerHTML = '<div class="error">❌ Request failed: ' + error.message + '</div>';
}
}
async function testDirectImage() {
const resultDiv = document.getElementById('direct-result');
resultDiv.innerHTML = '<div class="info">Testing direct image...</div>';
// Test with a simple API call to get just the URL
try {
const response = await fetch('/api/generate-joke', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ topic: 'direct', rating: 'PG' }),
});
const data = await response.json();
if (data.success) {
resultDiv.innerHTML = `
<div class="success">Direct image generation successful!</div>
<p><strong>Image URL length:</strong> ${data.imageUrl.length} characters</p>
<p><strong>Image URL starts with:</strong> ${data.imageUrl.substring(0, 50)}...</p>
<h4>Force Display Test:</h4>
<div style="background: #fff; padding: 20px; margin: 10px; border: 2px dashed #666;">
<img src="${data.imageUrl}"
alt="Force Display Test"
style="border: 2px solid red; display: block; margin: 10px auto; max-width: 300px;"
onload="console.log('Image loaded successfully')"
onerror="console.log('Image failed to load: '+this.src.substring(0,100))">
<p><em>If you see a red bordered image above, the SVG is working!</em></p>
</div>
`;
} else {
resultDiv.innerHTML = '<div class="error">❌ Failed to generate image</div>';
}
} catch (error) {
resultDiv.innerHTML = '<div class="error">❌ Request failed: ' + error.message + '</div>';
}
}
// Log browser capabilities
document.addEventListener('DOMContentLoaded', function() {
console.log('Browser SVG support:', !!document.createElementNS);
console.log('Current URL:', window.location.href);
console.log('User Agent:', navigator.userAgent);
});
</script>
</body>
</html>