Ai Story Writing Tool

 <!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">&#x1F501;</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>

Post a Comment

0 Comments