$('body').css("margin", "20px");
$('body').css("padding", "20px");
document.write(`
<!DOCTYPE html>
<html>
<head>
<title>Summarization API Comparison</title>
<style>
/* CSS styles for buttons and image output */
.ab-normbutton {
padding: 10px;
margin: 5px;
cursor: pointer;
}
#imageOutput img {
max-width: 90%;
max-height: 90%;
display: block; /* Ensures no extra space below the image */
margin: auto; /* Centers the image within its container */
}
</style>
</head>
<body>
<h1>Interactive Story and Image Generator</h1>
<!-- Section for API Key Input -->
<div id="enterkey" style="margin:20px;">
Enter API key:
<input style='width:25vw;' maxlength='2000' id="apikey" value=''>
<button id="setKeyButton" class="ab-normbutton">Set API Key</button>
</div>
<!-- Section for entering details for story generation -->
<div style="width:60vw; background-color:white; border: 1px solid black; margin:20px; padding: 20px;">
Genre: <input style="width:50vw;" id="genre" placeholder="Adventure, Mystery, Fantasy..."><br>
Place: <input style="width:50vw;" id="place" placeholder="A forest, a city, an alien planet..."><br>
Person: <input style="width:50vw;" id="person" placeholder="A brave knight, a curious child..."><br>
Action: <input style="width:50vw;" id="action" placeholder="Exploring a cave, solving a mystery..."><br>
Word Count: <input type="number" id="wordCount" min="1" max="500" placeholder="Up to 500 words"><br>
<button id="generateButton" class="ab-normbutton">Generate Story</button>
</div>
<!-- Section to display the generated story -->
<div id="storyOutput" style="width:60vw; background-color:#ffffcc; border: 1px solid black; margin:20px; padding: 20px;">
<h3>Generated Story</h3>
<div id="storyText">Your story will appear here...</div>
</div>
<!-- Section to display the generated image -->
<div id="imageOutput" style="width:60vw; background-color:#fffccc; border: 1px solid black; margin:20px; padding: 20px;">
<h3>Generated Image</h3>
<div id="imageOutput">The generated image will be displayed here...</div>
</div>
</body>
</html>
`);