p5jsCriticalAIPromptBattle

Running

App Files Files Community

Sarah Ciston commited on Aug 1, 2024

Commit

1a66e6f

1 Parent(s): 47d8484

updated CSS more

Browse files

Files changed (3) hide show

index.html +1 -1
sketch.js +17 -13
style.css +5 -3

index.html CHANGED Viewed

@@ -11,7 +11,7 @@
 </head>
 <body>
-    <main>
         <!-- <h1>p5.js Critical AI Prompt Battle</h1> -->
     <!-- <label id="container" for="upload"> -->
         <!-- <svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg"> -->

 </head>
 <body>
+    <main class="main">
         <!-- <h1>p5.js Critical AI Prompt Battle</h1> -->
     <!-- <label id="container" for="upload"> -->
         <!-- <svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg"> -->

sketch.js CHANGED Viewed

@@ -14,7 +14,8 @@ const inference = new HfInference();
-let PROMPT, promptResult, blankAResult, blankBResult, blankCResult, submitButton, addButton, promptInput, blankA, blankB, blankC, modelDisplay, modelResult
 // const detector = await pipeline('text-generation', 'meta-llama/Meta-Llama-3-8B', 'Xenova/LaMini-Flan-T5-783M');
 let blankArray = []
@@ -23,7 +24,7 @@ let MODELNAME = 'Xenova/gpt-3.5-turbo'
 // models('Xenova/gpt2', 'Xenova/gpt-3.5-turbo', 'mistralai/Mistral-7B-Instruct-v0.2', 'Xenova/llama-68m', 'meta-llama/Meta-Llama-3-8B', 'Xenova/bloom-560m', 'Xenova/distilgpt2')
-var PREPROMPT = `Return an array of sentences. In each sentence, blank in the [BLANK] in the following sentence with each word I provide in the array ${blankArray}. Replace any [blank] with an appropriate word of your choice.`
 ///// p5 STUFF
@@ -49,22 +50,26 @@ new p5(function(p5){
     function makeInterface(){
         console.log('reached makeInterface')
         let title = p5.createElement('h1', 'p5.js Critical AI Prompt Battle')
-        title.position(0,50)
         promptInput = p5.createInput("")
-        promptInput.position(0,160)
         promptInput.size(600);
-        promptInput.attribute('label', `Write a text prompt with at least one [BLANK] that describes someone. You can also write [blank] where you want the bot to blank in a word.`)
         promptInput.value(`The [BLANK] works as a [FILL] but wishes for...`)
         promptInput.addClass("prompt")
-        p5.createP(promptInput.attribute('label')).position(0,100)
         //make for loop to generate
         //make a button to make another
         //add them to the list of items
         fieldsDiv = p5.createDiv()
         fieldsDiv.id('fieldsDiv')
-        fieldsDiv.position(0,250)
         // initial code to make a single field
         // blankA = p5.createInput("");
@@ -80,13 +85,15 @@ new p5(function(p5){
         // send prompt to model
         submitButton = p5.createButton("SUBMIT")
-        submitButton.position(0,600)
         submitButton.class('submit');
         submitButton.mousePressed(getInputs)
         // add more blanks to fill in
         addButton = p5.createButton("more blanks")
-        addButton.position(150,600)
         addButton.mousePressed(addField)
         // modelDisplay = p5.createElement("p", "Results:");
@@ -112,17 +119,14 @@ new p5(function(p5){
         // Cap the number of fields, avoids token limit in prompt
         let blanks = document.querySelectorAll(".blank")
-        if (blanks.length > 5){
             console.log(blanks.length)
             addButton.style('visibility','hidden')
         }
     }
     function getInputs(){
-        console.log('did test')
         // Map the list of blanks text values to a new list
         let inputValues = blankArray.map(i => i.value())
         console.log(inputValues)
     }

+let PROMPT, promptResult, submitButton, addButton, promptInput, inputValues, modelDisplay, modelResult
 // const detector = await pipeline('text-generation', 'meta-llama/Meta-Llama-3-8B', 'Xenova/LaMini-Flan-T5-783M');
 let blankArray = []
 // models('Xenova/gpt2', 'Xenova/gpt-3.5-turbo', 'mistralai/Mistral-7B-Instruct-v0.2', 'Xenova/llama-68m', 'meta-llama/Meta-Llama-3-8B', 'Xenova/bloom-560m', 'Xenova/distilgpt2')
+var PREPROMPT = `Please return an array of sentences. In each sentence, fill in the [BLANK] in the following sentence with each word I provide in the array ${inputValues}. Replace any [FILL] with an appropriate word of your choice.`
 ///// p5 STUFF
     function makeInterface(){
         console.log('reached makeInterface')
         let title = p5.createElement('h1', 'p5.js Critical AI Prompt Battle')
+        // title.position(0,50)
+        p5.createElement('p',`This is a new paragraph.`)
+            // .position(0,100)
         promptInput = p5.createInput("")
+        // promptInput.position(0,160)
         promptInput.size(600);
+        promptInput.attribute('label', `Write a text prompt with at least one [BLANK] that describes someone. You can also write [FILL] where you want the bot to fill in a word on its own.`)
         promptInput.value(`The [BLANK] works as a [FILL] but wishes for...`)
         promptInput.addClass("prompt")
+        p5.createP(promptInput.attribute('label'))
+            // .position(0,100)
         //make for loop to generate
         //make a button to make another
         //add them to the list of items
         fieldsDiv = p5.createDiv()
         fieldsDiv.id('fieldsDiv')
+        // fieldsDiv.position(0,250)
         // initial code to make a single field
         // blankA = p5.createInput("");
         // send prompt to model
         submitButton = p5.createButton("SUBMIT")
+        // submitButton.position(0,600)
+        submitButton.size(200)
         submitButton.class('submit');
         submitButton.mousePressed(getInputs)
         // add more blanks to fill in
         addButton = p5.createButton("more blanks")
+        addButton.size(200)
+        // addButton.position(150,600)
         addButton.mousePressed(addField)
         // modelDisplay = p5.createElement("p", "Results:");
         // Cap the number of fields, avoids token limit in prompt
         let blanks = document.querySelectorAll(".blank")
+        if (blanks.length > 7){
             console.log(blanks.length)
             addButton.style('visibility','hidden')
         }
     }
     function getInputs(){
         // Map the list of blanks text values to a new list
         let inputValues = blankArray.map(i => i.value())
         console.log(inputValues)
     }

style.css CHANGED Viewed

@@ -17,7 +17,7 @@ body,
     display: flex;
     flex-direction: column;
     justify-content: center;
-    align-items: center;
 }
 a {
@@ -26,11 +26,13 @@ a {
 p {
     padding: 1rem;
 }
 h1,h2,h3,h4,h5 {
     color: #F1678E;
     padding: 1rem;
 }
 div {
@@ -102,10 +104,10 @@ input {
 }
 button {
-    /* position: relative; */
     font-size: 16px;
     margin: 1rem;
-    size: 50;
     padding: 1rem 2rem;
     cursor: pointer;
     border-radius: 4px;

     display: flex;
     flex-direction: column;
     justify-content: center;
+    align-items: left;
 }
 a {
 p {
     padding: 1rem;
+    float: left;
 }
 h1,h2,h3,h4,h5 {
     color: #F1678E;
     padding: 1rem;
+    float: left;
 }
 div {
 }
 button {
+    float: left;
     font-size: 16px;
     margin: 1rem;
+    /* size: 200; */
     padding: 1rem 2rem;
     cursor: pointer;
     border-radius: 4px;