add support for Docker

README.md

@@ -24,7 +24,7 @@ http://localhost:7860/?prompt=A%20simple%20page%20to%20compute%20the%20BMI%20(us
 ```bash
 nvm use
 npm i
-HF_API_TOKEN=******* npm run start
+npm run start
 ```
 
 ## Building and running with Docker

public/index.html

@@ -53,7 +53,7 @@
             </p>
             <button
               class="btn disabled:text-stone-400"
-              @click="open = true, prompt = promptDraft, state = state === 'stopped' ? 'loading' : 'stopped', state === 'streaming' ? stopGeneration() : true"
+              @click="open = true, saveToken(token), prompt = promptDraft, state = state === 'stopped' ? 'loading' : 'stopped', state === 'streaming' ? stopGeneration() : true"
               :class="promptDraft.length < minPromptSize ? 'btn-neutral' : state === 'stopped' ? 'btn-accent' : 'btn-warning'"
               :disabled="promptDraft.length < minPromptSize"
             >
@@ -141,16 +141,23 @@
       }
 
       function app() {
+
+        const storageKey = "SPACE_FACTORY_ACCESS_TOKEN"
+
         return {
           open: false,
           promptDraft:
             new URLSearchParams(window.location.search).get("prompt") || '',
           prompt: "",
+          token: localStorage.getItem(storageKey) || "",
           size: 0,
           minPromptSize: 16, // if you change this, you will need to also change in src/index.mts
           timeoutInSec: 15, // time before we determine something went wrong
           state: "stopped",
           lastTokenAt: +new Date(),
+          saveToken(token) {
+            localStorage.setItem(storageKey, token)
+          },
           init() {
             setInterval(() => {
               if (this.state === "stopped") {

public/placeholder.html

@@ -8,7 +8,7 @@
     <div class="hero min-h-screen bg-stone-100">
       <div class="hero-content text-center">
         <div class="flex flex-col max-w-xl space-y-6">
-          <h1 class="font-bold text-stone-600 mb-4">Nothing to show here (note: minimum prompt size is 16 characters)</h1>
+          <h1 class="font-bold text-stone-600 mb-4">Waiting for content..</h1>
         </div>
       </div>
     </div>

src/createSpace.mts

@@ -35,7 +35,9 @@ export const createSpace = async (files: RepoFile[], token: string) => {
     credentials,
     license: "mit",
     sdk:
-      files.some(file => file.path.includes("app.py"))
+      files.some(file => file.path.includes("Dockerfile"))
+        ? "docker"
+      : files.some(file => file.path.includes("app.py"))
         ? "streamlit"
         : "static" // "streamlit" | "gradio" | "docker" | "static";
   });

src/generateFiles.mts

@@ -4,7 +4,9 @@ import { createLlamaPrompt } from './createLlamaPrompt.mts'
 import { parseTutorial } from './parseTutorial.mts'
 import { getPythonApp} from './getPythonApp.mts'
 import { getWebApp } from './getWebApp.mts'
+import { getReactApp } from './getReactApp.mts'
 import { isPythonAppPrompt } from './isPythonAppPrompt.mts'
+import { isReactAppPrompt } from './isReactAppPrompt.mts'
 
 export const generateFiles = async (prompt: string, token: string) => {
   if (`${prompt}`.length < 2) {
@@ -14,6 +16,8 @@ export const generateFiles = async (prompt: string, token: string) => {
   const { prefix, instructions } =
     isPythonAppPrompt(prompt)
     ? getPythonApp(prompt)
+    : isReactAppPrompt(prompt)
+    ? getReactApp(prompt)
     : getWebApp(prompt)
 
   const inputs = createLlamaPrompt(instructions) + "\nSure! Here are the source files:\n" + prefix
@@ -60,7 +64,7 @@ let tutorial = prefix
   
   console.log("analyzing the generated instructions..")
   const files = parseTutorial(tutorial).map(({ filename, content }) => ({
-    path: `${filename || ""}`.trim(),
+    path: `${filename || ""}`.trim().replace(" ", ""),
     content: `${content || ""}`
   } as RepoFile))
   .filter(res => res.path.length && res.content.length)

src/getReactApp.mts

@@ -0,0 +1,61 @@
+import { alpine } from "./alpine.mts"
+import { daisy } from "./daisy.mts"
+
+export function getReactApp(prompt: string) {
+  const prefix = `# In src/main.tsx:\n\`\`\``
+  const instructions = [
+    {
+      role: "system",
+      content: [
+        `You are a TypeScript developer, expert at crafting NextJS and React applications, using TailwindCSS utility classes.`,
+      ].filter(item => item).join("\n")
+    },
+    {
+      role: "user",
+      content: `Please write, file by file, the source code for a Next 12 application.
+
+The app should be buildable when we call:
+
+\`\`\`
+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:
+\`\`\`
+---
+license: apache-2.0
+title: <APPNAME>
+sdk: docker
+emoji: 👨‍💻
+colorFrom: yellow
+colorTo: green
+---
+\`\`\`
+
+Of course, you MUST replace <APPNAME> with a good app name!
+
+The app is about: ${prompt}`,
+    }
+  ]
+
+  return { prefix, instructions }
+}

src/getWebApp.mts

@@ -1,30 +1,37 @@
 import { alpine } from "./alpine.mts"
+import { daisy } from "./daisy.mts"
 
 export function getWebApp(prompt: string) {
-  const prefix = "# In index.html:\n```"
+  const prefix = `# In index.html:\n\`\`\`
+<html><head><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/full.css" rel="stylesheet" type="text/css" /><script defer src="https://cdn.jsdelivr.net/npm/[email protected]/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 alpine documentation:`,
-        alpine
+        `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.
 
-Remember, these library importats are mandatory:
+Here are some recommended librairies:
 - AlpineJS (use "https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js")
 - DaisyUI (use "https://cdn.jsdelivr.net/npm/[email protected]/dist/full.css")
 - Tailwind (use "https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio")
-
-But you can optionally also load those:
 - Three.js (use "https://cdnjs.cloudflare.com/ajax/libs/three.js/0.156.1/three.min.js")
 
-The rest should be written using vanilla javascript
+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
+
+Rember, you need to write the index.html but also the app.js and/or the style.css files!
 
 Don't forget to write a README.md with the following header:
 \`\`\`

src/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")
+}