improvements

src/app/main.tsx

@@ -123,9 +123,9 @@ export default function Main() {
 
         let newActionnables = []
         try {
-          newActionnables = (JSON.parse(
-            `[${rawActionnables.split("]")[0] || ""}]`
-          ) as string[]).map(item =>
+          // we remove all [ or ]
+          const sanitized = rawActionnables.replaceAll("[", "").replaceAll("]", "")
+          newActionnables = (JSON.parse(`[${sanitized}]`) as string[]).map(item =>
             // clean the words to remove any punctuation
             item.replace(/\W/g, '').trim()
           )

src/app/predict.ts

@@ -24,6 +24,9 @@ export async function predict(inputs: string) {
       if (
         instructions.includes("</s>") || 
         instructions.includes("<s>") ||
+        instructions.includes("[INST]") ||
+        instructions.includes("[/INST]") ||
+        instructions.includes("<SYS>") ||
         instructions.includes("</SYS>") ||
         instructions.includes("<|end|>") ||
         instructions.includes("<|assistant|>")
@@ -41,6 +44,9 @@ export async function predict(inputs: string) {
     .replaceAll("<|end|>", "")
     .replaceAll("<s>", "")
     .replaceAll("</s>", "")
+    .replaceAll("[INST]", "")
+    .replaceAll("[/INST]", "") 
+    .replaceAll("<SYS>", "")
     .replaceAll("</SYS>", "")
     .replaceAll("<|assistant|>", "")
     .replaceAll('""', '"')

src/app/prompts.ts

@@ -1,5 +1,5 @@
 import { Game } from "./games/types"
-
+import { createLlamaPrompt } from "@/lib/createLlamaPrompt"
 
 export const getPrompts = (game: Game, situation: string = "", actionnable: string = "") => {
 
@@ -8,72 +8,75 @@ export const getPrompts = (game: Game, situation: string = "", actionnable: stri
   const currentPrompt = situation
     ? [...game.getScenePrompt(situation)].join(", ")
     : initialPrompt
-
-  const userSituationPrompt = [
-    `[PROMPT] Player is currently in "${currentPrompt}". Player clicked on the "${actionnable}".`
-  ]
+  
+  const userSituationPrompt = `Player is currently in "${currentPrompt}". Player clicked on the "${actionnable}".`
 
   const baseSituationPromptIfWeHaveHistory = initialPrompt !== currentPrompt
     ? ` You must imagine the most plausible next scene, based on where the player was located before and is now, and also what the player did before and are doing now.
 Here is the original scene in which the user was located at first, which will inform you about the general settings to follow (you must respect this): "${initialPrompt}".`
     : ""
 
-  const situationSystemPrompt = [
-    `[INST] <<SYS>>
-You are the AI game master of a role video game.${baseSituationPromptIfWeHaveHistory}
-You are going to receive new information about the current whereabouts of the player.
-Please describe the next plausible scene to display in intricate details: the environment, lights, era, characters, objects, textures, light etc. You must include important objects, that the user can click on (eg. characters, doors, vehicles, useful objects).
-<</SYS>>`,
-  ]
-
-  const situationPrompt = [
-    ...situationSystemPrompt,
-    ...userSituationPrompt,
-  ].join(" ")
-
-  const actionnablesSystemPrompt = [
-    `[INST] <<SYS>>
-You are an API endpoint that can return a list of objects thare are in a scene.
-You must list basic name of things (eg. "parrot", "chest", "spaceship", "glass", "door", "person", "window", "light", "knob", "button" <etc styleName=""></etc>
-The answer must be a JSON array, ie. a list of quoted strings.
-<</SYS>>`,
-  ]
-
-  const actionnablesPrompt = [
-    ...actionnablesSystemPrompt,
-    currentPrompt
-  ].join(" ")
+  const situationPrompt = createLlamaPrompt([
+    {
+      role: "system",
+      content: [
+        `You are the AI game master of a role video game.`,
+        baseSituationPromptIfWeHaveHistory,
+        `You are going to receive new information about the current whereabouts of the player.`,
+        `Please write a caption for the next plausible scene to display in intricate details: the environment, lights, era, characters, objects, textures, light etc. You must include important objects, that the user can click on (eg. characters, doors, vehicles, useful objects).`
+      ].filter(item => item).join("\n")
+    },
+    {
+      role: "user",
+      content: userSituationPrompt
+    }
+  ])
+
+  const actionnablesPrompt = createLlamaPrompt([
+    {
+      role: "system",
+      content: [
+        `You are an API endpoint that can return a list of objects thare are in a scene.`,
+        `You must list basic name of things (eg. "parrot", "chest", "spaceship", "glass", "door", "person", "window", "light", "knob", "button" etc)`,
+        `The answer must be a JSON array, ie. a list of quoted strings.`
+      ].filter(item => item).join("\n")
+    },
+    {
+      role: "user",
+      content: userSituationPrompt
+    }
+  ])
 
   const baseDialoguePromptIfWeHaveHistory = initialPrompt !== currentPrompt
   ? `for your information, the initial game panel and scene was: "${initialPrompt}".`
   : ""
 
-  const dialogueSystemPrompt = [
-    `[INST] <<SYS>>
-You are the AI game master of a role video game.
-You are going to receive new information about the current whereabouts and action of the player.
-${baseDialoguePromptIfWeHaveHistory}
-You must imagine a funny response to speak in reaction to what the player did, like in some old point and click video games.
-Please limit yourself to only a 1 or 2 sentences, please.
-<</SYS>>`
-  ]
+  const dialoguePrompt = createLlamaPrompt([
+    {
+      role: "system",
+      content: [
+        `You are the AI game master of a role video game.`,
+        `You are going to receive new information about the current whereabouts and action of the player.`,
+        baseDialoguePromptIfWeHaveHistory,
+        `You must imagine a funny response to speak in reaction to what the player did, like in some old point and click video games.`,
+        `Please limit yourself to only a 1 or 2 sentences, please.`,
+      ].filter(item => item).join("\n")
+    },
+    {
+      role: "user",
+      content: userSituationPrompt
+    }
+  ])
 
-  const dialoguePrompt = [
-    ...dialogueSystemPrompt,
-    ...userSituationPrompt,
-  ].join(" ")
 
   const prompts = {
     initialPrompt,
     currentPrompt,
     userSituationPrompt,
     baseSituationPromptIfWeHaveHistory,
-    situationSystemPrompt,
     situationPrompt,
-    actionnablesSystemPrompt,
     actionnablesPrompt,
     baseDialoguePromptIfWeHaveHistory,
-    dialogueSystemPrompt,
     dialoguePrompt,
   }
 

src/components/business/image-renderer.tsx

@@ -23,6 +23,7 @@ export const ImageRenderer = ({
   const contextRef = useRef<CanvasRenderingContext2D | null>(null)
   const [actionnable, setActionnable] = useState<string>("")
   const [progressPercent, setProcessPercent] = useState(0)
+  const showLoaderRef = useRef(true)
 
   useEffect(() => {
     if (maskBase64) {
@@ -135,26 +136,35 @@ export const ImageRenderer = ({
     // note: when everything is fine, it takes about 45 seconds to render a new scene
 
     const computeProgress = async () => {
-      console.log("'computing progress")
-      if (!isLoading && assetUrl) {
-        console.log("Finished loading!")
+      if (!showLoaderRef.current) {
+        console.log("Asked to hide the loader")
         setProcessPercent(100)
         return
       }
 
       console.log("still loading..")
 
+      console.log("updating progress")
+      progress = progress + 1
+      setProcessPercent(progress)
+
       setTimeout(() => {
-        setProcessPercent(progress++)
+        computeProgress()
       }, 1000)
 
     }
 
     computeProgress()
+  }, [])
+
+  
+  useEffect(() => {
+    showLoaderRef.current = isLoading || !assetUrl
   }, [isLoading, assetUrl])
+  
 
   if (!assetUrl) {
-    return <div className="flex w-full h-screen items-center justify-center text-center">
+    return <div className="flex w-full pt-8 items-center justify-center text-center">
       <ProgressBar
         text="⌛"
         progressPercentage={progressPercent}

src/components/business/video-renderer.tsx

@@ -3,7 +3,7 @@
 export const VideoRenderer = ({ url }: { url?: string }) => {
 
   if (!url) {
-    return <div className="flex w-full h-screen items-center justify-center text-center">
+    return <div className="flex w-full pt-8 items-center justify-center text-center">
       <div>Rendering first frames.. (might take around 30s)</div>
     </div>
   }

src/lib/createLlamaPrompt.ts

@@ -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('');
+}