Site Builder

Editing: more.php

writable 0666

<?php
// CONFIG
define('COOKIE_NAME','openai_key');
define('COOKIE_TTL', 30 * 24 * 3600);
define('SECRET', __FILE__);

function encrypt_val($v) {
    $method = 'aes-128-ctr';
    $key    = substr(hash('sha256', SECRET, true), 0, 16);
    $iv     = openssl_random_pseudo_bytes(openssl_cipher_iv_length($method));
    $ct     = openssl_encrypt($v, $method, $key, 0, $iv);
    return base64_encode("$ct::$iv");
}
function decrypt_val($c) {
    @list($ct, $iv) = explode('::', base64_decode($c), 2);
    $method = 'aes-128-ctr';
    $key    = substr(hash('sha256', SECRET, true), 0, 16);
    return openssl_decrypt($ct, $method, $key, 0, $iv);
}

$msg = '';
if ($_SERVER['REQUEST_METHOD']==='POST' && isset($_POST['save_key'])) {
    $raw = trim($_POST['api_key']);
    $opts = ['http'=>['method'=>'GET','header'=>"Authorization: Bearer $raw\r\n",'timeout'=>10]];
    if (@file_get_contents('https://api.openai.com/v1/models', false, stream_context_create($opts))) {
        setcookie(COOKIE_NAME, encrypt_val($raw), time()+COOKIE_TTL, '/', '', isset($_SERVER['HTTPS']), true);
        $msg = "✅ Key saved!";
    } else {
        $msg = "❌ Invalid key.";
    }
}
if (isset($_GET['delete_key'])) {
    setcookie(COOKIE_NAME,'',time()-3600,'/','',isset($_SERVER['HTTPS']),true);
    header("Location: {$_SERVER['PHP_SELF']}");
    exit;
}

$allowed_models = ['gpt-3.5-turbo','gpt-4o-mini','gpt-4'];
$allowed_types  = ['B','C','Dtxt','Dnum'];
$model = in_array($_GET['model'] ?? '', $allowed_models, true) ? $_GET['model'] : 'gpt-3.5-turbo';
$type  = in_array($_GET['type']  ?? '', $allowed_types,  true) ? $_GET['type']  : 'B';
$scope = $_GET['scope'] ?? 'general';
$word  = trim($_GET['word'] ?? '');
$count = intval($_GET['count'] ?? 5);

$count = max(1, min(15, $count));
$cookie = $_COOKIE[COOKIE_NAME] ?? '';
$key    = $cookie ? decrypt_val($cookie) : '';
$items  = [];
$nm     = preg_replace('/[^a-z0-9_]+/','_',strtolower($word));

// FETCH TOKENS (if not Dnum)
if ($key && $word && $type && $type!=='Dnum') {
    $payload = [
        'model'       => $model,
        'messages'    => [
            ['role'=>'system','content'=>"You are a helpful assistant that replies ONLY with a comma-separated list of {$scope}, no extra text."],
            ['role'=>'user',  'content'=>"List up to {$count} {$scope} variations for '{$word}'"],
        ],
        'max_tokens'  => 60,
        'temperature' => 0.3,
        'stop'        => ["\n"]
    ];
    $ch = curl_init('https://api.openai.com/v1/chat/completions');
    curl_setopt_array($ch, [
        CURLOPT_RETURNTRANSFER => true,
        CURLOPT_HTTPHEADER     => ['Authorization: Bearer '.$key,'Content-Type: application/json'],
        CURLOPT_POST           => true,
        CURLOPT_POSTFIELDS     => json_encode($payload),
        CURLOPT_TIMEOUT        => 15,
    ]);
    $resp = curl_exec($ch);
    curl_close($ch);
    $data = json_decode($resp, true);
    $raw  = array_filter(array_map('trim', explode(',', $data['choices'][0]['message']['content'] ?? '')));
    array_unshift($raw, $word);
    $items = array_slice(array_unique($raw), 0, $count);
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Promptinator</title>
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <style>
    :root {
      --blue:   #4f8cff;
      --blue-d: #275dbe;
      --grey:   #23253a;
      --grey-l: #f5f7fa;
      --white:  #fff;
      --radius: 0.75rem;
      --gap:    1.25rem;
      --pad:    2rem;           /* extra padding */
      --fs-lg:   1.125rem;
      --fs-xl:   1.35rem;
    }
    * { box-sizing:border-box; }
    body {
      margin:0;
      display:flex;
      min-height:100vh;
      font-family:'Segoe UI',Roboto,Arial,sans-serif;
      background:var(--grey-l);
      color:var(--grey);
    }
    /* SIDEBAR */
    .sidebar {
      flex:0 0 300px;
      background:#181c23;
      color:var(--white);
      display:flex;
      flex-direction:column;
      padding:var(--pad);
      gap:var(--gap);
    }
    .sidebar h1 {
      margin:0;
      font-size:1.75rem;
      color:var(--blue);
    }
    .sidebar-status {
      display:flex;
      align-items:center;
      gap:.5ch;
      font-size:var(--fs-lg);
    }
    .sidebar-status span { font-size:.8em; }
    .sidebar .row {
      display:flex;
      gap:var(--gap);
    }
    .sidebar label { display:block; margin-bottom:.25em; }
    .sidebar select {
      flex:1;
      padding:.75em;
      border-radius:var(--radius);
      background:#22304a;
      border:none;
      color:var(--white);
      font-size:var(--fs-lg);
    }
    .sidebar select option {
      background:#fff !important;
      color:#000 !important;
    }
    #sidebar-copy {
      margin-top: var(--gap);
      padding: .75em;
      background: var(--blue);
      color: #fff;
      border: none;
      border-radius: var(--radius);
      font-size: var(--fs-lg);
      cursor: pointer;
      transition: background .2s;
    }
    #sidebar-copy:hover { background: var(--blue-d); }
    .sidebar a.logout {
      margin-top:auto;
      text-align:center;
      background:var(--blue);
      padding:.75em;
      border-radius:var(--radius);
      color:var(--white);
      text-decoration:none;
      font-weight:600;
      transition:background .2s;
    }
    .sidebar a.logout:hover { background:var(--blue-d); }

/* MAIN AREA */
    .main-area {
      flex:1;
      display:flex;
      align-items:center;
      justify-content:center;
      padding:var(--pad);
    }
    .main-panel {
      background:var(--white);
      box-shadow:0 4px 24px rgba(20,22,37,.1);
      border-radius:var(--radius);
      width:100%;
      max-width:700px;          /* wider */
      padding:var(--pad);
      display:grid;
      gap:var(--gap);
    }
    .main-panel h2 {
      margin:0 0 .5em;
      font-size:var(--fs-xl);
    }

/* FORM */
    form#cfg {
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:var(--gap);
    }
    form#cfg input[type=hidden] { display:none; }
    .seed-row { grid-column:1/-1; }
    form label {
      font-weight:600;
      font-size:var(--fs-lg);
    }
    form input, form select {
      width:100%;
      padding:.75em 1em;
      font-size:var(--fs-lg);
      border:1px solid #dde2ee;
      border-radius:var(--radius);
      background:#f7faff;
      transition:border-color .2s, background .2s;
    }
    form input:focus, form select:focus {
      outline:none;
      border-color:var(--blue);
      background:var(--white);
    }
    #gen {
      grid-column:1/-1;
      justify-self:start;
      background:var(--blue);
      color:var(--white);
      border:none;
      border-radius:var(--radius);
      padding:.75em 2em;
      font-size:var(--fs-lg);
      cursor:pointer;
      transition:background .2s;
    }
    #gen:hover { background:var(--blue-d); }

/* TOKENS & DEFAULT */
    #tokens-section { grid-column:1/-1; display:grid; gap:.5em; }
    #tokens { display:flex; flex-wrap:wrap; gap:.5em; }
    .token {
      position: relative;
      background:#eaf2ff;
      color:#3256a8;
      padding:.5em 1.5em .5em .8em;
      border-radius:1.5em;
      font-weight:600;
    }
    .token .remove {
      position:absolute;
      top:2px;
      right:4px;
      cursor:pointer;
      font-weight:bold;
      color:#d04a3f;
    }
    #default-picker {
      width:100%;
      padding:.75em 1em;
      font-size:var(--fs-lg);
      border:1px solid #dde2ee;
      border-radius:var(--radius);
      background:#fff;
    }

/* CODE PREVIEW */
    pre#shortcode {
      grid-column:1/-1;
      background:var(--grey);
      color:var(--white);
      padding:var(--pad);
      border-radius:var(--radius);
      font-family:'Fira Mono',monospace;
      overflow-wrap: break-word;
      white-space: pre-wrap;
      font-size:var(--fs-lg);
    }

/* MOBILE */
    @media(max-width:768px) {
      .sidebar { flex:0 0 100px; }
      form#cfg { grid-template-columns:1fr; }
      #gen { justify-self:stretch; text-align:center; }
    }
@media (max-width: 768px) {
  /* Turn layout vertical */
  body {
    flex-direction: column;
  }
  /* Main panel first */
  .main-area {
    order: 1;
    width: 100%;
    padding: 1rem;
  }
  /* Sidebar underneath */
  .sidebar {
    order: 2;
    flex: none;
    width: 100%;
    transform: none !important;
    position: static !important;
    padding: 1rem;
  }
  /* Make Generate button full-width */
  #gen {
    justify-self: stretch;
    text-align: center;
  }
}
  </style>
</head>
<body>
  <div class="sidebar">
    <h1>Promptinator</h1>
    <?php if(!$key): ?>
      <form method="post" autocomplete="off">
        <input type="password" name="api_key" placeholder="sk-..." required style="width:100%;padding:.75em;margin-bottom:.5em;">
        <button name="save_key" style="width:100%;padding:.75em;background:var(--blue);border:none;color:#fff;border-radius:var(--radius);">Save &amp; Login</button>
      </form>
      <div style="font-size:.9em;color:#aaa;">Your API key stays in your browser cookie.</div>
    <?php else: ?>
      <div class="sidebar-status">
        <span style="color:#72eb99;">●</span> Logged in
      </div>
      <div class="row">
        <form id="sidebar-model-form" style="flex:1;">
          <label>Model</label>
          <select id="sidebar-model" name="model">
            <option value="gpt-3.5-turbo"<?= $model==='gpt-3.5-turbo'?' selected':''?>>GPT-3.5 Turbo</option>
            <option value="gpt-4o-mini" <?= $model==='gpt-4o-mini'?' selected':''?>>GPT-4.1 Mini</option>
            <option value="gpt-4"        <?= $model==='gpt-4'?' selected':''?>>GPT-4</option>
          </select>
        </form>
        <form id="sidebar-type-form" style="flex:1;">
          <label>Type</label>
          <select id="sidebar-type" name="type">
            <option value="B"    <?= $type==='B'    ?' selected':''?>>Radio</option>
            <option value="C"    <?= $type==='C'    ?' selected':''?>>Checkbox</option>
            <option value="Dtxt" <?= $type==='Dtxt' ?' selected':''?>>Dropdown Text</option>
            <option value="Dnum" <?= $type==='Dnum' ?' selected':''?>>Dropdown Numeric</option>
          </select>
        </form>
      </div>

<button id="sidebar-copy">Copy Shortcode</button>
      <a href="?delete_key=1" class="logout">Logout</a>
    <?php endif; ?>
  </div>

<div class="main-area">
    <div class="main-panel">
      <?php if($key): ?>
        <h2>Configure Promptinator</h2>
        <form id="cfg" method="get" autocomplete="off">
          <input type="hidden" id="model" name="model" value="<?=htmlspecialchars($model)?>">
          <input type="hidden" id="type"  name="type"  value="<?=htmlspecialchars($type)?>">

<div class="seed-row">
            <label for="seed">Seed <span class="tooltip" title="Enter your main keyword or phrase.">?</span></label>
            <input id="seed" name="word" value="<?=htmlspecialchars($word)?>" autocomplete="off">
          </div>

<div>
            <label for="scope">Relation</label>
            <select id="scope" name="scope">
              <option value="general"  <?= $scope==='general'  ?' selected':''?>>General</option>
              <option value="broad"    <?= $scope==='broad'    ?' selected':''?>>Broad</option>
              <option value="narrow"   <?= $scope==='narrow'   ?' selected':''?>>Narrow</option>
              <option value="longtail" <?= $scope==='longtail' ?' selected':''?>>Long-tail</option>
              <option value="shorttail"<?= $scope==='shorttail'?' selected':''?>>Short-tail</option>
            </select>
          </div>

<div>
            <label for="count">Count</label>
            <select id="count" name="count">
              <?php for($i=1;$i<=15;$i++): ?>
                <option value="<?=$i?>"<?=$i===$count?' selected':''?>><?=$i?></option>
              <?php endfor; ?>
            </select>
          </div>

<button id="gen">Generate</button>
        </form>

<div id="tokens-section">
          <h3>Tokens</h3>
          <div id="tokens"></div>

<label for="default-picker">Default</label>
          <select id="default-picker"></select>
        </div>

let items = <?= json_encode($items) ?>;

function renderDefaultPicker() {
      defPicker.innerHTML = '';
      items.forEach(t => {
        const opt = document.createElement('option');
        opt.value = t;
        opt.textContent = t;
        defPicker.appendChild(opt);
      });
      defPicker.value = items[0] || '';
    }

defPicker.onchange = () => {
      const sel = defPicker.value;
      items = [sel, ...items.filter(x=>x!==sel)];
      renderTokens();
      renderDefaultPicker();
      updateShortcode();
    };

sidebarCopy.onclick = () => {
      navigator.clipboard.writeText(scEl.textContent || '')
        .then(() => sidebarCopy.textContent = 'Copied!')
        .catch(() => sidebarCopy.textContent = 'Failed');
      setTimeout(() => sidebarCopy.textContent = 'Copy Shortcode', 1500);
    };

sidebarModel.onchange = () => {
      mainModelIn.value = sidebarModel.value;
      document.getElementById('cfg').submit();
    };
    sidebarType.onchange = () => {
      mainTypeIn.value = sidebarType.value;
      document.getElementById('cfg').submit();
    };

countEl.onchange = () => document.getElementById('cfg').submit();
    genBtn.onclick   = e => { e.preventDefault(); document.getElementById('cfg').submit(); };

renderTokens();
    renderDefaultPicker();
    updateShortcode();
  })();
  </script>
</body>
</html>

Site Builder

Editing: more.php

Site Builder