morning update before work

Author: jbilcke

src/engine/prompts/libraries.ts

@@ -9,12 +9,14 @@ export const CDN = 'https://cdn.skypack.dev/pin/'
 
 // note: the version are not randoly chose, those are the versions *suggested* by GPT-3
 export const libraries: Record<string, ModulePath> = {
+  /*
   lodash: {
     minimal: `Lodash (for data structure utilities)`,
     basic: `window._; // Lodash (for data structure utilities)`,
     prompt: `import _ from "${CDN}lodash.js";`,
     prod: `import _ from "${CDN}[email protected]/mode=imports,min/optimized/lodash.js";`,
   },
+  */
   /*
   canvasUtils: {
     prompt: `import { canvasUtils } from "${CDN}canvas-utils";`,

src/engine/prompts/script.ts

@@ -8,22 +8,12 @@ import { Instructions } from './types'
  */
 export const genericScript =
   (id: string) => (instructions: Instructions, html: string) =>
-    `Exercice: ${instructions.summary}:
+    `${instructions.summary}
 ${instructions.script.map((instruction) => `- ${instruction}`).join('\n')}
-
-Note: Here are some optional libraries that may or may not be used:
-${Object.values(libraries)
-  .filter(({ basic }) => basic)
-  .map(({ basic }) => `- ${basic}`)
-  .join('\n')}
-Attention: not all applications need all libraries. Games typically need Three.js, or pure canvas, maybe some Tone.js,
-but normal apps usually only need lodash and jQuery.
-
 Code formatting rules:
 - we use 1 space for indentation
-- all variables are compressed to max 3 characters
-- this is the final project, not a demo or example
-- there are no lines starting with "//", code comments are replaced by line returns
+- code is compressed, all JS variables have maximum 3 characters
+- this is not a tutorial or a demo, but the final project
 \`\`\`html
 ${
   // to save space, we only give essential info to the model

src/engine/prompts/tasks.ts

@@ -6,7 +6,6 @@ import { Instructions, TaskCategory, Tasks } from './types'
 export const tasksPrompt = (query: string) =>
   `You are a senior frontend engineer who needs to develop a web application using only HTML and Javascript.
 You are not going to code it yourself, instead you will write a valid spec of the app, in the form of JSON instructions.
-You do not need to use Three.js, lights, cameras.. if there is no mention of 3D or WebGL. For instance if the brief is a bout a 2D game, you can write the app logic using a 2D <canvas>.
 
 Here are some examples, but don't copy them verbatim! instead you need to adapt to the application brief!
 
@@ -18,7 +17,8 @@ Spec: {
   "text content": "Text should be straight to the point, it contains labels, buttons and links to execute various of the application",
   "content": "There is a table with editable cells, one line per type of ingredient: bread, sausage, mustard, picked onion, fried onion etc. Columns are: ingredient icon (emoji), name, price, number in stock, and number to order. We also see the total price of items to order",
   "interactivity": "There is an input text where we can enter the number of expected customers, and JS code to automatically adjust the number of items to order and the total price",
-  "images": "no image neeeded"
+  "js modules": "jQuery, oLdash",
+  "images": "no image neeeded",
 }
 
 Brief: A startup website called Aisy about a new cool SaaS product for creators to create AI movies.
@@ -28,21 +28,23 @@ Spec: {
   "art direction": "The design is fresh and sleek, with a sans serif font abd original colors on the theme of AI and movies (purple, black, grey, red)",
   "text content": "Page contains marketing content to explain why people should use Aisy to generate movies. Text is concise and to the point, with punch lines for titles. It should make us wish we purchased the product.",
   "interactivity": "no javascript needed",
+  "js modules": "no library available",
   "images": "The hero section image shows a woman using a computer in a coffeeshop. The page features multiple screenshots of the application, and also captures of examples movies generated with the tool (documentary, action movie..)"
 }
 
-Brief: A WebGL simulator to roll a dice. It has a simple design, with a dark background and yellow-orange interface. You can roll the dice by manually dragging it with the mouse.
+Brief: A simulator to roll a dice. It has a simple design, with a dark background and yellow-orange interface. You can roll the dice by manually dragging it with the mouse.
 Spec: {
-  "summary": "WebGL app to roll dices using the mouse",
+  "summary": "js app to roll dices using the mouse",
   "layout": "A simple dice-rolling application page, with a huge title and a large HTML canvas content",
   "art direction": "The design should evoke tabletop games or casino, with a green background. Dices might be white, grey, either square or cubes. Emojis are used for buttons.",
   "text content": "There should be some instructions about how to roll the dices, explanations on which buttons to click, and some tips",
   "interactivity": "The app should have JS code to roll the dice whenever we click, drag and release on the HTML canvas",
+  "js modules": "jQuery, Tone.js",
+  "images": "no image needed",
   "mouse events": "When clicking on a dice, it should move it, and releasing the mouse should play a small animation to roll the dice",
   "keyboard events": "no keyboard events needed",
   "sounds": "We may generate a sound using tone.js to simulate the sound of a dice being dropped",
   "application logic": "A dice is a random number generator so we should see number inside it or next to in (in the html page), to see which random number was chosen upon rolling",
-  "images": "no image needed",
   "animations": "when the mouse button is released, it should spin for a few seconds before slowing down",
   "constraints": "The dice should not be able to get out of the canvas edges"
 }
@@ -52,9 +54,10 @@ Spec: {
   "layout": "An encyclopedia-like layout, similar to scientific articles or Wikipedia. Images (if any) should be including within the body.",
   "art direction": "The design should be sober and elegant, without any emoji, using a serif font to make it looks like a book or printed article. Background should be white, foreground colors should be in shades of grey.",
   "text content": "The article should be written in a very rich and scientific tone, with a lot of details about the origins of the word asteroid, the history of their discovery, a scientific analysis of common asteroid composition, the impact on human society, the economics of asteroids, the risks associated with asteroids, and so on.",
-  "images": "the article should includes at least 5 or 6 pictures to illustration the diversity in asteroids compositions and shapes",
   "references": "The article should includes scientific or book references at the end, like for a scientific article",
-  "interactivity": "No javascript needed"
+  "interactivity": "No javascript needed",
+  "js modules": "jQuery, Three.js",
+  "images": "the article should includes at least 5 or 6 pictures to illustration the diversity in asteroids compositions and shapes"
 }
 
 Real work is starting now. Remember, you MUST respect the application brief carefully!

src/pages/content.tsx

@@ -121,7 +121,7 @@ function Content() {
               prompt,
               tasks,
               html: document.getElementById('html-tag')?.innerHTML || '',
-              script,
+              script: document.getElementById('script-tag')?.innerHTML || '',
               text,
               data,
               ...extra,

src/providers/openai/index.ts

@@ -154,9 +154,6 @@ ${output}`.trim()
 window.appData = {};
 var app = window.appData;
 ${output}`.trim()
-
-  console.log('raw script:', script)
-
   // for some reason GPT-3 sometimes generates JS code with ‘ instead of '
   script = script.replace('‘', "'")