prompt generator for AI

To use this code, save it in an HTML file and open it in a web browser. It will display a prompt generator with fields for entering the topic, context, and desired prompt length (in words). When you click the "Generate Prompt" button, it will use the mymemory library to generate a prompt based on the provided inputs and display the generated prompt below the button.

Please note that the mymemory library is an unofficial JavaScript library that provides access to the MyMemory Translation service. As it is a third-party library, ensure that you review and comply with its terms of use and any licensing requirements.

<!DOCTYPE html>

<html>

<head>

  <title>Prompt Generator</title>

  <style>

    body {

      font-family: Arial, sans-serif;

      background-color: #f3f3f3;

    }

    .container {

      max-width: 600px;

      margin: 0 auto;

      padding: 20px;

      background-color: #fff;

      box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);

      border-radius: 5px;

    }

    h1 {

      color: #333;

      text-align: center;

    }

    .prompt {

      margin-bottom: 10px;

    }

    .prompt label {

      display: block;

      font-weight: bold;

      margin-bottom: 5px;

    }

    .prompt input[type="text"] {

      width: 100%;

      padding: 5px;

      border: 1px solid #ccc;

      border-radius: 3px;

    }

    .button {

      display: block;

      width: 100%;

      padding: 10px;

      background-color: #4CAF50;

      color: #fff;

      text-align: center;

      text-decoration: none;

      border-radius: 3px;

      cursor: pointer;

    }

    .button:hover {

      background-color: #45a049;

    }

  </style>

</head>

<body>

  <div class="container">

    <h1>Prompt Generator</h1>

    <div class="prompt">

      <label for="topic">Topic:</label>

      <input type="text" id="topic" placeholder="Enter a topic">

    </div>

    <div class="prompt">

      <label for="context">Context:</label>

      <input type="text" id="context" placeholder="Enter a context">

    </div>

    <div class="prompt">

      <label for="length">Length:</label>

      <input type="text" id="length" placeholder="Enter desired prompt length (in words)">

    </div>

    <button class="button" onclick="generatePrompt()">Generate Prompt</button>

    <div id="output" style="margin-top: 20px;"></div>

  </div>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

  <script src="https://unpkg.com/mymemory-translation@2.2.0/mymemory.js"></script>

  <script>

    function generatePrompt() {

      var topic = document.getElementById('topic').value;

      var context = document.getElementById('context').value;

      var length = document.getElementById('length').value;

      var prompt = topic + " " + context;

      var params = {

        q: prompt,

        langpair: 'en|en',

        de: 'ChatGPT',

        mt: 'n',

        onlyprivate: 1,

        type: 'prompt',

        prompts: length

      };

      MYMEMORY.translate(params, function (response) {

        var output = document.getElementById('output');

        output.innerHTML = "<p>" + response.responseData.translatedText + "</p>";

      });

    }

  </script>

</body>

</html>