perchance

By "hide" I mean it shows a button in the top-right, which when clicked, shows the full header bar.

Examples:

• https://perchance.org/tags-and-header-meta-data-example

• https://perchance.org/header-background-image-example

Please let me know if you run into any issues or have feedback 🙏

Edit: Also, for people who know some JavaScript, you can use the public generator list API to get generators with specific tags like this:

let data = await fetch(`https://perchance.org/api/getGeneratorList?tags=foo`).then(r => r.json()); // returns generators tagged 'foo'
let data = await fetch(`https://perchance.org/api/getGeneratorList?tags=foo,bar`).then(r => r.json()); // foo AND bar

I think I got to the root of what was causing this. If anyone is still having issues signing up, please comment here.

See plugin page for details and examples:

https://perchance.org/favicon-plugin

As was noted on the plugin page, this was on the roadmap, but not yet supported. I've added support now thanks to a prod from @wthit56 so you can treat it just like you would a normal 'static' import.

One nice use case that this properly/robustly unlocks is the situation where you e.g. have a plugin that you've made, and you want to import the comments plugin so people can chat about your plugin and ask questions, but you don't want to cause all importers of your plugin to automatically get the comments plugin as a dependency.

If you just dynamically import the plugin in your HTML panel, then importers of your plugin won't get the comments plugin as a dependency. Example:

https://perchance.org/import-only-in-html-panel-no-dependency-example#edit

(Reminder that, as mentioned on the dynamic import plugin page, you should only use the dynamic import plugin in very particular scenarios, like this one, or e.g. when you have hundreds of imports but only a subset of those imports tend to get used by any particular user of your generator. Regular imports will generally allow for much faster generator loading, since all the data is preloaded.)

As usual, the Chrome team is leading the charge on some exciting new web platform tech. The goal is to release some prototypes and eventually write up the feature as a browser standard that would make its way into all browsers (i.e. not just Chrome).

The point is, it'd run completely on-device (no cloud access, works offline), so it'd be a very small model, but would likely still be smart enough for a lot of tasks - e.g. summarizing text, converting a list of words into a grammatically correct sentence/description, guessing an appropriate emotion based on some character dialogue, etc.

Article: https://developer.chrome.com/docs/ai/built-in

The key problem with these text generation models is how massive they are. They're so big that they could literally fill your entire device (for smart phones and cheap laptops, at least), and would bloat the initial browser download time from a few minutes to a few days for a lot of people.

Still, smaller models are getting surprisingly smart, and while they're still several times the size of the actual browser download itself, this download can be done in the background.

Either way, I'm excited about this new direction, because there are lots of tasks that don't require an extremely smart model, and so it's overkill to use /ai-text-plugin, especially since it means ads will be shown for non-logged-in users.

One problem that I do anticipate, is that the models will be extremely "safety-oriented", meaning refusal to even generate stuff like violence in a DnD fantasy adventure, and stuff like that. I know from experience that Google's Gemini models have false-positive-refusal rates that almost make them unusable even for many sfw tasks. There is a mention of LoRA fine-tuning in the article, which is very exciting and might help with that. If you're a web dev, you can use the links on the page to test their prototypes and give constructive+professional feedback on them. It'd be good for the health of the web platform to have some of the feedback be for use-cases like Perchance, and not just e.g. business applications.

Tangentially, builders here may also be interested in Transformers.js which allows you to run AI models in your browser. Ad-free AI plugins could already be created using this project, although for a lot of models the download times are a bit too long, and processing times also a bit too long (for mobile devices especially). Still, the situation is improving quite rapidly. /ai-character-chat already uses Transformers.js for text embedding.

It basically allows you to specify to different colors - one for if the user's device is in light mode, and the other if they're in dark mode. Here's an example gen showing how to use it:

https://perchance.org/css-light-dark-test#edit

<style>
  html { color-scheme: light dark; } /* this line is important! otherwise the code below won't work */
  
  body {
    background: light-dark(lightgrey, black);
  }
</style>

<p style=" color:light-dark(blue,lime); ">this text will be blue in light mode and lime in dark mode</p>

Note that this is a very new browser feature, and a lot of people are on older browser versions, so for at least the next few months you should probably still add a default color before your light-dark color like color:blue; color:light-dark(blue,lime);. That way the older browsers will still get the right colors, but in the newer browsers the light-dark color will override the default color.

I know there are a few people here who enjoy archiving - e.g. https://perchance.org/vionet20-abulafia-conversions

So I figured I'd mention this which I just stumbled across - from this post:

https://www.stevensavage.com/blog/2023/09/seventh-sanctum-next.html

I’m going to start making my generator notes and data available to you. The data is pretty easy to just bundle up, but I also want to make some notes on how to use it. I’ll make this very visible on the site so you can just download it and go do your own thing.

Replicate my generators. Enhance them. Build your own. Learn from them. Whatever works for you.

I know I can’t maintain the site forever – if nothing else, I won’t be around forever.

Perchance, on the other hand is going to be around until the heat death of the universe, so if anyone wants to help Steven preserve his work via Perchance versions of his gens, here's the data:

https://www.seventhsanctum.com/archive/sanctumdata.zip

If you work out the conversion rules, I or someone else can write the JavaScript code for a mostly-automated converter.

First, some context:

When you call list.evaluateItem, it evaluates the square and curly blocks of course, but it also removes backslashes that were before any square or curly blocks. Backslashes are used to tell the Perchance engine that a square or curly bracket should be interpreted 'literally' - i.e. not as a character with a special meaning.

So, for example if we call evaluateItem on a list item like this: {1|2|3} \[cool\] the output will be something like 2 [cool]. If we didn't put the backslash before the square bracket, the Perchance engine would look for a variable/list called "cool" and if it didn't find one, you'd get an error. The backslash says "treat this as a normal/literal square bracket - not a fancy Perchance thing".

Now to the point of this post:

Notice how in the above example of using evaluateItem on a list, the output (2 [cool]) has the backslashes removed? As previously mentioned, that is the correct/desired behavior. But I just found a bug where if you call evaluateItem on a string like {1|2|3} \[cool\] it would output 2 \[cool\] instead of 2 [cool].

I've just fixed this bug - so the backslashes are now removed (just like when using evaluateItem on lists and list items), but I've made it so the bugfix is only applied when you next save your generator - just in case there are any issues with the fix. So please go ahead and save your generator, and if you run into any issues, even if you fixed them, please let me know in the comments. Any examples of issues will help me build an understanding of the effect of this change.

Thanks!

This likely won't be relevant to a lot of devs here, because the remember plugin does the job fine in most cases, but:

Here's a normal text input (id is not needed for this example, but is almost always needed so adding it here):

<input id="thingyInput">

And here's one which remembers what you type into it even after page refresh:

<input id="thingyInput" oninput="localStorage.thingy=this.value" value="[localStorage.thingy || '']">

Of course, the remember-plugin can do this for you, but I often find myself reaching for the above pattern for its simplicity.

localStorage is what the remember-plugin uses behind the scenes - whatever you store in it will be persisted even after page refresh. It's a built-in browser/JavaScript feature - not something that's specific to Perchance.

The || '' in [localStorage.thingy || ''] means or ''. In other words, it means or output nothing. If you want a default value for when the user loads the page for the first time, you could write [localStorage.thingy || 'blah'] which means "use whatever is in localStorage.thingy if it exists, otherwise use 'blah'"

(To be clear, since I realized just now that to non-devs the title might be misleading: This feature does not add AI bots to your comments plugin by default! The comments plugin and the AI plugins are completely distinct. But plugins can of course interact with one another, and this new feature of the comments plugin allows for some interesting interactions - the title just gives one of those as a fun example.)

You can now "programmatically" submit comments on behalf of the user, and you can also get/set the contents of the input text box.

If a comment was programmatically submitted, then a little icon is shown on the comment to indicate that the user didn't personally click the submit button.

This feature, used alongside the onComment/onLoad feature can e.g. be used to create an AI bot that "lives in" your comments box, or create a multiplayer game of chess, or maybe add an auto-error-report log using window.onerror, and so on.

Edit: Also, you can now use c.comments to get an array/list of the comments - but make sure to do that only after onLoad has triggered, since c.comments only returns loaded comments - so if comments box hasn't loaded yet, you'll get an empty array.

Let me know if you find any bugs/issues!

https://perchance.org/programmatic-get-set-submit-comments-plugin-example#edit

I'll probably create a little AI bot example at some point, but you're welcome to beat me to it! (Please post it here on lemmy if you do)

The comments plugin has a new feature that allows you to access the "stream" of comments as they are submitted to your comments box. So now you can "do stuff" on your page in response to comments that people make.

Title is (mostly) a joke, but it wouldn't be toooo hard to create simple multiplayer games like chess or little point-and-click worlds that people can play on your page via the comments (just need to ignore invalid user moves/inputs based on the rules of the game you're making).

I expect a few perchance devs to play around with some "mad science" along those lines, but for most people, probably the most useful thing here is that it allows you to completely customize the way comments are displayed. Including e.g. adding avatar pics to comments, changing the background image of every comment based on the keywords in it, making confetti fly across the page (for everyone) when someone says a secret/"easter egg" keyword, and so on.

Examples:

• Display the most recent comment in bold at the top of the page: https://perchance.org/simple-comments-plugin-oncomment-example#edit
• Fully custom comments feed/style: https://perchance.org/comments-plugin-oncomment-example#edit