<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Google tag (gtag.js) -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-LEGMCTW1RN"></script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());

      gtag('config', 'G-LEGMCTW1RN');
    </script>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Long PROMPTs Splitter</title>
    <link rel="stylesheet" href="/static/styles.css">
    <link rel="apple-touch-icon" sizes="180x180" href="/static/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="/static/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="/static/favicon-16x16.png">
    <link rel="manifest" href="/static/site.webmanifest">
    <link rel="mask-icon" href="/static/safari-pinned-tab.svg" color="#5bbad5">
    <meta name="msapplication-TileColor" content="#da532c">
    <meta name="theme-color" content="#ffffff">
    <meta og:title="Long PROMPTs Splitter">
    <meta og:description="Tool for safely process chunks of up to 15,000 characters per request">
    <meta og:image="https://opengraph.githubassets.com/{{ hash }}/jupediaz/chatgpt-prompt-splitter">
  </head>
  <body>
    <div class="container">
      <div class="header">
        <div class="header-logo">
          <a href="/"><img src="/static/chatgpt_prompt_splitter.png" alt="Logo" class="logo"/></a>
        </div>
        <div class="header-text">
          <h1>ChatGPT PROMPTs Splitter</h1>
          <h2>Open-source tool for safely process chunks of up to 15,000 characters per request</h2>
          <div class="how-this-works"><a href="https://medium.com/@josediazmoreno/break-the-limits-send-large-text-blocks-to-chatgpt-with-ease-6824b86d3270" target="_blank">How this works</a></div>
        </div>
      </div>
      <div class="visits">Visit count: {{ visit_count }}</div>
      <form action="/" method="post">
        <div class="form-group">
          <label for="prompt">Enter the long prompt to be splitted</label>
          <textarea class="form-control" id="prompt" name="prompt" rows="10">{{ prompt }}</textarea>
          <help>Enter the PROMPT that you want to use for the ChatGPT request.</help>
          <div class="char-count-container">
            <span id="prompt-char-count">{{ prompt|length }}</span> characters
          </div>
        </div>
        <label for="split_length">Max chars length for each splitted part</label>
        <select name="preset" id="preset" onchange="toggleCustomLength(this)" required>
            <option value="15000" {% if split_length == 15000 or split_length is none or split_length == '' %}selected{% endif %}>General max safe chunk for ChatGPT (15,000)</option>
            <option value="custom" {% if split_length != 8000 and split_length != 15000 and split_length != '' and split_length is not none %}selected{% endif %}>Custom</option>
        </select>
        <input type="number" name="split_length" class="custom-length" id="split_length" min="1" required value="{{ split_length if split_length is not none and split_length != '' else 15000 }}" {% if split_length == 8000 or split_length == 15000 or split_length is none or split_length == '' %}style="display: none;"{% endif %}>
        <help>Choose the max length for each split part.</help>
        <button type="submit" id="split-btn" class="{% if btn_disabled %}disabled{% endif %}"{% if btn_disabled %} disabled{% endif%}>Enter a prompt</button>
      </form>
      {% if file_data %}
      <div class="instructions">
        <h3>Instructions</h3>
        <pre id="instructions">The total length of the content that I want to send you is too large to send in only one piece.
        
For sending you that content, I will follow this rule:
        
[START PART 1/10]
this is the content of the part 1 out of 10 in total
[END PART 1/10]
        
Then you just answer: "Received part 1/10"
        
And when I tell you "ALL PARTS SENT", then you can continue processing the data and answering my requests.</pre>
        <button type="button" class="copy-btn" id="copy-instructions-btn" onclick="copyInstructions()">Copy Instructions (first message to send)</button>
        <help>This way we explain ChatGPT how to process the messages we are gonna send.</help>
      </div>
      <div class="buttons-container">
        {% for file in file_data %}
        {% set partNumber = file.name[6:9]|int %}
        {% set totalParts = file.name[13:16]|int %}
        <button class="copy-btn" data-content="{{ file.content }}" onclick="copyToClipboard(this)">Copy part {{ partNumber }}/{{ totalParts }} to clipboard</button>
        {% endfor %}
      </div>
      {% endif %}
      <footer>
        <p>
          <div class="left">Created with ❤️ by <a href="https://jjdiaz.dev" target="_blank">jjdiaz.dev</a></div>
          <div class="right"><a href="https://github.com/jupediaz/chatgpt-prompt-splitter" target="_blank">GitHub repository</a></div>
        </p>
      </footer>
      <div class="powered-by-vercel"><a href="https://vercel.app/" target="_blank"><img src="/static/powered-by-vercel.svg" alt="Powered by Vercel" /></a></div>
    </div>
    <script src="/static/scripts.js"></script>
  </body>
</html>