Hugging Face's logo

Spaces:
sarahciston
/
p5jsCriticalAIPromptBattle
Running

App Files Community
Sarah Ciston commited on
Commit
ae852b9
·
1 Parent(s): 5b404b3

add p5 page only interface

Browse files
Files changed (4) hide show
  1. README.md +4 -2
  2. index.js +3 -1
  3. sketch.html +30 -0
  4. sketch.js +96 -0
README.md CHANGED
@@ -1,6 +1,6 @@
1
  ---
2
  title: CriticalAI
3
- emoji: 🌐
4
  colorFrom: blue
5
  colorTo: yellow
6
  sdk: static
@@ -9,4 +9,6 @@ models:
9
  - Xenova/detr-resnet-50
10
  ---
11
 
12
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
 
 
1
  ---
2
  title: CriticalAI
3
+ emoji: 🌵
4
  colorFrom: blue
5
  colorTo: yellow
6
  sdk: static
 
9
  - Xenova/detr-resnet-50
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
13
+
14
+ - added p5js
index.js CHANGED
@@ -79,11 +79,13 @@ function renderBox({ box, label }) {
79
  }
80
 
81
  function setup(){
82
- createCanvas(200,200)
 
83
  background(200)
84
  textSize(20)
85
  textAlign(CENTER,CENTER)
86
  console.log('p5 loaded')
 
87
  }
88
 
89
  function draw(){
 
79
  }
80
 
81
  function setup(){
82
+ let canvas = createCanvas(200,200)
83
+ canvas.position(300, 1000);
84
  background(200)
85
  textSize(20)
86
  textAlign(CENTER,CENTER)
87
  console.log('p5 loaded')
88
+
89
  }
90
 
91
  function draw(){
sketch.html ADDED
@@ -0,0 +1,30 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+
4
+ <head>
5
+ <meta charset="UTF-8" />
6
+ <link rel="stylesheet" href="style.css" />
7
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.4/p5.js"></script>
8
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.4/addons/p5.sound.min.js"></script>
9
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
10
+ <title>p5 designed Transformers.js - Object Detection</title>
11
+ </head>
12
+
13
+ <body>
14
+ <h1>Object Detection w/ 🤗 Transformers.js</h1>
15
+ <label id="container" for="upload">
16
+ <svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
17
+ <path fill="#000"
18
+ d="M3.5 24.3a3 3 0 0 1-1.9-.8c-.5-.5-.8-1.2-.8-1.9V2.9c0-.7.3-1.3.8-1.9.6-.5 1.2-.7 2-.7h18.6c.7 0 1.3.2 1.9.7.5.6.7 1.2.7 2v18.6c0 .7-.2 1.4-.7 1.9a3 3 0 0 1-2 .8H3.6Zm0-2.7h18.7V2.9H3.5v18.7Zm2.7-2.7h13.3c.3 0 .5 0 .6-.3v-.7l-3.7-5a.6.6 0 0 0-.6-.2c-.2 0-.4 0-.5.3l-3.5 4.6-2.4-3.3a.6.6 0 0 0-.6-.3c-.2 0-.4.1-.5.3l-2.7 3.6c-.1.2-.2.4 0 .7.1.2.3.3.6.3Z">
19
+ </path>
20
+ </svg>
21
+ Click to upload image
22
+ <label id="example">(or try example)</label>
23
+ </label>
24
+ <label id="status">Loading model...</label>
25
+ <input id="upload" type="file" accept="image/*" />
26
+
27
+ <script src="sketch.js" type="module"></script>
28
+ </body>
29
+
30
+ </html>
sketch.js ADDED
@@ -0,0 +1,96 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ // import { pipeline, env } from 'https://cdn.jsdelivr.net/npm/@xenova/[email protected]';
2
+
3
+ // // Since we will download the model from the Hugging Face Hub, we can skip the local model check
4
+ // env.allowLocalModels = false;
5
+
6
+ // // Reference the elements that we will need
7
+ // const status = document.getElementById('status');
8
+ // const fileUpload = document.getElementById('upload');
9
+ // const imageContainer = document.getElementById('container');
10
+ // const example = document.getElementById('example');
11
+
12
+ // const EXAMPLE_URL = 'https://huggingface.co/datasets/Xenova/transformers.js-docs/resolve/main/city-streets.jpg';
13
+
14
+ // // Create a new object detection pipeline
15
+ // status.textContent = 'Loading model...';
16
+ // const detector = await pipeline('object-detection', 'Xenova/detr-resnet-50');
17
+ // status.textContent = 'Ready';
18
+
19
+ // example.addEventListener('click', (e) => {
20
+ // e.preventDefault();
21
+ // detect(EXAMPLE_URL);
22
+ // });
23
+
24
+ // fileUpload.addEventListener('change', function (e) {
25
+ // const file = e.target.files[0];
26
+ // if (!file) {
27
+ // return;
28
+ // }
29
+
30
+ // const reader = new FileReader();
31
+
32
+ // // Set up a callback when the file is loaded
33
+ // reader.onload = e2 => detect(e2.target.result);
34
+
35
+ // reader.readAsDataURL(file);
36
+ // });
37
+
38
+
39
+ // // Detect objects in the image
40
+ // async function detect(img) {
41
+ // imageContainer.innerHTML = '';
42
+ // imageContainer.style.backgroundImage = `url(${img})`;
43
+
44
+ // status.textContent = 'Analysing...';
45
+ // const output = await detector(img, {
46
+ // threshold: 0.5,
47
+ // percentage: true,
48
+ // });
49
+ // status.textContent = '';
50
+ // output.forEach(renderBox);
51
+ // }
52
+
53
+ // // Render a bounding box and label on the image
54
+ // function renderBox({ box, label }) {
55
+ // const { xmax, xmin, ymax, ymin } = box;
56
+
57
+ // // Generate a random color for the box
58
+ // const color = '#' + Math.floor(Math.random() * 0xFFFFFF).toString(16).padStart(6, 0);
59
+
60
+ // // Draw the box
61
+ // const boxElement = document.createElement('div');
62
+ // boxElement.className = 'bounding-box';
63
+ // Object.assign(boxElement.style, {
64
+ // borderColor: color,
65
+ // left: 100 * xmin + '%',
66
+ // top: 100 * ymin + '%',
67
+ // width: 100 * (xmax - xmin) + '%',
68
+ // height: 100 * (ymax - ymin) + '%',
69
+ // })
70
+
71
+ // // Draw label
72
+ // const labelElement = document.createElement('span');
73
+ // labelElement.textContent = label;
74
+ // labelElement.className = 'bounding-box-label';
75
+ // labelElement.style.backgroundColor = color;
76
+
77
+ // boxElement.appendChild(labelElement);
78
+ // imageContainer.appendChild(boxElement);
79
+ // }
80
+
81
+ function setup(){
82
+ let canvas = createCanvas(200,200)
83
+ canvas.position(300, 1000);
84
+ background(200)
85
+ textSize(20)
86
+ textAlign(CENTER,CENTER)
87
+ let promptButton = createButton("GO")
88
+ promptButton.position(0, 340);
89
+ promptButton.elt.style.fontSize = "15px";
90
+ console.log('p5 loaded')
91
+
92
+ }
93
+
94
+ function draw(){
95
+ //
96
+ }