Created
October 28, 2015 17:03
-
-
Save lillylangtree/b55828fa05ed3470d352 to your computer and use it in GitHub Desktop.
sample index.html file
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> | |
| <title>Spoon-Knife</title> | |
| <LINK href="styles.css" rel="stylesheet" type="text/css"> | |
| </head> | |
| <body> | |
| <img src="forkit.gif" id="octocat" alt="" /> | |
| <!-- Feel free to change this text here --> | |
| <p> | |
| Fork me? Fork you, @octocat! | |
| </p> | |
| <p> | |
| Sean made a change | |
| </p> | |
| </body> | |
| </html> |
Hi This is Mitesh Patil web server
It is belongs to Pen-Raigad
MH06BY5401
Hi! Thanks for the index.html! I really need it to test something out! 👍
<title>AI Story Writing Tool</title>
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<style>
.regenerateIcon, .copyIcon {
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);
padding-bottom: 10px; /* Add some padding at the bottom */
}
#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;
display: inline-block;
text-align: center;
}
#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: calc(100% - 20px);
padding: 10px;
margin: 10px;
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;
display: inline-block;
text-align: center;
}
button:hover {
transform: translateY(-2px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}
#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;
}
#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;
}
.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;
}
.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>
<script>
function generateStory() {
var prompt = $("#prompt").val();
var category = $("#storyCategory").val();
var language = $("#languageSelection").val();
var storyPrompt = `Write a ${category} story for "${prompt}" in ${language} language`;
$('#progressOverlay').show(); // Show progress overlay
AI Story Writing Tool
Moral
Default (English)
<textarea id="prompt" placeholder="Type a message..." rows="3"></textarea>
Generate Story
Thinking...
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 story:', error);
}
});
}
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;
}
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 generateStory function to regenerate the story
});
}
}
typeWriter();
}
</script>
index.html
i dunno
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Fork me? Fork you, @octocat!
Sean made a change