work in progress to allow people passing their own token

src/createSpace.mts

@@ -1,21 +1,34 @@
 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[]) => {
-  
-  const repoId = `space-factory-${uuidv4().slice(0, 4)}`
-  const repoName = `jbilcke-hf/${repoId}`
+export const createSpace = async (files: RepoFile[], token: string) => {
 
-  const repo: RepoDesignation = { type: "space", name: repoName }
-  const credentials: Credentials = { accessToken: process.env.HF_API_TOKEN }
+  const credentials: Credentials = { accessToken: token }
 
   const { name: username } = await whoAmI({ credentials })
-  console.log("me: ", username)
 
-  console.log("repo:", JSON.stringify(repo, null, 2))
+  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,

src/generateFiles.mts

@@ -1,56 +1,30 @@
 import { HfInference } from '@huggingface/inference'
 import { RepoFile } from './types.mts'
 import { createLlamaPrompt } from './createLlamaPrompt.mts'
-import { streamlitDoc } from './streamlitDoc.mts'
 import { parseTutorial } from './parseTutorial.mts'
+import { getPythonApp} from './getPythonApp.mts'
+import { getWebApp } from './getWebApp.mts'
+import { isPythonAppPrompt } from './isPythonAppPrompt.mts'
 
-const hf = new HfInference(process.env.HF_API_TOKEN)
-
-export const generateFiles = async (prompt: string) => {
+export const generateFiles = async (prompt: string, token: string) => {
   if (`${prompt}`.length < 2) {
     throw new Error(`prompt too short, please enter at least ${prompt} characters`)
   }
 
-  const prefix = "# In app.py:\n```"
-
-  const inputs = createLlamaPrompt([
-    {
-      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
+  const { prefix, instructions } =
+    isPythonAppPrompt(prompt)
+    ? getPythonApp(prompt)
+    : getWebApp(prompt)
 
-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 Streamlit app is about: ${prompt}`,
-    }
-  ]) + "\nSure! Here are the source files:\n" + prefix
+  const inputs = createLlamaPrompt(instructions) + "\nSure! Here are the source files:\n" + prefix
 
 let tutorial = prefix
 
   try {
+    const hf = new HfInference(token)
+
     for await (const output of hf.textGenerationStream({
+      // model: "tiiuae/falcon-180B-chat",
       model: "codellama/CodeLlama-34b-Instruct-hf",
       inputs,
       parameters: {
@@ -59,7 +33,11 @@ let tutorial = prefix
         // for  "codellama/CodeLlama-34b-Instruct-hf":
         //  `inputs` tokens + `max_new_tokens` must be <= 8192
         //  error: `inputs` must have less than 4096 tokens.
-        max_new_tokens: 1150,
+
+        // 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,
       }
     })) {
@@ -67,7 +45,10 @@ let tutorial = prefix
       tutorial += output.token.text
       process.stdout.write(output.token.text)
       // res.write(output.token.text)
-      if (tutorial.includes('<|end|>') || tutorial.includes('<|assistant|>')) {
+      if (tutorial.includes('<|end|>')
+      || tutorial.includes('[ENDINSTRUCTION]')
+      || tutorial.includes('[/TASK]')
+      || tutorial.includes('<|assistant|>')) {
         break
       }
     }

src/getPythonApp.mts

@@ -0,0 +1,41 @@
+import { streamlitDoc } from "./streamlitDoc.mts";
+
+export function getPythonApp(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, instructions }
+}

src/getWebApp.mts

@@ -0,0 +1,46 @@
+import { alpine } from "./alpine.mts"
+
+export function getWebApp(prompt: string) {
+  const prefix = "# In index.html:\n```"
+
+  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
+      ].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:
+- 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
+
+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, instructions }
+}

src/index.mts

@@ -1,12 +1,7 @@
 import express from 'express'
-import { HfInference } from '@huggingface/inference'
 import { createSpace } from './createSpace.mts'
-import { RepoFile } from './types.mts'
 import { generateFiles } from './generateFiles.mts'
 
-const hfi = new HfInference(process.env.HF_API_TOKEN)
-const hf = hfi.endpoint(process.env.HF_ENDPOINT_URL)
-
 const app = express()
 const port = 7860
 
@@ -50,6 +45,14 @@ app.get('/app', async (req, res) => {
     return
   }
 
+  const token = `${req.query.token}`
+
+  if (!token.startsWith("hf_")) {
+    res.write(`the provided token seems to be invalid`)
+    res.end()
+    return
+  }
+
   const id = `${pending.total++}`
   console.log(`new request ${id}`)
 
@@ -69,7 +72,7 @@ app.get('/app', async (req, res) => {
   let files = []
 
   while (nbAttempts-- > 0) {
-    files = await generateFiles(`${req.query.prompt || ""}`)
+    files = await generateFiles(`${req.query.prompt || ""}`, token)
     if (files.length) {
       console.log(`seems like we have ${files.length} files`)
       break
@@ -78,7 +81,7 @@ app.get('/app', async (req, res) => {
 
   console.log("files:", JSON.stringify(files, null, 2))
 
-  await createSpace(files)
+  await createSpace(files, token)
 
   res.write(JSON.stringify(files, null, 2))
   res.end()

src/isPythonAppPrompt.mts

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