Spaces:
Running
Running
| 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] | |