Spaces:

sarahciston
/

p5jsTutorial1

Running

App Files Files Community

sarahciston commited on Aug 4, 2024

Commit

8b9d08a

verified ·

1 Parent(s): faa0795

Create tutorial1.md

Browse files

Files changed (1) hide show

tutorial1.md +240 -0

tutorial1.md ADDED Viewed

	@@ -0,0 +1,240 @@

+---
+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]