<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AI Story Writing Tool</title>
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<style>
.regenerateIcon {
cursor: pointer;
display: inline-block;
margin-left: 10px;
font-size: 20px;
/* Adjust size as needed */
}
body {
font-family: 'Arial', sans-serif;
background-color: #f2f2f2;
margin: 0;
padding: 20px;
box-sizing: border-box;
}
#chatContainer {
background-color: #fff;
border-radius: 8px;
overflow: hidden;
width: 100%;
max-width: 800px;
margin: auto;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
#chatHeader {
width: 100%;
padding: 10px;
margin-bottom: 20px;
border-radius: 8px;
border: none;
color: white;
text-align: center;
font-size: 16px;
cursor: pointer;
background-image: linear-gradient(to right, #6a11cb 0%, #2575fc 100%);
transition: all 0.3s ease;
text-decoration: none;
/* Remove underline from download link */
display: inline-block;
/* Needed for anchor to behave like a button */
text-align: center;
/* Ensure text is centered in download link */
}
#chatBody {
padding: 20px;
max-height: 300px;
overflow-y: auto;
}
.messageContainer {
display: flex;
justify-content: flex-end;
margin-bottom: 10px;
}
.message {
background-color: #e2f0cb;
padding: 10px;
border-radius: 5px;
max-width: 70%;
word-wrap: break-word;
}
#prompt {
width: calc(100% - 40px - 10px);
margin: 10px 20px;
padding: 12px;
border-radius: 5px;
border: 1px solid #ccc;
}
button {
width: 100%;
padding: 10px;
margin-bottom: 20px;
border-radius: 8px;
border: none;
color: white;
text-align: center;
font-size: 15px;
cursor: pointer;
background-image: linear-gradient(to right, #6a11cb 0%, #2575fc 100%);
transition: all 0.3s ease;
text-decoration: none;
/* Remove underline from download link */
display: inline-block;
/* Needed for anchor to behave like a button */
text-align: center;
/* Ensure text is centered in download link */
}
button:hover {
transform: translateY(-2px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}
#copyButton {
background-color: #007bff;
}
#progressOverlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 1000;
}
#progressOverlay > div {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
font-size: 20px;
}
/* Add styles for formatted text */
.formatted-text {
white-space: pre-wrap;
/* Keeps white space and line breaks */
}
.formatted-text a {
color: #007bff;
text-decoration: none;
}
.formatted-text a:hover {
text-decoration: underline;
}
/* Dropdown Styles */
#storyCategory,
#languageSelection {
width: calc(50% - 25px);
/* Adjust width to fit side by side with some space */
padding: 10px;
margin: 10px;
border-radius: 5px;
border: 1px solid #ccc;
background-color: #fff;
font-family: 'Arial', sans-serif;
font-size: 16px;
box-sizing: border-box;
/* Ensure padding and border are included in width */
display: inline-block;
/* Display side by side */
cursor: pointer;
}
#storyCategory:disabled,
#languageSelection:disabled {
background-color: #e9ecef;
cursor: not-allowed;
}
/* Adjust margin for the prompt to align with the new dropdowns */
#prompt {
margin: 0 10px 10px 10px;
}
/* Style adjustments for button to align with the new layout */
button {
width: calc(100% - 20px);
margin: 10px;
}
/* Ensure the container width accommodates new elements */
#chatContainer {
padding-bottom: 10px;
/* Add some padding at the bottom */
}
.message.code {
background-color: #f5f5f5;
/* Light grey background */
color: #333;
/* Darker text for contrast */
font-family: monospace;
/* Monospace font for code-like appearance */
white-space: pre-wrap;
/* Allows text to wrap and preserves formatting */
word-wrap: break-word;
/* Allows long lines to break and wrap to the next line */
padding: 10px;
/* Padding inside the preformatted text block */
border-radius: 5px;
/* Rounded corners like other messages */
}
</style>
</head>
<body>
<div id="chatContainer">
<div id="chatHeader">AI Story Writing Tool</div>
<select id="storyCategory" class="dropdown">
<option value="Moral">Moral</option>
<option value="Educational">Educational</option>
<option value="Historical">Historical</option>
<option value="Magical">Magical</option>
<option value="Adventure">Adventure</option>
<option value="Science Fiction">Science Fiction</option>
<option value="Fantasy">Fantasy</option>
<option value="Mystery">Mystery</option>
<option value="Romance">Romance</option>
<option value="Horror">Horror</option>
<option value="Thriller">Thriller</option>
<option value="Biographical">Biographical</option>
<option value="Inspirational">Inspirational</option>
<option value="Comedy">Comedy</option>
<option value="Drama">Drama</option>
<option value="Documentary">Documentary</option>
<option value="Action">Action</option>
<option value="Satire">Satire</option>
</select>
<select id="languageSelection" class="dropdown">
<option value="">Default (English)</option>
<option value="Assamese">Assamese</option>
<option value="Bengali">Bengali</option>
<option value="Gujarati">Gujarati</option>
<option value="Hindi">Hindi</option>
<option value="Kannada">Kannada</option>
<option value="Kashmiri">Kashmiri</option>
<option value="Konkani">Konkani</option>
<option value="Malayalam">Malayalam</option>
<option value="Marathi">Marathi</option>
<option value="Nepali">Nepali</option>
<option value="Odia">Odia</option>
<option value="Punjabi">Punjabi</option>
<option value="Sanskrit">Sanskrit</option>
<option value="Sindhi">Sindhi</option>
<option value="Tamil">Tamil</option>
<option value="Telugu">Telugu</option>
<option value="Urdu">Urdu</option>
<!-- Add more languages as needed -->
</select>
<textarea id="prompt" placeholder="Type a message..." rows="3"></textarea>
<button id="generateStory" onclick="generateStory()">Generate Story</button>
<div id="chatBody"></div>
</div>
<div id="progressOverlay">
<div>Thinking...</div>
</div>
<script>
function generateStory() {
var prompt = $("#prompt").val();
var category = $("#storyCategory").val();
var language = $("#languageSelection").val(); // Get the value of the selected option
var storyPrompt = `Write a ${category} story for "${prompt}" in ${language} language`;
$('#progressOverlay').show(); // Show progress overlay
// how to get API key
// https://allfreestore.com/wp-content/uploads/2024/03/Get%20OpenAI%20API%20Key.mp4
var apiKey = 'your_api_key'; // Replace with your actual OpenAI API key
var apiUrl = 'https://api.openai.com/v1/chat/completions';
var requestBody = {
model: 'gpt-3.5-turbo',
messages: [{
role: 'user',
content: storyPrompt
}],
temperature: 0.7
};
$.ajax({
type: 'POST',
url: apiUrl,
headers: {
'Content-Type': 'application/json',
'Authorization': 'Bearer ' + apiKey
},
data: JSON.stringify(requestBody),
success: function(response) {
$('#progressOverlay').hide(); // Hide progress overlay
addTypewriterEffect(response.choices[0].message.content, 'chatBody');
},
error: function(error) {
$('#progressOverlay').hide(); // Hide progress overlay on error
console.error('Error generating privacy policy:', error);
}
});
}
function formatResponseText(text) {
// Convert URLs into hyperlinks
text = text.replace(/(https?:\/\/[^\s]+)/g, '<a href="$1" target="_blank">$1</a>');
// Detect headings and make them bold
text = text.replace(/^##\s?(.+)/gm, '<strong>$1</strong>');
// Replace newline characters with <p> tags for paragraphs
// text = text.replace(/\n/g, '</p><p>');
// Wrap the text in <p> tags to ensure it starts and ends as a paragraph
return '<p>' + text + '</p>';
}
function addTypewriterEffect(text, elementId) {
var formattedText = formatResponseText(text);
var container = $('<div class="messageContainer"></div>').appendTo('#' + elementId);
var message = $('<div class="message formatted-text" style="background-color: #f5f5f5;"></div>').appendTo(container);
var i = 0;
var speed = 10; // Typing speed in milliseconds
function typeWriter() {
if (i < formattedText.length) {
var charToAdd = formattedText.charAt(i);
if (formattedText.substring(i).startsWith('<a href=') || formattedText.substring(i).startsWith('<br>') || formattedText.substring(i).startsWith('<strong>')) {
var tagEnd = formattedText.indexOf('>', i) + 1;
charToAdd = formattedText.substring(i, tagEnd);
i = tagEnd;
} else if (formattedText.charAt(i) === '<') {
var tagEnd = formattedText.indexOf('>', i) + 1;
charToAdd = formattedText.substring(i, tagEnd);
i = tagEnd - 1;
}
message.append(charToAdd);
i++;
setTimeout(typeWriter, speed);
} else {
var copyIcon = $('<div class="copyIcon">📋</div>').appendTo(container);
copyIcon.click(function() {
var textToCopy = message.text();
navigator.clipboard.writeText(textToCopy).then(function() {
alert('Text copied to clipboard!');
}, function(err) {
console.error('Could not copy text: ', err);
});
});
var regenerateIcon = $('<div class="regenerateIcon">🔁</div>').appendTo(container);
regenerateIcon.click(function() {
$('#chatBody').html(''); // Clear the previous messages
generateStory(); // Call generatePrivacyPolicy function to regenerate the policy
});
}
}
typeWriter();
}
function formatResponseText(text) {
text = text.replace(/(https?:\/\/[^\s]+)/g, '<a href="$1" target="_blank">$1</a>');
text = text.replace(/^##\s?(.+)/gm, '<strong>$1</strong>');
text = text.replace(/^(\s*(?:-|\*|\d+\.)\s+.+)$/gm, '$1<br>');
return text;
}
</script>
<style>
.regenerateIcon,
.copyIcon {
cursor: pointer;
display: inline-block;
margin-left: 10px;
font-size: 20px;
/* Adjust size as needed */
}
.userMessage .message {
background-color: #e2f0cb;
}
#progressOverlay {
display: none;
/* Initially hidden */
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 1000;
}
#progressOverlay > div {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
font-size: 20px;
}
</style>
<div id="progressOverlay">
<div>Thinking...</div>
</div>
</script>
</body>
</html>
No comments:
Post a Comment