Upload 20 files

alpine.mts

@@ -0,0 +1,220 @@
+
+interface FeatureAPI {
+  title: string
+  description: string
+  pattern: string
+}
+
+const getPromptFromFeatures = (feats: FeatureAPI[]) =>
+  feats.map(({ title, description, pattern }) => `## "${title}": ${description}.\nExample: \`${pattern}\``).join("\n")
+
+
+export const attributes: FeatureAPI[] = [
+  {
+    title: "x-data",
+    description: "Declare a new Alpine component and its data for a block of HTML",
+    pattern:
+`<div x-data="{ open: false }">
+...
+</div>`
+  },
+  {
+    title: "x-bind",
+    description: "Dynamically set HTML attributes on an element",
+    pattern:
+`<div x-bind:class="! open ? 'hidden' : ''">
+...
+</div>`
+  },
+  {
+    title: "x-on",
+    description: "Listen for browser events on an element",
+    pattern:
+`<button x-on:click="open = ! open">
+Toggle
+</button>`
+  },
+  {
+    title: "x-text",
+    description: "Set the text content of an element",
+    pattern:
+`<div>
+Copyright ©
+
+<span x-text="new Date().getFullYear()"></span>
+</div>`
+  },
+  {
+    title: "x-html",
+    description: "Set the inner HTML of an element",
+    pattern:
+`<div x-html="(await axios.get('/some/html/partial')).data">
+...
+</div>`
+  },
+  {
+    title: "x-model",
+    description: "Synchronize a piece of data with an input element",
+    pattern:
+`<div x-data="{ search: '' }">
+<input type="text" x-model="search">
+
+Searching for: <span x-text="search"></span>
+</div>`
+  },
+  {
+    title: "x-show",
+    description: "Toggle the visibility of an element",
+    pattern:
+`<div x-show="open">
+...
+</div>`
+  },
+  {
+    title: "x-transition",
+    description: "Transition an element in and out using CSS transitions",
+    pattern:
+`<div x-show="open" x-transition>
+...
+</div>`
+  },
+  {
+    title: "x-for",
+    description: "Repeat a block of HTML based on a data set",
+    pattern:
+`<template x-for="post in posts">
+<h2 x-text="post.title"></h2>
+</template>`
+  },
+  {
+    title: "x-if",
+    description: "Conditionally add/remove a block of HTML from the page entirely",
+    pattern:
+`<template x-if="open">
+<div>...</div>
+</template>`
+  },
+  {
+    title: "x-init",
+    description: "Run code when an element is initialized by Alpine",
+    pattern:
+`<div x-init="date = new Date()"></div>`
+  },
+  {
+    title: "x-effect",
+    description: "Execute a script each time one of its dependencies change",
+    pattern:
+`<div x-effect="console.log('Count is '+count)"></div>`
+  },
+  {
+    title: "x-ref",
+    description: "Reference elements directly by their specified keys using the $refs magic property",
+    pattern:
+`<input type="text" x-ref="content">
+ 
+<button x-on:click="navigator.clipboard.writeText($refs.content.value)">
+  Copy
+</button>`
+  },
+  {
+    title: "x-cloak",
+    description: "Hide a block of HTML until after Alpine is finished initializing its contents",
+    pattern:
+`<div x-cloak>
+...
+</div>`
+  },
+  {
+    title: "x-ignore",
+    description: "Prevent a block of HTML from being initialized by Alpine",
+    pattern:
+`<div x-ignore>
+...
+</div>`
+  },
+]
+
+export const attributesPrompt = getPromptFromFeatures(attributes)
+
+export const properties: FeatureAPI[] = [
+  {
+    title: "$store",
+    description: "Access a global store registered using Alpine.store(...)",
+    pattern: `<h1 x-text="$store.site.title"></h1>`
+  },
+  {
+    title: "$el",
+    description: "Reference the current DOM element",
+    pattern:`<div x-init="new Pikaday($el)"></div>`
+  },
+  {
+    title: "$dispatch",
+    description: "Dispatch a custom browser event from the current element",
+    pattern:
+`<div x-on:notify="...">
+  <button x-on:click="$dispatch('notify')">...</button>
+</div>`
+  },
+  {
+    title: "$watch",
+    description: "Watch a piece of data and run the provided callback anytime it changes",
+    pattern:
+`<div x-init="$watch('count', value => {
+  console.log('count is ' + value)
+})">...</div>`
+  },
+  {
+    title: "$refs",
+    description: "Reference an element by key (specified using x-ref)",
+    pattern:
+`<div x-init="$refs.button.remove()">
+<button x-ref="button">Remove Me</button>
+</div>`
+  },
+  {
+    title: "$nextTick",
+    description: "Wait until the next \"tick\" (browser paint) to run a bit of code",
+    pattern:
+`<div
+x-text="count"
+x-text="$nextTick(() => {"
+  console.log('count is ' + $el.textContent)
+})
+>...</div>`
+  },
+]
+
+export const propertiesPrompt = getPromptFromFeatures(properties)
+
+export const methods: FeatureAPI[] = [
+  {
+    title: "Alpine.data",
+    description: "Reuse a data object and reference it using x-data",
+    pattern:
+`<div x-data="dropdown">
+...
+</div>`
+  },
+  {
+    title: "Alpine.store",
+    description: "Declare a piece of global, reactive, data that can be accessed from anywhere using $store",
+    pattern:
+`<button @click="$store.notifications.notify('...')">
+Notify
+</button>
+
+...
+
+Alpine.store('notifications', {
+items: [],
+
+notify(message) { 
+  this.items.push(message)
+}
+})`
+  },
+]
+
+export const methodsPrompt = getPromptFromFeatures(methods)
+
+export const alpine = "# Alpine.js docs\n"+ attributesPrompt // + propertiesPrompt + methodsPrompt

createLlamaPrompt.mts

@@ -0,0 +1,25 @@
+// adapted from https://huggingface.co/TheBloke/Llama-2-13B-chat-GPTQ/discussions/5 
+export function createLlamaPrompt(messages: Array<{ role: string, content: string }>) {
+  const B_INST = "[INST]", E_INST = "[/INST]";
+  const B_SYS = "<<SYS>>\n", E_SYS = "\n<</SYS>>\n\n";
+  const BOS = "<s>", EOS = "</s>";
+  const DEFAULT_SYSTEM_PROMPT = "You are a helpful, respectful and honest assistant. Always answer as helpfully as possible, while being safe. Please ensure that your responses are socially unbiased and positive in nature. If a question does not make any sense, or is not factually coherent, explain why instead of answering something not correct. If you don't know the answer to a question, please don't share false information.";
+
+  if (messages[0].role != "system"){
+      messages = [
+          {role: "system", content: DEFAULT_SYSTEM_PROMPT}
+      ].concat(messages);
+  }
+  messages = [{role: messages[1].role, content: B_SYS + messages[0].content + E_SYS + messages[1].content}].concat(messages.slice(2));
+
+  let messages_list = messages.map((value, index, array) => {
+      if (index % 2 == 0 && index + 1 < array.length){
+          return `${BOS}${B_INST} ${array[index].content.trim()} ${E_INST} ${array[index+1].content.trim()} ${EOS}`
+      }
+      return '';
+  })
+
+  messages_list.push(`${BOS}${B_INST} ${messages[messages.length-1].content.trim()} ${E_INST}`)
+
+  return messages_list.join('');
+}

createSpace.mts

@@ -0,0 +1,60 @@
+import { v4 as uuidv4 } from "uuid"
+import { createRepo, uploadFiles, whoAmI } from "@huggingface/hub"
+import type { RepoDesignation, Credentials } from "@huggingface/hub"
+import slugify from "slugify"
+
+import { RepoFile } from "./types.mts"
+
+export const createSpace = async (files: RepoFile[], token: string) => {
+
+  const credentials: Credentials = { accessToken: token }
+
+  const { name: username } = await whoAmI({ credentials })
+
+  let slug = ``
+  let title = ``
+  const readme = files.find(p => p.path === "README.md")
+  try {
+    const matches = readme.content.match(/title: ([^\n]+)\n/)
+    title = matches?.[1] || ""
+    slug = (slugify as any)(title) as string
+    if (!slug.length) {
+      throw new Error("sluggification failed")
+    }
+  } catch (err) {
+    slug = `sf-${uuidv4().slice(0, 3)}`
+  }
+
+  const repoName = `${username}/${slug}`
+
+  const repo: RepoDesignation = { type: "space", name: repoName }
+  console.log(`Creating space at ${repoName}${title ? ` (${title})` : ''}`)
+
+  await createRepo({
+    repo,
+    credentials,
+    license: "mit",
+    sdk:
+      files.some(file => file.path.includes("Dockerfile"))
+        ? "docker"
+      : files.some(file => file.path.includes("app.py"))
+        ? "streamlit"
+        : "static" // "streamlit" | "gradio" | "docker" | "static";
+  });
+
+  console.log("uploading files..")
+  await uploadFiles({
+    repo,
+    credentials,
+    files: files.map(file => ({
+      path: file.path,
+      content: new Blob([ file.content ])
+    })),
+  });
+
+  console.log("upload done!")
+
+  // TODO we should keep track of the repo and delete it after 30 min
+  // or delete it if we reached 20 repos
+  // await deleteRepo({ repo, credentials })
+}

daisy.mts

@@ -0,0 +1,7 @@
+export const daisy = `# DaisyUI docs
+## To create a nice layout, wrap each article in:
+<article class="prose"></article>
+## Use appropriate CSS classes
+<button class="btn ..">
+<table class="table ..">
+<footer class="footer ..">`

dl.sh

@@ -0,0 +1,38 @@
+#!/bin/bash
+
+# Directory to save the downloaded files
+destination_dir="/Users/a2014/src"
+
+# URLs of the files to be downloaded
+file_urls=(
+    "https://huggingface.co/spaces/acecalisto3/ai-app-factory/resolve/main/src/alpine.mts?download=true"
+    "https://huggingface.co/spaces/acecalisto3/ai-app-factory/resolve/main/src/createLlamaPrompt.mts?download=true"
+    "https://huggingface.co/spaces/acecalisto3/ai-app-factory/resolve/main/src/createSpace.mts?download=true"
+    "https://huggingface.co/spaces/acecalisto3/ai-app-factory/resolve/main/src/daisy.mts?download=true"
+    "https://huggingface.co/spaces/acecalisto3/ai-app-factory/resolve/main/src/docker.mts?download=true"
+    "https://huggingface.co/spaces/acecalisto3/ai-app-factory/resolve/main/src/generateFiles.mts?download=true"
+    "https://huggingface.co/spaces/acecalisto3/ai-app-factory/resolve/main/src/getGradioApp.mts?download=true"
+    "https://huggingface.co/spaces/acecalisto3/ai-app-factory/resolve/main/src/getReactApp.mts?download=true"
+    "https://huggingface.co/spaces/acecalisto3/ai-app-factory/resolve/main/src/getStreamlitApp.mts?download=true"
+    "https://huggingface.co/spaces/acecalisto3/ai-app-factory/resolve/main/src/getWebApp.mts?download=true"
+    "https://huggingface.co/spaces/acecalisto3/ai-app-factory/resolve/main/src/gradioDoc.mts?download=true"
+    "https://huggingface.co/spaces/acecalisto3/ai-app-factory/resolve/main/src/index.mts?download=true"
+    "https://huggingface.co/spaces/acecalisto3/ai-app-factory/resolve/main/src/isPythonOrGradioAppPrompt.mts?download=true"
+    "https://huggingface.co/spaces/acecalisto3/ai-app-factory/resolve/main/src/isReactAppPrompt.mts?download=true"
+    "https://huggingface.co/spaces/acecalisto3/ai-app-factory/resolve/main/src/isStreamlitAppPrompt.mts?download=true"
+    "https://huggingface.co/spaces/acecalisto3/ai-app-factory/resolve/main/src/parseTutorial.mts?download=true"
+    "https://huggingface.co/spaces/acecalisto3/ai-app-factory/resolve/main/src/streamlitDoc.mts?download=true"
+    "https://huggingface.co/spaces/acecalisto3/ai-app-factory/resolve/main/src/types.mts?download=true"
+    "https://huggingface.co/spaces/acecalisto3/ai-app-factory/resolve/main/src/typescript.mts?download=true"
+)
+
+# Create the destination directory if it doesn't exist
+mkdir -p "$destination_dir"
+
+# Download each file
+for url in "${file_urls[@]}"; do
+    filename=$(basename "$url")
+    wget -P "$destination_dir" "$url"
+done
+
+echo "All files have been downloaded to $destination_dir"

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"]
+`

generateFiles.mts

@@ -0,0 +1,99 @@
+import { HfInference } from '@huggingface/inference'
+import { RepoFile } from './types.mts'
+import { createLlamaPrompt } from './createLlamaPrompt.mts'
+import { parseTutorial } from './parseTutorial.mts'
+import { getGradioApp } from './getGradioApp.mts'
+import { getStreamlitApp } from './getStreamlitApp.mts'
+import { getWebApp } from './getWebApp.mts'
+import { getReactApp } from './getReactApp.mts'
+import { isStreamlitAppPrompt } from './isStreamlitAppPrompt.mts'
+import { isPythonOrGradioAppPrompt } from './isPythonOrGradioAppPrompt.mts'
+import { isReactAppPrompt } from './isReactAppPrompt.mts'
+
+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, files, instructions } =
+  isStreamlitAppPrompt(prompt)
+    ? getStreamlitApp(prompt)
+    : isPythonOrGradioAppPrompt(prompt)
+    ? getGradioApp(prompt)
+    : isReactAppPrompt(prompt)
+    ? getReactApp(prompt)
+    : getWebApp(prompt)
+
+  const inputs = createLlamaPrompt(instructions) + "\nSure! Here are the source files:\n" + 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",
+      inputs,
+      parameters: {
+        do_sample: true,
+
+        // for  "codellama/CodeLlama-34b-Instruct-hf":
+        //  `inputs` tokens + `max_new_tokens` must be <= 8192
+        //  error: `inputs` must have less than 4096 tokens.
+
+        // for  "tiiuae/falcon-180B-chat":
+        //  `inputs` tokens + `max_new_tokens` must be <= 8192
+        //  error: `inputs` must have less than 4096 tokens.
+        max_new_tokens: 4096,
+        return_full_text: false,
+      }
+    })) {
+
+      tutorial += output.token.text
+      process.stdout.write(output.token.text)
+      // res.write(output.token.text)
+      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 generatedFiles = parseTutorial(tutorial).map(({ filename, content }) => ({
+    path: `${filename || ""}`.trim().replaceAll(" ", ""),
+    content: `${content || ""}`
+  } as RepoFile))
+  .filter(res => res.path.length && res.content.length)
+
+  return [...generatedFiles, ...files]
+}

getGradioApp.mts

@@ -0,0 +1,43 @@
+import { gradioDoc } from "./gradioDoc.mts"
+
+export function getGradioApp(prompt: string) {
+  const prefix = "# In app.py:\n```"
+
+  const instructions = [
+    {
+      role: "system",
+      content: [
+        `You are a Python developer, expert at crafting Gradio applications to deploy to Hugging Face.`,
+        `Here is an example of a minimal Gradio application:`,
+        gradioDoc
+      ].filter(item => item).join("\n")
+    },
+    {
+      role: "user",
+      content: `Please write, file by file, the source code for a Gradio project.
+
+You are allowed to use (if necessary) the following Python modules:
+- numpy
+- gradio (version 3.39.0)
+- matplotlib
+
+Don't forget to write a README.md with the following header:
+\`\`\`
+---
+license: apache-2.0
+title: <app name>
+sdk: gradio
+sdk_version: 3.39.0
+app_file: app.py
+emoji: 👀
+colorFrom: green
+colorTo: blue
+---
+\`\`\`
+
+The app is about: ${prompt}`,
+    }
+  ]
+
+  return { prefix, files: [], instructions }
+}

getReactApp.mts

@@ -0,0 +1,73 @@
+import { alpine } from "./alpine.mts"
+import { daisy } from "./daisy.mts"
+import { dockerfile } from "./docker.mts"
+import { tsconfig } from "./typescript.mts"
+
+export function getReactApp(prompt: string) {
+  const prefix = `# In src/pages/index.tsx:\n\`\`\``
+  const files = [
+    {
+      path: `Dockerfile`,
+      content: dockerfile,
+    },
+    {
+      path: "tsconfig.json",
+      content: tsconfig
+    }
+  ]
+  const instructions = [
+    {
+      role: "system",
+      content: [
+        `You are a TypeScript developer, expert at crafting NextJS and React applications, using TailwindCSS utility classes.
+You usually use the following dependencies:
+
+\`\`\`
+"@types/node": "20.4.2",
+"@types/react": "18.2.15",
+"@types/react-dom": "18.2.7",
+"react": "18.2.0",
+"react-dom": "18.2.0",
+"typescript": "5.1.6",
+\`\`\`
+
+`,
+      ].filter(item => item).join("\n")
+    },
+    {
+      role: "user",
+      content: `
+You need to write the list of files for a new NextJS 12 application.
+The app is about: ${prompt}.
+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
+\`\`\`
+
+The project will be deployed to Hugging Face, so it must include a README.md with the following YAML header:
+\`\`\`
+---
+license: apache-2.0
+title: <APPNAME>
+sdk: docker
+emoji: 👨‍💻
+colorFrom: yellow
+colorTo: green
+---
+\`\`\`
+
+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!
+
+Remember, the app is about: ${prompt}.
+
+Remember: don't forget to define the README.md and the package.json file!`,
+    }
+  ]
+
+  return { prefix, files, instructions }
+}

getStreamlitApp.mts

@@ -0,0 +1,41 @@
+import { streamlitDoc } from "./streamlitDoc.mts";
+
+export function getStreamlitApp(prompt: string) {
+  const prefix = "# In app.py:\n```"
+
+  const instructions = [
+    {
+      role: "system",
+      content: [
+        `You are a Python developer, expert at crafting Streamlit applications to deploy to Hugging Face.`,
+        `Here is an extract from the Streamlit documentation:`,
+        streamlitDoc
+      ].filter(item => item).join("\n")
+    },
+    {
+      role: "user",
+      content: `Please write, file by file, the source code for a Streamlit app.
+
+Please limit yourself to the following Python modules:
+- numpy
+- streamlit
+- matplotlib
+
+Don't forget to write a README.md with the following header:
+\`\`\`
+---
+license: apache-2.0
+title: <app name>
+sdk: streamlit
+emoji: 👀
+colorFrom: green
+colorTo: blue
+---
+\`\`\`
+
+The app is about: ${prompt}`,
+    }
+  ]
+
+  return { prefix, files: [], instructions }
+}

getWebApp.mts

@@ -0,0 +1,54 @@
+import { alpine } from "./alpine.mts"
+import { daisy } from "./daisy.mts"
+
+export function getWebApp(prompt: string) {
+  const prefix = `# In index.html:\n\`\`\`
+<html><head><link href="https://cdn.jsdelivr.net/npm/daisyui@3.1.6/dist/full.css" rel="stylesheet" type="text/css" /><script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script><script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio"></script><script defer src="https://cdnjs.cloudflare.com/ajax/libs/three.js/0.156.1/three.min.js"></script><script type="module" src="main.js"></script><title>`
+
+  const instructions = [
+    {
+      role: "system",
+      content: [
+        `You are a JavaScript developer, expert at crafting applications using AlpineJS, DaisyUI and Tailwind.`,
+        `Here is an extract from the AlpineJS documentation:`,
+        alpine,
+        `Here is an extract from the DaisyUI documentation:`,
+        daisy
+      ].filter(item => item).join("\n")
+    },
+    {
+      role: "user",
+      content: `Please write, file by file, the source code for a HTML JS app.
+
+Here are some recommended librairies:
+- AlpineJS (use "https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js")
+- DaisyUI (use "https://cdn.jsdelivr.net/npm/daisyui@3.1.6/dist/full.css")
+- Tailwind (use "https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio")
+- Three.js (use "https://cdnjs.cloudflare.com/ajax/libs/three.js/0.156.1/three.min.js")
+
+Those library will be globally exposed thanks to the <script> dependencies, so you do not need to write "import ... from ..".
+
+Some remarks:
+- DO NOT USE VUE.JS
+
+Remember, you need to write the index.html but also the app.js and/or the style.css files!
+DO NOT WRITE AN EXAMPLE! WRITE THE FULL CODE!!
+
+Don't forget to write a README.md with the following header:
+\`\`\`
+---
+license: apache-2.0
+title: <app name>
+sdk: static
+emoji: 👨‍💻
+colorFrom: yellow
+colorTo: green
+---
+\`\`\`
+
+The app is about: ${prompt}`,
+    }
+  ]
+
+  return { prefix, files: [], instructions }
+}

gradioDoc.mts

@@ -0,0 +1,44 @@
+export const gradioDoc = `
+# Gradio Code Example
+
+\`\`\`python
+import gradio as gr
+
+def tax_calculator(income, marital_status, assets):
+    tax_brackets = [(10, 0), (25, 8), (60, 12), (120, 20), (250, 30)]
+    total_deductible = sum(assets["Cost"])
+    taxable_income = income - total_deductible
+
+    total_tax = 0
+    for bracket, rate in tax_brackets:
+        if taxable_income > bracket:
+            total_tax += (taxable_income - bracket) * rate / 100
+
+    if marital_status == "Married":
+        total_tax *= 0.75
+    elif marital_status == "Divorced":
+        total_tax *= 0.8
+
+    return round(total_tax)
+
+demo = gr.Interface(
+    tax_calculator,
+    [
+        "number",
+        gr.Radio(["Single", "Married", "Divorced"]),
+        gr.Dataframe(
+            headers=["Item", "Cost"],
+            datatype=["str", "number"],
+            label="Assets Purchased this Year",
+        ),
+    ],
+    "number",
+    examples=[
+        [10000, "Married", [["Suit", 5000], ["Laptop", 800], ["Car", 1800]]],
+        [80000, "Single", [["Suit", 800], ["Watch", 1800], ["Car", 800]]],
+    ],
+)
+
+demo.launch()
+\`\`\`
+`

index.mts

@@ -0,0 +1,126 @@
+import express from 'express'
+import { createSpace } from './createSpace.mts'
+import { generateFiles } from './generateFiles.mts'
+
+const app = express()
+const port = 7860
+
+const minPromptSize = 16 // if you change this, you will need to also change in public/index.html
+const timeoutInSec = 15 * 60
+
+console.log('timeout set to 30 minutes')
+
+app.use(express.static('public'))
+
+const pending: {
+  total: number;
+  queue: string[];
+} = {
+  total: 0,
+  queue: [],
+}
+ 
+const endRequest = (id: string, reason: string) => {
+  if (!id || !pending.queue.includes(id)) {
+    return
+  }
+  
+  pending.queue = pending.queue.filter(i => i !== id)
+  console.log(`request ${id} ended (${reason})`)
+}
+
+app.get('/debug', (req, res) => {
+  res.write(JSON.stringify({
+    nbTotal: pending.total,
+    nbPending: pending.queue.length,
+    queue: pending.queue,
+  }))
+  res.end()
+})
+
+app.get('/app', async (req, res) => {
+  if (`${req.query.prompt}`.length < minPromptSize) {
+    res.write(`prompt too short, please enter at least ${minPromptSize} characters`)
+    res.end()
+    return
+  }
+
+  const token = `${req.query.token}`
+
+  if (!token.startsWith("hf_")) {
+    res.write(`the provided token seems to be invalid`)
+    res.end()
+    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')
+  })
+
+  setTimeout(() => {
+    endRequest(id, `timed out after ${timeoutInSec}s`)
+  }, timeoutInSec * 1000)
+
+  let nbAttempts = 3
+
+  let files = []
+
+  while (nbAttempts-- > 0) {
+    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
+    }
+  }
+
+  if (files.length > 0) {
+    console.log("files:", JSON.stringify(files, null, 2))
+
+    await createSpace(files, token)
+  }
+
+  // res.write(JSON.stringify(files, null, 2))
+  // res.write(`</div>`)
+  res.end()
+})
+
+
+app.listen(port, () => { console.log(`Open http://localhost:${port}`) })
+

isPythonOrGradioAppPrompt.mts

@@ -0,0 +1,5 @@
+export function isPythonOrGradioAppPrompt(prompt: string) {
+  const lowerCasePrompt = prompt.toLocaleLowerCase()
+  return lowerCasePrompt.includes("python")
+     || lowerCasePrompt.includes("gradio")
+}

isReactAppPrompt.mts

@@ -0,0 +1,9 @@
+export function isReactAppPrompt(prompt: string) {
+  const lowerCasePrompt = prompt.toLocaleLowerCase()
+  return lowerCasePrompt.includes("react")
+     || lowerCasePrompt.includes("create react app")
+     || lowerCasePrompt.includes("reactjs")
+     || lowerCasePrompt.includes("next app")
+     || lowerCasePrompt.includes("nextjs app")
+     || lowerCasePrompt.includes("nextjs")
+}

isStreamlitAppPrompt.mts

@@ -0,0 +1,4 @@
+export function isStreamlitAppPrompt(prompt: string) {
+  const lowerCasePrompt = prompt.toLocaleLowerCase()
+  return lowerCasePrompt.includes("streamlit")
+}

parseTutorial.mts

@@ -0,0 +1,12 @@
+export function parseTutorial(text: string): Array<{ filename: string; content: string }> {
+  const result: { filename: string; content: string; }[] = [];
+  const regex = /#\s+(?:And finally,\s+)?in\s+(?:(?:the|your)\s+)?(.*)(?:, add the following code)?:\n```(?:\w+\n)?([\s\S]*?)```/gi;
+  let match: RegExpExecArray | null;
+  while ((match = regex.exec(text)) !== null) {
+      result.push({
+          filename: match[1],
+          content: match[2].trim(),
+      });
+  }
+  return result;
+}

streamlitDoc.mts

@@ -0,0 +1,77 @@
+export const streamlitDoc = `
+# Streamlit Documentation
+## st.number_input(label, min_value=None, max_value=None, value=, step=None, format=None, key=None, help=None, on_change=None, args=None, kwargs=None, *, disabled=False, label_visibility="visible")
+Display a numeric input widget.
+Parameters
+----------
+label : str
+    A short label explaining to the user what this input is for.
+    The label can optionally contain Markdown and supports the following
+    elements: Bold, Italics, Strikethroughs, Inline Code, Emojis, and Links.
+    This also supports:
+    * Emoji shortcodes, such as \`:+1:\`  and \`:sunglasses:\`.
+      For a list of all supported codes,
+      see https://share.streamlit.io/streamlit/emoji-shortcodes.
+    * LaTeX expressions, by wrapping them in "$" or "$$" (the "$$"
+      must be on their own lines). Supported LaTeX functions are listed
+      at https://katex.org/docs/supported.html.
+    * Colored text, using the syntax \`:color[text to be colored]\`,
+      where \`color\` needs to be replaced with any of the following
+      supported colors: blue, green, orange, red, violet, gray/grey, rainbow.
+    Unsupported elements are unwrapped so only their children (text contents) render.
+    Display unsupported elements as literal characters by
+    backslash-escaping them. E.g. \`1\. Not an ordered list\`.
+    For accessibility reasons, you should never set an empty label (label="")
+    but hide it with label_visibility if needed. In the future, we may disallow
+    empty labels by raising an exception.
+min_value : int, float, or None
+    The minimum permitted value.
+    If None, there will be no minimum.
+max_value : int, float, or None
+    The maximum permitted value.
+    If None, there will be no maximum.
+value : int, float, or None
+    The value of this widget when it first renders.
+    Defaults to min_value, or 0.0 if min_value is None
+step : int, float, or None
+    The stepping interval.
+    Defaults to 1 if the value is an int, 0.01 otherwise.
+    If the value is not specified, the format parameter will be used.
+format : str or None
+    A printf-style format string controlling how the interface should
+    display numbers. Output must be purely numeric. This does not impact
+    the return value. Valid formatters: %d %e %f %g %i %u
+key : str or int
+    An optional string or integer to use as the unique key for the widget.
+    If this is omitted, a key will be generated for the widget
+    based on its content. Multiple widgets of the same type may
+    not share the same key.
+help : str
+    An optional tooltip that gets displayed next to the input.
+on_change : callable
+    An optional callback invoked when this number_input's value changes.
+args : tuple
+    An optional tuple of args to pass to the callback.
+kwargs : dict
+    An optional dict of kwargs to pass to the callback.
+disabled : bool
+    An optional boolean, which disables the number input if set to
+    True. The default is False. This argument can only be supplied by
+    keyword.
+label_visibility : "visible", "hidden", or "collapsed"
+    The visibility of the label. If "hidden", the label doesn't show but there
+    is still empty space for it above the widget (equivalent to label="").
+    If "collapsed", both the label and the space are removed. Default is
+    "visible". This argument can only be supplied by keyword.
+Returns
+-------
+int or float
+    The current value of the numeric input widget. The return type
+    will match the data type of the value parameter.
+Example
+-------
+>>> import streamlit as st
+>>>
+>>> number = st.number_input('Insert a number')
+>>> st.write('The current number is ', number)
+`

types.mts

@@ -0,0 +1,4 @@
+export interface RepoFile {
+  path: string
+  content: string
+}

typescript.mts

@@ -0,0 +1,28 @@
+export const tsconfig = `{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}`