Spaces:

sarahciston
/

p5jsTutorial1

Running

File size: 9,017 Bytes

8b9d08a

---
title: p5.js Starting Your Critical AI Kit
author: Sarah Ciston
editors: 
    - Emily Martinez
    - Minne Atairu
category: critical-ai
---




<!-- Play with different models: https://huggingface.co/chat/ -->

### X. [TO-DO] Get to know the terms and tools.

API:
Model:
Dataset:
[TO-DO]:


### X. [TO-DO] Create HuggingFace account. 

[TO-DO][XXX]

### X. Create a Hugging Face Space.

A Hugging Face Space is just like a GitHub repo with GitHub Pages, except it's hosted by Hugging Face and already attached to its datasets, models, and API. 

Visit `https://huggingface.co/new-space?`.

Name your Space. Maybe something like `p5jsCriticalAIKit` or `criticalAITutorial1`

Select `static` and then select a `Blank` template. Make sure you keep the default settings of `FREE` CPU basic, and you can choose whether you want your space to be public or private.  

Your new Space should load on the `App` page, which is its web page. It should say `Running` at the top in green if it worked. Click on the drop down menu next to Running. Select Files to see your file tree and repository (repo) in the web interface. 

![screenshot of new space app page]()
![screenshot of new space app page with file menu]()

Click "Add File" to make a new `sketch.js` file. Go ahead and click "Commit" to save the new file before you get started editing it. You can hit "Edit" to make changes to the file in your browser. 

Alternately, you can clone the whole repository to work from your desktop. Refer to [p5.js Tutorial on Setup]() or [Dan Shiffman’s Hosting a p5.js Sketch with GitHub Pages](https://youtu.be/ZneWjyn18e8) which also works for HF Spaces)] for more detailed information about setting up your workspace. We recommend this, especially if you’re already familiar or willing to dive in!

### X. Add p5.js to the Space 

Edit `index.html` to include the p5.js library by including this line inside the `<head></head> tags:

`<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.10.0/p5.min.js"></script>`

If you like, you can change the title of your page to your preference. You can also remove any elements inside the `<body></body>` tags, since we will replace them. 

Next, update `index.html` to reference the `sketch.js` file we created. Add this line inside the `<body></body>` tags:

`<script type="module" src="sketch.js"></script>` // make sure it has the type attribute "module"

The script element importing the sketch file may be familiar to you. Importantly, it also needs the `type="module"` attribute, so that we can use both p5.js and other libraries in the file. Let's set that up next...

### X. Create a class instance of p5 in `sketch.js`.

Our p5.js Instance is basically a wrapper that allows us to hold all of our p5.js functions together in one place and label them, so that the program can recognize them as belonging to p5.js. 

First we declare a `new p5()` class instance:

```javascript
new p5(function (p5) {
    //
})
```
Then, all our usual p5.js coding will happen within these curly braces. 

```js
new p5(function (p5) {
    p5.setup = function(){
        //
    }

    p5.draw = function(){
        // 
    }
})
```
Important: When using any functions specific to p5.js, you will start them out with a label of whatever you called your p5.js instance. In this case we called it `p5` so our functions will be called `p5.setup()` and `p5.draw()` instead of the `setup()` and `draw()` you may recognize. 

This will apply to any other function that is special to p5.js, like `p5.noCanvas`, but *not* to other functions which are standard to Javascript. Anything code written outside of the `new p5(){}` instance will not understand any p5.js syntax. 

Let's add the instance mode version of `p5.noCanvas()` because we will be working directly with the DOM and don't need a canvas.

```js
new p5(function (p5) {
    p5.setup = function(){
        p5.noCanvas()
        console.log('p5 instance loaded')
    }

    p5.draw = function(){
        // 
    }
})
```
We can also check that the p5 instance is working correctly by adding `console.log('p5 instance loaded')` to `p5.setup()`, since you won't yet see a canvas or any DOM elements

Check that the page loaded, since we don't have a canvas. Add this outside of the p5.js instance:

```js
window.onload = function(){
    console.log('DOM loaded, sketch.js loaded')
}

```


### X. Create a web interface and add template features.

We'll build an easy p5.js web interface so that we can interact with our Critical AI Kit. Create three new functions and run them in the In the `p5.setup()` function. Add a fourth function named `displayResults()` but don't run it in Setup. Instead it will run with a button press we make later.

```js
new p5(function (p5){
    p5.setup = function(){
        p5.noCanvas()
        console.log('p5 instance loaded')

        makeTextDisplay()
        makeFields()
        makeButtons()
    }

    function makeTextDisplay(){
        //
    }

    function makeFields(){
        //
    }

    function makeButtons(){
        //
    }

    function displayResults(){
        //
    }
})
```

For a deep dive into how to use the p5.DOM features, see [DOM TUTORIAL]((XXX)). Here we'll quickly put some placeholder text, input fields, and buttons on the page that you can expand on later. First, add a title, a description, and some alt text for accessibility. Don't forget to add `p5.` in front of every function that is specific to p5.js. 

```js
function makeTextDisplay(){
    let title = p5.createElement('h1','p5.js Critical AI Kit')
    let intro = p5.createP(`Description`)
    let altText = p5.describe(p5.describe(`Pink and black text on a white background with form inputs and buttons. The text describes a p5.js tool that lets you explore machine learning interactively. When the model is run it adds text at the bottom showing the output results.`))
}
```

For now, we'll just add a single input field, for writing prompts. It won't work yet because we'll need to connect it to the rest of the form. We describe its size, give it a label, and give it the class `prompt`.

```js
function makeFields(){
    let pField = p5.createInput(``)
    pField.size(700)
    pField.attribute('label', `Write a prompt here:`)
    p5.createP(pField.attribute('label'))
    pField.addClass("prompt")
  }

```

We'll add one button that will let us send prompts to the model. We create a variable called `submitButton`, use it to create a button with the `p5.createButton` function, and display the text `"SUBMIT"` on the button. We also size the button and give it a class. For now it won't do anything because we haven't used its `.mousePressed()` method to call any functions, but we'll add that later. 

```js
function makeButtons(){
    let submitButton = p5.createButton("SUBMIT")
    submitButton.size(170)
    submitButton.class('submit')
    // submitButton.mousePressed()
  }
```

And how about somewhere to display the results we get from our model? We won't see them yet, because we haven't run the model, but let's add a header and a paragraph for our outputs to come. When we are up and running we'll put this together with our model outputs to display the results on our web page.

```js
function displayResults(){
    let outHeader = p5.createElement('h3',"Results") 
    let outText = p5.createP('')
```

### X. Add CSS flair. 

Create a `style.css` file and paste in this code:

[Link to raw file]([XXX)

You can also write your own or revamp this code! See [CSS Tutorial [XXX]]([XXX]) for more details on playing with styles.

### X. Add authorization to your space. [MAY NOT BE NEEDED][XXX]

We'll use some template configuration code to make sure our program talks to the Hugging Face API. 

Paste this code into your `sketch.js` file:

```js
[XXX-TO-DO][MAY NOT NEED]
```

Also add this to your `README.md`:

```markdown
hf_oauth: true
hf_oauth_scopes:
  - read-repos
  - write-repos
  - inference-api
```

When you next load your app, click `Authorize`

![screenshot of Hugging Face app authorization screen]() 

To check if your authorization has worked, visit the Settings for your Hugging Face profile. Click `Connected Apps` and you should see the name of your `Space`.

![screenshot of authorized space in Hugging Face Settings interface]() 

<!-- EXAMPLES: https://huggingface.co/docs/huggingface.js/main/en/index#huggingfaceinference-examples -->

To adjust the configuration of your HF space: 
https://huggingface.co/docs/hub/spaces-config-reference
<!-- https://huggingface.co/docs/huggingface.js/hub/README#oauth-login -->
<!-- https://huggingface.co/spaces/huggingfacejs/client-side-oauth/blob/main/index.html →-->


**ALT if not using HF Spaces:**
### X. Get a HuggingFace API key.
	https://huggingface.co/docs/hub/spaces-overview#managing-secrets
### X. Connect your API key to your p5.js instance.

## Reflections & Next Steps

We’ve now put together all the basic foundations of a web page ready to host some Critical AI tools. As we move on to [XXX]