P5.js-web-editor: When fetching sketches via slug, API returns first sketch that matches slug

[catarak]

Nature of issue?

• Found a bug

Details about the bug:

• Web browser and version: Chrome
• Operating System: MacOSX
• Steps to reproduce this bug:

As reported in ml5js/ml5-library#927:

When one navigates to https://editor.p5js.org/ml5/sketches/ImageModel_TM which is the URL that should open up the default teachable machine URL from the ml5 account, for some reason the URL opens up to another user's project 😬

I think this may have to do with the way that the URL handling occurs on the p5 web editor... my hunch is that if we run our batch update/upload script and another project in the web editor database has the same name, then that existing project takes that named URL and not the typical id string maybe?

We definitely should try to figure out why this is occurring so that people using teachable machine don't get confused as to why they are being sent to this existing project!

Solution determined in https://github.com/ml5js/ml5-library/issues/927#issuecomment-622175396:

I noticed that the web editor is making an API request to https://editor.p5js.org/editor/projects/ImageModel_TM to fetch the sketch. So it would make sense that it would be finding the first sketch with the name ImageModel_TM.

I think the way to fix this would be to change the API request so that the username is in the request URL. This hadn't come up before since most sketches are resolved by ID, but by exposing some URL via slug this issue shows itself :). I think the URL should be changed to /<username>/projects/<slug>.

[joeyklee]

Hi @catarak - Thanks so much for making this issue + apologies for the delay in responding here.

If I can make a PR to address this, I'd be happy to do so, otherwise also willing to support in any way.

Thank you!

[catarak]

Just made a PR for this (#1409)! You want to test it?

[joeyklee]

@catarak - Without having tested the code, from a prelim scan, the code looks good to me and makes perfect sense. If you'd like a second pair of eyes, I'm happy to test out locally as well.

[joeyklee]

Hi @catarak - I've just gotten setup with the web editor again after about a year or so!

I have one quesiton regarding the const editorApiUrl = process.env.EDITOR_API_URL; env variable. If I'm testing locally, what should this API_URL point to by chance?

Thank you!

[andrewn]

👋 EDITOR_API_URL needs to be the URL of the editor instance you want to target, and /api/v1.

For testing locally, EDITOR_API_URL=http://localhost:8000/api/v1 should work.

[joeyklee]

@andrewn - Ah yes, this makes sense. Thanks for the clarification. And on the same note, just to confirm, I would then generate an testing API key through the editor account settings, correct?

[andrewn]

Yes, that's correct. Generate the API key from account settings, then you can use that to make authenticated requests as your user to the public API.

examples-ml5.js expects the API token to be available as the EDITOR_API_ACCESS_TOKEN env var.

[joeyklee]

Super - many thanks! Excellent work you are doing here! So much ♥️ for the web editor!

[joeyklee]

@andrewn - Just a couple more questions when you have a moment:
1. Is the API access token creation part of a different branch (currently I'm on develop)? In the current develop branch, the access token tab is not displayed.
- is this because my email has not been confirmed in the local development environment?
- or is this because the API feature is not yet part of the develop branch?

[andrewn]

@joeyklee The code's on develop but is hidden behind a feature toggle for now. Sorry, I forgot about that.

Add UI_ACCESS_TOKEN_ENABLED=true to your .env and then restart the server. The tab should then appear in the settings and you'll be able to create tokens (I hope 😅).

[joeyklee]

Hi @andrewn - nice one! That totally worked. Cool. Thanks for your super fast responses!