Add support for Latent Hyperlinks

[jbilcke]

Today when we generate a page, sometimes GPT-3 will add a link. However those are not supported yet.

To make it work, various solutions:

the simplest way could be to let GPT-3 generate the link with the correct path eg.

<a href="/content?prompt=some+prompt+generated+by+gpt+3">Click me</a>

or we could use an arial-label like explained here: https://www.w3.org/WAI/WCAG22/Techniques/aria/ARIA8

[gragland]

I wonder if you could have new pages re-use the existing page layout by telling it to update the previous code and replace the main content (header, nav, etc stay in place). Or maybe the initial prompt can tell it to identify a content area that should be changed by links. Love the idea of building a multi-page site just by clicking around.

[jbilcke]

That's a great idea to prevent the change in styling!

I think it could probably be instructed with something like "clicking on links should change the content section of the page using javascript"

FYI there is already a system in place to generate sub-HTML content (demo), but each subsequent call will change the inner design. Also, GPT-3 may or may not use it, it is a bit random today: it is in the prompt, but I didn't strongly mention this function in the instructions (I will do it in a near future).

/**
 * An asynchronous function that returns web content that matches a brief
 * 
 * It will be injected in a <div> somewhere in the page.
It generates valid HTML and JS, without any error and exception.
 * @param {string} brief instructions given in natural language
 * @param {Object} rules - some rules to control the look of the app
 * @param {string} rules.framework - The CSS class framework to use - you must only use this for styling
 * @param {string[]} rules.design - Mandatory rules of design: how to create the HTML layout, design patterns..
 * @param {string[]} rules.logic - Mandatory rules for JS code and app logic: how to manage variables, libraries..
 * @param {string[]} rules.images - Mandatory rules for defining how to write the alt= text of <img>: keywords to use, format..
 * @param {string[]} rules.direction - The general art direction and composition rules of both the web page and the images
 * @returns {Promise<string>} HTML and JS content (a root <div> and a <script>)
 */

import { generateWidget } from 'ai'

this sub-HTML generator could probably be replaced with instructions to only generate JSON