Proposal: Improve llama.cpp snippet (#778)

In this PR, I propose some changes:
- Update binary name to `llama-cli` (for more details, see this PR:
ggml-org/llama.cpp#7809 and this [homebrew
formula](https://github.com/Homebrew/homebrew-core/blob/03cf5d39d8bf27dfabfc90d62c9a3fe19205dc2a/Formula/l/llama.cpp.rb))
- Add method to download llama.cpp via pre-built release
- Split snippet into 3 sections: `title`, `setup` and `command`
- Use `--conversation` mode to start llama.cpp in chat mode (chat
template is now supported, ref:
ggml-org/llama.cpp#8068)

---

Proposal for the UI:

(Note: Maybe the 3 sections title - setup - command can be more
separated visually)


![image](https://github.com/huggingface/huggingface.js/assets/7702203/2bd302f0-88b1-4057-9cd3-3cf4536aae50)

Author: ngxson

packages/tasks/src/index.ts

@@ -47,7 +47,7 @@ export { snippets };
 export { SKUS, DEFAULT_MEMORY_OPTIONS } from "./hardware";
 export type { HardwareSpec, SkuType } from "./hardware";
 export { LOCAL_APPS } from "./local-apps";
-export type { LocalApp, LocalAppKey } from "./local-apps";
+export type { LocalApp, LocalAppKey, LocalAppSnippet } from "./local-apps";
 
 export { DATASET_LIBRARIES_UI_ELEMENTS } from "./dataset-libraries";
 export type { DatasetLibraryUiElement, DatasetLibraryKey } from "./dataset-libraries";

packages/tasks/src/local-apps.ts

@@ -1,6 +1,21 @@
 import type { ModelData } from "./model-data";
 import type { PipelineType } from "./pipelines";
 
+export interface LocalAppSnippet {
+	/**
+	 * Title of the snippet
+	 */
+	title: string;
+	/**
+	 * Optional setup guide
+	 */
+	setup?: string;
+	/**
+	 * Content (or command) to be run
+	 */
+	content: string;
+}
+
 /**
  * Elements configurable by a local app.
  */
@@ -39,36 +54,48 @@ export type LocalApp = {
 			 * And if not (mostly llama.cpp), snippet to copy/paste in your terminal
 			 * Support the placeholder {{GGUF_FILE}} that will be replaced by the gguf file path or the list of available files.
 			 */
-			snippet: (model: ModelData, filepath?: string) => string | string[];
+			snippet: (model: ModelData, filepath?: string) => string | string[] | LocalAppSnippet | LocalAppSnippet[];
 	  }
 );
 
 function isGgufModel(model: ModelData) {
 	return model.tags.includes("gguf");
 }
 
-const snippetLlamacpp = (model: ModelData, filepath?: string): string[] => {
+const snippetLlamacpp = (model: ModelData, filepath?: string): LocalAppSnippet[] => {
+	const command = (binary: string) =>
+		[
+			"# Load and run the model:",
+			`${binary} \\`,
+			`  --hf-repo "${model.id}" \\`,
+			`  --hf-file ${filepath ?? "{{GGUF_FILE}}"} \\`,
+			'  -p "You are a helpful assistant" \\',
+			"  --conversation",
+		].join("\n");
 	return [
-		`# Option 1: use llama.cpp with brew
-brew install llama.cpp
-
-# Load and run the model
-llama \\
-	--hf-repo "${model.id}" \\
-	--hf-file ${filepath ?? "{{GGUF_FILE}}"} \\
-	-p "I believe the meaning of life is" \\
-	-n 128`,
-		`# Option 2: build llama.cpp from source with curl support
-git clone https://github.com/ggerganov/llama.cpp.git 
-cd llama.cpp
-LLAMA_CURL=1 make
-
-# Load and run the model
-./main \\
-	--hf-repo "${model.id}" \\
-	-m ${filepath ?? "{{GGUF_FILE}}"} \\
-	-p "I believe the meaning of life is" \\
-	-n 128`,
+		{
+			title: "Install from brew",
+			setup: "brew install llama.cpp",
+			content: command("llama-cli"),
+		},
+		{
+			title: "Use pre-built binary",
+			setup: [
+				// prettier-ignore
+				"# Download pre-built binary from:",
+				"# https://github.com/ggerganov/llama.cpp/releases",
+			].join("\n"),
+			content: command("./llama-cli"),
+		},
+		{
+			title: "Build from source code",
+			setup: [
+				"git clone https://github.com/ggerganov/llama.cpp.git",
+				"cd llama.cpp",
+				"LLAMA_CURL=1 make llama-cli",
+			].join("\n"),
+			content: command("./llama-cli"),
+		},
 	];
 };