Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add support for Latent Hyperlinks #9

Open
jbilcke opened this issue Dec 30, 2022 · 2 comments
Open

Add support for Latent Hyperlinks #9

jbilcke opened this issue Dec 30, 2022 · 2 comments

Comments

@jbilcke
Copy link
Owner

jbilcke commented Dec 30, 2022

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
Copy link

gragland commented Dec 30, 2022

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
Copy link
Owner Author

jbilcke commented Dec 30, 2022

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants