Added app and server setup

scienxlab · Jun 9, 2024 · 47fec86 · 47fec86
1 parent 4519154
commit 47fec86
Show file tree

Hide file tree

Showing 32 changed files with 1,838 additions and 1 deletion.
diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
@@ -0,0 +1,23 @@
+name: Deploy
+
+on:
+  push:
+    branches: [ main ]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+
+      - name: what-prompt ssh deploy
+        uses: fifsky/ssh-action@master
+        with:
+          command: |
+            cd what-prompt
+            GIT_SSH_COMMAND='ssh -i /home/matt/.ssh/id_rsa -o IdentitiesOnly=yes' git pull
+            make run
+          host: ${{ secrets.HOST }}
+          user: matt
+          key: ${{ secrets.PRIVATE_KEY }}
+          args: "-tt -vvv"
diff --git a/.gitignore b/.gitignore
@@ -1,3 +1,5 @@
+.DS_Store
+
 # Logs
 logs
 *.log

diff --git a/Makefile b/Makefile
@@ -0,0 +1,10 @@
+export DOMAIN = whatprompt.scienxlab.org
+
+run:
+	@echo "\e[36m[#] Killing old docker processes\e[0m"
+	docker-compose down -v -t 1
+
+	@echo "\e[36m[#] Building docker containers\e[0m"
+	docker-compose up --build --remove-orphans -d
+
+	@echo "\e[32m[#] Containers are now running!\e[0m"
diff --git a/README.md b/README.md
@@ -1,2 +1,5 @@
 # what-prompt
-A prompt engineering game
+
+A prompt (reverse) engineering game.
+
+This is a Node application (we only need a backend to deal with the OpenAI API key).
diff --git a/app/index.html b/app/index.html
@@ -0,0 +1,232 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Prompt Reverse Engineer</title>
+  <script>
+    const API_KEY = '<%= process.env.API_KEY %>';
+  </script>
+  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
+  <style>
+    .form-control {
+      margin-top: 0.75em;
+    }
+    .completion {
+      font-family: monospace;
+      background-color: #e2eafe;
+      padding: 10px;
+      margin-top: 20px;
+      border-radius: 5px;
+      min-height: 18em;
+    }
+    .response {
+      background-color: #d5efd5;
+    }
+    .context {
+      font-family: monospace;
+      background-color: #fef6e2;
+      padding: 16px;
+      margin-top: 20px;
+      border-radius: 5px;
+      min-height: 8em;
+    }
+    .goalprompt {
+      font-family: monospace;
+      background-color: #e2eafe;
+      padding: 16px;
+      margin-top: 20px;
+      border-radius: 5px;
+      min-height: 18em;
+    }
+    .blurred {
+      color: transparent;
+      text-shadow: rgba(0, 0, 0, 0.75) 0px 0px 16px;
+    }
+    .prompt-container {
+      font-family: monospace;
+      background-color: #d5efd5;
+      padding: 10px;
+      margin-top: 20px;
+      border-radius: 5px;
+      min-height: 18em;
+    }
+    .btn-primary {
+      width: 100%;
+    }
+    .btn-success {
+      width: 100%;
+    }
+    .checkmarks {
+      float: right;
+      color: #2ccb41;
+    }
+    .badge {
+      color: #ffffff;
+    }
+    .dropdown-menu {
+      padding: 15px;
+      width: 200px;
+    }
+    .dropdown-menu form {
+      width: 100%;
+    }
+    .dropdown-menu label {
+      display: block;
+      margin-bottom: 10px;
+    }
+    .dropdown-menu input[type="password"] {
+      width: 100%;
+    }
+  </style>
+</head>
+<body>
+
+
+  <nav class="navbar navbar-expand-lg navbar-light bg-light">
+    <a class="navbar-brand" href="#">> Tpmorp</a>
+
+  <div class="collapse navbar-collapse" id="navbarSupportedContent">
+    <ul class="navbar-nav mr-auto"></ul>
+    <ul class="navbar-nav">
+      <li class="nav-item dropdown">
+        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+          API key
+        </a>
+        <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
+          <form>
+            <label for="apiKey">Enter API Key:</label>
+            <input type="password" id="apiKey" class="form-control" placeholder="API Key">
+            <button type="submit" class="btn btn-primary mt-2">OK</button>
+          </form>
+        </div>
+      </li>
+    </ul>
+  </div>
+    </nav>
+
+    <div class="container">
+
+    <div class="mt-4">
+      <p class="lead">
+        🧑‍🔧 <b>It's the prompt reverse engineering game!</b> Use the form to make the prompt that produced the <b>Goal</b> output from the <b>Context</b>.
+      </p>
+    </div>  
+
+    <div>
+      <h3>Context <div class="spinner-border text-warning" id="contextSpinner" role="status"><span class="sr-only"></span></div></h3>
+      <p class="context" id="context"></p>
+    </div>
+
+      <div class="row mt-4">
+
+        <div class="col-md-6" id="goalPromptContainer">
+          <h3>
+            Hidden prompt
+            <button class="btn btn-light ml-4" id="revealGoalPrompt">Reveal Goal Prompt</button>
+          </h3>
+          <p class="goalprompt blurred" id="goalPrompt"></p>
+        </div>
+
+        <div class="col-md-6">
+          <h3>Your prompt<span class="checkmarks" id="checkmarks"></span></h3>
+          <div class="form-group prompt-container mt-4">
+          <div>
+            I am a 
+            <select class="form-control d-inline w-auto" id="persona">
+              <option value="5 year-old">5 year-old</option>
+              <option value="Python programmer">Python programmer</option>
+              <option value="CEO">CEO</option>
+              <option value="musician">Musician</option>
+            </select>
+            .
+          </div>
+          <div>
+            Act as a 
+            <select class="form-control d-inline w-auto" id="role">
+              <option value="teacher">Teacher</option>
+              <option value="politician">Politician</option>
+              <option value="journalist">Journalist</option>
+              <option value="lawyer">Lawyer</option>
+            </select>
+            .
+          </div>
+          <div>
+            Use a 
+            <select class="form-control d-inline w-auto" id="style">
+              <option value="formal">Formal</option>
+              <option value="poetic">Poetic</option>
+              <option value="informal">Informal</option>
+              <option value="street">Street</option>
+            </select>
+            style.
+          </div>
+          <div>
+            <select class="form-control d-inline w-auto" id="task">
+              <option value="Summarize">Summarize</option>
+              <option value="Improve">Improve</option>
+              <option value="Expand">Expand</option>
+              <option value="Tabulate">Tabulate</option>
+            </select>
+            the text above especially for me.
+          </div>
+          <div>
+            Produce output in 
+            <select class="form-control d-inline w-auto" id="format">
+              <option value="text">Text</option>
+              <option value="markdown">Markdown</option>
+              <option value="json">JSON</option>
+              <option value="emoji">Emoji</option>
+            </select>
+            format.
+          </div>
+        </div>
+      </div>
+
+      </div> <!-- End row -->
+
+    <div class="row mt-4">
+      <div class="col-md-6"><button class="btn btn-primary disabled">Produces 👇</button></div>
+      <div class="col-md-6"><button class="btn btn-success" id="submitPrompt">Submit Prompt</button></div>
+    </div>
+
+    <div class="row mt-4">
+      <div class="col-md-6">
+        <h3>Goal <div class="spinner-border text-primary" id="goalSpinner" role="status"><span class="sr-only"></span></div></h3>
+        <p class="completion" id="goalResponse"></p>
+      </div>
+      <div class="col-md-6">
+        <h3>Response <div class="spinner-border text-success d-none" id="responseSpinner" role="status"><span class="sr-only"></span></div> <span style="float:right"><span class="badge bg-success" id="attemptsRemaining">10</span> lives left</span></h3>
+        <p class="completion response" id="response"></p>
+        <!-- PILL HERE TO GIVE LIVES AND RESULT OF THIS ATTEMPT -->
+      </div>
+    </div>
+
+  </div><!-- End of container -->
+
+  <!-- modal -->
+  <div class="modal fade" id="winModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
+    <div class="modal-dialog" role="document">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h5 class="modal-title" id="exampleModalLabel">Congratulations!</h5>
+          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+            <span aria-hidden="true">&times;</span>
+          </button>
+        </div>
+        <div class="modal-body">
+          You have discovered the goal prompt!
+        </div>
+        <div class="modal-footer">
+          <button type="button" class="btn btn-secondary" data-dismiss="modal">Go Back</button>
+          <button type="button" class="btn btn-primary" id="playAgain">Play Again</button>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
+  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.bundle.min.js"></script>
+  <script src="script.js"></script>
+</body>
+</html>
-Original file line number
+Diff line change
@@ -1,3 +1,5 @@
+    .DS_Store
     # Logs
     logs
     *.log
@@ Expand Down @@