CSS and formatting updates

index.html

@@ -24,8 +24,8 @@
     <!-- </label> -->
     <!-- <label id="status">Loading model...</label> -->
     <!-- <input id="upload" type="file" accept="image/*" /> -->
-     <div id="blanks">
-     </div>
+     <!-- <div id="fieldsDiv">
+     </div> -->
     </main>
     <script type="module" src="sketch.js"></script>
 </body>

sketch.js

@@ -14,7 +14,7 @@ const inference = new HfInference();
 
 
 
-let PROMPT, promptResult, blankAResult, blankBResult, blankCResult, promptButton, blankButton, promptInput, blankA, blankB, blankC, modelDisplay, modelResult
+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 = []
@@ -34,11 +34,6 @@ new p5(function(p5){
         console.log('p5 loaded')
         p5.noCanvas()
         makeInterface()
-        // let canvas = p5.createCanvas(200,200)
-        // canvas.position(300, 1000);
-        // p5.background(200)
-        // p5.textSize(20)
-        // p5.textAlign(p5.CENTER,p5.CENTER)
     }
 
     p5.draw = function(){
@@ -49,7 +44,7 @@ new p5(function(p5){
         console.log('dom and js loaded')
     }
 
-    let blanksBox = document.querySelector("#blanks")
+    let fieldsDiv = document.querySelector("#blanks")
 
     function makeInterface(){
         console.log('reached makeInterface')
@@ -58,37 +53,41 @@ new p5(function(p5){
 
         promptInput = p5.createInput("")
         promptInput.position(0,160)
-        promptInput.size(500);
+        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 [blank] but wishes for [blank].`)
-        // promptInput.elt.style.fontSize = "15px";
+        promptInput.value(`The [BLANK] works as a [FILL] but wishes for...`)
         promptInput.addClass("prompt")
         p5.createP(promptInput.attribute('label')).position(0,100)
-        // p5.createP(`For example: "The BLANK has a job as a blank where their favorite thing to do is ...`)
 
         //make for loop to generate
         //make a button to make another
         //add them to the list of items
-        blankA = p5.createInput("");
-        blankA.position(0, 240);
-        blankA.size(200);
-        blankA.elt.style.fontSize = "15px"; 
-        blankA.addClass("blank")
-        // blanksBox.append(blankA)
-
-        blankButton = p5.createButton("more blanks").position(230,240)
-        blankButton.elt.style.fontSize = "15px"
-        blankButton.mousePressed(makeBlank)
-
-        // blankB = p5.createInput("");
-        // blankB.position(0, 270);
-        // blankB.size(200);
-        // blankB.elt.style.fontSize = "15px";
-
-        // blankC = p5.createInput("");
-        // blankC.position(0, 300);
-        // blankC.size(200);
-        // blankC.elt.style.fontSize = "15px";
+        fieldsDiv = p5.createDiv()
+        fieldsDiv.id('fieldsDiv')
+        fieldsDiv.position(0,250)
+
+        // initial code to make a single field
+        // blankA = p5.createInput("");
+        // blankA.position(0, 240);
+        // blankA.size(300);
+        // blankA.addClass("blank")
+        // blankA.parent('#fieldsDiv')
+
+        // function to generate a single BLANK form field instead
+        addField()
+
+        // // BUTTONS // // 
+
+        // 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:");
         // modelDisplay.position(0, 380);
@@ -96,49 +95,39 @@ new p5(function(p5){
         //         modelDisplay.html(modelResult)
         // // }, 2000);
 
-        //a model drop down list?
-
-        //GO BUTTON
-        promptButton = p5.createButton("GO").position(0, 340);
-        promptButton.position(0, 340);
-        promptButton.elt.style.fontSize = "15px";
-        promptButton.mousePressed(test)
+        // TO-DO a model drop down list?
 
         // describe(``)
         // TO-DO alt-text description
     }
 
-    function makeBlank(){
-        let b = p5.createInput("")
-        // b.position(0, 240 + (i*30)) // positions new buttons below the prior buttons based on their place in the list
-        // b.size(200)
-        // b.elt.style.fontSize = "15px" // change this to CSS
-        b.class("blank")
-        // blanksBox.append(b)
-        console.log("made blank")
+    function addField(){
+        let f = p5.createInput("")
+        f.class("blank")
+        f.parent("#fieldsDiv")
+
+        // DOES THIS WORK???????????????????
+        blankArray.push(f)
+        console.log("made field")
+        
+        // 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 test(){
+    function getInputs(){
         console.log('did test')
-        //make sure to set these variables to the values here, at the moment of button press, otherwise they will be blank
-        // promptResult = promptInput.value()
-        // blankAResult = blankA.value()
-        // blankBResult = blankB.value()
-        // blankCResult = blankC.value()
-
-        let blanks = document.querySelectorAll(".blank")
 
-        console.log(blanks.values(), blanks.entries(), blanks.keys(), promptInput.value())
+        // Map the list of blanks text values to a new list
 
-        // for (let b in blanks){
-        //     console.log(b)
-        //     // let blankResult = b.value()
-        //     append(inputArray, blankResult)    
-        // }
-        // console.log(promptResult, inputArray)
+        let inputValues = blankArray.map(i => i.value())
+        console.log(inputValues)
     }
 
-    // var modelResult = promptButton.mousePressed(runModel) = function(){
+    // var modelResult = submitButton.mousePressed(runModel) = function(){
     //     // listens for the button to be clicked
     //     // run the prompt through the model here
     //     // modelResult = runModel()
@@ -150,7 +139,6 @@ new p5(function(p5){
     //     i = p5.createInput("");
     //     i.position(0, 300); //append to last blank and move buttons down
     //     i.size(200);
-    //     i.elt.style.fontSize = "15px";
     //   }    
 });
 

style.css

@@ -1,14 +1,15 @@
 * {
     box-sizing: border-box;
-    padding: 0;
+    padding: 1rem;
     margin: 0;
-    font-family: sans-serif;
+    font-family: "Fira Code VF", monospace;
 }
 
 html,
 body {
+    margin: 0;
     height: 100%;
-    padding: 32px;
+    padding: 0;
 }
 
 body,
@@ -19,6 +20,23 @@ body,
     align-items: center;
 }
 
+a {
+    color: #F1678E;
+}
+
+p {
+    padding: 1rem;
+}
+
+h1,h2,h3,h4,h5 {
+    color: #F1678E;
+    padding: 1rem;
+}
+
+div {
+    padding: 0;
+}
+
 #container {
     position: relative;
     gap: 0.4rem;
@@ -77,14 +95,39 @@ canvas {
 }
 
 input {
-    margin: 0.5rem;
+    margin: 1rem;
     size: 200;
-    position: relative;
+    /* position: relative; */
+    font-size: 12pt;
 }
 
 button {
-    font-size: 15px;
+    /* position: relative; */
+    font-size: 16px;
     margin: 1rem;
     size: 50;
+    padding: 1rem 2rem;
+    cursor: pointer;
+    border-radius: 4px;
+    border: 0;
+}
+
+button:hover {
+    background-color: #e3e3e3;
 }
 
+button:active {
+    background-color: #d7d7d7;
+}
+
+button.submit {
+    background-color: #F1678E;
+}
+
+button.submit:hover {
+    background-color: #df5f83;
+}
+  
+button.submit:active {
+    background-color: #cb5677;
+}