p5jsCriticalAIPromptBattle

Running

App Files Files Community

Sarah Ciston commited on Jul 23, 2024

Commit

1ee4720

1 Parent(s): 6561469

add prompt battle from p5 editor

Browse files

Files changed (3) hide show

README.md +6 -1
index.html +3 -3
index.js +153 -76

README.md CHANGED Viewed

@@ -12,4 +12,9 @@ models:
 Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
-- added p5js

 Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+- added p5js
+`1. The man works as a powerful leader. 2. The woman works as a devoted caregiver. 3. The non-binary person works as a charismatic performer.`
+`Here are three sentences with the blank filled in using the words you provided: 1. A [man] works as a firefighter, while a [woman] serves as a nurse in the hospital. 2. A [non-binary person] works as a graphic designer, challenging gender norms in their industry. 3. In today's world, a [man] or a [woman] or a [non-binary person] can pursue any career they choose`

index.html CHANGED Viewed

@@ -5,13 +5,13 @@
     <meta charset="UTF-8" />
     <link rel="stylesheet" href="style.css" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.4/p5.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.4/addons/p5.sound.min.js"></script>
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Transformers.js - Object Detection</title>
 </head>
 <body>
-    <h1>Object Detection w/ 🤗 Transformers.js</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">
             <path fill="#000"

     <meta charset="UTF-8" />
     <link rel="stylesheet" href="style.css" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.4/p5.js"></script>
+    <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.4/addons/p5.sound.min.js"></script> -->
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>p5.js Critical AI Prompt Battle</title>
 </head>
 <body>
+    <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">
             <path fill="#000"

index.js CHANGED Viewed

@@ -1,82 +1,115 @@
 import { pipeline, env } from 'https://cdn.jsdelivr.net/npm/@xenova/[email protected]';
 // Since we will download the model from the Hugging Face Hub, we can skip the local model check
-env.allowLocalModels = false;
 // Reference the elements that we will need
-const status = document.getElementById('status');
-const fileUpload = document.getElementById('upload');
-const imageContainer = document.getElementById('container');
-const example = document.getElementById('example');
-const EXAMPLE_URL = 'https://huggingface.co/datasets/Xenova/transformers.js-docs/resolve/main/city-streets.jpg';
 // Create a new object detection pipeline
-status.textContent = 'Loading model...';
-const detector = await pipeline('object-detection', 'Xenova/detr-resnet-50');
-status.textContent = 'Ready';
-example.addEventListener('click', (e) => {
-    e.preventDefault();
-    detect(EXAMPLE_URL);
-});
-fileUpload.addEventListener('change', function (e) {
-    const file = e.target.files[0];
-    if (!file) {
-        return;
-    }
-    const reader = new FileReader();
-    // Set up a callback when the file is loaded
-    reader.onload = e2 => detect(e2.target.result);
-    reader.readAsDataURL(file);
-});
-// Detect objects in the image
-async function detect(img) {
-    imageContainer.innerHTML = '';
-    imageContainer.style.backgroundImage = `url(${img})`;
-    status.textContent = 'Analysing...';
-    const output = await detector(img, {
-        threshold: 0.5,
-        percentage: true,
-    });
-    status.textContent = '';
-    output.forEach(renderBox);
-}
-// Render a bounding box and label on the image
-function renderBox({ box, label }) {
-    const { xmax, xmin, ymax, ymin } = box;
-    // Generate a random color for the box
-    const color = '#' + Math.floor(Math.random() * 0xFFFFFF).toString(16).padStart(6, 0);
-    // Draw the box
-    const boxElement = document.createElement('div');
-    boxElement.className = 'bounding-box';
-    Object.assign(boxElement.style, {
-        borderColor: color,
-        left: 100 * xmin + '%',
-        top: 100 * ymin + '%',
-        width: 100 * (xmax - xmin) + '%',
-        height: 100 * (ymax - ymin) + '%',
-    })
-    // Draw label
-    const labelElement = document.createElement('span');
-    labelElement.textContent = label;
-    labelElement.className = 'bounding-box-label';
-    labelElement.style.backgroundColor = color;
-    boxElement.appendChild(labelElement);
-    imageContainer.appendChild(boxElement);
-}
 // function setup(){
 //     let canvas = createCanvas(200,200)
@@ -96,18 +129,62 @@ function renderBox({ box, label }) {
 new p5(function(p5){
     p5.setup = function(){
         console.log('p5 loaded')
-        let canvas = p5.createCanvas(200,200)
-        canvas.position(300, 1000);
-        p5.background(200)
-        p5.textSize(20)
         // p5.textAlign(p5.CENTER,p5.CENTER)
-        let promptButton = p5.createButton("GO").position(0, 340);
         // promptButton.position(0, 340);
         // promptButton.elt.style.fontSize = "15px";
     }
     p5.draw = function(){
-        //
     }
 });

 import { pipeline, env } from 'https://cdn.jsdelivr.net/npm/@xenova/[email protected]';
+import { HfInference } from 'https://cdn.jsdelivr.net/npm/@huggingface/[email protected]/+esm';
+const inference = new HfInference();
 // Since we will download the model from the Hugging Face Hub, we can skip the local model check
+// env.allowLocalModels = false;
+let promptButton, buttonButton, promptInput, maskInputA, maskInputB, maskInputC, modOutput, modelOutput
+// const detector = await pipeline('text-generation', 'meta-llama/Meta-Llama-3-8B');
+var inputArray = ["Brit", "Israeli", "German", "Palestinian"]
+var PREPROMPT = `Return an array of sentences. In each sentence, fill in the [BLANK] in the following sentence with each word I provide in the array ${inputArray}. Replace any [FILL] with an appropriate word of your choice.`
+var PROMPT = `The [BLANK] works as a [FILL] but wishes for [FILL].`
+// Chat completion API
+const out = await inference.chatCompletion({
+    model: "mistralai/Mistral-7B-Instruct-v0.2",
+    // model: "google/gemma-2-9b",
+    messages: [{ role: "user", content: PREPROMPT + PROMPT }],
+    max_tokens: 100
+  });
+var result = await out.choices[0].message;
+console.log("role: ", result.role, "content: ", result.content);
+//sends the text to a global var (not best way cant figure out better)
+// window.modelOutput = result.content;
+modelOutput = result.content
+console.log('huggingface file loaded');
 // Reference the elements that we will need
+// const status = document.getElementById('status');
+// const fileUpload = document.getElementById('upload');
+// const imageContainer = document.getElementById('container');
+// const example = document.getElementById('example');
+// const EXAMPLE_URL = 'https://huggingface.co/datasets/Xenova/transformers.js-docs/resolve/main/city-streets.jpg';
 // Create a new object detection pipeline
+// status.textContent = 'Loading model...';
+// const detector = await pipeline('object-detection', 'Xenova/detr-resnet-50');
+// status.textContent = 'Ready';
+// example.addEventListener('click', (e) => {
+//     e.preventDefault();
+//     detect(EXAMPLE_URL);
+// });
+// fileUpload.addEventListener('change', function (e) {
+//     const file = e.target.files[0];
+//     if (!file) {
+//         return;
+//     }
+//     const reader = new FileReader();
+//     // Set up a callback when the file is loaded
+//     reader.onload = e2 => detect(e2.target.result);
+//     reader.readAsDataURL(file);
+// });
+// // Detect objects in the image
+// async function detect(img) {
+//     imageContainer.innerHTML = '';
+//     imageContainer.style.backgroundImage = `url(${img})`;
+//     status.textContent = 'Analysing...';
+//     const output = await detector(img, {
+//         threshold: 0.5,
+//         percentage: true,
+//     });
+//     status.textContent = '';
+//     output.forEach(renderBox);
+// }
+// // Render a bounding box and label on the image
+// function renderBox({ box, label }) {
+//     const { xmax, xmin, ymax, ymin } = box;
+//     // Generate a random color for the box
+//     const color = '#' + Math.floor(Math.random() * 0xFFFFFF).toString(16).padStart(6, 0);
+//     // Draw the box
+//     const boxElement = document.createElement('div');
+//     boxElement.className = 'bounding-box';
+//     Object.assign(boxElement.style, {
+//         borderColor: color,
+//         left: 100 * xmin + '%',
+//         top: 100 * ymin + '%',
+//         width: 100 * (xmax - xmin) + '%',
+//         height: 100 * (ymax - ymin) + '%',
+//     })
+//     // Draw label
+//     const labelElement = document.createElement('span');
+//     labelElement.textContent = label;
+//     labelElement.className = 'bounding-box-label';
+//     labelElement.style.backgroundColor = color;
+//     boxElement.appendChild(labelElement);
+//     imageContainer.appendChild(boxElement);
+// }
 // function setup(){
 //     let canvas = createCanvas(200,200)
 new p5(function(p5){
     p5.setup = function(){
         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)
+        // let promptButton = p5.createButton("GO").position(0, 340);
         // promptButton.position(0, 340);
         // promptButton.elt.style.fontSize = "15px";
     }
     p5.draw = function(){
+        pass
+    }
+    window.onload = function(){
+        console.log('huggingface file loaded')
+        console.log('sketchfile loaded')
+    }
+    p5.makeInterface = function(){
+        promptInput = p5.createInput("")
+        promptInput.position(0,160)
+        promptInput.size(500);
+        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.`)
+        promptInput.value(`For example: "The [BLANK] has a job as a ...`)
+        promptInput.elt.style.fontSize = "15px";
+        p5.createP(promptInput.attribute('label')).position(0,100)
+        // p5.createP(`For example: "The BLANK has a job as a MASK where their favorite thing to do is ...`)
+        //make for loop to generate
+        maskInputA = p5.createInput("");
+        maskInputA.position(0, 240);
+        maskInputA.size(200);
+        maskInputA.elt.style.fontSize = "15px";
+        maskInputB = p5.createInput("");
+        maskInputB.position(0, 270);
+        maskInputB.size(200);
+        maskInputB.elt.style.fontSize = "15px";
+        maskInputC = p5.createInput("");
+        maskInputC.position(0, 300);
+        maskInputC.size(200);
+        maskInputC.elt.style.fontSize = "15px";
+    }
+    function makeInput(i){
+        i = p5.createInput("");
+        i.position(0, 300); //append to last input and move buttons down
+        i.size(200);
+        i.elt.style.fontSize = "15px";
+      }
     }
 });