up

public/markdown-to-html.js

@@ -0,0 +1,210 @@
+;(function() { "use strict";
+
+var
+	/**
+	 * The parsed output string, in HTML format.
+	 * @type {String}
+	 */
+	output = "",
+
+	BLOCK = "block",
+	INLINE = "inline",
+
+	/**
+	 * Used to attach MarkdownToHtml object to `window` in browser
+	 * context, or as an AMD module where appropriate.
+	 * @type {Object}
+	 */
+	exports,
+
+	/**
+	 * An array of parse rule descriptor objects. Each object has two keys;
+	 * pattern (the RegExp to match), and replace (the replacement string or
+	 * function to execute).
+	 * @type {Array}
+	 */
+	parseMap = [
+		{
+			// <h1>
+			// A line starting with 1-6 hashes.
+			pattern: /(#{1,6})([^\n]+)/g,
+			replace: "<h$L1>$2</h$L1>",
+			type: BLOCK,
+		},
+		{
+			// <p>
+			// Any line surrounded by newlines that doesn't start with
+			// an HTML tag, asterisk or numeric value with dot following.
+			pattern: /\n(?!<\/?\w+>|\s?\*|\s?[0-9]+|>|\&gt;|-{5,})([^\n]+)/g,
+			replace: "<p>$1</p>",
+			type: BLOCK,
+		},
+		{
+			// <blockquote>
+			// A greater-than character preceding any characters.
+			pattern: /\n(?:&gt;|\>)\W*(.*)/g,
+			replace: "<blockquote><p>$1</p></blockquote>",
+			type: BLOCK,
+		},
+		{
+			// <ul>
+			//
+			pattern: /\n\s?\*\s*(.*)/g,
+			replace: "<ul>\n\t<li>$1</li>\n</ul>",
+			type: BLOCK,
+		},
+		{
+			// <ol>
+			//
+			pattern: /\n\s?[0-9]+\.\s*(.*)/g,
+			replace: "<ol>\n\t<li>$1</li>\n</ol>",
+			type: BLOCK,
+		},
+		{
+			// <strong>
+			// Either two asterisks or two underscores, followed by any
+			// characters, followed by the same two starting characters.
+			pattern: /(\*\*|__)(.*?)\1/g,
+			replace: "<strong>$2</strong>",
+			type: INLINE,
+		},
+		{
+			// <em>
+			// Either one asterisk or one underscore, followed by any
+			// characters, followed by the starting character.
+			pattern: /(\*|_)(.*?)\1/g,
+			replace: "<em>$2</em>",
+			type: INLINE,
+		},
+		{
+			// <a>
+			// Not starting with an exclamation mark, square brackets
+			// surrounding any characters, followed by parenthesis surrounding
+			// any characters.
+			pattern: /([^!])\[([^\[]+)\]\(([^\)]+)\)/g,
+			replace: "$1<a href=\"$3\">$2</a>",
+			type: INLINE,
+		},
+		{
+			// <img>
+			// Starting with an exclamation mark, then followed by square
+			// brackets surrounding any characters, followed by parenthesis
+			// surrounding any characters.
+			pattern: /!\[([^\[]+)\]\(([^\)]+)\)/g,
+			replace: "<img src=\"$2\" alt=\"$1\" />",
+			type: INLINE,
+		},
+		{
+			// <del>
+			// Double tilde characters surrounding any characters.
+			pattern: /\~\~(.*?)\~\~/g,
+			replace: "<del>$1</del>",
+			type: INLINE,
+		},
+		{
+			// <code>
+			//
+			pattern: /`(.*?)`/g,
+			replace: "<code>$1</code>",
+			type: INLINE,
+		},
+		{
+			// <hr>
+			//
+			pattern: /\n-{5,}\n/g,
+			replace: "<hr />",
+			type: BLOCK,
+		},
+	],
+$$;
+
+/**
+ * Self-executing function to handle exporting the parse function for
+ * external use.
+ */
+(function go() {
+	// Export AMD module if possible.
+	if(typeof module !== "undefined"
+	&& typeof module.exports !== "undefined") {
+		exports = module.exports;
+	}
+	// Otherwise check for browser context.
+	else if(typeof window !== "undefined") {
+		window.MarkdownToHtml = {};
+		exports = window.MarkdownToHtml;
+	}
+
+	exports.parse = parse;
+})();
+
+/**
+ * Parses a provided Markdown string into valid HTML.
+ *
+ * @param  {string} string Markdown input for transformation
+ * @return {string}        Transformed HTML output
+ */
+function parse(string) {
+	// Pad with newlines for compatibility.
+	output = "\n" + string + "\n";
+
+	parseMap.forEach(function(p) {
+		// Replace all matches of provided RegExp pattern with either the
+		// replacement string or callback function.
+		output = output.replace(p.pattern, function() {
+			// console.log(this, arguments);
+			return replace.call(this, arguments, p.replace, p.type);
+		});
+	});
+
+	// Perform any post-processing required.
+	output = clean(output);
+	// Trim for any spaces or newlines.
+	output = output.trim();
+	// Tidy up newlines to condense where more than 1 occurs back to back.
+	output = output.replace(/[\n]{1,}/g, "\n");
+	return output;
+}
+
+function replace(matchList, replacement, type) {
+	var
+		i,
+	$$;
+
+	for(i in matchList) {
+		if(!matchList.hasOwnProperty(i)) {
+			continue;
+		}
+
+		// Replace $n with the matching regexp group.
+		replacement = replacement.split("$" + i).join(matchList[i]);
+		// Replace $Ln with the matching regexp group's string length.
+		replacement = replacement.split("$L" + i).join(matchList[i].length);
+	}
+
+	if(type === BLOCK) {
+		replacement = replacement.trim() + "\n";
+	}
+
+	return replacement;
+}
+
+function clean(string) {
+	var cleaningRuleArray = [
+		{
+			match: /<\/([uo]l)>\s*<\1>/g,
+			replacement: "",
+		},
+		{
+			match: /(<\/\w+>)<\/(blockquote)>\s*<\2>/g,
+			replacement: "$1",
+		},
+	];
+
+	cleaningRuleArray.forEach(function(rule) {
+		string = string.replace(rule.match, rule.replacement);
+	});
+
+	return string;
+}
+
+})();

src/docker.mts

@@ -0,0 +1,59 @@
+export const dockerfile = `
+FROM node:18-alpine AS base
+
+# Install dependencies only when needed
+FROM base AS deps
+# Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.
+RUN apk add --no-cache libc6-compat
+WORKDIR /app
+
+# Install dependencies based on the preferred package manager
+COPY package.json package-lock.json* ./
+RUN npm install
+
+# Uncomment the following lines if you want to use a secret at buildtime, 
+# for example to access your private npm packages
+# RUN --mount=type=secret,id=HF_EXAMPLE_SECRET,mode=0444,required=true \
+#     $(cat /run/secrets/HF_EXAMPLE_SECRET)
+
+# Rebuild the source code only when needed
+FROM base AS builder
+WORKDIR /app
+COPY --from=deps /app/node_modules ./node_modules
+COPY . .
+
+# Next.js collects completely anonymous telemetry data about general usage.
+# Learn more here: https://nextjs.org/telemetry
+# Uncomment the following line in case you want to disable telemetry during the build.
+# ENV NEXT_TELEMETRY_DISABLED 1
+
+RUN npm run build
+
+# Production image, copy all the files and run next
+FROM base AS runner
+WORKDIR /app
+
+ENV NODE_ENV production
+# Uncomment the following line in case you want to disable telemetry during runtime.
+# ENV NEXT_TELEMETRY_DISABLED 1
+
+RUN addgroup --system --gid 1001 nodejs
+RUN adduser --system --uid 1001 nextjs
+
+COPY --from=builder /app/public ./public
+
+# Automatically leverage output traces to reduce image size
+# https://nextjs.org/docs/advanced-features/output-file-tracing
+COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
+COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
+COPY --from=builder --chown=nextjs:nodejs /app/.next/cache ./.next/cache
+# COPY --from=builder --chown=nextjs:nodejs /app/.next/cache/fetch-cache ./.next/cache/fetch-cache
+
+USER nextjs
+
+EXPOSE 3000
+
+ENV PORT 3000
+
+CMD ["node", "server.js"]
+`

src/generateFiles.mts

@@ -8,12 +8,16 @@ import { getReactApp } from './getReactApp.mts'
 import { isPythonAppPrompt } from './isPythonAppPrompt.mts'
 import { isReactAppPrompt } from './isReactAppPrompt.mts'
 
-export const generateFiles = async (prompt: string, token: string) => {
+export const generateFiles = async (
+  prompt: string,
+  token: string,
+  onProgress: (chunk: string) => boolean
+  ) => {
   if (`${prompt}`.length < 2) {
     throw new Error(`prompt too short, please enter at least ${prompt} characters`)
   }
 
-  const { prefix, instructions } =
+  const { prefix, files, instructions } =
     isPythonAppPrompt(prompt)
     ? getPythonApp(prompt)
     : isReactAppPrompt(prompt)
@@ -22,11 +26,15 @@ export const generateFiles = async (prompt: string, token: string) => {
 
   const inputs = createLlamaPrompt(instructions) + "\nSure! Here are the source files:\n" + prefix
 
-let tutorial = prefix
+  let isAbortedOrFailed = false
+
+  let tutorial = prefix
 
   try {
     const hf = new HfInference(token)
 
+    onProgress(prefix)
+
     for await (const output of hf.textGenerationStream({
       // model: "tiiuae/falcon-180B-chat",
       model: "codellama/CodeLlama-34b-Instruct-hf",
@@ -49,25 +57,39 @@ let tutorial = prefix
       tutorial += output.token.text
       process.stdout.write(output.token.text)
       // res.write(output.token.text)
-      if (tutorial.includes('<|end|>')
+      if (
+        tutorial.includes('<|end|>')
+      || tutorial.includes('</s>')
       || tutorial.includes('[ENDINSTRUCTION]')
       || tutorial.includes('[/TASK]')
       || tutorial.includes('<|assistant|>')) {
+        tutorial = tutorial.replaceAll("</s>", "").replaceAll("<|end|>", "")
+        break
+      }
+      if (!onProgress(output.token.text)) {
+        console.log("aborting the LLM generation")
+        isAbortedOrFailed = true
         break
       }
     }
 
   } catch (e) {
+    isAbortedOrFailed = true
     console.log("failed:")
     console.log(e)
   } 
   
+  if (isAbortedOrFailed) {
+    console.log("the request was aborted, so we return an empty list")
+    return []
+  }
+
   console.log("analyzing the generated instructions..")
-  const files = parseTutorial(tutorial).map(({ filename, content }) => ({
-    path: `${filename || ""}`.trim().replace(" ", ""),
+  const generatedFiles = parseTutorial(tutorial).map(({ filename, content }) => ({
+    path: `${filename || ""}`.trim().replaceAll(" ", ""),
     content: `${content || ""}`
   } as RepoFile))
   .filter(res => res.path.length && res.content.length)
 
-  return files
+  return [...generatedFiles, ...files]
 }

src/getPythonApp.mts

@@ -37,5 +37,5 @@ The app is about: ${prompt}`,
     }
   ]
 
-  return { prefix, instructions }
+  return { prefix, files: [], instructions }
 }

src/getReactApp.mts

@@ -1,8 +1,15 @@
 import { alpine } from "./alpine.mts"
 import { daisy } from "./daisy.mts"
+import { dockerfile } from "./docker.mts"
 
 export function getReactApp(prompt: string) {
-  const prefix = `# In src/main.tsx:\n\`\`\``
+  const prefix = `# In src/pages/index.tsx:\n\`\`\``
+  const files = [
+    {
+      path: `Dockerfile`,
+      content: dockerfile,
+    }
+  ]
   const instructions = [
     {
       role: "system",
@@ -12,34 +19,14 @@ export function getReactApp(prompt: string) {
     },
     {
       role: "user",
-      content: `Please write, file by file, the source code for a Next 12 application.
-
-The app should be buildable when we call:
-
+      content: `Think step by step, you got this! Please write, file by file, the source code for a Next 12 application.
+The app should be buildable when we run this in command line:
 \`\`\`
 npm install
 npm run start
 \`\`\`
 
-And installable using a Dockerfile. Here is an example:
-
-\`\`\`
-FROM node:18
-RUN useradd -o -u 1000 user
-USER user
-ENV HOME=/home/user \
-PATH=/home/user/.local/bin:$PATH
-WORKDIR $HOME/app
-COPY --chown=user package*.json $HOME/app
-RUN npm install
-COPY --chown=user . $HOME/app
-EXPOSE 7860
-CMD [ "npm", "run", "start" ]
-\`\`\`
-
-Don't forget to write a valid package.json file!
-
-Don't forget to write a README.md with the following header:
+The project will be deployed to Hugging Face, so it must include a README.md with the following YAML header:
 \`\`\`
 ---
 license: apache-2.0
@@ -51,11 +38,15 @@ colorTo: green
 ---
 \`\`\`
 
-Of course, you MUST replace <APPNAME> with a good app name!
+Important rules:
+- you need to leave: "sdk: docker" as-is, but replace: "<APPNAME>" with an actual name, please.
+- Don't forget to write a valid package.json file!
+
+The app is about: ${prompt}.
 
-The app is about: ${prompt}`,
+Remember: don't forget to edit the README.me and a package.json file!`,
     }
   ]
 
-  return { prefix, instructions }
+  return { prefix, files, instructions }
 }

src/getWebApp.mts

@@ -49,5 +49,5 @@ The app is about: ${prompt}`,
     }
   ]
 
-  return { prefix, instructions }
+  return { prefix, files: [], instructions }
 }

src/index.mts

@@ -53,12 +53,33 @@ app.get('/app', async (req, res) => {
     return
   }
 
+  /*
+  res.write(`<!doctype html>
+  <script src="/markdown-to-html.js"></script>
+  <div id="formatted-markdown"></div>
+  <script>
+  setInterval(
+    function fn() {
+      try {
+        var input = document.getElementById("raw-markdown-stream")
+        var output = document.getElementById("formatted-markdown")
+        output.innerHTML = MarkdownToHtml.parse(input.innerHTML)
+      } catch (err) {
+        console.error(err)
+      }
+    },
+    1000
+  )
+  </script>
+  <div id="raw-markdown-stream" style="display: none">
+  `)
+  */
+
   const id = `${pending.total++}`
   console.log(`new request ${id}`)
 
   pending.queue.push(id)
 
-
   req.on('close', function() {
     endRequest(id, 'browser asked to end the connection')
   })
@@ -72,18 +93,31 @@ app.get('/app', async (req, res) => {
   let files = []
 
   while (nbAttempts-- > 0) {
-    files = await generateFiles(`${req.query.prompt || ""}`, token)
+    files = await generateFiles(
+      `${req.query.prompt || ""}`,
+      token,
+      (chunk: string) => {
+        res.write(chunk)
+
+        // return true here as long as our request is still valid
+        // but if the user disconnected, the id will be removed from the queue,
+        // and we will return false, indicating to generateFiles that we should abort
+        return pending.queue.includes(id)
+      })
     if (files.length) {
       console.log(`seems like we have ${files.length} files`)
       break
     }
   }
 
-  console.log("files:", JSON.stringify(files, null, 2))
+  if (files.length > 0) {
+    console.log("files:", JSON.stringify(files, null, 2))
 
-  await createSpace(files, token)
+    await createSpace(files, token)
+  }
 
-  res.write(JSON.stringify(files, null, 2))
+  // res.write(JSON.stringify(files, null, 2))
+  // res.write(`</div>`)
   res.end()
 })
 

tsconfig.json

@@ -6,7 +6,7 @@
     "module": "nodenext",
     "noEmit": true,
     "allowImportingTsExtensions": true,
-    "target": "es2017"
+    "target": "es2022"
   },
   "include": ["**/*.ts", "**/*.mts"],
 }