File size: 2,146 Bytes
8000347
 
 
 
 
 
bdc9315
 
 
 
 
8000347
bdc9315
 
 
 
8000347
 
e1cf22b
 
 
8000347
e1cf22b
 
8000347
e1cf22b
 
 
8000347
 
e1cf22b
 
 
 
 
 
 
 
bdc9315
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
e1cf22b
bdc9315
 
 
 
967ff1b
8000347
bdc9315
8000347
bdc9315
8000347
967ff1b
 
8000347
 
 
e1cf22b
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
<script lang="ts">
	export let model: string;
	export let streaming: Boolean;
	export let temperature: number;
	export let maxTokens: number;
	export let messages: Array;

	const npmSnippet = `import { HfInference } from '@huggingface/inference'

const hf = new HfInference('your access token')`;

	$: nonStreamingSnippet = `await hf.chatCompletion({
  model: "${model}",
  messages: [
    { role: "user", content: "Complete the this sentence with words one plus one is equal " }
  ], 
  max_tokens: ${maxTokens},
  temperature: ${temperature},
  seed: 0,
});`;

	$: streamingSnippet = `let out = "";

for await (const chunk of hf.chatCompletionStream({
  model: "${model}",
  messages: [
    { role: "user", content: "Complete the equation 1+1= ,just the answer" }, 
  ],
  max_tokens: ${maxTokens}, 
  temperature: ${temperature},
  seed: 0,
})) {
  if (chunk.choices && chunk.choices.length > 0) {
    out += chunk.choices[0].delta.content;
  }  
}`;
</script>

<div class="pt-2">
	<div
		class="border-b border-gray-200 text-center text-sm font-medium text-gray-500 dark:border-gray-700 dark:text-gray-400"
	>
		<ul class="-mb-px flex flex-wrap">
			<li>
				<a
					href="#"
					class="active inline-block rounded-t-lg border-b-2 border-black p-4 text-black dark:border-blue-500 dark:text-blue-500"
					aria-current="page">Huggingface.js</a
				>
			</li>
			<li>
				<a
					href="#"
					class="inline-block rounded-t-lg border-b-2 border-transparent p-4 hover:border-gray-300 hover:text-gray-600 dark:hover:text-gray-300"
					>Curl</a
				>
			</li>
		</ul>
	</div>

	<div class="px-4 pb-4 pt-6">
		<h2 class="font-semibold">Install and instantiate</h2>
	</div>
	<pre
		class="overflow-x-auto border-y border-gray-100 bg-gray-50 px-4 py-6 text-sm dark:border-gray-800 dark:bg-gray-800/50">{npmSnippet}</pre>

	<div class="px-4 pb-4 pt-6">
		<h2 class="font-semibold">{streaming ? 'Streaming API' : 'Non-Streaming API'}</h2>
	</div>

	<pre
		class="overflow-x-auto border-y border-gray-100 bg-gray-50 px-4 py-6 text-sm dark:border-gray-800 dark:bg-gray-800/50">{streaming
			? streamingSnippet
			: nonStreamingSnippet}
  </pre>
</div>